Upload 8 files

.gitignore

@@ -0,0 +1,24 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+ENV/
+.venv
+
+# Hugging Face
+.cache/
+flagged/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+.DS_Store
+
+# Misc
+*.log

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY app.py .
+COPY static ./static
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,180 @@
----
-title: Mistral Api
-emoji: 🚀
-colorFrom: pink
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Mistral Fine-tuned Model
+emoji: 🤖
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+---
+
+# 🤖 Mistral Fine-tuned Model
+
+Flask API with separate HTML/CSS/JS frontend for `KASHH-4/mistral_fine-tuned` model.
+
+## 🚀 What This Is
+
+A **Flask API server** with **separate frontend files**:
+- Backend: Python Flask with CORS
+- Frontend: HTML + CSS + JavaScript  
+- Clean separation of concerns
+- API-first design
+
+## 📁 Project Structure
+
+```
+e:\EDI\hf-node-app\
+├── app.py              # Main Gradio application
+├── requirements.txt    # Python dependencies
+├── README.md          # This file
+└── .gitignore         # Git ignore rules
+```
+
+## 🔧 Deploy to Hugging Face Spaces
+
+### Step 1: Create a Space
+
+1. Go to https://huggingface.co/spaces
+2. Click **"Create new Space"**
+3. Configure:
+   - **Owner:** KASHH-4 (or your account)
+   - **Space name:** `mistral-api` (or any name)
+   - **SDK:** Gradio
+   - **Hardware:** CPU basic (Free)
+   - **Visibility:** Public
+4. Click **"Create Space"**
+
+### Step 2: Upload Files
+
+Upload these 3 files to your Space:
+- `app.py`
+- `requirements.txt`
+- `README.md` (optional)
+
+**Via Web UI:**
+1. Click "Files" tab
+2. Click "Add file" → "Upload files"
+3. Drag and drop the files
+4. Commit changes
+
+**Via Git:**
+```bash
+git init
+git remote add origin https://huggingface.co/spaces/KASHH-4/mistral-api
+git add app.py requirements.txt README.md .gitignore
+git commit -m "Initial deployment"
+git push origin main
+```
+
+### Step 3: Wait for Deployment
+
+- First build takes 5-10 minutes
+- Watch the logs for "Running on..."
+- Your Space will be live at: `https://kashh-4-mistral-api.hf.space`
+
+## 🧪 Test Your Space
+
+### Web Interface
+Visit: `https://huggingface.co/spaces/KASHH-4/mistral-api`
+
+### API Endpoint
+```bash
+curl -X POST "https://kashh-4-mistral-api.hf.space/api/predict" \
+  -H "Content-Type: application/json" \
+  -d '{"data":["Hello, how are you?"]}'
+```
+
+### From JavaScript/Node.js
+```javascript
+const response = await fetch('https://kashh-4-mistral-api.hf.space/api/predict', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ data: ["Your prompt here"] })
+});
+
+const result = await response.json();
+console.log(result.data[0]); // Generated text
+```
+
+### From Python
+```python
+import requests
+
+response = requests.post(
+    'https://kashh-4-mistral-api.hf.space/api/predict',
+    json={'data': ['Your prompt here']}
+)
+
+print(response.json()['data'][0])
+```
+
+## 💰 Cost
+
+**100% FREE** on HF Spaces:
+- Free CPU tier (slower, ~10-30 sec per request)
+- Sleeps after 48h inactivity (30 sec wake-up)
+- Perfect for demos, personal projects, testing
+
+**Optional Upgrades:**
+- GPU T4 Small: $0.60/hour (much faster, 2-5 sec)
+- GPU A10G: $3.15/hour (very fast, 1-2 sec)
+
+Upgrade in: Space Settings → Hardware
+
+## 🔧 Local Testing (Optional)
+
+If you have Python installed and want to test locally before deploying:
+
+```bash
+# Install dependencies
+pip install -r requirements.txt
+
+# Run locally
+python app.py
+
+# Visit: http://localhost:7860
+```
+
+**Requirements:**
+- Python 3.9+
+- 16GB+ RAM (for model loading)
+- GPU recommended but not required
+
+## 📋 Model Configuration
+
+The app is configured for `KASHH-4/mistral_fine-tuned`. To use a different model, edit `app.py`:
+
+```python
+MODEL_NAME = "your-org/your-model"
+```
+
+## 🆘 Troubleshooting
+
+**Space stuck on "Building":**
+- Check logs for errors
+- Model might be too large for free CPU
+- Try: Restart Space in Settings
+
+**Space shows "Runtime Error":**
+- Check if model exists and is public
+- Verify model format is compatible with transformers
+- Try smaller model first to test
+
+**Slow responses:**
+- Normal on free CPU tier
+- Upgrade to GPU for faster inference
+- Or use smaller model
+
+## 📞 Support
+
+Issues? Check the deployment guide in `huggingface-space/DEPLOYMENT-GUIDE.md`
+
+---
+
+## 🗑️ Cleanup Old Files
+
+If you followed earlier Node.js instructions, delete unnecessary files:
+
+See `CLEANUP.md` for full list of files to remove.
+
+## License
+MIT

