Mit TensorFlow Agents und Flutter ein Brettspiel entwickeln

1. Hinweis

Der erstaunliche Durchbruch von AlphaGo und AlphaStar hat das Potenzial des maschinellen Lernens für die Entwicklung von Spiel-KI-Agenten auf übermenschlichem Niveau gezeigt. Es ist eine gute Übung, ein kleines ML-basiertes Spiel zu entwickeln, um die Fähigkeiten zu erlernen, die für die Entwicklung leistungsstarker Spiel-Agents erforderlich sind.

In diesem Codelab lernen Sie, wie Sie ein Brettspiel mit den folgenden Tools erstellen:

TensorFlow-Agent zum Trainieren eines Spiel-Agents mit Reinforcement Learning
TensorFlow Serving zum Bereitstellen des Modells
Flutter zum Erstellen einer plattformübergreifenden Brettspiel-App

Vorbereitung

Grundkenntnisse der Flutter-Entwicklung mit Dart
Grundkenntnisse im Bereich maschinelles Lernen mit TensorFlow, z. B. Training im Vergleich zur Bereitstellung
Grundlegende Kenntnisse von Python, Terminals und Docker

Lerninhalte

Trainieren eines NPC-Agents (Non-Player Character) mit TensorFlow Agents
Trainiertes Modell mit TensorFlow Serving bereitstellen
Plattformübergreifendes Flutter-Brettspiel erstellen

Voraussetzungen

Flutter SDK
Android- und iOS-Einrichtung für Flutter
Desktop-Einrichtung für Flutter
Web für Flutter einrichten
Visual Studio Code (VS Code) für Flutter und Dart einrichten
Docker
Bash
Python 3.7 und höher

2. The Plane Strike Game

Das Spiel, das Sie in diesem Codelab entwickeln, heißt „Plane Strike“. Es ist ein kleines Brettspiel für zwei Spieler, das dem Brettspiel „Battleship“ ähnelt. Die Regeln sind ganz einfach:

Der menschliche Spieler spielt gegen einen NPC-Agenten, der durch maschinelles Lernen trainiert wurde. Der menschliche Spieler kann das Spiel starten, indem er auf eine beliebige Zelle auf dem Spielfeld des KI-Agenten tippt.
Zu Beginn des Spiels haben der menschliche Spieler und der Agent jeweils ein „Flugzeug“-Objekt (8 grüne Zellen, die ein „Flugzeug“ bilden, wie auf dem Spielfeld des menschlichen Spielers in der Animation unten zu sehen ist) auf ihrem eigenen Spielfeld. Diese „Flugzeuge“ werden zufällig platziert und sind nur für die Besitzer des Spielfelds sichtbar und für ihre Gegner verborgen.
Der menschliche Spieler und der Agent schlagen abwechselnd auf ein Feld des jeweils anderen Spielfelds. Der menschliche Spieler kann auf eine beliebige Zelle auf dem Spielfeld des Agents tippen, während der Agent die Auswahl automatisch auf Grundlage der Vorhersage eines Modells für maschinelles Lernen trifft. Die angeklickte Zelle wird rot, wenn es sich um eine „Flugzeug“-Zelle („Treffer“) handelt, andernfalls wird sie gelb („Fehlschuss“).
Wer zuerst 8 rote Zellen erreicht, gewinnt das Spiel. Danach wird das Spiel mit neuen Boards neu gestartet.

Hier ist ein Beispiel für das Gameplay:

3. Flutter-Entwicklungsumgebung einrichten

Für die Flutter-Entwicklung benötigen Sie zwei Softwarekomponenten, um dieses Codelab durchzuarbeiten: das Flutter SDK und einen Editor.

Sie können das Codelab auf einem der folgenden Geräte ausführen:

Der iOS-Simulator (erfordert die Installation von Xcode-Tools).
Android Emulator (Einrichtung in Android Studio erforderlich)
Ein Browser (für das Debugging ist Chrome erforderlich).
Als Windows-, Linux- oder macOS-Desktopanwendung. Sie müssen auf der Plattform entwickeln, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie unter Windows entwickeln, um auf die entsprechende Build-Kette zuzugreifen. Es gibt betriebssystemspezifische Anforderungen, die auf docs.flutter.dev/desktop ausführlich beschrieben werden.

4. Einrichten

So laden Sie den Code für dieses Codelab herunter:

Rufen Sie das GitHub-Repository für dieses Codelab auf.
Klicken Sie auf Code > Download zip, um den gesamten Code für dieses Codelab herunterzuladen.

