codelab_rebuild.yaml

name: tfagents-flutter rebuild script
steps:
  - name: step0
    steps:
      - name: Remove generated code
        rmdir: step0/frontend
      - name: Create project
        flutter: create frontend
      - name: Add deps
        path: frontend
        flutter: pub add http
      - name: Strip DEVELOPMENT_TEAM
        strip-lines-containing: DEVELOPMENT_TEAM =
        path: frontend/ios/Runner.xcodeproj/project.pbxproj
      - name: Configure analysis_options.yaml
        path: frontend/analysis_options.yaml
        replace-contents: |
          include: ../../../analysis_options.yaml

          analyzer:
            errors:
              unused_import: ignore
              unused_field: ignore
              unused_local_variable: ignore
      - name: Replace lib/main.dart
        path: frontend/lib/main.dart
        replace-contents: |
          import 'dart:async';
          import 'dart:math';
          import 'package:flutter/material.dart';
          import 'game_agent.dart';

          // Hidden board cell statuses; 'occupied' means it's part of the plane
          const double hiddenBoardCellOccupied = 1;
          const double hiddenBoardCellUnoccupied = 0;

          // Visible board cell statuses
          const double visibleBoardCellHit = 1;
          const double visibleBoardCellMiss = -1;
          const double visibleBoardCellUntried = 0;

          void main() {
            runApp(const PlaneStrike());
          }

          class PlaneStrike extends StatefulWidget {
            const PlaneStrike({super.key});

            // This widget is the root of your application.
            @override
            State<PlaneStrike> createState() => _PlaneStrikeState();
          }

          class _PlaneStrikeState extends State<PlaneStrike>
              with SingleTickerProviderStateMixin {
            // The board should be in square shape so we only need one size
            final _boardSize = 8;
            // Number of pieces needed to form a 'plane'
            final _planePieceCount = 8;
            late int _agentHitCount;
            late int _playerHitCount;
            late TFAgentsAgent _policyGradientAgent;
            late List<List<double>> _agentVisibleBoardState;
            late List<List<double>> _agentHiddenBoardState;
            late List<List<double>> _playerVisibleBoardState;
            late List<List<double>> _playerHiddenBoardState;
            late int _agentActionX;
            late int _agentActionY;

            @override
            void initState() {
              super.initState();
              _resetGame();
            }

            @override
            Widget build(BuildContext context) {
              return MaterialApp(
                title: 'TFAgents Flutter Sample App',
                theme: ThemeData(
                  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
                ),
                home: _buildGameBody(),
              );
            }

            List<List<double>> _initEmptyBoard() =>
                List.generate(_boardSize, (_) => List.filled(_boardSize, 0));

            void _resetGame() {
              _agentHitCount = 0;
              _playerHitCount = 0;
              _policyGradientAgent = TFAgentsAgent();
              // We keep track of 4 sets of boards (2 for each player):
              //   - _*BoardState is the visible board that tracks the game progress
              //   - _*HiddentBoardState is the secret board that records the true plane location
              _agentVisibleBoardState = _initEmptyBoard();
              _agentHiddenBoardState = _setHiddenBoardState();
              _playerVisibleBoardState = _initEmptyBoard();
              _playerHiddenBoardState = _setHiddenBoardState();
            }

            List<List<double>> _setHiddenBoardState() {
              var hiddenBoardState = _initEmptyBoard();

              // Place the plane on the board
              // First, decide the plane's orientation
              //   0: heading right
              //   1: heading up
              //   2: heading left
              //   3: heading down
              var rng = Random();
              int planeOrientation = rng.nextInt(4);

              // Figrue out the location of plane core as the '*' below
              //   | |      |      | |    ---
              //   |-*-    -*-    -*-|     |
              //   | |      |      | |    -*-
              //           ---             |
              int planeCoreX, planeCoreY;
              switch (planeOrientation) {
                case 0:
                  planeCoreX = rng.nextInt(_boardSize - 2) + 1;
                  planeCoreY = rng.nextInt(_boardSize - 3) + 2;
                  // Populate the tail
                  hiddenBoardState[planeCoreX][planeCoreY - 2] = hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX - 1][planeCoreY - 2] =
                      hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX + 1][planeCoreY - 2] =
                      hiddenBoardCellOccupied;
                case 1:
                  planeCoreX = rng.nextInt(_boardSize - 3) + 1;
                  planeCoreY = rng.nextInt(_boardSize - 2) + 1;
                  // Populate the tail
                  hiddenBoardState[planeCoreX + 2][planeCoreY] = hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX + 2][planeCoreY + 1] =
                      hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX + 2][planeCoreY - 1] =
                      hiddenBoardCellOccupied;
                case 2:
                  planeCoreX = rng.nextInt(_boardSize - 2) + 1;
                  planeCoreY = rng.nextInt(_boardSize - 3) + 1;
                  // Populate the tail
                  hiddenBoardState[planeCoreX][planeCoreY + 2] = hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX - 1][planeCoreY + 2] =
                      hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX + 1][planeCoreY + 2] =
                      hiddenBoardCellOccupied;
                default:
                  planeCoreX = rng.nextInt(_boardSize - 3) + 2;
                  planeCoreY = rng.nextInt(_boardSize - 2) + 1;
                  // Populate the tail
                  hiddenBoardState[planeCoreX - 2][planeCoreY] = hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX - 2][planeCoreY + 1] =
                      hiddenBoardCellOccupied;
                  hiddenBoardState[planeCoreX - 2][planeCoreY - 1] =
                      hiddenBoardCellOccupied;
              }

              // Populate the 'cross' in the plane
              hiddenBoardState[planeCoreX][planeCoreY] = hiddenBoardCellOccupied;
              hiddenBoardState[planeCoreX + 1][planeCoreY] = hiddenBoardCellOccupied;
              hiddenBoardState[planeCoreX - 1][planeCoreY] = hiddenBoardCellOccupied;
              hiddenBoardState[planeCoreX][planeCoreY + 1] = hiddenBoardCellOccupied;
              hiddenBoardState[planeCoreX][planeCoreY - 1] = hiddenBoardCellOccupied;

              return hiddenBoardState;
            }

            Widget _buildGameBody() {
              return Scaffold(
                appBar: AppBar(
                  // Here we take the value from the MyHomePage object that was created by
                  // the App.build method, and use it to set our appbar title.
                  title: const Text('Plane Strike game based on TF Agents and Flutter'),
                ),
                body: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: 265,
                        height: 265,
                        margin: const EdgeInsets.only(
                          left: 0,
                          top: 10,
                          right: 0,
                          bottom: 0,
                        ),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2.0),
                        ),
                        child: GridView.builder(
                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: _boardSize,
                          ),
                          itemBuilder: _buildAgentBoardItems,
                          itemCount: _boardSize * _boardSize,
                          physics: const NeverScrollableScrollPhysics(),
                        ),
                      ),
                      Text(
                        "Agent's board (hits: $_playerHitCount)",
                        style: const TextStyle(
                          fontSize: 18,
                          color: Colors.blue,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const Divider(height: 20, thickness: 5, indent: 20, endIndent: 20),
                      Text(
                        'Your board (hits: $_agentHitCount)',
                        style: const TextStyle(
                          fontSize: 18,
                          color: Colors.purple,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Container(
                        width: 265,
                        height: 265,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2.0),
                        ),
                        child: GridView.builder(
                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: _boardSize,
                          ),
                          itemBuilder: _buildPlayerBoardItems,
                          itemCount: _boardSize * _boardSize,
                          physics: const NeverScrollableScrollPhysics(),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 0,
                          top: 20,
                          right: 0,
                          bottom: 0,
                        ),
                        child: FilledButton(
                          onPressed: () {
                            _resetGame();
                            setState(() {});
                          },
                          child: const Text('Reset game'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }

            Widget _buildAgentBoardItems(BuildContext context, int index) {
              int x, y = 0;
              x = (index / _boardSize).floor();
              y = (index % _boardSize);
              return GestureDetector(
                onTap: () {
                  _gridItemTapped(context, x, y);
                },
                child: GridTile(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 0.5),
                    ),
                    child: Center(child: _buildGridItem(x, y, 'agent')),
                  ),
                ),
              );
            }

            Widget _buildPlayerBoardItems(BuildContext context, int index) {
              int x, y = 0;
              x = (index / _boardSize).floor();
              y = (index % _boardSize);
              return GridTile(
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 0.5),
                  ),
                  child: Center(child: _buildGridItem(x, y, 'player')),
                ),
              );
            }

            Widget _buildGridItem(int x, int y, String agentOrPlayer) {
              var boardState = _agentVisibleBoardState;
              var hiddenBoardState = _agentHiddenBoardState;
              if (agentOrPlayer == 'player') {
                boardState = _playerVisibleBoardState;
                hiddenBoardState = _playerHiddenBoardState;
              }
              Color gridItemColor;
              switch ((boardState[x][y]).toInt()) {
                // hit
                case 1:
                  gridItemColor = Colors.red;
                // miss
                case -1:
                  gridItemColor = Colors.yellow;
                default:
                  if (hiddenBoardState[x][y] == hiddenBoardCellOccupied &&
                      agentOrPlayer == 'player') {
                    gridItemColor = Colors.green;
                  } else {
                    gridItemColor = Colors.white;
                  }
              }

              return Container(color: gridItemColor);
            }

            Future<void> _gridItemTapped(BuildContext context, int x, int y) async {
              if (_agentHiddenBoardState[x][y] == hiddenBoardCellOccupied) {
                // Non-repeat move
                if (_agentVisibleBoardState[x][y] == visibleBoardCellUntried) {
                  _playerHitCount++;
                }
                _agentVisibleBoardState[x][y] = visibleBoardCellHit;
              } else {
                _agentVisibleBoardState[x][y] = visibleBoardCellMiss;
              }

              // TODO: add code for the agent to take an action

              String userPrompt = '';
              if (_playerHitCount == _planePieceCount &&
                  _agentHitCount == _planePieceCount) {
                userPrompt = 'Draw game!';
              } else if (_agentHitCount == _planePieceCount) {
                userPrompt = 'Agent wins!';
              } else if (_playerHitCount == _planePieceCount) {
                userPrompt = 'You win!';
              }

              if (userPrompt != '') {
                Future.delayed(const Duration(seconds: 2), () => setState(_resetGame));
                if (!context.mounted) return;
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(userPrompt, textAlign: TextAlign.center),
                    duration: const Duration(seconds: 2),
                  ),
                );
              }
            }
          }
      - name: Add lib/game_agent.dart
        path: frontend/lib/game_agent.dart
        replace-contents: |
          import 'dart:convert';
          import 'dart:io' show Platform;

          import 'package:flutter/foundation.dart' show kIsWeb;
          import 'package:http/http.dart' as http;

          // TODO: add class definition for inputs

          class TFAgentsAgent {
            TFAgentsAgent();

            Future<int> predict(List<List<double>> boardState) async {
              String server = '';
              if (!kIsWeb && Platform.isAndroid) {
                // For Android emulator
                server = '10.0.2.2';
              } else {
                // For iOS emulator, desktop and web platforms
                server = '127.0.0.1';
              }

              // TODO: add code to predict next strike position
              return 0;
            }
          }
      - name: Replace test/widget_test.dart
        path: frontend/test/widget_test.dart
        replace-contents: |
          // This is a basic Flutter widget test.
          //
          // To perform an interaction with a widget in your test, use the WidgetTester
          // utility that Flutter provides. For example, you can send tap and scroll
          // gestures. You can also use WidgetTester to find child widgets in the widget
          // tree, read text, and verify that the values of widget properties are correct.

          import 'package:flutter_test/flutter_test.dart';
          import 'package:frontend/main.dart';

          void main() {
            testWidgets('Smoke test', (tester) async {
              // Build our app and trigger a frame.
              await tester.pumpWidget(const PlaneStrike());

              // Verify that the widgets are there
              expect(find.text('Reset game'), findsOneWidget);
            });
          }
      - name: Patch macos/Runner/DebugProfile.entitlements
        path: frontend/macos/Runner/DebugProfile.entitlements
        patch-u: |
          --- b/frontend/finished/macos/Runner/DebugProfile.entitlements
          +++ a/frontend/finished/macos/Runner/DebugProfile.entitlements
          @@ -8,5 +8,7 @@
           	<true/>
           	<key>com.apple.security.network.server</key>
           	<true/>
          +	<key>com.apple.security.network.client</key>
          +	<true/>
           </dict>
           </plist>
      - name: Patch macos/Runner/Release.entitlements
        path: frontend/macos/Runner/Release.entitlements
        patch-u: |
          --- b/frontend/finished/macos/Runner/Release.entitlements
          +++ a/frontend/finished/macos/Runner/Release.entitlements
          @@ -4,5 +4,7 @@
           <dict>
           	<key>com.apple.security.app-sandbox</key>
           	<true/>
          +	<key>com.apple.security.network.client</key>
          +	<true/>
           </dict>
           </plist>
      - name: Copy step0
        copydir:
          from: frontend
          to: step0/frontend
      - name: Flutter clean
        path: step0/frontend
        flutter: clean
  - name: step1
    steps:
      - name: Remove generated code
        rmdir: step1/frontend
      - name: Copy step1
        copydir:
          from: frontend
          to: step1/frontend
      - name: Flutter clean
        path: step1/frontend
        flutter: clean
  - name: step2
    steps:
      - name: Remove generated code
        rmdir: step2/frontend
      - name: Copy step2
        copydir:
          from: frontend
          to: step2/frontend
      - name: Flutter clean
        path: step2/frontend
        flutter: clean
  - name: step3
    steps:
      - name: Remove generated code
        rmdir: step3/frontend
      - name: Copy step3
        copydir:
          from: frontend
          to: step3/frontend
      - name: Flutter clean
        path: step3/frontend
        flutter: clean
  - name: step4
    steps:
      - name: Remove generated code
        rmdir: step4/frontend
      - name: Copy step4
        copydir:
          from: frontend
          to: step4/frontend
      - name: Flutter clean
        path: step4/frontend
        flutter: clean
  - name: step5
    steps:
      - name: Remove generated code
        rmdir: step5/frontend
      - name: Patch lib/main.dart
        path: frontend/lib/main.dart
        patch-u: |
          --- b/tfagents-flutter/step5/frontend/lib/main.dart
          +++ a/tfagents-flutter/step5/frontend/lib/main.dart
          @@ -297,7 +297,26 @@ class _PlaneStrikeState extends State<PlaneStrike>
                 _agentVisibleBoardState[x][y] = visibleBoardCellMiss;
               }
           
          -    // TODO: add code for the agent to take an action
          +    // Agent takes action
          +    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(() {});
           
               String userPrompt = '';
               if (_playerHitCount == _planePieceCount &&
      - name: Patch lib/game_agent.dart
        path: frontend/lib/game_agent.dart
        patch-u: |
          --- b/tfagents-flutter/step5/frontend/lib/game_agent.dart
          +++ a/tfagents-flutter/step5/frontend/lib/game_agent.dart
          @@ -4,7 +4,19 @@ import 'dart:io' show Platform;
           import 'package:flutter/foundation.dart' show kIsWeb;
           import 'package:http/http.dart' as http;
           
          -// TODO: add class definition for inputs
          +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;
          +  }
          +}
           
           class TFAgentsAgent {
             TFAgentsAgent();
          @@ -19,7 +31,22 @@ class TFAgentsAgent {
                 server = '127.0.0.1';
               }
           
          -    // TODO: add code to predict next strike position
          -    return 0;
          +    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');
          +    }
             }
           }
      - name: Copy step5
        copydir:
          from: frontend
          to: step5/frontend
      - name: Flutter clean
        path: step5/frontend
        flutter: clean
  - name: step6
    steps:
      - name: Remove generated code
        rmdir: step6/frontend
      - name: Copy step6
        copydir:
          from: frontend
          to: step6/frontend
      - name: Flutter clean
        path: step6/frontend
        flutter: clean
  - name: finished
    steps:
      - name: Remove generated code
        rmdir: finished/frontend
      - name: Patch analysis_options.yaml
        path: frontend/analysis_options.yaml
        patch-u: |
          --- b/tfagents-flutter/finished/frontend/analysis_options.yaml
          +++ a/tfagents-flutter/finished/frontend/analysis_options.yaml
          @@ -1,7 +1 @@
           include: ../../../analysis_options.yaml
          -
          -analyzer:
          -  errors:
          -    unused_import: ignore
          -    unused_field: ignore
          -    unused_local_variable: ignore
      - name: Copy finished
        copydir:
          from: frontend
          to: finished/frontend
      - name: Flutter clean
        path: finished/frontend
        flutter: clean
  - name: Cleanup
    rmdir: frontend