The emergence of containerization has brought about a significant transformation in software development and deployment by providing a consistent and scalable environment on many platforms. For developers trying to optimize their operations, Docker in particular has emerged as the preferred technology.\u00a0 By using containers as the foundation, developers gain the same key benefits \u2014 portability, scalability, efficiency, and security \u2014 that they rely on for other workloads, seamlessly extending them to ML and AI applications. Using a real-world example involving a Snake AI game, we\u2019ll examine in this article how TensorFlow.js can be used with Docker to run AI\/ML in a web browser.<\/p>\n
With the help of TensorFlow.js, a robust toolkit, machine learning models can be executed in a web browser, opening up a plethora of possibilities for applications such as interactive demonstrations and real-time inference. Docker offers a sophisticated solution by guaranteeing consistency and user-friendliness throughout the conversion process by enclosing it inside a container.<\/p>\n
The Snake AI game<\/strong> brings a modern twist to the classic Snake game by integrating artificial intelligence that learns and improves its gameplay over time. In this version, you can either play manually using arrow keys or let the AI take control.\u00a0<\/p>\n The AI running with TensorFlow<\/strong> continuously improves by making strategic movements to maximize the score while avoiding collisions. The game runs in a browser using TensorFlow.js<\/strong>, allowing you to test different trained models and observe how the AI adapts to various challenges.\u00a0<\/p>\n Whether you\u2019re playing for fun or experimenting with AI models, this game is a great way to explore the intersection of gaming and machine learning. In our approach, we\u2019ve used the neural network to play the traditional Snake game.<\/p>\n Before we dive into the AI in this Snake game, let\u2019s understand the basics of a neural network.<\/p>\n A neural network<\/strong> is a type of machine learning model inspired by the way the human brain works. It\u2019s made up of layers of nodes (or \u201cneurons\u201d), where each node takes some inputs, processes them, and passes an output to the next layer.<\/p>\n Key components of a neural network:<\/strong><\/p>\n Input layer: <\/strong>Receives the raw data (in our game, the snake\u2019s surroundings).<\/p>\n Hidden layers: <\/strong>Process the input and extract patterns.<\/p>\n Output layer: <\/strong>Gives the final prediction<\/p>\n Figure 1: Key components of a<\/strong> neural network<\/strong><\/p>\n Imagine each neuron as a small decision-maker. The more neurons and layers, the better the network can recognize patterns.<\/p>\n There are several types of neural networks, each suited for different tasks!<\/p>\n Feedforward Neural Networks (FNNs):<\/strong><\/p>\n The simplest type, where data flows in one direction, from input to output.<\/p>\n Great for tasks like classification, regression, and pattern recognition.<\/p>\n Convolutional Neural Networks (CNNs):<\/strong><\/p>\n Designed to work with image data.<\/p>\n Uses filters to detect spatial patterns, like edges or textures.<\/p>\n Recurrent Neural Networks (RNNs)<\/strong><\/p>\n Good for sequence prediction (e.g., stock prices, text generation).<\/p>\n Remembers previous inputs, allowing it to handle time-series data.<\/p>\n Long Short-Term Memory Networks (LSTMs)<\/strong><\/p>\n A specialized type of RNN that can learn long-term dependencies.<\/p>\n Generative Adversarial Networks (GANs)<\/strong><\/p>\n Used for generating new data, such as creating images or deepfakes.<\/p>\n CNNs:<\/strong> Image classification, object detection, facial recognition.<\/p>\n RNNs\/LSTMs:<\/strong> Language models, stock market prediction, time-series data.<\/p>\n FNNs:<\/strong> Games like Snake, where the task is to predict the next action based on the current state.<\/p>\n The snake game offers two ways to play:<\/p>\n Manual mode:<\/strong><\/p>\n You control the snake using your keyboard\u2019s arrow keys.<\/p>\n The goal is to eat the fruit (red square) without hitting the walls or yourself.<\/p>\n Every time you eat a fruit, the snake grows longer, and your score increases.<\/p>\n If the snake crashes, the game ends, and you can restart to try again.<\/p>\n AI mode:<\/strong><\/p>\n The game plays itself using a neural network (a type of AI brain) built with TensorFlow.js.<\/p>\n The AI looks at the snake\u2019s surroundings (walls, fruit location, and snake body) and predicts the best move: left, forward, or right.<\/p>\n After each game, the AI learns from its mistakes and becomes smarter over time.<\/p>\n With enough training, the AI can avoid crashing and improve its score.<\/p>\n Figure 2: The classic Nokia snake game with an AI twist<\/strong><\/p>\n Getting started<\/p>\n Let\u2019s go through how this game is built step by step. You\u2019ll first need to install Docker to run the game in a web browser. Here\u2019s a summary of the steps.\u00a0<\/p>\n Clone the repository<\/p>\n Install Docker Desktop<\/p>\n Create a Dockerfile<\/p>\n Build the Docker image<\/p>\n Run the container<\/p>\n Access the game using the web browser<\/p>\n git clone https:\/\/github.com\/dockersamples\/snake-game-tensorflow-docker<\/p>\n Prerequisites:<\/strong><\/p>\n A supported version of Mac, Linux, or Windows<\/p>\n At least 4 GB RAM<\/p>\n Click here<\/a> to download Docker Desktop. Select the version appropriate for your system (Apple Silicon or Intel chip for Mac users, Windows, or Linux distribution)<\/p>\n Figure 3: Download Docker Desktop from the Docker website for your machine<\/strong><\/p>\n After installing Docker Desktop, run the pre-built Docker image and <\/strong>execute the following command in your command prompt. It\u2019ll pull the image and start a new container running the snake-game:v1<\/strong> Docker image and expose port 8080<\/strong> on the host machine.\u00a0<\/p>\n Run the following command to bring up the application:<\/p>\n docker compose up<\/p>\n Next, open the browser and go to http:\/\/localhost:8080<\/a> to see the output of the snake game and start your first game.<\/p>\n Why use Docker to run the snake game?<\/strong><\/p>\n No need to install Nginx on your machine \u2014 Docker handles it.<\/p>\n The game runs the same way on any system that supports Docker.<\/p>\n You can easily share your game as a Docker image, and others can run it with a single command.<\/p>\n The index.html file acts as the foundation of the game, defining the layout and structure of the webpage. It fetches the library TensorFlow.js<\/strong>, which powers the AI, along with script.js for handling gameplay logic and ai.js for AI-based movements. The game UI is simple yet functional, featuring a mode selector<\/strong> that lets players switch between manual control (using arrow keys) and AI mode. The scoreboard<\/strong> dynamically updates the score, high score, and generation count when the AI is training. Also, the game itself runs on an HTML <canvas> element, making it highly interactive. As we move forward, we\u2019ll explore how the JavaScript files bring this game to life!<\/p>\n File : index.html<\/a><\/p>\n The HTML file sets up the structure of the game, like the game canvas and control buttons. It also fetches the library from Tensorflow which will be further used by the code to train the snake.\u00a0<\/p>\n Canvas:<\/strong> Where the game is drawn.<\/p>\n Mode Selector:<\/strong> Lets you switch between manual and AI gameplay.<\/p>\n TensorFlow.js:<\/strong> The library that powers the AI brain!<\/p>\n File : script.js<\/a><\/p>\n This file handles everything in the game\u2014drawing the board, moving the snake, placing the fruit, and keeping score.<\/p>\n let snake = [{ x: 5, y: 5 }]; Snake Position:<\/strong> Where the snake starts.<\/p>\n Fruit Position:<\/strong> Where the apple is.<\/p>\n Direction:<\/strong> Which way the snake is moving.<\/p>\n The game loop keeps the game running, updating the snake\u2019s position, checking for collisions, and handling the score.<\/p>\n if (head.x === fruit.x && head.y === fruit.y) { Moving the Snake:<\/strong> Adds a new head to the snake and removes the tail (unless it eats an apple).<\/p>\n Collision:<\/strong> If the head hits the wall or its own body, the game ends.<\/p>\n Manual Mode:<\/strong> Use arrow keys to control the snake.<\/p>\n AI Mode:<\/strong> The neural network predicts the next move.<\/p>\n function resetGame() { Game Over:<\/strong> Stops the game when the snake crashes.<\/p>\n Reset:<\/strong> Resets the game back to the beginning.<\/p>\n File : ai.js<\/a><\/p>\n This file creates and trains the neural network \u2014 the AI brain that learns how to play Snake!<\/p>\n const neuralNet = tf.sequential(); Neural Network:<\/strong> This is a simulated brain with four layers of neurons.<\/p>\n Input:<\/strong> Information about the game state (walls, fruit position, snake body).<\/p>\n Output:<\/strong> One of three choices: turn left, go forward, or turn right.<\/p>\n Optimizer:<\/strong> Helps the brain learn efficiently by adjusting its weights.<\/p>\n Loss Function:<\/strong> Measures how wrong the AI\u2019s predictions are, helping it improve.<\/p>\n Every time the snake plays a game, it remembers its moves and trains itself.<\/p>\n After each game, the AI looks at what happened, adjusts its internal connections, and tries to improve for the next game.<\/p>\n The movementOptions array defines the possible movement directions for the snake: \u2018left\u2019, \u2018forward\u2019, and \u2018right\u2019.<\/p>\n An Adam optimizer with a learning rate of 0.001 compiles the model, and a mean squared error loss function is specified. The trainNeuralNet function is defined to train the neural network using a given moveRecord array. It iterates over the moveRecord array, creates one-hot encoded tensors for the expected movement, and trains the model using the TensorFlow.js fit method.<\/p>\n When playing, the AI predicts what the best move should be.<\/p>\n The computePrediction function makes predictions using the trained neural network. It takes an input array, creates a tensor from the input, predicts the movement using the neural network, and returns the movement option based on the predicted output.<\/p>\n The code demonstrates the creation of a neural network model, training it with a given move record, and making predictions using the trained model. This approach can enhance the snake AI game\u2019s performance and intelligence by learning from its history and making informed decisions.<\/p>\nWhat is a neural network?<\/h2>\n
Types of neural networks<\/h2>\n
When to use each type:<\/h2>\n
How does the game work?<\/h2>\n
Cloning the repository<\/h2>\n
Install Docker Desktop<\/h2>\n
Quick run<\/h2>\n
The game logic<\/h2>\n
\nconst ctx = canvas.getContext(‘2d’);\n
\nlet fruit = { x: 10, y: 10 };
\nlet direction = { x: 1, y: 0 };
\nlet score = 0;\n<\/p><\/div>\nThe game loop<\/h3>\n
\n const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };\n
\n score++;
\n fruit = placeFruit();
\n } else {
\n snake.pop();
\n }
\n snake.unshift(head);
\n}\n<\/p><\/div>\nSwitching between modes<\/h3>\n
\n gameMode = this.value;
\n});\n<\/div>\nGame over and restart<\/h3>\n
\n clearInterval(gameInterval);
\n alert(‘Game Over’);
\n}\n
\n score = 0;
\n snake = [{ x: 5, y: 5 }];
\n fruit = placeFruit();
\n}\n<\/p><\/div>\nTraining the AI<\/h2>\n
\nneuralNet.add(tf.layers.dense({units: 256, inputShape: [5]}));
\nneuralNet.add(tf.layers.dense({units: 512}));
\nneuralNet.add(tf.layers.dense({units: 256}));
\nneuralNet.add(tf.layers.dense({units: 3}));\n<\/p><\/div>\n
\nneuralNet.compile({
\n optimizer: optAdam,
\n loss: ‘meanSquaredError’
\n});\n<\/div>\n
\n for (var i = 0; i < moveRecord.length; i++) {
\n const expected = tf.oneHot(tf.tensor1d([deriveExpectedMove(moveRecord[i])], ‘int32’), 3).cast(‘float32’);
\n posArr = tf.tensor2d([moveRecord[i]]);
\n await neuralNet.fit(posArr, expected, { batchSize: 3, epochs: 1 });
\n expected.dispose();
\n posArr.dispose();
\n }
\n}\n<\/div>\nPredicting the next move<\/h2>\n
\n let inputs = tf.tensor2d([input]);
\n const outputs = neuralNet.predict(inputs);
\n return movementOptions[outputs.argMax(1).dataSync()[0]];
\n}\n<\/div>\n