Entpacken Sie die heruntergeladene ZIP-Datei, um einen codelabs-main-Stammordner mit allen benötigten Ressourcen zu entpacken.

Für dieses Codelab benötigen Sie nur die Dateien im Unterverzeichnis tfagents-flutter/ im Repository, das mehrere Ordner enthält:

Die Ordner step0 bis step6 enthalten den Startcode, auf dem Sie für jeden Schritt in diesem Codelab aufbauen.
Der Ordner finished enthält den vollständigen Code der fertigen Beispiel-App.
Jeder Ordner enthält einen Unterordner backbend mit dem Backend-Code und einen Unterordner frontend mit dem Flutter-Frontend-Code.

5. Abhängigkeiten für das Projekt herunterladen

Backend

Öffnen Sie das Terminal und wechseln Sie in den Unterordner tfagents-flutter. Führen Sie den folgenden Befehl aus:

pip install -r requirements.txt

Frontend

Klicken Sie in VS Code auf Datei > Ordner öffnen und wählen Sie dann den Ordner step0 aus dem Quellcode aus, den Sie zuvor heruntergeladen haben.
Öffnen Sie die Datei step0/frontend/lib/main.dart. Wenn ein VS Code-Dialogfeld angezeigt wird, in dem Sie aufgefordert werden, die erforderlichen Pakete für die Starter-App herunterzuladen, klicken Sie auf Pakete herunterladen.
Wenn dieses Dialogfeld nicht angezeigt wird, öffnen Sie das Terminal und führen Sie den Befehl flutter pub get im Ordner step0/frontend aus.

6. Schritt 0: Start-App ausführen

Öffnen Sie die Datei step0/frontend/lib/main.dart in VS Code. Achten Sie darauf, dass der Android-Emulator oder iOS-Simulator richtig eingerichtet ist und in der Statusleiste angezeigt wird.

So sieht es beispielsweise aus, wenn Sie das Pixel 5 mit dem Android-Emulator verwenden:

So sieht es aus, wenn Sie das iPhone 13 mit dem iOS-Simulator verwenden:

Klicken Sie auf Fehlerbehebung starten.

App ausführen und ausprobieren

Die App sollte im Android Emulator oder iOS Simulator gestartet werden. Die Benutzeroberfläche ist recht einfach. Es gibt zwei Spielbretter. Ein menschlicher Spieler kann oben auf eine beliebige Zelle auf dem Brett des Agenten tippen, um eine Markierung zu setzen. Sie trainieren einen intelligenten Agenten, der automatisch vorhersagt, wo er zuschlagen soll, basierend auf dem Brett des menschlichen Spielers.

Im Hintergrund sendet die Flutter-App das aktuelle Spielfeld des menschlichen Spielers an das Backend, in dem ein Reinforcement-Learning-Modell ausgeführt wird, das eine vorhergesagte Zellenposition zurückgibt, die als Nächstes getroffen werden soll. Das Frontend zeigt das Ergebnis in der Benutzeroberfläche an, nachdem es die Antwort erhalten hat.

Wenn Sie jetzt auf eine beliebige Zelle im Board des Kundenservicemitarbeiters klicken, passiert nichts, da die App noch nicht mit dem Backend kommunizieren kann.

7. Schritt 1: TensorFlow Agents-Python-Umgebung erstellen

Das primäre Ziel dieses Codelabs ist es, einen Agenten zu entwerfen, der durch Interaktion mit einer Umgebung lernt. Das Spiel „Plane Strike“ ist relativ einfach und es ist möglich, Regeln für den NPC-Agenten manuell zu erstellen. Sie verwenden jedoch bestärkendes Lernen, um einen Agenten zu trainieren, damit Sie die erforderlichen Fähigkeiten erlernen und in Zukunft problemlos Agenten für andere Spiele erstellen können.

In der Standardeinstellung für Reinforcement Learning (RL) erhält der Agent in jedem Zeitschritt eine Beobachtung und wählt eine Aktion aus. Die Aktion wird auf die Umgebung angewendet und die Umgebung gibt eine Belohnung und eine neue Beobachtung zurück. Der Agent trainiert eine Richtlinie, um Aktionen auszuwählen, mit denen die Summe der Belohnungen (auch als Rendite bezeichnet) maximiert wird. Durch das wiederholte Spielen des Spiels kann der Agent die Muster lernen und seine Fähigkeiten verbessern, um das Spiel zu meistern. Um das Spiel „Plane Strike“ als RL-Problem zu formulieren, betrachten Sie den Brettzustand als Beobachtung, eine Schlagposition als Aktion und das Treffer-/Fehlsignal als Belohnung.

