Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSeek V4 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=5"> | |
| </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="DeepSeek V4 Flash Logo" class="brand-logo-img"> | |
| <span class="brand-name">DeepSeek V4 Flash</span> | |
| </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> | |
| <!-- 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 DeepSeek</h2> | |
| <!-- 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> | |
| </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">DeepSeek</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>DeepSeek V4 Flash</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"> | |
| <!-- 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> | |
| <!-- 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> | |
| <!-- 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">2048</span> | |
| </div> | |
| <input type="range" id="max-tokens-slider" class="slider-input" min="256" max="8192" step="256" value="2048"> | |
| </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> | |
| <!-- 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>DeepSeek V4 Flash Connected</span> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- App JS --> | |
| <script type="module" src="/static/app.js?v=5"></script> | |
| </body> | |
| </html> | |