app.py

@@ -0,0 +1,84 @@
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
+import os
+
+app = Flask(__name__, static_folder='static')
+CORS(app)
+
+MODEL_NAME = "KASHH-4/mistral_fine-tuned"
+print(f"Loading model: {MODEL_NAME}")
+
+print("Loading tokenizer...")
+tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+
+if tokenizer.pad_token is None:
+    tokenizer.pad_token = tokenizer.eos_token
+
+print("Tokenizer loaded successfully!")
+
+print("Loading model weights...")
+model = AutoModelForCausalLM.from_pretrained(
+    MODEL_NAME,
+    torch_dtype=torch.float16,
+    device_map="auto",
+    low_cpu_mem_usage=True
+)
+print("Model loaded successfully!")
+
+
+@app.route('/')
+def index():
+    return send_from_directory('static', 'index.html')
+
+
+@app.route('/api/generate', methods=['POST'])
+def generate():
+    try:
+        data = request.json
+        
+        if not data or 'prompt' not in data:
+            return jsonify({'error': 'Missing prompt in request body'}), 400
+        
+        prompt = data['prompt']
+        max_new_tokens = data.get('max_new_tokens', 256)
+        temperature = data.get('temperature', 0.7)
+        top_p = data.get('top_p', 0.9)
+        
+        inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
+        
+        with torch.no_grad():
+            outputs = model.generate(
+                **inputs,
+                max_new_tokens=max_new_tokens,
+                temperature=temperature,
+                top_p=top_p,
+                do_sample=True,
+                pad_token_id=tokenizer.eos_token_id
+            )
+        
+        generated_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
+        
+        return jsonify({
+            'generated_text': generated_text,
+            'prompt': prompt
+        })
+    
+    except Exception as e:
+        print(f"Error during generation: {e}")
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/health', methods=['GET'])
+def health():
+    return jsonify({
+        'status': 'ok',
+        'model': MODEL_NAME,
+        'device': str(model.device)
+    })
+
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)

requirements.txt

@@ -0,0 +1,5 @@
+flask==3.0.0
+flask-cors==4.0.0
+transformers==4.36.2
+torch==2.1.2
+accelerate==0.25.0

static/app.js

@@ -0,0 +1,101 @@
+// API Configuration
+const API_URL = window.location.origin;  // Use same origin (works locally and on HF Spaces)
+
+// DOM Elements
+const promptEl = document.getElementById('prompt');
+const generateBtn = document.getElementById('generateBtn');
+const statusEl = document.getElementById('status');
+const outputEl = document.getElementById('output');
+
+const maxTokensEl = document.getElementById('maxTokens');
+const temperatureEl = document.getElementById('temperature');
+const topPEl = document.getElementById('topP');
+
+const maxTokensValueEl = document.getElementById('maxTokensValue');
+const temperatureValueEl = document.getElementById('temperatureValue');
+const topPValueEl = document.getElementById('topPValue');
+
+// Update slider value displays
+maxTokensEl.addEventListener('input', (e) => {
+    maxTokensValueEl.textContent = e.target.value;
+});
+
+temperatureEl.addEventListener('input', (e) => {
+    temperatureValueEl.textContent = parseFloat(e.target.value).toFixed(1);
+});
+
+topPEl.addEventListener('input', (e) => {
+    topPValueEl.textContent = parseFloat(e.target.value).toFixed(2);
+});
+
+// Generate button click handler
+generateBtn.addEventListener('click', async () => {
+    const prompt = promptEl.value.trim();
+    
+    if (!prompt) {
+        outputEl.textContent = 'Please enter a prompt';
+        outputEl.className = 'output error';
+        return;
+    }
+    
+    // Disable button and show loading
+    generateBtn.disabled = true;
+    statusEl.textContent = '⏳';
+    outputEl.textContent = 'Generating...';
+    outputEl.className = 'output';
+    
+    try {
+        const response = await fetch(`${API_URL}/api/generate`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                prompt: prompt,
+                max_new_tokens: parseInt(maxTokensEl.value),
+                temperature: parseFloat(temperatureEl.value),
+                top_p: parseFloat(topPEl.value)
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || `HTTP ${response.status}`);
+        }
+        
+        // Display result
+        outputEl.textContent = data.generated_text;
+        outputEl.className = 'output';
+        statusEl.textContent = '✅';
+        
+    } catch (error) {
+        console.error('Error:', error);
+        outputEl.textContent = `Error: ${error.message}`;
+        outputEl.className = 'output error';
+        statusEl.textContent = '❌';
+    } finally {
+        generateBtn.disabled = false;
+    }
+});
+
+// Allow Enter key to trigger generation (Ctrl+Enter)
+promptEl.addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.key === 'Enter') {
+        generateBtn.click();
+    }
+});
+
+// Health check on load
+async function checkHealth() {
+    try {
+        const response = await fetch(`${API_URL}/api/health`);
+        const data = await response.json();
+        console.log('API Health:', data);
+    } catch (error) {
+        console.warn('API health check failed:', error);
+    }
+}
+
+// Run health check when page loads
+checkHealth();

