Upload 2 files

app.py

@@ -1,69 +1,96 @@
 import os
-import json
+import re
 import uuid
-import time
 import threading
 from datetime import datetime, timedelta
-from flask import Flask, render_template, request, jsonify, session, redirect, url_for, send_from_directory
+from flask import Flask, render_template, request, jsonify, session, send_from_directory
 from flask_sqlalchemy import SQLAlchemy
 from werkzeug.security import generate_password_hash, check_password_hash
-import anthropic
+from werkzeug.middleware.proxy_fix import ProxyFix  # ← CRITICAL fix for HF Spaces
+
+# ── HuggingFace official SDK ─────────────────────────────────────────────────
+from huggingface_hub import InferenceClient
 
 app = Flask(__name__)
-app.secret_key = os.environ.get('SECRET_KEY', 'supersecretkey-change-in-production-123')
+
+# ── CRITICAL: Fix session cookies behind HF Spaces reverse proxy ──────────────
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1)
+
+app.secret_key = os.environ.get('SECRET_KEY', 'hf-spaces-secret-key-change-me-9182736455')
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///claudeai.db'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=30)
 app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
+app.config['SESSION_COOKIE_HTTPONLY'] = True
+app.config['SESSION_COOKIE_SECURE'] = False   # keep False for HF Spaces HTTP
 
-# Ensure output directory exists
 os.makedirs('outputs', exist_ok=True)
 os.makedirs('static', exist_ok=True)
 
 db = SQLAlchemy(app)
 
-# ─── Models ────────────────────────────────────────────────────────────────────
+# ── Available HuggingFace Models ─────────────────────────────────────────────
+HF_MODELS = {
+    "Qwen/Qwen2.5-72B-Instruct":            "Qwen 2.5 72B",
+    "meta-llama/Llama-3.3-70B-Instruct":    "Llama 3.3 70B",
+    "mistralai/Mistral-7B-Instruct-v0.3":   "Mistral 7B",
+    "deepseek-ai/DeepSeek-R1-Distill-Qwen-32B": "DeepSeek-R1 32B",
+}
+DEFAULT_MODEL = "Qwen/Qwen2.5-72B-Instruct"
+
+SYSTEM_PROMPT = """You are an expert AI assistant specializing in coding, reasoning, and problem-solving.
+You produce the highest quality, low-error code possible. When writing code:
+- Always use best practices and clean architecture
+- Include error handling and edge cases
+- Add clear comments and documentation
+- Provide complete, runnable solutions
+- Explain your reasoning step by step
+You are running on a Hugging Face Spaces deployment powered by HuggingFace Inference API."""
+
+# ─── Models ──────────────────────────────────────────────────────────────────
 
 class User(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(80), unique=True, nullable=False)
-    email = db.Column(db.String(120), unique=True, nullable=False)
+    id           = db.Column(db.Integer, primary_key=True)
+    username     = db.Column(db.String(80), unique=True, nullable=False)
+    email        = db.Column(db.String(120), unique=True, nullable=False)
     password_hash = db.Column(db.String(256), nullable=False)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    chats = db.relationship('Chat', backref='user', lazy=True, cascade='all, delete-orphan')
+    created_at   = db.Column(db.DateTime, default=datetime.utcnow)
+    chats        = db.relationship('Chat', backref='user', lazy=True, cascade='all, delete-orphan')
 
 class Chat(db.Model):
