Add Hugging Face metadata to README with indigo-purple theme

README.md

@@ -1,4 +1,28 @@
-# Next-Token Predictor# Next-Token Predictor# Next-Token Predictor---
+---# Next-Token Predictor# Next-Token Predictor# Next-Token Predictor---
+
+title: Next-Token Predictor
+
+emoji: 🔮
+
+colorFrom: indigo
+
+colorTo: purpleA clean, modern web app that demonstrates how AI language models predict the next word in a sequence. Built with Gradio for easy deployment and secure token management.
+
+sdk: gradio
+
+sdk_version: 4.44.0
+
+app_file: app.py
+
+pinned: false![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)A clean, modern web app that demonstrates how AI language models predict the next word in a sequence. Built with Gradio for easy deployment and secure token management.title:# Next-Token Predictor
+
+short_description: Demonstrate how AI language models predict the next word in a sequence
+
+---
+
+
+
+# Next-Token Predictor## ✨ Features
 
 
 
@@ -6,23 +30,23 @@ A clean, modern web app that demonstrates how AI language models predict the nex
 
 
 
-![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)A clean, modern web app that demonstrates how AI language models predict the next word in a sequence. Built with Gradio for easy deployment and secure token management.title:# Next-Token Predictor
+![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)- **🔮 Real-time Predictions**: Updates automatically as you type![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)A clean, modern web app that demonstrates how AI language models predict the next word in a sequence. Built with Gradio for easy deployment and secure token management.
 
 
 
-## ✨ Features
+## ✨ Features- **🔒 Secure**: Uses environment variables for API tokens  
 
 
 
-- **🔮 Real-time Predictions**: Updates automatically as you type![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)A clean, modern web app that demonstrates how AI language models predict the next word in a sequence. Built with Gradio for easy deployment and secure token management.
+- **🔮 Real-time Predictions**: Updates automatically as you type- **⚡ Fast**: Serverless API calls with instant results
 
 - **🔒 Secure**: Uses environment variables for API tokens  
 
-- **⚡ Fast**: Serverless API calls with instant results
+- **⚡ Fast**: Serverless API calls with instant results- **📱 Responsive**: Clean, mobile-friendly interface
 
 - **📱 Responsive**: Clean, mobile-friendly interface
 
-- **🚀 Easy Deploy**: One-click deployment to HF Spaces## ✨ Features🎯 **Note**: This project has been converted to a Gradio app! See `README-gradio.md` for the latest version.
+- **🚀 Easy Deploy**: One-click deployment to HF Spaces- **🚀 Easy Deploy**: One-click deployment to HF Spaces## ✨ Features🎯 **Note**: This project has been converted to a Gradio app! See `README-gradio.md` for the latest version.
 
 
 
@@ -30,72 +54,145 @@ A clean, modern web app that demonstrates how AI language models predict the nex
 
 
 
-1. **Install dependencies:**- **🔮 Real-time Predictions**: Updates automatically as you type![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)
+1. **Install dependencies:**## 🚀 Quick Start
 
    ```bash
 
-   pip install -r requirements.txt- **🔒 Secure**: Uses environment variables for API tokens  
+   pip install -r requirements.txt
 
    ```
 