Zum Trainieren des NPC-Agents verwenden Sie TensorFlow Agents, eine zuverlässige, skalierbare und benutzerfreundliche Bibliothek für Reinforcement Learning für TensorFlow.

TF Agents eignet sich hervorragend für Reinforcement Learning, da es eine Vielzahl von Codelabs, Beispielen und eine umfassende Dokumentation für den Einstieg bietet. Mit TF Agents können Sie realistische und komplexe RL-Probleme skalierbar lösen und schnell neue RL-Algorithmen entwickeln. Sie können ganz einfach zwischen verschiedenen Agents und Algorithmen wechseln, um Tests durchzuführen. Es ist außerdem gut getestet und einfach zu konfigurieren.

Es gibt viele vorgefertigte Spielumgebungen, die in OpenAI Gym (z.B. Atari-Spiele), Mujuco usw. implementiert sind und die von TF Agents problemlos genutzt werden können. Da es sich bei Plane Strike um ein vollständig benutzerdefiniertes Spiel handelt, müssen Sie zuerst eine neue Umgebung von Grund auf implementieren.

Um eine TF Agents-Python-Umgebung zu implementieren, müssen Sie die folgenden Methoden implementieren:

class YourGameEnv(py_environment.PyEnvironment):

  def __init__(self):
    """Initialize environment."""


  def action_spec(self):
    """Return action_spec."""


  def observation_spec(self):
    """Return observation_spec."""


  def _reset(self):
    """Return initial_time_step."""


  def _step(self, action):
    """Apply action and return new time_step."""

Die wichtigste ist die _step()-Funktion, die eine Aktion entgegennimmt und ein neues time_step-Objekt zurückgibt. Im Fall des Spiels „Plane Strike“ haben Sie ein Spielbrett. Wenn eine neue Strike-Position eingeht, ermittelt die Umgebung anhand des Zustands des Spielbretts Folgendes:

Wie sollte das Spielfeld als Nächstes aussehen (sollte die Zelle ihre Farbe in Rot oder Gelb ändern, wenn man die Position des versteckten Flugzeugs berücksichtigt)?
Welche Belohnung sollte der Spieler für diese Position erhalten (Trefferbelohnung oder Strafpunkt für Fehler)?
Sollte das Spiel beendet werden (hat jemand gewonnen?)
Fügen Sie der Datei _planestrike_py_environment.py den folgenden Code zur Funktion _step() hinzu:

if self._hit_count == self._plane_size:
    self._episode_ended = True
    return self.reset()

if self._strike_count + 1 == self._max_steps:
    self.reset()
    return ts.termination(
        np.array(self._visible_board, dtype=np.float32), UNFINISHED_GAME_REWARD
    )

self._strike_count += 1
action_x = action // self._board_size
action_y = action % self._board_size
# Hit
if self._hidden_board[action_x][action_y] == HIDDEN_BOARD_CELL_OCCUPIED:
    # Non-repeat move
    if self._visible_board[action_x][action_y] == VISIBLE_BOARD_CELL_UNTRIED:
        self._hit_count += 1
        self._visible_board[action_x][action_y] = VISIBLE_BOARD_CELL_HIT
        # Successful strike
        if self._hit_count == self._plane_size:
            # Game finished
            self._episode_ended = True
            return ts.termination(
                np.array(self._visible_board, dtype=np.float32),
                FINISHED_GAME_REWARD,
            )
        else:
            self._episode_ended = False
            return ts.transition(
                np.array(self._visible_board, dtype=np.float32),
                HIT_REWARD,
                self._discount,
            )
    # Repeat strike
    else:
        self._episode_ended = False
        return ts.transition(
            np.array(self._visible_board, dtype=np.float32),
            REPEAT_STRIKE_REWARD,
            self._discount,
        )
