Initialize Step 3.7 Flash Gradio Server application

app.py

@@ -0,0 +1,103 @@
+import os
+import json
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
+from openai import OpenAI
+
+# Initialize the Gradio Server (which is a FastAPI subclass)
+app = Server()
+
+# Create static directory if it doesn't exist
+os.makedirs("static", exist_ok=True)
+
+@app.api()
+def chat_with_step(
+    messages_json: str,
+    api_key: str,
+    reasoning_effort: str = "medium",
+    max_tokens: int = 2048,
+    temperature: float = 0.7
+) -> str:
+    """
+    API endpoint to call Step 3.7 Flash model via OpenAI-compatible API.
+    Takes conversation messages as a JSON-serialized string, API Key, and parameters.
+    Returns the assistant response along with any reasoning details.
+    """
+    try:
+        # Load messages from JSON string
+        messages = json.loads(messages_json)
+        
+        # Use user-supplied key or fallback to server environment variable
+        key = api_key.strip() if api_key and api_key.strip() else os.environ.get("STEP_API_KEY", "")
+        if not key:
+            return json.dumps({
+                "status": "error",
+                "message": "StepFun API Key is required. Please enter your API Key in the settings sidebar."
+            })
+            
+        # Initialize OpenAI client configured for StepFun
+        client = OpenAI(
+            api_key=key,
+            base_url="https://api.stepfun.ai/v1",
+        )
+        
+        # Prepare parameters for the API call
+        params = {
+            "model": "step-3.7-flash",
+            "messages": messages,
+            "max_tokens": max_tokens,
+            "temperature": temperature
+        }
+        
+        # Add reasoning effort if applicable (only for step-3.7-flash model family)
+        if reasoning_effort in ["low", "medium", "high"]:
+            params["reasoning_effort"] = reasoning_effort
+
+        # Perform completion request
+        response = client.chat.completions.create(**params)
+        
+        # Extract assistant content
+        content = response.choices[0].message.content
+        
+        # Capture reasoning content if returned by the API
+        # Step 3.7 reasoning models might put reasoning in choice.message.reasoning_content
+        reasoning_content = getattr(response.choices[0].message, "reasoning_content", "")
+        
+        # Alternatively, if the model returns thoughts inside <think> tags, we can extract them
+        if not reasoning_content and content and "<think>" in content and "</think>" in content:
+            parts = content.split("</think>", 1)
+            reasoning_content = parts[0].replace("<think>", "").strip()
+            content = parts[1].strip()
+
+        return json.dumps({
+            "status": "success",
+            "content": content,
+            "reasoning_content": reasoning_content or ""
+        })
+        
+    except Exception as e:
+        return json.dumps({
+            "status": "error",
+            "message": str(e)
+        })
+
+@app.get("/")
+async def homepage():
+    """Serves the main application landing page."""
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static", "index.html")
+    if os.path.exists(html_path):
+        with open(html_path, "r", encoding="utf-8") as f:
+            return HTMLResponse(content=f.read(), status_code=200)
+    return HTMLResponse(
+        content="<h1>Frontend is building. Please refresh in a few seconds...</h1>",
+        status_code=200
+    )
+
+# Mount static folder for CSS, JS, and image assets
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+if __name__ == "__main__":
+    # Launch Gradio Server (default port is 7860)
+    app.launch(show_error=True)

static/app.js

