Membangun permainan papan dengan Agen TensorFlow dan Flutter

1. Sebelum memulai

Terobosan luar biasa AlphaGo dan AlphaStar menunjukkan potensi penggunaan machine learning untuk membangun agen game tingkat super-manusia. Membangun game kecil yang didukung ML adalah latihan yang menyenangkan untuk mempelajari keterampilan yang diperlukan dalam membuat agen game yang efektif.

Dalam codelab ini, Anda akan mempelajari cara membuat game papan menggunakan:

• TensorFlow Agent untuk melatih agen game dengan reinforcement learning
• TensorFlow Serving untuk menyajikan model
• Flutter untuk membuat aplikasi game papan lintas platform

Prasyarat

• Pengetahuan dasar tentang pengembangan Flutter dengan Dart
• Pengetahuan dasar tentang machine learning dengan TensorFlow, seperti pelatihan versus deployment
• Pengetahuan dasar tentang Python, terminal, dan Docker

Yang akan Anda pelajari

• Cara melatih agen Karakter Non-Pemain (NPC) menggunakan TensorFlow Agents
• Cara menyajikan model terlatih menggunakan TensorFlow Serving
• Cara membangun game papan Flutter lintas platform

Yang Anda butuhkan

• Flutter SDK
• Penyiapan Android dan iOS untuk Flutter
• Penyiapan Desktop untuk Flutter
• Penyiapan Web untuk Flutter
• Penyiapan Visual Studio Code (VS Code) untuk Flutter dan Dart
• Docker
• Bash
• Python 3.7+

2. Game Serangan Pesawat

Game yang Anda buat dalam codelab ini disebut ‘Plane Strike', sebuah game papan kecil 2 pemain yang menyerupai game papan ‘Battleship'. Aturannya sangat sederhana:

• Pemain manusia bermain melawan agen NPC yang dilatih oleh machine learning. Pemain manusia dapat memulai game dengan mengetuk sel mana pun di papan agen.
• Di awal permainan, pemain manusia dan agen masing-masing memiliki objek 'pesawat' (8 sel hijau yang membentuk 'pesawat' seperti yang dapat Anda lihat di papan pemain manusia dalam animasi di bawah) di papan mereka sendiri; 'pesawat' ini ditempatkan secara acak dan hanya terlihat oleh pemilik papan dan tersembunyi dari lawan mereka.
• Pemain manusia dan agen bergiliran menyerang satu sel di papan masing-masing. Pemain manusia dapat mengetuk sel mana pun di papan agen, sementara agen akan otomatis membuat pilihan berdasarkan prediksi model machine learning. Sel yang dicoba akan berubah menjadi merah jika merupakan sel 'pesawat' ('kena'); jika tidak, sel akan berubah menjadi kuning ('tidak kena').
• Siapa pun yang mencapai 8 sel merah terlebih dahulu akan memenangkan game; lalu game dimulai ulang dengan papan baru.

Berikut contoh gameplay game:

3. Menyiapkan lingkungan pengembangan Flutter Anda

Untuk pengembangan Flutter, Anda memerlukan dua software untuk menyelesaikan codelab ini—Flutter SDK dan editor.

Anda dapat menjalankan codelab menggunakan salah satu perangkat berikut:

• Simulator iOS (perlu menginstal alat Xcode).
• Android Emulator (memerlukan penyiapan di Android Studio).
• Browser (Chrome diperlukan untuk proses debug).
• Aplikasi desktop Windows, Linux, atau macOS. Anda harus melakukan pengembangan di platform tempat Anda berencana men-deploy aplikasi. Jadi, jika ingin mengembangkan aplikasi desktop Windows, Anda harus mengembangkannya di Windows untuk mengakses rantai build yang sesuai. Ada persyaratan spesifik per sistem operasi yang dibahas secara mendetail di docs.flutter.dev/desktop.

4. Memulai persiapan

Untuk mendownload kode codelab ini:

1. Buka repositori GitHub untuk codelab ini.
2. Klik Code > Download zip guna mendownload semua kode untuk codelab ini.

3. Ekstrak file zip yang didownload untuk mengekstrak folder root codelabs-main dengan semua resource yang Anda butuhkan.

Untuk codelab ini, Anda hanya memerlukan file dalam subdirektori tfagents-flutter/ di repositori, yang berisi beberapa folder:

• Folder step0 hingga step6 berisi kode awal yang Anda bangun untuk setiap langkah dalam codelab ini.
• Folder finished berisi kode yang sudah selesai untuk aplikasi contoh yang telah selesai.
• Setiap folder berisi subfolder backbend, yang mencakup kode backend, dan subfolder frontend, yang mencakup kode frontend Flutter

