Spaces:
Running
Running
File size: 10,671 Bytes
6e7902e 6f592e9 6e7902e f12802a 6e7902e dc3d28d 6e7902e 3a31275 6e7902e dc3d28d f12802a b85818d 6f592e9 6e7902e f12802a dc3d28d 6e7902e f12802a dc3d28d f12802a dc3d28d 6e7902e f12802a dc3d28d f12802a dc3d28d f12802a dc3d28d 6e7902e dc3d28d f12802a dc3d28d 6e7902e f12802a dc3d28d f12802a 3a31275 dc3d28d 3a31275 f12802a 3a31275 6e7902e dc3d28d f12802a dc3d28d f12802a dc3d28d f12802a dc3d28d 6e7902e dc3d28d 6e7902e dc3d28d f12802a dc3d28d 6e7902e dc3d28d f12802a dc3d28d 6e7902e dc3d28d 62beaf6 6e7902e f12802a dc3d28d 6e7902e dc3d28d 6e7902e dc3d28d f12802a dc3d28d f12802a dc3d28d f12802a dc3d28d 6e7902e f12802a 3a31275 6e7902e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | <!DOCTYPE html>
<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?v=3">
</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="landscape">
<span class="chip-icon">🌳</span>
<span class="chip-text">Analyze Landscape Image</span>
</div>
<div class="recipe-chip" data-recipe="wildlife">
<span class="chip-icon">🎬</span>
<span class="chip-text">Analyze Wildlife Video</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?v=4"></script>
</body>
</html>
|