Mit TensorFlow Agents und Flutter ein Brettspiel entwickeln

1. Hinweis

Der erstaunliche Durchbruch von AlphaGo und AlphaStar zeigte das Potenzial von maschinellem Lernen zur Entwicklung übermenschlicher Gaming-Agenten. Es ist eine unterhaltsame Übung, ein kleines ML-basiertes Spiel zu entwickeln, um die Fähigkeiten zu erlernen, die man zum Erstellen leistungsstarker Agenten braucht.

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

• TensorFlow-Agent zum Trainieren eines Spiel-Agents mit Reinforcement Learning
• TensorFlow Serving für das Modell
• Mit Flutter eine plattformübergreifende Brettspiel-App entwickeln

Vorbereitung

• Grundkenntnisse der Flutter-Entwicklung mit Dart
• Grundkenntnisse des maschinellen Lernens mit TensorFlow, z. B. Training oder Bereitstellung
• Grundkenntnisse in Python, Terminals und Docker

Lerninhalte

• NPC-Agent (Non-Player Character) mit TensorFlow-Agents trainieren
• Trainiertes Modell mit TensorFlow Serving bereitstellen
• So entwickelst du ein plattformübergreifendes Flutter-Brettspiel

Voraussetzungen

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

2. Das Plane Strike-Spiel

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

• Der Spieler spielt gegen einen NPC-Agenten, der durch maschinelles Lernen trainiert wurde. Der Spieler kann das Spiel starten, indem er auf eine beliebige Zelle auf dem Spielfeld des Agenten tippt.
• Zu Beginn des Spiels haben der menschliche Spieler und der Agent jeweils ein „Flugzeug“ -Objekt (8 grüne Zellen, die eine "Ebene" bilden, wie Sie in der Animation unten auf dem Spielfeld sehen können) auf ihren eigenen Boards; diese „Flugzeuge“ werden zufällig platziert und sind nur für die Eigentümer des Spielfelds sichtbar und für ihre Gegner verborgen.
• Spieler und Agent schlagen abwechselnd eine Zelle auf dem Spielfeld des anderen. Der Spieler kann auf eine beliebige Zelle auf dem Board des Agenten tippen, während der Agent automatisch anhand der Vorhersage eines Modells für maschinelles Lernen eine Auswahl trifft. Die gewünschte Zelle wird rot, wenn es sich um ein „Flugzeug“ handelt Zelle('hit'); andernfalls wird es gelb („miss“).
• Wer zuerst 8 rote Zellen erreicht, gewinnt das Spiel. wird das Spiel mit neuen Spielbrettern neu gestartet.

Hier ist ein Beispiel für das Spiel:

3. Flutter-Entwicklungsumgebung einrichten

Für die Flutter-Entwicklung benötigen Sie zwei Softwareprogramme für dieses Codelab: das Flutter SDK und einen Editor.

Sie können das Codelab auf jedem dieser Geräte ausführen:

• Den iOS-Simulator (erfordert die Installation von Xcode-Tools).
• Android-Emulator (Einrichtung in Android Studio erforderlich)
• Ein Browser (zur Fehlerbehebung wird Chrome benötigt)
• Als Windows-, Linux- oder macOS-Desktopanwendung Die Entwicklung muss auf der Plattform erfolgen, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie die Entwicklung unter Windows ausführen, damit Sie auf die entsprechende Build-Kette zugreifen können. Es gibt betriebssystemspezifische Anforderungen, die unter docs.flutter.dev/desktop ausführlich beschrieben werden.

4. Einrichten

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

1. Rufen Sie für dieses Codelab das GitHub-Repository auf.
2. Klicken Sie auf Code > Lade eine ZIP-Datei herunter, um den gesamten Code für dieses Codelab herunterzuladen.

3. Entpacke 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 fertigen Code für die fertige Beispiel-App.
• Jeder Ordner enthält einen backbend-Unterordner mit dem Backend-Code und einen frontend-Unterordner mit dem Flutter-Frontend-Code

5. Abhängigkeiten für das Projekt herunterladen

Backend

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

pip install -r requirements.txt

Frontend