static/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mistral Fine-tuned Model</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🤖 Mistral Fine-tuned Model</h1>
+            <p>Model: <code>KASHH-4/mistral_fine-tuned</code></p>
+        </header>
+
+        <main>
+            <div class="prompt-section">
+                <label for="prompt">Enter your prompt:</label>
+                <textarea id="prompt" rows="6" placeholder="Write a short story about a robot learning to paint..."></textarea>
+            </div>
+
+            <div class="settings-section">
+                <details>
+                    <summary>⚙️ Advanced Settings</summary>
+                    <div class="settings-grid">
+                        <div class="setting">
+                            <label for="maxTokens">Max Tokens: <span id="maxTokensValue">256</span></label>
+                            <input type="range" id="maxTokens" min="50" max="512" value="256">
+                        </div>
+                        <div class="setting">
+                            <label for="temperature">Temperature: <span id="temperatureValue">0.7</span></label>
+                            <input type="range" id="temperature" min="0.1" max="2.0" step="0.1" value="0.7">
+                        </div>
+                        <div class="setting">
+                            <label for="topP">Top P: <span id="topPValue">0.9</span></label>
+                            <input type="range" id="topP" min="0.1" max="1.0" step="0.05" value="0.9">
+                        </div>
+                    </div>
+                </details>
+            </div>
+
+            <div class="button-section">
+                <button id="generateBtn" class="generate-btn">✨ Generate</button>
+                <span id="status" class="status"></span>
+            </div>
+
+            <div class="output-section">
+                <h3>Generated Output:</h3>
+                <div id="output" class="output"></div>
+            </div>
+        </main>
+
+        <footer>
+            <p>API Endpoints: <code>POST /api/generate</code> | <code>GET /api/health</code></p>
+        </footer>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,211 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px;
+    text-align: center;
+}
+
+header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+}
+
+header p {
+    opacity: 0.9;
+    font-size: 1.1em;
+}
+
+header code {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+
+main {
+    padding: 30px;
+}
+
+.prompt-section {
+    margin-bottom: 20px;
+}
+
+.prompt-section label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+#prompt {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 1em;
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color 0.3s;
+}
+
+#prompt:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.settings-section {
+    margin-bottom: 20px;
+}
+
+details {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 15px;
+}
+
+summary {
+    cursor: pointer;
+    font-weight: 600;
+    color: #667eea;
+    user-select: none;
+}
+
+summary:hover {
+    color: #764ba2;
+}
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 15px;
+}
+
+.setting label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #555;
+}
+
+.setting input[type="range"] {
+    width: 100%;
+    cursor: pointer;
+}
+
+.button-section {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 30px;
+}
+
+.generate-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 15px 40px;
+    font-size: 1.1em;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.generate-btn:active {
+    transform: translateY(0);
+}
+
+.generate-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.status {
+    font-size: 1.5em;
+}
+
+.output-section h3 {
+    color: #333;
+    margin-bottom: 15px;
+}
+
+.output {
+    background: #f8f9fa;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 20px;
+    min-height: 150px;
+    font-family: 'Courier New', monospace;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    line-height: 1.6;
+    color: #333;
+}
+
+.output.empty {
+    color: #999;
+    font-style: italic;
+}
+
+.output.error {
+    color: #dc3545;
+    background: #fff5f5;
+    border-color: #dc3545;
+}
+
+footer {
+    background: #f8f9fa;
+    padding: 20px;
+    text-align: center;
+    color: #666;
+    font-size: 0.9em;
+}
+
+footer code {
+    background: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+}
+
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2em;
+    }
+
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .button-section {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}