Trang này được dịch bởi Cloud Translation API.

Xây dựng trò chơi cờ bàn bằng TensorFlow Agents và Flutter

1. Trước khi bắt đầu

Bước đột phá tuyệt vời của AlphaGo và AlphaStar đã chứng minh tiềm năng của việc sử dụng công nghệ học máy để xây dựng các nhân viên hỗ trợ siêu nhân trong trò chơi. Đây là một bài tập thú vị giúp xây dựng một trò chơi nhỏ sử dụng công nghệ học máy nhằm học hỏi các kỹ năng cần thiết để tạo ra các nhân viên hỗ trợ trò chơi mạnh mẽ.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách xây dựng một trò chơi cờ bàn bằng cách sử dụng:

TensorFlow Agent đào tạo nhân viên hỗ trợ trò chơi bằng phương pháp học tăng cường
TensorFlow phục vụ cho mô hình
Flutter tạo ứng dụng chơi trò chơi cờ bàn đa nền tảng

Điều kiện tiên quyết

Kiến thức cơ bản về cách phát triển Flutter bằng Dart
Kiến thức cơ bản về công nghệ học máy với TensorFlow, chẳng hạn như huấn luyện so với triển khai
Kiến thức cơ bản về Python, Terminal và Docker

Kiến thức bạn sẽ học được

Cách huấn luyện một tác nhân nhân vật không phải người chơi (NPC) bằng TensorFlow Agents
Cách phân phát mô hình đã huấn luyện bằng tính năng Phân phát TensorFlow
Cách xây dựng trò chơi cờ bàn Flutter đa nền tảng

Bạn cần có

SDK Flutter
Thiết lập Android và iOS cho Flutter
Thiết lập Flutter trên máy tính
Thiết lập Web cho Flutter
Thiết lập Visual Studio Code (VS Code) cho Flutter và Dart
Docker
Bash
Python 3.7 trở lên

2. Trò chơi Plane Strike

Trò chơi bạn xây dựng trong lớp học lập trình này có tên là "Plane Strike", một trò chơi cờ bàn gồm 2 người chơi nhỏ giống như trò chơi cờ bàn "Battleship". Quy tắc rất đơn giản:

