Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Build Small — AI Studio</title> | |
| <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=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" rel="stylesheet" /> | |
| <script> | |
| (function () { | |
| var t = localStorage.getItem("studio-theme"); | |
| if (t === "dark" || (!t && matchMedia("(prefers-color-scheme: dark)").matches)) | |
| document.documentElement.dataset.theme = "dark"; | |
| })(); | |
| </script> | |
| <link rel="stylesheet" href="/static/studio/studio.css?v={{STUDIO_ASSET_VERSION}}" /> | |
| </head> | |
| <body> | |
| <div id="studio-error" class="studio-banner studio-banner-error hidden" role="alert"></div> | |
| <div id="studio-loading" class="studio-banner studio-banner-loading hidden">Working…</div> | |
| <button type="button" id="sidebar-backdrop" class="sidebar-backdrop hidden" aria-label="Close menu"></button> | |
| <aside id="sidebar" class="sidebar"> | |
| <button type="button" id="sidebar-close" class="sidebar-close material-symbols-outlined" aria-label="Close menu">close</button> | |
| <div class="sidebar-brand"> | |
| <h1>Build Small</h1> | |
| <p>AI Studio</p> | |
| </div> | |
| <button type="button" id="btn-new-session" class="btn btn-primary btn-block"> | |
| <span class="material-symbols-outlined">add</span> | |
| New session topic | |
| </button> | |
| <nav class="sidebar-nav"> | |
| <button type="button" class="nav-item" data-view="research"><span class="material-symbols-outlined">search</span>Research</button> | |
| <button type="button" class="nav-item active" data-view="slides"><span class="material-symbols-outlined">present_to_all</span>Slides</button> | |
| <button type="button" class="nav-item" data-view="quiz"><span class="material-symbols-outlined">quiz</span>Quiz</button> | |
| <button type="button" class="nav-item" data-view="language-lessons"><span class="material-symbols-outlined">translate</span>Language lessons</button> | |
| <button type="button" class="nav-item" data-view="debug"><span class="material-symbols-outlined">chat</span>Chat</button> | |
| <button type="button" id="btn-open-settings" class="nav-item"><span class="material-symbols-outlined">settings</span>Settings</button> | |
| <a href="?classic" class="nav-item nav-link"><span class="material-symbols-outlined">open_in_new</span>Classic UI</a> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <p class="sidebar-foot-label">Powered by local small models</p> | |
| <a href="?classic">Open Classic UI</a> | |
| </div> | |
| </aside> | |
| <header class="topbar"> | |
| <button type="button" id="sidebar-open" class="topbar-icon material-symbols-outlined" aria-label="Open menu">menu</button> | |
| <nav class="breadcrumb"> | |
| <span>Projects</span> | |
| <span class="material-symbols-outlined crumb-sep">chevron_right</span> | |
| <strong id="project-title">Small Model Finetuning</strong> | |
| </nav> | |
| <div class="topbar-actions"> | |
| <button type="button" id="theme-toggle-btn" class="btn btn-ghost btn-icon" aria-label="Toggle light/dark theme" title="Toggle theme"> | |
| <span class="material-symbols-outlined" id="theme-icon">dark_mode</span> | |
| </button> | |
| <a href="?classic" class="btn btn-ghost topbar-classic-link" aria-label="Classic UI" title="Classic UI"> | |
| <span class="material-symbols-outlined">open_in_new</span> | |
| <span class="topbar-classic-label">Classic UI</span> | |
| </a> | |
| <button type="button" id="btn-export" class="btn btn-primary topbar-export" disabled>Export</button> | |
| </div> | |
| </header> | |
| <div class="workspace-context-bar" id="workspace-context-bar"> | |
| <details class="workspace-context-mobile" id="workspace-context-mobile"> | |
| <summary class="workspace-context-summary"> | |
| <span class="material-symbols-outlined workspace-context-summary-icon">tune</span> | |
| <span id="workspace-context-summary-text" class="workspace-context-summary-text">Workspace</span> | |
| <span class="material-symbols-outlined workspace-context-chevron">expand_more</span> | |
| </summary> | |
| <div class="workspace-context-inner"> | |
| <label class="field ws-field"> | |
| <span>Workspace topic</span> | |
| <input id="workspace-topic" type="text" class="input" value="small model finetuning" placeholder="e.g. Small language model finetuning" /> | |
| </label> | |
| <label class="field ws-field"> | |
| <span>ResearchMind session</span> | |
| <select id="workspace-session" class="input"> | |
| <option value="">New session (on ingest)</option> | |
| </select> | |
| </label> | |
| <button type="button" id="workspace-refresh-sessions" class="btn btn-ghost btn-icon" title="Refresh sessions">↻</button> | |
| <details class="workspace-docs-details" id="workspace-docs-details"> | |
| <summary>Source scope (RAG)</summary> | |
| <div id="workspace-doc-list" class="workspace-doc-list"></div> | |
| <p id="workspace-rag-hint" class="status-text"></p> | |
| <p id="workspace-memory" class="status-text workspace-memory"></p> | |
| </details> | |
| </div> | |
| </details> | |
| </div> | |
| <main class="workspace" data-view="slides"> | |
| <section class="col col-research"> | |
| <div class="research-layout"> | |
| <div class="research-sources"> | |
| <div class="research-sources-head"> | |
| <h2 class="section-label"> | |
| <span class="label-full">Step 1 · Research Library</span> | |
| <span class="label-compact">Sources for slides</span> | |
| </h2> | |
| <span id="research-doc-count" class="research-doc-count hidden">0 docs</span> | |
| </div> | |
| <div class="card card-ingest"> | |
| <p class="card-title">Add sources</p> | |
| <label class="field ingest-workflow-field"> | |
| <span>Ingest workflow</span> | |
| <select id="ingest-workflow" class="input"> | |
| <option value="select">Discover & select URLs</option> | |
| <option value="auto">Auto-scrape (no URL pick)</option> | |
| <option value="direct">Paste URL or upload</option> | |
| </select> | |
| </label> | |
| <div id="ingest-discover-row" class="ingest-action-row"> | |
| <button type="button" id="btn-discover" class="btn btn-secondary btn-block"> | |
| <span class="material-symbols-outlined">travel_explore</span> | |
| Discover on web | |
| </button> | |
| </div> | |
| <div id="ingest-auto-row" class="ingest-action-row hidden"> | |
| <button type="button" id="btn-auto-ingest" class="btn btn-secondary btn-block"> | |
| <span class="material-symbols-outlined">bolt</span> | |
| Run auto-ingest | |
| </button> | |
| <p class="status-text ingest-hint-full">Skips URL review — searches, verifies, and indexes in one step.</p> | |
| </div> | |
| <div id="url-choices-panel" class="url-choices-panel hidden"> | |
| <div class="url-choices-head"> | |
| <p class="card-title">Suggested URLs</p> | |
| <label class="url-select-all"> | |
| <input id="url-select-all" type="checkbox" checked /> | |
| Select all | |
| </label> | |
| </div> | |
| <div id="url-choices-list" class="url-choices-list"></div> | |
| </div> | |
| <div class="ingest-url-row"> | |
| <input id="ingest-url" type="url" class="input" placeholder="Paste URL…" /> | |
| <button type="button" id="btn-ingest-url" class="btn btn-secondary">Ingest</button> | |
| </div> | |
| <p class="ingest-url-caption status-text">Ingests pasted URL plus any selected sources above.</p> | |
| <label class="upload-zone upload-zone-compact"> | |
| <input id="ingest-file" type="file" accept=".pdf,.docx" multiple hidden /> | |
| <span class="material-symbols-outlined">upload_file</span> | |
| <span>Upload PDF or Doc</span> | |
| </label> | |
| <p id="ingest-status" class="status-text"></p> | |
| </div> | |
| <div class="card card-grow card-docs-rail"> | |
| <div class="card-row"> | |
| <h3 class="card-title">Indexed documents</h3> | |
| </div> | |
| <div id="documents-panel" class="documents-panel-scroll"></div> | |
| </div> | |
| <div class="research-rail-footer"> | |
| <button type="button" id="btn-open-research-view" class="btn btn-ghost btn-block research-rail-link"> | |
| <span class="material-symbols-outlined">forum</span> | |
| Open Research chat | |
| </button> | |
| </div> | |
| </div> | |
| <div class="research-chat" id="research-chat-panel"> | |
| <h2 class="section-label label-full">Step 2 · Ask with RAG</h2> | |
| <div class="card card-chat"> | |
| <div class="card-row"> | |
| <h3 class="card-title">Research chat</h3> | |
| <span id="research-rag-badge" class="rag-badge">RAG ready</span> | |
| </div> | |
| <div id="research-chat-messages" class="research-chat-messages"> | |
| <p class="research-chat-empty">Ingest sources, then ask questions — answers include citations from your library.</p> | |
| </div> | |
| <label class="field"> | |
| <span>Your question</span> | |
| <textarea id="research-question" class="input" rows="3" placeholder="What do these sources say about your topic?"></textarea> | |
| </label> | |
| <button type="button" id="btn-research-ask" class="btn btn-primary btn-block"> | |
| <span class="material-symbols-outlined">chat</span> | |
| Ask | |
| </button> | |
| <button type="button" id="btn-research-to-slides" class="btn btn-secondary btn-block" disabled> | |
| <span class="material-symbols-outlined">present_to_all</span> | |
| Generate slides from chat | |
| </button> | |
| <p id="research-chat-status" class="status-text"></p> | |
| <details class="studio-debug-trace" id="research-trace-details"> | |
| <summary>Agent trace</summary> | |
| <div id="research-trace-panel"></div> | |
| </details> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="col col-slides"> | |
| <div class="card card-tall"> | |
| <div class="card-header"> | |
| <div class="step-badge">2</div> | |
| <h2>Lesson Creation</h2> | |
| </div> | |
| <div class="controls-panel"> | |
| <div class="controls-grid"> | |
| <label class="field"> | |
| <span>Topic override (optional)</span> | |
| <input id="lesson-topic" type="text" class="input" placeholder="Uses workspace topic when empty" /> | |
| </label> | |
| <label class="field"> | |
| <span>Grade</span> | |
| <select id="lesson-grade" class="input"> | |
| <option value="K">K</option> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5">5</option> | |
| <option value="6" selected>6</option> | |
| <option value="7">7</option> | |
| <option value="8">8</option> | |
| <option value="9">9</option> | |
| <option value="10">10</option> | |
| <option value="11">11</option> | |
| <option value="12">12</option> | |
| <option value="Adult">Adult</option> | |
| </select> | |
| </label> | |
| <label class="field field-wide"> | |
| <span>Slides: <strong id="slide-count-val">5</strong></span> | |
| <input id="slide-count" type="range" min="3" max="8" value="5" /> | |
| </label> | |
| </div> | |
| <details class="slide-source-details" id="slide-source-details"> | |
| <summary>Research sources (optional)</summary> | |
| <label class="field"> | |
| <span>Source mode</span> | |
| <select id="slide-source-mode" class="input"> | |
| <option value="">Auto (RAG toggle)</option> | |
| <option value="none">None (model only)</option> | |
| <option value="web">Web search</option> | |
| <option value="rag">RAG (indexed sources)</option> | |
| </select> | |
| </label> | |
| <label class="field slide-web-workflow hidden" id="slide-web-workflow-wrap"> | |
| <span>Web search workflow</span> | |
| <select id="slide-search-workflow" class="input"> | |
| <option value="two_step">Discover & confirm</option> | |
| <option value="auto">Auto search & ingest</option> | |
| </select> | |
| </label> | |
| <div class="slide-web-discover hidden" id="slide-web-discover-wrap"> | |
| <button type="button" id="btn-slide-discover" class="btn btn-secondary btn-block">Discover sources</button> | |
| <div id="slide-url-choices-panel" class="url-choices-panel hidden"> | |
| <div id="slide-url-choices-list" class="url-choices-list"></div> | |
| </div> | |
| <label class="field"> | |
| <span>URLs (one per line)</span> | |
| <textarea id="slide-urls-text" class="input" rows="2" placeholder="https://…"></textarea> | |
| </label> | |
| </div> | |
| <label class="upload-zone upload-zone-compact"> | |
| <input id="slide-source-files" type="file" accept=".pdf,.docx" multiple hidden /> | |
| <span class="material-symbols-outlined">upload_file</span> | |
| <span>Upload PDF or Doc for generation</span> | |
| </label> | |
| </details> | |
| <div class="controls-actions"> | |
| <button type="button" id="btn-generate" class="btn btn-primary"> | |
| <span class="material-symbols-outlined">auto_awesome</span> | |
| Generate Slides | |
| </button> | |
| <button type="button" id="btn-present" class="btn btn-secondary" disabled title="Present fullscreen"> | |
| <span class="material-symbols-outlined">slideshow</span> | |
| Present | |
| </button> | |
| </div> | |
| <p class="status-text slide-demo-tip">Demo tip: 3 slides on GPU hardware for a quick run.</p> | |
| <p id="generate-status" class="status-text">Ready to generate.</p> | |
| <div id="progress-panel" class="progress-panel"> | |
| <div class="progress-panel-head"> | |
| <span id="progress-elapsed" class="progress-elapsed">Elapsed: 0s</span> | |
| <span id="progress-eta" class="progress-eta"></span> | |
| </div> | |
| <div class="progress-bar-track" aria-hidden="true"> | |
| <div id="progress-bar-fill" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| <p id="progress-current" class="progress-current">Idle</p> | |
| <ol id="progress-steps" class="progress-steps"></ol> | |
| <div id="progress-log" class="progress-log hidden" aria-live="polite"></div> | |
| <details class="studio-debug-trace" id="slides-trace-details"> | |
| <summary>Agent trace</summary> | |
| <div id="slides-trace-panel"></div> | |
| </details> | |
| </div> | |
| </div> | |
| <div id="slide-canvas" class="slide-canvas"> | |
| <div id="canvas-overlay" class="region-loading hidden" aria-live="polite"> | |
| <div class="region-loading-inner"> | |
| <span class="studio-spinner" aria-hidden="true"></span> | |
| <p id="canvas-overlay-text" class="region-loading-text">Generating slides…</p> | |
| <p class="region-loading-hint canvas-overlay-hint">First run may take several minutes on CPU; use GPU Space or fewer slides for a quick demo.</p> | |
| </div> | |
| </div> | |
| <div id="slide-canvas-content" class="slide-canvas-content"> | |
| <div class="studio-canvas-empty"><p>Generate slides to preview your lesson here.</p></div> | |
| </div> | |
| </div> | |
| <div id="slide-gallery" class="studio-gallery-strip hidden"></div> | |
| <details class="slide-outline-details hidden" id="slide-outline-details"> | |
| <summary>Outline (markdown)</summary> | |
| <div id="slide-outline" class="slide-outline"></div> | |
| </details> | |
| <div id="downloads" class="downloads hidden"></div> | |
| <button type="button" id="btn-slides-to-quiz" class="btn btn-ghost btn-block slides-to-quiz hidden"> | |
| <span class="material-symbols-outlined">quiz</span> | |
| Create quiz on this topic | |
| </button> | |
| <details class="slide-export-help"> | |
| <summary>Export help — open in Google Docs</summary> | |
| <p class="status-text">Download the <strong>.docx</strong> file, upload it to <a href="https://drive.google.com" target="_blank" rel="noopener">Google Drive</a>, then choose <strong>Open with → Google Docs</strong>. You can also upload the <strong>.html</strong> file via Google Docs → File → Open → Upload.</p> | |
| </details> | |
| </div> | |
| </section> | |
| <section class="col col-quiz view-quiz-only"> | |
| <div class="card card-tall"> | |
| <div class="card-header"> | |
| <div class="step-badge">3</div> | |
| <h2>Quiz maker</h2> | |
| </div> | |
| <div class="controls-panel"> | |
| <div class="controls-grid"> | |
| <label class="field"> | |
| <span>Topic override (optional)</span> | |
| <input id="quiz-topic" type="text" class="input" placeholder="Uses workspace topic when empty" /> | |
| </label> | |
| <label class="field"> | |
| <span>Grade</span> | |
| <select id="quiz-grade" class="input"> | |
| <option value="K">K</option> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5">5</option> | |
| <option value="6" selected>6</option> | |
| <option value="7">7</option> | |
| <option value="8">8</option> | |
| <option value="9">9</option> | |
| <option value="10">10</option> | |
| <option value="11">11</option> | |
| <option value="12">12</option> | |
| <option value="Adult">Adult</option> | |
| </select> | |
| </label> | |
| <label class="field field-wide"> | |
| <span>Questions: <strong id="quiz-count-val">5</strong></span> | |
| <input id="quiz-count" type="range" min="5" max="10" value="5" /> | |
| </label> | |
| </div> | |
| <details class="slide-source-details" id="quiz-source-details"> | |
| <summary>Research sources (optional)</summary> | |
| <label class="field"> | |
| <span>Source mode</span> | |
| <select id="quiz-source-mode" class="input"> | |
| <option value="">Auto (RAG toggle)</option> | |
| <option value="none">None (model only)</option> | |
| <option value="web">Web search</option> | |
| <option value="rag">RAG (indexed sources)</option> | |
| </select> | |
| </label> | |
| <label class="field slide-web-workflow hidden" id="quiz-web-workflow-wrap"> | |
| <span>Web search workflow</span> | |
| <select id="quiz-search-workflow" class="input"> | |
| <option value="two_step">Discover & confirm</option> | |
| <option value="auto">Auto search & ingest</option> | |
| </select> | |
| </label> | |
| <div class="slide-web-discover hidden" id="quiz-web-discover-wrap"> | |
| <button type="button" id="btn-quiz-discover" class="btn btn-secondary btn-block">Discover sources</button> | |
| <div id="quiz-url-choices-panel" class="url-choices-panel hidden"> | |
| <div id="quiz-url-choices-list" class="url-choices-list"></div> | |
| </div> | |
| <label class="field"> | |
| <span>URLs (one per line)</span> | |
| <textarea id="quiz-urls-text" class="input" rows="2" placeholder="https://…"></textarea> | |
| </label> | |
| </div> | |
| <label class="upload-zone upload-zone-compact"> | |
| <input id="quiz-source-files" type="file" accept=".pdf,.docx" multiple hidden /> | |
| <span class="material-symbols-outlined">upload_file</span> | |
| <span>Upload PDF or Doc for generation</span> | |
| </label> | |
| </details> | |
| <div class="controls-actions"> | |
| <button type="button" id="btn-generate-quiz" class="btn btn-primary"> | |
| <span class="material-symbols-outlined">auto_awesome</span> | |
| Generate quiz | |
| </button> | |
| </div> | |
| <p id="quiz-generate-status" class="status-text">Ready to generate.</p> | |
| <div id="quiz-progress-panel" class="progress-panel hidden"> | |
| <div class="progress-panel-head"> | |
| <span id="quiz-progress-elapsed" class="progress-elapsed">Elapsed: 0s</span> | |
| <span id="quiz-progress-eta" class="progress-eta"></span> | |
| </div> | |
| <div class="progress-bar-track" aria-hidden="true"> | |
| <div id="quiz-progress-bar-fill" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| <p id="quiz-progress-current" class="progress-current">Idle</p> | |
| <ol id="quiz-progress-steps" class="progress-steps"></ol> | |
| <div id="quiz-progress-log" class="progress-log hidden" aria-live="polite"></div> | |
| <details class="studio-debug-trace" id="quiz-trace-details"> | |
| <summary>Agent trace</summary> | |
| <div id="quiz-trace-panel"></div> | |
| </details> | |
| </div> | |
| </div> | |
| <div id="quiz-preview" class="slide-canvas"> | |
| <div id="quiz-preview-overlay" class="region-loading hidden" aria-live="polite"> | |
| <div class="region-loading-inner"> | |
| <span class="studio-spinner" aria-hidden="true"></span> | |
| <p class="region-loading-text">Generating quiz…</p> | |
| </div> | |
| </div> | |
| <div id="quiz-preview-content" class="slide-canvas-content"> | |
| <div class="studio-canvas-empty"><p>Generate a quiz to preview the worksheet here.</p></div> | |
| </div> | |
| </div> | |
| <details class="slide-outline-details hidden" id="quiz-outline-details"> | |
| <summary>Outline (markdown)</summary> | |
| <div id="quiz-outline" class="slide-outline"></div> | |
| </details> | |
| <div id="quiz-downloads" class="downloads hidden"></div> | |
| </div> | |
| </section> | |
| <section class="col col-studio"> | |
| <div class="lessons-layout view-lessons-only"> | |
| <aside class="lessons-rail"> | |
| <div class="card lessons-rail-card"> | |
| <p class="card-title">Target language</p> | |
| <label class="field"> | |
| <span>Lesson language</span> | |
| <select id="lessons-language" class="input"></select> | |
| </label> | |
| <label class="field lessons-other-lang hidden" id="lessons-other-lang-wrap"> | |
| <span>Text-only language code</span> | |
| <input id="lessons-other-lang" type="text" class="input" placeholder="e.g. hi, sw" maxlength="8" /> | |
| </label> | |
| <p id="lessons-voiceout-note" class="status-text"></p> | |
| <p class="status-text lessons-coach-model">Coach: Tiny Aya Global (70+ languages)</p> | |
| <input type="hidden" id="lessons-coach-variant" value="tiny-aya-global" /> | |
| </div> | |
| <div class="card lessons-rag-card"> | |
| <p class="card-title">RAG scope</p> | |
| <label class="toggle-row"> | |
| <span>Answer from my indexed sources</span> | |
| <input id="lessons-use-rag" type="checkbox" checked /> | |
| </label> | |
| <p class="status-text">Ground lesson replies in your workspace documents when enabled.</p> | |
| </div> | |
| <div class="card lessons-rail-controls"> | |
| <p class="card-title">Mode</p> | |
| <div class="mode-cards lessons-mode-cards" id="lessons-modes"> | |
| <button type="button" class="mode-card" data-mode="explain">Explain</button> | |
| <button type="button" class="mode-card active" data-mode="lesson">Lesson coach</button> | |
| </div> | |
| <label class="field lessons-topic-wrap"> | |
| <span>Lesson topic</span> | |
| <input id="lessons-topic" type="text" class="input" placeholder="Uses workspace topic when empty" /> | |
| </label> | |
| <details class="lessons-rag-sources" id="lessons-rag-sources"> | |
| <summary>Add sources (optional)</summary> | |
| <p class="status-text">Discover or ingest sources to ground answers in your library.</p> | |
| <div class="ingest-action-row"> | |
| <button type="button" id="btn-lessons-discover" class="btn btn-secondary">Discover on web</button> | |
| <button type="button" id="btn-lessons-auto-ingest" class="btn btn-secondary">Auto-ingest</button> | |
| </div> | |
| <div id="lessons-url-choices-panel" class="url-choices-panel hidden"> | |
| <div id="lessons-url-choices-list" class="url-choices-list"></div> | |
| </div> | |
| <label class="field"> | |
| <span>Paste URLs (one per line)</span> | |
| <textarea id="lessons-urls-text" class="input" rows="2" placeholder="https://…"></textarea> | |
| </label> | |
| <label class="upload-zone upload-zone-compact"> | |
| <input id="lessons-ingest-file" type="file" accept=".pdf,.docx" multiple hidden /> | |
| <span class="material-symbols-outlined">upload_file</span> | |
| <span>Upload PDF or Doc</span> | |
| </label> | |
| <button type="button" id="btn-lessons-ingest" class="btn btn-secondary btn-block">Ingest sources</button> | |
| <p id="lessons-ingest-status" class="status-text"></p> | |
| </details> | |
| </div> | |
| </aside> | |
| <div class="lessons-main"> | |
| <div class="card lessons-main-card"> | |
| <div class="lessons-card-head"> | |
| <h2 class="section-label">Language lessons</h2> | |
| <p class="lessons-card-desc">Learn in your language — type, hold the mic, or upload audio. Replies can speak back automatically.</p> | |
| </div> | |
| <div id="lessons-chat-messages" class="research-chat-messages lessons-chat-messages"> | |
| <p class="research-chat-empty">Choose a language, then type, speak, or upload audio to start your lesson.</p> | |
| </div> | |
| <div class="lessons-compose" id="lessons-panel"> | |
| <label class="field"> | |
| <span>Your message</span> | |
| <textarea id="lessons-message" class="input" rows="2" placeholder="What is the difference between pretraining and finetuning a small model?"></textarea> | |
| </label> | |
| <div class="lessons-input-toolbar"> | |
| <button type="button" id="btn-lessons-hold-mic" class="btn btn-secondary lessons-hold-mic">Hold to speak</button> | |
| <button type="button" id="btn-lessons-record-start" class="btn btn-secondary btn-compact">Start mic</button> | |
| <button type="button" id="btn-lessons-record-stop" class="btn btn-secondary btn-compact" disabled>Stop mic</button> | |
| <label class="lessons-upload-btn btn btn-secondary"> | |
| <span class="material-symbols-outlined">upload_file</span> | |
| Upload audio | |
| <input id="lessons-audio-upload" type="file" accept="audio/*" hidden /> | |
| </label> | |
| </div> | |
| <p id="lessons-record-status" class="status-text lessons-record-status"></p> | |
| <div class="lessons-send-row"> | |
| <button type="button" id="btn-lessons-send" class="btn btn-primary">Send</button> | |
| <button type="button" id="btn-lessons-to-slides" class="btn btn-secondary" disabled> | |
| <span class="material-symbols-outlined">present_to_all</span> | |
| Slides from chat | |
| </button> | |
| <label class="toggle-row lessons-auto-speak"> | |
| <span>Auto-speak replies</span> | |
| <input id="lessons-auto-speak" type="checkbox" checked /> | |
| </label> | |
| <button type="button" id="btn-lessons-clear" class="btn btn-ghost">Clear</button> | |
| </div> | |
| <p id="lessons-turn-status" class="status-text"></p> | |
| </div> | |
| </div> | |
| <p class="lessons-classic-link status-text"> | |
| Pitch metrics and monologue analysis live in | |
| <a href="?classic">Classic UI → EchoCoach</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="col col-debug"> | |
| <div class="card card-tall coach-debug-card"> | |
| <div class="coach-card-head"> | |
| <h2 class="section-label">Chat</h2> | |
| <p class="status-text view-debug-only">Ask the local model — turn on RAG to ground answers in your library.</p> | |
| </div> | |
| <label class="toggle-row"> | |
| <span>Use ResearchMind RAG</span> | |
| <input id="debug-use-rag" type="checkbox" /> | |
| </label> | |
| <details class="debug-rag-scope" id="debug-rag-scope"> | |
| <summary>RAG scope (override workspace defaults)</summary> | |
| <label class="field"> | |
| <span>Session</span> | |
| <div class="debug-session-row"> | |
| <select id="debug-session" class="input"> | |
| <option value="">Workspace default</option> | |
| </select> | |
| <button type="button" id="debug-refresh-sessions" class="btn btn-ghost btn-icon" title="Refresh sessions">↻</button> | |
| </div> | |
| </label> | |
| <div id="debug-doc-list" class="debug-doc-list"></div> | |
| <p id="debug-rag-hint" class="status-text"></p> | |
| </details> | |
| <div id="debug-model-wrap" class="hidden"> | |
| <label class="field"> | |
| <span>Model preset override</span> | |
| <select id="debug-model-key" class="input"></select> | |
| </label> | |
| </div> | |
| <div id="debug-chat-messages" class="research-chat-messages debug-chat-messages"> | |
| <p class="research-chat-empty">Ask the local model — turn on RAG to ground answers in your library.</p> | |
| </div> | |
| <div class="coach-debug-compose"> | |
| <label class="field"> | |
| <span>Message</span> | |
| <textarea id="debug-message" class="input" rows="2" placeholder="Hello, model…"></textarea> | |
| </label> | |
| <button type="button" id="btn-debug-send" class="btn btn-primary btn-block">Send</button> | |
| <button type="button" id="btn-chat-to-slides" class="btn btn-secondary btn-block" disabled> | |
| <span class="material-symbols-outlined">present_to_all</span> | |
| Generate slides from chat | |
| </button> | |
| </div> | |
| <details class="studio-debug-trace" id="debug-trace-details"> | |
| <summary>Agent trace</summary> | |
| <div id="debug-trace-panel"></div> | |
| </details> | |
| </div> | |
| </section> | |
| </main> | |
| <div id="settings-drawer" class="settings-drawer hidden" aria-hidden="true"> | |
| <div class="settings-drawer-backdrop" id="settings-backdrop"></div> | |
| <aside class="settings-drawer-panel" role="dialog" aria-labelledby="settings-title"> | |
| <div class="settings-drawer-head"> | |
| <h2 id="settings-title">Settings</h2> | |
| <button type="button" id="btn-close-settings" class="btn btn-ghost btn-icon material-symbols-outlined" aria-label="Close">close</button> | |
| </div> | |
| <label class="toggle-row theme-toggle"> | |
| <span>Dark theme</span> | |
| <input id="theme-toggle" type="checkbox" role="switch" aria-label="Dark theme" /> | |
| </label> | |
| <div id="settings-model-wrap"> | |
| <p id="settings-active-model" class="status-text"></p> | |
| <label class="field hidden" id="settings-model-select-wrap"> | |
| <span>Model preset</span> | |
| <select id="settings-model-key" class="input"></select> | |
| </label> | |
| </div> | |
| <div id="settings-status" class="settings-status"></div> | |
| <button type="button" id="btn-reload-model" class="btn btn-secondary btn-block">Reload model</button> | |
| <details class="settings-details"> | |
| <summary>Voice stack</summary> | |
| <pre id="settings-voice-stack" class="settings-pre"></pre> | |
| </details> | |
| <details class="settings-details"> | |
| <summary>Paths & files</summary> | |
| <pre id="settings-paths" class="settings-pre"></pre> | |
| </details> | |
| <a href="?classic" class="btn btn-ghost btn-block">Open Classic UI</a> | |
| </aside> | |
| </div> | |
| <div id="presenter-overlay" class="presenter-overlay hidden" aria-hidden="true" role="dialog" aria-label="Slide presenter"> | |
| <div class="presenter-backdrop" id="presenter-backdrop"></div> | |
| <div class="presenter-shell"> | |
| <div class="presenter-toolbar"> | |
| <span id="presenter-counter" class="presenter-counter">1 / 1</span> | |
| <div class="presenter-toolbar-actions"> | |
| <button type="button" id="btn-presenter-prev" class="btn btn-ghost btn-icon material-symbols-outlined" aria-label="Previous slide">chevron_left</button> | |
| <button type="button" id="btn-presenter-next" class="btn btn-ghost btn-icon material-symbols-outlined" aria-label="Next slide">chevron_right</button> | |
| <button type="button" id="btn-presenter-close" class="btn btn-ghost btn-icon material-symbols-outlined" aria-label="Exit presenter">close</button> | |
| </div> | |
| </div> | |
| <div class="presenter-stage"> | |
| <div id="presenter-slide" class="presenter-slide presenter-fade"></div> | |
| </div> | |
| <details class="presenter-notes" id="presenter-notes-details"> | |
| <summary>Speaker notes</summary> | |
| <p id="presenter-notes" class="presenter-notes-text"></p> | |
| </details> | |
| </div> | |
| </div> | |
| <script type="module" src="/static/studio/studio.js?v={{STUDIO_ASSET_VERSION}}"></script> | |
| </body> | |
| </html> | |