Deploy TextAI v2 - Clean architecture

app.py

@@ -1,199 +1,1600 @@
 """
-TextAI v2.0
-Clean, Professional AI Chat Interface
+TextAI v2.3 - Full-Featured ChatGPT-Clone Interface
+Clean UI with dropdown navigation, Model Manager, Logs, File Manager, Settings
 """
+import os
+import sys
+import json
+import time
+import uuid
+import glob
+import logging
+from datetime import datetime
+from typing import Any, Dict, List, Optional, Tuple
+from collections import deque
+
 import gradio as gr
+import psutil
+import requests
 
-from core.config import VERSION, APP_TITLE
-from core.logger import logger
-from core.state import get_state
-from ui.theme import THEME_CSS, get_theme
-from ui.chat import build_chat_ui
-from ui.models import build_model_manager_ui
-from api import api_health, api_get_status
-
-
-def create_app():
-    """Create the Gradio application"""
-
-    # Initialize state on startup
-    state = get_state()
-    state.sync_with_filesystem()
-    logger.info("App", f"TextAI v{VERSION} starting")
-
-    # Gradio 6.0: theme/css moved to launch(), but we use Blocks() for structure
-    with gr.Blocks(title=APP_TITLE) as app:
-
-        with gr.Tabs() as main_tabs:
-
-            # ══════════════════════════════════════════════════════════
-            # TAB 1: CHAT
-            # ══════════════════════════════════════════════════════════
-            with gr.Tab("Chat", id="chat"):
-                chat_components = build_chat_ui()
-
-            # ══════════════════════════════════════════════════════════
-            # TAB 2: MODELS
-            # ══════════════════════════════════════════════════════════
-            with gr.Tab("Models", id="models"):
-                model_components = build_model_manager_ui()
-
-            # ══════════════════════════════════════════════════════════
-            # TAB 3: TOOLS
-            # ══════════════════════════════════════════════════════════
-            with gr.Tab("Tools", id="tools"):
-                with gr.Tabs():
-
-                    # System Info
-                    with gr.Tab("System"):
-                        gr.Markdown("### System Status")
-                        btn_status = gr.Button("Get Status", variant="primary")
-                        status_output = gr.JSON(label="Status")
-
-                        btn_status.click(
-                            lambda: __import__('json').loads(api_get_status()),
-                            outputs=[status_output]
-                        )
+# Optional backends (handled gracefully if missing)
+try:
+    from llama_cpp import Llama
+except ImportError:
+    Llama = None
 
-                    # Logs
-                    with gr.Tab("Logs"):
-                        gr.Markdown("### Application Logs")
-                        with gr.Row():
-                            log_level = gr.Dropdown(
-                                choices=["all", "INFO", "WARN", "ERROR", "EVENT"],
-                                value="all",
-                                label="Level"
-                            )
-                            log_limit = gr.Number(value=50, label="Limit")
-                            btn_refresh_logs = gr.Button("Refresh")
-                            btn_clear_logs = gr.Button("Clear", variant="stop")
-
-                        logs_display = gr.TextArea(
-                            label="",
-                            lines=20,
-                            interactive=False
-                        )
+try:
+    from huggingface_hub import InferenceClient, HfApi, list_models
+except ImportError:
+    InferenceClient = None
+    HfApi = None
+    list_models = None
 
-                        def get_logs(level, limit):
-                            from core.logger import logger as log
-                            logs = log.get_logs(
-                                level=level if level != "all" else None,
-                                limit=int(limit)
-                            )
-                            lines = []
-                            for l in reversed(logs):
-                                ts = l["timestamp"].split("T")[1][:8]
-                                lines.append(f"[{ts}] [{l['level']}] [{l['module']}] {l['message']}")
-                            return "\n".join(lines)
-
-                        def clear_logs(level):
-                            from core.logger import logger as log
-                            log.clear(level if level != "all" else None)
-                            return "Logs cleared"
-
-                        btn_refresh_logs.click(
-                            get_logs,
-                            inputs=[log_level, log_limit],
-                            outputs=[logs_display]
-                        )
 
