Spaces:

HI7RAI
/

anycoder-f4dbec13

Running

App Files Files Community

HI7RAI commited on Jan 14

Commit

d65e348

verified ·

1 Parent(s): 2222377

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1056 -997

index.html CHANGED Viewed

@@ -1,1010 +1,1069 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Transformers Workbench</title>
-    <!-- Import FontAwesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Import Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
-    <style>
-        /* --- CSS Variables & Reset --- */
-        :root {
-            --bg-dark: #0d1117;
-            --bg-panel: #161b22;
-            --bg-input: #0d1117;
-            --border: #30363d;
-            --accent: #58a6ff;
-            --accent-hover: #79c0ff;
-            --success: #238636;
-            --danger: #da3633;
-            --text-main: #c9d1d9;
-            --text-muted: #8b949e;
-            --font-main: 'Inter', sans-serif;
-            --font-code: 'JetBrains Mono', monospace;
-            --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            outline: none;
-        }
-        body {
-            font-family: var(--font-main);
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        /* --- Scrollbar Styling --- */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--bg-dark);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--text-muted);
-        }
-        /* --- Header --- */
-        header {
-            height: 60px;
-            background-color: var(--bg-panel);
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 20px;
-            flex-shrink: 0;
-            z-index: 50;
-        }
-        .logo {
-            font-weight: 700;
-            font-size: 1.2rem;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            color: var(--text-main);
-            cursor: pointer;
-        }
-        .logo i { color: var(--accent); }
-        .header-links a {
-            color: var(--accent);
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: opacity 0.2s;
-            font-weight: 500;
-        }
-        .header-links a:hover { opacity: 0.8; text-decoration: underline; }
-        .header-controls { display: flex; gap: 10px; }
-        /* --- Main Layout --- */
-        .main-container {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-            position: relative;
-        }
-        /* --- Sidebar (History) --- */
-        .sidebar {
-            width: 280px;
-            background-color: var(--bg-panel);
-            border-right: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            z-index: 40;
-        }
-        .sidebar-header { padding: 15px; border-bottom: 1px solid var(--border); }
-        .btn-new-chat {
-            width: 100%;
-            padding: 10px;
-            background-color: var(--success);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            transition: background 0.2s;
-        }
-        .btn-new-chat:hover { background-color: #2ea043; }
-        .history-list { flex: 1; overflow-y: auto; padding: 10px; }
-        .history-item {
-            padding: 10px;
-            border-radius: 6px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 5px;
-            color: var(--text-main);
-            transition: background 0.2s;
-            group: item;
-        }
-        .history-item:hover, .history-item.active { background-color: rgba(88, 166, 255, 0.1); }
-        .history-name {
-            font-size: 0.9rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            flex: 1;
-            margin-right: 8px;
-            padding: 2px 4px;
-            border: 1px solid transparent;
-            border-radius: 4px;
-        }
-        .history-name:focus {
-            border-color: var(--accent);
-            background: var(--bg-input);
-        }
-        .history-actions i {
-            color: var(--text-muted);
-            margin-left: 5px;
-            font-size: 0.8rem;
-            padding: 4px;
-            border-radius: 4px;
-            transition: all 0.2s;
-        }
-        .history-actions i:hover { color: var(--danger); background: rgba(218, 54, 51, 0.1); }
-        .sidebar-footer { padding: 15px; border-top: 1px solid var(--border); }
-        .btn-import {
-            width: 100%;
-            padding: 8px;
-            background: transparent;
-            border: 1px dashed var(--text-muted);
-            color: var(--text-muted);
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .btn-import:hover { border-color: var(--accent); color: var(--accent); }
-        /* --- Chat Area --- */
-        .chat-area {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background-color: var(--bg-dark);
-            position: relative;
-            min-width: 0; /* Fix flex overflow */
-        }
-        .chat-header {
-            padding: 10px 20px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: rgba(22, 27, 34, 0.8);
-            backdrop-filter: blur(10px);
-        }
-        .model-indicator { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
-        .badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: var(--border); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
-        .badge.active { background: var(--accent); color: white; }
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-        .message {
-            max-width: 85%;
-            line-height: 1.6;
-            position: relative;
-            animation: fadeIn 0.3s ease;
-        }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        .message.user { align-self: flex-end; }
-        .message.ai { align-self: flex-start; }
-        .message.system { align-self: center; max-width: 90%; font-size: 0.85rem; color: var(--text-muted); text-align: center; background: rgba(139, 148, 158, 0.1); padding: 4px 12px; border-radius: 20px; }
-        .bubble {
-            padding: 12px 18px;
-            border-radius: 12px;
-            position: relative;
-            word-wrap: break-word;
-            white-space: pre-wrap;
-        }
-        .message.user .bubble {
-            background-color: var(--accent);
-            color: white;
-            border-bottom-right-radius: 2px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-        }
-        .message.ai .bubble {
-            background-color: var(--bg-panel);
-            border: 1px solid var(--border);
-            border-bottom-left-radius: 2px;
-            color: var(--text-main);
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        .msg-actions {
-            position: absolute; top: -25px; right: 0; display: none; gap: 8px;
-        }
-        .message:hover .msg-actions { display: flex; }
-        .action-btn {
-            background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-muted);
-            padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;
-            display: flex; align-items: center; gap: 4px; transition: all 0.2s;
-        }
-        .action-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
-        .input-area { padding: 20px; border-top: 1px solid var(--border); background-color: var(--bg-panel); }
-        .input-wrapper { position: relative; max-width: 900px; margin: 0 auto; }
-        .chat-input {
-            width: 100%;
-            background-color: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 15px 50px 15px 15px;
-            color: var(--text-main);
-            font-family: var(--font-main);
-            resize: none;
-            min-height: 54px;
-            max-height: 200px;
-            line-height: 1.5;
-            transition: border-color 0.2s;
-        }
-        .chat-input:focus { border-color: var(--accent); }
-        .send-btn {
-            position: absolute; right: 12px; bottom: 12px;
-            background: none; border: none; color: var(--text-muted);
-            cursor: pointer; font-size: 1.2rem; transition: color 0.2s;
-        }
-        .send-btn:hover { color: var(--accent); transform: scale(1.1); }
-        /* --- Right Panel (Models & Config) --- */
-        .right-panel {
-            width: 350px;
-            background-color: var(--bg-panel);
-            border-left: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            overflow-y: auto;
-            transition: width 0.3s ease;
-        }
-        .panel-section { padding: 20px; border-bottom: 1px solid var(--border); }
-        .panel-title {
-            font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted);
-            margin-bottom: 12px; font-weight: 700; letter-spacing: 0.5px;
-            display: flex; align-items: center; gap: 8px;
-        }
-        /* Model Cards */
-        .model-card {
-            background: var(--bg-input); border: 1px solid var(--border);
-            border-radius: 8px; padding: 12px; margin-bottom: 10px;
-            cursor: pointer; transition: all 0.2s ease;
-        }
-        .model-card:hover { border-color: var(--text-muted); transform: translateY(-2px); }
-        .model-card.active { border-color: var(--accent); background: rgba(88, 166, 255, 0.05); box-shadow: 0 0 0 1px var(--accent); }
-        .model-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
-        .model-name { font-weight: 600; font-size: 0.95rem; color: var(--text-main); }
-        .model-meta { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
-        .showcase-stats { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
-        .stat { font-size: 0.7rem; background: var(--border); padding: 2px 6px; border-radius: 4px; color: var(--text-muted); }
-        /* Configuration & Downloads */
-        .download-controls { display: flex; flex-direction: column; gap: 12px; }
-        .form-group { display: flex; flex-direction: column; gap: 6px; }
-        .form-group label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
-        .form-input {
-            background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main);
-            padding: 8px 12px; border-radius: 6px; font-family: var(--font-code); font-size: 0.85rem;
-            transition: border-color 0.2s;
-        }
-        .form-input:focus { border-color: var(--accent); }
-        .btn-download {
-            background-color: var(--accent); color: white; border: none;
-            padding: 10px; border-radius: 6px; cursor: pointer; font-weight: 600;
-            display: flex; align-items: center; justify-content: center; gap: 8px;
-            transition: background 0.2s;
-        }
-        .btn-download:hover { background-color: var(--accent-hover); }
-        .btn-secondary {
-            background-color: transparent; border: 1px solid var(--border); color: var(--text-main);
-            padding: 10px; border-radius: 6px; cursor: pointer; font-weight: 600;
-            display: flex; align-items: center; justify-content: center; gap: 8px;
-            transition: all 0.2s;
-        }
-        .btn-secondary:hover { border-color: var(--text-muted); background: var(--bg-input); }
-        /* Terminal Simulation */
-        .terminal {
-            background: #000; color: #3fb950; font-family: var(--font-code);
-            font-size: 0.75rem; padding: 12px; border-radius: 6px; height: 180px;
-            overflow-y: auto; border: 1px solid #30363d;
-        }
-        .terminal-line { margin-bottom: 4px; word-break: break-all; }
-        .terminal-line.error { color: var(--danger); }
-        .terminal-line.info { color: var(--text-muted); }
-        .terminal-line.command { color: var(--text-main); font-weight: bold; }
-        /* Toast Notification */
-        .toast {
-            position: fixed; bottom: 24px; right: 24px;
-            background: var(--bg-panel); border: 1px solid var(--accent);
-            color: var(--text-main); padding: 12px 20px; border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            transform: translateY(100px); opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            z-index: 1000; display: flex; align-items: center; gap: 10px;
-        }
-        .toast.show { transform: translateY(0); opacity: 1; }
-        .toast i { color: var(--accent); }
-        /* Loading Dots */
-        .typing-indicator span {
-            display: inline-block; width: 6px; height: 6px; background-color: var(--text-muted);
-            border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; margin: 0 2px;
-        }
-        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
-        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
-        @keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
-        /* Responsive */
-        @media (max-width: 1024px) {
-            .right-panel { position: absolute; right: 0; height: 100%; transform: translateX(100%); z-index: 60; box-shadow: -5px 0 15px rgba(0,0,0,0.5); }
-            .right-panel.open { transform: translateX(0); }
-        }
-        @media (max-width: 768px) {
-            .sidebar { position: absolute; left: 0; height: 100%; transform: translateX(-100%); box-shadow: 5px 0 15px rgba(0,0,0,0.5); }
-            .sidebar.open { transform: translateX(0); }
-            .message { max-width: 95%; }
-        }
-        /* Animations */
-        .spinner { animation: spin 1s linear infinite; }
-        @keyframes spin { 100% { transform: rotate(360deg); } }
-        .mobile-overlay {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.5); z-index: 30; display: none;
-        }
-        .mobile-overlay.active { display: block; }
-    </style>
 </head>
 <body>
-    <!-- Header -->
-    <header>
-        <div class="logo">
-            <i class="fa-solid fa-cube"></i>
-            <span>Transformers<span style="color:var(--text-muted); font-weight:400; font-size:0.9em;">WebApp</span></span>
-        </div>
-        <div class="header-links">
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
-                Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i>
-            </a>
-        </div>
-        <div class="header-controls">
-            <button class="action-btn" id="toggle-terminal" title="Toggle Tools Panel">
-                <i class="fa-solid fa-sliders"></i>
-            </button>
-            <button class="action-btn" id="toggle-sidebar" style="display:none;" title="Toggle History">
-                <i class="fa-solid fa-bars"></i>
-            </button>
-        </div>
-    </header>
-    <div class="main-container">
-        <!-- Mobile Overlay -->
-        <div class="mobile-overlay" id="mobile-overlay"></div>
-        <!-- Sidebar -->
-        <aside class="sidebar" id="sidebar">
-            <div class="sidebar-header">
-                <button class="btn-new-chat" onclick="createNewConversation()">
-                    <i class="fa-solid fa-plus"></i> New Conversation
-                </button>
-            </div>
-            <div class="history-list" id="history-list">
-                <!-- History Items Injected via JS -->
-            </div>
-            <div class="sidebar-footer">
-                <button class="btn-import" onclick="importConversation()">
-                    <i class="fa-solid fa-file-import"></i> Import JSON
-                </button>
-            </div>
-        </aside>
-        <!-- Main Chat Area -->
-        <main class="chat-area">
-            <div class="chat-header">
-                <div class="model-indicator">
-                    <i class="fa-solid fa-microchip" style="color: var(--accent);"></i>
-                    <span id="current-model-display">Llama-3-8B</span>
-                    <span class="badge" id="focus-mode-badge">Focus: OFF</span>
-                </div>
-                <div>
-                    <button class="action-btn" onclick="toggleFocusMode()" title="Toggle Focus Mode">
-                        <i class="fa-solid fa-crosshairs"></i> Focus
-                    </button>
-                </div>
-            </div>
-            <div class="chat-messages" id="chat-messages">
-                <!-- Messages Injected via JS -->
-            </div>
-            <div class="input-area">
-                <div class="input-wrapper">
-                    <textarea class="chat-input" id="user-input" placeholder="Type a message... (Shift+Enter for new line)"></textarea>
-                    <button class="send-btn" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
-                </div>
-            </div>
-        </main>
-        <!-- Right Panel (Models & Tools) -->
-        <aside class="right-panel" id="right-panel">
-            <!-- Model Showcase -->
-            <div class="panel-section">
-                <div class="panel-title"><i class="fa-solid fa-layer-group"></i> Model Showcase</div>
-                <div id="model-list">
-                    <!-- Models injected JS -->
-                </div>
-            </div>
-            <!-- Configuration & Downloads -->
-            <div class="panel-section">
-                <div class="panel-title"><i class="fa-solid fa-gears"></i> Configuration & API</div>
-                <div class="download-controls">
-                    <div class="form-group">
-                        <label>WebApp Folder Path</label>
-                        <input type="text" class="form-input" value=":/app/models" id="app-path">
-                    </div>
-                    <div class="form-group">
-                        <label>Download Destination</label>
-                        <input type="text" class="form-input" value="~/Downloads/" id="dl-path">
-                    </div>
-                    <button class="btn-download" onclick="startDownloadProcess()">
-                        <i class="fa-solid fa-cloud-arrow-down"></i> Fetch & Download Models
-                    </button>
-                    <button class="btn-secondary" onclick="simulateAutoConfig()">
-                        <i class="fa-solid fa-wand-magic-sparkles"></i> Auto Config App
-                    </button>
-                </div>
-            </div>
-            <!-- Simulated Terminal -->
-            <div class="panel-section">
-                <div class="panel-title">
-                    <i class="fa-solid fa-terminal"></i> System Terminal
-                    <span style="margin-left:auto; font-size:0.6em; cursor:pointer;" onclick="clearTerminal()">Clear</span>
-                </div>
-                <div class="terminal" id="terminal-output">
-                    <div class="terminal-line info">> System initialized...</div>
-                    <div class="terminal-line info">> Ready for commands.</div>
-                </div>
-            </div>
-        </aside>
     </div>
-    <!-- Toast Notification -->
-    <div class="toast" id="toast">
-        <i class="fa-solid fa-circle-check"></i>
-        <span id="toast-msg">Operation Successful</span>
     </div>
-    <script>
-        // --- State Management ---
-        const state = {
-            conversations: [],
-            currentConversationId: null,
-            models: [
-                { id: 'llama-3', name: 'Llama-3-8B', type: 'Instruct', size: '4.7GB', desc: 'General purpose assistant.' },
-                { id: 'mistral', name: 'Mistral-7B', type: 'Creative', size: '4.1GB', desc: 'Good for creative writing.' },
-                { id: 'falcon', name: 'Falcon-40B', type: 'Logic', size: '80GB', desc: 'Advanced reasoning.' },
-                { id: 'bert', name: 'BERT-Large', type: 'NLP', size: '1.2GB', desc: 'Text classification & embeddings.' }
-            ],
-            currentModel: 'llama-3',
-            focusMode: false,
-            appPath: ':/app/models',
-            dlPath: '~/Downloads/'
-        };
-        // --- Initialization ---
-        document.addEventListener('DOMContentLoaded', () => {
-            loadFromStorage();
-            if (state.conversations.length === 0) {
-                createNewConversation(true);
-            } else {
-                loadConversation(state.conversations[0].id);
-            }
-            renderModelList();
-            renderHistoryList();
-            checkResponsive();
-            // Auto-refresh simulation (AJAX polling visual)
-            setInterval(() => {
-                if(Math.random() > 0.95) {
-                    logTerminal(`> Checking HuggingFace API for updates...`, 'info');
-                }
-            }, 15000);
-            // Textarea auto-resize
-            const ta = document.getElementById('user-input');
-            ta.addEventListener('input', function() {
-                this.style.height = 'auto';
-                this.style.height = (this.scrollHeight) + 'px';
-            });
-            // Handle Enter key
-            ta.addEventListener('keydown', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            });
-            // Handle window resize
-            window.addEventListener('resize', checkResponsive);
-        });
-        function checkResponsive() {
-            const toggleBtn = document.getElementById('toggle-sidebar');
-            if (window.innerWidth <= 768) {
-                toggleBtn.style.display = 'block';
-            } else {
-                toggleBtn.style.display = 'none';
-                document.getElementById('sidebar').classList.remove('open');
-                document.getElementById('mobile-overlay').classList.remove('active');
-            }
-        }
-        // --- Core Logic ---
-        function createNewConversation(isFirst = false) {
-            const newId = Date.now().toString();
-            const currentModelObj = state.models.find(m => m.id === state.currentModel);
-            const newConv = {
-                id: newId,
-                name: isFirst ? 'New Conversation' : `Conversation ${state.conversations.length + 1}`,
-                model: state.currentModel,
-                messages: []
-            };
-            // Pre-suggestion based on model
-            if (currentModelObj) {
-                newConv.messages.push({
-                    role: 'system',
-                    content: `Switched to ${currentModelObj.name}. ${currentModelObj.desc} Suggestion: Try asking for a summary or creative story.`
-                });
-            }
-            state.conversations.unshift(newConv);
-            state.currentConversationId = newId;
-            saveToStorage();
-            renderHistoryList();
-            renderChat();
-            if(!isFirst) showToast("New Conversation Created");
-            // Close sidebar on mobile if open
-            if(window.innerWidth <= 768) toggleSidebar();
-        }
-        function loadConversation(id) {
-            state.currentConversationId = id;
-            const conv = state.conversations.find(c => c.id === id);
-            if (conv) {
-                // Update current model to match the conversation's model
-                if (conv.model && state.models.find(m => m.id === conv.model)) {
-                    state.currentModel = conv.model;
-                    document.getElementById('current-model-display').innerText = state.models.find(m => m.id === conv.model).name;
-                    renderModelList(); // Update active state
-                }
-                renderChat();
-                renderHistoryList(); // Update active class
-            }
-        }
-        function deleteConversation(id, e) {
-            e.stopPropagation();
-            if(confirm("Delete this conversation?")) {
-                state.conversations = state.conversations.filter(c => c.id !== id);
-                if (state.conversations.length === 0) {
-                    createNewConversation();
-                } else {
-                    loadConversation(state.conversations[0].id);
-                }
-                saveToStorage();
-                renderHistoryList();
-            }
-        }
-        function updateConversationName(id, newName) {
-            const conv = state.conversations.find(c => c.id === id);
-            if (conv) {
-                conv.name = newName;
-                saveToStorage();
-                renderHistoryList();
-            }
-        }
-        function sendMessage() {
-            const input = document.getElementById('user-input');
-            const text = input.value.trim();
-            if (!text) return;
-            const conv = state.conversations.find(c => c.id === state.currentConversationId);
-            if (!conv) return;
-            // Add User Message
-            conv.messages.push({ role: 'user', content: text });
-            input.value = '';
-            input.style.height = 'auto'; // Reset height
-            saveToStorage();
-            renderChat();
-            // Show typing indicator
-            const typingId = 'typing-' + Date.now();
-            addTypingIndicator(typingId);
-            // Simulate AI Response
-            setTimeout(() => {
-                removeTypingIndicator(typingId);
-                const aiResponse = generateSimulatedResponse(text);
-                conv.messages.push({ role: 'ai', content: aiResponse });
-                saveToStorage();
-                renderChat();
-            }, 1200 + Math.random() * 1000);
-        }
-        function switchModel(modelId) {
-            state.currentModel = modelId;
-            const model = state.models.find(m => m.id === modelId);
-            // Update UI
-            document.getElementById('current-model-display').innerText = model.name;
-            renderModelList();
-            // Add intro suggestion to current chat
-            const conv = state.conversations.find(c => c.id === state.currentConversationId);
-            if (conv) {
-                conv.model = modelId;
-                conv.messages.push({
-                    role: 'system',
-                    content: `Model switched to ${model.name}. Intro suggestion: This model is optimized for ${model.type} tasks.`
-                });
-                saveToStorage();
-                renderChat();
-            }
-            showToast(`Switched to ${model.name}`);
-        }
-        function toggleFocusMode() {
-            state.focusMode = !state.focusMode;
-            const badge = document.getElementById('focus-mode-badge');
-            const rightPanel = document.getElementById('right-panel');
-            if (state.focusMode) {
-                badge.classList.add('active');
-                badge.innerText = 'Focus: ON';
-                // Hide right panel in focus mode
-                rightPanel.style.display = 'none';
-                showToast("Focus Mode Enabled: Distractions hidden");
-            } else {
-                badge.classList.remove('active');
-                badge.innerText = 'Focus: OFF';
-                // Restore right panel
-                rightPanel.style.display = 'flex';
-                showToast("Focus Mode Disabled");
-            }
-        }
-        function importConversation() {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = '.json';
-            input.onchange = e => {
-                const file = e.target.files[0];
-                if (file) {
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        try {
-                            const imported = JSON.parse(e.target.result);
-                            // Basic validation
-                            if(!Array.isArray(imported)) throw new Error("Invalid format");
-                            imported.id = Date.now().toString(); // Ensure unique ID
-                            state.conversations.unshift(imported);
-                            saveToStorage();
-                            renderHistoryList();
-                            loadConversation(imported.id);
-                            showToast("Conversation Imported Successfully");
-                            logTerminal(`> Imported ${file.name} to repository.`, 'info');
-                        } catch (err) {
-                            showToast("Invalid JSON file");
-                            logTerminal(`> Error importing file: ${err.message}`, 'error');
-                        }
-                    };
-                    reader.readAsText(file);
-                }
-            };
-            input.click();
-        }
-        // --- Render Functions ---
-        function renderHistoryList() {
-            const list = document.getElementById('history-list');
-            list.innerHTML = '';
-            state.conversations.forEach(conv => {
-                const div = document.createElement('div');
-                div.className = `history-item ${conv.id === state.currentConversationId ? 'active' : ''}`;
-                div.onclick = () => loadConversation(conv.id);
-                div.innerHTML = `
-                    <div class="history-name" contenteditable="true"
-                         onblur="updateConversationName('${conv.id}', this.innerText)"
-                         onkeydown="if(event.key==='Enter'){event.preventDefault();this.blur();}">
-                         ${escapeHtml(conv.name)}
-                    </div>
-                    <div class="history-actions">
-                        <i class="fa-solid fa-trash" onclick="deleteConversation('${conv.id}', event)" title="Delete"></i>
-                    </div>
-                `;
-                list.appendChild(div);
-            });
-        }
-        function renderChat() {
-            const container = document.getElementById('chat-messages');
-            const conv = state.conversations.find(c => c.id === state.currentConversationId);
-            container.innerHTML = '';
-            if (!conv) return;
-            conv.messages.forEach(msg => {
-                const div = document.createElement('div');
-                div.className = `message ${msg.role}`;
-                let contentHtml = escapeHtml(msg.content);
-                // Action buttons for User/AI messages
-                if (msg.role === 'user' || msg.role === 'ai') {
-                    div.innerHTML = `
-                        <div class="msg-actions">
-                            <button class="action-btn" onclick="copyText(this)" title="Copy">
-                                <i class="fa-regular fa-copy"></i>
-                            </button>
-                        </div>
-                        <div class="bubble">${contentHtml}</div>
-                    `;
-                } else {
-                    div.innerHTML = contentHtml;
-                }
-                container.appendChild(div);
-            });
-            // Scroll to bottom
-            container.scrollTop = container.scrollHeight;
-        }
-        function addTypingIndicator(id) {
-            const container = document.getElementById('chat-messages');
-            const div = document.createElement('div');
-            div.className = 'message ai';
-            div.id = id;
-            div.innerHTML = `
-                <div class="bubble typing-indicator">
-                    <span></span><span></span><span></span>
-                </div>
-            `;
-            container.appendChild(div);
-            container.scrollTop = container.scrollHeight;
-        }
-        function removeTypingIndicator(id) {
-            const el = document.getElementById(id);
-            if(el) el.remove();
-        }
-        function renderModelList() {
-            const list = document.getElementById('model-list');
-            list.innerHTML = '';
-            state.models.forEach(model => {
-                const div = document.createElement('div');
-                div.className = `model-card ${model.id === state.currentModel ? 'active' : ''}`;
-                div.onclick = () => switchModel(model.id);
-                div.innerHTML = `
-                    <div class="model-header">
-                        <span class="model-name">${model.name}</span>
-                        <i class="fa-solid fa-check-circle" style="opacity: ${model.id === state.currentModel ? 1 : 0}; color: var(--accent);"></i>
-                    </div>
-                    <div class="model-meta">${model.desc}</div>
-                    <div class="showcase-stats">
-                        <span class="stat">${model.type}</span>
-                        <span class="stat">${model.size}</span>
-                    </div>
-                `;
-                list.appendChild(div);
-            });
-        }
-        // --- Features & Simulation ---
-        function copyText(btn) {
-            const text = btn.closest('.message').querySelector('.bubble').innerText;
-            navigator.clipboard.writeText(text).then(() => {
-                showToast("Copied to clipboard");
-            });
-        }
-        function startDownloadProcess() {
-            const appPath = document.getElementById('app-path').value;
-            const dlPath = document.getElementById('dl-path').value;
-            logTerminal(`> Initializing HuggingFace API client...`, 'info');
-            logTerminal(`> Fetching model list...`, 'info');
-            setTimeout(() => {
-                logTerminal(`> Found 4 new models available.`, 'info');
-                logTerminal(`> Starting download to ${dlPath}...`, 'info');
-                simulateProgress();
-            }, 1000);
-        }
-        function simulateProgress() {
-            let progress = 0;
-            const interval = setInterval(() => {
-                progress += 10;
-                if (progress <= 100) {
-                    logTerminal(`> Downloading model weights... [${progress}%]`);
-                } else {
-                    clearInterval(interval);
-                    completeDownload();
-                }
-            }, 300);
-        }
-        function completeDownload() {
-            const appPath = document.getElementById('app-path').value;
-            logTerminal(`> Download complete. Verifying checksums...`, 'info');
-            logTerminal(`> Moving files to ${appPath}...`, 'info');
-            logTerminal(`> python bash_script.py --move-source ~/Downloads/ --dest ${appPath}`, 'command');
-            setTimeout(() => {
-                logTerminal(`> SUCCESS: Models integrated into app folder.`, 'info');
-                showToast("Models Downloaded & Integrated");
-            }, 1000);
-        }
-        function simulateAutoConfig() {
-            logTerminal(`> Auto-configuring application...`);
-            logTerminal(`> Detecting system architecture... x86_64`);
-            logTerminal(`> Setting default paths... Done.`);
-            logTerminal(`> Optimizing CSS3 rendering... Done.`);
-            setTimeout(() => {
-                showToast("Auto Configuration Complete");
-            }, 800);
-        }
-        function logTerminal(msg, type = '') {
-            const term = document.getElementById('terminal-output');
-            const line = document.createElement('div');
-            line.className = `terminal-line ${type}`;
-            line.innerText = msg;
-            term.appendChild(line);
-            term.scrollTop = term.scrollHeight;
-        }
-        function clearTerminal() {
-            document.getElementById('terminal-output').innerHTML = '';
-        }
-        // --- Utilities ---
-        function showToast(message) {
-            const toast = document.getElementById('toast');
-            const msgSpan = document.getElementById('toast-msg');
-            msgSpan.innerText = message;
-            toast.classList.add('show');
-            setTimeout(() => {
-                toast.classList.remove('show');
-            }, 3000);
-        }
-        function escapeHtml(text) {
-            const map = {
-                '&': '&amp;',
-                '<': '&lt;',
-                '>': '&gt;',
-                '"': '&quot;',
-                "'": '&#039;'
-            };
-            return text.replace(/[&<>"']/g, function(m) { return map[m]; });
-        }
-        function generateSimulatedResponse(input) {
-            const responses = [
-                "That is an interesting perspective. Could you elaborate on how this relates to the model architecture?",
-                "I have processed your request using the current transformer model. The output suggests a high probability of success.",
-                "Based on the file repository analysis, the configuration seems optimal.",
-                "Here is a suggestion for your code: Ensure you are handling the asynchronous nature of the AJAX calls correctly.",
-                "I can help you move those files. Please confirm the destination path in the settings panel.",
-                "Analysis complete. The latent vectors indicate a strong correlation with the input prompt."
-            ];
-            return responses[Math.floor(Math.random() * responses.length)];
-        }
-        // --- Storage ---
-        function saveToStorage() {
-            localStorage.setItem('transformers_app_data', JSON.stringify(state.conversations));
-        }
-        function loadFromStorage() {
-            const data = localStorage.getItem('transformers_app_data');
-            if (data) {
-                try {
-                    state.conversations = JSON.parse(data);
-                } catch(e) {
-                    console.error("Failed to load history", e);
-                }
-            }
-        }
-        // --- Toggles ---
-        function toggleSidebar() {
-            const sb = document.getElementById('sidebar');
-            const overlay = document.getElementById('mobile-overlay');
-            sb.classList.toggle('open');
-            overlay.classList.toggle('active');
-        }
-        document.getElementById('toggle-sidebar').addEventListener('click', toggle

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Transformers Workbench</title>
+  <!-- Import FontAwesome for Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Import Google Fonts -->
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap"
+    rel="stylesheet">
+  <style>
+    /* --- CSS Variables & Reset --- */
+    :root {
+      --bg-dark: #0d1117;
+      --bg-panel: #161b22;
+      --bg-card: #21262d;
+      --bg-input: #0d1117;
+      --border: #30363d;
+      --border-hover: #8b949e;
+      --accent: #58a6ff;
+      --accent-glow: rgba(88, 166, 255, 0.15);
+      --accent-hover: #79c0ff;
+      --success: #238636;
+      --danger: #da3633;
+      --text-main: #c9d1d9;
+      --text-muted: #8b949e;
+      --font-main: 'Inter', sans-serif;
+      --font-code: 'JetBrains Mono', monospace;
+      --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+      --header-height: 60px;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      outline: none;
+    }
+    body {
+      font-family: var(--font-main);
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    /* --- Scrollbar Styling --- */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--bg-dark);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+    /* --- Header --- */
+    header {
+      height: var(--header-height);
+      background-color: var(--bg-panel);
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      flex-shrink: 0;
+      z-index: 50;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    }
+    .logo {
+      font-weight: 700;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--text-main);
+      cursor: pointer;
+      transition: opacity 0.2s;
+    }
+    .logo:hover {
+      opacity: 0.9;
+    }
+    .logo i {
+      color: var(--accent);
+      font-size: 1.4rem;
+    }
+    .header-links a {
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: opacity 0.2s, color 0.2s;
+      font-weight: 500;
+      padding: 6px 12px;
+      border-radius: 6px;
+      background: rgba(88, 166, 255, 0.1);
+    }
+    .header-links a:hover {
+      opacity: 1;
+      background: rgba(88, 166, 255, 0.2);
+      text-decoration: none;
+    }
+    .header-controls {
+      display: flex;
+      gap: 10px;
+    }
+    /* --- Main Layout --- */
+    .main-container {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+    }
+    /* --- Sidebar (History) --- */
+    .sidebar {
+      width: 280px;
+      background-color: var(--bg-panel);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 40;
+    }
+    .sidebar-header {
+      padding: 15px;
+      border-bottom: 1px solid var(--border);
+    }
+    .btn-new-chat {
+      width: 100%;
+      padding: 10px;
+      background-color: var(--success);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: background 0.2s, transform 0.1s;
+      box-shadow: 0 2px 5px rgba(35, 134, 54, 0.3);
+    }
+    .btn-new-chat:hover {
+      background-color: #2ea043;
+      transform: translateY(-1px);
+    }
+    .btn-new-chat:active {
+      transform: translateY(0);
+    }
+    .history-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 10px;
+    }
+    .history-item {
+      padding: 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 5px;
+      color: var(--text-main);
+      transition: background 0.2s, transform 0.1s;
+      border: 1px solid transparent;
+    }
+    .history-item:hover {
+      background-color: var(--bg-card);
+      border-color: var(--border);
+    }
+    .history-item.active {
+      background-color: var(--accent-glow);
+      border-color: var(--accent);
+    }
+    .history-name {
+      font-size: 0.9rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      margin-right: 8px;
+      padding: 2px 4px;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      cursor: text;
+    }
+    .history-name:focus {
+      border-color: var(--accent);
+      background: var(--bg-input);
+    }
+    .history-actions i {
+      color: var(--text-muted);
+      margin-left: 5px;
+      font-size: 0.8rem;
+      padding: 4px;
+      border-radius: 4px;
+      transition: all 0.2s;
+    }
+    .history-actions i:hover {
+      color: var(--danger);
+      background: rgba(218, 54, 51, 0.1);
+    }
+    .sidebar-footer {
+      padding: 15px;
+      border-top: 1px solid var(--border);
+    }
+    .btn-import {
+      width: 100%;
+      padding: 8px;
+      background: transparent;
+      border: 1px dashed var(--text-muted);
+      color: var(--text-muted);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .btn-import:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: rgba(88, 166, 255, 0.05);
+    }
+    /* --- Chat Area --- */
+    .chat-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--bg-dark);
+      position: relative;
+      min-width: 0;
+    }
+    .chat-header {
+      padding: 10px 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: rgba(22, 27, 34, 0.8);
+      backdrop-filter: blur(10px);
+    }
+    .model-indicator {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: 600;
+      font-size: 0.95rem;
+    }
+    .badge {
+      font-size: 0.7rem;
+      padding: 2px 8px;
+      border-radius: 12px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 700;
+      transition: all 0.3s;
+    }
+    .badge.active {
+      background: var(--success);
+      color: white;
+      border-color: var(--success);
+      box-shadow: 0 0 8px rgba(35, 134, 54, 0.4);
+    }
+    .chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      scroll-behavior: smooth;
+    }
+    .message {
+      max-width: 85%;
+      line-height: 1.6;
+      position: relative;
+      animation: fadeIn 0.3s ease;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .message.user {
+      align-self: flex-end;
+    }
+    .message.ai {
+      align-self: flex-start;
+    }
+    .message.system {
+      align-self: center;
+      max-width: 90%;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      text-align: center;
+      background: rgba(139, 148, 158, 0.1);
+      padding: 4px 12px;
+      border-radius: 20px;
+      border: 1px solid var(--border);
+    }
+    .bubble {
+      padding: 12px 18px;
+      border-radius: 12px;
+      position: relative;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      font-size: 0.95rem;
+    }
+    .message.user .bubble {
+      background-color: var(--accent);
+      color: #fff;
+      border-bottom-right-radius: 2px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+    .message.ai .bubble {
+      background-color: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-bottom-left-radius: 2px;
+      color: var(--text-main);
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+    .msg-actions {
+      position: absolute;
+      top: -25px;
+      right: 0;
+      display: none;
+      gap: 8px;
+    }
+    .message:hover .msg-actions {
+      display: flex;
+    }
+    .action-btn {
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: all 0.2s;
+    }
+    .action-btn:hover {
+      color: var(--accent);
+      border-color: var(--accent);
+      transform: translateY(-2px);
+    }
+    .input-area {
+      padding: 20px;
+      border-top: 1px solid var(--border);
+      background-color: var(--bg-panel);
+    }
+    .input-wrapper {
+      position: relative;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .chat-input {
+      width: 100%;
+      background-color: var(--bg-input);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 15px 50px 15px 15px;
+      color: var(--text-main);
+      font-family: var(--font-main);
+      resize: none;
+      min-height: 54px;
+      max-height: 200px;
+      line-height: 1.5;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    .chat-input:focus {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
+    }
+    .send-btn {
+      position: absolute;
+      right: 12px;
+      bottom: 12px;
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 1.2rem;
+      transition: color 0.2s, transform 0.2s;
+    }
+    .send-btn:hover {
+      color: var(--accent);
+      transform: scale(1.1);
+    }
+    /* --- Right Panel (Models & Config) --- */
+    .right-panel {
+      width: 350px;
+      background-color: var(--bg-panel);
+      border-left: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      transition: width 0.3s ease, transform 0.3s ease;
+    }
+    .panel-section {
+      padding: 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .panel-title {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      margin-bottom: 12px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    /* Model Cards */
+    .model-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .model-card:hover {
+      border-color: var(--text-muted);
+      transform: translateY(-2px);
+      background: rgba(33, 38, 45, 0.8);
+    }
+    .model-card.active {
+      border-color: var(--accent);
+      background: var(--accent-glow);
+      box-shadow: 0 0 0 1px var(--accent);
+    }
+    .model-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6px;
+    }
+    .model-name {
+      font-weight: 600;
+      font-size: 0.95rem;
+      color: var(--text-main);
+    }
+    .model-meta {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      line-height: 1.4;
+    }
+    .showcase-stats {
+      display: flex;
+      gap: 8px;
+      margin-top: 10px;
+      flex-wrap: wrap;
+    }
+    .stat {
+      font-size: 0.7rem;
+      background: rgba(255, 255, 255, 0.05);
+      padding: 2px 6px;
+      border-radius: 4px;
+      color: var(--text-muted);
+      border: 1px solid var(--border);
+    }
+    /* Configuration & Downloads */
+    .download-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .form-group label {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .form-input {
+      background: var(--bg-input);
+      border: 1px solid var(--border);
+      color: var(--text-main);
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-family: var(--font-code);
+      font-size: 0.85rem;
+      transition: border-color 0.2s;
+    }
+    .form-input:focus {
+      border-color: var(--accent);
+    }
+    .btn-download {
+      background-color: var(--accent);
+      color: white;
+      border: none;
+      padding: 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: background 0.2s, transform 0.1s;
+    }
+    .btn-download:hover {
+      background-color: var(--accent-hover);
+      transform: translateY(-1px);
+    }
+    .btn-secondary {
+      background-color: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-main);
+      padding: 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: all 0.2s;
+    }
+    .btn-secondary:hover {
+      border-color: var(--text-muted);
+      background: var(--bg-input);
+    }
+    /* Terminal Simulation */
+    .terminal {
+      background: #000;
+      color: #3fb950;
+      font-family: var(--font-code);
+      font-size: 0.75rem;
+      padding: 12px;
+      border-radius: 6px;
+      height: 180px;
+      overflow-y: auto;
+      border: 1px solid #30363d;
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
+    }
+    .terminal-line {
+      margin-bottom: 4px;
+      word-break: break-all;
+    }
+    .terminal-line.error {
+      color: var(--danger);
+    }
+    .terminal-line.info {
+      color: var(--text-muted);
+    }
+    .terminal-line.command {
+      color: var(--text-main);
+      font-weight: bold;
+    }
+    /* Toast Notification */
+    .toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      background: var(--bg-panel);
+      border: 1px solid var(--accent);
+      color: var(--text-main);
+      padding: 12px 20px;
+      border-radius: 8px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      transform: translateY(100px);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .toast.show {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    .toast i {
+      color: var(--accent);
+    }
+    /* Loading Dots */
+    .typing-indicator span {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background-color: var(--text-muted);
+      border-radius: 50%;
+      animation: typing 1.4s infinite ease-in-out both;
+      margin: 0 2px;
+    }
+    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes typing {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+    /* Responsive */
+    @media (max-width: 1024px) {
+      .right-panel {
+        position: absolute;
+        right: 0;
+        height: 100%;
+        transform: translateX(100%);
+        z-index: 60;
+        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
+      }
+      .right-panel.open {
+        transform: translateX(0);
+      }
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        position: absolute;
+        left: 0;
+        height: 100%;
+        transform: translateX(-100%);
+        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
+      }
+      .sidebar.open {
+        transform: translateX(0);
+      }
+      .message {
+        max-width: 95%;
+      }
+      .header-links span {
+        display: none;
+      }
+    }
+    /* Animations */
+    .spinner {
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      100% { transform: rotate(360deg); }
+    }
+    .mobile-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 30;
+      display: none;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .mobile-overlay.active {
+      display: block;
+      opacity: 1;
+    }
+  </style>
 </head>
 <body>
+  <!-- Header -->
+  <header>
+    <div class="logo">
+      <i class="fa-solid fa-cube"></i>
+      <span>Transformers<span style="color:var(--text-muted); font-weight:400; font-size:0.9em;">WebApp</span></span>
     </div>
+    <div class="header-links">
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
+        Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i>
+      </a>
     </div>
+    <div class="header-controls">
+      <button class="action-btn" id="toggle-terminal" title="Toggle Tools Panel">
+        <i class="fa-solid fa-sliders"></i>
+      </button>
+      <button class="action-btn" id="toggle-sidebar" style="display:none;" title="Toggle History">
+        <i class="fa-solid fa-bars"></i>
+      </button>
+    </div>
+  </header>
+  <div class="main-container">
+    <!-- Mobile Overlay -->
+    <div class="mobile-overlay" id="mobile-overlay"></div>
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <button class="btn-new-chat" onclick="createNewConversation()">
+          <i class="fa-solid fa-plus"></i> New Conversation
+        </button>
+      </div>
+      <div class="history-list" id="history-list">
+        <!-- History Items Injected via JS -->
+      </div>
+      <div class="sidebar-footer">
+        <button class="btn-import" onclick="importConversation()">
+          <i class="fa-solid fa-file-import"></i> Import JSON
+        </button>
+      </div>
+    </aside>
+    <!-- Main Chat Area -->
+    <main class="chat-area">
+      <div class="chat-header">
+        <div class="model-indicator">
+          <i class="fa-solid fa-microchip" style="color: var(--accent);"></i>
+          <span id="current-model-display">Llama-3-8B</span>
+          <span class="badge" id="focus-mode-badge">Focus: OFF</span>
+        </div>
+        <div>
+          <button class="action-btn" onclick="toggleFocusMode()" title="Toggle Focus Mode">
+            <i class="fa-solid fa-crosshairs"></i> Focus
+          </button>
+        </div>
+      </div>
+      <div class="chat-messages" id="chat-messages">
+        <!-- Messages Injected via JS -->
+      </div>
+      <div class="input-area">
+        <div class="input-wrapper">
+          <textarea class="chat-input" id="user-input" placeholder="Type a message... (Shift+Enter for new line)"></textarea>
+          <button class="send-btn" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
+        </div>
+      </div>
+    </main>
+    <!-- Right Panel (Models & Tools) -->
+    <aside class="right-panel" id="right-panel">
+      <!-- Model Showcase -->
+      <div class="panel-section">
+        <div class="panel-title"><i class="fa-solid fa-layer-group"></i> Model Showcase</div>
+        <div id="model-list">
+          <!-- Models injected JS -->
+        </div>
+      </div>
+      <!-- Configuration & Downloads -->
+      <div class="panel-section">
+        <div class="panel-title"><i class="fa-solid fa-gears"></i> Configuration & API</div>
+        <div class="download-controls">
+          <div class="form-group">
+            <label>WebApp Folder Path</label>
+            <input type="text" class="form-input" value=":/app/models" id="app-path">
+          </div>
+          <div class="form-group">
+            <label>Download Destination</label>
+            <input type="text" class="form-input" value="~/Downloads/" id="dl-path">
+          </div>
+          <button class="btn-download" onclick="startDownloadProcess()">
+            <i class="fa-solid fa-cloud-arrow-down"></i> Fetch & Download Models
+          </button>
+          <button class="btn-secondary" onclick="simulateAutoConfig()">
+            <i class="fa-solid fa-wand-magic-sparkles"></i> Auto Config App
+          </button>
+        </div>
+      </div>
+      <!-- Simulated Terminal -->
+      <div class="panel-section">
+        <div class="panel-title">
+          <i class="fa-solid fa-terminal"></i> System Terminal
+          <span style="margin-left:auto; font-size:0.6em; cursor:pointer; color: var(--text-muted);" onclick="clearTerminal()">Clear</span>
+        </div>
+        <div class="terminal" id="terminal-output">
+          <div class="terminal-line info">> System initialized...</div>
+          <div class="terminal-line info">> Waiting for input...</div>
+        </div>
+      </div>
+    </aside>
+  </div>
+  <!-- Toast Notification -->
+  <div class="toast" id="toast">
+    <i class="fa-solid fa-circle-check"></i>
+    <span id="toast-msg">Operation Successful</span>
+  </div>
+  <script>
+    // --- State Management ---
+    const state = {
+      conversations: [],
+      currentConversationId: null,
+      models: [
+        { id: 'llama-3', name: 'Llama-3-8B', type: 'Instruct', size: '4.7GB', desc: 'General purpose assistant.' },
+        { id: 'mistral', name: 'Mistral-7B', type: 'Creative', size: '4.1GB', desc: 'Good for creative writing.' },
+        { id: 'falcon', name: 'Falcon-40B', type: 'Logic', size: '80GB', desc: 'Advanced reasoning.' },
+        { id: 'bert', name: 'BERT-Large', type: 'NLP', size: '1.2GB', desc: 'Text classification & embeddings.' }
+      ],
+      currentModel: 'llama-3',
+      focusMode: false,
+      appPath: ':/app/models',
+      dlPath: '~/Downloads/'
+    };
+    // --- Initialization ---
+    document.addEventListener('DOMContentLoaded', () => {
+      loadFromStorage();
+      if (state.conversations.length === 0) {
+        createNewConversation(true);
+      } else {
+        loadConversation(state.conversations[0].id);
+      }
+      renderModelList();
+      renderHistoryList();
+      checkResponsive();
+      // Auto-refresh simulation (AJAX polling visual)
+      setInterval(() => {
+        if(Math.random() > 0.95) {
+          logTerminal(`> Checking HuggingFace API for updates...`, 'info');
+        }
+      }, 15000);
+      // Textarea auto-resize
+      const ta = document.getElementById('user-input');
+      ta.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight) + 'px';
+      });
+      // Handle Enter key
+      ta.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage();
+        }
+      });
+      // Handle window resize
+      window.addEventListener('resize', checkResponsive);
+      // Toggle Terminal Panel Button
+      document.getElementById('toggle-terminal').addEventListener('click', () => {
+        const panel = document.getElementById('right-panel');
+        if (window.innerWidth <= 1024) {
+          panel.classList.toggle('open');
+        } else {
+          // Toggle visibility on desktop
+          if (panel.style.width === '0px') {
+            panel.style.width = '350px';
+            panel.style.opacity = '1';
+            panel.style.padding = '0'; // reset padding if needed
+          } else {
+            panel.style.width = '0px';
+            panel.style.opacity = '0';
+            panel.style.overflow = 'hidden';
+            panel.style.padding = '0'; // hide content
+          }
+        }
+      });
+    });
+    function checkResponsive() {
+      const toggleBtn = document.getElementById('toggle-sidebar');
+      if (window.innerWidth <= 768) {
+        toggleBtn.style.display = 'block';
+      } else {
+        toggleBtn.style.display = 'none';
+        document.getElementById('sidebar').classList.remove('open');
+        document.getElementById('mobile-overlay').classList.remove('active');
+      }
+    }
+    // --- Core Logic ---
+    function createNewConversation(isFirst = false) {
+      const newId = Date.now().toString();
+      const currentModelObj = state.models.find(m => m.id === state.currentModel);
+      const newConv = {
+        id: newId,
+        name: isFirst ? 'New Conversation' : `Conversation ${state.conversations.length + 1}`,
+        model: state.currentModel,
+        messages: []
+      };
+      // Pre-suggestion based on model
+      if (currentModelObj) {
+        newConv.messages.push({
+          role: 'system',
+          content: `Switched to ${currentModelObj.name}. ${currentModelObj.desc} Suggestion: Try asking for a summary or creative story.`
+        });
+      }
+      state.conversations.unshift(newConv);
+      state.currentConversationId = newId;
+      saveToStorage();
+      renderHistoryList();
+      renderChat();
+      if(!isFirst) showToast("New Conversation Created");
+      // Close sidebar on mobile if open
+      if(window.innerWidth <= 768) toggleSidebar();
+    }
+    function loadConversation(id) {
+      state.currentConversationId = id;
+      const conv = state.conversations.find(c => c.id === id);
+      if (conv) {
+        // Update current model to match the conversation's model
+        if (conv.model && state.models.find(m => m.id === conv.model)) {
+          state.currentModel = conv.model;
+          document.getElementById('current-model-display').innerText = state.models.find(m => m.id === conv.model).name;
+          renderModelList(); // Update active state
+        }
+        renderChat();
+        renderHistoryList(); // Update active class
+      }
+    }
+    function deleteConversation(id, e) {
+      e.stopPropagation();
+      if(confirm("Delete this conversation?")) {
+        state.conversations = state.conversations.filter(c => c.id !== id);
+        if (state.conversations.length === 0) {
+          createNewConversation();
+        } else {
+          loadConversation(state.conversations[0].id);
+        }
+        saveToStorage();
+        renderHistoryList();
+      }
+    }
+    function updateConversationName(id, newName) {
+      const conv = state.conversations.find(c => c.id === id);
+      if (conv) {
+        conv.name = newName;
+        saveToStorage();
+        renderHistoryList();
+      }
+    }
+    function sendMessage() {
+      const input = document.getElementById('user-input');
+      const text = input.value.trim();
+      if (!text) return;
+      const conv = state.conversations.find(c => c.id === state.currentConversationId);
+      if (!conv) return;
+      // Add User Message
+      conv.messages.push({ role: 'user', content: text });
+      input.value = '';
+      input.style.height = 'auto'; // Reset height
+      saveToStorage();
+      renderChat();
+      // Show typing indicator
+      const typingId = 'typing-' + Date.now();
+      addTypingIndicator(typingId);
+      // Simulate AI Response
+      setTimeout(() => {
+        removeTypingIndicator(typ