Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatUI — Local Multi-Model Studio</title> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Highlight.js for Code Highlighting --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <!-- Marked.js for Markdown Parsing --> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <!-- Custom Style Sheet --> | |
| <link rel="stylesheet" href="/static/style.css?v=10"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Main Workspace --> | |
| <main class="main-workspace"> | |
| <!-- Top Navigation Bar --> | |
| <header class="workspace-header"> | |
| <div class="header-left-group"> | |
| <button class="header-btn" id="btn-toggle-left" title="Chat History"> | |
| <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> | |
| </button> | |
| <div class="header-brand"> | |
| <img src="/static/deepseek-color.svg" alt="ChatUI Logo" class="brand-logo-img"> | |
| <span class="brand-name">ChatUI Studio</span> | |
| </div> | |
| <!-- Model picker (new) --> | |
| <div class="header-model-picker" id="header-model-picker-wrap"> | |
| <button class="model-picker-trigger" id="model-picker-trigger" title="Select model"> | |
| <span class="model-picker-dot" id="model-picker-dot"></span> | |
| <span class="model-picker-name" id="model-picker-name">Loading models…</span> | |
| <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> | |
| </button> | |
| <div class="model-picker-menu" id="model-picker-menu" hidden> | |
| <!-- populated dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="header-btn" id="menu-new-chat" title="New Chat"> | |
| <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z"></path></svg> | |
| <span>New Chat</span> | |
| </button> | |
| <button class="header-btn" id="btn-toggle-right" title="Settings"> | |
| <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Task selector bar (new) --> | |
| <div class="task-bar" id="task-bar"> | |
| <div class="task-bar-inner"> | |
| <span class="task-bar-label">Task</span> | |
| <div class="task-pills" id="task-pills"> | |
| <!-- populated dynamically --> | |
| </div> | |
| <div class="task-bar-spacer"></div> | |
| <div class="model-status" id="model-status"> | |
| <span class="status-dot online"></span> | |
| <span id="model-status-text">Idle</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workspace Viewport --> | |
| <div class="workspace-viewport"> | |
| <!-- 1. EMPTY CHAT / STUDIO DASHBOARD --> | |
| <div class="studio-dashboard" id="studio-dashboard"> | |
| <h2 class="welcome-heading">Hello, welcome to ChatUI</h2> | |
| <p class="welcome-sub">Local Transformer models · multi-task · agent mode · no API key</p> | |
| <!-- Central Console Box --> | |
| <div class="console-box"> | |
| <textarea id="studio-prompt-input" rows="2" placeholder="Ask me anything…"></textarea> | |
| <div class="inner-shelf-preview" id="inner-shelf-preview"></div> | |
| <div class="console-action-row"> | |
| <button class="circle-btn-action" id="studio-upload-trigger" title="Attach Media File"> | |
| <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> | |
| </button> | |
| <button class="circle-btn-send" id="studio-send-button" title="Send Task"> | |
| <svg viewBox="0 0 24 24" width="14" height="14" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg> | |
| <div class="spinner-light" id="studio-spinner" style="display: none;"></div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Showcase Section --> | |
| <div class="showcase-section"> | |
| <h3 class="showcase-title">Try these tasks</h3> | |
| <div class="showcase-chips-row"> | |
| <div class="recipe-chip" data-recipe="coding"> | |
| <span class="chip-icon">💻</span> | |
| <span class="chip-text">Write Python Code</span> | |
| </div> | |
| <div class="recipe-chip" data-recipe="reasoning"> | |
| <span class="chip-icon">🧠</span> | |
| <span class="chip-text">Solve Logic Puzzle</span> | |
| </div> | |
| <div class="recipe-chip" data-recipe="creative"> | |
| <span class="chip-icon">✍️</span> | |
| <span class="chip-text">Write a Story</span> | |
| </div> | |
| <div class="recipe-chip" data-recipe="agent"> | |
| <span class="chip-icon">🤖</span> | |
| <span class="chip-text">Use the Agent</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 2. ACTIVE CHAT THREAD --> | |
| <div class="chat-thread-container" id="chat-thread-container" style="display: none;"> | |
| <div class="chat-messages-feed" id="chat-messages-feed"> | |
| <!-- Message bubbles populate dynamically --> | |
| </div> | |
| <!-- Bottom Reply bar --> | |
| <div class="chat-mini-footer"> | |
| <div class="console-box mini"> | |
| <textarea id="mini-prompt-input" rows="1" placeholder="Reply or ask anything..."></textarea> | |
| <div class="mini-shelf-preview" id="mini-shelf-preview"></div> | |
| <div class="console-action-row"> | |
| <button class="circle-btn-action" id="mini-upload-trigger" title="Attach Media File"> | |
| <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> | |
| </button> | |
| <button class="circle-btn-send" id="mini-send-button" title="Send Task"> | |
| <svg viewBox="0 0 24 24" width="14" height="14" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg> | |
| <div class="spinner-light" id="mini-spinner" style="display: none;"></div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Left Sidebar Overlay --> | |
| <div class="sidebar-overlay-left" id="sidebar-overlay-left"></div> | |
| <!-- Left Sidebar Drawer (Chat History) --> | |
| <aside class="sidebar-left" id="sidebar-left"> | |
| <div class="left-sidebar-header"> | |
| <div class="header-brand"> | |
| <img src="/static/deepseek-color.svg" alt="Logo" class="brand-logo-img"> | |
| <span class="brand-name">ChatUI</span> | |
| </div> | |
| <button class="circle-btn-action" id="btn-close-left" title="Close sidebar"> | |
| <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| <!-- Storage info --> | |
| <div class="user-profile-section" id="user-profile-section"> | |
| <div class="user-avatar" id="user-avatar">💾</div> | |
| <div class="user-info-text"> | |
| <div class="user-display-name">Local History</div> | |
| <button class="hf-login-btn" id="clear-history-btn">Clear History</button> | |
| </div> | |
| </div> | |
| <button class="new-chat-btn" id="sidebar-new-chat" title="New Chat"> | |
| <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> | |
| <span>New Chat</span> | |
| </button> | |
| <div class="chat-history-list" id="chat-history-list"> | |
| <div class="empty-history-text">No chat history yet.<br>Start a conversation!</div> | |
| </div> | |
| <div class="left-sidebar-footer"> | |
| <div class="status-indicator-group"> | |
| <span class="status-dot online"></span> | |
| <span id="footer-model-label">Local model · ready</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Right Sidebar Overlay --> | |
| <div class="sidebar-overlay" id="sidebar-overlay"></div> | |
| <!-- Right Settings Drawer --> | |
| <aside class="sidebar-right collapsed" id="sidebar-right"> | |
| <input type="file" id="file-uploader" accept="image/*,video/*" multiple style="display: none;"> | |
| <div class="right-sidebar-header"> | |
| <h3>Settings</h3> | |
| <button class="circle-btn-action close-drawer" id="btn-close-drawer"> | |
| <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| <div class="sidebar-right-content"> | |
| <!-- Active Model (new) --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Active Model</span> | |
| </div> | |
| <select id="active-model-select" class="model-select"></select> | |
| <button class="btn-secondary" id="warm-up-btn">Pre-load now</button> | |
| <div class="setting-description" id="model-meta">No model loaded yet.</div> | |
| </div> | |
| <!-- System Prompt --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">System Prompt</span> | |
| </div> | |
| <textarea id="system-prompt-input" class="system-prompt-textarea" rows="4" placeholder="Enter a custom system prompt..."></textarea> | |
| </div> | |
| <!-- Temperature Slider --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Temperature</span> | |
| <span class="block-value" id="temperature-val">0.7</span> | |
| </div> | |
| <input type="range" id="temperature-slider" class="slider-input" min="0" max="2" step="0.1" value="0.7"> | |
| </div> | |
| <!-- Max Tokens Slider --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Max Tokens</span> | |
| <span class="block-value" id="max-tokens-val">512</span> | |
| </div> | |
| <input type="range" id="max-tokens-slider" class="slider-input" min="64" max="2048" step="64" value="512"> | |
| </div> | |
| <!-- RP Markdown Mode --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">RP Markdown</span> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" id="rp-mode-toggle" checked> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-description">Style *narration* as italics and "dialogue" with colored quotes for roleplay.</div> | |
| </div> | |
| <!-- Auto-hide Thinking --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Auto-hide Thinking</span> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" id="auto-hide-thinking-toggle" checked> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-description">Collapse reasoning/thinking blocks by default. Click to expand when needed.</div> | |
| </div> | |
| <!-- Show Agent Trace --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Show Agent Trace</span> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" id="agent-trace-toggle" checked> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-description">When using the Agent task, display each tool call / tool result step inline.</div> | |
| </div> | |
| <!-- Upload Shelf --> | |
| <div class="right-block-card flex-1-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Attached Media</span> | |
| </div> | |
| <div class="shelf-list" id="shelf-list"> | |
| <div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="right-sidebar-footer"> | |
| <div class="status-indicator-group"> | |
| <span class="status-dot online"></span> | |
| <span id="right-footer-status">Local transformers · ready</span> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- App JS --> | |
| <script type="module" src="/static/app.js?v=10"></script> | |
| </body> | |
| </html> | |