أنشِئ لعبة لوحية مع TensorFlow Agents وFlutter

1. قبل البدء

أثبت الإنجاز المذهل لكل من AlphaGo وAlphaStar إمكانية استخدام تعلُّم الآلة لإنشاء وكلاء ألعاب على مستوى خارقين. من خلال هذه اللعبة الرائعة، يمكنك إنشاء لعبة صغيرة تستند إلى تكنولوجيا تعلُّم الآلة من أجل اكتساب المهارات اللازمة لإنشاء وكلاء ألعاب أقوياء.

في هذا الدرس التطبيقي حول الترميز، ستتعلم كيفية إنشاء لعبة لوحية باستخدام:

  • موظّف دعم TensorFlow لتدريب وكيل الألعاب من خلال التعلّم المعزّز
  • منصة TensorFlow لعرض النموذج
  • Flutter لإنشاء لعبة لوحية من عدّة منصات

المتطلبات الأساسية

  • معرفة أساسية بتطوير Flutter باستخدام Dart
  • الإلمام بأساسيات تعلُّم الآلة باستخدام TensorFlow، مثل التدريب مقابل النشر
  • معرفة أساسية بلغة بايثون والمحطات الطرفية و Docker

ما ستتعرَّف عليه

  • كيفية تدريب وكيل لشخص آخر غير اللاعبين باستخدام برامج TensorFlow
  • كيفية عرض النموذج المدرَّب باستخدام TensorFlow ing
  • كيفية إنشاء لعبة لوحية من خلال Flutter على عدّة منصات

المتطلبات

2. لعبة The Plane Strike

يُطلق على اللعبة التي تنشؤها في هذا الدرس التطبيقي حول الترميز اسم "Plane Strike"، وهي لعبة لوحية صغيرة تضم لاعبَين تشبه اللعبة اللوحية "Battleship". القواعد بسيطة للغاية:

  • يلعب لاعب بشري ضد أحد موظّفي الدعم NPC المدرَّب باستخدام تكنولوجيا تعلُّم الآلة. يمكن للّاعب البشري بدء اللعبة من خلال النقر على أي خلية في لوحة الوكيل.
  • في بداية اللعبة، يمتلك كل من اللاعب والوكيل "طائرة" كائن (8 خلايا خضراء تشكل "مستوى" كما ترون في لوحة اللاعب البشري في الصورة المتحركة أدناه) على ألواحها الخاصة؛ هذه "الطائرات" يتم وضعها بشكل عشوائي ولا تظهر إلا لمالكي اللوحة ويتم إخفاؤها عن خصومهم.
  • يتناوب اللاعب والوكيل تبادل الأدوار لمهاجمة خلية واحدة من لوح اللعب. يمكن للّاعب البشري النقر على أي خلية في لوحة الوكيل، بينما سيحدّد الوكيل تلقائيًا استنادًا إلى توقّع نموذج تعلُّم الآلة. تتحول الخلية التي تمت محاولة إجرائها إلى اللون الأحمر إذا كانت "مستوية" خلية ('hit'); وإلا يتحول إلى اللون الأصفر ("خطأ").
  • يفوز في اللعبة من يحقق 8 خلايا حمراء أولاً، تُعاد تشغيل اللعبة بلوحات جديدة.

في ما يلي نموذج عن أسلوب اللعب في هذه اللعبة:

77cead530c5a4aff.gif

3- إعداد بيئة تطوير Flutter

بالنسبة إلى تطوير Flutter، تحتاج إلى برنامجَين لإكمال هذا الدرس التطبيقي حول الترميز، وهما Flutter SDK وأداة تعديل.

يمكنك تشغيل الدرس التطبيقي حول الترميز باستخدام أي من الأجهزة التالية:

  • محاكي iOS (يتطلب تثبيت أدوات Xcode).
  • محاكي Android (يتطلب عملية إعداد في "استوديو Android").
  • متصفّح (يجب توفُّر متصفّح Chrome لتصحيح الأخطاء)
  • كتطبيق سطح المكتب الذي يعمل بنظام التشغيل Windows أو Linux أو macOS. يجب إجراء تطوير على النظام الأساسي الذي تخطّط لنشر الإعلان عليه. لذا، إذا كنت ترغب في تطوير تطبيق سطح مكتب Windows، ينبغي لك تطويره على Windows للوصول إلى سلسلة الإصدار المناسبة. هناك متطلبات خاصة بنظام التشغيل تم تناولها بالتفصيل على docs.flutter.dev/desktop.