# Miss
else:
    # Unsuccessful strike
    self._episode_ended = False
    self._visible_board[action_x][action_y] = VISIBLE_BOARD_CELL_MISS
    return ts.transition(
        np.array(self._visible_board, dtype=np.float32),
        MISS_REWARD,
        self._discount,

8. Schritt 2: Spiel-Agenten mit TensorFlow Agents trainieren

Nachdem Sie die TF Agents-Umgebung eingerichtet haben, können Sie den Spiel-Agent trainieren. In diesem Codelab verwenden Sie einen REINFORCE-Agent. REINFORCE ist ein Policy-Gradient-Algorithmus in RL. Die grundlegende Idee besteht darin, die Parameter des Richtlinien-NN anhand der während des Spiels gesammelten Belohnungssignale anzupassen, damit das Richtlinien-NN den Return bei zukünftigen Spielen maximieren kann.

Zuerst müssen Sie die Trainings- und Bewertungsumgebungen instanziieren. Fügen Sie diesen Code der Funktion train_agent() in der Datei step2/backend/training.py hinzu:

train_py_env = planestrike_py_environment.PlaneStrikePyEnvironment(
    board_size=BOARD_SIZE, discount=DISCOUNT, max_steps=BOARD_SIZE**2
)
eval_py_env = planestrike_py_environment.PlaneStrikePyEnvironment(
    board_size=BOARD_SIZE, discount=DISCOUNT, max_steps=BOARD_SIZE**2
)

train_env = tf_py_environment.TFPyEnvironment(train_py_env)
eval_env = tf_py_environment.TFPyEnvironment(eval_py_env)

Als Nächstes müssen Sie einen Agent für bestärkendes Lernen erstellen, der trainiert werden soll. In diesem Codelab verwenden Sie den REINFORCE-Agenten, der ein richtlinienbasierter Agent ist. Fügen Sie diesen Code direkt unter dem oben stehenden Code ein:

actor_net = tfa.networks.Sequential(
    [
        tfa.keras_layers.InnerReshape([BOARD_SIZE, BOARD_SIZE], [BOARD_SIZE**2]),
        tf.keras.layers.Dense(FC_LAYER_PARAMS, activation="relu"),
        tf.keras.layers.Dense(BOARD_SIZE**2),
        tf.keras.layers.Lambda(lambda t: tfp.distributions.Categorical(logits=t)),
    ],
    input_spec=train_py_env.observation_spec(),
)

optimizer = tf.keras.optimizers.Adam(learning_rate=LEARNING_RATE)

train_step_counter = tf.Variable(0)

tf_agent = reinforce_agent.ReinforceAgent(
    train_env.time_step_spec(),
    train_env.action_spec(),
    actor_network=actor_net,
    optimizer=optimizer,
    normalize_returns=True,
    train_step_counter=train_step_counter,
)

Trainieren Sie den Agenten schließlich im Trainingszyklus. Im Loop sammeln Sie zuerst einige Episoden von Spielzügen in einem Puffer und trainieren den Agenten dann mit den gepufferten Daten. Fügen Sie diesen Code der Funktion train_agent() in der Datei step2/backend/training.py hinzu:

# Collect a few episodes using collect_policy and save to the replay buffer.
collect_episode(
    train_py_env,
    collect_policy,
    COLLECT_EPISODES_PER_ITERATION,
    replay_buffer_observer,
)

# Use data from the buffer and update the agent's network.
iterator = iter(replay_buffer.as_dataset(sample_batch_size=1))
trajectories, _ = next(iterator)
tf_agent.train(experience=trajectories)
replay_buffer.clear()

Jetzt können Sie das Training starten. Wechseln Sie in Ihrem Terminal zum Ordner step2/backend auf Ihrem Computer und führen Sie Folgendes aus:

python training.py

Das Training dauert je nach Hardwarekonfiguration 8 bis 12 Stunden. Da in step3 ein vortrainiertes Modell bereitgestellt wird, müssen Sie das Training nicht selbst durchführen. In der Zwischenzeit können Sie den Fortschritt mit TensorBoard verfolgen. Öffnen Sie ein neues Terminal, rufen Sie den Ordner step2/backend auf Ihrem Computer auf und führen Sie Folgendes aus:

tensorboard --logdir tf_agents_log/

tf_agents_log ist der Ordner, der das Trainingslog enthält. Ein Beispiel für einen Trainingslauf:

Sie sehen, dass die durchschnittliche Episodenlänge abnimmt und die durchschnittliche Rendite steigt, je weiter das Training fortschreitet. Intuitiv lässt sich nachvollziehen, dass die Spieldauer kürzer wird und der Agent mehr Prämien erhält, wenn er intelligenter ist und bessere Vorhersagen trifft. Das ist sinnvoll, da der Agent das Spiel in weniger Schritten beenden möchte, um eine starke Rabattierung der Belohnung in den späteren Schritten zu minimieren.

Nach Abschluss des Trainings wird das trainierte Modell in den Ordner policy_model exportiert.

9. Schritt 3: Trainiertes Modell mit TensorFlow Serving bereitstellen

Nachdem Sie den Spiel-Agent trainiert haben, können Sie ihn mit TensorFlow Serving bereitstellen.

Wechseln Sie in Ihrem Terminal zum Ordner step3/backend auf Ihrem Computer und starten Sie TensorFlow Serving mit Docker:

docker run -t --rm -p 8501:8501 -p 8500:8500 -v "$(pwd)/backend/policy_model:/models/policy_model" -e MODEL_NAME=policy_model tensorflow/serving

Docker lädt zuerst automatisch das TensorFlow Serving-Image herunter. Das dauert etwa eine Minute. Danach sollte TensorFlow Serving gestartet werden. Das Log sollte so aussehen:

2022-05-30 02:38:54.147771: I tensorflow_serving/model_servers/server.cc:89] Building single TensorFlow model file config:  model_name: policy_model model_base_path: /models/policy_model
2022-05-30 02:38:54.148222: I tensorflow_serving/model_servers/server_core.cc:465] Adding/updating models.
2022-05-30 02:38:54.148273: I tensorflow_serving/model_servers/server_core.cc:591]  (Re-)adding model: policy_model
2022-05-30 02:38:54.262684: I tensorflow_serving/core/basic_manager.cc:740] Successfully reserved resources to load servable {name: policy_model version: 123}
2022-05-30 02:38:54.262768: I tensorflow_serving/core/loader_harness.cc:66] Approving load for servable version {name: policy_model version: 123}
2022-05-30 02:38:54.262787: I tensorflow_serving/core/loader_harness.cc:74] Loading servable version {name: policy_model version: 123}
2022-05-30 02:38:54.265010: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:38] Reading SavedModel from: /models/policy_model/123
2022-05-30 02:38:54.277811: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:90] Reading meta graph with tags { serve }
2022-05-30 02:38:54.278116: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:132] Reading SavedModel debug info (if present) from: /models/policy_model/123
2022-05-30 02:38:54.280229: I external/org_tensorflow/tensorflow/core/platform/cpu_feature_guard.cc:142] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations:  AVX2 FMA
To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags.
2022-05-30 02:38:54.332352: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-05-30 02:38:54.337000: I external/org_tensorflow/tensorflow/core/platform/profile_utils/cpu_utils.cc:114] CPU Frequency: 2193480000 Hz
2022-05-30 02:38:54.402803: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/policy_model/123
2022-05-30 02:38:54.410707: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 145695 microseconds.
2022-05-30 02:38:54.412726: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/policy_model/123/assets.extra/tf_serving_warmup_requests
2022-05-30 02:38:54.417277: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: policy_model version: 123}
2022-05-30 02:38:54.419846: I tensorflow_serving/model_servers/server_core.cc:486] Finished adding/updating models
2022-05-30 02:38:54.420066: I tensorflow_serving/model_servers/server.cc:367] Profiler service is enabled
2022-05-30 02:38:54.428339: I tensorflow_serving/model_servers/server.cc:393] Running gRPC ModelServer at 0.0.0.0:8500 ...
[warn] getaddrinfo: address family for nodename not supported
2022-05-30 02:38:54.431620: I tensorflow_serving/model_servers/server.cc:414] Exporting HTTP/REST API at:localhost:8501 ...
[evhttp_server.cc : 245] NET_LOG: Entering the event loop ...

