コンテナ化の出現は、多くのプラットフォームで一貫性のあるスケーラブルな環境を提供することにより、ソフトウェアの開発とデプロイに大きな変革をもたらしました。運用を最適化しようとする開発者にとって、特にDockerが好ましいテクノロジーとして浮上しています。コンテナを基盤として使用することで、開発者は他のワークロードに依存しているのと同じ主要なメリット(移植性、スケーラビリティ、効率性、セキュリティ)を享受し、MLおよびAIアプリケーションにシームレスに拡張できます。この記事では、Snake AI ゲームを含む実際の例を使用して、Docker で TensorFlow.js を使用して Web ブラウザーで AI/ML を実行する方法を検討します。
なぜTensorFlow.js変換にDockerなのか?
堅牢なツールキットであるTensorFlow.jsの助けを借りて、機械学習モデルをWebブラウザーで実行できるため、インタラクティブなデモンストレーションやリアルタイムの推論などのアプリケーションに多くの可能性が開かれます。Dockerは、コンテナ内にコンテナを囲むことにより、変換プロセス全体で一貫性と使いやすさを保証することにより、洗練されたソリューションを提供します。
スネークAIニューラルネットワークゲーム
スネークAIゲームは、時間の経過とともにゲームプレイを学習して改善する人工知能を統合することにより、古典的なスネークゲームに現代的なひねりを加えています。このバージョンでは、矢印キーを使用して手動でプレイするか、AIに制御を任せることができます。
TensorFlow で動作する AI は、衝突を回避しながらスコアを最大化するための戦略的な動きをすることで、継続的に改善されます。ゲームはブラウザで TensorFlow.jsを使用して実行されます。これにより、さまざまなトレーニング済みモデルをテストし、AIがさまざまな課題にどのように適応するかを観察できます。
楽しみながらプレイしている場合でも、AI モデルを試している場合でも、このゲームはゲームと機械学習の交差点を探索するのに最適な方法です。私たちのアプローチでは、ニューラルネットワークを使用して従来のスネークゲームをプレイしました。
このスネークゲームのAIに飛び込む前に、ニューラルネットワークの基本を理解しましょう。
ニューラルネットワークとは?
ニューラルネットワークは、人間の脳の働きに触発された機械学習モデルの一種です。これはノード(または「ニューロン」)のレイヤーで構成されており、各ノードはいくつかの入力を受け取り、それらを処理し、出力を次のレイヤーに渡します。
ニューラルネットワークの主要コンポーネント:
- 入力レイヤー: 生データ(私たちのゲームでは、ヘビの周囲)を受け取ります。
- 非表示レイヤー: 入力を処理し、パターンを抽出します。
- 出力レイヤー: 最終的な予測を与えます

図 1:の主要コンポーネント ニューラルネットワーク
各ニューロンを小さな意思決定者として想像してみてください。ニューロンと層が多ければ多いほど、ネットワークはパターンをより適切に認識できます。
ニューラルネットワークの種類
ニューラルネットワークにはいくつかの種類があり、それぞれが異なるタスクに適しています。
- フィードフォワードニューラルネットワーク(FNN):
- 最も単純なタイプで、データは入力から出力まで一方向に流れます。
- 分類、回帰、パターン認識などのタスクに最適です。
- 畳み込みニューラルネットワーク(CNN):
- 画像データを操作するように設計されています。
- フィルターを使用して、エッジやテクスチャなどの空間パターンを検出します。
- リカレントニューラルネットワーク(RNN)
- シーケンス予測(株価、テキスト生成など)に適しています。
- 以前の入力を記憶し、時系列データを処理できるようにします。
- 長短期記憶ネットワーク(LSTM)
- 長期的な依存関係を学習できる特殊なタイプのRNNです。
- 敵対的生成ネットワーク(GAN)
- 画像やディープフェイクの作成など、新しいデータの生成に使用されます。
各タイプを使用する場合:
- CNNの特長: 画像分類、物体検出、顔認識。
- RNN/LSTM: 言語モデル、株式市場予測、時系列データ。
- FNNs: スネークのようなゲームでは、現在の状態に基づいて次のアクションを予測することがタスクです。
ゲームの仕組みは?
スネークゲームには2つの遊び方があります。
手動モード:
- キーボードの矢印キーを使用してヘビを制御します。
- 壁や自分にぶつからずにフルーツ(赤い四角)を食べるのが目標です。
- 果物を食べるたびに、ヘビは長く成長し、スコアが増加します。
- ヘビがクラッシュするとゲームが終了し、再起動して再試行できます。
AIモード:
- ゲームは、TensorFlow.jsで構築されたニューラルネットワーク(AI脳の一種)を使用してプレイします。
- AIはヘビの周囲(壁、果物の位置、ヘビの体)を見て、左、前方、右の最適な動きを予測します。
- 各ゲームの後、AIは失敗から学び、時間の経過とともに賢くなります。
- 十分なトレーニングを積めば、AIはクラッシュを回避し、スコアを向上させることができます。