4. الإعداد

لتنزيل الرمز الخاص بهذا الدرس التطبيقي حول الترميز:

  1. انتقِل إلى مستودع GitHub الخاص بهذا الدرس التطبيقي حول الترميز.
  2. انقر على الرمز > نزِّل الرمز البريدي لتنزيل جميع الرموز الخاصة بهذا الدرس التطبيقي حول الترميز.

2cd45599f51fb8a2.png

  1. عليك فكّ ضغط ملف ZIP الذي تم تنزيله لفك ضغط مجلد الجذر codelabs-main الذي يتضمّن جميع الموارد اللازمة.

في هذا الدرس التطبيقي حول الترميز، تحتاج فقط إلى الملفات المتوفّرة في دليل tfagents-flutter/ الفرعي في المستودع، والذي يحتوي على مجلدات متعدّدة:

  • تحتوي المجلدات من step0 إلى step6 على رمز التفعيل الذي تعتمد عليه في كل خطوة في هذا الدرس التطبيقي حول الترميز.
  • يحتوي المجلد finished على الرمز المكتمل لنموذج التطبيق النهائي.
  • يحتوي كل مجلد على مجلد فرعي باللغة backbend يتضمّن رمز الواجهة الخلفية ومجلدًا فرعيًا على frontend يتضمّن رمز الواجهة الأمامية لتطبيق Flutter.

5- تنزيل التبعيات للمشروع

الخلفية

افتح الوحدة الطرفية وانتقِل إلى المجلد الفرعي "tfagents-flutter". قم بتشغيل ما يلي:

pip install -r requirements.txt

الواجهة الأمامية

  1. في رمز VS، انقر على ملف > افتح المجلد، ثم اختَر المجلد step0 من رمز المصدر الذي نزّلته في وقت سابق.
  2. افتح ملف step0/frontend/lib/main.dart. إذا ظهر مربّع حوار رمز VS يطلب منك تنزيل الحِزم المطلوبة لتطبيق التفعيل، انقر على الحصول على الحِزم.
  3. إذا لم يظهر لك مربّع الحوار هذا، افتح الوحدة الطرفية ثم شغِّل الأمر flutter pub get في المجلد step0/frontend.

7ada07c300f166a6.png

6- الخطوة 0: تشغيل تطبيق إجراء التفعيل

  1. افتح ملف step0/frontend/lib/main.dart في VS Code، وتأكد من إعداد محاكي Android أو iOS Simulator بشكل صحيح ويظهر في شريط الحالة.

على سبيل المثال، إليك ما يظهر لك عند استخدام هاتف Pixel 5 مع "محاكي Android":

9767649231898791.png

إليك ما تراه عند استخدام iPhone 13 مع محاكي iOS:

95529e3a682268b2.png

  1. انقر على a19a0c68bc4046e6.png بدء تصحيح الأخطاء.

تشغيل التطبيق واستكشافه

يجب تشغيل التطبيق على محاكي Android أو محاكي iOS. واجهة المستخدم واضحة جدًا. تتوفّر لوحتا ألعاب؛ يمكن لأي لاعب النقر على أي خلية في لوحة الوكيل في الأعلى ليكون موضع ضربة. ستدرِّب وكيلاً ذكيًا على التنبؤ تلقائيًا بمكان ضرب الكرة بناءً على لوح اللعب البشري.

بعد إجراء ذلك، سيرسل تطبيق Flutter اللوحة الحالية للّاعب إلى الخلفية التي تعمل على تشغيل نموذج تعلُّم تعزيزي وتعرض الموضع المتوقّع للخلية الذي سيتم رصده بعد ذلك. ستعرض الواجهة الأمامية النتيجة في واجهة المستخدم بعد تلقّي الرد.

734ab3d48a1133e1.png 15cba2e741149c95.png

إذا نقرت على أي خلية في لوحة الوكيل الآن، لن يحدث أي شيء لأنه لا يمكن للتطبيق الاتصال بالخلفية بعد.