Sie können eine Beispielanfrage an den Endpunkt senden, um zu prüfen, ob er wie erwartet funktioniert:

curl -d '{"signature_name":"action","instances":[{"0/discount":0.0,"0/observation":[[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,     0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]],"0/reward":0.0,"0/step_type":0}]}'     -X POST http://localhost:8501/v1/models/policy_model:predict

Der Endpunkt gibt eine vorhergesagte Position 45 zurück, die (5, 5) in der Mitte des Bretts ist. Wenn Sie neugierig sind, können Sie versuchen, herauszufinden, warum die Mitte des Bretts eine gute Schätzung für die erste Schlagposition ist.

{
    "predictions": [45]
}

Geschafft! Sie haben erfolgreich ein Backend erstellt, um die nächste Schlagposition für den NPC-Agenten vorherzusagen.

10. Schritt 4: Flutter-App für Android und iOS erstellen

Das Backend ist bereit. Sie können jetzt Anfragen an den Server senden, um Vorhersagen zur Position von Blitzeinschlägen aus der Flutter-App abzurufen.

Zuerst müssen Sie eine Klasse definieren, die die zu sendenden Eingaben umschließt. Fügen Sie diesen Code in die Datei step4/frontend/lib/game_agent.dart ein:

class Inputs {
  final List<double> _boardState;
  Inputs(this._boardState);

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['0/discount'] = [0.0];
    data['0/observation'] = [_boardState];
    data['0/reward'] = [0.0];
    data['0/step_type'] = [0];
    return data;
  }
}