Figure 2: AIのひねりを加えたノキアのクラシックなスネークゲーム
はじめ
このゲームがどのように構築されているかを順を追って見ていきましょう。Webブラウザでゲームを実行するには、まずDockerをインストールする必要があります。手順の概要は次のとおりです。
- リポジトリのクローンを作成する
- Docker Desktop のインストール
- Dockerfile を作成する
- Docker イメージをビルドする
- コンテナーを実行する
- ウェブブラウザを使用してゲームにアクセスします
リポジトリのクローン
git clone https://github.com/dockersamples/snake-game-tensorflow-docker
Docker Desktop のインストール
前提 条件:
- サポートされているバージョンの Mac、Linux、または Windows
- 少なくとも 4 GB の RAM
Docker Desktopをダウンロードするには、ここをクリックしてください。システムに適したバージョンを選択します(Macユーザー向けのAppleシリコンまたはIntelチップ、Windows、またはLinuxディストリビューション)

図 3:マシンのDockerWebサイトからDockerDesktopをダウンロードします
クイックラン
Docker Desktop をインストールしたら、ビルド済みの Docker イメージを実行し、コマンド プロンプトで次のコマンドを実行します。イメージをプルし、Dockerイメージ1snake-game:vを実行する新しいコンテナを開始し、ホストマシン上のポート8080を公開します。
次のコマンドを実行して、アプリケーションを起動します。
ドッカー作成
次に、ブラウザを開いて http://localhost:8080 に移動し、スネークゲームの出力を確認し、最初のゲームを開始します。
なぜDockerを使用してスネークゲームを実行するのですか?
- マシンにNginxをインストールする必要はありません - Dockerが処理します。
- ゲームは、Dockerをサポートするどのシステムでも同じように動作します。
- ゲームをDockerイメージとして簡単に共有でき、他のユーザーは1つのコマンドで実行できます。
ゲームロジック
index.html file
はゲームの基礎として機能し、Webページのレイアウトと構造を定義します。AI を動かすライブラリ TensorFlow.js と、ゲームプレイ ロジックを処理するための script.js
、AI ベースの移動の ai.js
を取得します。ゲームのUIはシンプルでありながら機能的で、プレイヤーが手動制御(矢印キーを使用)とAIモードを切り替えることができる モードセレクター を備えています。スコアボードは、AI のトレーニング時にスコア、ハイスコア、および世代数を動的に更新します。また、ゲーム自体はHTMLの <canvas>
要素で実行されるため、非常にインタラクティブです。先に進むにつれて、JavaScriptファイルがどのようにこのゲームに命を吹き込むかを探っていきます。
ファイル : index.html
HTML ファイルは、ゲーム キャンバスやコントロール ボタンなど、ゲームの構造を設定します。また、Tensorflow からライブラリをフェッチし、これはコードでヘビを訓練するためにさらに使用されます。
- カンバス: ゲームが引き分けられる場所。
- モードセレクター: 手動とAIのゲームプレイを切り替えることができます。
- TensorFlow.js:AIの頭脳を動かすライブラリ!
ファイル : script.js
このファイルは、ボードの描画、ヘビの移動、果物の配置、スコアの記録など、ゲーム内のすべてを処理します。
1 2 3 4 5 6 7 | const canvas = document.getElementById( 'gameCanvas' ); const ctx = canvas.getContext( '2d' ); let snake = [{ x: 5, y: 5 }]; let fruit = { x: 10, y: 10 }; let direction = { x: 1, y: 0 }; let score = 0; |
- スネークポジション: ヘビが始まる場所。
- フルーツの位置: リンゴがどこにあるか。
- 方向: ヘビがどちらの方向に動いているか。
ゲームループ
ゲームループは、ヘビの位置を更新し、衝突をチェックし、スコアを処理しながら、ゲームの実行を維持します。
1 2 3 4 5 6 7 8 9 10 11 | function gameLoopManual() { const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; if (head.x === fruit.x && head.y === fruit.y) { score++; fruit = placeFruit(); } else { snake.pop(); } snake.unshift(head); } |
- ヘビの移動: ヘビに新しい頭を追加し、尾を取り除きます(リンゴを食べない限り)。
- 衝突: 頭が壁や自分の体にぶつかると、ゲームが終了します。
モードの切り替え
1 2 3 | document.getElementById('mode').addEventListener('change', function() { gameMode = this.value; }); |
- 手動モード: 矢印キーを使用してヘビを制御します。
- AIモード: ニューラルネットワークは次の動きを予測します。
ゲームオーバーと再起動
1 2 3 4 5 6 7 8 9 10 | function gameOver() { clearInterval(gameInterval); alert('Game Over'); } function resetGame() { score = 0; snake = [{ x: 5, y: 5 }]; fruit = placeFruit(); } |
- ゲームは終わりました: ヘビがクラッシュしたときにゲームを停止します。
- リセット: ゲームを最初にリセットします。
AIのトレーニング
ファイル : ai.js
このファイルは、ニューラルネットワーク(スネークの遊び方を学習するAI脳)を作成してトレーニングします。
1 2 3 4 5 6 7 | var movementOptions = ['left', 'forward', 'right']; const neuralNet = tf.sequential(); neuralNet.add(tf.layers.dense({units: 256, inputShape: [5]})); neuralNet.add(tf.layers.dense({units: 512})); neuralNet.add(tf.layers.dense({units: 256})); neuralNet.add(tf.layers.dense({units: 3})); |
- ニューラルネットワーク: これは、4層のニューロンを持つシミュレートされた脳です。
- インプット: ゲームの状態に関する情報(壁、果物の位置、ヘビの体)。
- アウトプット: 左折、前進、右折の3つの選択肢のいずれか。
1 2 3 4 5 | const optAdam = tf.train.adam(.001); neuralNet.compile({ optimizer: optAdam, loss: 'meanSquaredError' }); |
- オプティマイザ: 脳の重みを調整することで、脳が効率的に学習するのを助けます。
- 損失機能: AIの予測がどの程度間違っているかを測定し、AIの改善を支援します。
ヘビはゲームをプレイするたびに、その動きを覚えて自分自身を訓練します。
1 2 3 4 5 6 7 8 9 | async function trainNeuralNet(moveRecord) { for (var i = 0; i < moveRecord.length; i++) { const expected = tf.oneHot(tf.tensor1d([deriveExpectedMove(moveRecord[i])], 'int32'), 3).cast('float32'); posArr = tf.tensor2d([moveRecord[i]]); await neuralNet.fit(posArr, expected, { batchSize: 3, epochs: 1 }); expected.dispose(); posArr.dispose(); } } |
各ゲームの後、AIは何が起こったかを見て、内部接続を調整し、次のゲームに向けて改善を試みます。
movementOptions 配列は、ヘビの可能な移動方向 ('left'、'forward'、'right') を定義します。
学習率が 0の Adam オプティマイザー。001 はモデルをコンパイルし、平均二乗誤差損失関数が指定されます。trainNeuralNet 関数は、特定の moveRecord 配列を使用してニューラル ネットワークをトレーニングするために定義されます。moveRecord 配列を反復処理し、予想される動きに対して one-hot エンコードされたテンソルを作成し、TensorFlow.js fit メソッドを使用してモデルをトレーニングします。
次の動きを予測する
プレイするとき、AIは最善の動きが何であるかを予測します。
1 2 3 4 5 | function computePrediction(input) { let inputs = tf.tensor2d([input]); const outputs = neuralNet.predict(inputs); return movementOptions[outputs.argMax(1).dataSync()[0]]; } |
computePrediction
関数は、トレーニング済みのニューラルネットワークを使用して予測を行います。入力配列を受け取り、入力からテンソルを作成し、ニューラルネットワークを使用して動きを予測し、予測された出力に基づいて移動オプションを返します。
このコードでは、ニューラル ネットワーク モデルの作成、特定の移動レコードでの学習、および学習済みモデルを使用した予測の作成を示します。このアプローチは、スネークAIゲームの歴史から学び、情報に基づいた決定を下すことにより、スネークAIゲームのパフォーマンスとインテリジェンスを向上させることができます。
ファイル : Dockerfile
1 2 | FROM nginx:latest COPY . /usr/share/nginx/html |
から nginx:最新
- これにより、Docker は最新バージョンの Nginx を基本イメージとして使用するように指示します。
- Nginx は、HTML、CSS、JavaScript(Snakeゲームの構成要素)などの静的ファイルを提供するのに最適なWebサーバーです。
- サーバーを最初から作成する代わりに、次の行は、既存の信頼性の高いNginxセットアップを使用して時間を節約します。
写し。 /usr/share/nginx/html
- この行は、現在のプロジェクトディレクトリ(Snakeゲームファイルがあるディレクトリ:index.html、script.js、ai.jsなど)Nginx WebサーバーのデフォルトフォルダにWebコンテンツを提供するためのフォルダに移動します。
- /usr/share/nginx/html は、Nginx が表示する Web ファイルを探すデフォルトのフォルダです。
開発セットアップ
Dockerを使用してSnakeゲームの開発環境を設定する方法は次のとおりです。
開発をスムーズにするために、 Docker ボリュームを使用して 、ゲーム ファイルを変更するたびに Docker イメージが再構築されないようにすることができます。
Snake-AI-TensorFlow-Dockerコードが存在するフォルダからコマンドを実行します。
1 | docker run -it --rm -d -p 8080:80 --name web -v ./:/usr/share/nginx/html nginx |
次のようなエラーが発生した場合
1 2 3 4 | docker: Error response from daemon: Mounts denied: The path /Users/harsh/Downloads/Snake-AI-TensorFlow-Docker is not shared from the host and is not known to Docker. You can configure shared paths from Docker -> Preferences... -> Resources -> File Sharing. See https://docs.docker.com/desktop/settings/mac/#file-sharing for more info. |
Docker Desktopを開き、Settings -> Resources -> File Sharing -> に移動し、リポジトリコードをクローンした場所を選択し、 Apply & restartをクリックします。

