Complete Code

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

README.md

@@ -1 +1,155 @@
-# LocalInference
+# AI Chat & Summarization Web App 🤖
+
+A beautiful web-based AI application featuring **Chat Generation** and **Text Summarization** powered by Hugging Face models.
+
+## Features ✨
+
+- 💬 **Chat Generation**: Interactive AI chat using Qwen 1.5 0.5B Chat model
+- 📝 **Text Summarization**: Summarize long texts using DistilBART model
+- 🎨 **Beautiful UI**: Modern gradient design with smooth animations
+- 🌐 **Accessible**: Publicly deployable and accessible to everyone
+- ⚡ **Fast**: Lightweight models optimized for quick responses
+
+## Models Used
+
+- **Chat**: `Qwen/Qwen1.5-0.5B-Chat` - Lightweight conversational AI
+- **Summarization**: `sshleifer/distilbart-cnn-6-6` - Efficient text summarization
+
+## Local Development
+
+### Prerequisites
+- Python 3.12+
+- pip
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/DiegoAdame13322/LocalInference.git
+cd LocalInference
+```
+
+2. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+3. Run the server:
+```bash
+python server.py
+```
+
+4. Open your browser to `http://localhost:8000`
+
+## Deploy to Render 🚀
+
+### Option 1: One-Click Deploy (Recommended)
+
+1. Fork this repository to your GitHub account
+2. Go to [Render Dashboard](https://dashboard.render.com/)
+3. Click "New +" → "Web Service"
+4. Connect your GitHub repository
+5. Render will automatically detect the `render.yaml` file
+6. Click "Create Web Service"
+
+### Option 2: Manual Deploy
+
+1. Go to [Render Dashboard](https://dashboard.render.com/)
+2. Click "New +" → "Web Service"
+3. Connect your repository
+4. Configure:
+   - **Name**: `ai-chat-summarization`
+   - **Environment**: `Python`
+   - **Build Command**: `pip install -r requirements.txt`
+   - **Start Command**: `python server.py`
+   - **Instance Type**: Free or Starter (Starter recommended for better performance)
+
+5. Click "Create Web Service"
+
+### Important Notes for Render Deployment
+
+- ⚠️ **First startup takes 5-10 minutes** as models download (1.5GB+)
+- 💾 **Disk space**: Free tier has 512MB, models need ~1.5GB. Use **Starter plan** or higher
+- 🔄 **Auto-sleep**: Free tier sleeps after 15min of inactivity, takes ~30s to wake up
+- 🎯 **Recommendation**: Use **Starter plan ($7/month)** for:
+  - More disk space
+  - Better performance
+  - No auto-sleep
+
+## API Endpoints
+
+### Chat Generation
+```bash
+POST /api/chat
+Content-Type: application/json
+
+{
+  "message": "What is machine learning?",
+  "max_new_tokens": 150,
+  "temperature": 0.7
+}
+```
+
+### Text Summarization
+```bash
+POST /api/summarize
+Content-Type: application/json
+
+{
+  "text": "Your long text here...",
+  "max_length": 130,
+  "min_length": 30
+}
+```
+
+### Health Check
+```bash
+GET /api/health
+```
+
+## Project Structure
+
+```
+LocalInference/
+├── server.py              # FastAPI backend with model loading
+├── static/
+│   └── index.html        # Frontend web interface
+├── requirements.txt      # Python dependencies
+├── render.yaml          # Render deployment config
+├── runtime.txt          # Python version specification
+└── README.md           # This file
+```
+
+## Tech Stack
+
+- **Backend**: FastAPI, PyTorch, Transformers
+- **Frontend**: HTML5, CSS3, JavaScript (Vanilla)
+- **Models**: Hugging Face Transformers
+- **Deployment**: Render
+
+## Troubleshooting
+
+### Models not loading on Render
+- Upgrade to Starter plan for more disk space
+- Check logs in Render dashboard
+
+### Slow first response
+- Models load on first request, subsequent requests are faster
+- Consider keeping the service warm with periodic requests
+
+### Out of memory errors
+- Reduce `max_new_tokens` in chat requests
+- Use Starter plan or higher for more RAM
+
+## License
+
+MIT License - feel free to use and modify!
+
+## Contributing
+
+Pull requests are welcome! For major changes, please open an issue first.
+
+---
+
+Made with ❤️ using Hugging Face Transformers
+

render.yaml

@@ -0,0 +1,9 @@
+services:
+  - type: web
+    name: ai-chat-summarization
+    env: python
+    buildCommand: pip install -r requirements.txt
+    startCommand: python server.py
+    envVars:
+      - key: PYTHON_VERSION
+        value: 3.12.0

requirements.txt

@@ -0,0 +1,23 @@
+# FastAPI and web server
+fastapi==0.115.5
+uvicorn[standard]==0.32.1
+pydantic==2.10.2
+
+# Transformers and ML
+transformers==4.46.3
+torch==2.5.1
+accelerate==1.1.1
+
+# Tokenizers
+sentencepiece==0.2.0
+tokenizers==0.20.3
+
+# Additional dependencies for the models
+safetensors==0.4.5
+huggingface-hub==0.26.2
+
+# For Python multipart support (if needed for file uploads)
+python-multipart==0.0.12
+
+# Optional but recommended for better performance
+einops==0.8.0

runtime.txt

@@ -0,0 +1 @@
+python-3.12.0

server.log

@@ -0,0 +1,13 @@
+nohup: ignoring input
+Loading chat generation model...
+Device set to use cpu
+Loading summarization model...
+Device set to use cpu
+INFO:     Started server process [27577]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
+INFO:     127.0.0.1:51690 - "GET /api/health HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52708 - "POST /api/chat HTTP/1.1" 200 OK
+INFO:     127.0.0.1:48190 - "POST /api/summarize HTTP/1.1" 200 OK
+INFO:     127.0.0.1:50980 - "GET / HTTP/1.1" 200 OK

server.py

@@ -0,0 +1,154 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
+import torch, uvicorn, os, subprocess, threading, shutil, time
+
+# =====================================================
+# FastAPI App Setup
+# =====================================================
+app = FastAPI(title="AI Chat + Summarization API")
+
+# Allow frontend requests
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# =====================================================
+# Automatic Disk Cleanup (safety for Codespaces)
+# =====================================================
+def check_disk_space(min_gb=2):
+    stat = shutil.disk_usage("/")
+    free_gb = stat.free / (1024 ** 3)
+    if free_gb < min_gb:
+        print(f"⚠️ Low disk space ({free_gb:.2f} GB). Clearing Hugging Face cache...")
+        os.system("rm -rf ~/.cache/huggingface/*")
+
+def background_health_monitor():
+    while True:
+        check_disk_space()
+        time.sleep(600)  # every 10 minutes
+
+threading.Thread(target=background_health_monitor, daemon=True).start()
+
+# =====================================================
+# Load Chat Model (Lightweight Qwen)
+# =====================================================
+print("Loading lightweight chat model (Qwen 1.5 0.5B Chat)…")
+chat_model_name = "Qwen/Qwen1.5-0.5B-Chat"
+chat_tokenizer = AutoTokenizer.from_pretrained(chat_model_name)
+chat_model = AutoModelForCausalLM.from_pretrained(
+    chat_model_name,
+    dtype=torch.bfloat16,
+    low_cpu_mem_usage=True,
+).eval()
+
+# =====================================================
+# Load Summarization Model
+# =====================================================
+print("Loading summarization model...")
+summary_pipe = pipeline(
+    "summarization",
+    model="sshleifer/distilbart-cnn-6-6",
+    device=0 if torch.cuda.is_available() else -1
+)
+
+# =====================================================
+# Request Models
+# =====================================================
+class ChatRequest(BaseModel):
+    message: str
+    max_new_tokens: int = 80
+    temperature: float = 0.7
+
+class SummaryRequest(BaseModel):
+    text: str
+    max_length: int = 100
+    min_length: int = 25
+
+# =====================================================
+# Chat Endpoint (Fixed for Qwen 1.5 Chat)
+# =====================================================
+@app.post("/api/chat")
+def chat_generate(req: ChatRequest):
+    try:
+        # Proper message template for Qwen 1.5 Chat
+        prompt = (
+            "<|im_start|>system\nYou are a helpful AI assistant.<|im_end|>\n"
+            f"<|im_start|>user\n{req.message}<|im_end|>\n"
+            "<|im_start|>assistant\n"
+        )
+
+        # Tokenize and run inference
+        inputs = chat_tokenizer(prompt, return_tensors="pt").to(chat_model.device)
+        outputs = chat_model.generate(
+            **inputs,
+            max_new_tokens=req.max_new_tokens,
+            temperature=req.temperature,
+            do_sample=True,
+            top_p=0.9,
+            eos_token_id=chat_tokenizer.eos_token_id,
+            pad_token_id=chat_tokenizer.eos_token_id,
+        )
+
+        # Decode only newly generated tokens
+        new_tokens = outputs[0][inputs["input_ids"].size(1):]
+        reply = chat_tokenizer.decode(new_tokens, skip_special_tokens=True).strip()
+
+        # Fallback in case of empty output
+        if not reply:
+            reply = chat_tokenizer.decode(outputs[0], skip_special_tokens=True).strip()
+
+        return {"success": True, "response": reply}
+
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+# =====================================================
+# Summarization Endpoint
+# =====================================================
+@app.post("/api/summarize")
+def summarize_text(req: SummaryRequest):
+    try:
+        result = summary_pipe(
+            req.text,
+            max_length=req.max_length,
+            min_length=min(req.min_length, req.max_length // 2),
+            truncation=True,
+        )
+        key = "summary_text" if "summary_text" in result[0] else "generated_text"
+        return {"success": True, "summary": result[0][key].strip()}
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+# =====================================================
+# Health + Static Routes
+# =====================================================
+@app.get("/api/health")
+def health_check():
+    return {"status": "healthy", "models": ["chat: Qwen-0.5B-Chat", "summarization: DistilBART-6-6"]}
+
+if os.path.exists("static"):
+    app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+def read_root():
+    if os.path.exists("static/index.html"):
+        return FileResponse("static/index.html")
+    return {"message": "AI Chat & Summarization API running!"}
+
+# =====================================================
+# Run FastAPI Server
+# =====================================================
+if __name__ == "__main__":
+    # Get port from environment variable (Render provides this) or default to 8000
+    port = int(os.environ.get("PORT", 8000))
+    
+    print(f"🚀 Starting FastAPI server on http://0.0.0.0:{port}")
+    uvicorn.run(app, host="0.0.0.0", port=port, log_level="info")

static/index.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Chat & Summarization</title>
+  <style>
+    * { 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;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+    }
+    .container {
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 900px;
+      width: 100%;
+      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 { font-size: 1.1em; opacity: 0.9; }
+    .tabs {
+      display: flex;
+      background: #f5f5f5;
+      border-bottom: 2px solid #e0e0e0;
+    }
+    .tab {
+      flex: 1;
+      padding: 20px;
+      text-align: center;
+      cursor: pointer;
+      font-size: 1.1em;
+      font-weight: 600;
+      transition: all 0.3s;
+      border: none;
+      background: transparent;
+      color: #666;
+    }
+    .tab:hover { background: #e8e8e8; }
+    .tab.active {
+      background: white;
+      color: #667eea;
+      border-bottom: 3px solid #667eea;
+    }
+    .content { padding: 30px; }
+    .tab-content { display: none; animation: fadeIn 0.3s; }
+    .tab-content.active { display: block; }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .input-group { margin-bottom: 20px; }
+    label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
+    textarea, input {
+      width: 100%; padding: 15px; border: 2px solid #e0e0e0;
+      border-radius: 10px; font-size: 1em; font-family: inherit;
+      transition: border-color 0.3s; resize: vertical;
+    }
+    textarea:focus, input:focus { outline: none; border-color: #667eea; }
+    .btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white; padding: 15px 40px; border: none; border-radius: 10px;
+      font-size: 1.1em; font-weight: 600; cursor: pointer;
+      transition: transform 0.2s, box-shadow 0.2s; width: 100%;
+    }
+    .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); }
+    .btn:active { transform: translateY(0); }
+    .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+    .response-box {
+      margin-top: 20px; padding: 20px; background: #f8f9fa;
+      border-radius: 10px; border-left: 4px solid #667eea;
+      display: none; animation: slideIn 0.3s;
+    }
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateX(-10px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    .response-box.show { display: block; }
+    .response-box h3 { margin-bottom: 10px; color: #667eea; }
+    .response-text { color: #333; line-height: 1.6; white-space: pre-wrap; }
+    .error { background: #fee; border-left-color: #f44; }
+    .error h3 { color: #f44; }
+    .loading { text-align: center; padding: 20px; color: #667eea; display: none; }
+    .loading.show { display: block; }
+    .spinner {
+      border: 4px solid #f3f3f3; border-top: 4px solid #667eea;
+      border-radius: 50%; width: 40px; height: 40px;
+      animation: spin 1s linear infinite; margin: 0 auto 10px;
+    }
+    @keyframes spin { 0% { transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
+    .chat-history {
+      max-height: 400px; overflow-y: auto; margin-bottom: 20px;
+      padding: 15px; background: #f8f9fa; border-radius: 10px;
+    }
+    .chat-message { margin-bottom: 15px; padding: 10px 15px; border-radius: 10px; }
+    .chat-message.user {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white; margin-left: 20%;
+    }
+    .chat-message.assistant {
+      background: white; border: 2px solid #e0e0e0; margin-right: 20%;
+    }
+    .settings {
+      display: grid; grid-template-columns: 1fr 1fr;
+      gap: 15px; margin-bottom: 20px;
+    }
+    .settings .input-group { margin-bottom: 0; }
+    @media (max-width: 600px) {
+      .settings { grid-template-columns: 1fr; }
+      .chat-message.user { margin-left: 10%; }
+      .chat-message.assistant { margin-right: 10%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>🤖 AI Assistant</h1>
+      <p>Chat Generation & Text Summarization</p>
+    </div>
+
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('chat')">💬 Chat Generation</button>
+      <button class="tab" onclick="switchTab('summarize')">📝 Text Summarization</button>
+    </div>
+
+    <div class="content">
+      <!-- Chat Tab -->
+      <div id="chat" class="tab-content active">
+        <div class="chat-history" id="chatHistory"></div>
+        <div class="input-group">
+          <label for="chatMessage">Your Message</label>
+          <textarea id="chatMessage" rows="3" placeholder="Type your message here..."></textarea>
+        </div>
+        <div class="settings">
+          <div class="input-group">
+            <label for="maxTokens">Max Tokens</label>
+            <input type="number" id="maxTokens" value="150" min="50" max="500">
+          </div>
+          <div class="input-group">
+            <label for="temperature">Temperature</label>
+            <input type="number" id="temperature" value="0.7" min="0" max="2" step="0.1">
+          </div>
+        </div>
+        <button class="btn" onclick="sendChat()">Send Message</button>
+        <div class="loading" id="chatLoading">
+          <div class="spinner"></div>
+          <p>Generating response...</p>
+        </div>
+      </div>
+
+      <!-- Summarize Tab -->
+      <div id="summarize" class="tab-content">
+        <div class="input-group">
+          <label for="summaryText">Text to Summarize</label>
+          <textarea id="summaryText" rows="8" placeholder="Paste your text here for summarization..."></textarea>
+        </div>
+
+        <div class="settings">
+          <div class="input-group">
+            <label for="maxLength">Max Length</label>
+            <input type="number" id="maxLength" value="130" min="30" max="300">
+          </div>
+          <div class="input-group">
+            <label for="minLength">Min Length</label>
+            <input type="number" id="minLength" value="30" min="10" max="100">
+          </div>
+        </div>
+
+        <button class="btn" onclick="summarizeText()">Summarize</button>
+
+        <div class="loading" id="summaryLoading">
+          <div class="spinner"></div>
+          <p>Summarizing text...</p>
+        </div>
+
+        <div class="response-box" id="summaryResponse">
+          <h3>Summary</h3>
+          <div class="response-text" id="summaryOutput"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let chatHistory = [];
+
+    function switchTab(tabName) {
+      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.getElementById(tabName).classList.add('active');
+      event.target.classList.add('active');
+    }
+
+    async function sendChat() {
+      const message = document.getElementById('chatMessage').value;
+      const maxTokens = parseInt(document.getElementById('maxTokens').value);
+      const temperature = parseFloat(document.getElementById('temperature').value);
+      if (!message.trim()) { alert('Please enter a message'); return; }
+      addMessageToHistory('user', message);
+      document.getElementById('chatLoading').classList.add('show');
+      document.querySelector('#chat .btn').disabled = true;
+      try {
+        const res = await fetch('/api/chat', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({ message, max_new_tokens: maxTokens, temperature })
+        });
+        const data = await res.json();
+        if (data.success) {
+          addMessageToHistory('assistant', data.response);
+          document.getElementById('chatMessage').value = '';
+        } else {
+          addMessageToHistory('assistant', `Error: ${data.error}`);
+        }
+      } catch (err) {
+        addMessageToHistory('assistant', `Error: ${err.message}`);
+      } finally {
+        document.getElementById('chatLoading').classList.remove('show');
+        document.querySelector('#chat .btn').disabled = false;
+      }
+    }
+
+    function addMessageToHistory(role, content) {
+      const history = document.getElementById('chatHistory');
+      const msg = document.createElement('div');
+      msg.className = `chat-message ${role}`;
+      msg.textContent = content;
+      history.appendChild(msg);
+      history.scrollTop = history.scrollHeight;
+    }
+
+    async function summarizeText() {
+      const text = document.getElementById('summaryText').value;
+      const maxLength = parseInt(document.getElementById('maxLength').value);
+      const minLength = parseInt(document.getElementById('minLength').value);
+      if (!text.trim()) { alert('Please enter text to summarize'); return; }
+
+      const summaryLoading = document.getElementById('summaryLoading');
+      const summaryResponse = document.getElementById('summaryResponse');
+      const summaryOutput = document.getElementById('summaryOutput');
+      const summarizeBtn = document.querySelector('#summarize .btn');
+
+      summaryLoading.classList.add('show');
+      summaryResponse.classList.remove('show', 'error');
+      summarizeBtn.disabled = true;
+
+      try {
+        const res = await fetch('/api/summarize', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({ text, max_length: maxLength, min_length: minLength })
+        });
+        const data = await res.json();
+
+        if (data.success && data.summary && data.summary.trim()) {
+          summaryOutput.textContent = data.summary.trim();
+          summaryResponse.classList.remove('error');
+        } else {
+          summaryOutput.textContent = `Error: ${data.error || 'No summary returned.'}`;
+          summaryResponse.classList.add('error');
+        }
+
+        summaryResponse.classList.add('show');
+      } catch (err) {
+        summaryResponse.classList.add('error', 'show');
+        summaryOutput.textContent = `Error: ${err.message}`;
+      } finally {
+        summaryLoading.classList.remove('show');
+        summarizeBtn.disabled = false;
+      }
+    }
+
+    document.getElementById('chatMessage').addEventListener('keypress', e => {
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); }
+    });
+
+    window.onload = () => {
+      addMessageToHistory('assistant', "Hello! I'm your AI assistant. How can I help you today?");
+    };
+  </script>
+</body>
+</html>