hello

Dockerfile

@@ -0,0 +1,60 @@
+# Multi-stage build for optimized image
+FROM python:3.9-slim as builder
+
+# Install build dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --user --no-cache-dir -r requirements.txt
+
+# Final stage
+FROM python:3.9-slim
+
+# Install runtime dependencies
+RUN apt-get update && apt-get install -y \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/* \
+    && apt-get clean
+
+# Copy installed packages from builder stage
+COPY --from=builder /root/.local /root/.local
+
+# Set working directory
+WORKDIR /app
+
+# Set environment variables for model caching
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    GRADIO_SERVER_NAME="0.0.0.0" \
+    GRADIO_SERVER_PORT=7860 \
+    PATH="/root/.local/bin:$PATH" \
+    TRANSFORMERS_CACHE=/app/model_cache \
+    HF_HOME=/app/hf_cache \
+    HUGGINGFACE_HUB_CACHE=/app/hf_cache
+
+# Create cache directories with proper permissions
+RUN mkdir -p /app/model_cache /app/hf_cache /app/static
+
+# Copy application code
+COPY . .
+
+# Create non-root user and set permissions
+RUN useradd -m -u 1000 user && \
+    chown -R user:user /app && \
+    chmod -R 755 /app
+
+USER user
+
+# Expose ports
+EXPOSE 7860 8000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=90s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,29 @@
+---
+title: FastAPI Chatbot
+emoji: 🤖
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: apache-2.0
+app_port: 7860
+---
+
+# 🤖 FastAPI Chatbot
+
+A modern chatbot application built with FastAPI backend and Gradio frontend, optimized for Hugging Face Spaces deployment.
+
+## ✨ Features
+
+- 🚀 **FastAPI Backend** - RESTful API with automatic documentation
+- 🎨 **Gradio Frontend** - Interactive web interface with advanced controls
+- 🤖 **Hugging Face Integration** - Easy model switching and caching
+- 🐳 **Docker Deployment** - Optimized for Hugging Face Spaces
+- 📱 **Responsive Design** - Works on desktop and mobile
+- ⚡ **Model Caching** - Fast startup after initial load
+- 🛡️ **Error Handling** - Robust error handling and logging
+- 📊 **Health Monitoring** - Built-in health checks and status endpoints
+
+## 🎯 Live Demo
+
+Visit the [Hugging Face Space](https://huggingface.co/spaces)

app.py

@@ -0,0 +1,454 @@
+import os
+import gradio as gr
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse
+from pydantic import BaseModel
+from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
+import torch
+import logging
+import threading
+import uvicorn
+from pathlib import Path
+import time
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# FastAPI app
+app = FastAPI(
+    title="FastAPI Chatbot", 
+    description="Chatbot with FastAPI backend and Gradio frontend",
+    version="1.0.0"
+)
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Pydantic models
+class ChatRequest(BaseModel):
+    message: str
+    max_length: int = 100
+    temperature: float = 0.7
+    top_p: float = 0.9
+
+class ChatResponse(BaseModel):
+    response: str
+    model_used: str
+    response_time: float
+
+class HealthResponse(BaseModel):
+    status: str
+    model_loaded: bool
+    model_name: str
+    cache_directory: str
+    startup_time: float
+
+# Global variables
+tokenizer = None
+model = None
+generator = None
+startup_time = time.time()
+
+# Configuration
+MODEL_NAME = os.getenv("MODEL_NAME", "microsoft/DialoGPT-medium")
+CACHE_DIR = os.getenv("TRANSFORMERS_CACHE", "/app/model_cache")
+MAX_LENGTH = int(os.getenv("MAX_LENGTH", "100"))
+DEFAULT_TEMPERATURE = float(os.getenv("DEFAULT_TEMPERATURE", "0.7"))
+
+def ensure_cache_dir():
+    """Ensure cache directory exists"""
+    Path(CACHE_DIR).mkdir(parents=True, exist_ok=True)
+    logger.info(f"Cache directory: {CACHE_DIR}")
+
+def is_model_cached(model_name: str) -> bool:
+    """Check if model is already cached"""
+    model_path = Path(CACHE_DIR) / f"models--{model_name.replace('/', '--')}"
+    is_cached = model_path.exists() and any(model_path.iterdir())
+    logger.info(f"Model cached: {is_cached}")
+    return is_cached
+
+def load_model():
+    """Load the Hugging Face model with caching"""
+    global tokenizer, model, generator
+    
+    try:
+        ensure_cache_dir()
+        
+        if is_model_cached(MODEL_NAME):
+            logger.info(f"✅ Loading cached model: {MODEL_NAME}")
+        else:
+            logger.info(f"📥 Downloading and caching model: {MODEL_NAME}")
+        
+        start_time = time.time()
+        
+        # Load tokenizer
+        tokenizer = AutoTokenizer.from_pretrained(
+            MODEL_NAME,
+            cache_dir=CACHE_DIR,
+            local_files_only=False
+        )
+        
+        # Add padding token if it doesn't exist
+        if tokenizer.pad_token is None:
+            tokenizer.pad_token = tokenizer.eos_token
+        
+        # Load model with optimization
+        model = AutoModelForCausalLM.from_pretrained(
+            MODEL_NAME,
+            cache_dir=CACHE_DIR,
+            torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,
+            low_cpu_mem_usage=True,
+            local_files_only=False
+        )
+        
+        # Create text generation pipeline
+        device = 0 if torch.cuda.is_available() else -1
+        generator = pipeline(
+            "text-generation",
+            model=model,
+            tokenizer=tokenizer,
+            device=device,
+            torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,
+        )
+        
+        load_time = time.time() - start_time
+        logger.info(f"✅ Model loaded successfully in {load_time:.2f} seconds!")
+        
+        return True
+        
+    except Exception as e:
+        logger.error(f"❌ Error loading model: {str(e)}")
+        return False
+
+def generate_response(message: str, max_length: int = 100, temperature: float = 0.7, top_p: float = 0.9) -> str:
+    """Generate response using the loaded model"""
+    if not generator:
+        return "❌ Model not loaded. Please wait for initialization..."
+    
+    try:
+        start_time = time.time()
+        
+        # Generate response with parameters
+        response = generator(
+            message,
+            max_length=max_length,
+            temperature=temperature,
+            top_p=top_p,
+            num_return_sequences=1,
+            pad_token_id=tokenizer.eos_token_id,
+            do_sample=True,
+            truncation=True,
+            repetition_penalty=1.1
+        )
+        
+        # Extract generated text
+        generated_text = response[0]['generated_text']
+        
+        # Clean up response
+        if generated_text.startswith(message):
+            bot_response = generated_text[len(message):].strip()
+        else:
+            bot_response = generated_text.strip()
+        
+        # Fallback if empty response
+        if not bot_response:
+            bot_response = "I'm not sure how to respond to that. Could you try rephrasing?"
+        
+        response_time = time.time() - start_time
+        logger.info(f"Generated response in {response_time:.2f}s")
+        
+        return bot_response, response_time
+        
+    except Exception as e:
+        logger.error(f"Error generating response: {str(e)}")
+        return f"❌ Error generating response: {str(e)}", 0.0
+
+# FastAPI endpoints
+@app.get("/", response_class=FileResponse)
+async def serve_frontend():
+    """Serve the frontend HTML file"""
+    html_path = Path("static/index.html")
+    if html_path.exists():
+        return FileResponse("static/index.html")
+    else:
+        return JSONResponse(
+            content={"message": "Frontend not available. Use /docs for API documentation."},
+            status_code=200
+        )
+
+@app.get("/health", response_model=HealthResponse)
+async def health_check():
+    """Health check endpoint with detailed information"""
+    return HealthResponse(
+        status="healthy" if model is not None else "initializing",
+        model_loaded=model is not None,
+        model_name=MODEL_NAME,
+        cache_directory=CACHE_DIR,
+        startup_time=time.time() - startup_time
+    )
+
+@app.post("/chat", response_model=ChatResponse)
+async def chat_endpoint(request: ChatRequest):
+    """Chat endpoint for API access"""
+    if not generator:
+        raise HTTPException(
+            status_code=503, 
+            detail="Model not loaded yet. Please wait for initialization."
+        )
+    
+    # Validate input
+    if not request.message.strip():
+        raise HTTPException(status_code=400, detail="Message cannot be empty")
+    
+    if len(request.message) > 1000:
+        raise HTTPException(status_code=400, detail="Message too long (max 1000 characters)")
+    
+    # Generate response
+    response_text, response_time = generate_response(
+        request.message.strip(), 
+        request.max_length, 
+        request.temperature,
+        request.top_p
+    )
+    
+    return ChatResponse(
+        response=response_text,
+        model_used=MODEL_NAME,
+        response_time=response_time
+    )
+
+@app.get("/model-info")
+async def get_model_info():
+    """Get detailed model information"""
+    return {
+        "model_name": MODEL_NAME,
+        "model_loaded": model is not None,
+        "device": "cuda" if torch.cuda.is_available() else "cpu",
+        "cache_directory": CACHE_DIR,
+        "model_cached": is_model_cached(MODEL_NAME),
+        "parameters": {
+            "max_length": MAX_LENGTH,
+            "default_temperature": DEFAULT_TEMPERATURE
+        }
+    }
+
+@app.get("/status")
+async def get_status():
+    """Get current application status"""
+    return {
+        "status": "running",
+        "model_ready": model is not None,
+        "uptime": time.time() - startup_time,
+        "endpoints": ["/", "/health", "/chat", "/model-info", "/docs"]
+    }
+
+# Mount static files if directory exists
+if Path("static").exists():
+    app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Gradio interface
+def chat_with_bot(message, history, max_length, temperature, top_p):
+    """Gradio chat function with advanced parameters"""
+    if not message.strip():
+        return "Please enter a message."
+    
+    response_text, _ = generate_response(message.strip(), max_length, temperature, top_p)
+    return response_text
+
+def create_gradio_interface():
+    """Create enhanced Gradio interface"""
+    
+    # Custom CSS
+    css = """
+    .gradio-container {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    .chat-message {
+        font-size: 14px !important;
+        line-height: 1.4;
+    }
+    .gradio-chatbot {
+        height: 500px;
+    }
+    """
+    
+    # Create interface with advanced controls
+    with gr.Blocks(css=css, title="FastAPI Chatbot", theme=gr.themes.Soft()) as demo:
+        
+        gr.HTML("<h1 style='text-align: center; color: #2563eb;'>🤖 FastAPI Chatbot</h1>")
+        gr.HTML(f"<p style='text-align: center; color: #6b7280;'>Powered by {MODEL_NAME}</p>")
+        
+        with gr.Row():
+            with gr.Column(scale=3):
+                chatbot = gr.Chatbot(
+                    height=500,
+                    show_copy_button=True,
+                    bubble_full_width=False,
+                    avatar_images=("👤", "🤖")
+                )
+                
+                with gr.Row():
+                    msg = gr.Textbox(
+                        placeholder="Type your message here...",
+                        container=False,
+                        scale=4,
+                        max_lines=3
+                    )
+                    submit_btn = gr.Button("Send 📤", scale=1, variant="primary")
+                
+                with gr.Row():
+                    clear_btn = gr.Button("Clear Chat 🗑️", scale=1)
+                    retry_btn = gr.Button("Retry Last ↻", scale=1)
+            
+            with gr.Column(scale=1):
+                gr.HTML("<h3>Settings</h3>")
+                
+                max_length = gr.Slider(
+                    minimum=50,
+                    maximum=200,
+                    value=MAX_LENGTH,
+                    step=10,
+                    label="Max Response Length"
+                )
+                
+                temperature = gr.Slider(
+                    minimum=0.1,
+                    maximum=1.5,
+                    value=DEFAULT_TEMPERATURE,
+                    step=0.1,
+                    label="Temperature (Creativity)"
+                )
+                
+                top_p = gr.Slider(
+                    minimum=0.1,
+                    maximum=1.0,
+                    value=0.9,
+                    step=0.05,
+                    label="Top-p (Focus)"
+                )
+                
+                gr.HTML("<h4>Example Messages:</h4>")
+                examples = gr.Examples(
+                    examples=[
+                        ["Hello! How are you today?"],
+                        ["Tell me a joke"],
+                        ["What's your favorite hobby?"],
+                        ["Can you help me with a creative writing prompt?"],
+                        ["What do you think about technology?"]
+                    ],
+                    inputs=msg,
+                    label="Click to try:"
+                )
+        
+        # Event handlers
+        def respond(message, history, max_len, temp, top_p):
+            if not message.strip():
+                return history, ""
+            
+            # Add user message
+            history.append([message, None])
+            
+            # Generate bot response
+            bot_response = chat_with_bot(message, history, max_len, temp, top_p)
+            history[-1][1] = bot_response
+            
+            return history, ""
+        
+        def clear_chat():
+            return [], ""
+        
+        def retry_last(history, max_len, temp, top_p):
+            if not history:
+                return history
+            
+            last_user_msg = history[-1][0]
+            history[-1][1] = "Thinking..."
+            
+            # Regenerate response
+            bot_response = chat_with_bot(last_user_msg, history, max_len, temp, top_p)
+            history[-1][1] = bot_response
+            
+            return history
+        
+        # Wire up events
+        submit_btn.click(
+            respond,
+            [msg, chatbot, max_length, temperature, top_p],
+            [chatbot, msg]
+        )
+        
+        msg.submit(
+            respond,
+            [msg, chatbot, max_length, temperature, top_p],
+            [chatbot, msg]
+        )
+        
+        clear_btn.click(clear_chat, outputs=[chatbot, msg])
+        retry_btn.click(retry_last, [chatbot, max_length, temperature, top_p], chatbot)
+    
+    return demo
+
+def run_fastapi():
+    """Run FastAPI server"""
+    uvicorn.run(
+        app, 
+        host="0.0.0.0", 
+        port=8000, 
+        log_level="info",
+        access_log=True
+    )
+
+def main():
+    """Main function to run both FastAPI and Gradio"""
+    logger.info("🚀 Starting FastAPI Chatbot...")
+    
+    # Load model first
+    logger.info("📦 Loading model...")
+    model_loaded = load_model()
+    
+    if not model_loaded:
+        logger.error("❌ Failed to load model. Exiting...")
+        return
+    
+    logger.info("✅ Model loaded successfully!")
+    
+    # Create Gradio interface
+    logger.info("🎨 Creating Gradio interface...")
+    demo = create_gradio_interface()
+    
+    # Start FastAPI server in a separate thread
+    logger.info("🌐 Starting FastAPI server...")
+    fastapi_thread = threading.Thread(target=run_fastapi, daemon=True)
+    fastapi_thread.start()
+    
+    # Launch Gradio interface
+    logger.info("🚀 Launching Gradio interface...")
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True,
+        quiet=False,
+        show_api=False
+    )
+
+if __name__ == "__main__":
+    main()
+    
+
+
+git remote add origin https://cronjob-python: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@huggingface.co/spaces/cronjob-python/chatbot

requirements.txt

@@ -0,0 +1,13 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+transformers==4.35.2
+torch==2.1.0+cpu
+tokenizers==0.15.0
+accelerate==0.24.1
+gradio==4.7.1
+requests==2.31.0
+numpy==1.24.3
+pydantic==2.4.2
+python-multipart==0.0.6
+jinja2==3.1.2
+aiofiles==23.2.1

static/index.html

@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FastAPI Chatbot</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;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .chat-container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 800px;
+            height: 600px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .chat-header {
+            background: linear-gradient(135deg, #2563eb, #1d4ed8);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+
+        .chat-header h1 {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+
+        .chat-header p {
+            font-size: 14px;
+            opacity: 0.8;
+        }
+
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .message {
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            font-size: 14px;
+            line-height: 1.4;
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .user-message {
+            background: #2563eb;
+            color: white;
+            align-self: flex-end;
+            border-bottom-right-radius: 6px;
+        }
+
+        .bot-message {
+            background: #f3f4f6;
+            color: #1f2937;
+            align-self: flex-start;
+            border-bottom-left-radius: 6px;
+            border: 1px solid #e5e7eb;
+        }
+
+        .loading-message {
+            background: #f3f4f6;
+            color: #6b7280;
+            align-self: flex-start;
+            border-bottom-left-radius: 6px;
+            border: 1px solid #e5e7eb;
+            font-style: italic;
+        }
+
+        .loading-dots::after {
+            content: '';
+            animation: loading 1.4s infinite;
+        }
+
+        @keyframes loading {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60%, 100% { content: '...'; }
+        }
+
+        .input-container {
+            padding: 20px;
+            border-top: 1px solid #e5e7eb;
+            background: white;
+        }
+
+        .input-row {
+            display: flex;
+            gap: 12px;
+            align-items: flex-end;
+        }
+
+        .input-group {
+            flex: 1;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            min-height: 44px;
+            max-height: 120px;
+            padding: 12px 16px;
+            border: 2px solid #e5e7eb;
+            border-radius: 22px;
+            font-size: 14px;
+            resize: none;
+            transition: border-color 0.2s;
+            font-family: inherit;
+        }
+
+        #messageInput:focus {
+            outline: none;
+            border-color: #2563eb;
+        }
+
+        .send-button {
+            width: 44px;
+            height: 44px;
+            border: none;
+            border-radius: 50%;
+            background: #2563eb;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .send-button:hover:not(:disabled) {
+            background: #1d4ed8;
+            transform: scale(1.05);
+        }
+
+        .send-button:disabled {
+            background: #9ca3af;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .controls {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+            justify-content: center;
+        }
+
+        .control-btn {
+            padding: 6px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 16px;
+            background: white;
+            color: #6b7280;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .control-btn:hover {
+            background: #f9fafb;
+            border-color: #9ca3af;
+        }
+
+        .status-indicator {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #10b981;
+        }
+
+        @media (max-width: 600px) {
+            .chat-container {
+                height: 100vh;
+                border-radius: 0;
+                max-width: none;
+            }
+            
+            body {
+                padding: 0;
+            }
+
+            .message {
+                max-width: 90%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="status-indicator" id="statusIndicator"></div>
+        
+        <div class="chat-header">
+            <h1>🤖 FastAPI Chatbot</h1>
+            <p>Powered by Hugging Face Transformers</p>
+        </div>
+        
+        <div id="messages" class="messages">
+            <div class="message bot-message">
+                👋 Hello! I'm your AI assistant. How can I help you today?
+            </div>
+        </div>
+        
+        <div class="input-container">
+            <div class="input-row">
+                <div class="input-group">
+                    <textarea 
+                        id="messageInput" 
+                        placeholder="Type your message here..." 
+                        rows="1"
+                    ></textarea>
+                </div>
+                <button id="sendBtn" class="send-button" title="Send message">
+                    ➤
+                </button>
+            </div>
+            <div class="controls">
+                <button class="control-btn" onclick="clearChat()">🗑️ Clear</button>
+                <button class="control-btn" onclick="checkHealth()">📡 Status</button>
+                <button class="control-btn" onclick="showExamples()">💡 Examples</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const messagesDiv = document.getElementById('messages');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const statusIndicator = document.getElementById('statusIndicator');
+
+        // Auto-resize textarea
+        messageInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+        });
+
+        function addMessage(message, isUser = false, isLoading = false) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${isUser ? 'user-message' : isLoading ? 'loading-message loading-dots' : 'bot-message'}`;
+            messageDiv.textContent = message;
+            messagesDiv.appendChild(messageDiv);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            return messageDiv;
+        }
+
+        function setStatus(online) {
+            statusIndicator.style.background = online ? '#10b981' : '#ef4444';
+        }
+
+        async function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message) return;
+
+            // Disable input
+            sendBtn.disabled = true;
+            messageInput.disabled = true;
+
+            // Add user message
+            addMessage(message, true);
+            messageInput.value = '';
+            messageInput.style.height = 'auto';
+
+            // Add loading message
+            const loadingDiv = addMessage('Bot is thinking', false, true);
+
+            try {
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        message: message,
+                        max_length: 100,
+                        temperature: 0.7,
+                        top_p: 0.9
+                    })
+                });
+
+                const data = await response.json();
+                
+                // Remove loading message
+                messagesDiv.removeChild(loadingDiv);
+                
+                if (response.ok) {
+                    addMessage(data.response);
+                    setStatus(true);
+                } else {
+                    addMessage(`❌ Error: ${data.detail}`);
+                    setStatus(false);
+                }
+            } catch (error) {
+                messagesDiv.removeChild(loadingDiv);
+                addMessage('❌ Connection error. Please try again.');
+                setStatus(false);
+            }
+
+            // Re-enable input
+            sendBtn.disabled = false;
+            messageInput.disabled = false;
+            messageInput.focus();
+        }
+
+        function clearChat() {
+            const messages = messagesDiv.querySelectorAll('.message:not(:first-child)');
+            messages.forEach(msg => msg.remove());
+        }
+
+        async function checkHealth() {
+            try {
+                const response = await fetch('/health');
+                const data = await response.json();
+                const status = data.model_loaded ? '✅ Online' : '⏳ Loading';
+                addMessage(`Status: ${status} | Model: ${data.model_name}`);
+                setStatus(data.model_loaded);
+            } catch (error) {
+                addMessage('❌ Unable to check status');
+                setStatus(false);
+            }
+        }
+
+        function showExamples() {
+            const examples = [
+                "Hello! How are you today?",
+                "Tell me a joke",
+                "What's your favorite hobby?",
+                "Can you help me brainstorm ideas?",
+                "What do you think about AI?"
+            ];
+            
+            const randomExample = examples[Math.floor(Math.random() * examples.length)];
+            messageInput.value = randomExample;
+            messageInput.focus();
+        }
+
+        // Event listeners
+        sendBtn.addEventListener('click', sendMessage);
+        
+        messageInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+
+        // Initial health check
+        setTimeout(checkHealth, 1000);
+
+        // Focus input on load
+        messageInput.focus();
+    </script>
+</body>
+</html>