7. الخطوة 1: إنشاء بيئة Python على برنامج TensorFlow Agents

يتمثّل الهدف الأساسي من هذا الدرس التطبيقي في تصميم وكيل يتعلّم من خلال التفاعل مع البيئة. على الرغم من أنّ لعبة Plane Strike بسيطة نسبيًا ومن الممكن صياغة قواعد يدويّة لموظّف الدعم في NPC، عليك استخدام تعلُّم تعزيزي لتدريب الوكيل ليتمكّن من تعلّم المهارات وإنشاء الوكلاء بسهولة لألعاب أخرى في المستقبل.

في إعداد التعلّم المعزّز (RL) القياسي، يتلقّى الوكيل ملاحظة في كل خطوة ويختار إجراءً. يتم تطبيق الإجراء على البيئة وتُرجع البيئة مكافأة وملاحظة جديدة. يدرّب الوكيل سياسة لاختيار الإجراءات التي تهدف إلى زيادة إجمالي المكافآت إلى أقصى حد، ما يُعرف أيضًا باسم الإرجاع. من خلال اللعب عدة مرات، يتمكّن موظّف الدعم من تعلُّم أنماط اللعبة وصقل مهاراتها لإتقان اللعبة. لصياغة لعبة Plane Strike على أنها إحدى مشكلات RL، اعتبِر حالة اللوحة على أنّها الملاحظة، وموضع الضربة كالحركة، وإشارة الضرب/الخطأ كمكافأة.

bc5da07bc45062f4.png

لتدريب وكيل NPC، يمكنك الاستفادة من TensorFlow، وهي مكتبة تعلُّم تعزيز موثوقة وقابلة للتطوير وسهلة الاستخدام لمنصة TensorFlow.

يعتبر موظّفو الدعم الفني الموجّه (TF) رائعًا في عملية التعلّم المعزّزة لأنّه يتضمّن مجموعة كبيرة من الدروس التطبيقية حول الترميز والأمثلة والمستندات الشاملة لمساعدتك في البدء. يمكنك استخدام وكلاء TF لحل مشكلات RL الواقعية والمعقدة باستخدام قابلية التوسيع وتطوير خوارزميات RL جديدة بسرعة. ويمكنك التبديل بسهولة بين البرامج الوكيلة والخوارزميات المختلفة بغرض إجراء التجارب. وقد تم أيضًا اختباره جيدًا وسهولة ضبطه.

هناك العديد من بيئات الألعاب المنشأة مسبقًا التي تم تنفيذها في OpenAI Gym (على سبيل المثال، ألعاب Atari)، وMujuco، وغير ذلك، والتي يمكن لموظّفي الدعم المالي الاستفادة منها بسهولة. بما أنّ لعبة Plane Strike هي لعبة مخصّصة كاملة، عليك تنفيذ بيئة جديدة من البداية.

لتنفيذ بيئة Python لوكلاء TF، عليك تنفيذ الطرق التالية:

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

وأهمها هو الدالة _step() التي تتخذ إجراءً وتعرض كائن time_step جديدًا. في حالة لعبة Plane Strike، لديك لوحة لعبة؛ عندما يأتي موضع إنذار جديد، استنادًا إلى حالة لوحة اللعبة، تكتشف البيئة ما يلي:

  • كيف يجب أن تبدو لوحة الألعاب بعد ذلك (هل يجب أن تغير الخلية لونها إلى الأحمر أو الأصفر، بالنظر إلى موقع الطائرة المخفي؟)
  • ما المكافأة التي يجب أن يحصل عليها اللاعب لهذا الموضع (هل حصلت على مكافأة أو أخطأت في ضربة جزاء؟)
  • هل يجب إنهاء اللعبة (هل فاز أحد؟)
  • أضِف الرمز التالي إلى الدالة _step() إلى ملف _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. الخطوة 2: تدريب وكيل الألعاب باستخدام عملاء TensorFlow