-                        btn_clear_logs.click(
-                            clear_logs,
-                            inputs=[log_level],
-                            outputs=[logs_display]
+# ════════════════════════════════════════════════════════════════════════════════
+# CONFIGURATION
+# ════════════════════════════════════════════════════════════════════════════════
+APP_TITLE = "TextAI"
+VERSION = "2.3.0"
+
+DEFAULT_SYSTEM_PROMPT = "You are a helpful AI assistant. Be concise, accurate, and helpful."
+
+HF_TOKEN = os.getenv("HF_TOKEN", "")
+HF_MODEL = os.getenv("HF_MODEL", "meta-llama/Llama-3.1-8B-Instruct")
+
+OPENAI_BASE_URL = os.getenv("OPENAI_BASE_URL", "https://api.openai.com/v1")
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY", "")
+OPENAI_MODEL = os.getenv("OPENAI_MODEL", "gpt-4o-mini")
+
+LLAMA_GGUF_PATH = os.getenv("LLAMA_GGUF_PATH", "")
+
+EXPORT_FILENAME = "chat_export.json"
+LOG_DIR = "/tmp/textai_logs" if os.environ.get("SPACE_ID") else "./logs"
+DATA_DIR = "/tmp/textai_data" if os.environ.get("SPACE_ID") else "./data"
+
+# Ensure directories exist
+os.makedirs(LOG_DIR, exist_ok=True)
+os.makedirs(DATA_DIR, exist_ok=True)
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# LOGGING SYSTEM
+# ════════════════════════════════════════════════════════════════════════════════
+class LogCapture:
+    """Capture logs in memory for display"""
+    def __init__(self, max_lines: int = 500):
+        self.logs = deque(maxlen=max_lines)
+        self.log_file = os.path.join(LOG_DIR, f"textai_{datetime.now().strftime('%Y%m%d')}.log")
+
+    def add(self, level: str, message: str):
+        timestamp = datetime.now().strftime("%H:%M:%S")
+        entry = f"[{timestamp}] [{level}] {message}"
+        self.logs.append(entry)
+        # Also write to file
+        try:
+            with open(self.log_file, "a", encoding="utf-8") as f:
+                f.write(entry + "\n")
+        except Exception:
+            pass
+
+    def info(self, msg: str):
+        self.add("INFO", msg)
+
+    def error(self, msg: str):
+        self.add("ERROR", msg)
+
+    def warning(self, msg: str):
+        self.add("WARN", msg)
+
+    def get_logs(self, count: int = 100) -> str:
+        recent = list(self.logs)[-count:]
+        return "\n".join(recent) if recent else "No logs yet."
+
+    def clear(self):
+        self.logs.clear()
+
+
+LOG = LogCapture()
+LOG.info(f"TextAI v{VERSION} starting...")
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# STATE MANAGEMENT
+# ════════════════════════════════════════════════════════════════════════════════
+def _new_conv(title: str = "New chat") -> Dict[str, Any]:
+    return {
+        "id": str(uuid.uuid4()),
+        "title": title,
+        "messages": [],
+        "created": time.time(),
+        "updated": time.time(),
+    }
+
+
+def _default_state() -> Dict[str, Any]:
+    conv = _new_conv("New chat")
+    return {"active_id": conv["id"], "conversations": [conv]}
+
+
+def _get_conv(state: Dict[str, Any], conv_id: str) -> Dict[str, Any]:
+    for c in state["conversations"]:
+        if c["id"] == conv_id:
+            return c
+    conv = _new_conv("New chat")
+    state["conversations"].append(conv)
+    state["active_id"] = conv["id"]
+    return conv
+
+
+def _active_conv(state: Dict[str, Any]) -> Dict[str, Any]:
+    return _get_conv(state, state["active_id"])
+
+
+def _conv_choices(state: Dict[str, Any]) -> List[Tuple[str, str]]:
+    return [(c["title"].strip() or "Untitled", c["id"]) for c in state["conversations"]]
+
+
+def _touch(conv: Dict[str, Any]) -> None:
+    conv["updated"] = time.time()
+
+
+def _estimate_title(conv: Dict[str, Any]) -> str:
+    for m in conv["messages"]:
+        if m.get("role") == "user":
+            txt = str(m.get("content", "")).strip().splitlines()[0]
+            return (txt[:40] + "…") if len(txt) > 40 else (txt or "New chat")
+    return "New chat"
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# SYSTEM STATS & INFO
+# ════════════════════════════════════════════════════════════════════════════════
+def system_stats_md() -> str:
+    try:
+        cpu = psutil.cpu_percent(interval=0.05)
+        mem = psutil.virtual_memory()
+        return f"CPU {cpu:.0f}% · RAM {mem.percent:.0f}%"
+    except Exception:
+        return ""
+
+
+def get_system_info() -> Dict[str, Any]:
+    try:
+        mem = psutil.virtual_memory()
+        disk = psutil.disk_usage("/")
+        return {
+            "cpu_percent": psutil.cpu_percent(interval=0.1),
+            "ram_total_gb": round(mem.total / (1024**3), 2),
+            "ram_used_gb": round(mem.used / (1024**3), 2),
+            "ram_percent": mem.percent,
+            "disk_total_gb": round(disk.total / (1024**3), 2),
+            "disk_used_gb": round(disk.used / (1024**3), 2),
+            "disk_percent": disk.percent,
+            "platform": sys.platform,
+            "python_version": sys.version.split()[0],
+            "space_id": os.environ.get("SPACE_ID", "local"),
+            "backends": {
+                "llama_cpp": Llama is not None,
+                "huggingface": InferenceClient is not None,
+                "hf_api": HfApi is not None,
+            },
+            "env_vars": {
+                "HF_TOKEN": "set" if HF_TOKEN else "not set",
+                "OPENAI_API_KEY": "set" if OPENAI_API_KEY else "not set",
+                "LLAMA_GGUF_PATH": LLAMA_GGUF_PATH or "not set",
+            },
+            "directories": {
+                "log_dir": LOG_DIR,
+                "data_dir": DATA_DIR,
+            }
+        }
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# MODEL MANAGER - HuggingFace Hub Search
+# ════════════════════════════════════════════════════════════════════════════════
+def search_hf_models(query: str, task: str = "text-generation", limit: int = 20) -> List[Dict]:
+    """Search HuggingFace Hub for models"""
+    if not list_models:
+        LOG.warning("huggingface_hub not installed - model search unavailable")
+        return []
+
+    try:
+        LOG.info(f"Searching HF Hub: query='{query}', task='{task}'")
+        models = list_models(
+            search=query,
+            task=task if task != "all" else None,
+            sort="downloads",
+            direction=-1,
+            limit=limit,
+        )
+        results = []
+        for m in models:
+            results.append({
+                "id": m.id,
+                "downloads": getattr(m, "downloads", 0),
+                "likes": getattr(m, "likes", 0),
+                "task": getattr(m, "pipeline_tag", "unknown"),
+                "updated": str(getattr(m, "lastModified", ""))[:10],
+            })
+        LOG.info(f"Found {len(results)} models")
+        return results
+    except Exception as e:
+        LOG.error(f"Model search failed: {e}")
+        return []
+
+
+def format_model_results(results: List[Dict]) -> str:
+    """Format model results as markdown table"""
+    if not results:
+        return "No models found. Try a different search query."
+
+    lines = ["| Model ID | Downloads | Likes | Task |", "|----------|-----------|-------|------|"]
+    for r in results:
+        downloads = f"{r['downloads']:,}" if r['downloads'] else "N/A"
+        likes = f"{r['likes']:,}" if r['likes'] else "0"
+        lines.append(f"| `{r['id']}` | {downloads} | {likes} | {r['task']} |")
+    return "\n".join(lines)
+
+
+def search_models_ui(query: str, task: str) -> str:
+    """UI handler for model search"""
+    if not query.strip():
+        return "Enter a search query (e.g., 'llama', 'mistral', 'phi')"
+    results = search_hf_models(query, task)
+    return format_model_results(results)
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# FILE MANAGER
+# ════════════════════════════════════════════════════════════════════════════════
+def list_files(directory: str = None) -> List[Dict]:
+    """List files in a directory"""
+    if directory is None:
+        directory = DATA_DIR
+
+    try:
+        files = []
+        for item in os.listdir(directory):
+            path = os.path.join(directory, item)
+            stat = os.stat(path)
+            files.append({
+                "name": item,
+                "type": "dir" if os.path.isdir(path) else "file",
+                "size": stat.st_size if os.path.isfile(path) else 0,
+                "modified": datetime.fromtimestamp(stat.st_mtime).strftime("%Y-%m-%d %H:%M"),
+            })
+        return sorted(files, key=lambda x: (x["type"] != "dir", x["name"].lower()))
+    except Exception as e:
+        LOG.error(f"Failed to list files: {e}")
+        return []
+
+
+def format_file_list(files: List[Dict]) -> str:
+    """Format file list as markdown"""
+    if not files:
+        return "Directory is empty."
+
+    lines = ["| Name | Type | Size | Modified |", "|------|------|------|----------|"]
+    for f in files:
+        size = f"{f['size']:,} B" if f['type'] == 'file' else "-"
+        icon = "📁" if f['type'] == 'dir' else "📄"
+        lines.append(f"| {icon} {f['name']} | {f['type']} | {size} | {f['modified']} |")
+    return "\n".join(lines)
+
+
+def get_file_manager_view(path: str = "") -> Tuple[str, str]:
+    """Get file manager view for a path"""
+    if not path:
+        path = DATA_DIR
+
+    # Security: restrict to allowed directories
+    allowed_roots = [DATA_DIR, LOG_DIR, "/tmp"]
+    if not any(os.path.abspath(path).startswith(os.path.abspath(r)) for r in allowed_roots):
+        return DATA_DIR, "Access denied. Restricted to data/logs directories."
+
+    if not os.path.exists(path):
+        return DATA_DIR, "Path does not exist."
+
+    files = list_files(path)
+    return path, format_file_list(files)
+
+
+def read_file_content(filepath: str) -> str:
+    """Read file content (text files only)"""
+    # Security check
+    allowed_roots = [DATA_DIR, LOG_DIR, "/tmp"]
+    if not any(os.path.abspath(filepath).startswith(os.path.abspath(r)) for r in allowed_roots):
+        return "Access denied."
+
+    if not os.path.isfile(filepath):
+        return "Not a file."
+
+    # Check file size (limit to 100KB)
+    if os.path.getsize(filepath) > 100 * 1024:
+        return "File too large to display (>100KB)."
+
+    try:
+        with open(filepath, "r", encoding="utf-8", errors="replace") as f:
+            return f.read()
+    except Exception as e:
+        return f"Error reading file: {e}"
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# BACKENDS
+# ════════════════════════════════════════════════════════════════════════════════
+def call_openai_compat(
+    messages: List[Dict[str, str]],
+    temperature: float,
+    max_tokens: int,
+    model: str,
+    base_url: str,
+    api_key: str,
+) -> str:
+    if not api_key:
+        raise RuntimeError("Missing API key")
+
+    LOG.info(f"Calling OpenAI-compatible API: model={model}")
+    url = base_url.rstrip("/") + "/chat/completions"
+    headers = {"Content-Type": "application/json", "Authorization": f"Bearer {api_key}"}
+    payload = {
+        "model": model,
+        "messages": messages,
+        "temperature": float(temperature),
+        "max_tokens": int(max_tokens),
+        "stream": False,
+    }
+    r = requests.post(url, headers=headers, json=payload, timeout=90)
+    r.raise_for_status()
+    LOG.info("OpenAI API call successful")
+    return r.json()["choices"][0]["message"]["content"]
+
+
+def call_hf_inference(
+    messages: List[Dict[str, str]],
+    temperature: float,
+    max_tokens: int,
+    model: str,
+    token: str,
+) -> str:
+    if InferenceClient is None:
+        raise RuntimeError("huggingface_hub not installed")
+    if not token:
+        raise RuntimeError("Missing HF_TOKEN")
+
+    LOG.info(f"Calling HF Inference: model={model}")
+    client = InferenceClient(model=model, token=token)
+
+    sys_prompt = ""
+    turns = []
+    for m in messages:
+        if m["role"] == "system":
+            sys_prompt = m["content"]
+        elif m["role"] == "user":
+            turns.append(f"User: {m['content']}")
+        else:
+            turns.append(f"Assistant: {m['content']}")
+
+    prompt = ""
+    if sys_prompt:
+        prompt += f"System: {sys_prompt}\n"
+    prompt += "\n".join(turns) + "\nAssistant:"
+
+    out = client.text_generation(
+        prompt,
+        max_new_tokens=int(max_tokens),
+        temperature=float(temperature),
+        do_sample=True,
+        return_full_text=False,
+    )
+    LOG.info("HF Inference call successful")
+    return out
+
+
+_LLAMA_INSTANCE = None
+
+def call_llama_local(
+    messages: List[Dict[str, str]],
+    temperature: float,
+    max_tokens: int,
+) -> str:
+    global _LLAMA_INSTANCE
+
+    if Llama is None:
+        raise RuntimeError("llama-cpp-python not installed")
+    if not LLAMA_GGUF_PATH:
+        raise RuntimeError("Set LLAMA_GGUF_PATH environment variable")
+
+    LOG.info(f"Calling local llama.cpp: path={LLAMA_GGUF_PATH}")
+    if _LLAMA_INSTANCE is None:
+        LOG.info("Loading llama.cpp model...")
+        _LLAMA_INSTANCE = Llama(model_path=LLAMA_GGUF_PATH, n_ctx=4096, verbose=False)
+        LOG.info("Model loaded successfully")
+
+    sys_prompt = ""
+    turns = []
+    for m in messages:
+        if m["role"] == "system":
+            sys_prompt = m["content"]
+        elif m["role"] == "user":
+            turns.append(f"User: {m['content']}")
+        else:
+            turns.append(f"Assistant: {m['content']}")
+
+    prompt = (f"System: {sys_prompt}\n" if sys_prompt else "") + "\n".join(turns) + "\nAssistant:"
+
+    res = _LLAMA_INSTANCE(
+        prompt,
+        max_tokens=int(max_tokens),
+        temperature=float(temperature),
+        stop=["User:"],
+    )
+    LOG.info("llama.cpp call successful")
+    return res["choices"][0]["text"].strip()
+
+
+def call_demo_backend(messages: List[Dict[str, str]], *args, **kwargs) -> str:
+    last_user = ""
+    for m in reversed(messages):
+        if m["role"] == "user":
+            last_user = m["content"]
+            break
+    LOG.info("Using demo backend (echo mode)")
+    return f"(Demo mode) You said: {last_user}\n\nTo use real AI, configure a backend in Settings."
+
+
+def generate_response(
+    backend: str,
+    messages: List[Dict[str, str]],
+    temperature: float,
+    max_tokens: int,
+    openai_base_url: str,
+    openai_api_key: str,
+    openai_model: str,
+    hf_token: str,
+    hf_model: str,
+) -> str:
+    if backend == "OpenAI-compatible":
+        return call_openai_compat(messages, temperature, max_tokens, openai_model, openai_base_url, openai_api_key)
+    if backend == "HuggingFace Inference":
+        return call_hf_inference(messages, temperature, max_tokens, hf_model, hf_token)
+    if backend == "Local (llama.cpp)":
+        return call_llama_local(messages, temperature, max_tokens)
+    return call_demo_backend(messages)
+
+
+def pseudo_stream(text: str, chunk: int = 8, delay: float = 0.01):
+    for i in range(0, len(text), chunk):
+        yield text[:i + chunk]
+        time.sleep(delay)
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# UI EVENT HANDLERS - CHAT
+# ════════════════════════════════════════════════════════════════════════════════
+def ui_new_chat(state):
+    conv = _new_conv("New chat")
+    state["conversations"].insert(0, conv)
+    state["active_id"] = conv["id"]
+    LOG.info(f"Created new chat: {conv['id'][:8]}")
+    return state, _conv_choices(state), conv["id"], [], ""
+
+
+def ui_select_chat(state, conv_id):
+    if not conv_id:
+        return state, [], ""
+    state["active_id"] = conv_id
+    conv = _active_conv(state)
+    LOG.info(f"Switched to chat: {conv['title']}")
+    return state, conv["messages"], conv["title"]
+
+
+def ui_rename_chat(state, new_title):
+    conv = _active_conv(state)
+    old_title = conv["title"]
+    conv["title"] = (new_title or "").strip() or "New chat"
+    _touch(conv)
+    LOG.info(f"Renamed chat: '{old_title}' -> '{conv['title']}'")
+    return state, _conv_choices(state)
+
+
+def ui_delete_chat(state):
+    active = state["active_id"]
+    deleted_title = _active_conv(state)["title"]
+    state["conversations"] = [c for c in state["conversations"] if c["id"] != active]
+    if not state["conversations"]:
+        state = _default_state()
+    else:
+        state["active_id"] = state["conversations"][0]["id"]
+    conv = _active_conv(state)
+    LOG.info(f"Deleted chat: {deleted_title}")
+    return state, _conv_choices(state), conv["id"], conv["messages"], conv["title"]
+
+
+def ui_clear_chat(state):
+    conv = _active_conv(state)
+    conv["messages"] = []
+    _touch(conv)
+    LOG.info(f"Cleared chat: {conv['title']}")
+    return state, []
+
+
+def ui_add_user_message(state, user_input):
+    if not user_input or not user_input.strip():
+        return state, _active_conv(state)["messages"], ""
+
+    conv = _active_conv(state)
+    conv["messages"].append({"role": "user", "content": user_input.strip()})
+    _touch(conv)
+
+    if conv["title"] == "New chat":
+        conv["title"] = _estimate_title(conv)
+
+    LOG.info(f"User message added ({len(user_input)} chars)")
+    return state, conv["messages"], ""
+
+
+def ui_generate_response(
+    state, backend, system_prompt, temperature, max_tokens,
+    openai_base_url, openai_api_key, openai_model, hf_token, hf_model,
+):
+    conv = _active_conv(state)
+
+    api_messages = [{"role": "system", "content": system_prompt.strip() or DEFAULT_SYSTEM_PROMPT}]
+    for m in conv["messages"]:
+        api_messages.append({"role": m["role"], "content": str(m["content"])})
+
+    conv["messages"].append({"role": "assistant", "content": ""})
+    _touch(conv)
+
+    try:
+        full_response = generate_response(
+            backend=backend,
+            messages=api_messages,
+            temperature=temperature,
+            max_tokens=max_tokens,
+            openai_base_url=openai_base_url,
+            openai_api_key=openai_api_key,
+            openai_model=openai_model,
+            hf_token=hf_token,
+            hf_model=hf_model,
+        )
+    except Exception as e:
+        LOG.error(f"Generation failed: {e}")
+        full_response = f"Error: {e}"
+
+    for partial in pseudo_stream(full_response):
+        conv["messages"][-1]["content"] = partial
+        yield state, conv["messages"]
+
+
+def ui_regenerate(state):
+    conv = _active_conv(state)
+    if conv["messages"] and conv["messages"][-1].get("role") == "assistant":
+        conv["messages"].pop()
+        _touch(conv)
+        LOG.info("Regenerating last response")
+    return state, conv["messages"]
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# UI EVENT HANDLERS - EXPORT/IMPORT
+# ════════════════════════════════════════════════════════════════════════════════
+def ui_export(state):
+    path = os.path.join(DATA_DIR, EXPORT_FILENAME)
+    with open(path, "w", encoding="utf-8") as f:
+        json.dump(state, f, ensure_ascii=False, indent=2)
+    LOG.info(f"Exported chats to {path}")
+    return path
+
+
+def ui_import(state, file_obj):
+    if file_obj is None:
+        return state, _conv_choices(state), state["active_id"], _active_conv(state)["messages"], _active_conv(state)["title"]
+
+    try:
+        with open(file_obj.name, "r", encoding="utf-8") as f:
+            loaded = json.load(f)
+        if isinstance(loaded, dict) and "conversations" in loaded:
+            state = loaded
+            if not state.get("conversations"):
+                state = _default_state()
+            if not state.get("active_id"):
+                state["active_id"] = state["conversations"][0]["id"]
+            LOG.info(f"Imported {len(state['conversations'])} conversations")
+    except Exception as e:
+        LOG.error(f"Import failed: {e}")
+
+    conv = _active_conv(state)
+    return state, _conv_choices(state), conv["id"], conv["messages"], conv["title"]
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# VIEW SWITCHING
+# ════════════════════════════════════════════════════════════════════════════════
+def switch_view(view_name):
+    """Returns visibility updates for each view"""
+    views = ["Chat", "Models", "Files", "Logs", "Settings", "About"]
+    return tuple(gr.update(visible=(view_name == v)) for v in views)
+
+
+def toggle_sidebar(is_visible):
+    """Toggle sidebar visibility"""
+    return gr.update(visible=not is_visible), not is_visible
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# CSS - ChatGPT Clone Style
+# ════════════════════════════════════════════════════════════════════════════════
+CSS = """
+/* ═══════════════════════════════════════════════════════════════════════════════
+   ROOT VARIABLES
+   ═══════════════════════════════════════════════════════════════════════════════ */
+:root {
+    --bg-primary: #0d0d0d;
+    --bg-secondary: #171717;
+    --bg-tertiary: #1a1a1a;
+    --bg-hover: #2a2a2a;
+    --border-color: #2f2f2f;
+    --text-primary: #ececec;
+    --text-secondary: #9b9b9b;
+    --text-muted: #666;
+    --accent: #10a37f;
+    --accent-hover: #0d8c6d;
+    --user-bubble: #2a2a2a;
+    --bot-bubble: transparent;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   BASE STYLES
+   ═══════════════════════════════════════════════════════════════════════════════ */
+* { box-sizing: border-box; }
+
+body, .gradio-container {
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    font-family: 'Söhne', 'ui-sans-serif', system-ui, -apple-system, sans-serif !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.gradio-container {
+    max-width: 100% !important;
+    padding: 0 !important;
+}
+
+footer { display: none !important; }
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   HEADER BAR - Top Navigation
+   ═══════════════════════════════════════════════════════════════════════════════ */
+#header-bar {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 8px 16px !important;
+    background: var(--bg-secondary) !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    height: 52px !important;
+    min-height: 52px !important;
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 100 !important;
+}
+
+#header-left {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+}
+
+#sidebar-toggle {
+    background: transparent !important;
+    border: none !important;
+    color: var(--text-primary) !important;
+    cursor: pointer !important;
+    padding: 8px !important;
+    border-radius: 6px !important;
+    width: 40px !important;
+    min-width: 40px !important;
+}
+
+#sidebar-toggle:hover {
+    background: var(--bg-hover) !important;
+}
+
+#app-title {
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    color: var(--text-primary) !important;
+    margin: 0 !important;
+}
+
+#header-right {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+}
+
+#nav-dropdown {
+    min-width: 130px !important;
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+}
+
+#nav-dropdown select, #nav-dropdown input {
+    background: transparent !important;
+    color: var(--text-primary) !important;
+    border: none !important;
+    font-size: 14px !important;
+    padding: 8px 12px !important;
+}
+
+#new-chat-btn {
+    background: var(--accent) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    min-width: auto !important;
+}
+
+#new-chat-btn:hover {
+    background: var(--accent-hover) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   MAIN LAYOUT - Fixed pixel heights for HF iframe
+   ═══════════════════════════════════════════════════════════════════════════════ */
+#main-layout {
+    display: flex !important;
+    height: 620px !important;
+    max-height: 620px !important;
+    overflow: hidden !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   SIDEBAR
+   ═══════════════════════════════════════════════════════════════════════════════ */
+#sidebar {
+    width: 260px !important;
+    min-width: 260px !important;
+    max-width: 260px !important;
+    background: var(--bg-secondary) !important;
+    border-right: 1px solid var(--border-color) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    height: 620px !important;
+    overflow: hidden !important;
+}
+
+#sidebar-content {
+    flex: 1 !important;
+    overflow-y: auto !important;
+    padding: 12px !important;
+}
+
+#sidebar-header {
+    padding: 12px !important;
+    border-bottom: 1px solid var(--border-color) !important;
+}
+
+#sidebar-header h4 {
+    margin: 0 !important;
+    font-size: 12px !important;
+    text-transform: uppercase !important;
+    color: var(--text-secondary) !important;
+    letter-spacing: 0.5px !important;
+}
+
+/* Conversation list */
+#chat-list {
+    max-height: 300px !important;
+    overflow-y: auto !important;
+}
+
+/* Sidebar buttons */
+#sidebar-actions {
+    padding: 12px !important;
+    border-top: 1px solid var(--border-color) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 8px !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   CHAT AREA
+   ═══════════════════════════════════════════════════════════════════════════════ */
+#chat-area {
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    height: 620px !important;
+    max-height: 620px !important;
+    background: var(--bg-primary) !important;
+    overflow: hidden !important;
+}
+
+#chat-header {
+    padding: 8px 16px !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 44px !important;
+}
+
+#model-selector {
+    max-width: 300px !important;
+}
+
+#model-selector select {
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    color: var(--text-primary) !important;
+    padding: 6px 12px !important;
+    text-align: center !important;
+}
+
+/* Chatbot */
+#chatbot {
+    height: 400px !important;
+    min-height: 400px !important;
+    max-height: 400px !important;
+    border: none !important;
+    background: transparent !important;
+}
+
+#chatbot > div {
+    height: 100% !important;
+    max-height: 100% !important;
+}
+
+/* Message bubbles */
+#chatbot .user {
+    background: var(--user-bubble) !important;
+    border-radius: 16px !important;
+    padding: 12px 16px !important;
+}
+
+#chatbot .bot {
+    background: var(--bot-bubble) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   INPUT AREA
+   ═══════════════════════════════════════════════════════════════════════════════ */
+#input-area {
+    padding: 12px 16px !important;
+    background: var(--bg-primary) !important;
+}
+
+#input-row {
+    display: flex !important;
+    gap: 8px !important;
+    align-items: flex-end !important;
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 16px !important;
+    padding: 8px 12px !important;
+}
+
+#user-input {
+    flex: 1 !important;
+}
+
+#user-input textarea {
+    background: transparent !important;
+    border: none !important;
+    color: var(--text-primary) !important;
+    resize: none !important;
+    padding: 8px !important;
+    font-size: 15px !important;
+    line-height: 1.5 !important;
+}
+
+#user-input textarea:focus {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+#send-btn {
+    background: var(--accent) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 10px 20px !important;
+    cursor: pointer !important;
+    font-size: 14px !important;
+    min-width: 70px !important;
+}
+
+#send-btn:hover {
+    background: var(--accent-hover) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   SETTINGS PANEL (Accordion)
+   ═══════════════════════════════════════════════════════════════════════════════ */
+.settings-accordion {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important;
+    margin: 8px 16px !important;
+}
+
+/* ═══���═══════════════════════════════════════════════════════════════════════════
+   OTHER VIEWS
+   ═══════════════════════════════════════════════════════════════════════════════ */
+#models-view, #files-view, #logs-view, #settings-view, #about-view {
+    height: 620px !important;
+    max-height: 620px !important;
+    overflow-y: auto !important;
+    padding: 24px !important;
+    background: var(--bg-primary) !important;
+}
+
+.view-container {
+    max-width: 900px !important;
+    margin: 0 auto !important;
+}
+
+.view-container h2 {
+    color: var(--text-primary) !important;
+    margin-bottom: 20px !important;
+    font-size: 1.5rem !important;
+}
+
+/* Cards in views */
+.info-card {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    margin-bottom: 16px !important;
+}
+
+.info-card h3 {
+    color: var(--text-primary) !important;
+    margin-top: 0 !important;
+    margin-bottom: 12px !important;
+    font-size: 1.1rem !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   FORM ELEMENTS
+   ═══════════════════════════════════════════════════════════════════════════════ */
+input, textarea, select {
+    background: var(--bg-tertiary) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-primary) !important;
+    border-radius: 8px !important;
+}
+
+input:focus, textarea:focus, select:focus {
+    border-color: var(--accent) !important;
+    outline: none !important;
+}
+
+button.primary {
+    background: var(--accent) !important;
+    color: white !important;
+}
+
+button.primary:hover {
+    background: var(--accent-hover) !important;
+}
+
+/* Code/Log output */
+.log-output textarea {
+    font-family: 'Monaco', 'Menlo', monospace !important;
+    font-size: 12px !important;
+    background: #0a0a0a !important;
+    color: #0f0 !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════════
+   SCROLLBAR
+   ═══════════════════════════════════════════════════════════════════════════════ */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+/* Stats display */
+.stats-display {
+    font-size: 11px !important;
+    color: var(--text-muted) !important;
+    padding: 8px 12px !important;
+}
+
+/* Version tag */
+.version-tag {
+    font-size: 10px !important;
+    color: var(--text-muted) !important;
+    text-align: center !important;
+    padding: 8px !important;
+}
+
+/* Tables in markdown */
+table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    margin: 12px 0 !important;
+}
+
+th, td {
+    padding: 8px 12px !important;
+    border: 1px solid var(--border-color) !important;
+    text-align: left !important;
+}
+
+th {
+    background: var(--bg-tertiary) !important;
+    color: var(--text-primary) !important;
+}
+
+td {
+    color: var(--text-secondary) !important;
+}
+
+code {
+    background: var(--bg-tertiary) !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-size: 13px !important;
+}
+"""
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# GRADIO APP
+# ════════════════════════════════════════════════════════════════════════════════
+with gr.Blocks(css=CSS, title=APP_TITLE, theme=gr.themes.Soft(
+    primary_hue="emerald",
+    neutral_hue="gray",
+)) as demo:
+
+    state = gr.State(_default_state())
+    sidebar_visible = gr.State(True)
+
+    # ════════���═══════════════════════════════════════════════════════════════════
+    # HEADER BAR
+    # ════════════════════════════════════════════════════════════════════════════
+    with gr.Row(elem_id="header-bar"):
+        with gr.Row(elem_id="header-left"):
+            sidebar_toggle = gr.Button("☰", elem_id="sidebar-toggle", size="sm")
+            gr.Markdown(f"**{APP_TITLE}**", elem_id="app-title")
+
+        with gr.Row(elem_id="header-right"):
+            nav_dropdown = gr.Dropdown(
+                choices=["Chat", "Models", "Files", "Logs", "Settings", "About"],
+                value="Chat",
+                label=None,
+                show_label=False,
+                elem_id="nav-dropdown",
+                scale=0,
+                min_width=130,
+            )
+            new_chat_btn = gr.Button("+ New", elem_id="new-chat-btn", size="sm")
+
+    # ════════════════════════════════════════════════════════════════════════════
+    # MAIN LAYOUT
+    # ════════════════════════════════════════════════════════════════════════════
+    with gr.Row(elem_id="main-layout"):
+
+        # ════════════════════════════════════════════════════════════════════════
+        # SIDEBAR
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="sidebar", scale=0, visible=True) as sidebar:
+            with gr.Column(elem_id="sidebar-header"):
+                gr.Markdown("#### Conversations")
+
+            with gr.Column(elem_id="sidebar-content"):
+                chat_selector = gr.Dropdown(
+                    choices=[],
+                    value=None,
+                    label=None,
+                    interactive=True,
+                    show_label=False,
+                    elem_id="chat-list",
+                )
+
+                with gr.Group():
+                    rename_box = gr.Textbox(
+                        value="",
+                        placeholder="Rename chat...",
+                        show_label=False,
+                        container=False,
+                    )
+                    with gr.Row():
+                        rename_btn = gr.Button("Rename", size="sm")
+                        delete_btn = gr.Button("Delete", size="sm", variant="stop")
+
+                gr.Markdown("---")
+
+                with gr.Accordion("Import/Export", open=False):
+                    export_btn = gr.Button("Export Chats", size="sm")
+                    export_file = gr.File(label=None, visible=False)
+                    import_file = gr.File(label="Import", file_types=[".json"])
+                    import_btn = gr.Button("Import", size="sm")
+
+            with gr.Column(elem_id="sidebar-actions"):
+                stats_display = gr.Markdown(value=system_stats_md, every=3, elem_classes="stats-display")
+                gr.Markdown(f"v{VERSION}", elem_classes="version-tag")
+
+        # ════════════════════════════════════════════════════════════════════════
+        # CHAT VIEW
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="chat-area", visible=True) as chat_view:
+
+            with gr.Row(elem_id="chat-header"):
+                backend = gr.Dropdown(
+                    choices=["Demo (offline)", "OpenAI-compatible", "HuggingFace Inference", "Local (llama.cpp)"],
+                    value="Demo (offline)",
+                    label=None,
+                    show_label=False,
+                    elem_id="model-selector",
+                    scale=0,
+                    min_width=200,
+                )
+
+            with gr.Accordion("Settings", open=False, elem_classes="settings-accordion"):
+                system_prompt = gr.Textbox(
+                    value=DEFAULT_SYSTEM_PROMPT,
+                    label="System Prompt",
+                    lines=2,
+                )
+                with gr.Row():
+                    temperature = gr.Slider(0, 2, value=0.7, step=0.1, label="Temperature")
+                    max_tokens = gr.Slider(64, 4096, value=1024, step=64, label="Max Tokens")
+
+                gr.Markdown("**OpenAI-compatible**")
+                with gr.Row():
+                    openai_base_url = gr.Textbox(value=OPENAI_BASE_URL, label="Base URL")
+                    openai_model = gr.Textbox(value=OPENAI_MODEL, label="Model")
+                openai_api_key = gr.Textbox(value=OPENAI_API_KEY, label="API Key", type="password")
+
+                gr.Markdown("**HuggingFace Inference**")
+                with gr.Row():
+                    hf_model_box = gr.Textbox(value=HF_MODEL, label="Model")
+                    hf_token_box = gr.Textbox(value=HF_TOKEN, label="Token", type="password")
+
+                if Llama is None:
+                    gr.Markdown("*llama-cpp-python not installed*")
+
+            chatbot = gr.Chatbot(
+                label=None,
+                elem_id="chatbot",
+                type="messages",
+                show_copy_button=True,
+                show_label=False,
+            )
+
+            with gr.Column(elem_id="input-area"):
+                with gr.Row(elem_id="input-row"):
+                    user_input = gr.Textbox(
+                        placeholder="Message TextAI...",
+                        show_label=False,
+                        elem_id="user-input",
+                        lines=1,
+                        max_lines=5,
+                        container=False,
+                    )
+                    send_btn = gr.Button("Send", elem_id="send-btn", variant="primary")
+
+            with gr.Row():
+                clear_btn = gr.Button("Clear Chat", size="sm")
+                regen_btn = gr.Button("Regenerate", size="sm")
+
+        # ════════════════════════════════════════════════════════════════════════
+        # MODELS VIEW - HuggingFace Hub Search
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="models-view", visible=False) as models_view:
+            with gr.Column(elem_classes="view-container"):
+                gr.Markdown("## Model Manager")
+                gr.Markdown("Search HuggingFace Hub for models to use with the HF Inference backend.")
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Search Models")
+                    with gr.Row():
+                        model_search_query = gr.Textbox(
+                            placeholder="Search models (e.g., llama, mistral, phi)...",
+                            label=None,
+                            show_label=False,
+                            scale=3,
                         )