Người chơi là người chơi với một đặc vụ NPC được công nghệ học máy huấn luyện. Người chơi là người có thể bắt đầu trò chơi bằng cách nhấn vào ô bất kỳ trong bảng của nhân viên hỗ trợ.
Ở đầu trò chơi, cả người chơi và nhân viên hỗ trợ đều có một "máy bay" đối tượng (8 ô màu xanh lục tạo thành một "máy bay" như bạn có thể thấy trong bảng của người chơi trong ảnh động bên dưới) trên bảng của chính họ; những "máy bay" này được đặt ngẫu nhiên và chỉ hiển thị cho chủ sở hữu của bàn cờ và ẩn với đối thủ của họ.
Người chơi và nhân viên hỗ trợ thay phiên nhau đánh vào một ô trên bàn của nhau. Người chơi có thể nhấn vào bất kỳ ô nào trong bảng của nhân viên hỗ trợ, còn nhân viên hỗ trợ sẽ tự động đưa ra lựa chọn dựa trên thông tin dự đoán của một mô hình học máy. Ô đã thử sẽ chuyển sang màu đỏ nếu đó là "máy bay" ô (‘lượt truy cập'); nếu không thì điện thoại sẽ chuyển sang màu vàng ("nhớ").
Người nào đạt được 8 ô màu đỏ đầu tiên sẽ chiến thắng trò chơi; sau đó trò chơi được bắt đầu lại với các bảng mới.

Dưới đây là lối chơi mẫu của trò chơi:

3. Thiết lập môi trường phát triển Flutter

Để phát triển Flutter, bạn cần có 2 phần mềm để hoàn thành lớp học lập trình này: Flutter SDK và trình chỉnh sửa.

Bạn có thể chạy lớp học lập trình bằng bất kỳ thiết bị nào sau đây:

Trình mô phỏng iOS (yêu cầu cài đặt công cụ Xcode).
Trình mô phỏng Android (yêu cầu thiết lập trong Android Studio).
Trình duyệt (cần có Chrome để gỡ lỗi).
Dưới dạng ứng dụng Windows, Linux hoặc macOS. Bạn phải phát triển trên nền tảng mà bạn dự định triển khai. Vì vậy, nếu muốn phát triển một ứng dụng Windows dành cho máy tính, bạn phải phát triển trên Windows để truy cập vào chuỗi bản dựng phù hợp. Có các yêu cầu cụ thể theo hệ điều hành được đề cập chi tiết trên docs.flutter.dev/desktop.

4. Bắt đầu thiết lập

Cách tải mã nguồn cho lớp học lập trình này:

Chuyển đến kho lưu trữ GitHub cho lớp học lập trình này.
Nhấp vào Mã > Tải tệp zip xuống để tải tất cả mã nguồn cho lớp học lập trình này.

2cd45599f51fb8a2.pngS

Giải nén tệp zip đã tải xuống để giải nén thư mục gốc codelabs-main cùng tất cả tài nguyên bạn cần.

Đối với lớp học lập trình này, bạn chỉ cần các tệp trong thư mục con tfagents-flutter/ trong kho lưu trữ, nơi chứa nhiều thư mục:

Các thư mục step0 đến step6 chứa mã khởi đầu mà bạn sẽ xây dựng cho từng bước trong lớp học lập trình này.
Thư mục finished chứa mã nguồn đã hoàn tất cho ứng dụng mẫu đã hoàn thiện.
Mỗi thư mục chứa một thư mục con backbend chứa mã phụ trợ và một thư mục con frontend chứa mã giao diện người dùng Flutter

5. Tải các phần phụ thuộc cho dự án xuống

Phần phụ trợ

Mở cửa sổ dòng lệnh rồi chuyển đến thư mục con tfagents-flutter. Chạy lệnh sau:

pip install -r requirements.txt

Giao diện người dùng

Trong VS Code, hãy nhấp vào File > (Tệp >) Mở thư mục rồi chọn thư mục step0 trong mã nguồn mà bạn đã tải xuống trước đó.
Mở tệp step0/frontend/lib/main.dart. Nếu thấy hộp thoại VS Code nhắc bạn tải các gói bắt buộc xuống cho ứng dụng khởi đầu, hãy nhấp vào Get package (Tải gói).
Nếu bạn không thấy hộp thoại này, hãy mở cửa sổ dòng lệnh rồi chạy lệnh flutter pub get trong thư mục step0/frontend.

7ada07c300f166a6.pngS

6. Bước 0: Chạy ứng dụng khởi đầu

Mở tệp step0/frontend/lib/main.dart trong VS Code, đảm bảo rằng Trình mô phỏng Android hoặc Trình mô phỏng iOS được thiết lập đúng cách và xuất hiện trong thanh trạng thái.

Ví dụ: dưới đây là những gì bạn thấy khi sử dụng Pixel 5 với Trình mô phỏng Android:

9767649231898791.pngS

Sau đây là những gì bạn thấy khi sử dụng iPhone 13 với Trình mô phỏng iOS:

95529e3a682268b2.pngS

Nhấp vào Bắt đầu gỡ lỗi.

Chạy và khám phá ứng dụng

Ứng dụng phải chạy trên Trình mô phỏng Android hoặc Trình mô phỏng iOS. Giao diện người dùng khá đơn giản. Có 2 bảng trò chơi; người chơi có thể nhấn vào bất kỳ ô nào trong bảng của nhân viên hỗ trợ ở trên cùng để tạo cảnh cáo. Bạn sẽ huấn luyện một nhân viên hỗ trợ thông minh tự động dự đoán vị trí tấn công dựa trên bảng của người chơi.

Trong trường hợp này, ứng dụng Flutter sẽ chuyển bảng điều khiển hiện tại của người chơi đến phần phụ trợ. Bảng này sẽ chạy mô hình học tăng cường và trả về vị trí ô được dự đoán để tấn công tiếp theo. Giao diện người dùng sẽ hiển thị kết quả trong giao diện người dùng sau khi nhận được phản hồi.

734ab3d48a1133e1.pngs 15cba2e741149c95.pngS

Nếu bây giờ bạn nhấp vào bất kỳ ô nào trong bảng điều khiển của nhân viên hỗ trợ thì sẽ không có gì xảy ra vì ứng dụng chưa thể giao tiếp với phần phụ trợ.

7. Bước 1: Tạo một môi trường TensorFlow Agents Python

Mục tiêu chính của lớp học lập trình này là thiết kế một tác nhân có khả năng học bằng cách tương tác với một môi trường. Trò chơi Plane Strike tương đối đơn giản và có thể tạo ra các quy tắc cho nhân viên NPC. Tuy nhiên, bạn sẽ vận dụng phương pháp học tăng cường để huấn luyện một đặc vụ, từ đó học được kỹ năng và dễ dàng xây dựng đại lý cho các trò chơi khác trong tương lai.

Trong chế độ cài đặt tiêu chuẩn Học tập tăng cường (rl), tác nhân sẽ nhận được một chế độ quan sát tại mỗi bước và chọn một hành động. Hành động được áp dụng cho môi trường còn môi trường sẽ trả về phần thưởng và một lượt quan sát mới. Nhân viên hỗ trợ sẽ huấn luyện một chính sách để chọn các hành động nhằm tối đa hoá tổng số phần thưởng, còn gọi là trả lại hàng. Bằng cách chơi trò chơi nhiều lần, nhân viên hỗ trợ có thể học các quy luật và trau dồi kỹ năng để thành thạo trò chơi. Để xây dựng trò chơi Plane Strike như một vấn đề về phạm vi tiếp xúc, hãy xem trạng thái trên bàn cờ là quan sát, vị trí tấn công là hành động và tín hiệu đánh/bỏ lỡ là phần thưởng.

Để huấn luyện nhân viên hỗ trợ NPC, bạn hãy tận dụng TensorFlow Agents. Đây là một thư viện học tăng cường đáng tin cậy, có thể mở rộng và dễ sử dụng dành cho TensorFlow.

TF Agents là ứng dụng lý tưởng cho việc học tăng cường vì nó đi kèm với một loạt các lớp học lập trình, ví dụ và tài liệu mở rộng để giúp bạn bắt đầu. Bạn có thể dùng TF Agents để giải quyết các vấn đề rl thực tế và phức tạp nhờ khả năng có thể mở rộng, đồng thời phát triển các thuật toán rl mới một cách nhanh chóng. Bạn có thể dễ dàng hoán đổi giữa các tác nhân và thuật toán để thử nghiệm. API này cũng đã được thử nghiệm kỹ càng và dễ định cấu hình.

Có nhiều môi trường trò chơi tạo sẵn được triển khai trong OpenAI Phòng tập thể dục (ví dụ: các trò chơi Atari), Mujuco, v.v. là những nội dung mà TF Agents có thể dễ dàng tận dụng. Tuy nhiên, vì trò chơi Plane Strike là một trò chơi tuỳ chỉnh hoàn chỉnh, nên trước tiên, bạn cần triển khai một môi trường mới từ đầu.

Để triển khai môi trường TF Agents Python, bạn cần triển khai các phương thức sau:

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

Hàm quan trọng nhất là hàm _step(). Hàm này thực hiện hành động và trả về đối tượng time_step mới. Đối với trò chơi Plane Strike, bạn có một bảng trò chơi; khi vị trí cảnh cáo mới xuất hiện, dựa trên tình trạng của bảng trò chơi, môi trường sẽ xác định:

Bảng trò chơi sẽ trông như thế nào tiếp theo (ô sẽ thay đổi màu thành đỏ hoặc vàng, với vị trí máy bay ẩn?)
Người chơi sẽ nhận được phần thưởng gì cho vị trí đó (phần thưởng khi đạt được thành công hoặc bị bỏ lỡ hình phạt nào?)
Trò chơi sẽ chấm dứt (có ai thắng không?)
Thêm mã sau vào hàm _step() vào tệp _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. Bước 2: Đào tạo nhân viên hỗ trợ trò chơi bằng TensorFlow Agents

Trong môi trường TF Agents, bạn có thể đào tạo nhân viên hỗ trợ trò chơi. Đối với lớp học lập trình này, bạn sẽ sử dụng tác nhân REINFORCE. REINFORCE là một thuật toán độ dốc của chính sách trong rl. Mục đích cơ bản của chiến dịch này là điều chỉnh các tham số mạng nơron chính sách dựa trên các tín hiệu phần thưởng thu thập được trong quá trình chơi để mạng chính sách có thể tối đa hoá lợi nhuận trong các lượt chơi sau này.

Trước tiên, bạn cần tạo thực thể cho các môi trường huấn luyện và đánh giá. Thêm mã này vào hàm train_agent() trong tệp 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)