مع توفّر بيئة موظّفي دعم TF، يمكنك تدريب موظّف الدعم في اللعبة. عليك استخدام وكيل REINFORCE في هذا الدرس التطبيقي. الدالة REINFORCE هي خوارزمية تدرج السياسات في RL. والهدف الأساسي من هذه اللعبة هو تعديل معلَمات الشبكة العصبونية في السياسة استنادًا إلى إشارات المكافآت التي يتم جمعها أثناء اللعب، وذلك لكي تتمكّن شبكة السياسة من تحقيق أقصى قدر من الأرباح في عمليات اللعب المستقبلية.

  • أولاً، تحتاج إلى إنشاء مثيل لبيئات التدريب والتقييم. أضِف هذا الرمز إلى الدالة train_agent() في ملف 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)
  • بعد ذلك، تحتاج إلى إنشاء وكيل تعلم تعزيزي سيتم تدريبه. في هذا الدرس التطبيقي حول الترميز، يمكنك استخدام وكيل REINFORCE، وهو وكيل مستنِد إلى السياسة. أضف هذا الرمز أسفل الرمز أعلاه مباشرةً:
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,
)
  • وأخيرًا، درِّب موظّف الدعم في حلقة التدريب. في التكرار الحلقي، تقوم أولاً بجمع بضع حلقات من تشغيل اللعبة في مورد احتياطي ثم تدريب الوكيل باستخدام البيانات المخزنة مؤقتًا. أضِف هذا الرمز إلى الدالة train_agent() في ملف 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()
  • يمكنك الآن بدء الدورة التدريبية. في الوحدة الطرفية، انتقِل إلى مجلد step2/backend على الكمبيوتر وشغِّل:
python training.py

يستغرق إنهاء التدريب من 8 إلى 12 ساعة، وفقًا لإعدادات أجهزتك (ليس عليك إكمال التدريب بنفسك إذ يتم توفير نموذج مُدرَّب مسبقًا في step3). في الوقت الحالي، يمكنك تتبُّع مستوى التقدّم باستخدام TensorBoard. افتح وحدة طرفية جديدة، وانتقِل إلى مجلد step2/backend على جهاز الكمبيوتر، وشغِّل:

tensorboard --logdir tf_agents_log/

tf_agents_log هو المجلد الذي يحتوي على سجلّ التدريب. يبدو تدريب التدريب النموذجي على النحو التالي:

33e12e2b387c063a.png 8488632ccf43348a.png

يمكنك ملاحظة أنّ متوسط مدة الحلقة ينخفض ويزداد متوسط العائد مع تقدّم التدريب. ومن البديهي أن تفهم أنّه إذا كان موظّف الدعم أذكى ويقدّم توقّعات أفضل، ستقل مدة اللعبة وسيجمع موظّف الدعم المزيد من المكافآت. هذا منطقي لأن موظّف الدعم يريد إنهاء اللعبة بخطوات أقل لتقليل خصومات المكافآت الكبيرة في الخطوات اللاحقة.

بعد اكتمال التدريب، يتم تصدير النموذج المدرَّب إلى المجلد policy_model.

9. الخطوة 3: نشر النموذج المدرَّب باستخدام عرض TensorFlow

الآن بعد تدريب وكيل الألعاب، يمكنك نشره من خلال TensorFlow Spring.

  • في الوحدة الطرفية، انتقِل إلى مجلد step3/backend على جهاز الكمبيوتر وابدأ عرض TensorFlow باستخدام 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 على تنزيل صورة عرض TensorFlow تلقائيًا أولاً، وهذا يستغرق دقيقة. بعد ذلك، من المفترض أن يبدأ عرض TensorFlow. من المفترض أن يظهر السجل على النحو التالي:

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

يمكنك إرسال نموذج طلب إلى نقطة النهاية للتأكد من أنها تعمل كما هو متوقع:

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

ستعرض نقطة النهاية الموضع المتوقع 45، وهو (5، 5) في وسط اللوحة (بالنسبة إلى الفضول، يمكنك محاولة معرفة السبب الذي يجعل وسط اللوحة تخمينًا جيدًا لموضع الضربة الأولى).

{
    "predictions": [45]
}

هذا كل شيء! لقد نجحت في إنشاء واجهة خلفية لتوقُّع موضع الإنذار التالي لوكيل NPC.

10. الخطوة 4: إنشاء تطبيق Flutter لأجهزة Android وiOS