@@ -0,0 +1,593 @@
+// Import Hugging Face's Gradio Client
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+// Global Application State Management
+const STATE = {
+    apiKey: localStorage.getItem("step_api_key") || "",
+    reasoningEffort: "medium",
+    maxTokens: 2048,
+    temperature: 0.7,
+    uploadedFiles: [], // Current prompt attachments
+    conversationHistory: [], // Conversation log sent to StepFun
+    gradioClient: null,
+    isThinking: false
+};
+
+// DOM Selections
+const dom = {
+    apiKeyInput: document.getElementById("api-key-input"),
+    toggleKeyVisibility: document.getElementById("toggle-key-visibility"),
+    effortRadioButtons: document.querySelectorAll('input[name="reasoning-effort"]'),
+    maxTokensSlider: document.getElementById("max-tokens-slider"),
+    maxTokensVal: document.getElementById("max-tokens-val"),
+    temperatureSlider: document.getElementById("temperature-slider"),
+    temperatureVal: document.getElementById("temperature-val"),
+    dropZone: document.getElementById("drop-zone"),
+    fileUploader: document.getElementById("file-uploader"),
+    shelfInventory: document.getElementById("shelf-inventory"),
+    recipeCards: document.querySelectorAll(".recipe-card"),
+    clearChatBtn: document.getElementById("clear-chat-button"),
+    chatMessages: document.getElementById("chat-messages"),
+    quickShelfPreview: document.getElementById("quick-shelf-preview"),
+    quickUploadTrigger: document.getElementById("quick-upload-trigger"),
+    promptInput: document.getElementById("prompt-input"),
+    sendBtn: document.getElementById("send-button"),
+    sendIcon: document.getElementById("send-icon"),
+    sendSpinner: document.getElementById("send-spinner")
+};
+
+// Markdown configuration
+marked.setOptions({
+    breaks: true,
+    highlight: function(code, lang) {
+        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        return hljs.highlight(code, { language }).value;
+    }
+});
+
+// Setup Initial State & Event Handlers
+async function initializeApp() {
+    // 1. Restore Credentials
+    if (STATE.apiKey) {
+        dom.apiKeyInput.value = STATE.apiKey;
+    }
+
+    // 2. Connect Gradio Client
+    try {
+        // connects to current host (where python app.py is served)
+        STATE.gradioClient = await Client.connect(window.location.origin);
+        console.log("Successfully connected to Gradio.Server backend.");
+    } catch (e) {
+        console.error("Gradio Client Connection Failed:", e);
+        appendSystemLog("System connection is restricted. Local commands might not be running.", true);
+    }
+
+    // 3. Register Settings Listeners
+    dom.apiKeyInput.addEventListener("input", (e) => {
+        STATE.apiKey = e.target.value;
+        localStorage.setItem("step_api_key", STATE.apiKey);
+    });
+
+    dom.toggleKeyVisibility.addEventListener("click", () => {
+        const type = dom.apiKeyInput.type === "password" ? "text" : "password";
+        dom.apiKeyInput.type = type;
+    });
+
+    dom.effortRadioButtons.forEach(radio => {
+        radio.addEventListener("change", (e) => {
+            STATE.reasoningEffort = e.target.value;
+        });
+    });
+
+    dom.maxTokensSlider.addEventListener("input", (e) => {
+        STATE.maxTokens = parseInt(e.target.value);
+        dom.maxTokensVal.textContent = STATE.maxTokens;
+    });
+
+    dom.temperatureSlider.addEventListener("input", (e) => {
+        STATE.temperature = parseFloat(e.target.value);
+        dom.temperatureVal.textContent = STATE.temperature.toFixed(1);
+    });
+
+    // 4. Register Files Upload Listeners
+    dom.quickUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
+    dom.dropZone.addEventListener("click", () => dom.fileUploader.click());
+    dom.fileUploader.addEventListener("change", handleFileSelection);
+
+    // Dropzone Drag-and-Drop animations
+    ["dragenter", "dragover"].forEach(eventName => {
+        dom.dropZone.addEventListener(eventName, (e) => {
+            e.preventDefault();
+            dom.dropZone.classList.add("drag-active");
+        }, false);
+    });
+
+    ["dragleave", "drop"].forEach(eventName => {
+        dom.dropZone.addEventListener(eventName, (e) => {
+            e.preventDefault();
+            dom.dropZone.classList.remove("drag-active");
+        }, false);
+    });
+
+    dom.dropZone.addEventListener("drop", (e) => {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        processFiles(files);
+    });
+
+    // 5. Chat Operations
+    dom.sendBtn.addEventListener("click", triggerPromptSubmission);
+    dom.promptInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            triggerPromptSubmission();
+        }
+    });
+
+    dom.clearChatBtn.addEventListener("click", resetSandbox);
+
+    // 6. Recipe Recipes Console Setup
+    dom.recipeCards.forEach(card => {
+        card.addEventListener("click", () => {
+            const recipeType = card.getAttribute("data-recipe");
+            loadRecipe(recipeType);
+        });
+    });
+
+    // Auto-expand input textbox
+    dom.promptInput.addEventListener("input", () => {
+        dom.promptInput.style.height = "auto";
+        dom.promptInput.style.height = (dom.promptInput.scrollHeight) + "px";
+    });
+}
+
+// Handle File Select & Base64 Encoder
+function handleFileSelection(e) {
+    processFiles(e.target.files);
+}
+
+function processFiles(files) {
+    if (!files.length) return;
+
+    Array.from(files).forEach(file => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const fileData = {
+                id: Math.random().toString(36).substring(2, 9),
+                name: file.name,
+                type: file.type,
+                size: (file.size / 1024 / 1024).toFixed(2) + " MB",
+                base64: event.target.result
+            };
+            
+            STATE.uploadedFiles.push(fileData);
+            updateShelfUI();
+        };
+        reader.readAsDataURL(file);
+    });
+}
+
+// Update the Visual Attachments list
+function updateShelfUI() {
+    // Clear inventory container
+    dom.shelfInventory.innerHTML = "";
+    dom.quickShelfPreview.innerHTML = "";
+
+    if (STATE.uploadedFiles.length === 0) {
+        dom.shelfInventory.innerHTML = `<div class="empty-shelf-text">No media loaded. Files are held in local state for your next prompts.</div>`;
+        return;
+    }
+
+    STATE.uploadedFiles.forEach(file => {
+        // 1. Sidebar Chip
+        const chip = document.createElement("div");
+        chip.className = "media-chip";
+        
+        let previewHtml = "";
+        if (file.type.startsWith("image/")) {
+            previewHtml = `<img src="${file.base64}" alt="${file.name}">`;
+        } else if (file.type.startsWith("video/")) {
+            previewHtml = `🎬`;
+        } else {
+            previewHtml = `📎`;
+        }
+
+        chip.innerHTML = `
+            <div class="media-chip-preview">${previewHtml}</div>
+            <div class="media-chip-details">
+                <div class="media-chip-name">${file.name}</div>
+                <div class="media-chip-meta">
+                    <span>${file.type.split("/")[1].toUpperCase()}</span>
+                    <span>${file.size}</span>
+                </div>
+            </div>
+            <button class="media-chip-remove" data-id="${file.id}">
+                <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" 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>
+        `;
+
+        chip.querySelector(".media-chip-remove").addEventListener("click", () => {
+            removeFile(file.id);
+        });
+
+        dom.shelfInventory.appendChild(chip);
+
+        // 2. Chat Quick Preview Item
+        const previewItem = document.createElement("div");
+        previewItem.className = "quick-preview-item";
+        previewItem.title = file.name;
+        
+        if (file.type.startsWith("image/")) {
+            previewItem.innerHTML = `<img src="${file.base64}"><div class="quick-preview-badge"></div>`;
+        } else {
+            previewItem.innerHTML = `<div class="media-chip-preview" style="width:100%;height:100%;">🎬</div><div class="quick-preview-badge"></div>`;
+        }
+
+        dom.quickShelfPreview.appendChild(previewItem);
+    });
+}
+
+function removeFile(id) {
+    STATE.uploadedFiles = STATE.uploadedFiles.filter(f => f.id !== id);
+    updateShelfUI();
+}
+
+// Load Play Recipes template prompts
+function loadRecipe(recipeType) {
+    // Standard mock files
+    const mockImageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+    
+    // Reset shelf
+    STATE.uploadedFiles = [];
+
+    if (recipeType === "whiteboard") {
+        dom.promptInput.value = "Here is a snapshot of our whiteboard project plan sketch. Translate this visual sequence of tasks and boxes into a clean, itemized roadmap plan with a structured markdown table.";
+        STATE.uploadedFiles.push({
+            id: "recipe-whiteboard",
+            name: "whiteboard_gantt.png",
+            type: "image/png",
+            size: "0.02 MB",
+            base64: mockImageBase64
+        });
+    } else if (recipeType === "code") {
+        dom.promptInput.value = "Review this dashboard interface design. Generate beautiful, fully responsive HTML structure styling using elegant flex grids to match it.";
+        STATE.uploadedFiles.push({
+            id: "recipe-dashboard",
+            name: "dashboard_layout.png",
+            type: "image/png",
+            size: "0.02 MB",
+            base64: mockImageBase64
+        });
+    } else if (recipeType === "receipt") {
+        dom.promptInput.value = "Tabulate the items inside this receipt into a clean markdown table. Breakdown the tax and total, and perform a step-by-step reasoning calculation to check if the item sums match the total amount listed.";
+        STATE.uploadedFiles.push({
+            id: "recipe-receipt",
+            name: "grocery_bill.jpg",
+            type: "image/jpeg",
+            size: "0.02 MB",
+            base64: mockImageBase64
+        });
+    } else if (recipeType === "diagnostic") {
+        dom.promptInput.value = "This is a recorded visual sequence of steps leading to a runtime exception crash. Provide a detailed reconstruction of the event timeline, summarize the diagnostic signals, and suggest an engineering hotfix.";
+        // Simulating loading a short recording clip
+        STATE.uploadedFiles.push({
+            id: "recipe-diagnostics",
+            name: "console_bug.mp4",
+            type: "video/mp4",
+            size: "1.45 MB",
+            base64: mockImageBase64 // Represented via base64 for simplicity
+        });
+    }
+
+    updateShelfUI();
+    dom.promptInput.dispatchEvent(new Event("input"));
+    dom.promptInput.focus();
+}
+
+// Submitting prompts to Server
+async function triggerPromptSubmission() {
+    if (STATE.isThinking) return;
+
+    const promptText = dom.promptInput.value.trim();
+    if (!promptText && STATE.uploadedFiles.length === 0) return;
+
+    // Check key
+    if (!STATE.apiKey && !dom.apiKeyInput.placeholder.includes("env key")) {
+        appendSystemLog("StepFun API Key is required. Please set it in the credentials input or configure STEP_API_KEY environment variable.", true);
+        return;
+    }
+
+    // Set UI loading state
+    setLoadingState(true);
+
+    // 1. Format user message content
+    // Content starts with the user's textual input prompt
+    const contentArray = [];
+    if (promptText) {
+        contentArray.push({
+            type: "text",
+            text: promptText
+        });
+    }
+
+    // Append attachments
+    STATE.uploadedFiles.forEach(file => {
+        if (file.type.startsWith("image/")) {
+            contentArray.push({
+                type: "image_url",
+                image_url: {
+                    url: file.base64
+                }
+            });
+        } else if (file.type.startsWith("video/")) {
+            contentArray.push({
+                type: "video_url",
+                video_url: {
+                    url: file.base64
+                }
+            });
+        }
+    });
+
+    const userMessage = {
+        role: "user",
+        content: contentArray
+    };
+
+    // 2. Add message to visible chat list
+    appendUserBubble(promptText, STATE.uploadedFiles);
+
+    // Add user message to backend conversation history log
+    STATE.conversationHistory.push(userMessage);
+
+    // Empty active UI text box and attachment shelf
+    dom.promptInput.value = "";
+    dom.promptInput.style.height = "auto";
+    const currentPromptAttachments = [...STATE.uploadedFiles];
+    STATE.uploadedFiles = [];
+    updateShelfUI();
+
+    // 3. Connect to Gradio.Server API
+    try {
+        if (!STATE.gradioClient) {
+            throw new Error("Gradio server is not connected.");
+        }
+
+        // Generate response bubble placeholder
+        const responseId = appendAssistantPlaceholderBubble();
+        const startTime = Date.now();
+
+        // Call the chat_with_step endpoint
+        // Arguments: [messages_json, api_key, reasoning_effort, max_tokens, temperature]
+        const result = await STATE.gradioClient.predict("/chat_with_step", [
+            JSON.stringify(STATE.conversationHistory),
+            STATE.apiKey,
+            STATE.reasoningEffort,
+            STATE.maxTokens,
+            STATE.temperature
+        ]);
+
+        const duration = ((Date.now() - startTime) / 1000).toFixed(1);
+        
+        // Parse results
+        const data = JSON.parse(result.data[0]);
+
+        if (data.status === "error") {
+            updateAssistantBubble(responseId, `⚠️ **API Error:** ${data.message}`, "", duration);
+            STATE.conversationHistory.pop(); // Remove failed prompt from history
+        } else {
+            // Update bubble with result markdown and thoughts
+            updateAssistantBubble(responseId, data.content, data.reasoning_content, duration);
+            
+            // Append assistant completion to thread history
+            STATE.conversationHistory.push({
+                role: "assistant",
+                content: data.content
+            });
+        }
+
+    } catch (e) {
+        console.error(e);
+        appendSystemLog(`Connection exception: ${e.message}`, true);
+        setLoadingState(false);
+    }
+
+    setLoadingState(false);
+}
+
+// UI State Switcher
+function setLoadingState(loading) {
+    STATE.isThinking = loading;
+    if (loading) {
+        dom.sendIcon.style.display = "none";
+        dom.sendSpinner.style.display = "block";
+        dom.sendBtn.disabled = true;
+    } else {
+        dom.sendIcon.style.display = "block";
+        dom.sendSpinner.style.display = "none";
+        dom.sendBtn.disabled = false;
+    }
+}
+
+// Append User Chat Message Bubble to Screen
+function appendUserBubble(text, files) {
+    // Hide welcome box if present
+    const welcome = document.querySelector(".welcome-box");
+    if (welcome) welcome.style.display = "none";
+
+    const bubble = document.createElement("div");
+    bubble.className = "message-bubble user";
+    
+    let attachmentsHtml = "";
+    if (files.length > 0) {
+        attachmentsHtml = `<div class="bubble-attachments">`;
+        files.forEach(file => {
+            if (file.type.startsWith("image/")) {
+                attachmentsHtml += `
+                    <div class="bubble-attachment-card">
+                        <img src="${file.base64}">
+                        <div class="bubble-attachment-label">IMG</div>
+                    </div>
+                `;
+            } else {
+                attachmentsHtml += `
+                    <div class="bubble-attachment-card">
+                        <div class="media-chip-preview" style="width:100%;height:100%;">🎬</div>
+                        <div class="bubble-attachment-label">VIDEO</div>
+                    </div>
+                `;
+            }
+        });
+        attachmentsHtml += `</div>`;
+    }
+
+    bubble.innerHTML = `
+        <div class="message-meta">User</div>
+        <div class="message-body">
+            <div class="message-text">${escapeHtml(text)}</div>
+            ${attachmentsHtml}
+        </div>
+    `;
+
+    dom.chatMessages.appendChild(bubble);
+    scrollToBottom();
+}
+
+// Append Assistant Loader/Placeholder to Chat Feed
+function appendAssistantPlaceholderBubble() {
+    const id = "assistant-" + Math.random().toString(36).substring(2, 9);
+    const bubble = document.createElement("div");
+    bubble.className = "message-bubble assistant";
+    bubble.id = id;
+
+    bubble.innerHTML = `
+        <div class="message-meta">Step 3.7 Flash</div>
+        <div class="message-body">
+            <div class="thought-container" id="${id}-thought-box">
+                <div class="thought-header">
+                    <div class="thought-title-group">
+                        <div class="spinner" style="width:12px;height:12px;border-width:1.5px;"></div>
+                        <span>Reasoning...</span>
+                    </div>
+                    <span class="thought-timer" id="${id}-timer">0.0s</span>
+                </div>
+            </div>
+            <div class="message-text markdown-body" id="${id}-text-box">
+                <span class="text-muted">Analyzing context and constructing reasoning chain...</span>
+            </div>
+        </div>
+    `;
+
+    dom.chatMessages.appendChild(bubble);
+    scrollToBottom();
+
+    // Start UI thought Timer
+    let seconds = 0.0;
+    const timerEl = document.getElementById(`${id}-timer`);
+    const interval = setInterval(() => {
+        if (!STATE.isThinking || !document.getElementById(id)) {
+            clearInterval(interval);
+            return;
+        }
+        seconds += 0.1;
+        timerEl.textContent = seconds.toFixed(1) + "s";
+    }, 100);
+
+    return id;
+}
+
+// Update Assistant Placeholder with Final API Results
+function updateAssistantBubble(id, content, reasoning, duration) {
+    const bubble = document.getElementById(id);
+    if (!bubble) return;
+
+    const thoughtBox = document.getElementById(`${id}-thought-box`);
+    const textBox = document.getElementById(`${id}-text-box`);
+
+    // 1. Update Collapsible thoughts
+    if (reasoning) {
+        thoughtBox.innerHTML = `
+            <div class="thought-header" id="${id}-thought-toggle">
+                <div class="thought-title-group">
+                    <span>🧠 Thought Process</span>
+                </div>
+                <div style="display:flex;align-items:center;gap:10px;">
+                    <span class="thought-timer">Thought for ${duration}s</span>
+                    <span class="thought-toggle-icon">▼</span>
+                </div>
+            </div>
+            <div class="thought-content">${escapeHtml(reasoning)}</div>
+        `;
+        
+        // Add toggle expand/collapse behavior
+        const toggleBtn = document.getElementById(`${id}-thought-toggle`);
+        toggleBtn.addEventListener("click", () => {
+            thoughtBox.classList.toggle("collapsed");
+        });
+    } else {
+        // If model skipped reasoning, hide thinking layout entirely
+        thoughtBox.style.display = "none";
+    }
+
+    // 2. Render final markdown text
+    textBox.innerHTML = marked.parse(content);
+    
+    // Highlight code blocks
+    textBox.querySelectorAll("pre code").forEach((el) => {
+        hljs.highlightElement(el);
+    });
+
+    scrollToBottom();
+}
+
+// Reset chat log
+function resetSandbox() {
+    STATE.conversationHistory = [];
+    STATE.uploadedFiles = [];
+    updateShelfUI();
+    dom.chatMessages.innerHTML = `
+        <div class="welcome-box">
+            <div class="welcome-icon">⚡</div>
+            <h2>Sandbox Reset</h2>
+            <p>Conversation log history has been cleared. Load a recipe below or upload files to begin fresh.</p>
+        </div>
+    `;
+    appendSystemLog("Conversation context cleared successfully.");
+}
+
+// Helper: Append system errors or status notifications
+function appendSystemLog(message, isError = false) {
+    const log = document.createElement("div");
+    log.className = "message-bubble assistant";
+    log.innerHTML = `
+        <div class="message-meta">System</div>
+        <div class="message-body" style="background-color: ${isError ? 'rgba(244,63,94,0.06)' : 'rgba(20,184,166,0.06)'}; border-color: ${isError ? 'rgba(244,63,94,0.2)' : 'rgba(20,184,166,0.2)'};">
+            <div class="message-text" style="color: ${isError ? varColor('danger') : varColor('accent-teal')}; font-size:12px; font-weight:500;">
+                ${isError ? '🛑' : 'ℹ️'} ${message}
+            </div>
+        </div>
+    `;
+    dom.chatMessages.appendChild(log);
+    scrollToBottom();
+}
+
+function varColor(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+}
+
+function escapeHtml(text) {
+    if (!text) return "";
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+function scrollToBottom() {
+    dom.chatMessages.scrollTop = dom.chatMessages.scrollHeight;
+}
+
+// Initialise Application when loaded
+window.addEventListener("DOMContentLoaded", initializeApp);

static/index.html

@@ -0,0 +1,205 @@
+<!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 - Multimodal Reasoning Playground</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@300;400;500;600&family=Outfit:wght@400;500;600;700;800&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-dark.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">
+        <!-- Sidebar Navigation & Parameter Controls -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="logo-container">
+                    <span class="logo-icon">⚡</span>
+                    <div class="logo-text">
+                        <h1>Step 3.7 Flash</h1>
+                        <span class="badge">NATIVE MULTIMODAL</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="sidebar-content">
+                <!-- API Credentials -->
+                <section class="config-section">
+                    <h2 class="section-title">Credentials</h2>
+                    <div class="form-group">
+                        <label for="api-key-input">StepFun API Key</label>
+                        <div class="password-wrapper">
+                            <input type="password" id="api-key-input" placeholder="Enter your key or use env key" autocomplete="off">
+                            <button type="button" id="toggle-key-visibility" class="icon-button" title="Show/Hide Key">
+                                <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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                            </button>
+                        </div>
+                        <span class="input-tip">Visit StepFun Console to obtain an API Key.</span>
+                    </div>
+                </section>
+
+                <!-- Model Parameters -->
+                <section class="config-section">
+                    <h2 class="section-title">Parameters</h2>
+                    
+                    <div class="form-group">
+                        <label>Reasoning Effort</label>
+                        <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>
+                        <span class="input-tip">Low: fast summary/Q&amp;A. High: complex math/code.</span>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="max-tokens-slider">Max Output Tokens</label>
+                            <span class="value-display" id="max-tokens-val">2048</span>
+                        </div>
+                        <input type="range" id="max-tokens-slider" min="256" max="8192" step="256" value="2048">
+                    </div>
+
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="temperature-slider">Temperature</label>
+                            <span class="value-display" id="temperature-val">0.7</span>
+                        </div>
+                        <input type="range" id="temperature-slider" min="0.0" max="1.5" step="0.1" value="0.7">
+                    </div>
+                </section>
+
+                <!-- Media Upload Desk -->
+                <section class="config-section">
+                    <h2 class="section-title">Multimodal Shelf</h2>
+                    <div class="upload-zone" id="drop-zone">
+                        <input type="file" id="file-uploader" accept="image/*,video/*" multiple style="display: none;">
+                        <svg class="upload-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                        <p>Drag files here or <span>browse</span></p>
+                        <span class="upload-limit">Images (PNG, JPG, WebP) | Videos (&lt;128MB, MP4)</span>
+                    </div>
+                    <div class="shelf-inventory" id="shelf-inventory">
+                        <!-- Uploaded files will populate here dynamically -->
+                        <div class="empty-shelf-text">No media loaded. Files are held in local state for your next prompts.</div>
+                    </div>
+                </section>
+
+                <!-- Cookbooks & Quick Prompts -->
+                <section class="config-section">
+                    <h2 class="section-title">Playground Recipes</h2>
+                    <div class="recipes-grid">
+                        <div class="recipe-card" data-recipe="whiteboard">
+                            <span class="recipe-icon">✏️</span>
+                            <div class="recipe-details">
+                                <h3>Whiteboard Plan</h3>
+                                <p>Turn a sketch into a project roadmap table.</p>
+                            </div>
+                        </div>
+                        <div class="recipe-card" data-recipe="code">
+                            <span class="recipe-icon">💻</span>
+                            <div class="recipe-details">
+                                <h3>Screenshot to Code</h3>
+                                <p>Extract design elements to code.</p>
+                            </div>
+                        </div>
+                        <div class="recipe-card" data-recipe="receipt">
+                            <span class="recipe-icon">📊</span>
+                            <div class="recipe-details">
+                                <h3>Receipt Auditor</h3>
+                                <p>Tabulate receipts with reasoning check.</p>
+                            </div>
+                        </div>
+                        <div class="recipe-card" data-recipe="diagnostic">
+                            <span class="recipe-icon">🎥</span>
+                            <div class="recipe-details">
+                                <h3>Video Diagnostics</h3>
+                                <p>Reconstruct timeline events from video clip.</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+            
+            <div class="sidebar-footer">
+                <div class="connection-status">
+                    <span class="status-indicator online"></span>
+                    <span>Gradio Server Queued</span>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Chat Area -->
+        <main class="chat-container">
+            <header class="chat-header">
+                <div class="header-main">
+                    <h2>Workspace Playground</h2>
+                    <span class="model-badge">step-3.7-flash</span>
+                </div>
+                <div class="header-actions">
+                    <button id="clear-chat-button" class="btn btn-secondary flex-center" title="Reset Sandbox">
+                        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                        <span>Clear Chat</span>
+                    </button>
+                </div>
+            </header>
+
+            <!-- Chat Message Feed -->
+            <div class="chat-messages" id="chat-messages">
+                <!-- Welcome greeting message -->
+                <div class="welcome-box">
+                    <div class="welcome-icon">⚡</div>
+                    <h2>Welcome to Step 3.7 Flash Playground</h2>
+                    <p>Experience ultra-fast, state-of-the-art multimodal reasoning. This client communicates natively with your backend via <strong>Gradio.Server</strong>, using robust FastAPI queuing and threading.</p>
+                    <div class="feature-tags">
+                        <span class="tag">💡 High-Fidelity Thoughts</span>
+                        <span class="tag">🖼️ Multi-Image Compares</span>
+                        <span class="tag">🎬 Native Video Support</span>
+                        <span class="tag">⚡ Low Latency Queuing</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Input Controls and Chat Bar -->
+            <footer class="chat-footer">
+                <!-- Quick Shelf Preview above input bar -->
+                <div class="quick-shelf-preview" id="quick-shelf-preview"></div>
+                
+                <div class="input-panel">
+                    <button class="btn btn-icon flex-center" id="quick-upload-trigger" title="Attach Media File">
+                        <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
+                    </button>
+                    
+                    <div class="textarea-wrapper">
+                        <textarea id="prompt-input" rows="1" placeholder="Ask anything, or drop an image/video here..." autofocus></textarea>
+                    </div>
+
+                    <button class="btn btn-primary btn-send flex-center" id="send-button" title="Send message to model">
+                        <svg id="send-icon" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                        <div id="send-spinner" class="spinner" style="display: none;"></div>
+                    </button>
+                </div>
+            </footer>
+        </main>
+    </div>
+
+    <!-- Gradio Client JS Library Connection -->
+    <script type="module" src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,1057 @@
+/* CSS Variables for Premium Dark Theme Design System */
+:root {
+    --bg-primary: #080c14;
+    --bg-secondary: #0e1626;
+    --bg-sidebar: #0a0e1a;
+    --bg-glass: rgba(15, 23, 42, 0.65);
+    --border-glass: rgba(99, 102, 241, 0.12);
+    --border-focus: rgba(99, 102, 241, 0.4);
+    
+    --accent-indigo: #6366f1;
+    --accent-teal: #14b8a6;
+    --accent-indigo-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+    --accent-teal-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
+    --accent-fusion-gradient: linear-gradient(135deg, #6366f1 0%, #14b8a6 100%);
+    
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+    --danger: #f43f5e;
+    
+    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.7);
+    --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.8), 0 0 20px -2px rgba(99, 102, 241, 0.1);
+    
+    --font-heading: 'Outfit', sans-serif;
+    --font-body: 'Inter', sans-serif;
+    --font-mono: 'Fira Code', monospace;
+    
+    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --border-radius-sm: 8px;
+    --border-radius-md: 12px;
+    --border-radius-lg: 16px;
+}
+
+/* Reset & Base Styling */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 15px;
+    line-height: 1.6;
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(99, 102, 241, 0.3);
+}
+
+/* Container Structure */
+.app-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    position: relative;
+    background-image: 
+        radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
+        radial-gradient(at 90% 80%, rgba(20, 184, 166, 0.05) 0px, transparent 50%);
+}
+
+/* Sidebar Layout */
+.sidebar {
+    width: 380px;
+    background-color: var(--bg-sidebar);
+    border-right: 1px solid var(--border-glass);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-shrink: 0;
+    backdrop-filter: blur(10px);
+}
+
+.sidebar-header {
+    padding: 24px;
+    border-bottom: 1px solid var(--border-glass);
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo-icon {
+    font-size: 28px;
+    background: var(--accent-fusion-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
+    animation: pulse 3s infinite ease-in-out;
+}
+
+.logo-text h1 {
+    font-family: var(--font-heading);
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    color: var(--text-primary);
+}
+
+.badge {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--accent-indigo);
+    padding: 2px 8px;
+    border-radius: 100px;
+    border: 1px solid rgba(99, 102, 241, 0.25);
+    display: inline-block;
+    margin-top: 2px;
+}
+
+.sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+}
+
+/* Section styling inside sidebar */
+.config-section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.section-title {
+    font-family: var(--font-heading);
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding-bottom: 8px;
+}
+
+/* Form inputs & Groups */
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-group label {
+    font-family: var(--font-heading);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.value-display {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1px 6px;
+    border-radius: 4px;
+    color: var(--accent-teal);
+}
+
+.input-tip {
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+/* Credentials visibility toggler input */
+.password-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: 100%;
+    background-color: rgba(15, 23, 42, 0.4);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--border-radius-sm);
+    color: var(--text-primary);
+    padding: 10px 14px;
+    font-size: 13px;
+    font-family: var(--font-body);
+    transition: var(--transition-smooth);
+}
+
+input[type="password"] {
+    padding-right: 40px;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+    outline: none;
+    border-color: var(--accent-indigo);
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
+    background-color: rgba(15, 23, 42, 0.8);
+}
+
+.password-wrapper .icon-button {
+    position: absolute;
+    right: 8px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 4px;
+    transition: var(--transition-smooth);
+}
+
+.password-wrapper .icon-button:hover {
+    color: var(--text-primary);
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Range input customizing */
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--accent-indigo);
+    cursor: pointer;
+    transition: var(--transition-smooth);
+    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--accent-teal);
+    box-shadow: 0 0 10px rgba(20, 184, 166, 0.6);
+    transform: scale(1.1);
+}
+
+/* Effort Radio Pills Picker */
+.effort-picker {
+    display: flex;
+    background-color: rgba(15, 23, 42, 0.4);
+    border: 1px solid var(--border-glass);
+    padding: 3px;
+    border-radius: var(--border-radius-sm);
+    gap: 2px;
+}
+
+.effort-pill {
+    flex: 1;
+    cursor: pointer;
+    text-align: center;
+    position: relative;
+}
+
+.effort-pill input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.effort-pill span {
+    display: block;
+    padding: 8px 0;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 6px;
+    color: var(--text-secondary);
+    transition: var(--transition-smooth);
+    font-family: var(--font-heading);
+}
+
+.effort-pill input:checked + span {
+    background: var(--accent-indigo-gradient);
+    color: var(--text-primary);
+    box-shadow: var(--shadow-sm);
+}
+
+.effort-pill:hover span:not(input:checked + span) {
+    color: var(--text-primary);
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* Upload zone interface */
+.upload-zone {
+    border: 1.5px dashed var(--border-glass);
+    border-radius: var(--border-radius-md);
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    background: rgba(15, 23, 42, 0.2);
+    transition: var(--transition-smooth);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.upload-zone:hover {
+    border-color: var(--accent-indigo);
+    background: rgba(99, 102, 241, 0.03);
+}
+
+.upload-zone.drag-active {
+    border-color: var(--accent-teal);
+    background: rgba(20, 184, 166, 0.06);
+    transform: scale(0.98);
+}
+
+.upload-icon {
+    color: var(--text-secondary);
+    transition: var(--transition-smooth);
+}
+
+.upload-zone:hover .upload-icon {
+    color: var(--accent-indigo);
+    transform: translateY(-2px);
+}
+
+.upload-zone p {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.upload-zone p span {
+    color: var(--accent-indigo);
+    font-weight: 600;
+}
+
+.upload-limit {
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+/* Shelf Inventory */
+.shelf-inventory {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 200px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+.empty-shelf-text {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-align: center;
+    padding: 10px 0;
+    font-style: italic;
+}
+
+.media-chip {
+    display: flex;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--border-radius-sm);
+    padding: 6px 10px;
+    gap: 10px;
+    transition: var(--transition-smooth);
+    position: relative;
+    overflow: hidden;
+}
+
+.media-chip:hover {
+    border-color: rgba(99, 102, 241, 0.3);
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.media-chip-preview {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    object-fit: cover;
+    background-color: #000;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.media-chip-preview img,
+.media-chip-preview video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.media-chip-details {
+    flex: 1;
+    min-width: 0;
+}
+
+.media-chip-name {
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.media-chip-meta {
+    font-size: 10px;
+    color: var(--text-muted);
+    display: flex;
+    gap: 8px;
+}
+
+.media-chip-remove {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition-smooth);
+}
+
+.media-chip-remove:hover {
+    color: var(--danger);
+    background-color: rgba(244, 63, 94, 0.1);
+}
+
+/* Recipes Grids */
+.recipes-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.recipe-card {
+    background-color: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--border-radius-sm);
+    padding: 10px;
+    cursor: pointer;
+    transition: var(--transition-smooth);
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.recipe-card:hover {
+    background-color: rgba(99, 102, 241, 0.05);
+    border-color: rgba(99, 102, 241, 0.25);
+    transform: translateY(-2px);
+}
+
+.recipe-icon {
+    font-size: 16px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 6px;
+    border-radius: 6px;
+}
+
+.recipe-details h3 {
+    font-family: var(--font-heading);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.recipe-details p {
+    font-size: 9px;
+    color: var(--text-muted);
+    line-height: 1.3;
+    margin-top: 2px;
+}
+
+/* Sidebar Footer area */
+.sidebar-footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--border-glass);
+}
+
+.connection-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--text-secondary);
+}
+
+.status-indicator {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    position: relative;
+}
+
+.status-indicator.online {
+    background-color: var(--accent-teal);
+    box-shadow: 0 0 6px var(--accent-teal);
+}
+
+/* Main Chat Container Area */
+.chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: rgba(11, 15, 25, 0.5);
+}
+
+/* Chat Header */
+.chat-header {
+    padding: 18px 30px;
+    border-bottom: 1px solid var(--border-glass);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    backdrop-filter: blur(10px);
+    z-index: 10;
+}
+
+.header-main h2 {
+    font-family: var(--font-heading);
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.model-badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--accent-teal);
+    background-color: rgba(20, 184, 166, 0.08);
+    border: 1px solid rgba(20, 184, 166, 0.2);
+    padding: 1px 6px;
+    border-radius: 4px;
+    display: inline-block;
+    margin-top: 2px;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Buttons */
+.btn {
+    border-radius: var(--border-radius-sm);
+    font-family: var(--font-heading);
+    font-weight: 500;
+    font-size: 12px;
+    cursor: pointer;
+    transition: var(--transition-smooth);
+    border: none;
+    outline: none;
+    gap: 6px;
+}
+
+.btn-secondary {
+    background-color: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-glass);
+    color: var(--text-primary);
+    padding: 8px 12px;
+}
+
+.btn-secondary:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.btn-icon {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--border-radius-sm);
+    width: 38px;
+    height: 38px;
+}
+
+.btn-icon:hover {
+    color: var(--text-primary);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.btn-primary {
+    background: var(--accent-indigo-gradient);
+    color: var(--text-primary);
+    padding: 8px 16px;
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+/* Messages area */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* Welcome Box styling */
+.welcome-box {
+    max-width: 600px;
+    margin: 40px auto;
+    background-color: var(--bg-glass);
+    border: 1px solid var(--border-glass);
+    padding: 40px;
+    border-radius: var(--border-radius-lg);
+    text-align: center;
+    box-shadow: var(--shadow-lg);
+    backdrop-filter: blur(16px);
+    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.welcome-icon {
+    font-size: 40px;
+    width: 70px;
+    height: 70px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 50%;
+    margin: 0 auto 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
+}
+
+.welcome-box h2 {
+    font-family: var(--font-heading);
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
+.welcome-box p {
+    color: var(--text-secondary);
+    font-size: 13.5px;
+    margin-bottom: 24px;
+    line-height: 1.5;
+}
+
+.feature-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+}
+
+.tag {
+    font-size: 11px;
+    font-weight: 500;
+    background-color: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 4px 10px;
+    border-radius: 100px;
+    color: var(--text-secondary);
+}
+
+/* Chat bubble entries */
+.message-bubble {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 80%;
+    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.message-bubble.user {
+    align-self: flex-end;
+}
+
+.message-bubble.assistant {
+    align-self: flex-start;
+}
+
+.message-meta {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-weight: 500;
+    margin: 0 4px;
+}
+
+.message-bubble.user .message-meta {
+    text-align: right;
+}
+
+.message-body {
+    padding: 14px 18px;
+    border-radius: var(--border-radius-md);
+    font-size: 14.5px;
+    line-height: 1.65;
+    position: relative;
+    box-shadow: var(--shadow-sm);
+}
+
+.message-bubble.user .message-body {
+    background-color: rgba(99, 102, 241, 0.15);
+    border: 1px solid rgba(99, 102, 241, 0.25);
+    border-bottom-right-radius: 4px;
+    color: var(--text-primary);
+}
+
+.message-bubble.assistant .message-body {
+    background-color: var(--bg-glass);
+    border: 1px solid var(--border-glass);
+    border-bottom-left-radius: 4px;
+    color: var(--text-primary);
+    backdrop-filter: blur(10px);
+}
+
+/* Rendered Multimodal media inside Chat Bubbles */
+.bubble-attachments {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 8px;
+    margin-top: 10px;
+    max-width: 400px;
+}
+
+.bubble-attachment-card {
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: #000;
+    position: relative;
+    aspect-ratio: 16/10;
+}
+
+.bubble-attachment-card img,
+.bubble-attachment-card video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.bubble-attachment-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    font-size: 8px;
+    text-align: center;
+    padding: 2px;
+    font-family: var(--font-mono);
+}
+
+/* Collapsible Thought Process Box for reasoning models */
+.thought-container {
+    margin-bottom: 12px;
+    border: 1px solid rgba(99, 102, 241, 0.15);
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    background-color: rgba(99, 102, 241, 0.02);
+}
+
+.thought-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: rgba(99, 102, 241, 0.05);
+    cursor: pointer;
+    user-select: none;
+    transition: var(--transition-smooth);
+}
+
+.thought-header:hover {
+    background-color: rgba(99, 102, 241, 0.08);
+}
+
+.thought-title-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--font-heading);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--accent-indigo);
+}
+
+.thought-timer {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-secondary);
+}
+
+.thought-toggle-icon {
+    font-size: 10px;
+    color: var(--text-secondary);
+    transition: transform 0.2s ease;
+}
+
+.thought-container.collapsed .thought-toggle-icon {
+    transform: rotate(-90deg);
+}
+
+.thought-content {
+    padding: 12px 14px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-secondary);
+    background-color: rgba(8, 12, 20, 0.4);
+    border-top: 1px solid rgba(99, 102, 241, 0.1);
+    white-space: pre-wrap;
+    max-height: 250px;
+    overflow-y: auto;
+}
+
+.thought-container.collapsed .thought-content {
+    display: none;
+}
+
+/* Markdown typography rules within message bodies */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3 {
+    margin-top: 14px;
+    margin-bottom: 8px;
+    font-family: var(--font-heading);
+    font-weight: 600;
+}
+
+.markdown-body h1 { font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 4px; }
+.markdown-body h2 { font-size: 15px; }
+.markdown-body h3 { font-size: 13.5px; }
+
+.markdown-body p {
+    margin-bottom: 12px;
+}
+
+.markdown-body p:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-body code {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    background-color: rgba(255, 255, 255, 0.08);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--accent-teal);
+}
+
+.markdown-body pre {
+    margin: 14px 0;
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.08);
+}
+
+.markdown-body pre code {
+    display: block;
+    padding: 12px 14px;
+    overflow-x: auto;
+    background-color: #0c101b !important;
+    color: #e2e8f0;
+}
+
+.markdown-body table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 14px 0;
+    font-size: 13px;
+}
+
+.markdown-body th,
+.markdown-body td {
+    border: 1px solid rgba(255,255,255,0.08);
+    padding: 8px 12px;
+    text-align: left;
+}
+
+.markdown-body th {
+    background-color: rgba(255,255,255,0.03);
+    font-weight: 600;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+    margin-left: 20px;
+    margin-bottom: 12px;
+}
+
+.markdown-body li {
+    margin-bottom: 4px;
+}
+
+/* Chat Input Console Footer */
+.chat-footer {
+    padding: 20px 30px;
+    border-top: 1px solid var(--border-glass);
+    background-color: var(--bg-sidebar);
+}
+
+/* Quick upload preview shelf */
+.quick-shelf-preview {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+}
+
+.quick-preview-item {
+    width: 48px;
+    height: 48px;
+    border-radius: 6px;
+    border: 1.5px solid var(--accent-indigo);
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
+}
+
+.quick-preview-item img,
+.quick-preview-item video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.quick-preview-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background-color: var(--accent-teal);
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid #fff;
+}
+
+/* Actual input bar layout */
+.input-panel {
+    display: flex;
+    align-items: center;
+    background-color: rgba(15, 23, 42, 0.4);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--border-radius-md);
+    padding: 6px 10px;
+    gap: 8px;
+    transition: var(--transition-smooth);
+}
+
+.input-panel:focus-within {
+    border-color: var(--accent-indigo);
+    box-shadow: 0 0 14px rgba(99, 102, 241, 0.1);
+    background-color: rgba(15, 23, 42, 0.8);
+}
+
+.textarea-wrapper {
+    flex: 1;
+}
+
+.input-panel textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    padding: 10px 4px;
+    resize: none;
+    max-height: 120px;
+}
+
+.btn-send {
+    width: 38px;
+    height: 38px;
+    border-radius: var(--border-radius-sm);
+    padding: 0;
+    flex-shrink: 0;
+}
+
+/* Loading animations spinner */
+.spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top: 2px solid #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.05); opacity: 0.85; }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}