Tiếp theo, bạn cần tạo một tác nhân học tăng cường sẽ được đào tạo. Trong lớp học lập trình này, bạn sẽ sử dụng tác nhân REINFORCE. Đây là một tác nhân dựa trên chính sách. Thêm mã này ngay bên dưới mã ở trên:

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

Cuối cùng, hãy đào tạo nhân viên hỗ trợ trong vòng lặp huấn luyện. Trong vòng lặp, trước tiên, bạn thu thập một vài tập trò chơi vào một vùng đệm rồi huấn luyện tác nhân bằng dữ liệu được lưu vào vùng đệm. Thêm mã này vào hàm train_agent() trong tệp 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()

Bây giờ, bạn có thể bắt đầu khoá đào tạo. Trong dòng lệnh, hãy chuyển đến thư mục step2/backend trên máy tính rồi chạy:

python training.py

Cần từ 8 đến 12 giờ để hoàn thành khoá đào tạo, tuỳ thuộc vào cấu hình phần cứng của bạn (bạn không phải tự hoàn thành toàn bộ khoá đào tạo vì mô hình huấn luyện trước được cung cấp trong step3). Trong thời gian chờ đợi, bạn có thể theo dõi tiến trình bằng TensorBoard. Mở một cửa sổ dòng lệnh mới, chuyển đến thư mục step2/backend trên máy tính rồi chạy:

tensorboard --logdir tf_agents_log/

tf_agents_log là thư mục chứa nhật ký huấn luyện. Một bài tập chạy mẫu sẽ có dạng như dưới đây:

Bạn có thể thấy thời lượng trung bình của tập giảm và thời lượng trả lại trung bình tăng lên khi quá trình huấn luyện diễn ra. Theo trực giác, bạn có thể hiểu rằng nếu nhân viên hỗ trợ thông minh hơn và đưa ra dự đoán chính xác hơn, thì thời lượng của trò chơi sẽ ngắn hơn và nhân viên hỗ trợ thu thập được nhiều phần thưởng hơn. Điều này là hợp lý vì nhân viên hỗ trợ muốn hoàn thành trò chơi với ít bước hơn để giảm thiểu việc giảm giá lớn cho phần thưởng ở các bước sau.

Sau khi quá trình huấn luyện hoàn tất, mô hình đã huấn luyện sẽ được xuất sang thư mục policy_model.

9. Bước 3: Triển khai mô hình đã huấn luyện bằng tính năng Phân phát TensorFlow

Bây giờ, bạn đã đào tạo được nhân viên hỗ trợ trò chơi, bạn có thể triển khai nhân viên hỗ trợ bằng tính năng Phân phát TensorFlow.

Trong dòng lệnh, hãy chuyển đến thư mục step3/backend trên máy tính rồi bắt đầu phân phát TensorFlow bằng 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 tự động tải hình ảnh Phục vụ TensorFlow xuống trước. Quá trình này mất ít phút. Sau đó, việc phân phát TensorFlow sẽ bắt đầu. Nhật ký sẽ có dạng như đoạn mã sau:

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

Bạn có thể gửi yêu cầu mẫu đến điểm cuối để đảm bảo điểm cuối đó hoạt động như mong đợi:

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

Điểm cuối sẽ trả về vị trí dự đoán 45, tức là (5, 5) ở giữa bảng (để tò mò, bạn có thể tìm hiểu lý do tại sao điểm giữa của bảng là một phỏng đoán phù hợp cho vị trí đánh đầu tiên).

{
    "predictions": [45]
}

