Initial commit: FastAPI app with auth, API keys, download tracking, WebSocket live progress

.gitignore

@@ -0,0 +1,6 @@
+venv/
+__pycache__/
+*.pyc
+.env
+*.db
+.DS_Store

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -7,4 +7,15 @@ sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# FreeAPI
+
+Ollama Model Manager - Manage model downloads, generate API keys, and track progress for 16GB systems.
+
+## API Endpoints
+
+- `POST /api/register` - Register user
+- `POST /api/login` - Login (returns JWT)
+- `GET /api/models` - Recommended models
+- `POST /api/api-keys` - Create API key
+- `POST /api/download-sessions` - Start download
+- `WS /ws/{session_id}` - Live progress

app.py

@@ -0,0 +1,235 @@
+import json
+import asyncio
+import uuid
+from datetime import datetime, timedelta
+from typing import Optional
+
+from fastapi import FastAPI, HTTPException, Depends, status, WebSocket, WebSocketDisconnect, Request, Form
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
+from fastapi.templating import Jinja2Templates
+from jose import JWTError, jwt
+from pydantic import BaseModel
+
+from config import settings
+from database import (
+    init_db, create_user, get_user_by_username, verify_password,
+    get_user_by_api_key, create_download_session, update_download_progress,
+    get_download_session, get_user_sessions, create_api_key,
+    get_user_api_keys, revoke_api_key, generate_api_key
+)
+
+app = FastAPI(title=settings.app_name)
+
+security = HTTPBearer()
+templates = Jinja2Templates(directory="templates")
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+init_db()
+
+
+# --- Models ---
+
+class RegisterRequest(BaseModel):
+    username: str
+    email: str
+    password: str
+
+class LoginRequest(BaseModel):
+    username: str
+    password: str
+
+class CreateApiKeyRequest(BaseModel):
+    key_name: str
+
+class CreateSessionRequest(BaseModel):
+    model_name: str
+
+
+# --- Auth Helpers ---
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
+    to_encode = data.copy()
+    expire = datetime.utcnow() + (expires_delta or timedelta(minutes=settings.access_token_expire_minutes))
+    to_encode.update({"exp": expire})
+    return jwt.encode(to_encode, settings.secret_key, algorithm=settings.algorithm)
+
+async def get_current_user(credentials: HTTPAuthorizationCredentials = Depends(security)):
+    token = credentials.credentials
+    try:
+        payload = jwt.decode(token, settings.secret_key, algorithms=[settings.algorithm])
+        username = payload.get("sub")
+        if username is None:
+            raise HTTPException(status_code=401, detail="Invalid token")
+    except JWTError:
+        raise HTTPException(status_code=401, detail="Invalid token")
+    user = get_user_by_username(username)
+    if not user:
+        raise HTTPException(status_code=401, detail="User not found")
+    return user
+
+
+# --- WebSocket Progress Manager ---
+
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: dict[str, list[WebSocket]] = {}
+
+    async def connect(self, session_id: str, websocket: WebSocket):
+        await websocket.accept()
+        if session_id not in self.active_connections:
+            self.active_connections[session_id] = []
+        self.active_connections[session_id].append(websocket)
+
+    def disconnect(self, session_id: str, websocket: WebSocket):
+        if session_id in self.active_connections:
+            self.active_connections[session_id].remove(websocket)
+            if not self.active_connections[session_id]:
+                del self.active_connections[session_id]
+
+    async def broadcast(self, session_id: str, data: dict):
+        if session_id in self.active_connections:
+            for ws in self.active_connections[session_id]:
+                try:
+                    await ws.send_text(json.dumps(data))
+                except Exception:
+                    pass
+
+manager = ConnectionManager()
+
+
+# --- Web Pages ---
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/login", response_class=HTMLResponse)
+async def login_page(request: Request):
+    return templates.TemplateResponse("login.html", {"request": request})
+
+@app.get("/dashboard", response_class=HTMLResponse)
+async def dashboard_page(request: Request):
+    return templates.TemplateResponse("dashboard.html", {"request": request})
+
+@app.get("/progress/{session_id}", response_class=HTMLResponse)
+async def progress_page(request: Request, session_id: str):
+    return templates.TemplateResponse("progress.html", {"request": request, "session_id": session_id})
+
+
+# --- Auth API ---
+
+@app.post("/api/register")
+async def register(req: RegisterRequest):
+    user_id = create_user(req.username, req.email, req.password)
+    if not user_id:
+        raise HTTPException(status_code=400, detail="Username or email already taken")
+    return {"message": "User created", "user_id": user_id}
+
+@app.post("/api/login")
+async def login(req: LoginRequest):
+    user = get_user_by_username(req.username)
+    if not user or not verify_password(req.password, user["password_hash"]):
+        raise HTTPException(status_code=401, detail="Invalid credentials")
+    token = create_access_token({"sub": user["username"]})
+    return {"access_token": token, "token_type": "bearer", "username": user["username"]}
+
+@app.get("/api/me")
+async def me(user: dict = Depends(get_current_user)):
+    return {
+        "username": user["username"],
+        "email": user["email"],
+        "api_key": user["api_key"],
+        "created_at": user["created_at"]
+    }
+
+
+# --- Model Recommendations ---
+
+@app.get("/api/models")
+async def get_models():
+    return {"models": settings.recommended_models}
+
+
+# --- API Key Management ---
+
+@app.post("/api/api-keys")
+async def create_new_api_key(req: CreateApiKeyRequest, user: dict = Depends(get_current_user)):
+    key = create_api_key(user["id"], req.key_name)
+    return {"api_key": key, "key_name": req.key_name}
+
+@app.get("/api/api-keys")
+async def list_api_keys(user: dict = Depends(get_current_user)):
+    return {"api_keys": get_user_api_keys(user["id"])}
+
+@app.delete("/api/api-keys/{key_id}")
+async def delete_api_key(key_id: int, user: dict = Depends(get_current_user)):
+    revoke_api_key(key_id, user["id"])
+    return {"message": "API key revoked"}
+
+
+# --- Download Sessions ---
+
+@app.post("/api/download-sessions")
+async def start_download_session(req: CreateSessionRequest, user: dict = Depends(get_current_user)):
+    session_id = str(uuid.uuid4())
+    create_download_session(user["id"], session_id, req.model_name)
+    asyncio.create_task(simulate_download(session_id, req.model_name))
+    return {"session_id": session_id, "model_name": req.model_name, "status": "started"}
+
+@app.get("/api/download-sessions")
+async def list_sessions(user: dict = Depends(get_current_user)):
+    return {"sessions": get_user_sessions(user["id"])}
+
+@app.get("/api/download-sessions/{session_id}")
+async def get_session(session_id: str, user: dict = Depends(get_current_user)):
+    session = get_download_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found")
+    if session["user_id"] != user["id"]:
+        raise HTTPException(status_code=403, detail="Not your session")
+    return session
+
+
+# --- WebSocket ---
+
+@app.websocket("/ws/{session_id}")
+async def websocket_endpoint(websocket: WebSocket, session_id: str):
+    await manager.connect(session_id, websocket)
+    try:
+        while True:
+            await websocket.receive_text()
+    except WebSocketDisconnect:
+        manager.disconnect(session_id, websocket)
+
+
+# --- Simulated Download (mocked until Ollama works) ---
+
+async def simulate_download(session_id: str, model_name: str):
+    total_mb = 4500
+    downloaded = 0
+    speed = 5000
+
+    update_download_progress(session_id, status="downloading", progress=0, total_size_mb=total_mb, downloaded_mb=0, speed_kbps=speed, current_step="Connecting...", eta_seconds=total_mb * 8 // speed)
+    await manager.broadcast(session_id, {"status": "downloading", "progress": 0, "current_step": "Connecting...", "speed_kbps": speed, "eta_seconds": total_mb * 8 // speed})
+
+    await asyncio.sleep(2)
+
+    for i in range(1, 101):
+        await asyncio.sleep(0.5)
+        downloaded = int(total_mb * i / 100)
+        eta = int((total_mb - downloaded) * 8 / speed)
+        step = "Downloading manifest" if i < 10 else ("Downloading layers" if i < 90 else "Verifying")
+        update_download_progress(session_id, progress=i, downloaded_mb=downloaded, current_step=step, speed_kbps=speed, eta_seconds=eta)
+        await manager.broadcast(session_id, {"status": "downloading", "progress": i, "downloaded_mb": downloaded, "total_size_mb": total_mb, "current_step": step, "speed_kbps": speed, "eta_seconds": eta})
+
+    update_download_progress(session_id, status="completed", progress=100, downloaded_mb=total_mb, current_step="Done", speed_kbps=0, eta_seconds=0, completed_at=datetime.utcnow().isoformat())
+    await manager.broadcast(session_id, {"status": "completed", "progress": 100, "current_step": "Done"})
+
+
+# --- Startup ---
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host=settings.host, port=settings.port)

config.py

@@ -0,0 +1,30 @@
+import os
+from pydantic_settings import BaseSettings
+from typing import List
+
+
+class Settings(BaseSettings):
+    app_name: str = "Ollama Model Manager"
+    secret_key: str = os.getenv("SECRET_KEY", "your-secret-key-change-in-production")
+    algorithm: str = "HS256"
+    access_token_expire_minutes: int = 30
+    database_url: str = "sqlite:///./ollama_tool.db"
+    host: str = "0.0.0.0"
+    port: int = 7860
+
+    # Model recommendations for 16GB RAM
+    recommended_models: List[dict] = [
+        {"name": "llama3.1:8b", "size": "4.7GB", "ram": "8GB", "description": "Best all-around model for 16GB"},
+        {"name": "qwen2.5:7b", "size": "4.4GB", "ram": "8GB", "description": "Excellent multilingual support"},
+        {"name": "mistral:7b", "size": "4.1GB", "ram": "8GB", "description": "Fast and capable"},
+        {"name": "phi3:mini", "size": "2.3GB", "ram": "4GB", "description": "Lightweight, good for coding"},
+        {"name": "gemma2:9b", "size": "5.4GB", "ram": "10GB", "description": "Google's strong model"},
+        {"name": "qwen2.5:14b", "size": "8.2GB", "ram": "16GB", "description": "High quality, fits 16GB"},
+        {"name": "llama3.1:70b-q4", "size": "39GB", "ram": "48GB", "description": "Too large for 16GB"},
+    ]
+
+    class Config:
+        env_file = ".env"
+
+
+settings = Settings()

database.py

@@ -0,0 +1,156 @@
+import sqlite3
+import hashlib
+import secrets
+from datetime import datetime, timedelta
+from typing import Optional, List, Dict
+from contextlib import contextmanager
+from config import settings
+
+
+@contextmanager
+def get_db():
+    conn = sqlite3.connect(settings.database_url.replace("sqlite:///", ""))
+    conn.row_factory = sqlite3.Row
+    try:
+        yield conn
+        conn.commit()
+    except Exception:
+        conn.rollback()
+        raise
+    finally:
+        conn.close()
+
+
+def init_db():
+    with get_db() as conn:
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS users (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                username TEXT UNIQUE NOT NULL,
+                email TEXT UNIQUE NOT NULL,
+                password_hash TEXT NOT NULL,
+                api_key TEXT UNIQUE NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                is_active BOOLEAN DEFAULT 1
+            )
+        """)
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS download_sessions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                user_id INTEGER NOT NULL,
+                session_id TEXT UNIQUE NOT NULL,
+                status TEXT DEFAULT 'pending',
+                ollama_version TEXT,
+                model_name TEXT,
+                progress INTEGER DEFAULT 0,
+                current_step TEXT,
+                total_size_mb INTEGER DEFAULT 0,
+                downloaded_mb INTEGER DEFAULT 0,
+                speed_kbps INTEGER DEFAULT 0,
+                eta_seconds INTEGER DEFAULT 0,
+                error_message TEXT,
+                started_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                completed_at TIMESTAMP,
+                FOREIGN KEY (user_id) REFERENCES users (id)
+            )
+        """)
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS api_keys (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                user_id INTEGER NOT NULL,
+                key_name TEXT NOT NULL,
+                api_key TEXT UNIQUE NOT NULL,
+                is_active BOOLEAN DEFAULT 1,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                last_used_at TIMESTAMP,
+                FOREIGN KEY (user_id) REFERENCES users (id)
+            )
+        """)
+
+
+def hash_password(password: str) -> str:
+    return hashlib.sha256(password.encode()).hexdigest()
+
+
+def verify_password(password: str, password_hash: str) -> bool:
+    return hash_password(password) == password_hash
+
+
+def generate_api_key() -> str:
+    return f"ollama_{secrets.token_urlsafe(32)}"
+
+
+def create_user(username: str, email: str, password: str) -> Optional[int]:
+    with get_db() as conn:
+        try:
+            cursor = conn.execute(
+                "INSERT INTO users (username, email, password_hash, api_key) VALUES (?, ?, ?, ?)",
+                (username, email, hash_password(password), generate_api_key())
+            )
+            return cursor.lastrowid
+        except sqlite3.IntegrityError:
+            return None
+
+
+def get_user_by_username(username: str) -> Optional[Dict]:
+    with get_db() as conn:
+        row = conn.execute("SELECT * FROM users WHERE username = ?", (username,)).fetchone()
+        return dict(row) if row else None
+
+
+def get_user_by_api_key(api_key: str) -> Optional[Dict]:
+    with get_db() as conn:
+        row = conn.execute("SELECT * FROM users WHERE api_key = ? AND is_active = 1", (api_key,)).fetchone()
+        return dict(row) if row else None
+
+
+def create_download_session(user_id: int, session_id: str, model_name: str) -> int:
+    with get_db() as conn:
+        cursor = conn.execute(
+            "INSERT INTO download_sessions (user_id, session_id, model_name, status) VALUES (?, ?, ?, 'pending')",
+            (user_id, session_id, model_name)
+        )
+        return cursor.lastrowid
+
+
+def update_download_progress(session_id: str, **kwargs):
+    with get_db() as conn:
+        fields = ", ".join([f"{k} = ?" for k in kwargs.keys()])
+        values = list(kwargs.values()) + [session_id]
+        conn.execute(f"UPDATE download_sessions SET {fields} WHERE session_id = ?", values)
+
+
+def get_download_session(session_id: str) -> Optional[Dict]:
+    with get_db() as conn:
+        row = conn.execute("SELECT * FROM download_sessions WHERE session_id = ?", (session_id,)).fetchone()
+        return dict(row) if row else None
+
+
+def get_user_sessions(user_id: int) -> List[Dict]:
+    with get_db() as conn:
+        rows = conn.execute(
+            "SELECT * FROM download_sessions WHERE user_id = ? ORDER BY started_at DESC",
+            (user_id,)
+        ).fetchall()
+        return [dict(row) for row in rows]
+
+
+def create_api_key(user_id: int, key_name: str) -> str:
+    api_key = generate_api_key()
+    with get_db() as conn:
+        conn.execute(
+            "INSERT INTO api_keys (user_id, key_name, api_key) VALUES (?, ?, ?)",
+            (user_id, key_name, api_key)
+        )
+    return api_key
+
+
+def get_user_api_keys(user_id: int) -> List[Dict]:
+    with get_db() as conn:
+        rows = conn.execute("SELECT * FROM api_keys WHERE user_id = ?", (user_id,)).fetchall()
+        return [dict(row) for row in rows]
+
+
+def revoke_api_key(key_id: int, user_id: int):
+    with get_db() as conn:
+        conn.execute("UPDATE api_keys SET is_active = 0 WHERE id = ? AND user_id = ?", (key_id, user_id))

requirements.txt

@@ -0,0 +1,11 @@
+fastapi==0.115.0
+uvicorn==0.30.0
+httpx==0.27.0
+pydantic==2.7.0
+pydantic-settings==2.3.0
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+python-multipart==0.0.9
+jinja2==3.1.3
+websockets==12.0
+aiofiles==23.2.1

static/style.css

@@ -0,0 +1,200 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #f0f2f5;
+    color: #333;
+    line-height: 1.6;
+}
+
+.container { max-width: 960px; margin: 0 auto; padding: 20px; }
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+header h1 { font-size: 1.8rem; color: #1a1a2e; }
+
+a { color: #4361ee; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.card h2 { margin-bottom: 16px; font-size: 1.2rem; color: #1a1a2e; }
+
+.hero {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.buttons { display: flex; gap: 12px; margin-top: 16px; }
+
+.btn {
+    display: inline-block;
+    padding: 10px 24px;
+    border-radius: 8px;
+    border: none;
+    font-size: 1rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.2s;
+}
+
+.btn-primary { background: #4361ee; color: white; }
+.btn-primary:hover { background: #3a56d4; }
+
+.btn-secondary { background: #e0e0e0; color: #333; }
+.btn-secondary:hover { background: #ccc; }
+
+.btn-danger { background: #e63946; color: white; }
+.btn-danger:hover { background: #c1121f; }
+
+.btn-small { padding: 4px 12px; font-size: 0.85rem; }
+
+.auth-box {
+    max-width: 400px;
+    margin: 40px auto;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    overflow: hidden;
+}
+
+.tabs { display: flex; }
+.tab {
+    flex: 1;
+    padding: 14px;
+    border: none;
+    background: #f0f2f5;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background 0.2s;
+}
+.tab.active { background: white; font-weight: 600; }
+
+.auth-form { padding: 24px; }
+.auth-form.hidden { display: none; }
+
+.auth-form input {
+    width: 100%;
+    padding: 10px 14px;
+    margin-bottom: 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 1rem;
+}
+
+.error { color: #e63946; font-size: 0.9rem; margin-top: 8px; }
+.hidden { display: none; }
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.full-width { grid-column: 1 / -1; }
+
+.model-list { list-style: none; }
+.model-list li {
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 0.9rem;
+}
+
+.key-list { list-style: none; margin-top: 12px; }
+.key-list li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    font-size: 0.9rem;
+}
+.key-list code {
+    background: #f0f2f5;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    word-break: break-all;
+}
+
+.progress-container { max-width: 600px; margin: 0 auto; }
+
+.progress-bar-wrapper {
+    width: 100%;
+    height: 30px;
+    background: #e0e0e0;
+    border-radius: 15px;
+    overflow: hidden;
+    margin: 16px 0;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #4361ee, #7209b7);
+    transition: width 0.3s ease;
+    width: 0%;
+}
+
+.progress-text {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1a1a2e;
+}
+
+.progress-details {
+    margin-top: 20px;
+}
+
+.progress-details p {
+    margin: 8px 0;
+    font-size: 0.95rem;
+}
+
+.session-item {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px;
+    border-bottom: 1px solid #eee;
+}
+
+.status {
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.status-pending { background: #fff3cd; color: #856404; }
+.status-downloading { background: #cce5ff; color: #004085; }
+.status-completed { background: #d4edda; color: #155724; }
+.status-error { background: #f8d7da; color: #721c24; }
+
+select {
+    width: 100%;
+    padding: 10px 14px;
+    margin-bottom: 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 1rem;
+    background: white;
+}
+
+@media (max-width: 600px) {
+    .hero, .dashboard-grid { grid-template-columns: 1fr; }
+}

templates/dashboard.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - Ollama Manager</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Dashboard</h1>
+            <button class="btn btn-secondary" onclick="logout()">Logout</button>
+        </header>
+
+        <div class="dashboard-grid">
+            <div class="card">
+                <h2>Your Profile</h2>
+                <div id="profile"></div>
+            </div>
+
+            <div class="card">
+                <h2>API Keys</h2>
+                <form onsubmit="createApiKey(event)">
+                    <input type="text" id="key-name" placeholder="Key name" required>
+                    <button type="submit" class="btn btn-primary">Generate</button>
+                </form>
+                <ul id="api-keys-list" class="key-list"></ul>
+            </div>
+
+            <div class="card">
+                <h2>Start Download</h2>
+                <form onsubmit="startDownload(event)">
+                    <select id="model-select" required></select>
+                    <button type="submit" class="btn btn-primary">Download</button>
+                </form>
+            </div>
+
+            <div class="card full-width">
+                <h2>Download Sessions</h2>
+                <div id="sessions-list"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const token = localStorage.getItem('token');
+        if (!token) window.location.href = '/login';
+
+        async function api(url, opts = {}) {
+            opts.headers = {...opts.headers, 'Authorization': `Bearer ${token}`};
+            if (opts.body && typeof opts.body === 'object') {
+                opts.headers['Content-Type'] = 'application/json';
+                opts.body = JSON.stringify(opts.body);
+            }
+            const res = await fetch(url, opts);
+            if (res.status === 401) { localStorage.removeItem('token'); window.location.href = '/login'; }
+            return res;
+        }
+
+        function logout() {
+            localStorage.removeItem('token');
+            window.location.href = '/login';
+        }
+
+        // Load profile
+        api('/api/me').then(r => r.json()).then(data => {
+            document.getElementById('profile').innerHTML = `
+                <p><strong>Username:</strong> ${data.username}</p>
+                <p><strong>Email:</strong> ${data.email}</p>
+                <p><strong>Default API Key:</strong> <code>${data.api_key}</code></p>
+            `;
+        });
+
+        // Load models
+        fetch('/api/models').then(r => r.json()).then(data => {
+            const select = document.getElementById('model-select');
+            data.models.filter(m => !m.name.includes('70b')).forEach(m => {
+                const opt = document.createElement('option');
+                opt.value = m.name;
+                opt.textContent = `${m.name} (${m.size})`;
+                select.appendChild(opt);
+            });
+        });
+
+        // Load API keys
+        async function loadApiKeys() {
+            const res = await api('/api/api-keys');
+            const data = await res.json();
+            const ul = document.getElementById('api-keys-list');
+            ul.innerHTML = data.api_keys.map(k => `
+                <li>
+                    <strong>${k.key_name}</strong>: <code>${k.api_key}</code>
+                    <button onclick="revokeKey(${k.id})" class="btn-small btn-danger">Revoke</button>
+                </li>
+            `).join('');
+        }
+        loadApiKeys();
+
+        async function createApiKey(e) {
+            e.preventDefault();
+            const name = document.getElementById('key-name').value;
+            await api('/api/api-keys', {method: 'POST', body: {key_name: name}});
+            document.getElementById('key-name').value = '';
+            loadApiKeys();
+        }
+
+        async function revokeKey(id) {
+            if (confirm('Revoke this API key?')) {
+                await api(`/api/api-keys/${id}`, {method: 'DELETE'});
+                loadApiKeys();
+            }
+        }
+
+        // Start download
+        async function startDownload(e) {
+            e.preventDefault();
+            const model = document.getElementById('model-select').value;
+            const res = await api('/api/download-sessions', {method: 'POST', body: {model_name: model}});
+            const data = await res.json();
+            window.location.href = `/progress/${data.session_id}`;
+        }
+
+        // Load sessions
+        async function loadSessions() {
+            const res = await api('/api/download-sessions');
+            const data = await res.json();
+            const div = document.getElementById('sessions-list');
+            if (data.sessions.length === 0) {
+                div.innerHTML = '<p>No download sessions yet.</p>';
+                return;
+            }
+            div.innerHTML = data.sessions.map(s => `
+                <div class="session-item">
+                    <a href="/progress/${s.session_id}"><strong>${s.model_name}</strong></a>
+                    <span class="status status-${s.status}">${s.status}</span>
+                    <span>${s.progress}%</span>
+                    <small>${s.started_at}</small>
+                </div>
+            `).join('');
+        }
+        loadSessions();
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ollama Model Manager</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Ollama Model Manager</h1>
+            <p>Manage Ollama model downloads for 16GB systems</p>
+        </header>
+        <div class="hero">
+            <div class="card">
+                <h2>Get Started</h2>
+                <p>Register to generate API keys and track model download progress.</p>
+                <div class="buttons">
+                    <a href="/login" class="btn btn-primary">Login / Register</a>
+                </div>
+            </div>
+            <div class="card">
+                <h2>Recommended Models</h2>
+                <ul id="model-list" class="model-list"></ul>
+            </div>
+        </div>
+    </div>
+    <script>
+        fetch('/api/models')
+            .then(r => r.json())
+            .then(data => {
+                const ul = document.getElementById('model-list');
+                data.models.filter(m => !m.name.includes('70b')).forEach(m => {
+                    const li = document.createElement('li');
+                    li.innerHTML = `<strong>${m.name}</strong> (${m.size}, ${m.ram} RAM) - ${m.description}`;
+                    ul.appendChild(li);
+                });
+            });
+    </script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Ollama Manager</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Ollama Model Manager</h1>
+        </header>
+        <div class="auth-box">
+            <div class="tabs">
+                <button class="tab active" onclick="showTab('login')">Login</button>
+                <button class="tab" onclick="showTab('register')">Register</button>
+            </div>
+            <form id="login-form" class="auth-form" onsubmit="handleLogin(event)">
+                <h2>Login</h2>
+                <input type="text" name="username" placeholder="Username" required>
+                <input type="password" name="password" placeholder="Password" required>
+                <button type="submit" class="btn btn-primary">Login</button>
+                <p id="login-error" class="error"></p>
+            </form>
+            <form id="register-form" class="auth-form hidden" onsubmit="handleRegister(event)">
+                <h2>Register</h2>
+                <input type="text" name="username" placeholder="Username" required>
+                <input type="email" name="email" placeholder="Email" required>
+                <input type="password" name="password" placeholder="Password" required>
+                <button type="submit" class="btn btn-primary">Register</button>
+                <p id="register-error" class="error"></p>
+            </form>
+        </div>
+    </div>
+    <script>
+        function showTab(name) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.auth-form').forEach(f => f.classList.add('hidden'));
+            document.querySelector(`.tab[onclick*="${name}"]`).classList.add('active');
+            document.getElementById(`${name}-form`).classList.remove('hidden');
+        }
+
+        async function handleLogin(e) {
+            e.preventDefault();
+            const fd = new FormData(e.target);
+            const res = await fetch('/api/login', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({username: fd.get('username'), password: fd.get('password')})
+            });
+            if (res.ok) {
+                const data = await res.json();
+                localStorage.setItem('token', data.access_token);
+                window.location.href = '/dashboard';
+            } else {
+                const err = await res.json();
+                document.getElementById('login-error').textContent = err.detail || 'Login failed';
+            }
+        }
+
+        async function handleRegister(e) {
+            e.preventDefault();
+            const fd = new FormData(e.target);
+            const res = await fetch('/api/register', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({username: fd.get('username'), email: fd.get('email'), password: fd.get('password')})
+            });
+            if (res.ok) {
+                document.getElementById('register-error').textContent = 'Registered! You can now login.';
+                document.getElementById('register-error').style.color = 'green';
+            } else {
+                const err = await res.json();
+                document.getElementById('register-error').textContent = err.detail || 'Registration failed';
+            }
+        }
+    </script>
+</body>
+</html>

templates/progress.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Download Progress - Ollama Manager</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Download Progress</h1>
+            <a href="/dashboard" class="btn btn-secondary">Back to Dashboard</a>
+        </header>
+
+        <div class="progress-container">
+            <div class="card">
+                <h2 id="model-name">Model: <span id="model-label"></span></h2>
+                <div class="progress-bar-wrapper">
+                    <div class="progress-bar" id="progress-bar"></div>
+                </div>
+                <p id="progress-percent" class="progress-text">0%</p>
+                <div class="progress-details">
+                    <p><strong>Status:</strong> <span id="status-text">Pending</span></p>
+                    <p><strong>Step:</strong> <span id="step-text">Waiting...</span></p>
+                    <p><strong>Downloaded:</strong> <span id="downloaded-text">0 MB</span> / <span id="total-text">0 MB</span></p>
+                    <p><strong>Speed:</strong> <span id="speed-text">0</span> KB/s</p>
+                    <p><strong>ETA:</strong> <span id="eta-text">--</span></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const sessionId = '{{ session_id }}';
+        const token = localStorage.getItem('token');
+        if (!token) window.location.href = '/login';
+
+        // Load session info
+        fetch(`/api/download-sessions/${sessionId}`, {
+            headers: {'Authorization': `Bearer ${token}`}
+        }).then(r => r.json()).then(data => {
+            document.getElementById('model-label').textContent = data.model_name || 'Unknown';
+        });
+
+        // WebSocket
+        const ws = new WebSocket(`ws://${window.location.host}/ws/${sessionId}`);
+
+        ws.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+
+            const progress = data.progress || 0;
+            document.getElementById('progress-bar').style.width = progress + '%';
+            document.getElementById('progress-percent').textContent = progress + '%';
+
+            if (data.status) document.getElementById('status-text').textContent = data.status;
+            if (data.current_step) document.getElementById('step-text').textContent = data.current_step;
+            if (data.downloaded_mb) document.getElementById('downloaded-text').textContent = data.downloaded_mb + ' MB';
+            if (data.total_size_mb) document.getElementById('total-text').textContent = data.total_size_mb + ' MB';
+            if (data.speed_kbps) document.getElementById('speed-text').textContent = data.speed_kbps;
+            if (data.eta_seconds !== undefined) {
+                const eta = data.eta_seconds;
+                if (eta <= 0) document.getElementById('eta-text').textContent = 'Done';
+                else if (eta < 60) document.getElementById('eta-text').textContent = eta + 's';
+                else document.getElementById('eta-text').textContent = Math.floor(eta / 60) + 'm ' + (eta % 60) + 's';
+            }
+
+            if (data.status === 'completed') {
+                document.getElementById('status-text').textContent = 'Completed';
+                document.getElementById('step-text').textContent = 'Done';
+            }
+        };
+
+        ws.onerror = function() {
+            document.getElementById('status-text').textContent = 'Connection lost';
+        };
+    </script>
+</body>
+</html>