1. Klicken Sie in VS Code auf File > Ordner öffnen und wählen Sie dann den Ordner step0 aus dem Quellcode aus, den Sie zuvor heruntergeladen haben.
2. Datei „step0/frontend/lib/main.dart“ öffnen. Wenn ein VS Code-Dialogfeld angezeigt wird, in dem Sie aufgefordert werden, die erforderlichen Pakete für die Start-App herunterzuladen, klicken Sie auf Getpackages (Pakete abrufen).
3. Wenn dieses Dialogfeld nicht angezeigt wird, öffnen Sie Ihr Terminal und führen Sie den Befehl flutter pub get im Ordner step0/frontend aus.

6. Schritt 0: Start-App ausführen

1. Öffnen Sie die Datei „step0/frontend/lib/main.dart“ in VS Code und prüfen Sie, ob der Android-Emulator oder iOS-Simulator richtig eingerichtet ist und in der Statusleiste angezeigt wird.

Wenn Sie Pixel 5 mit dem Android-Emulator verwenden, sehen Sie beispielsweise Folgendes:

Wenn Sie das iPhone 13 mit dem iOS-Simulator verwenden, sehen Sie Folgendes:

2. Klicken Sie auf Debugging starten.

Hinweis:In diesem Codelab wird davon ausgegangen, dass Sie das Modell auf Ihrem lokalen Computer bereitstellen. Wenn Sie die Modelle auf einem anderen Remote-Computer bereitstellen, ändern Sie die 10.0.2.2- oder 127.0.0.1-IP-Adresse im Code in die des Remote-Computers, auf dem TensorFlow Serving ausgeführt wird.

App ausführen und kennenlernen

Die App sollte im Android-Emulator oder iOS-Simulator gestartet werden. Die Benutzeroberfläche ist ziemlich einfach gehalten. Es gibt 2 Spielbretter. Ein Spieler kann auf der Tafel des Agenten auf eine beliebige Zelle tippen, um zu schlagen. Du trainierst einen intelligenten Agenten, der anhand des Spielfelds automatisch sagt, wo er zuschlagen muss.

Die Flutter-App sendet das aktuelle Spielfeld des Spielers an das Back-End, das ein Reinforcement Learning-Modell ausführt und eine vorhergesagte Zellenposition zurückgibt, die als Nächstes zuschlägt. Das Frontend zeigt das Ergebnis nach Empfang der Antwort in der UI an.

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

7. Schritt 1: Python-Umgebung für TensorFlow-Agents erstellen

Das Hauptziel dieses Codelabs besteht darin, einen Agent zu entwickeln, 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 zu erstellen. Mithilfe von bestärkendem Lernen kannst du einen Agenten trainieren, damit du die Fähigkeiten erlernen und in Zukunft ganz einfach Agenten für andere Spiele erstellen kannst.

In der Standardeinstellung für Reinforcement Learning (RL) erhält der Kundenservicemitarbeiter bei jedem Schritt 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 Prämien (auch als „Rückgabe“ bezeichnet) maximiert wird. Indem er das Spiel viele Male spielt, kann er die Muster lernen und seine Fähigkeiten verbessern, um das Spiel zu meistern. Um das Plane Strike-Spiel als RL-Problem zu formulieren, stellen Sie sich den Spielfeldstatus als Beobachtung, eine Schlagposition als Handlung und das Treffer-/Fehlersignal als Belohnung vor.

Hinweis:Eine ausführlichere Diskussion über Reinforcement Learning finden Sie in der Reinforcement Learning Lecture Series 2021 von DeepMind und UCL.

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

TF Agents eignen sich hervorragend für bestärkendes Lernen, da es eine große Auswahl an Codelabs, Beispielen und umfangreicher Dokumentation für den Einstieg enthält. Sie können TF Agents verwenden, um realistische und komplexe RL-Probleme mit Skalierbarkeit zu lösen und schnell neue RL-Algorithmen zu entwickeln. Sie können ganz einfach zwischen verschiedenen Agents und Algorithmen wechseln, um zu experimentieren. Außerdem ist es gut getestet und einfach zu konfigurieren.

In OpenAI Gym sind viele vordefinierte Spielumgebungen implementiert (z.B. Atari-Spiele), Mujuco usw., die TF-Agenten problemlos nutzen können. Da das Spiel „Plane Strike“ jedoch ein komplettes benutzerdefiniertes Spiel ist, müssen Sie zuerst eine komplett neue Umgebung implementieren.

Hinweis: Weitere Informationen zu TensorFlow-Agents-Umgebungen finden Sie in dieser Anleitung zu TensorFlow-Agents.

