Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Step-3.7-Flash</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"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Main Workspace (Full width, no left sidebar) --> | |
| <main class="main-workspace"> | |
| <!-- Top Navigation Bar --> | |
| <header class="workspace-header"> | |
| <div class="header-brand"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/644f7e6233ac8f46fa0b9e26/CmF2ocXhkr2UtHXgmwq7-.png" alt="Step-3.7-Flash Logo" class="brand-logo-img"> | |
| <span class="brand-name">Step-3.7-Flash</span> | |
| </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> | |
| <!-- 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 Studio</h2> | |
| <!-- Central Console Box --> | |
| <div class="console-box"> | |
| <textarea id="studio-prompt-input" rows="2" placeholder="Describe the task you want to verify, or start with the showcase below..."></textarea> | |
| <!-- Upload preview shelf inside console --> | |
| <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 (Decluttered: only 2 compact chips) --> | |
| <div class="showcase-section"> | |
| <h3 class="showcase-title">Try these tasks</h3> | |
| <div class="showcase-chips-row"> | |
| <div class="recipe-chip" data-recipe="whiteboard"> | |
| <span class="chip-icon">🖼️</span> | |
| <span class="chip-text">Analyze Whiteboard Gantt</span> | |
| </div> | |
| <div class="recipe-chip" data-recipe="diagnostic"> | |
| <span class="chip-icon">🎬</span> | |
| <span class="chip-text">Diagnose Video Logs</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> | |
| <!-- Sidebar Overlay backdrop for mobile --> | |
| <div class="sidebar-overlay" id="sidebar-overlay"></div> | |
| <!-- Right Settings Drawer (Collapsed by default, slides on top of main area) --> | |
| <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"> | |
| <!-- Reasoning mode --> | |
| <div class="right-block-card"> | |
| <div class="card-block-header"> | |
| <span class="block-title">Reasoning Mode</span> | |
| </div> | |
| <div class="effort-picker"> | |
| <label class="effort-pill"> | |
| <input type="radio" name="reasoning-effort" value="low"> | |
| <span>Low</span> | |
| </label> | |
| <label class="effort-pill"> | |
| <input type="radio" name="reasoning-effort" value="medium" checked> | |
| <span>Medium</span> | |
| </label> | |
| <label class="effort-pill"> | |
| <input type="radio" name="reasoning-effort" value="high"> | |
| <span>High</span> | |
| </label> | |
| </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>Step 3.7 Flash Connected</span> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- Gradio Client JS connection --> | |
| <script type="module" src="/static/app.js"></script> | |
| </body> | |
| </html> | |