-    id = db.Column(db.String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    title = db.Column(db.String(200), default='New Chat')
+    id         = db.Column(db.String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
+    user_id    = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    title      = db.Column(db.String(200), default='New Chat')
+    model_used = db.Column(db.String(100), default=DEFAULT_MODEL)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
     updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    messages = db.relationship('Message', backref='chat', lazy=True, cascade='all, delete-orphan', order_by='Message.created_at')
+    messages   = db.relationship('Message', backref='chat', lazy=True,
+                                 cascade='all, delete-orphan', order_by='Message.created_at')
 
 class Message(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    chat_id = db.Column(db.String(36), db.ForeignKey('chat.id'), nullable=False)
-    role = db.Column(db.String(20), nullable=False)  # 'user' or 'assistant'
-    content = db.Column(db.Text, nullable=False)
+    id         = db.Column(db.Integer, primary_key=True)
+    chat_id    = db.Column(db.String(36), db.ForeignKey('chat.id'), nullable=False)
+    role       = db.Column(db.String(20), nullable=False)
+    content    = db.Column(db.Text, nullable=False)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
 
 class GeneratedFile(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    chat_id = db.Column(db.String(36), db.ForeignKey('chat.id'), nullable=True)
-    filename = db.Column(db.String(200), nullable=False)
-    filepath = db.Column(db.String(500), nullable=False)
-    file_type = db.Column(db.String(50), default='code')
+    id         = db.Column(db.Integer, primary_key=True)
+    user_id    = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    chat_id    = db.Column(db.String(36), db.ForeignKey('chat.id'), nullable=True)
+    filename   = db.Column(db.String(200), nullable=False)
+    filepath   = db.Column(db.String(500), nullable=False)
+    file_type  = db.Column(db.String(50), default='code')
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    user = db.relationship('User', backref='files')
+    user       = db.relationship('User', backref='files')
 
-# ─── Auth routes ────────────────────────────────────────────────────────────────
+# ─── Auth routes ─────────────────────────────────────────────────────────────
 
 @app.route('/api/register', methods=['POST'])
 def register():
-    data = request.json
+    data     = request.json
     username = data.get('username', '').strip()
-    email = data.get('email', '').strip().lower()
+    email    = data.get('email', '').strip().lower()
     password = data.get('password', '')
     if not username or not email or not password:
         return jsonify({'error': 'All fields required'}), 400
@@ -75,22 +102,22 @@ def register():
     db.session.add(user)
     db.session.commit()
     session.permanent = True
-    session['user_id'] = user.id
+    session['user_id']  = user.id
     session['username'] = user.username
     return jsonify({'success': True, 'username': user.username})
 
 @app.route('/api/login', methods=['POST'])
 def login():
-    data = request.json
+    data       = request.json
     identifier = data.get('identifier', '').strip()
-    password = data.get('password', '')
+    password   = data.get('password', '')
     user = User.query.filter(
         (User.username == identifier) | (User.email == identifier.lower())
     ).first()
     if not user or not check_password_hash(user.password_hash, password):
         return jsonify({'error': 'Invalid credentials'}), 401
     session.permanent = True
-    session['user_id'] = user.id
+    session['user_id']  = user.id
     session['username'] = user.username
     return jsonify({'success': True, 'username': user.username})
 
@@ -109,7 +136,13 @@ def me():
         return jsonify({'authenticated': False}), 401
     return jsonify({'authenticated': True, 'username': user.username, 'email': user.email})
 
-# ─── Chat routes ────────────────────────────────────────────────────────────────
+# ─── Models info route ───────────────────────────────────────────────────────
+
+@app.route('/api/models')
+def get_models():
+    return jsonify([{'id': k, 'name': v} for k, v in HF_MODELS.items()])
+
+# ─── Chat routes ─────────────────────────────────────────────────────────────
 
 @app.route('/api/chats', methods=['GET'])
 def get_chats():
@@ -117,8 +150,8 @@ def get_chats():
         return jsonify({'error': 'Unauthorized'}), 401
     chats = Chat.query.filter_by(user_id=session['user_id']).order_by(Chat.updated_at.desc()).all()
     return jsonify([{
-        'id': c.id,
-        'title': c.title,
+        'id': c.id, 'title': c.title,
+        'model_used': c.model_used,
         'created_at': c.created_at.isoformat(),
         'updated_at': c.updated_at.isoformat()
     } for c in chats])
@@ -127,10 +160,14 @@ def get_chats():
 def create_chat():
     if 'user_id' not in session:
         return jsonify({'error': 'Unauthorized'}), 401
-    chat = Chat(user_id=session['user_id'])
+    data  = request.json or {}
+    model = data.get('model', DEFAULT_MODEL)
+    if model not in HF_MODELS:
+        model = DEFAULT_MODEL
+    chat = Chat(user_id=session['user_id'], model_used=model)
     db.session.add(chat)
     db.session.commit()
-    return jsonify({'id': chat.id, 'title': chat.title})
+    return jsonify({'id': chat.id, 'title': chat.title, 'model_used': chat.model_used})
 
 @app.route('/api/chats/<chat_id>', methods=['GET'])
 def get_chat(chat_id):
@@ -139,8 +176,10 @@ def get_chat(chat_id):
     chat = Chat.query.filter_by(id=chat_id, user_id=session['user_id']).first()
     if not chat:
         return jsonify({'error': 'Not found'}), 404
-    messages = [{'role': m.role, 'content': m.content, 'created_at': m.created_at.isoformat()} for m in chat.messages]
-    return jsonify({'id': chat.id, 'title': chat.title, 'messages': messages})
+    messages = [{'role': m.role, 'content': m.content,
+                 'created_at': m.created_at.isoformat()} for m in chat.messages]
+    return jsonify({'id': chat.id, 'title': chat.title,
+                    'model_used': chat.model_used, 'messages': messages})
 
 @app.route('/api/chats/<chat_id>', methods=['DELETE'])
 def delete_chat(chat_id):
@@ -157,12 +196,18 @@ def delete_chat(chat_id):
 def send_message(chat_id):
     if 'user_id' not in session:
         return jsonify({'error': 'Unauthorized'}), 401
+
     chat = Chat.query.filter_by(id=chat_id, user_id=session['user_id']).first()
     if not chat:
         return jsonify({'error': 'Not found'}), 404
 
-    data = request.json
+    data         = request.json
     user_content = data.get('content', '').strip()
+    model_id     = data.get('model', chat.model_used or DEFAULT_MODEL)
+
+    if model_id not in HF_MODELS:
+        model_id = DEFAULT_MODEL
+
     if not user_content:
         return jsonify({'error': 'Empty message'}), 400
 
@@ -170,39 +215,39 @@ def send_message(chat_id):
     user_msg = Message(chat_id=chat_id, role='user', content=user_content)
     db.session.add(user_msg)
 
-    # Update chat title from first message
+    # Auto-title from first message
     if len(chat.messages) == 0:
-        title = user_content[:60] + ('…' if len(user_content) > 60 else '')
-        chat.title = title
+        chat.title = user_content[:60] + ('…' if len(user_content) > 60 else '')
 
+    chat.model_used = model_id
     db.session.commit()
 
     # Build message history for API
     history = [{'role': m.role, 'content': m.content} for m in chat.messages]
 
-    # Call Anthropic API
-    api_key = os.environ.get('ANTHROPIC_API_KEY', '')
-    if not api_key:
-        ai_response = "⚠️ ANTHROPIC_API_KEY not set. Please set your API key in the environment."
+    # ── Call HuggingFace Inference API ────────────────────────────────────────
+    hf_token = os.environ.get('HF_TOKEN', '')
+    if not hf_token:
+        ai_response = (
+            "⚠️ **HF_TOKEN not set.**\n\n"
+            "Please add your Hugging Face token:\n"
+            "1. Go to your Space → **Settings** → **Variables and secrets**\n"
+            "2. Add a new secret: `HF_TOKEN` = your token from https://huggingface.co/settings/tokens\n"
+            "3. Restart the Space."
+        )
     else:
         try:
-            client = anthropic.Anthropic(api_key=api_key)
-            response = client.messages.create(
-                model="claude-opus-4-6",  # Best model for coding & reasoning
+            client = InferenceClient(api_key=hf_token)
+            messages_payload = [{"role": "system", "content": SYSTEM_PROMPT}] + history
+            response = client.chat.completions.create(
+                model=model_id,
+                messages=messages_payload,
                 max_tokens=8192,
-                system="""You are Claude, an expert AI assistant specializing in coding, reasoning, and problem-solving. 
-You produce the highest quality, low-error code possible. When writing code:
-- Always use best practices and clean architecture
-- Include error handling and edge cases
-- Add clear comments and documentation
-- Provide complete, runnable solutions
-- Explain your reasoning step by step
-You are running on a Hugging Face Spaces deployment.""",
-                messages=history
+                temperature=0.7,
             )
-            ai_response = response.content[0].text
+            ai_response = response.choices[0].message.content
         except Exception as e:
-            ai_response = f"❌ API Error: {str(e)}"
+            ai_response = f"❌ **HuggingFace API Error:** `{str(e)}`"
 
     # Save assistant message
     ai_msg = Message(chat_id=chat_id, role='assistant', content=ai_response)
@@ -210,51 +255,56 @@ You are running on a Hugging Face Spaces deployment.""",
     chat.updated_at = datetime.utcnow()
     db.session.commit()
 
-    # Background: extract and save code files
-    threading.Thread(target=extract_and_save_code, args=(ai_response, chat_id, session['user_id']), daemon=True).start()
+    # Background: extract and save generated code files
+    uid = session['user_id']
+    threading.Thread(target=extract_and_save_code,
+                     args=(ai_response, chat_id, uid), daemon=True).start()
 
-    return jsonify({'role': 'assistant', 'content': ai_response})
+    return jsonify({'role': 'assistant', 'content': ai_response,
+                    'model': model_id, 'model_name': HF_MODELS.get(model_id, model_id)})
 
-# ─── File routes ────────────────────────────────────────────────────────────────
+# ─── File extraction ──────────────────────────────────────────────────────────
+
+EXT_MAP = {
+    'python': 'py', 'py': 'py', 'javascript': 'js', 'js': 'js',
+    'typescript': 'ts', 'ts': 'ts', 'html': 'html', 'css': 'css',
+    'java': 'java', 'cpp': 'cpp', 'c': 'c', 'go': 'go',
+    'rust': 'rs', 'bash': 'sh', 'sh': 'sh', 'sql': 'sql',
+    'json': 'json', 'yaml': 'yaml', 'xml': 'xml', 'php': 'php',
+    'ruby': 'rb', 'swift': 'swift', 'kotlin': 'kt', 'r': 'r',
+}
 
 def extract_and_save_code(content, chat_id, user_id):
-    """Extract code blocks from AI response and save as files."""
     with app.app_context():
-        import re
         pattern = r'```(\w+)?\n(.*?)```'
         matches = re.findall(pattern, content, re.DOTALL)
-        ext_map = {
-            'python': 'py', 'py': 'py', 'javascript': 'js', 'js': 'js',
-            'typescript': 'ts', 'ts': 'ts', 'html': 'html', 'css': 'css',
-            'java': 'java', 'cpp': 'cpp', 'c': 'c', 'go': 'go',
-            'rust': 'rs', 'bash': 'sh', 'sh': 'sh', 'sql': 'sql',
-            'json': 'json', 'yaml': 'yaml', 'xml': 'xml', 'php': 'php',
-            'ruby': 'rb', 'swift': 'swift', 'kotlin': 'kt', 'r': 'r'
-        }
         for i, (lang, code) in enumerate(matches):
             if not lang or len(code.strip()) < 10:
                 continue
-            ext = ext_map.get(lang.lower(), 'txt')
+            ext       = EXT_MAP.get(lang.lower(), 'txt')
             timestamp = datetime.utcnow().strftime('%Y%m%d_%H%M%S')
-            filename = f"code_{timestamp}_{i+1}.{ext}"
-            user_dir = os.path.join('outputs', str(user_id))
+            filename  = f"code_{timestamp}_{i+1}.{ext}"
+            user_dir  = os.path.join('outputs', str(user_id))
             os.makedirs(user_dir, exist_ok=True)
-            filepath = os.path.join(user_dir, filename)
+            filepath  = os.path.join(user_dir, filename)
             with open(filepath, 'w', encoding='utf-8') as f:
                 f.write(code.strip())
-            gf = GeneratedFile(
-                user_id=user_id, chat_id=chat_id,
-                filename=filename, filepath=filepath,
-                file_type=lang.lower() or 'code'
-            )
+            gf = GeneratedFile(user_id=user_id, chat_id=chat_id,
+                               filename=filename, filepath=filepath,
+                               file_type=lang.lower() or 'code')
             db.session.add(gf)
         db.session.commit()
 
+# ─── File routes ─────────────────────────────────────────────────────────────
+
 @app.route('/api/files')
 def get_files():
     if 'user_id' not in session:
         return jsonify({'error': 'Unauthorized'}), 401
-    files = GeneratedFile.query.filter_by(user_id=session['user_id']).order_by(GeneratedFile.created_at.desc()).limit(50).all()
+    files = (GeneratedFile.query
+             .filter_by(user_id=session['user_id'])
+             .order_by(GeneratedFile.created_at.desc())
+             .limit(50).all())
     return jsonify([{
         'id': f.id, 'filename': f.filename,
         'file_type': f.file_type, 'chat_id': f.chat_id,
@@ -271,16 +321,16 @@ def download_file(file_id):
     directory = os.path.abspath(os.path.dirname(gf.filepath))
     return send_from_directory(directory, os.path.basename(gf.filepath), as_attachment=True)
 
-# ─── Main page ──────────────────────────────────────────────────────────────────
+# ─── Main page ───────────────────────────────────────────────────────────────
 
 @app.route('/')
 def index():
     return render_template('index.html')
 
-# ─── Init DB ────────────────────────────────────────────────────────────────────
+# ─── Init DB ─────────────────────────────────────────────────────────────────
 
 with app.app_context():
     db.create_all()
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=False)
+    app.run(host='0.0.0.0', port=7860, debug=False)

index.html

@@ -0,0 +1,1051 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>AI Chat — HuggingFace Models</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<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>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg-base:    #0d0d0d;
+    --bg-sidebar: #111111;
+    --bg-card:    #181818;
+    --bg-input:   #1e1e1e;
+    --bg-hover:   #222222;
+    --bg-active:  #2a2a2a;
+    --border:     #2a2a2a;
+    --border-lt:  #333;
+    --text-pri:   #f0ede8;
+    --text-sec:   #8a8580;
+    --text-muted: #555;
+    --accent:     #FF9900;   /* HuggingFace orange */
+    --accent2:    #6366f1;   /* indigo highlight */
+    --accent-h:   #FFB347;
+    --accent-dim: rgba(255,153,0,0.12);
+    --accent-glow:rgba(255,153,0,0.28);
+    --success:    #4ade80;
+    --error:      #f87171;
+    --sidebar-w:  280px;
+    --radius:     12px;
+    --radius-sm:  8px;
+    --radius-lg:  16px;
+    --font:       'Sora', sans-serif;
+    --mono:       'JetBrains Mono', monospace;
+    --shadow:     0 8px 32px rgba(0,0,0,0.5);
+    --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
+  }
+  html, body { height: 100%; overflow: hidden; }
+  body {
+    font-family: var(--font);
+    background: var(--bg-base);
+    color: var(--text-pri);
+    font-size: 15px;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+  ::-webkit-scrollbar { width: 4px; height: 4px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 4px; }
+
+  /* ── Auth Overlay ── */
+  #auth-overlay {
+    position: fixed; inset: 0; z-index: 100;
+    background: var(--bg-base);
+    display: flex; align-items: center; justify-content: center;
+    padding: 20px;
+  }
+  .auth-box {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 48px 40px;
+    width: 100%; max-width: 420px;
+    box-shadow: var(--shadow);
+    animation: slideUp 0.4s cubic-bezier(0.16,1,0.3,1);
+  }
+  @keyframes slideUp {
+    from { opacity: 0; transform: translateY(24px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .auth-logo {
+    display: flex; align-items: center; gap: 12px;
+    margin-bottom: 8px;
+  }
+  .auth-logo-img { width: 38px; height: 38px; }
+  .auth-logo-text { font-size: 22px; font-weight: 700; color: var(--text-pri); }
+  .auth-subtitle { font-size: 13px; color: var(--text-sec); margin-bottom: 28px; }
+  .auth-tabs {
+    display: flex; gap: 4px;
+    background: var(--bg-input);
+    border-radius: var(--radius-sm);
+    padding: 4px; margin-bottom: 24px;
+  }
+  .auth-tab {
+    flex: 1; padding: 10px;
+    border: none; background: transparent;
+    color: var(--text-sec); font-family: var(--font);
+    font-size: 14px; font-weight: 500;
+    border-radius: 6px; cursor: pointer;
+    transition: all 0.2s;
+  }
+  .auth-tab.active {
+    background: var(--bg-card);
+    color: var(--text-pri);
+    box-shadow: var(--shadow-sm);
+  }
+  .auth-form { display: flex; flex-direction: column; gap: 14px; }
+  .auth-form.hidden { display: none; }
+  .field-group { display: flex; flex-direction: column; gap: 5px; }
+  .field-group label { font-size: 12px; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.05em; }
+  .field-group input {
+    background: var(--bg-input);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 12px 14px;
+    color: var(--text-pri);
+    font-family: var(--font); font-size: 14px;
+    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
+    width: 100%;
+  }
+  .field-group input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-dim);
+  }
+  .btn-primary {
+    background: var(--accent); color: #000;
+    border: none; border-radius: var(--radius-sm);
+    padding: 13px 20px; font-family: var(--font);
+    font-size: 15px; font-weight: 700; cursor: pointer;
+    transition: all 0.2s; margin-top: 4px;
+    letter-spacing: 0.01em;
+  }
+  .btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); }
+  .btn-primary:active { transform: translateY(0); }
+  .auth-error {
+    color: var(--error); font-size: 13px; text-align: center;
+    padding: 10px; background: rgba(248,113,113,0.1);
+    border-radius: var(--radius-sm); display: none;
+  }
+  .auth-error.show { display: block; }
+
+  /* ── App Layout ── */
+  #app { display: flex; height: 100vh; }
+  #app.hidden { display: none; }
+
+  /* ── Sidebar ── */
+  #sidebar {
+    width: var(--sidebar-w);
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column;
+    flex-shrink: 0;
+    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
+    z-index: 10; height: 100vh;
+  }
+  .sidebar-header {
+    padding: 18px 14px 12px;
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .sidebar-logo { display: flex; align-items: center; gap: 10px; }
+  .hf-logo { width: 26px; height: 26px; }
+  .sidebar-logo span { font-size: 15px; font-weight: 700; }
+  .btn-new-chat {
+    display: flex; align-items: center; gap: 6px;
+    background: var(--accent-dim);
+    border: 1px solid var(--accent-glow);
+    border-radius: var(--radius-sm);
+    color: var(--accent); font-family: var(--font);
+    font-size: 12px; font-weight: 700; padding: 7px 12px;
+    cursor: pointer; transition: all 0.2s; white-space: nowrap;
+  }
+  .btn-new-chat:hover { background: var(--accent); color: #000; }
+  .sidebar-section-label {
+    padding: 14px 14px 4px;
+    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
+    color: var(--text-muted); text-transform: uppercase;
+  }
+  .chat-list { flex: 1; overflow-y: auto; padding: 4px 6px; }
+  .chat-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 9px 10px; border-radius: var(--radius-sm);
+    cursor: pointer; transition: background 0.15s;
+    margin-bottom: 2px; position: relative;
+  }
+  .chat-item:hover { background: var(--bg-hover); }
+  .chat-item.active { background: var(--bg-active); }
+  .chat-item-icon { font-size: 13px; opacity: 0.5; flex-shrink: 0; }
+  .chat-item-info { flex: 1; min-width: 0; }
+  .chat-item-title {
+    font-size: 12.5px; color: var(--text-sec);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .chat-item.active .chat-item-title { color: var(--text-pri); }
+  .chat-item-model {
+    font-size: 10px; color: var(--text-muted); margin-top: 1px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .chat-item-del {
+    opacity: 0; background: none; border: none;
+    color: var(--text-muted); cursor: pointer; font-size: 15px;
+    padding: 2px 4px; border-radius: 4px; transition: all 0.15s; flex-shrink: 0;
+  }
+  .chat-item:hover .chat-item-del { opacity: 1; }
+  .chat-item-del:hover { color: var(--error); background: rgba(248,113,113,0.1); }
+  .sidebar-footer { border-top: 1px solid var(--border); padding: 14px; }
+  .user-card {
+    display: flex; align-items: center; gap: 10px;
+    padding: 10px 10px; border-radius: var(--radius-sm);
+    cursor: pointer; transition: background 0.15s;
+  }
+  .user-card:hover { background: var(--bg-hover); }
+  .user-avatar {
+    width: 32px; height: 32px; border-radius: 50%;
+    background: var(--accent); display: flex;
+    align-items: center; justify-content: center;
+    font-size: 13px; font-weight: 800; color: #000; flex-shrink: 0;
+  }
+  .user-info { flex: 1; min-width: 0; }
+  .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .user-plan { font-size: 10px; color: var(--text-muted); }
+  .btn-logout {
+    background: none; border: none; color: var(--text-muted);
+    font-size: 17px; cursor: pointer; padding: 4px;
+    border-radius: 4px; transition: color 0.15s; flex-shrink: 0;
+  }
+  .btn-logout:hover { color: var(--error); }
+  .files-btn {
+    display: flex; align-items: center; gap: 8px;
+    padding: 9px 10px; border-radius: var(--radius-sm);
+    font-size: 12px; color: var(--text-sec);
+    margin: 4px 6px; border: none; background: none;
+    font-family: var(--font); width: calc(100% - 12px); cursor: pointer;
+    transition: background 0.15s;
+  }
+  .files-btn:hover { background: var(--bg-hover); color: var(--text-pri); }
+
+  /* ── Main ── */
+  #main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
+
+  /* ── Topbar ── */
+  #topbar {
+    display: flex; align-items: center; gap: 10px;
+    padding: 12px 18px; border-bottom: 1px solid var(--border);
+    background: var(--bg-base); flex-shrink: 0;
+  }
+  #sidebar-toggle {
+    display: none; background: none; border: none;
+    color: var(--text-sec); cursor: pointer;
+    padding: 6px; border-radius: var(--radius-sm); font-size: 20px;
+    transition: all 0.15s;
+  }
+  #sidebar-toggle:hover { background: var(--bg-hover); color: var(--text-pri); }
+  .topbar-title { font-size: 14px; font-weight: 500; flex: 1; color: var(--text-sec); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .model-badge {
+    display: flex; align-items: center; gap: 6px;
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: 20px; padding: 5px 12px;
+    font-size: 11px; color: var(--text-sec); white-space: nowrap;
+  }
+  .model-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; flex-shrink: 0; }
+
+  /* ── Messages ── */
+  #messages-container { flex: 1; overflow-y: auto; padding: 0 0 16px; }
+  #messages { max-width: 760px; margin: 0 auto; padding: 24px 18px; }
+
+  /* ── Welcome ── */
+  #welcome {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; min-height: 60vh; text-align: center; gap: 18px;
+  }
+  .welcome-icon { font-size: 52px; animation: pulse 3s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
+  .welcome-title { font-size: 30px; font-weight: 700; }
+  .welcome-title span { color: var(--accent); }
+  .welcome-sub { color: var(--text-sec); font-size: 15px; max-width: 440px; line-height: 1.7; }
+  .welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
+  .chip {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: 20px; padding: 8px 16px; font-size: 13px;
+    color: var(--text-sec); cursor: pointer; transition: all 0.2s;
+  }
+  .chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
+
+  /* ── Message rows ── */
+  .message-row {
+    display: flex; gap: 14px; margin-bottom: 22px;
+    animation: msgIn 0.3s cubic-bezier(0.16,1,0.3,1);
+  }
+  @keyframes msgIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .message-row.user { flex-direction: row-reverse; }
+  .msg-avatar {
+    width: 30px; height: 30px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 2px;
+  }
+  .msg-avatar.user { background: var(--accent); color: #000; }
+  .msg-avatar.assistant {
+    background: var(--bg-card); border: 1px solid var(--border);
+    font-size: 15px;
+  }
+  .msg-body { flex: 1; min-width: 0; }
+  .msg-name { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
+  .message-row.user .msg-name { text-align: right; }
+  .msg-content {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 14px 18px;
+    font-size: 14.5px; line-height: 1.75; word-break: break-word;
+  }
+  .message-row.user .msg-content {
+    background: var(--accent-dim); border-color: var(--accent-glow);
+  }
+  .msg-content p { margin: 0 0 10px; }
+  .msg-content p:last-child { margin-bottom: 0; }
+  .msg-content h1,.msg-content h2,.msg-content h3 { margin: 14px 0 6px; font-weight: 600; }
+  .msg-content ul,.msg-content ol { padding-left: 20px; margin: 6px 0; }
+  .msg-content li { margin-bottom: 3px; }
+  .msg-content pre {
+    background: #0d1117; border: 1px solid var(--border);
+    border-radius: var(--radius-sm); overflow-x: auto; margin: 10px 0;
+    position: relative;
+  }
+  .msg-content pre code {
+    font-family: var(--mono); font-size: 13px; padding: 14px 18px; display: block;
+  }
+  .msg-content code:not(pre code) {
+    font-family: var(--mono); font-size: 13px;
+    background: var(--bg-input); border: 1px solid var(--border);
+    border-radius: 4px; padding: 2px 6px; color: var(--accent);
+  }
+  .copy-btn {
+    position: absolute; top: 8px; right: 8px;
+    background: var(--bg-hover); border: 1px solid var(--border);
+    border-radius: 6px; color: var(--text-muted); font-family: var(--font);
+    font-size: 11px; padding: 4px 10px; cursor: pointer; transition: all 0.15s;
+  }
+  .copy-btn:hover { background: var(--bg-active); color: var(--text-pri); }
+
+  /* ── Typing ── */
+  .typing-row { display: flex; gap: 14px; margin-bottom: 22px; }
+  .typing-dots {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 14px 18px;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .typing-dot {
+    width: 7px; height: 7px; background: var(--text-muted);
+    border-radius: 50%; animation: typingBounce 1.2s ease-in-out infinite;
+  }
+  .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+  .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+  @keyframes typingBounce {
+    0%,60%,100% { transform: translateY(0); opacity: 0.4; }
+    30% { transform: translateY(-8px); opacity: 1; }
+  }
+
+  /* ── Input area ── */
+  #input-area {
+    border-top: 1px solid var(--border);
+    padding: 14px 18px 18px;
+    background: var(--bg-base); flex-shrink: 0;
+  }
+  .input-box {
+    max-width: 760px; margin: 0 auto;
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius-lg); padding: 4px 8px 8px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .input-box:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-dim);
+  }
+  #msg-input {
+    width: 100%; min-height: 52px; max-height: 200px;
+    background: transparent; border: none; outline: none;
+    resize: none; color: var(--text-pri);
+    font-family: var(--font); font-size: 15px; line-height: 1.6;
+    padding: 12px 12px 4px; overflow-y: auto;
+  }
+  #msg-input::placeholder { color: var(--text-muted); }
+  .input-toolbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 6px 2px; gap: 8px;
+  }
+  .input-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+  .model-select {
+    background: var(--bg-input); border: 1px solid var(--border);
+    color: var(--text-sec); font-family: var(--font); font-size: 12px;
+    padding: 5px 10px; border-radius: 20px; cursor: pointer; outline: none;
+    max-width: 180px;
+  }
+  .model-select:focus { border-color: var(--accent); }
+  #send-btn {
+    background: var(--accent); border: none; color: #000;
+    width: 36px; height: 36px; border-radius: 10px;
+    cursor: pointer; font-size: 18px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.2s; flex-shrink: 0;
+  }
+  #send-btn:hover { background: var(--accent-h); transform: scale(1.05); }
+  #send-btn:disabled { background: var(--bg-input); cursor: not-allowed; transform: none; color: var(--text-muted); }
+  .input-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 8px; }
+
+  /* ── Files modal ── */
+  #files-modal {
+    position: fixed; inset: 0; z-index: 50;
+    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
+    display: flex; align-items: center; justify-content: center; padding: 20px;
+  }
+  #files-modal.hidden { display: none; }
+  .files-panel {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius-lg); width: 100%; max-width: 540px;
+    max-height: 80vh; display: flex; flex-direction: column;
+    box-shadow: var(--shadow); animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1);
+  }
+  .files-panel-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 22px; border-bottom: 1px solid var(--border);
+  }
+  .files-panel-header h3 { font-size: 16px; font-weight: 600; }
+  .btn-close {
+    background: none; border: none; color: var(--text-muted);
+    font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px; transition: all 0.15s;
+  }
+  .btn-close:hover { background: var(--bg-hover); color: var(--text-pri); }
+  .files-list { flex: 1; overflow-y: auto; padding: 10px; }
+  .file-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 10px 14px; border-radius: var(--radius-sm);
+    border: 1px solid var(--border); margin-bottom: 6px; transition: background 0.15s;
+  }
+  .file-item:hover { background: var(--bg-hover); }
+  .file-icon {
+    width: 34px; height: 34px; border-radius: var(--radius-sm);
+    background: var(--accent-dim); border: 1px solid var(--accent-glow);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; flex-shrink: 0;
+  }
+  .file-info { flex: 1; min-width: 0; }
+  .file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .file-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
+  .btn-dl {
+    background: var(--accent-dim); border: 1px solid var(--accent-glow);
+    color: var(--accent); font-family: var(--font);
+    font-size: 11px; padding: 5px 12px; border-radius: 20px;
+    cursor: pointer; transition: all 0.2s; white-space: nowrap;
+  }
+  .btn-dl:hover { background: var(--accent); color: #000; }
+  .empty-files { text-align: center; padding: 36px; color: var(--text-muted); font-size: 13px; line-height: 1.8; }
+
+  /* ── Sidebar mobile overlay ── */
+  #sidebar-overlay {
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,0.6); z-index: 9;
+  }
+
+  /* ── Toast ── */
+  #toast {
+    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: 10px 20px;
+    font-size: 13px; opacity: 0; pointer-events: none;
+    transition: all 0.3s; z-index: 200; white-space: nowrap;
+    box-shadow: var(--shadow);
+  }
+  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+  /* ── Responsive ── */
+  @media (max-width: 768px) {
+    #sidebar {
+      position: fixed; left: 0; top: 0; bottom: 0;
+      transform: translateX(-100%); z-index: 20;
+    }
+    #sidebar.open { transform: translateX(0); }
+    #sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
+    #sidebar-overlay.show { opacity: 1; pointer-events: all; }
+    #sidebar-toggle { display: flex !important; }
+    .auth-box { padding: 28px 22px; }
+    .welcome-title { font-size: 24px; }
+    #topbar { padding: 10px 14px; }
+    #messages { padding: 14px 10px; }
+    #input-area { padding: 10px 10px 14px; }
+    .msg-content { padding: 12px 14px; }
+  }
+  @media (min-width: 1400px) {
+    #messages, .input-box { max-width: 860px; }
+  }
+</style>
+</head>
+<body>
+
+<!-- Auth Overlay -->
+<div id="auth-overlay">
+  <div class="auth-box">
+    <div class="auth-logo">
+      <!-- HuggingFace logo SVG -->
+      <svg class="auth-logo-img" viewBox="0 0 95 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M47.5 0C21.3 0 0 19.7 0 44s21.3 44 47.5 44S95 68.3 95 44 73.7 0 47.5 0z" fill="#FF9900" opacity=".15"/>
+        <text x="50%" y="62%" dominant-baseline="middle" text-anchor="middle" font-size="52" font-family="serif">🤗</text>
+      </svg>
+      <span class="auth-logo-text">HF Chat</span>
+    </div>
+    <p class="auth-subtitle">Powered by HuggingFace Inference API</p>
+    <div class="auth-tabs">
+      <button class="auth-tab active" onclick="switchTab('login')">Sign In</button>
+      <button class="auth-tab" onclick="switchTab('register')">Create Account</button>
+    </div>
+    <div id="auth-error" class="auth-error"></div>
+    <div class="auth-form" id="login-form">
+      <div class="field-group">
+        <label>Email or Username</label>
+        <input type="text" id="login-id" placeholder="you@example.com" autocomplete="username"/>
+      </div>
+      <div class="field-group">
+        <label>Password</label>
+        <input type="password" id="login-pass" placeholder="••••••••" autocomplete="current-password"/>
+      </div>
+      <button class="btn-primary" onclick="doLogin()">Sign In →</button>
+    </div>
+    <div class="auth-form hidden" id="register-form">
+      <div class="field-group">
+        <label>Username</label>
+        <input type="text" id="reg-user" placeholder="yourusername" autocomplete="username"/>
+      </div>
+      <div class="field-group">
+        <label>Email</label>
+        <input type="email" id="reg-email" placeholder="you@example.com" autocomplete="email"/>
+      </div>
+      <div class="field-group">
+        <label>Password</label>
+        <input type="password" id="reg-pass" placeholder="Create a strong password" autocomplete="new-password"/>
+      </div>
+      <button class="btn-primary" onclick="doRegister()">Create Account →</button>
+    </div>
+  </div>
+</div>
+
+<!-- Mobile sidebar overlay -->
+<div id="sidebar-overlay" onclick="closeSidebar()"></div>
+
+<!-- Main App -->
+<div id="app" class="hidden">
+  <!-- Sidebar -->
+  <aside id="sidebar">
+    <div class="sidebar-header">
+      <div class="sidebar-logo">
+        <span style="font-size:22px">🤗</span>
+        <span>HF Chat</span>
+      </div>
+      <button class="btn-new-chat" onclick="newChat()">＋ New</button>
+    </div>
+    <div class="sidebar-section-label">Recent Chats</div>
+    <div class="chat-list" id="chat-list"></div>
+    <button class="files-btn" onclick="openFilesModal()">📁 Generated Files</button>
+    <div class="sidebar-footer">
+      <div class="user-card">
+        <div class="user-avatar" id="user-avatar">?</div>
+        <div class="user-info">
+          <div class="user-name" id="user-name-display">Loading…</div>
+          <div class="user-plan" id="user-plan-display">HuggingFace Models</div>
+        </div>
+        <button class="btn-logout" onclick="doLogout(event)" title="Logout">⎋</button>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main content -->
+  <div id="main">
+    <div id="topbar">
+      <button id="sidebar-toggle" onclick="toggleSidebar()" style="display:none">☰</button>
+      <div class="topbar-title" id="chat-title">New Chat</div>
+      <div class="model-badge">
+        <div class="model-dot"></div>
+        <span id="topbar-model-name">Qwen 2.5 72B</span>
+      </div>
+    </div>
+
+    <div id="messages-container">
+      <div id="messages">
+        <div id="welcome">
+          <div class="welcome-icon">🤗</div>
+          <div class="welcome-title">Hello! I'm <span>HF Chat</span></div>
+          <div class="welcome-sub">Powered by HuggingFace's best open-source models. Ask me anything — I specialize in coding, reasoning, and problem-solving.</div>
+          <div class="welcome-chips">
+            <div class="chip" onclick="useChip(this)">🧑‍💻 Write Python code</div>
+            <div class="chip" onclick="useChip(this)">🔍 Debug my code</div>
+            <div class="chip" onclick="useChip(this)">🏗️ Design system architecture</div>
+            <div class="chip" onclick="useChip(this)">📖 Explain a concept</div>
+            <div class="chip" onclick="useChip(this)">⚡ Optimize performance</div>
+            <div class="chip" onclick="useChip(this)">🌐 Build a Flask app</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="input-area">
+      <div class="input-box">
+        <textarea id="msg-input" placeholder="Message HF Chat…" rows="1"></textarea>
+        <div class="input-toolbar">
+          <div class="input-left">
+            <select class="model-select" id="model-select" onchange="onModelChange()">
+              <option value="Qwen/Qwen2.5-72B-Instruct">🧠 Qwen 2.5 72B</option>
+              <option value="meta-llama/Llama-3.3-70B-Instruct">🦙 Llama 3.3 70B</option>
+              <option value="mistralai/Mistral-7B-Instruct-v0.3">⚡ Mistral 7B (Fast)</option>
+              <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-32B">🔍 DeepSeek-R1 32B</option>
+            </select>
+          </div>
+          <button id="send-btn" onclick="sendMessage()" disabled title="Send (Enter)">↑</button>
+        </div>
+      </div>
+      <div class="input-hint">AI can make mistakes. Always verify important information.</div>
+    </div>
+  </div>
+</div>
+
+<!-- Files Modal -->
+<div id="files-modal" class="hidden">
+  <div class="files-panel">
+    <div class="files-panel-header">
+      <h3>📁 Generated Files</h3>
+      <button class="btn-close" onclick="closeFilesModal()">✕</button>
+    </div>
+    <div class="files-list" id="files-list">
+      <div class="empty-files">No files yet.<br>Ask the AI to write some code!</div>
+    </div>
+  </div>
+</div>
+
+<div id="toast"></div>
+
+<script>
+// ─── CRITICAL FIX: All API calls use credentials:'include' ────────────────────
+// This ensures session cookies are always sent, fixing the "Unauthorized" error
+// that occurs on HuggingFace Spaces behind a reverse proxy.
+function apiFetch(url, opts = {}) {
+  return fetch(url, { ...opts, credentials: 'include' });
+}
+
+// ─── State ────────────────────────────────────────────────────────────────────
+let currentChatId = null;
+let username      = '';
+let isLoading     = false;
+
+const MODEL_NAMES = {
+  'Qwen/Qwen2.5-72B-Instruct':           'Qwen 2.5 72B',
+  'meta-llama/Llama-3.3-70B-Instruct':   'Llama 3.3 70B',
+  'mistralai/Mistral-7B-Instruct-v0.3':  'Mistral 7B',
+  'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B': 'DeepSeek-R1 32B',
+};
+
+// ─── Init ─────────────────────────────────────────────────────────────────────
+window.addEventListener('load', init);
+
+async function init() {
+  try {
+    const res = await apiFetch('/api/me');
+    if (res.ok) {
+      const data = await res.json();
+      if (data.authenticated) {
+        username = data.username;
+        showApp();
+      }
+    }
+  } catch(e) { /* not authenticated */ }
+  setupInputHandlers();
+}
+
+function showApp() {
+  document.getElementById('auth-overlay').style.display = 'none';
+  document.getElementById('app').classList.remove('hidden');
+  document.getElementById('user-name-display').textContent = username;
+  document.getElementById('user-avatar').textContent = username.charAt(0).toUpperCase();
+  document.getElementById('user-plan-display').textContent = 'HuggingFace Models · Free';
+  loadChats();
+  if (window.innerWidth <= 768) {
+    document.getElementById('sidebar-toggle').style.display = 'flex';
+  }
+}
+
+// ─── Auth ─────────────────────────────────────────────────────────────────────
+function switchTab(tab) {
+  document.querySelectorAll('.auth-tab').forEach((t, i) =>
+    t.classList.toggle('active', tab === 'login' ? i === 0 : i === 1));
+  document.getElementById('login-form').classList.toggle('hidden', tab !== 'login');
+  document.getElementById('register-form').classList.toggle('hidden', tab !== 'register');
+  document.getElementById('auth-error').classList.remove('show');
+}
+
+function showAuthError(msg) {
+  const el = document.getElementById('auth-error');
+  el.textContent = msg; el.classList.add('show');
+}
+
+async function doLogin() {
+  const id   = document.getElementById('login-id').value.trim();
+  const pass = document.getElementById('login-pass').value;
+  if (!id || !pass) return showAuthError('Please fill all fields');
+  const res = await apiFetch('/api/login', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({identifier: id, password: pass})
+  });
+  const data = await res.json();
+  if (res.ok) { username = data.username; showApp(); }
+  else showAuthError(data.error || 'Login failed');
+}
+
+async function doRegister() {
+  const user  = document.getElementById('reg-user').value.trim();
+  const email = document.getElementById('reg-email').value.trim();
+  const pass  = document.getElementById('reg-pass').value;
+  if (!user || !email || !pass) return showAuthError('Please fill all fields');
+  const res = await apiFetch('/api/register', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({username: user, email: email, password: pass})
+  });
+  const data = await res.json();
+  if (res.ok) { username = data.username; showApp(); }
+  else showAuthError(data.error || 'Registration failed');
+}
+
+async function doLogout(e) {
+  e.stopPropagation();
+  await apiFetch('/api/logout', {method: 'POST'});
+  location.reload();
+}
+
+// Enter key for auth forms
+document.addEventListener('keydown', e => {
+  if (e.key === 'Enter') {
+    const overlay = document.getElementById('auth-overlay');
+    if (overlay.style.display !== 'none') {
+      const loginVisible = !document.getElementById('login-form').classList.contains('hidden');
+      if (loginVisible) doLogin(); else doRegister();
+    }
+  }
+});
+
+// ─── Model selector ───────────────────────────────────────────────────────────
+function onModelChange() {
+  const sel = document.getElementById('model-select');
+  const modelId = sel.value;
+  document.getElementById('topbar-model-name').textContent = MODEL_NAMES[modelId] || modelId;
+}
+
+// ─── Chats ────────────────────────────────────────────────────────────────────
+async function loadChats() {
+  const res = await apiFetch('/api/chats');
+  if (!res.ok) return;
+  const chats = await res.json();
+  const list  = document.getElementById('chat-list');
+  list.innerHTML = '';
+  chats.forEach(c => {
+    const el  = document.createElement('div');
+    el.className = 'chat-item' + (c.id === currentChatId ? ' active' : '');
+    el.dataset.id = c.id;
+    const shortModel = MODEL_NAMES[c.model_used] || c.model_used || '';
+    el.innerHTML = `
+      <span class="chat-item-icon">💬</span>
+      <div class="chat-item-info">
+        <div class="chat-item-title">${escHtml(c.title)}</div>
+        ${shortModel ? `<div class="chat-item-model">${escHtml(shortModel)}</div>` : ''}
+      </div>
+      <button class="chat-item-del" onclick="deleteChat(event,'${c.id}')" title="Delete">✕</button>`;
+    el.addEventListener('click', () => openChat(c.id));
+    list.appendChild(el);
+  });
+}
+
+async function newChat() {
+  currentChatId = null;
+  document.getElementById('messages').innerHTML = `
+    <div id="welcome">
+      <div class="welcome-icon">🤗</div>
+      <div class="welcome-title">New Conversation</div>
+      <div class="welcome-sub">Choose a model below and start chatting!</div>
+      <div class="welcome-chips">
+        <div class="chip" onclick="useChip(this)">🧑‍💻 Write Python code</div>
+        <div class="chip" onclick="useChip(this)">🔍 Debug my code</div>
+        <div class="chip" onclick="useChip(this)">🏗️ Design system architecture</div>
+        <div class="chip" onclick="useChip(this)">📖 Explain a concept</div>
+      </div>
+    </div>`;
+  document.getElementById('chat-title').textContent = 'New Chat';
+  document.getElementById('topbar-model-name').textContent =
+    MODEL_NAMES[document.getElementById('model-select').value] || 'Qwen 2.5 72B';
+  loadChats();
+  closeSidebar();
+}
+
+async function openChat(chatId) {
+  currentChatId = chatId;
+  const res = await apiFetch(`/api/chats/${chatId}`);
+  if (!res.ok) return;
+  const chat = await res.json();
+  document.getElementById('chat-title').textContent = chat.title;
+  if (chat.model_used) {
+    document.getElementById('model-select').value = chat.model_used;
+    document.getElementById('topbar-model-name').textContent =
+      MODEL_NAMES[chat.model_used] || chat.model_used;
+  }
+  const msgs = document.getElementById('messages');
+  msgs.innerHTML = '';
+  chat.messages.forEach(m => appendMessage(m.role, m.content, false));
+  msgs.scrollTop = msgs.scrollHeight;
+  loadChats();
+  closeSidebar();
+}
+
+async function deleteChat(e, chatId) {
+  e.stopPropagation();
+  await apiFetch(`/api/chats/${chatId}`, {method: 'DELETE'});
+  if (currentChatId === chatId) {
+    currentChatId = null;
+    document.getElementById('messages').innerHTML =
+      '<div style="color:var(--text-muted);text-align:center;padding:60px">Select or start a chat</div>';
+    document.getElementById('chat-title').textContent = 'New Chat';
+  }
+  loadChats();
+}
+
+// ─── Send message ─────────────────────────────────────────────────────────────
+function setupInputHandlers() {
+  const inp = document.getElementById('msg-input');
+  const btn = document.getElementById('send-btn');
+  inp.addEventListener('input', () => {
+    btn.disabled = !inp.value.trim() || isLoading;
+    inp.style.height = 'auto';
+    inp.style.height = Math.min(inp.scrollHeight, 200) + 'px';
+  });
+  inp.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault(); sendMessage();
+    }
+  });
+}
+
+async function sendMessage() {
+  const inp     = document.getElementById('msg-input');
+  const content = inp.value.trim();
+  if (!content || isLoading) return;
+
+  const modelId = document.getElementById('model-select').value;
+
+  // Create chat if needed
+  if (!currentChatId) {
+    const res  = await apiFetch('/api/chats', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({model: modelId})
+    });
+    const chat = await res.json();
+    currentChatId = chat.id;
+  }
+
+  // Remove welcome
+  const welcome = document.getElementById('welcome');
+  if (welcome) welcome.remove();
+
+  inp.value = ''; inp.style.height = 'auto';
+  document.getElementById('send-btn').disabled = true;
+  isLoading = true;
+
+  appendMessage('user', content, true);
+  const typingId = showTyping();
+
+  try {
+    const res = await apiFetch(`/api/chats/${currentChatId}/messages`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({content, model: modelId})
+    });
+
+    removeTyping(typingId);
+    const data = await res.json();
+
+    if (res.ok) {
+      appendMessage('assistant', data.content, true);
+      // Update topbar model name if returned
+      if (data.model_name) {
+        document.getElementById('topbar-model-name').textContent = data.model_name;
+      }
+      loadChats();
+      const chatRes = await apiFetch(`/api/chats/${currentChatId}`);
+      if (chatRes.ok) {
+        const chat = await chatRes.json();
+        document.getElementById('chat-title').textContent = chat.title;
+      }
+    } else {
+      appendMessage('assistant', `❌ Error: ${data.error}`, true);
+    }
+  } catch(err) {
+    removeTyping(typingId);
+    appendMessage('assistant', `❌ Network error: ${err.message}`, true);
+  }
+
+  isLoading = false;
+  document.getElementById('send-btn').disabled = false;
+}
+
+function appendMessage(role, content, animate) {
+  const msgs    = document.getElementById('messages');
+  const row     = document.createElement('div');
+  row.className = 'message-row ' + role;
+  const initials = role === 'user' ? (username.charAt(0).toUpperCase() || 'U') : '🤗';
+  const name     = role === 'user' ? username : 'HF Chat';
+
+  let rendered;
+  try { rendered = marked.parse(content); }
+  catch(e) { rendered = `<p>${escHtml(content)}</p>`; }
+
+  row.innerHTML = `
+    <div class="msg-avatar ${role}">${initials}</div>
+    <div class="msg-body">
+      <div class="msg-name">${name}</div>
+      <div class="msg-content">${rendered}</div>
+    </div>`;
+
+  if (!animate) row.style.animation = 'none';
+  msgs.appendChild(row);
+
+  // Copy buttons for code
+  row.querySelectorAll('pre').forEach(pre => {
+    const btn     = document.createElement('button');
+    btn.className = 'copy-btn';
+    btn.textContent = 'Copy';
+    btn.onclick = () => {
+      navigator.clipboard.writeText(pre.querySelector('code')?.textContent || pre.textContent);
+      btn.textContent = 'Copied!';
+      setTimeout(() => btn.textContent = 'Copy', 2000);
+    };
+    pre.appendChild(btn);
+  });
+
+  // Syntax highlighting
+  row.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el));
+  msgs.scrollTop = msgs.scrollHeight;
+}
+
+function showTyping() {
+  const id   = 'typing-' + Date.now();
+  const msgs = document.getElementById('messages');
+  const row  = document.createElement('div');
+  row.className = 'typing-row'; row.id = id;
+  row.innerHTML = `
+    <div class="msg-avatar assistant">🤗</div>
+    <div class="typing-dots">
+      <div class="typing-dot"></div>
+      <div class="typing-dot"></div>
+      <div class="typing-dot"></div>
+    </div>`;
+  msgs.appendChild(row);
+  msgs.scrollTop = msgs.scrollHeight;
+  return id;
+}
+
+function removeTyping(id) {
+  const el = document.getElementById(id);
+  if (el) el.remove();
+}
+
+function useChip(el) {
+  const inp = document.getElementById('msg-input');
+  inp.value = el.textContent.replace(/^[^\s]+\s/, '');
+  document.getElementById('send-btn').disabled = false;
+  inp.focus();
+  sendMessage();
+}
+
+// ─── Files modal ──────────────────────────────────────────────────────────────
+async function openFilesModal() {
+  document.getElementById('files-modal').classList.remove('hidden');
+  const res   = await apiFetch('/api/files');
+  const files = res.ok ? await res.json() : [];
+  const list  = document.getElementById('files-list');
+  if (!files.length) {
+    list.innerHTML = '<div class="empty-files">No files generated yet.<br>Ask the AI to write some code!</div>';
+    return;
+  }
+  const extIcons = {py:'🐍',js:'🟨',ts:'🔷',html:'🌐',css:'🎨',sh:'⚡',sql:'🗄️',json:'📋',go:'🔵',rs:'🦀',java:'☕'};
+  list.innerHTML = files.map(f => {
+    const ext  = f.filename.split('.').pop().toLowerCase();
+    const icon = extIcons[ext] || '📄';
+    const date = new Date(f.created_at).toLocaleDateString();
+    return `<div class="file-item">
+      <div class="file-icon">${icon}</div>
+      <div class="file-info">
+        <div class="file-name">${escHtml(f.filename)}</div>
+        <div class="file-meta">${f.file_type} · ${date}</div>
+      </div>
+      <button class="btn-dl" onclick="downloadFile(${f.id},'${escHtml(f.filename)}')">⬇ Download</button>
+    </div>`;
+  }).join('');
+}
+
+function closeFilesModal() {
+  document.getElementById('files-modal').classList.add('hidden');
+}
+
+async function downloadFile(id, filename) {
+  const a = document.createElement('a');
+  a.href = `/api/files/${id}/download`;
+  a.download = filename;
+  document.body.appendChild(a); a.click(); document.body.removeChild(a);
+  showToast('Downloading ' + filename);
+}
+
+// ─── Sidebar ──────────────────────────────────────────────────────────────────
+function toggleSidebar() {
+  document.getElementById('sidebar').classList.toggle('open');
+  document.getElementById('sidebar-overlay').classList.toggle('show');
+}
+
+function closeSidebar() {
+  if (window.innerWidth > 768) return;
+  document.getElementById('sidebar').classList.remove('open');
+  document.getElementById('sidebar-overlay').classList.remove('show');
+}
+
+// ─── Utils ────────────────────────────────────────────────────────────────────
+function escHtml(s) {
+  return String(s)
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;')
+    .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+let toastTimer;
+function showToast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg; t.classList.add('show');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => t.classList.remove('show'), 2500);
+}
+
+window.addEventListener('resize', () => {
+  const toggle = document.getElementById('sidebar-toggle');
+  if (window.innerWidth > 768) {
+    toggle.style.display = 'none';
+    document.getElementById('sidebar').classList.remove('open');
+    document.getElementById('sidebar-overlay').classList.remove('show');
+  } else {
+    toggle.style.display = 'flex';
+  }
+});
+
+document.getElementById('files-modal').addEventListener('click', function(e) {
+  if (e.target === this) closeFilesModal();
+});
+</script>
+</body>
+</html>