+                        model_search_task = gr.Dropdown(
+                            choices=["text-generation", "text2text-generation", "conversational", "all"],
+                            value="text-generation",
+                            label="Task",
+                            scale=1,
+                        )
+                        model_search_btn = gr.Button("Search", variant="primary", scale=0)
+
+                    model_results = gr.Markdown("Enter a search query and click Search.")
+
+                    model_search_btn.click(
+                        search_models_ui,
+                        inputs=[model_search_query, model_search_task],
+                        outputs=[model_results],
+                    )
+                    model_search_query.submit(
+                        search_models_ui,
+                        inputs=[model_search_query, model_search_task],
+                        outputs=[model_results],
+                    )
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Quick Links")
+                    gr.Markdown("""
+| Category | Popular Models |
+|----------|----------------|
+| **Chat/Instruct** | `meta-llama/Llama-3.1-8B-Instruct`, `mistralai/Mistral-7B-Instruct-v0.3` |
+| **Small/Fast** | `microsoft/Phi-3-mini-4k-instruct`, `google/gemma-2-2b-it` |
+| **Code** | `codellama/CodeLlama-7b-Instruct-hf`, `deepseek-ai/deepseek-coder-6.7b-instruct` |
+| **Multilingual** | `CohereForAI/aya-23-8B`, `Qwen/Qwen2-7B-Instruct` |
+                    """)
 