الخلفية جاهزة. يمكنك البدء بإرسال طلبات إليه للحصول على توقّعات موضع الإنذار من تطبيق Flutter.

  • أولاً، تحتاج إلى تحديد فئة تضم المدخلات لإرسالها. أضِف هذا الرمز إلى ملف 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;
  }
}

يمكنك الآن إرسال الطلب إلى منصة عرض TensorFlow لإجراء التنبؤات.

  • أضِف هذا الرمز إلى الدالة predict() في ملف 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');
}

وبعد تلقّي التطبيق للردّ من الخلفية، يمكنك تحديث واجهة مستخدم اللعبة لتعكس مستوى التقدّم في اللعبة.

  • أضِف هذا الرمز إلى الدالة _gridItemTapped() في ملف 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(() {});

تشغيله

  1. انقر على a19a0c68bc4046e6.png بدء تصحيح الأخطاء، ثم انتظِر إلى أن يتم تحميل التطبيق.
  2. انقر على أي خلية في لوحة الوكيل لبدء اللعبة.

852942d0de299c1f.png 6ae3601470c8e33a.png

11. الخطوة 5: تفعيل تطبيق Flutter على الأنظمة الأساسية لأجهزة الكمبيوتر المكتبي

بالإضافة إلى Android وiOS، يتوافق Flutter أيضًا مع الأنظمة الأساسية المتوافقة مع أجهزة الكمبيوتر المكتبي، بما في ذلك Linux وMac وWindows.

Linux

  1. تأكَّد من ضبط الجهاز المستهدف على 86cba523de82b4f9.png في شريط حالة VSCode.
  2. انقر على a19a0c68bc4046e6.png بدء تصحيح الأخطاء، ثم انتظِر إلى أن يتم تحميل التطبيق.
  3. انقر على أي خلية في لوحة الوكيل لبدء اللعبة.

48594c7c0a589733.png

نظام التشغيل Mac

  1. بالنسبة إلى نظام التشغيل Mac، يجب إعداد استحقاقات مناسبة لأنّ التطبيق سيرسل طلبات HTTP إلى الخلفية. يُرجى الرجوع إلى الحقوق و"وضع حماية التطبيقات" لمزيد من التفاصيل.

أضِف هذا الرمز إلى step4/frontend/macOS/Runner/DebugProfile.entitlements وstep4/frontend/macOS/Runner/Release.entitlements على التوالي:

<key>com.apple.security.network.client</key>
<true/>
  1. تأكَّد من ضبط الجهاز المستهدف على eb4b0b5563824138.png في شريط حالة VSCode.
  2. انقر على a19a0c68bc4046e6.png بدء تصحيح الأخطاء، ثم انتظِر إلى أن يتم تحميل التطبيق.
  3. انقر على أي خلية في لوحة الوكيل لبدء اللعبة.

55a5de3674194e89.png

Windows

  1. تأكَّد من ضبط الجهاز المستهدف على 9587be1bb375bc0f.png في شريط حالة VSCode.
  2. انقر على a19a0c68bc4046e6.png بدء تصحيح الأخطاء، ثم انتظِر إلى أن يتم تحميل التطبيق.
  3. انقر على أي خلية في لوحة الوكيل لبدء اللعبة.

41d9f87d84c5e755.png

12. الخطوة 6: تفعيل تطبيق Flutter للنظام الأساسي للويب

يمكنك أيضًا إضافة الدعم على الويب إلى تطبيق Flutter. يتم تلقائيًا تفعيل نظام الويب الأساسي لتطبيقات Flutter، ما عليك سوى تشغيله.

  1. تأكَّد من ضبط الجهاز المستهدف على 71db93efa928d15d.png في شريط حالة VSCode.
  2. انقر على a19a0c68bc4046e6.png بدء تصحيح الأخطاء ثم انتظِر إلى أن يتم تحميل التطبيق في متصفّح Chrome.
  3. انقر على أي خلية في لوحة الوكيل لبدء اللعبة.

fae7490304e28dfe.png

13. تهانينا

لقد صمّمت تطبيقًا للألعاب اللوحية يضمّ وكيلاً يعمل بتعلُّم الآلة لمواجهة اللاعبِين.

مزيد من المعلومات