A fully local AI-powered gaming hub featuring Noughts & Crosses and Connect Four with opponents running entirely in-browser via Local AI.
A fully local AI-powered gaming hub featuring Noughts & Crosses (Tic-Tac-Toe) and Connect Four with LLM opponents running entirely in-browser via Transformers.js. Experience intelligent gameplay without any server communication - all AI inference happens directly in your browser using WebGPU acceleration.
- 100% Local AI: All model inference runs in your browser using Transformers.js and ONNX Runtime
- Two Classic Games: Play Noughts & Crosses and Connect Four against AI opponents
- WebGPU Acceleration: Hardware-accelerated inference for fast response times
- Privacy-First: No data leaves your device - completely offline capable
- Intelligent Opponents: LLM-powered AI makes strategic decisions
- Modern UI: Clean, responsive interface built with vanilla JavaScript and CSS3
- Progressive Enhancement: Graceful fallback for browsers without WebGPU support
- Clone this repository:
git clone https://github.com/yourusername/uish-games-hub.git
cd uish-games-hub- Open
index.htmlin a modern web browser that supports WebGPU (Chrome 113+, Edge 113+, or compatible browsers)
For best results, serve the files via a local HTTP server:
# Using Python 3
python -m http.server 8000
# Using Node.js (with npx)
npx serve .
# Using PHP
php -S localhost:8000Then navigate to http://localhost:8000 in your browser.
On first load, the application will:
- Check for WebGPU support in your browser
- Download the AI model from Hugging Face (approximately 50-100MB, cached for future use)
- Initialize the ONNX Runtime with WebGPU acceleration
This may take 30-60 seconds on first launch. Subsequent loads will be much faster.
Noughts & Crosses (Tic-Tac-Toe)
- Select "Noughts & Crosses" from the main menu
- Choose whether to play as X or O
- Click on any empty cell to make your move
- The AI will respond with its move
- First to get three in a row wins!
Connect Four
- Select "Connect Four" from the main menu
- Choose your color (red or yellow)
- Click on any column to drop your piece
- The AI will respond with its move
- First to get four in a row (horizontal, vertical, or diagonal) wins!
- Difficulty Level: Adjust AI thinking depth (Easy, Medium, Hard)
- First Move: Choose who goes first (Player or AI)
- Theme: Toggle between light and dark modes
Minimum Requirements:
- Chrome/Edge 113+ (recommended for WebGPU support)
- Firefox 117+ (with WebGPU enabled in
about:config) - Safari 17.4+ (limited WebGPU support)
Hardware Requirements:
- 4GB RAM minimum (8GB recommended)
- Modern GPU with WebGPU support
- 200MB free disk space for model caching
Note: If WebGPU is not available, the application will fall back to WASM inference, which will be slower but functional.
Chrome/Edge: WebGPU is enabled by default in version 113+
Firefox:
- Navigate to
about:config - Search for
dom.webgpu.enabled - Set to
true
Safari: WebGPU support is experimental. Enable in Developer settings.
- Frontend: Vanilla JavaScript (ES6+), CSS3 with CSS Grid and Flexbox
- AI Inference: Transformers.js v3 with ONNX Runtime Web
- Model: Quantized LLM optimized for game strategy (loaded from Hugging Face)
- Acceleration: WebGPU for GPU-accelerated inference, WASM fallback
- State Management: Local browser storage for game history and settings
- Initial model load: 30-60 seconds (one-time, cached)
- AI move generation: 0.5-3 seconds (depending on difficulty)
- Memory usage: ~200-400MB during gameplay
- Zero Server Communication: All AI processing happens locally
- No Telemetry: No analytics or tracking
- Offline Capable: Works without internet after initial model download
- Local Storage Only: Game data stored in browser localStorage
uish-games-hub/
│
├── index.html # Main entry point
├── css/
│ ├── styles.css # Global styles
│ ├── games.css # Game-specific styles
│ └── themes.css # Light/dark themes
│
├── js/
│ ├── main.js # Application initialization
│ ├── ai-engine.js # Transformers.js integration
│ ├── games/
│ │ ├── noughts-crosses.js
│ │ └── connect-four.js
│ └── utils/
│ ├── storage.js # LocalStorage management
│ └── webgpu-check.js
│
├── assets/
│ ├── icons/
│ └── images/
│
└── README.md
| Browser | Version | WebGPU | WASM | Status |
|---|---|---|---|---|
| Chrome | 113+ | ✅ | ✅ | Full support |
| Edge | 113+ | ✅ | ✅ | Full support |
| Firefox | 117+ | ✅ | Requires manual enable | |
| Safari | 17.4+ | ✅ | Experimental | |
| Opera | 99+ | ✅ | ✅ | Full support |
Model fails to load
- Check internet connection (required for first download)
- Ensure sufficient disk space (200MB minimum)
- Clear browser cache and reload
Slow performance
- Verify WebGPU is enabled in your browser
- Close other resource-intensive tabs
- Try reducing AI difficulty level
- Consider upgrading to a browser with better WebGPU support
Game doesn't respond
- Check browser console for errors (F12)
- Ensure JavaScript is enabled
- Try refreshing the page
Contributions are welcome! Please feel free to submit a Pull Request. For major changes:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
MIT License
Copyright (c) 2024 uish-games-hub
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- Transformers.js by Hugging Face
- ONNX Runtime Web by Microsoft
- WebGPU specification by W3C
- All contributors and testers
Note: This project requires a modern browser with WebGPU support for optimal performance. The AI models are downloaded from Hugging Face on first use and cached locally.