Add frontend dashboard, comprehensive docs, and enhanced logging v3.1

Dockerfile

@@ -20,8 +20,9 @@ RUN mkdir -p /app/models && \
     curl -L -o /app/models/qwen2.5-coder-7b-instruct-q4_k_m.gguf \
     "https://huggingface.co/Qwen/Qwen2.5-Coder-7B-Instruct-GGUF/resolve/main/qwen2.5-coder-7b-instruct-q4_k_m.gguf"
 
-# Copy application code
+# Copy application code and static files
 COPY app.py .
+COPY static/ ./static/
 
 # Expose port
 EXPOSE 7860

README.md

@@ -10,100 +10,293 @@ license: apache-2.0
 
 # Anthropic-Compatible API
 
-A lightweight, CPU-based API endpoint that provides **Anthropic Messages API compatibility** using the SmolLM2-135M model.
+A **production-ready, self-hosted API** that provides full **Anthropic Messages API compatibility** using the Qwen2.5-Coder-7B model with llama.cpp backend.
+
+> **Live Dashboard**: [https://likhonsheikh-anthropic-compatible-api.hf.space](https://likhonsheikh-anthropic-compatible-api.hf.space)
 
 ## Features
 
-- ✅ Full Anthropic Messages API compatibility
-- ✅ Streaming support (SSE)
-- ✅ Token counting endpoint
-- ✅ Ultra-lightweight (135M parameters)
-- ✅ CPU-optimized
-- ✅ No GPU required
+| Feature | Description |
+|---------|-------------|
+| **Full Anthropic API** | Complete Messages API compatibility |
+| **OpenAI API** | Dual compatibility with OpenAI Chat API |
+| **Streaming (SSE)** | Real-time token streaming |
+| **Tool Use** | Function calling / tool use support |
+| **Extended Thinking** | `<thinking>` block support for reasoning |
+| **Request Queue** | Concurrency control with priority |
+| **Prompt Caching** | LRU cache for system prompts |
+| **Multi-Model** | Hot-swap between models |
+| **Live Dashboard** | Built-in web UI with playground |
+| **Logs Viewer** | Real-time API logs |
 
-## API Endpoints
+---
 
-### Create Message
-```bash
-POST /v1/messages
-```
+## Quick Start
+
+### 1. Claude Code CLI
+
+The easiest way to use this API with Claude Code:
 
-### Example Request
 ```bash
-curl -X POST "https://YOUR_SPACE.hf.space/anthropic/v1/messages" \
-  -H "Content-Type: application/json" \
-  -H "x-api-key: your-api-key" \
-  -H "anthropic-version: 2023-06-01" \
-  -d '{
-    "model": "qwen2.5-coder-7b",
-    "max_tokens": 256,
-    "messages": [
-      {"role": "user", "content": "Hello, how are you?"}
-    ]
-  }'
+# Set environment variables
+export ANTHROPIC_API_KEY="any-key"
+export ANTHROPIC_BASE_URL="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
+
+# Run Claude Code
+claude "Write a Python script that reads a CSV file"
+
+# Or with explicit model
+claude --model qwen2.5-coder-7b "Explain this code"
 ```
 
-### Streaming Example
+**Persistent Configuration** (add to `~/.bashrc` or `~/.zshrc`):
+
 ```bash
-curl -X POST "https://YOUR_SPACE.hf.space/anthropic/v1/messages" \
-  -H "Content-Type: application/json" \
-  -d '{
-    "model": "qwen2.5-coder-7b",
-    "max_tokens": 256,
-    "stream": true,
-    "messages": [
-      {"role": "user", "content": "Tell me a short story"}
-    ]
-  }'
+# Anthropic-Compatible API Configuration
+export ANTHROPIC_API_KEY="any-key"
+export ANTHROPIC_BASE_URL="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
 ```
 
-## SDK Compatibility
+### 2. Python SDK
 
-### Python
 ```python
 import anthropic
 
 client = anthropic.Anthropic(
     api_key="any-key",
-    base_url="https://YOUR_SPACE.hf.space/anthropic"
+    base_url="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
 )
 
+# Basic message
 message = client.messages.create(
     model="qwen2.5-coder-7b",
-    max_tokens=256,
-    messages=[{"role": "user", "content": "Hello!"}]
+    max_tokens=1024,
+    messages=[{"role": "user", "content": "Hello! Write a hello world in Python."}]
 )
 print(message.content[0].text)
+
+# With system prompt
+message = client.messages.create(
+    model="qwen2.5-coder-7b",
+    max_tokens=1024,
+    system="You are a helpful coding assistant. Always include comments in your code.",
+    messages=[{"role": "user", "content": "Write a function to calculate factorial"}]
+)
+print(message.content[0].text)
+```
+
+### 3. Streaming Response
+
+```python
+import anthropic
+
+client = anthropic.Anthropic(
+    api_key="any-key",
+    base_url="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
+)
+
+with client.messages.stream(
+    model="qwen2.5-coder-7b",
+    max_tokens=1024,
+    messages=[{"role": "user", "content": "Write a detailed explanation of recursion"}]
+) as stream:
+    for text in stream.text_stream:
+        print(text, end="", flush=True)
+```
+
+### 4. Tool Use / Function Calling
+
+```python
+import anthropic
+import json
+
+client = anthropic.Anthropic(
+    api_key="any-key",
+    base_url="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
+)
+
+tools = [
+    {
+        "name": "get_weather",
+        "description": "Get the current weather for a location",
+        "input_schema": {
+            "type": "object",
+            "properties": {
+                "location": {"type": "string", "description": "City name"},
+                "unit": {"type": "string", "enum": ["celsius", "fahrenheit"]}
+            },
+            "required": ["location"]
+        }
+    }
+]
+
+message = client.messages.create(
+    model="qwen2.5-coder-7b",
+    max_tokens=1024,
+    tools=tools,
+    messages=[{"role": "user", "content": "What's the weather in Tokyo?"}]
+)
+
+if message.stop_reason == "tool_use":
+    for block in message.content:
+        if block.type == "tool_use":
+            print(f"Tool: {block.name}")
+            print(f"Input: {json.dumps(block.input, indent=2)}")
+```
+
+### 5. Extended Thinking
+
+```python
+import anthropic
+
+client = anthropic.Anthropic(
+    api_key="any-key",
+    base_url="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
+)
+
+message = client.messages.create(
+    model="qwen2.5-coder-7b",
+    max_tokens=2048,
+    thinking={"type": "enabled", "budget_tokens": 1024},
+    messages=[{"role": "user", "content": "Solve step by step: What is 15% of 240?"}]
+)
+
+for block in message.content:
+    if block.type == "thinking":
+        print("=== THINKING ===")
+        print(block.thinking)
+    elif block.type == "text":
+        print("=== ANSWER ===")
+        print(block.text)
 ```
 
-### TypeScript/JavaScript
+### 6. TypeScript/JavaScript
+
 ```typescript
 import Anthropic from '@anthropic-ai/sdk';
 
 const client = new Anthropic({
   apiKey: 'any-key',
-  baseURL: 'https://YOUR_SPACE.hf.space/anthropic'
+  baseURL: 'https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic'
 });
 
 const message = await client.messages.create({
   model: 'qwen2.5-coder-7b',
-  max_tokens: 256,
+  max_tokens: 1024,
   messages: [{ role: 'user', content: 'Hello!' }]
 });
+
 console.log(message.content[0].text);
 ```
 
+### 7. cURL
+
+```bash
+curl -X POST "https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic/v1/messages" \
+  -H "Content-Type: application/json" \
+  -H "x-api-key: any-key" \
+  -H "anthropic-version: 2023-06-01" \
+  -d '{
+    "model": "qwen2.5-coder-7b",
+    "max_tokens": 256,
+    "messages": [{"role": "user", "content": "Hello!"}]
+  }'
+```
+
+### 8. OpenAI SDK (Alternative)
+
+```python
+from openai import OpenAI
+
+client = OpenAI(
+    api_key="any-key",
+    base_url="https://likhonsheikh-anthropic-compatible-api.hf.space/v1"
+)
+
+response = client.chat.completions.create(
+    model="qwen2.5-coder-7b",
+    messages=[{"role": "user", "content": "Hello!"}],
+    max_tokens=1024
+)
+print(response.choices[0].message.content)
+```
+
+---
+
+## API Reference
+
+### Endpoints
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| `GET` | `/` | Dashboard with status & playground |
+| `GET` | `/health` | Health check with queue/cache stats |
+| `GET` | `/logs?lines=100` | View API logs |
+| `GET` | `/queue/status` | Request queue statistics |
+| `GET` | `/models/status` | Loaded models information |
+| `POST` | `/models/{id}/load` | Manually load a model |
+| `POST` | `/models/{id}/unload` | Unload a model |
+| `GET` | `/anthropic/v1/models` | List models (Anthropic format) |
+| `POST` | `/anthropic/v1/messages` | Create message (Anthropic API) |
+| `POST` | `/anthropic/v1/messages/count_tokens` | Count tokens |
+| `GET` | `/v1/models` | List models (OpenAI format) |
+| `POST` | `/v1/chat/completions` | Chat completion (OpenAI API) |
+
+### Request Format
+
+```json
+{
+  "model": "qwen2.5-coder-7b",
+  "max_tokens": 1024,
+  "messages": [{"role": "user", "content": "Hello!"}],
+  "system": "You are a helpful assistant.",
+  "temperature": 0.7,
+  "stream": false,
+  "tools": [...],
+  "thinking": {"type": "enabled", "budget_tokens": 1024}
+}
+```
+
+### Response Format
+
+```json
+{
+  "id": "msg_abc123",
+  "type": "message",
+  "role": "assistant",
+  "content": [{"type": "text", "text": "Hello!"}],
+  "model": "qwen2.5-coder-7b",
+  "stop_reason": "end_turn",
+  "usage": {"input_tokens": 10, "output_tokens": 25}
+}
+```
+
+---
+
 ## Model Info
 
-- **Model**: Qwen2.5-Coder-7B-Instruct (Q4_K_M GGUF)
-- **Parameters**: 7 Billion (quantized)
-- **Backend**: llama.cpp
-- **Optimized for**: Code, Tool reasoning, Agent workflows
-- **Context Length**: 8K tokens
+| Property | Value |
+|----------|-------|
+| **Model** | Qwen2.5-Coder-7B-Instruct |
+| **Format** | GGUF (Q4_K_M quantization) |
+| **Parameters** | 7 Billion |
+| **Context Length** | 8,192 tokens |
+| **Backend** | llama.cpp |
+| **Optimized For** | Code, tool use, agent workflows |
+
+---
 
-## Rate Limits
+## Troubleshooting
 
-This is a free CPU-based endpoint. Please be mindful of usage.
+| Issue | Solution |
+|-------|----------|
+| Connection Timeout | Space may be sleeping. First request wakes it (~30s) |
+| 503 Queue Full | Too many requests. Retry in a few seconds |
+| Slow Response | CPU-based, expect ~10-30 tokens/second |
+| Tool Use Issues | Ensure valid JSON schema |
 
 ---
-Built with ❤️ by Matrix Agent
+
+## License
+
+Apache 2.0 | Built with llama.cpp + FastAPI by Matrix Agent

app.py

@@ -23,8 +23,9 @@ from collections import OrderedDict
 from dataclasses import dataclass, field
 
 from fastapi import FastAPI, HTTPException, Header, Request, BackgroundTasks
-from fastapi.responses import StreamingResponse, JSONResponse
+from fastapi.responses import StreamingResponse, JSONResponse, HTMLResponse, FileResponse
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 from llama_cpp import Llama
 
@@ -752,10 +753,46 @@ def parse_tool_use(text: str) -> Optional[Dict[str, Any]]:
 def generate_id(prefix: str = "msg") -> str:
     return f"{prefix}_{uuid.uuid4().hex[:24]}"
 
+# ============== STATIC FILES ==============
+STATIC_DIR = os.path.join(os.path.dirname(__file__), "static")
+if os.path.exists(STATIC_DIR):
+    app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+    logger.info(f"Static files mounted from {STATIC_DIR}")
+
 # ============== ROOT ENDPOINTS ==============
 
-@app.get("/")
+@app.get("/", response_class=HTMLResponse)
 async def root():
+    """Serve the dashboard or API status"""
+    static_file = os.path.join(STATIC_DIR, "index.html")
+    if os.path.exists(static_file):
+        return FileResponse(static_file, media_type="text/html")
+    # Fallback to JSON if no static file
+    return JSONResponse({
+        "status": "healthy",
+        "version": "3.0.0",
+        "backend": "llama.cpp",
+        "features": [
+            "request-queue",
+            "prompt-caching",
+            "multi-model",
+            "extended-thinking",
+            "streaming",
+            "tool-use",
+            "dual-compatibility"
+        ],
+        "endpoints": {
+            "openai": "/v1/chat/completions",
+            "anthropic": "/anthropic/v1/messages"
+        },
+        "models": model_manager.list_models(),
+        "queue": request_queue.get_status(),
+        "cache": prompt_cache.get_stats()
+    })
+
+@app.get("/api/status")
+async def api_status():
+    """API status as JSON (for dashboard AJAX calls)"""
     return {
         "status": "healthy",
         "version": "3.0.0",

static/index.html

@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anthropic-Compatible API Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <style>
+        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+        .card { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
+        pre code { font-size: 0.85rem !important; }
+        .status-dot { animation: pulse 2s infinite; }
+        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    </style>
+</head>
+<body class="min-h-screen gradient-bg">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <div class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-white mb-2">Anthropic-Compatible API</h1>
+            <p class="text-purple-100 text-lg">Self-hosted Claude-compatible endpoint powered by Qwen2.5-Coder-7B</p>
+        </div>
+
+        <!-- Status Cards -->
+        <div class="grid md:grid-cols-3 gap-6 mb-8">
+            <div class="card rounded-xl p-6 shadow-lg">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-800">API Status</h3>
+                    <span id="status-indicator" class="status-dot w-3 h-3 bg-yellow-400 rounded-full"></span>
+                </div>
+                <div id="api-status" class="text-sm text-gray-600">Checking...</div>
+            </div>
+            <div class="card rounded-xl p-6 shadow-lg">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-800">Queue Status</h3>
+                    <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+                    </svg>
+                </div>
+                <div id="queue-status" class="text-sm text-gray-600">Loading...</div>
+            </div>
+            <div class="card rounded-xl p-6 shadow-lg">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-800">Cache Stats</h3>
+                    <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                    </svg>
+                </div>
+                <div id="cache-status" class="text-sm text-gray-600">Loading...</div>
+            </div>
+        </div>
+
+        <!-- Models Section -->
+        <div class="card rounded-xl p-6 shadow-lg mb-8">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">Available Models</h3>
+            <div id="models-list" class="space-y-3">Loading models...</div>
+        </div>
+
+        <!-- Quick Start Guide -->
+        <div class="card rounded-xl p-6 shadow-lg mb-8">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">Quick Start</h3>
+
+            <div class="space-y-6">
+                <!-- Claude Code -->
+                <div>
+                    <h4 class="font-semibold text-purple-700 mb-2 flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                        Claude Code CLI
+                    </h4>
+                    <pre><code class="language-bash"># Set environment variables
+export ANTHROPIC_API_KEY="any-key"
+export ANTHROPIC_BASE_URL="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
+
+# Run Claude Code with custom model
+claude --model qwen2.5-coder-7b "Write a hello world in Python"</code></pre>
+                </div>
+
+                <!-- Python SDK -->
+                <div>
+                    <h4 class="font-semibold text-purple-700 mb-2 flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>
+                        Python SDK
+                    </h4>
+                    <pre><code class="language-python">import anthropic
+
+client = anthropic.Anthropic(
+    api_key="any-key",
+    base_url="https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic"
+)
+
+message = client.messages.create(
+    model="qwen2.5-coder-7b",
+    max_tokens=1024,
+    messages=[{"role": "user", "content": "Hello!"}]
+)
+print(message.content[0].text)</code></pre>
+                </div>
+
+                <!-- cURL -->
+                <div>
+                    <h4 class="font-semibold text-purple-700 mb-2 flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                        cURL
+                    </h4>
+                    <pre><code class="language-bash">curl -X POST "https://likhonsheikh-anthropic-compatible-api.hf.space/anthropic/v1/messages" \
+  -H "Content-Type: application/json" \
+  -H "x-api-key: any-key" \
+  -H "anthropic-version: 2023-06-01" \
+  -d '{
+    "model": "qwen2.5-coder-7b",
+    "max_tokens": 256,
+    "messages": [{"role": "user", "content": "Hello!"}]
+  }'</code></pre>
+                </div>
+            </div>
+        </div>
+
+        <!-- Interactive Playground -->
+        <div class="card rounded-xl p-6 shadow-lg mb-8">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">Try it Now</h3>
+            <div class="space-y-4">
+                <textarea id="prompt-input" class="w-full p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" rows="3" placeholder="Enter your prompt here...">Hello! Can you write a simple Python function that calculates factorial?</textarea>
+                <div class="flex gap-4">
+                    <button onclick="sendMessage()" class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-6 rounded-lg transition">
+                        Send Message
+                    </button>
+                    <button onclick="sendStreamingMessage()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-6 rounded-lg transition">
+                        Stream Response
+                    </button>
+                </div>
+                <div id="response-output" class="bg-gray-50 rounded-lg p-4 min-h-[100px] text-sm font-mono whitespace-pre-wrap hidden"></div>
+            </div>
+        </div>
+
+        <!-- Logs Viewer -->
+        <div class="card rounded-xl p-6 shadow-lg mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-bold text-gray-800">Live Logs</h3>
+                <button onclick="fetchLogs()" class="text-purple-600 hover:text-purple-800 text-sm font-medium">Refresh</button>
+            </div>
+            <div id="logs-output" class="bg-gray-900 text-green-400 rounded-lg p-4 h-64 overflow-y-auto text-xs font-mono">
+                Click "Refresh" to load logs...
+            </div>
+        </div>
+
+        <!-- API Endpoints Reference -->
+        <div class="card rounded-xl p-6 shadow-lg">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">API Endpoints</h3>
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-4 py-3 text-left font-semibold text-gray-600">Method</th>
+                            <th class="px-4 py-3 text-left font-semibold text-gray-600">Endpoint</th>
+                            <th class="px-4 py-3 text-left font-semibold text-gray-600">Description</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-100">
+                        <tr><td class="px-4 py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-semibold">GET</span></td><td class="px-4 py-3 font-mono text-purple-600">/</td><td class="px-4 py-3 text-gray-600">Health check with full status</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-semibold">GET</span></td><td class="px-4 py-3 font-mono text-purple-600">/health</td><td class="px-4 py-3 text-gray-600">Simple health check</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-semibold">GET</span></td><td class="px-4 py-3 font-mono text-purple-600">/logs</td><td class="px-4 py-3 text-gray-600">View API logs</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-semibold">GET</span></td><td class="px-4 py-3 font-mono text-purple-600">/queue/status</td><td class="px-4 py-3 text-gray-600">Request queue statistics</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-semibold">GET</span></td><td class="px-4 py-3 font-mono text-purple-600">/models/status</td><td class="px-4 py-3 text-gray-600">Loaded models info</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-semibold">POST</span></td><td class="px-4 py-3 font-mono text-purple-600">/anthropic/v1/messages</td><td class="px-4 py-3 text-gray-600">Anthropic Messages API</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-semibold">POST</span></td><td class="px-4 py-3 font-mono text-purple-600">/v1/chat/completions</td><td class="px-4 py-3 text-gray-600">OpenAI Chat API</td></tr>
+                        <tr><td class="px-4 py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-semibold">GET</span></td><td class="px-4 py-3 font-mono text-purple-600">/anthropic/v1/models</td><td class="px-4 py-3 text-gray-600">List available models</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center mt-8 text-purple-100">
+            <p>Built with llama.cpp + FastAPI | Model: Qwen2.5-Coder-7B-Instruct (Q4_K_M)</p>
+            <p class="mt-2 text-sm opacity-75">Open source and self-hostable</p>
+        </div>
+    </div>
+
+    <script>
+        hljs.highlightAll();
+
+        const BASE_URL = window.location.origin;
+
+        async function fetchStatus() {
+            try {
+                const res = await fetch(BASE_URL + '/api/status');
+                const data = await res.json();
+
+                document.getElementById('status-indicator').className = 'status-dot w-3 h-3 bg-green-400 rounded-full';
+                document.getElementById('api-status').innerHTML = `
+                    <div class="font-semibold text-green-600">Online</div>
+                    <div class="text-xs text-gray-500 mt-1">Version: ${data.version || 'N/A'}</div>
+                `;
+
+                if (data.queue) {
+                    document.getElementById('queue-status').innerHTML = `
+                        <div>Active: <span class="font-semibold">${data.queue.active_requests || 0}</span></div>
+                        <div>Queue: <span class="font-semibold">${data.queue.queue_length || 0}</span></div>
+                        <div class="text-xs text-gray-500 mt-1">Total: ${data.queue.stats?.total_requests || 0}</div>
+                    `;
+                }
+
+                if (data.cache) {
+                    document.getElementById('cache-status').innerHTML = `
+                        <div>Hit Rate: <span class="font-semibold">${data.cache.hit_rate || '0%'}</span></div>
+                        <div>Size: <span class="font-semibold">${data.cache.size || 0}/${data.cache.max_size || 10}</span></div>
+                    `;
+                }
+
+                if (data.models) {
+                    const modelsHtml = data.models.map(m => `
+                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                            <div>
+                                <span class="font-semibold">${m.id}</span>
+                                <span class="text-sm text-gray-500 ml-2">${m.size} (${m.quantization})</span>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                ${m.loaded ? '<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">Loaded</span>' : '<span class="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs">Available</span>'}
+                                ${m.default ? '<span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs">Default</span>' : ''}
+                            </div>
+                        </div>
+                    `).join('');
+                    document.getElementById('models-list').innerHTML = modelsHtml;
+                }
+            } catch (e) {
+                document.getElementById('status-indicator').className = 'status-dot w-3 h-3 bg-red-400 rounded-full';
+                document.getElementById('api-status').innerHTML = '<span class="text-red-600">Offline or Building</span>';
+            }
+        }
+
+        async function sendMessage() {
+            const prompt = document.getElementById('prompt-input').value;
+            const output = document.getElementById('response-output');
+            output.classList.remove('hidden');
+            output.textContent = 'Sending...';
+
+            try {
+                const res = await fetch(BASE_URL + '/anthropic/v1/messages', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'x-api-key': 'test-key',
+                        'anthropic-version': '2023-06-01'
+                    },
+                    body: JSON.stringify({
+                        model: 'qwen2.5-coder-7b',
+                        max_tokens: 1024,
+                        messages: [{ role: 'user', content: prompt }]
+                    })
+                });
+                const data = await res.json();
+                output.textContent = data.content?.[0]?.text || JSON.stringify(data, null, 2);
+            } catch (e) {
+                output.textContent = 'Error: ' + e.message;
+            }
+        }
+
+        async function sendStreamingMessage() {
+            const prompt = document.getElementById('prompt-input').value;
+            const output = document.getElementById('response-output');
+            output.classList.remove('hidden');
+            output.textContent = '';
+
+            try {
+                const res = await fetch(BASE_URL + '/anthropic/v1/messages', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'x-api-key': 'test-key',
+                        'anthropic-version': '2023-06-01'
+                    },
+                    body: JSON.stringify({
+                        model: 'qwen2.5-coder-7b',
+                        max_tokens: 1024,
+                        stream: true,
+                        messages: [{ role: 'user', content: prompt }]
+                    })
+                });
+
+                const reader = res.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                if (data.delta?.text) {
+                                    output.textContent += data.delta.text;
+                                }
+                            } catch {}
+                        }
+                    }
+                }
+            } catch (e) {
+                output.textContent = 'Error: ' + e.message;
+            }
+        }
+
+        async function fetchLogs() {
+            try {
+                const res = await fetch(BASE_URL + '/logs?lines=50');
+                const data = await res.json();
+                document.getElementById('logs-output').textContent = data.logs || 'No logs available';
+            } catch (e) {
+                document.getElementById('logs-output').textContent = 'Error loading logs: ' + e.message;
+            }
+        }
+
+        // Initial fetch
+        fetchStatus();
+        setInterval(fetchStatus, 30000);
+    </script>
+</body>
+</html>