Zum Implementieren einer Python-Umgebung mit TF Agents 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 Funktion ist die _step()-Funktion, die eine Aktion ausführt und ein neues time_step-Objekt zurückgibt. Beim Spiel „Plane Strike“ haben Sie ein Spielfeld. Wenn auf dem Spielfeld eine neue Angriffsposition eintritt, ermittelt die Umgebung Folgendes:

• Wie sollte das Spielfeld als Nächstes aussehen? (Sollte die Zelle angesichts der versteckten Position des Flugzeugs ihre Farbe zu Rot oder Gelb ändern?)
• Welche Belohnung sollte der Spieler für diese Position erhalten (Erfolgsprämie oder Fehlschuss?)
• Sollte das Spiel beendet werden? (Hat jemand gewonnen?)
• Fügen Sie der Funktion _step() in der Datei _planestrike_py_environment.py den folgenden Code 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-Agent mit TensorFlow-Agents trainieren

Sobald die TF Agents-Umgebung eingerichtet ist, können Sie den Spiel-Agent trainieren. In diesem Codelab verwendest du einen REINFORCE-Agent. REINFORCE ist ein Richtlinien-Gradienten-Algorithmus in RL. Die Grundidee besteht darin, die Parameter des neuronalen Netzwerks basierend auf den während des Spiels erfassten Belohnungssignalen anzupassen, damit das Richtliniennetzwerk den Return on Investment bei zukünftigen Spielaktionen maximieren kann.

• Zuerst müssen Sie die Trainings- und Bewertungsumgebungen instanziieren. Fügen Sie der Funktion train_agent() in der Datei step2/backend/training.py diesen Code 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 Reinforcement Learning erstellen, der trainiert wird. In diesem Codelab verwenden Sie den REINFORCE-Agent, ein richtlinienbasierter Agent. Fügen Sie diesen Code direkt unter dem obigen 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 zum Schluss den Agent in der Trainingsschleife. In der Schleife erfassen Sie zuerst einige Episoden von Spielzügen in einem Puffer und trainieren dann den Agent mit den zwischengespeicherten Daten. Fügen Sie der Funktion train_agent() in der Datei step2/backend/training.py diesen Code 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 kannst du mit dem Training beginnen. Öffnen Sie im Terminal den Ordner step2/backend auf Ihrem Computer und führen Sie Folgendes aus:

python training.py

Es dauert je nach Hardwarekonfiguration 8 bis 12 Stunden, bis das Training abgeschlossen ist. Sie müssen das Training nicht selbst abschließen, da in step3 ein vortrainiertes Modell bereitgestellt wird. In der Zwischenzeit können Sie den Fortschritt mit TensorBoard überwachen. Öffnen Sie ein neues Terminal, wechseln Sie auf Ihrem Computer zum Ordner step2/backend und führen Sie folgenden Befehl aus:

tensorboard --logdir tf_agents_log/

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

Im Laufe des Trainings sehen Sie, dass die durchschnittliche Länge der Folgen abnimmt und die durchschnittliche Rendite steigt. Sie können intuitiv erkennen, dass das Spiel kürzer wird und mehr Belohnungen gesammelt werden, wenn der Agent intelligenter ist und bessere Vorhersagen trifft. Das ist sinnvoll, da der Kundenservicemitarbeiter das Spiel in weniger Schritten beenden möchte, um hohe Rabatte auf Prämien in den späteren Schritten zu minimieren.

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

Hinweis: Weitere Informationen zum Trainieren eines REINFORCE-Agents mit TensorFlow-Agents finden Sie in dieser Anleitung zu TensorFlow-Agents.

9. Schritt 3: Trainiertes Modell mit TensorFlow Serving bereitstellen

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

Hinweis:Im Ordner step3/policy_model finden Sie ein vortrainiertes SavedModel.

• Rufen Sie im Terminal den Ordner step3/backend auf Ihrem Computer auf 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 automatisch zuerst das TensorFlow-Bereitstellungs-Image herunter, was eine Minute dauert. Danach sollte TensorFlow Serving gestartet werden. Das Protokoll sollte wie dieses Code-Snippet 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 ...