-                    # API Info
-                    with gr.Tab("API"):
-                        gr.Markdown("### API Endpoints")
-                        gr.Markdown("""
-All endpoints return JSON. Use for integration with local apps.
-
-**Models:**
-- `api_list_models()` - List installed models
-- `api_load_model(model_id)` - Load a model
-- `api_unload_model()` - Unload current model
-- `api_search_models(query, max_params, limit)` - Search HF
-- `api_download_model(repo_id, filename)` - Download model
-
-**Sessions:**
-- `api_list_sessions()` - List all sessions
-- `api_create_session(title, type, system_prompt)` - New session
-- `api_delete_session(session_id)` - Delete session
-
-**Chat:**
-- `api_chat(session_id, message, max_tokens, temperature)` - Chat
-- `api_inference(prompt, messages, system_prompt, ...)` - Direct inference
-
-**System:**
-- `api_health()` - Health check
-- `api_get_status()` - Full status
-- `api_get_backends()` - Available backends
-                        """)
-
-                        gr.Markdown("### Test")
-                        btn_health = gr.Button("Health Check")
-                        health_output = gr.JSON()
-
-                        btn_health.click(
-                            lambda: __import__('json').loads(api_health()),
-                            outputs=[health_output]
+        # ════════════════════════════════════════════════════════════════════════
+        # FILES VIEW - File Manager
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="files-view", visible=False) as files_view:
+            with gr.Column(elem_classes="view-container"):
+                gr.Markdown("## File Manager")
+                gr.Markdown("Browse and manage files in the data directory.")
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Browse Files")
+                    with gr.Row():
+                        file_path_input = gr.Textbox(
+                            value=DATA_DIR,
+                            label="Path",
+                            scale=4,
                         )
