https://github.com/nathan-abela/text-contrast-ml

A machine learning web application that uses Brain.js neural networks to automatically adjust text color based on the background color when trained enough, developed with Next.js and Shadcn-ui.
https://github.com/nathan-abela/text-contrast-ml

ai brainjs machine-learning neural-network nextjs radix-ui shadcn-ui tailwindcss

Last synced: about 2 months ago
JSON representation

A machine learning web application that uses Brain.js neural networks to automatically adjust text color based on the background color when trained enough, developed with Next.js and Shadcn-ui.

• Host: GitHub
• URL: https://github.com/nathan-abela/text-contrast-ml
• Owner: nathan-abela
• Created: 2023-09-08T21:34:20.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-24T12:02:31.000Z (almost 3 years ago)
• Last Synced: 2025-01-24T05:42:40.454Z (over 1 year ago)
• Topics: ai, brainjs, machine-learning, neural-network, nextjs, radix-ui, shadcn-ui, tailwindcss
• Language: TypeScript
• Homepage: https://nathan-abela.github.io/Text-Contrast-ML
• Size: 825 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


    

        

    


# Text Contrast ML

Train a neural network to predict optimal text color for any background. Runs entirely in your browser.

[![Next.js](https://img.shields.io/badge/Next.js-black?style=flat&logo=next.js)](https://nextjs.org)

[![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind-38B2AC?style=flat&logo=tailwindcss&logoColor=white)](https://tailwindcss.com)

[![Brain.js](https://img.shields.io/badge/Brain.js-FF6B6B?style=flat)](https://brain.js.org)

![Last Commit](https://img.shields.io/github/last-commit/nathan-abela/Text-Contrast-ML)

![GitHub Stars](https://img.shields.io/github/stars/nathan-abela/Text-Contrast-ML)

![Views](https://gitviews.com/repo/nathan-abela/Text-Contrast-ML.svg?style=flat)



## Live Demo

Check out the live site at **[nathan-abela.github.io/Text-Contrast-ML](https://nathan-abela.github.io/Text-Contrast-ML)**



    



## Features

- **Interactive training** - Label background colors with your preferred text color (black or white)

- **Client-side ML** - Neural network trains directly in your browser using Brain.js

- **Instant predictions** - Test any color and see the model's recommendation

- **Save models** - Store up to 5 trained models in browser storage

- **Training quality indicator** - See how well your model learned based on loss and example count

- **No backend** - All processing happens locally, no data leaves your device

## How It Works

1. **Train** - You're shown random background colors. Pick whether black or white text is easier to read.

2. **Learn** - The neural network learns patterns from your choices.

3. **Predict** - Pick any color and the model predicts the best text color.

For technical details, visit the [Learn page](https://nathan-abela.github.io/Text-Contrast-ML/learn).

## Getting Started

1. **Clone the repository:**

   ```bash

   git clone https://github.com/nathan-abela/Text-Contrast-ML.git

   ```

2. **Install dependencies:**

   ```bash

   npm install

   ```

   > **Note:** The `.npmrc` file skips native compilation for Brain.js. No Python or C++ build tools needed. See [troubleshooting.md](troubleshooting.md) if you encounter issues.

3. **Start the development server:**

   ```bash

   npm run dev

   ```

4. **Open your browser:**

   Navigate to [http://localhost:3000](http://localhost:3000)

## Technologies Used

- [Next.js](https://nextjs.org) - React framework with static export

- [TypeScript](https://www.typescriptlang.org) - Type safety

- [Tailwind CSS](https://tailwindcss.com) - Utility-first styling

- [shadcn/ui](https://ui.shadcn.com) - UI components

- [Brain.js](https://brain.js.org) - Client-side neural networks

---