5. Mendownload dependensi untuk project

Backend

Buka terminal Anda dan masuk ke subfolder tfagents-flutter. Jalankan perintah berikut:

pip install -r requirements.txt

Frontend

1. Di VS Code, klik File > Open folder, lalu pilih folder step0 dari kode sumber yang Anda download sebelumnya.
2. Buka file step0/frontend/lib/main.dart. Jika Anda melihat dialog VS Code yang meminta Anda mendownload paket yang diperlukan untuk aplikasi awal, klik Get packages.
3. Jika Anda tidak melihat dialog ini, buka terminal lalu jalankan perintah flutter pub get di folder step0/frontend.

6. Langkah 0: Jalankan aplikasi awal

1. Buka file step0/frontend/lib/main.dart di VS Code, pastikan Android Emulator atau iOS Simulator disiapkan dengan benar dan muncul di status bar.

Misalnya, berikut adalah tampilan yang Anda lihat saat menggunakan Pixel 5 dengan Android Emulator:

Berikut adalah tampilan yang Anda lihat saat menggunakan iPhone 13 dengan Simulator iOS:

2. Klik Start debugging.

Catatan: Codelab ini mengasumsikan bahwa Anda men-deploy model di komputer lokal. Jika Anda men-deploy model di mesin jarak jauh lain, ubah alamat IP 10.0.2.2 atau 127.0.0.1 dalam kode ke alamat IP mesin jarak jauh yang menjalankan TensorFlow Serving.

Menjalankan dan menjelajahi aplikasi

Aplikasi akan diluncurkan di Android Emulator atau Simulator iOS. UI-nya cukup sederhana. Ada 2 papan permainan; pemain manusia dapat mengetuk sel mana pun di papan agen di bagian atas sebagai posisi serangan. Anda akan melatih agen pintar untuk memprediksi secara otomatis tempat yang akan diserang berdasarkan papan pemain manusia.

Di balik layar, aplikasi Flutter akan mengirimkan papan permainan pemain manusia saat ini ke backend, yang menjalankan model reinforcement learning dan menampilkan prediksi posisi sel yang akan dipukul berikutnya. Frontend akan menampilkan hasil di UI setelah menerima respons.

Jika Anda mengklik sel mana pun di papan agen sekarang, tidak akan terjadi apa-apa karena aplikasi belum dapat berkomunikasi dengan backend.

7. Langkah 1: Buat lingkungan Python TensorFlow Agents

Tujuan utama codelab ini adalah mendesain agen yang belajar dengan berinteraksi dengan lingkungan. Meskipun game Plane Strike relatif sederhana dan aturan untuk agen NPC dapat dibuat secara manual, Anda menggunakan reinforcement learning untuk melatih agen agar Anda mempelajari keterampilan dan dapat dengan mudah membuat agen untuk game lain di masa mendatang.

Dalam setelan Pembelajaran Reinforcement (RL) standar, agen menerima pengamatan di setiap langkah waktu dan memilih tindakan. Tindakan diterapkan ke lingkungan dan lingkungan menampilkan reward serta pengamatan baru. Agen melatih kebijakan untuk memilih tindakan guna memaksimalkan jumlah reward, yang juga dikenal sebagai laba. Dengan memainkan game berkali-kali, agen dapat mempelajari pola dan mengasah keterampilannya untuk menguasai game. Untuk merumuskan game Plane Strike sebagai masalah RL, anggap status papan sebagai pengamatan, posisi serangan sebagai tindakan, dan sinyal kena/tidak kena sebagai reward.

Catatan: Untuk pembahasan yang lebih mendalam tentang reinforcement learning, lihat Reinforcement Learning Lecture Series 2021 oleh DeepMind dan UCL.

Untuk melatih agen NPC, Anda memanfaatkan TensorFlow Agents, yang merupakan library reinforcement learning yang andal, skalabel, dan mudah digunakan untuk TensorFlow.

TF Agents sangat cocok untuk pembelajaran reinforcement karena dilengkapi dengan serangkaian codelab, contoh, dan dokumentasi ekstensif untuk membantu Anda memulai. Anda dapat menggunakan TF Agents untuk memecahkan masalah RL yang realistis dan kompleks dengan skalabilitas serta mengembangkan algoritma RL baru dengan cepat. Anda dapat dengan mudah mengganti agen dan algoritma yang berbeda untuk bereksperimen. Fitur ini juga telah diuji dengan baik dan mudah dikonfigurasi.