Vậy là xong! Bạn đã xây dựng thành công phần phụ trợ để dự đoán vị trí cảnh cáo tiếp theo cho đặc vụ NPC.

10. Bước 4: Tạo ứng dụng Flutter cho Android và iOS

Phần phụ trợ đã sẵn sàng. Bạn có thể bắt đầu gửi yêu cầu đến nền tảng đó để truy xuất thông tin dự đoán vị trí cảnh cáo từ ứng dụng Flutter.

Trước tiên, bạn cần xác định một lớp gói dữ liệu đầu vào cần gửi. Thêm mã này vào tệp 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;
  }
}

Bây giờ, bạn có thể gửi yêu cầu đến tính năng Phân phát của TensorFlow để đưa ra dự đoán.

Thêm mã này vào hàm predict() trong tệp 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');
}

Sau khi ứng dụng nhận được phản hồi từ phần phụ trợ, bạn sẽ cập nhật giao diện người dùng của trò chơi để phản ánh tiến trình chơi.

Thêm mã này vào hàm _gridItemTapped() trong tệp 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(() {});

Chạy ứng dụng

Nhấp vào Start debugging (Bắt đầu gỡ lỗi) rồi chờ ứng dụng tải.
Nhấn vào ô bất kỳ trong bảng của nhân viên hỗ trợ để bắt đầu trò chơi.

852942d0de299c1f.png. 6ae3601470c8e33a.png.

11. Bước 5: Bật ứng dụng Flutter cho các nền tảng dành cho máy tính

Ngoài Android và iOS, Flutter cũng hỗ trợ các nền tảng dành cho máy tính như Linux, Mac và Windows.

Linux

Hãy đảm bảo thiết bị mục tiêu được đặt thành trong thanh trạng thái của VSCode.
Nhấp vào Start debugging (Bắt đầu gỡ lỗi) rồi chờ ứng dụng tải.
Nhấp vào ô bất kỳ trong bảng của nhân viên hỗ trợ để bắt đầu trò chơi.

48594c7c0a589733.pngS

Mac

Đối với máy Mac, bạn cần thiết lập các quyền thích hợp vì ứng dụng sẽ gửi yêu cầu HTTP đến phần phụ trợ. Vui lòng tham khảo bài viết Quyền và Hộp cát ứng dụng để biết thêm thông tin chi tiết.

Thêm mã này vào step4/frontend/macOS/Runner/DebugProfile.entitlements và step4/frontend/macOS/Runner/Release.entitlements tương ứng:

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

Hãy đảm bảo thiết bị mục tiêu được đặt thành trong thanh trạng thái của VSCode.
Nhấp vào Start debugging (Bắt đầu gỡ lỗi) rồi chờ ứng dụng tải.
Nhấp vào ô bất kỳ trong bảng của nhân viên hỗ trợ để bắt đầu trò chơi.

55a5de3674194e89.pngS

Windows

Hãy đảm bảo thiết bị mục tiêu được đặt thành trong thanh trạng thái của VSCode.
Nhấp vào Start debugging (Bắt đầu gỡ lỗi) rồi chờ ứng dụng tải.
Nhấp vào ô bất kỳ trong bảng của nhân viên hỗ trợ để bắt đầu trò chơi.

41d9f87d84c5e755.pngS

12. Bước 6: Bật ứng dụng Flutter cho nền tảng web

Một điều nữa bạn có thể làm là thêm tính năng hỗ trợ web vào ứng dụng Flutter. Theo mặc định, nền tảng web được tự động bật cho các ứng dụng Flutter, vì vậy, bạn chỉ cần khởi chạy nền tảng này.

Hãy đảm bảo thiết bị mục tiêu được đặt thành trong thanh trạng thái của VSCode.
Nhấp vào Bắt đầu gỡ lỗi rồi đợi ứng dụng tải trong trình duyệt Chrome.
Nhấp vào ô bất kỳ trong bảng của nhân viên hỗ trợ để bắt đầu trò chơi.

13. Xin chúc mừng

Bạn đã xây dựng một ứng dụng trò chơi cờ bàn có tác nhân hỗ trợ công nghệ học máy để chơi với người chơi là con người!