Jetzt können Sie die Anfrage an TensorFlow Serving senden, um Vorhersagen zu treffen.

Fügen Sie diesen Code der Funktion predict() in der Datei step4/frontend/lib/game_agent.dart hinzu:

var flattenedBoardState = boardState.expand((i) => i).toList();
final response = await http.post(
  Uri.parse('http://$server:8501/v1/models/policy_model:predict'),
  body: jsonEncode(<String, dynamic>{
    'signature_name': 'action',
    'instances': [Inputs(flattenedBoardState)]
  }),
);

if (response.statusCode == 200) {
  var output = List<int>.from(
      jsonDecode(response.body)['predictions'] as List<dynamic>);
  return output[0];
} else {
  throw Exception('Error response');
}

Sobald die App die Antwort vom Backend empfängt, aktualisieren Sie die Benutzeroberfläche des Spiels, um den Fortschritt des Spiels widerzuspiegeln.

Fügen Sie diesen Code der Funktion _gridItemTapped() in der Datei step4/frontend/lib/main.dart hinzu:

int agentAction =
    await _policyGradientAgent.predict(_playerVisibleBoardState);
_agentActionX = agentAction ~/ _boardSize;
_agentActionY = agentAction % _boardSize;
if (_playerHiddenBoardState[_agentActionX][_agentActionY] ==
    hiddenBoardCellOccupied) {
  // Non-repeat move
  if (_playerVisibleBoardState[_agentActionX][_agentActionY] ==
      visibleBoardCellUntried) {
    _agentHitCount++;
  }
  _playerVisibleBoardState[_agentActionX][_agentActionY] =
      visibleBoardCellHit;
} else {
  _playerVisibleBoardState[_agentActionX][_agentActionY] =
      visibleBoardCellMiss;
}
setState(() {});

Ausführen

Klicken Sie auf Fehlerbehebung starten und warten Sie, bis die App geladen ist.
Tippen Sie auf eine beliebige Zelle im Brett des KI-Assistenten, um das Spiel zu starten.

11. Schritt 5: Flutter-App für die Desktop-Plattformen aktivieren

Neben Android und iOS unterstützt Flutter auch Desktop-Plattformen wie Linux, Mac und Windows.

Linux

Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf eingestellt ist.
Klicken Sie auf Fehlerbehebung starten und warten Sie, bis die App geladen ist.
Klicken Sie auf eine beliebige Zelle im Brett des KI-Assistenten, um das Spiel zu starten.

Mac

Für Mac müssen Sie entsprechende Berechtigungen einrichten, da die App HTTP-Anfragen an das Backend sendet. Weitere Informationen finden Sie unter Berechtigungen und die App-Sandbox.

Fügen Sie diesen Code zu step4/frontend/macOS/Runner/DebugProfile.entitlements und step4/frontend/macOS/Runner/Release.entitlements hinzu:

<key>com.apple.security.network.client</key>
<true/>

Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf eingestellt ist.
Klicken Sie auf Fehlerbehebung starten und warten Sie, bis die App geladen ist.
Klicken Sie auf eine beliebige Zelle im Brett des KI-Assistenten, um das Spiel zu starten.

Windows

Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf eingestellt ist.
Klicken Sie auf Fehlerbehebung starten und warten Sie, bis die App geladen ist.
Klicken Sie auf eine beliebige Zelle im Brett des KI-Assistenten, um das Spiel zu starten.

12. Schritt 6: Flutter-App für die Webplattform aktivieren

Sie können der Flutter-App auch Webunterstützung hinzufügen. Standardmäßig ist die Webplattform für Flutter-Apps automatisch aktiviert. Sie müssen die App also nur starten.

Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf eingestellt ist.
Klicken Sie auf Fehlerbehebung starten und warten Sie, bis die App im Chrome-Browser geladen wird.
Klicken Sie auf eine beliebige Zelle im Brett des KI-Assistenten, um das Spiel zu starten.

13. Glückwunsch

Sie haben eine Brettspiel-App mit einem KI-basierten Agenten erstellt, der gegen den menschlichen Spieler antritt.