Upload folder using huggingface_hub

static/index.html

@@ -40,7 +40,7 @@
             <!-- Curate Sage Panel (bottom ~38%) -->
             <div class="prompt-panel">
                 <div class="prompt-header">
-                    <span class="prompt-title">✦ Curate Sage</span>
+                    <span class="prompt-title">✦ Curate Sage <span class="toggle-arrow">▾</span></span>
                     <div class="prompt-actions">
                         <button id="random-btn" class="prompt-btn random-btn">
                             <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">

static/script.js

@@ -283,4 +283,15 @@ document.addEventListener('DOMContentLoaded', () => {
             }, 1000);
         }
     });
+
+    // Collapsible Prompt Panel on Mobile
+    const promptHeader = document.querySelector('.prompt-header');
+    const promptPanel = document.querySelector('.prompt-panel');
+    if (promptHeader && promptPanel) {
+        promptHeader.addEventListener('click', (e) => {
+            // Prevent collapse if clicking the buttons inside the header
+            if (e.target.closest('.prompt-btn')) return;
+            promptPanel.classList.toggle('expanded');
+        });
+    }
 });

static/style.css

@@ -479,3 +479,127 @@ body {
 #chat-input::placeholder {
     color: #444;
 }
+
+/* Prompt Toggle Arrow */
+.toggle-arrow {
+    display: inline-block;
+    transition: transform 0.2s ease;
+    margin-left: 6px;
+    font-size: 10px;
+    color: #666;
+    vertical-align: middle;
+}
+
+/* ── Mobile Responsive Design (max-width: 768px) ─────────────────────────── */
+@media (max-width: 768px) {
+    body {
+        height: 100dvh;
+    }
+
+    .header {
+        padding: 0 12px;
+        height: 48px;
+    }
+
+    .logo {
+        font-size: 16px;
+    }
+
+    .tagline {
+        font-size: 11px;
+        margin-left: 10px;
+        padding-left: 10px;
+    }
+
+    .stats {
+        font-size: 11px;
+    }
+
+    .main-container {
+        flex-direction: column;
+        padding: 10px;
+        gap: 10px;
+        overflow: hidden;
+    }
+
+    .video-section {
+        width: 100%;
+        flex-shrink: 0;
+        gap: 8px;
+    }
+
+    .video-box {
+        height: 180px;
+        flex: none;
+    }
+
+    /* Collapsible Prompt Panel on Mobile */
+    .prompt-panel {
+        flex: none;
+        width: 100%;
+    }
+
+    .prompt-panel .prompt-textarea,
+    .prompt-panel .prompt-hint {
+        display: none;
+    }
+
+    .prompt-panel.expanded .prompt-textarea,
+    .prompt-panel.expanded .prompt-hint {
+        display: block;
+    }
+
+    .prompt-panel.expanded .prompt-textarea {
+        height: 120px;
+    }
+
+    .prompt-panel .toggle-arrow {
+        transform: rotate(-90deg);
+    }
+
+    .prompt-panel.expanded .toggle-arrow {
+        transform: rotate(0deg);
+    }
+
+    .prompt-header {
+        cursor: pointer;
+    }
+
+    /* Chat Section */
+    .chat-section {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .chat-log {
+        padding: 12px;
+    }
+
+    .msg {
+        max-width: 85%;
+        padding: 10px 14px;
+        font-size: 13.5px;
+    }
+
+    /* Chat Controls */
+    .chat-controls {
+        padding: 10px;
+        gap: 8px;
+    }
+
+    .control-btn {
+        width: 60px;
+        font-size: 12px;
+        border-radius: 6px;
+    }
+
+    .sub-text {
+        display: none;
+    }
+
+    #chat-input {
+        padding: 10px 12px;
+        font-size: 13px;
+        min-height: 40px;
+    }
+}