Try My Web-Based AI Chess App

Written By Ron Picard

Try it out below!

Below is a live demo of my latest project. This web-based AI Chess app runs in a secure RHEL UBI docker image. It is built using Node.js and React. Try the live demo below or on Github!

Introduction

I'm excited to share my latest project with you all—a web-based AI Chess application that runs in a secure RHEL UBI (Universal Base Image) Docker container. This app is built using Node.js and React, showcasing the seamless integration of modern web technologies and containerization.

The AI Chess app provides an interactive and customizable chess-playing experience in which an AI Player performing a min/max depth search will make intelligent moves against human players.

This project was an opportunity for me to delve deeper into several key areas:

  • React: Building dynamic user interfaces and managing state efficiently.

  • Node.js: Leveraging node packages and JavaScript for application development.

  • Web Deployment: Learning more about deploying web applications in containerized environments.

  • Pair Programming with ChatGPT: Collaborating with an AI assistant to enhance coding efficiency and problem-solving.

  • GitHub Copilot: Using AI-powered coding suggestions to speed up development and learn new coding techniques.

The Infrastructure

The infrastructure for this project is designed to ensure a secure and efficient development. Here's a detailed look at how it's set up:

Development Environment

  1. Windows Subsystem for Linux (WSL): I used WSL to manage my GitHub commits, and to build my dev container files. Within WSL I used Node.js to create the base of my React application.

  2. Docker and Dev Containers: Using Docker, I created a dev container based on a RHEL UBI (Universal Base Image) and imported my project files through a shared volume.

Deployment

  1. GitHub Pages: For web deployment, I used GitHub Pages, which is a free hosting service provided by GitHub. It allows you to serve static websites directly from a repository.

Pair Programming with LLMs

GitHub Copilot vs. ChatGPT

In this project, I used both GitHub Copilot and ChatGPT for pair programming. Here are some insights into how they compare:

GitHub Copilot

  • Limited Context: GitHub Copilot doesn't have access to the full context of your project, including your file system. It generates code based on the immediate context provided in your code editor, which can sometimes lead to irrelevant or incorrect suggestions.

  • Distractions: Copilot can occasionally get "distracted" and provide code suggestions that are not entirely relevant to the current task, which can be more of a hindrance than a help.

  • Functionality: While Copilot is helpful for generating boilerplate code and making quick suggestions, it doesn't always produce functioning code that integrates well with the rest of your project. This often requires manual adjustments and debugging.

ChatGPT

  • Comprehensive Assistance: ChatGPT, on the other hand, can provide more comprehensive assistance. It can understand and respond to more complex queries, offering detailed explanations, debugging help, and suggestions that consider the broader context of the project.

  • Interactive Problem-Solving: ChatGPT excels at interactive problem-solving. It can engage in a dialogue, ask clarifying questions, and provide step-by-step guidance, which is invaluable for tackling challenging coding problems.

  • Holistic Understanding: With ChatGPT, you can explain the entire scope of the project, allowing it to offer more targeted and effective assistance. This holistic understanding often results in more accurate and useful suggestions.

Special Notes on ChatGPT 4o

  • ChatGPT 4o isn’t perfect and still Has Limitations. There were several times when I had to dive into the details and explicitly tell chatGPT what was wrong and how to fix it.

  • You can update the memory of ChatGPT. There were times when I had to manually fix an issue, then copy the file into chatGPT and tell it to remember the changes. it would respond with “memory updated”, and be able to leverage my changes when it gave future suggestions.

  • A few times I reach a “memory full” limit with ChatGPT. I would have to manually wipe the memory, and then give it some new copy-and-paste context before we could continue collaborating on the code.

  • All of this speaks to the fact that being a strong developer and software designer gives you a major advantage when leveraging ChatGPT. You need to be able to quickly digest generated code so know how to fix things when the LLM doesn’t.

The Chess App

Features of the Chess App

This AI Chess app comes with several features to enhance playing experience:

  1. AI Opponent: The app includes a built-in AI opponent that makes intelligent moves, providing a challenging game for players of all skill levels. The AI uses the minimax algorithm with customizable search depth to evaluate the best possible moves. To enable responsiveness, I have limited the search depth to a maximum of 3 moves ahead.

  2. Customizable Difficulty: Players can adjust the AI's difficulty level by changing the search depth. This allows beginners to start with easier settings and gradually increase the difficulty as they improve.

  3. Player Color Selection: Users can choose to play as either white or black. The AI will automatically play the opposite color, making the first move as white if the user chooses black.

  4. Interactive Chessboard: The app features an interactive chessboard built with chessboardjsx, allowing users to drag and drop pieces to make their moves. Invalid moves are not allowed, ensuring a smooth and error-free playing experience.

  5. Responsive Design: The chessboard size adjusts dynamically based on the window size, providing an optimal experience on both desktop and mobile devices.

  6. Game Status Messages: Clear status messages inform players whose turn it is, whether the AI is thinking, and the outcome of the game (checkmate, draw, or stalemate).

  7. Restart Game: Players can easily restart the game at any time with a simple click of a button, resetting the board and starting a new match.

  8. Visual Feedback: The app provides visual feedback on the game state, such as highlighting the AI's thinking process and indicating when it's the player's move.

The AI algorithm

Minimax Algorithm

The Minimax algorithm is a recursive search algorithm used for decision-making in two-player games like chess. It simulates all possible moves in the game, evaluates them, and chooses the best one. Here's how it works:

  1. Tree Structure: The algorithm builds a game tree where each node represents a game state, and each edge represents a move.

  2. Maximizing and Minimizing Players: The algorithm assumes two players:

    • Maximizing Player (AI): Tries to maximize the evaluation function's value.

    • Minimizing Player (Human): Tries to minimize the evaluation function's value.

  3. Depth-Limited Search: To make the computation feasible, the search is limited to a certain depth (number of moves ahead). This depth is customizable in the app.

Alpha-Beta Pruning

Alpha-Beta Pruning is an optimization technique for the Minimax algorithm. It reduces the number of nodes evaluated in the search tree by eliminating branches that cannot influence the final decision. Here's how it works:

  1. Alpha and Beta Values:

    • Alpha: The best (highest) value that the maximizing player can guarantee at that level or above.

    • Beta: The best (lowest) value that the minimizing player can guarantee at that level or above.

  2. Pruning: If the maximizing player finds a move that leads to a value higher than the current beta value, the current branch is pruned (cut off). Similarly, if the minimizing player finds a move that leads to a value lower than the current alpha value, the current branch is pruned.

Algorithm Implementation

Here's how the Minimax algorithm with Alpha-Beta Pruning is implemented in the chess app:

  1. Evaluation Function:

    • Evaluates the board state by assigning values to pieces (p: 1, r: 5, n: 3, b: 3, q: 9, k: 1000).

    • Sums up the values of all pieces on the board.

  2. Minimax Function:

    • Recursively simulates moves up to the specified depth.

    • Switches between maximizing and minimizing players.

    • Uses Alpha-Beta Pruning to cut off unnecessary branches.

  3. Move Selection:

    • The AI selects the move with the best evaluation score after the search is complete.

    • Automatically promotes pawns to queens when they reach the last rank

Ron Picard
Next

Build an AI Chess Engine As Fast As Possible using ChatGPT