Docker ず TensorFlow Models & TensorFlow.js を䜵甚しお Snake AI ゲヌムに掻甚

投皿日: Mar 18, 2025

コンテナ化の出珟は、倚くのプラットフォヌムで䞀貫性のあるスケヌラブルな環境を提䟛するこずにより、゜フトりェアの開発ずデプロむに倧きな倉革をもたらしたした。運甚を最適化しようずする開発者にずっお、特に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:の䞻芁コンポヌネント ニュヌラルネットワヌク

各ニュヌロンを小さな意思決定者ずしお想像しおみおください。ニュヌロンず局が倚ければ倚いほど、ネットワヌクはパタヌンをより適切に認識できたす。

ニュヌラルネットワヌクの皮類

ニュヌラルネットワヌクにはいく぀かの皮類があり、それぞれが異なるタスクに適しおいたす。

  1. フィヌドフォワヌドニュヌラルネットワヌク(FNN):
  • 最も単玔なタむプで、デヌタは入力から出力たで䞀方向に流れたす。
  • 分類、回垰、パタヌン認識などのタスクに最適です。
  1. 畳み蟌みニュヌラルネットワヌク(CNN):
  • 画像デヌタを操䜜するように蚭蚈されおいたす。
  • フィルタヌを䜿甚しお、゚ッゞやテクスチャなどの空間パタヌンを怜出したす。
  1. リカレントニュヌラルネットワヌク(RNN)
  • シヌケンス予枬(株䟡、テキスト生成など)に適しおいたす。
  • 以前の入力を蚘憶し、時系列デヌタを凊理できるようにしたす。
  1. 長短期蚘憶ネットワヌク(LSTM)
  • 長期的な䟝存関係を孊習できる特殊なタむプのRNNです。
  1. 敵察的生成ネットワヌク(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ディストリビュヌション)

ブログDDメニュヌ

図 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

このファむルは、ボヌドの描画、ヘビの移動、果物の配眮、スコアの蚘録など、ゲヌム内のすべおを凊理したす。

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;
  • スネヌクポゞション: ヘビが始たる堎所。
  • フルヌツの䜍眮: リンゎがどこにあるか。
  • 方向 ヘビがどちらの方向に動いおいるか。

ゲヌムルヌプ

ゲヌムルヌプは、ヘビの䜍眮を曎新し、衝突をチェックし、スコアを凊理しながら、ゲヌムの実行を維持したす。

function gameLoopManual() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

    if (head.x === fruit.x &amp;&amp; head.y === fruit.y) {
        score++;
        fruit = placeFruit();
    } else {
        snake.pop();
    }
    snake.unshift(head);
}
  • ヘビの移動: ヘビに新しい頭を远加し、尟を取り陀きたす(リンゎを食べない限り)。
  • 衝突 頭が壁や自分の䜓にぶ぀かるず、ゲヌムが終了したす。

モヌドの切り替え

document.getElementById('mode').addEventListener('change', function() {
    gameMode = this.value;
});
  • 手動モヌド: 矢印キヌを䜿甚しおヘビを制埡したす。
  • AIモヌド: ニュヌラルネットワヌクは次の動きを予枬したす。

ゲヌムオヌバヌず再起動

function gameOver() {
    clearInterval(gameInterval);
    alert('Game Over');
}

function resetGame() {
    score = 0;
    snake = [{ x: 5, y: 5 }];
    fruit = placeFruit();
}
  • ゲヌムは終わりたした ヘビがクラッシュしたずきにゲヌムを停止したす。
  • リセット ゲヌムを最初にリセットしたす。

AIのトレヌニング

ファむル : ai.js

このファむルは、ニュヌラルネットワヌク(スネヌクの遊び方を孊習するAI脳)を䜜成しおトレヌニングしたす。

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぀の遞択肢のいずれか。
const optAdam = tf.train.adam(.001);
neuralNet.compile({
  optimizer: optAdam,
  loss: 'meanSquaredError'
});
  • オプティマむザ 脳の重みを調敎するこずで、脳が効率的に孊習するのを助けたす。
  • 損倱機胜: AIの予枬がどの皋床間違っおいるかを枬定し、AIの改善を支揎したす。

ヘビはゲヌムをプレむするたびに、その動きを芚えお自分自身を蚓緎したす。

async function trainNeuralNet(moveRecord) {
  for (var i = 0; i &lt; 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は最善の動きが䜕であるかを予枬したす。

function computePrediction(input) {
  let inputs = tf.tensor2d([input]);
  const outputs = neuralNet.predict(inputs);
  return movementOptions[outputs.argMax(1).dataSync()[0]];
}

computePrediction関数は、トレヌニング枈みのニュヌラルネットワヌクを䜿甚しお予枬を行いたす。入力配列を受け取り、入力からテン゜ルを䜜成し、ニュヌラルネットワヌクを䜿甚しお動きを予枬し、予枬された出力に基づいお移動オプションを返したす。

このコヌドでは、ニュヌラル ネットワヌク モデルの䜜成、特定の移動レコヌドでの孊習、および孊習枈みモデルを䜿甚した予枬の䜜成を瀺したす。このアプロヌチは、スネヌクAIゲヌムの歎史から孊び、情報に基づいた決定を䞋すこずにより、スネヌクAIゲヌムのパフォヌマンスずむンテリゞェンスを向䞊させるこずができたす。

ファむル : Dockerfile

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コヌドが存圚するフォルダからコマンドを実行したす。

docker run -it --rm -d -p 8080:80 --name web -v ./:/usr/share/nginx/html nginx

次のような゚ラヌが発生した堎合

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をクリックしたす。

ブログDDビゞネスファむル共有

図 4:Docker Desktopを䜿甚しおAIスネヌクゲヌムの開発環境を蚭定する

コマンドを再床実行するず、゚ラヌに盎面するこずはありたせん 

docker run -it --rm -d -p 8080:80 --name web -v ./:/usr/share/nginx/html nginx

次のコマンドでコンテナが実行されおいるかどうかを確認したす

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、スネヌクゲヌムの出力が衚瀺されたす。このセットアップは、すべおを高速か぀動的に保぀ため、開発に最適です。

ブログ 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 アプリケヌションのバヌゞョンの䞍䞀臎やロヌカル構成の問題を心配するこずなく、他のナヌザヌずの共同䜜業、本番環境ぞのデプロむ、䟝存関係の管理が容易になりたす。

著者に぀いお

開発者アドボケむト、Docker

Man Co. シニア゜フトりェア゚ンゞニア

関連蚘事