Hinweis: Nachdem Sie das Docker-Image für die TensorFlow-Bereitstellung gestartet haben, können Sie http://localhost:8501/v1/models/&lt;MODEL_NAME&gt;/metadata aufrufen, um die Details der Eingabe- und Ausgabetensoren zu prüfen. Ersetzen Sie in diesem Codelab <MODEL_NAME>. mit policy_model.

Sie können eine Beispielanfrage an den Endpunkt senden, um sicherzustellen, dass 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, also (5, 5) in der Mitte des Spielfelds. Wenn Sie neugierig sind, können Sie versuchen, herauszufinden, warum die Mitte des Spielfelds für die erste Verwarnungsposition eine gute Vermutung ist.

{
    "predictions": [45]
}

Fertig! Du hast ein Backend erstellt, um die nächste Verwarnung für den NPC-Agenten vorherzusagen.

Hinweis:Bei diesem speziellen Modell für Reinforcement Learning spielen die Parameter discount, reward und step_type in der Eingabe keine Rolle, da sie sich nur auf den Trainingsprozess auswirken. Der einzige Parameter, der sich auf das Inferenzergebnis auswirkt, ist observation.

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

Das Back-End ist bereit. Sie können Anfragen an ihn senden, um Prognosen zur Verwarnungsposition aus der Flutter App abzurufen.

• Zuerst müssen Sie eine Klasse definieren, die die zu sendenden Eingaben zusammenfasst. Fügen Sie der Datei step4/frontend/lib/game_agent.dart diesen Code hinzu:

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 der Funktion predict() in der Datei step4/frontend/lib/game_agent.dart diesen Code 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 Back-End erhält, aktualisieren Sie die Spiel-UI, um den Spielfortschritt widerzuspiegeln.

• Fügen Sie der Funktion _gridItemTapped() in der Datei step4/frontend/lib/main.dart diesen Code 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

1. Klicken Sie auf Debugging starten und warten Sie, bis die Anwendung geladen ist.
2. Tippe auf eine Zelle auf dem Spielfeld des Agenten, 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

1. Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf gesetzt ist.
2. Klicken Sie auf Debugging starten und warten Sie, bis die Anwendung geladen ist.
3. Klicke auf eine Zelle auf dem Spielfeld des Agenten, um das Spiel zu starten.

Mac

1. Auf einem Mac musst du entsprechende Berechtigungen einrichten, da die App HTTP-Anfragen an das Backend sendet. Weitere Informationen findest du unter Berechtigungen und App Sandbox.

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

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

2. Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf gesetzt ist.
3. Klicken Sie auf Debugging starten und warten Sie, bis die Anwendung geladen ist.
4. Klicke auf eine Zelle auf dem Spielfeld des Agenten, um das Spiel zu starten.

Windows

1. Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf gesetzt ist.
2. Klicken Sie auf Debugging starten und warten Sie, bis die Anwendung geladen ist.
3. Klicke auf eine Zelle auf dem Spielfeld des Agenten, um das Spiel zu starten.

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

Eine weitere Möglichkeit besteht darin, die Flutter-App mit Webunterstützung zu ergänzen. Standardmäßig ist die Webplattform automatisch für Flutter-Apps aktiviert, Sie müssen sie also nur starten.

1. Achten Sie darauf, dass das Zielgerät in der Statusleiste von VSCode auf gesetzt ist.
2. Klicken Sie auf Debugging starten und warten Sie, bis die App im Chrome-Browser geladen wird.
3. Klicke auf eine Zelle auf dem Spielfeld des Agenten, um das Spiel zu starten.

13. Glückwunsch

Sie haben mit einem ML-fähigen Agent eine Brettspiel-App erstellt, mit der Sie gegen den menschlichen Spieler antreten können.

Hinweis:Flutter bietet jetzt ein Toolkit für Gelegenheitsspiele, das vordefinierte Funktionen wie Anzeigen, Ton und Musik, In-App-Käufe usw. enthält. In diesem Codelab wird das Toolkit zwar nicht verwendet, aber das Toolkit für Gelegenheitsspiele ist ein guter Ausgangspunkt, wenn Sie Ihr eigenes Spiel entwickeln möchten.

Weitere Informationen

• TensorFlow Agents-Startseite
• TensorFlow Serving-Startseite
• Flutter-Startseite
• Toolkit für Flutter-Casual Games
• Videoreihe „Reinforcement Learning with TensorFlow“
• Reinforcement Learning Lecture Series 2021 von DeepMind und UCL