-- **⚡ Fast**: Serverless API calls with instant resultsA web application that demonstrates how AI language models predict the next word in a sequence. Originally built with HTML/JavaScript, now available as a streamlined Gradio app for easier deployment and better security.
+1. **Install dependencies:**- **🔮 Real-time Predictions**: Updates automatically as you type![Demo](https://img.shields.io/badge/Demo-Live-brightgreen) ![Python](https://img.shields.io/badge/Python-3.8+-blue) ![Gradio](https://img.shields.io/badge/Gradio-4.44+-orange)
 
 2. **Set your HF token:**
 
-   - **📱 Responsive**: Clean, mobile-friendly interface
+      ```bash
 
    **Option A: Using .env file (Recommended for local development)**
 
-   ```bash- **🚀 Easy Deploy**: One-click deployment to HF Spaces## ✨ Features
+   ```bash   pip install -r requirements.txt- **🔒 Secure**: Uses environment variables for API tokens  
 
    # Copy the template
 
-   cp .env.example .env
+   cp .env.example .env   ```
 
    
 
-   # Edit .env and add your token:## 🚀 Quick Start## 🚀 Quick Start
+   # Edit .env and add your token:- **⚡ Fast**: Serverless API calls with instant resultsA web application that demonstrates how AI language models predict the next word in a sequence. Originally built with HTML/JavaScript, now available as a streamlined Gradio app for easier deployment and better security.
 
    # HF_NEXT_TOKEN_PREDICTOR_TOKEN=hf_your_actual_token_here
 
-   ```
+   ```2. **Set your HF token:**
 
    
 
-   **Option B: Using environment variable**1. **Install dependencies:**- **🔮 Real-time Predictions**: Updates automatically as you type
+   **Option B: Using environment variable**   - **📱 Responsive**: Clean, mobile-friendly interface
 
    ```bash
 
-   export HF_NEXT_TOKEN_PREDICTOR_TOKEN="hf_your_token_here"  # Linux/Mac   ```bash
+   export HF_NEXT_TOKEN_PREDICTOR_TOKEN="hf_your_token_here"  # Linux/Mac   **Option A: Using .env file (Recommended for local development)**
 
    $env:HF_NEXT_TOKEN_PREDICTOR_TOKEN="hf_your_token_here"    # Windows PowerShell
 
-   ```   pip install -r requirements.txt- **🔒 Secure**: Uses environment variables for API tokens  **For the latest Gradio version**, see `README-gradio.md` and run:
+   ```   ```bash- **🚀 Easy Deploy**: One-click deployment to HF Spaces## ✨ Features
 
 
 
-3. **Run the app:**   ```
+3. **Run the app:**   # Copy the template
 
    ```bash
 
-   python app.py- **⚡ Fast**: Serverless API calls with instant results```bash
+   python app.py   cp .env.example .env
 
    ```
 
-2. **Set your HF token:**
+   
 
 4. **Open browser:** Navigate to `http://127.0.0.1:7860`
 
-   - **📱 Responsive**: Clean, mobile-friendly interfacepython app.py
+   # Edit .env and add your token:## 🚀 Quick Start## 🚀 Quick Start
 
 ## 🔧 Deploy to HF Spaces
 
-   **Option A: Using .env file (Recommended for local development)**
+   # HF_NEXT_TOKEN_PREDICTOR_TOKEN=hf_your_actual_token_here
+
+1. Create a new **Gradio Space** on Hugging Face
+
+2. Upload `app.py` and `requirements.txt`   ```
+
+3. Set `HF_NEXT_TOKEN_PREDICTOR_TOKEN` as a **repository secret** (not as .env file)
+
+4. Your demo is live! ✨   
+
+
+
+## 💰 Cost   **Option B: Using environment variable**1. **Install dependencies:**- **🔮 Real-time Predictions**: Updates automatically as you type
+
+
+
+With HF Pro account ($20/month):   ```bash
+
+- **$2.00/month** in free API calls
+
+- **~$0.0001** per prediction     export HF_NEXT_TOKEN_PREDICTOR_TOKEN="hf_your_token_here"  # Linux/Mac   ```bash
+
+- **2,000-20,000** free predictions/month
+
+   $env:HF_NEXT_TOKEN_PREDICTOR_TOKEN="hf_your_token_here"    # Windows PowerShell
+
+## 🎯 Try It
+
+   ```   pip install -r requirements.txt- **🔒 Secure**: Uses environment variables for API tokens  **For the latest Gradio version**, see `README-gradio.md` and run:
+
+Type "Twinkle, twinkle, little " and watch the AI predict "star"! 
+
+
+
+The app demonstrates how language models work by showing real-time probability distributions for the next token in any sequence.
+
+3. **Run the app:**   ```
+
+## 🔒 Security Notes
+
+   ```bash
+
+- **✅ .env file**: Safe for local development (ignored by git)
+
+- **✅ Environment variables**: Work everywhere   python app.py- **⚡ Fast**: Serverless API calls with instant results```bash
+
+- **✅ HF Spaces secrets**: Secure for production deployment
+
+- **❌ Never commit**: Your actual token to version control   ```
+
+
+
+## 📁 Project Structure2. **Set your HF token:**
+
+
+
+```4. **Open browser:** Navigate to `http://127.0.0.1:7860`
+
+├── app.py              # Main Gradio application
+
+├── requirements.txt    # Python dependencies   - **📱 Responsive**: Clean, mobile-friendly interfacepython app.py
+
+├── .env.example        # Template for environment variables
+
+├── .env               # Your actual tokens (git ignored)## 🔧 Deploy to HF Spaces
+
+├── .gitignore         # Protects secrets from being committed
+
+└── README.md          # This file   **Option A: Using .env file (Recommended for local development)**
+
+```
 
 1. Create a new **Gradio Space** on Hugging Face
 
+## 🤝 Contributing
+
 2. Upload `app.py` and `requirements.txt`   ```bash- **🚀 Easy Deploy**: One-click deployment to HF Spaces```
 
+Feel free to improve the API parsing, add features, or enhance the design!
 3. Set `HF_NEXT_TOKEN_PREDICTOR_TOKEN` as a **repository secret** (not as .env file)
 
 4. Your demo is live! ✨   # Copy the template