+                        file_browse_btn = gr.Button("Browse", variant="primary", scale=0)
 
-            # ══════════════════════════════════════════════════════════
-            # TAB 4: ABOUT
-            # ══════════════════════════════════════════════════════════
-            with gr.Tab("About", id="about"):
-                gr.Markdown(f"""
-# TextAI v{VERSION}
+                    file_list_output = gr.Markdown("Click Browse to list files.")
+
+                    file_browse_btn.click(
+                        lambda p: get_file_manager_view(p)[1],
+                        inputs=[file_path_input],
+                        outputs=[file_list_output],
+                    )
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### View File")
+                    file_view_path = gr.Textbox(
+                        placeholder="Enter full file path to view...",
+                        label="File Path",
+                    )
+                    file_view_btn = gr.Button("View Content", size="sm")
+                    file_content_output = gr.Textbox(
+                        label="Content",
+                        lines=10,
+                        max_lines=20,
+                        interactive=False,
+                    )
 
-**Local AI Chat Assistant**
+                    file_view_btn.click(
+                        read_file_content,
+                        inputs=[file_view_path],
+                        outputs=[file_content_output],
+                    )
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Directories")
+                    gr.Markdown(f"""
+| Directory | Path | Purpose |
+|-----------|------|---------|
+| **Data** | `{DATA_DIR}` | Chat exports, user files |
+| **Logs** | `{LOG_DIR}` | Application logs |
+                    """)
+
+        # ════════════════════════════════════════════════════════════════════════
+        # LOGS VIEW
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="logs-view", visible=False) as logs_view:
+            with gr.Column(elem_classes="view-container"):
+                gr.Markdown("## Application Logs")
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Live Logs")
+                    with gr.Row():
+                        log_refresh_btn = gr.Button("Refresh", variant="primary", size="sm")
+                        log_clear_btn = gr.Button("Clear Logs", size="sm")
+
+                    log_output = gr.Textbox(
+                        value=LOG.get_logs,
+                        label=None,
+                        lines=20,
+                        max_lines=30,
+                        interactive=False,
+                        elem_classes="log-output",
+                        every=5,
+                    )
+
+                    log_refresh_btn.click(
+                        lambda: LOG.get_logs(200),
+                        outputs=[log_output],
+                    )
+                    log_clear_btn.click(
+                        lambda: (LOG.clear(), "Logs cleared.")[1],
+                        outputs=[log_output],
+                    )
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Log Files")
+                    gr.Markdown(f"Log files are stored in: `{LOG_DIR}`")
+
+                    def list_log_files():
+                        try:
+                            files = [f for f in os.listdir(LOG_DIR) if f.endswith('.log')]
+                            if not files:
+                                return "No log files found."
+                            return "\n".join([f"- {f}" for f in sorted(files, reverse=True)])
+                        except Exception:
+                            return "Could not list log files."
+
+                    log_files_output = gr.Markdown(list_log_files())
+
+        # ════════════════════════════════════════════════════════════════════════
+        # SETTINGS VIEW
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="settings-view", visible=False) as settings_view:
+            with gr.Column(elem_classes="view-container"):
+                gr.Markdown("## Settings & System")
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### System Status")
+                    system_status_btn = gr.Button("Refresh Status", variant="primary", size="sm")
+                    system_status_output = gr.JSON(label="System Info")
+
+                    system_status_btn.click(
+                        get_system_info,
+                        outputs=[system_status_output],
+                    )
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### Environment")
+                    gr.Markdown(f"""
+| Variable | Status |
+|----------|--------|
+| `HF_TOKEN` | {"✅ Set" if HF_TOKEN else "❌ Not set"} |
+| `OPENAI_API_KEY` | {"✅ Set" if OPENAI_API_KEY else "❌ Not set"} |
+| `LLAMA_GGUF_PATH` | {"✅ " + LLAMA_GGUF_PATH if LLAMA_GGUF_PATH else "❌ Not set"} |
+| `SPACE_ID` | {os.environ.get("SPACE_ID", "local")} |
+                    """)
+
+                with gr.Group(elem_classes="info-card"):
+                    gr.Markdown("### API Information")
+                    gr.Markdown("""
+This app exposes Gradio's built-in API.
+
+**Example with gradio_client:**
+```python
+from gradio_client import Client
+client = Client("your-space-url")
+result = client.predict(...)
+```
+                    """)
+
+        # ════════════════════════════════════════════════════════════════════════
+        # ABOUT VIEW
+        # ════════════════════════════════════════════════════════════════════════
+        with gr.Column(elem_id="about-view", visible=False) as about_view:
+            with gr.Column(elem_classes="view-container"):
+                gr.Markdown(f"""
+## About TextAI
 
-A clean, professional chat interface for running local LLM models.
+**Version:** {VERSION}
 
 ---
 
 ### Features
 
-- Chat - Natural conversation with AI
-- Session Management - Auto-save, rename, delete chats
-- Model Manager - Download, load, configure models
-- HuggingFace Search - Find and download GGUF models
-- Customization - System prompts, temperature, tokens
-- API - Full API for integration with other apps
+- **Multi-backend support**: Demo, OpenAI-compatible, HuggingFace Inference, local llama.cpp
+- **Model Manager**: Search HuggingFace Hub for models
+- **File Manager**: Browse data/logs directories
+- **Live Logs**: View application logs in real-time
+- **Conversation management**: Create, rename, delete, switch between chats
+- **Auto-titling**: Conversations are automatically titled from first message
+- **Export/Import**: Save and load conversation history as JSON
 
 ---
 
-### Supported Models
+### Navigation
 
-- **GGUF** - Via llama-cpp-python (recommended)
-- **Transformers** - Via HuggingFace transformers
+| Tab | Description |
+|-----|-------------|
+| **Chat** | Main chat interface |
+| **Models** | Search HuggingFace Hub for models |
+| **Files** | Browse and view files |
+| **Logs** | View application logs |
+| **Settings** | System status and configuration |
+| **About** | This page |
+
+---
+
+### Backends
+
+| Backend | Description |
+|---------|-------------|
+| Demo (offline) | Echo mode - no AI, just reflects your input |
+| OpenAI-compatible | Works with OpenAI, Azure, or any compatible API |
+| HuggingFace Inference | Uses HF Inference API with your token |
+| Local (llama.cpp) | Run local GGUF models (requires llama-cpp-python) |
 
 ---
 
 ### Keyboard Shortcuts
 
 - `Enter` - Send message
-- `Shift+Enter` - New line
+- `Shift+Enter` - New line in message
 
 ---
 
-Built with Gradio
+Built with [Gradio](https://gradio.app) | [HuggingFace](https://huggingface.co)
                 """)
 
-    return app
+    # ════════════════════════════════════════════════════════════════════════════
+    # EVENT WIRING
+    # ════════════════════════════════════════════════════════════════════════════
 
+    # Sidebar toggle
+    sidebar_toggle.click(
+        toggle_sidebar,
+        inputs=[sidebar_visible],
+        outputs=[sidebar, sidebar_visible],
+        queue=False,
+    )
 
-# ══════════════════════════════════════════════════════════════════════════════
-# MAIN
-# ══════════════════════════════════════════════════════════════════════════════
+    # View switching via dropdown
+    nav_dropdown.change(
+        switch_view,
+        inputs=[nav_dropdown],
+        outputs=[chat_view, models_view, files_view, logs_view, settings_view, about_view],
+        queue=False,
+    )
+
+    # Initialize
+    def _init(s):
+        choices = _conv_choices(s)
+        conv = _active_conv(s)
+        return choices, s["active_id"], conv["title"], conv["messages"]
+
+    demo.load(
+        _init,
+        inputs=[state],
+        outputs=[chat_selector, chat_selector, rename_box, chatbot],
+        queue=False,
+    )
+
+    # Chat operations
+    new_chat_btn.click(
+        ui_new_chat,
+        inputs=[state],
+        outputs=[state, chat_selector, chat_selector, chatbot, rename_box],
+        queue=False,
+    )
+
+    chat_selector.change(
+        ui_select_chat,
+        inputs=[state, chat_selector],
+        outputs=[state, chatbot, rename_box],
+        queue=False,
+    )
+
+    rename_btn.click(
+        ui_rename_chat,
+        inputs=[state, rename_box],
+        outputs=[state, chat_selector],
+        queue=False,
+    )
 
+    delete_btn.click(
+        ui_delete_chat,
+        inputs=[state],
+        outputs=[state, chat_selector, chat_selector, chatbot, rename_box],
+        queue=False,
+    )
+
+    clear_btn.click(
+        ui_clear_chat,
+        inputs=[state],
+        outputs=[state, chatbot],
+        queue=False,
+    )
+
+    # Export/Import
+    export_btn.click(
+        ui_export,
+        inputs=[state],
+        outputs=[export_file],
+        queue=False,
+    ).then(
+        lambda p: gr.File(value=p, visible=True),
+        inputs=[export_file],
+        outputs=[export_file],
+        queue=False,
+    )
+
+    import_btn.click(
+        ui_import,
+        inputs=[state, import_file],
+        outputs=[state, chat_selector, chat_selector, chatbot, rename_box],
+        queue=False,
+    )
+
+    # Regenerate
+    regen_btn.click(
+        ui_regenerate,
+        inputs=[state],
+        outputs=[state, chatbot],
+        queue=False,
+    ).then(
+        ui_generate_response,
+        inputs=[state, backend, system_prompt, temperature, max_tokens,
+                openai_base_url, openai_api_key, openai_model, hf_token_box, hf_model_box],
+        outputs=[state, chatbot],
+        queue=True,
+    )
+
+    # Send message
+    send_btn.click(
+        ui_add_user_message,
+        inputs=[state, user_input],
+        outputs=[state, chatbot, user_input],
+        queue=False,
+    ).then(
+        ui_generate_response,
+        inputs=[state, backend, system_prompt, temperature, max_tokens,
+                openai_base_url, openai_api_key, openai_model, hf_token_box, hf_model_box],
+        outputs=[state, chatbot],
+        queue=True,
+    )
+
+    user_input.submit(
+        ui_add_user_message,
+        inputs=[state, user_input],
+        outputs=[state, chatbot, user_input],
+        queue=False,
+    ).then(
+        ui_generate_response,
+        inputs=[state, backend, system_prompt, temperature, max_tokens,
+                openai_base_url, openai_api_key, openai_model, hf_token_box, hf_model_box],
+        outputs=[state, chatbot],
+        queue=True,
+    )
+
+
+# ════════════════════════════════════════════════════════════════════════════════
+# MAIN
+# ════════════════════════════════════════════════════════════════════════════════
 if __name__ == "__main__":
-    app = create_app()
-    app.launch(
+    LOG.info("Starting Gradio server...")
+    demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,
-        theme=get_theme(),
-        css=THEME_CSS
     )

requirements.txt

@@ -2,6 +2,3 @@ gradio>=4.0.0
 requests>=2.28.0
 huggingface_hub>=0.16.0
 psutil>=5.9.0
-# llama-cpp-python requires compilation - handled gracefully if missing
-# NOT included here due to build timeout on free HF Spaces
-# Users can install locally: pip install llama-cpp-python

ui/theme.py

@@ -5,7 +5,16 @@ import gradio as gr
 
 THEME_CSS = """
 /* ═══════════════════════════════════════════════════════════════════════════
-   RESET & BASE
+   HUGGINGFACE SPACES IFRAME FIX
+   ═══════════════════════════════════════════════════════════════════════════
+   CRITICAL: HuggingFace uses iframeResizer which auto-sizes iframe to content.
+
+   Problem: Using 100vh or flex-grow:1 causes infinite height because:
+   - iframeResizer measures content height
+   - 100vh refers to iframe viewport which grows with content
+   - Circular dependency = infinite growth (46569px observed!)
+
+   Solution: Use FIXED PIXEL HEIGHTS for all containers.
    ═══════════════════════════════════════════════════════════════════════════ */
 * {
     box-sizing: border-box;
@@ -25,29 +34,30 @@ body, .gradio-container {
 footer { display: none !important; }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   MAIN LAYOUT
+   MAIN LAYOUT - FIXED PIXEL HEIGHT (NOT 100vh!)
    ═══════════════════════════════════════════════════════════════════════════ */
 #main-container {
     display: flex !important;
-    height: calc(100vh - 60px) !important;
-    max-height: calc(100vh - 60px) !important;
+    height: 600px !important;
+    max-height: 600px !important;
     overflow: hidden !important;
     gap: 0 !important;
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   SIDEBAR
+   SIDEBAR - FIXED HEIGHT
    ═══════════════════════════════════════════════════════════════════════════ */
 #sidebar {
     background: #171717 !important;
     border-right: 1px solid #333 !important;
     padding: 16px !important;
     overflow-y: auto !important;
-    max-height: calc(100vh - 60px) !important;
+    height: 600px !important;
+    max-height: 600px !important;
 }
 
 #sessions-table {
-    max-height: 300px !important;
+    max-height: 200px !important;
     overflow-y: auto !important;
 }
 
@@ -60,13 +70,13 @@ footer { display: none !important; }
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   CHAT AREA
+   CHAT AREA - FIXED HEIGHT
    ═══════════════════════════════════════════════════════════════════════════ */
 #chat-area {
     display: flex !important;
     flex-direction: column !important;
-    height: calc(100vh - 60px) !important;
-    max-height: calc(100vh - 60px) !important;
+    height: 600px !important;
+    max-height: 600px !important;
     overflow: hidden !important;
     background: #0d0d0d !important;
 }
@@ -93,28 +103,24 @@ footer { display: none !important; }
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   CHATBOT - CRITICAL FIXED HEIGHT
+   CHATBOT - FIXED PIXEL HEIGHT (Critical!)
    ═══════════════════════════════════════════════════════════════════════════ */
 #chatbot {
-    flex: 1 !important;
-    min-height: 0 !important;
-    max-height: calc(100vh - 280px) !important;
+    height: 400px !important;
+    min-height: 400px !important;
+    max-height: 400px !important;
     overflow: hidden !important;
 }
 
-#chatbot > div {
-    height: 100% !important;
-    max-height: 100% !important;
-}
-
+#chatbot > div,
 #chatbot .wrapper {
     height: 100% !important;
     max-height: 100% !important;
     overflow-y: auto !important;
 }
 
-#chatbot .messages-wrapper {
-    max-height: 100% !important;
+#chatbot .bubble-wrap {
+    max-height: 360px !important;
     overflow-y: auto !important;
 }