Ada banyak lingkungan game bawaan yang diimplementasikan di OpenAI Gym (misalnya, game Atari), Mujuco, dan lain-lain, yang dapat dimanfaatkan dengan mudah oleh TF Agents. Namun, karena game Plane Strike adalah game kustom yang lengkap, Anda harus menerapkan lingkungan baru dari awal terlebih dahulu.

Catatan: Anda dapat melihat tutorial Agen TensorFlow ini untuk mempelajari lebih lanjut lingkungan Agen TensorFlow.

Untuk menerapkan lingkungan Python TF Agents, Anda perlu menerapkan metode berikut:

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."""

Yang paling penting adalah fungsi _step(), yang menerima tindakan dan menampilkan objek time_step baru. Dalam kasus game Plane Strike, Anda memiliki papan game; saat posisi serangan baru masuk, berdasarkan kondisi papan game, lingkungan akan menentukan:

• Seperti apa tampilan papan permainan selanjutnya (apakah sel harus mengubah warnanya menjadi merah atau kuning, mengingat lokasi pesawat tersembunyi?)
• Hadiah apa yang harus diterima pemain untuk posisi tersebut (hadiah kena atau penalti tidak kena)?
• Haruskah game dihentikan (apakah ada yang menang?)
• Tambahkan kode berikut ke fungsi _step() di file _planestrike_py_environment.py:

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. Langkah 2: Latih agen game dengan TensorFlow Agents

Dengan lingkungan TF Agents yang sudah siap, Anda dapat melatih agen game. Untuk codelab ini, Anda akan menggunakan agen REINFORCE. REINFORCE adalah algoritma gradien kebijakan di RL. Ide dasarnya adalah menyesuaikan parameter jaringan neural kebijakan berdasarkan sinyal reward yang dikumpulkan selama gameplay, sehingga jaringan kebijakan dapat memaksimalkan keuntungan dalam permainan di masa mendatang.

• Pertama, Anda perlu membuat instance lingkungan pelatihan dan evaluasi. Tambahkan kode ini ke fungsi train_agent() dalam file step2/backend/training.py:

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)

• Selanjutnya, Anda perlu membuat agen reinforcement learning yang akan dilatih. Dalam codelab ini, Anda akan menggunakan agen REINFORCE, yang merupakan agen berbasis kebijakan. Tambahkan kode ini tepat di bawah kode di atas:

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,
)

• Terakhir, latih agen dalam loop pelatihan. Dalam loop, Anda terlebih dahulu mengumpulkan beberapa episode permainan ke dalam buffer, lalu melatih agen dengan data yang di-buffer. Tambahkan kode ini ke fungsi train_agent() dalam file step2/backend/training.py:

# 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()

• Sekarang Anda dapat memulai pelatihan. Di terminal Anda, buka folder step2/backend di komputer Anda dan jalankan:

python training.py

Pelatihan memerlukan waktu 8-12 jam untuk selesai, bergantung pada konfigurasi hardware Anda (Anda tidak perlu menyelesaikan seluruh pelatihan sendiri karena model terlatih disediakan di step3). Sementara itu, Anda dapat memantau progres dengan TensorBoard. Buka terminal baru, buka folder step2/backend di komputer Anda, lalu jalankan:

tensorboard --logdir tf_agents_log/

tf_agents_log adalah folder yang berisi log pelatihan. Contoh pelatihan terlihat seperti di bawah ini:

Anda dapat melihat bahwa durasi episode rata-rata menurun dan pengembalian rata-rata meningkat seiring berjalannya pelatihan. Secara intuitif, Anda dapat memahami bahwa jika agen lebih pintar dan membuat prediksi yang lebih baik, durasi game akan menjadi lebih pendek dan agen akan mengumpulkan lebih banyak reward. Hal ini masuk akal karena agen ingin menyelesaikan game dalam lebih sedikit langkah untuk meminimalkan diskon reward yang besar di langkah-langkah selanjutnya.

Setelah pelatihan selesai, model terlatih akan diekspor ke folder policy_model.

Catatan: Anda dapat melihat tutorial Agen TensorFlow ini untuk mempelajari lebih lanjut cara melatih agen REINFORCE dengan Agen TensorFlow.

9. Langkah 3: Men-deploy model terlatih dengan TensorFlow Serving

Setelah melatih agen game, Anda dapat men-deploy-nya dengan TensorFlow Serving.

Catatan: SavedModel terlatih disediakan di folder step3/policy_model untuk memudahkan Anda.

• Di terminal Anda, buka folder step3/backend di komputer Anda dan mulai TensorFlow Serving dengan 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 akan otomatis mendownload image TensorFlow Serving terlebih dahulu, yang memerlukan waktu sebentar. Setelah itu, TensorFlow Serving akan dimulai. Log akan terlihat seperti cuplikan kode berikut:

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 ...

Catatan: Setelah memulai image docker TensorFlow Serving, Anda dapat membuka http://localhost:8501/v1/models/<MODEL_NAME>/metadata untuk memeriksa detail tensor input dan output. Dalam codelab ini, ganti <MODEL_NAME> dengan policy_model.

Anda dapat mengirim permintaan contoh ke endpoint untuk memastikan endpoint berfungsi seperti yang diharapkan:

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

Endpoint akan menampilkan posisi yang diprediksi 45, yaitu (5, 5) di tengah papan (jika penasaran, Anda dapat mencoba mencari tahu mengapa tengah papan adalah tebakan yang baik untuk posisi serangan pertama).

{
    "predictions": [45]
}

Selesai! Anda telah berhasil membuat backend untuk memprediksi posisi serangan berikutnya bagi agen NPC.

Catatan: Untuk model pembelajaran penguatan tertentu ini, parameter discount, reward, dan step_type dalam input tidak penting karena hanya memengaruhi proses pelatihan. Satu-satunya parameter yang memengaruhi hasil inferensi adalah observation.

10. Langkah 4: Buat aplikasi Flutter untuk Android dan iOS

Backend sudah siap. Anda dapat mulai mengirim permintaan ke model tersebut untuk mengambil prediksi posisi serangan dari aplikasi Flutter.

• Pertama, Anda perlu menentukan class yang membungkus input yang akan dikirim. Tambahkan kode ini ke file step4/frontend/lib/game_agent.dart:

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;
  }
}

Sekarang Anda dapat mengirim permintaan ke TensorFlow Serving untuk membuat prediksi.

• Tambahkan kode ini ke fungsi predict() dalam file step4/frontend/lib/game_agent.dart:

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');
}

Setelah aplikasi menerima respons dari backend, Anda memperbarui UI game untuk mencerminkan progres game.

• Tambahkan kode ini ke fungsi _gridItemTapped() dalam file step4/frontend/lib/main.dart:

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(() {});

Menjalankan aplikasi

1. Klik Start debugging, lalu tunggu aplikasi dimuat.
2. Ketuk sel mana pun di papan agen untuk memulai permainan.

11. Langkah 5: Aktifkan aplikasi Flutter untuk platform desktop

Selain Android dan iOS, Flutter juga mendukung platform desktop, termasuk Linux, Mac, dan Windows.

Linux

1. Pastikan perangkat target disetel ke di status bar VSCode.
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Klik sel mana pun di papan agen untuk memulai permainan.

Mac

1. Untuk Mac, Anda perlu menyiapkan hak yang sesuai karena aplikasi akan mengirimkan permintaan HTTP ke backend. Lihat Hak dan App Sandbox untuk mengetahui detail selengkapnya.

Tambahkan kode ini ke step4/frontend/macOS/Runner/DebugProfile.entitlements dan step4/frontend/macOS/Runner/Release.entitlements masing-masing:

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

2. Pastikan perangkat target disetel ke di status bar VSCode.
3. Klik Start debugging, lalu tunggu aplikasi dimuat.
4. Klik sel mana pun di papan agen untuk memulai permainan.

Windows

1. Pastikan perangkat target disetel ke di status bar VSCode.
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Klik sel mana pun di papan agen untuk memulai permainan.

12. Langkah 6: Aktifkan aplikasi Flutter untuk platform web

Hal lain yang dapat Anda lakukan adalah menambahkan dukungan web ke aplikasi Flutter. Secara default, platform web diaktifkan secara otomatis untuk aplikasi Flutter, sehingga Anda hanya perlu meluncurkannya.

1. Pastikan perangkat target disetel ke di status bar VSCode.
2. Klik Start debugging, lalu tunggu aplikasi dimuat di browser Chrome.
3. Klik sel mana pun di papan agen untuk memulai permainan.

13. Selamat

Anda telah membuat aplikasi game papan dengan agen yang didukung ML untuk bermain melawan pemain manusia.

Catatan: Flutter kini memiliki Casual Games Toolkit yang mencakup fungsi bawaan seperti Iklan, Suara dan Musik, Pembelian Dalam Aplikasi, dan lain-lain. Meskipun codelab ini tidak memanfaatkan toolkit tersebut, Casual Games Toolkit adalah titik awal yang baik jika Anda ingin membuat game sendiri.

Pelajari lebih lanjut

• Halaman beranda TensorFlow Agents
• Halaman beranda TensorFlow Serving
• Halaman beranda Flutter
• Flutter Casual Games Toolkit
• Seri video pembelajaran reinforcement dengan TensorFlow
• Reinforcement Learning Lecture Series 2021 oleh DeepMind dan UCL