図 4:Docker Desktopを使用してAIスネークゲームの開発環境を設定する
コマンドを再度実行すると、エラーに直面することはありません
1 | docker run -it --rm -d -p 8080:80 --name web -v ./:/usr/share/nginx/html nginx |
次のコマンドでコンテナが実行されているかどうかを確認します
1 2 3 | harsh@Harshs-MacBook-Air snake-game-tensorflow-docker % docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES c47e2711b2db nginx "/docker-entrypoint.…" 3 seconds ago Up 2 seconds 0.0.0.0:8080->80/tcp web |
ブラウザを開いてURLに移動します http://localhost:8080、スネークゲームの出力が表示されます。このセットアップは、すべてを高速かつ動的に保つため、開発に最適です。

図 5:Webブラウザを介してスネークゲームにアクセスします。
コードの変更は、コンテナを再構築することなく、ブラウザにすぐに反映されます-v ~/.:/usr/share/nginx/html
— これが魔法の部分です!ローカルディレクトリ(Snake-AI-TensorFlow-Docker
)をコンテナ内のNginx HTMLディレクトリ(/usr/share/nginx/html
)にマウントします。
~/Snake-AI-TensorFlow-Docker
コード内の HTML、CSS、または JavaScript ファイルに加えた変更は、コンテナーを再構築しなくても、実行中のアプリにすぐに反映されます。
結論
結論として、TensorFlow.js と Docker を使用して Snake AI ゲームを構築すると、ML と AI をインタラクティブな Web アプリケーションにシームレスに統合できることが示されています。このプロジェクトを通じて、強化学習の基礎を探求しただけでなく、Docker が開発とデプロイのプロセスを簡素化する方法を直接見てきました。
コンテナ化により、Dockerは異なるシステム間で一貫した環境を確保し、一般的な「自分のマシンで動作する」という問題を排除します。この一貫性により、Web アプリケーション、機械学習プロジェクト、または AI アプリケーションのバージョンの不一致やローカル構成の問題を心配することなく、他のユーザーとの共同作業、本番環境へのデプロイ、依存関係の管理が容易になります。