| <!DOCTYPE html> |
| <html lang="hi"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Simple Stories Hindi 20M – In-Browser AI</title> |
| <meta name="description" content="Run a 20M parameter Hindi language model entirely in your browser. No server, no API key. Powered by llama.cpp WebAssembly." /> |
|
|
| <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=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap" rel="stylesheet" /> |
|
|
| <link rel="stylesheet" href="style.css" /> |
| </head> |
|
|
| <body> |
| <div class="app-layout"> |
| |
| <header class="header"> |
| <div class="header-main"> |
| <h1 class="title">Simple Stories Hindi <span>20M</span></h1> |
| <p class="subtitle">Runs 100% in your browser · No server · <a href="https://huggingface.co/SmallScale/Simple-Stories-Hindi-20M" target="_blank" rel="noopener">Model</a></p> |
| </div> |
| <div id="deviceBadge" class="badge idle">Ready</div> |
| </header> |
|
|
| |
| <main class="workspace"> |
|
|
| |
| <section class="section"> |
| <div class="section-label-row"> |
| <label for="promptInput" class="section-label">Prompt (हिंदी संकेत)</label> |
| <div class="sample-prompts"> |
| <span class="sample-label">Try:</span> |
| <button class="sample-btn" data-prompt="एक समय की बात है, एक छोटी लड़की">लड़की की कहानी</button> |
| <button class="sample-btn" data-prompt="एक जंगल में जहाँ पेड़ों ने रहस्यों को फुसफुसाया">जंगल का रहस्य</button> |
| <button class="sample-btn" data-prompt="एक छोटे से गाँव में एक समझदार लड़का रहता था">गाँव का लड़का</button> |
| </div> |
| </div> |
| <textarea id="promptInput" rows="3" placeholder="कहानी की शुरुआत लिखें...">एक समय की बात है, एक छोटी लड़की</textarea> |
| </section> |
|
|
| |
| <section class="controls-row"> |
| <div class="control-item"> |
| <div class="control-header"> |
| <label for="temperature">Creativity (रचनात्मकता)</label> |
| <span id="tempValue" class="val-tag">0.70</span> |
| </div> |
| <input type="range" id="temperature" min="0.0" max="1.2" step="0.05" value="0.70" /> |
| <span class="control-subtext">Low = focused · High = creative</span> |
| </div> |
| </section> |
|
|
| |
| <div class="action-bar"> |
| <div class="action-left"> |
| <button id="generateBtn" class="btn btn-primary"> |
| <span id="generateBtnText">Generate</span> |
| </button> |
| <button id="stopBtn" class="btn btn-secondary" disabled>Stop</button> |
| </div> |
| <div class="action-right"> |
| <button id="copyBtn" class="btn btn-subtle">Copy</button> |
| <button id="clearBtn" class="btn btn-subtle">Clear</button> |
| </div> |
| </div> |
|
|
| |
| <section class="output-section"> |
| <div class="output-header"> |
| <span class="section-label">Output (कहानी)</span> |
| <span id="statusText" class="status-text"></span> |
| </div> |
|
|
| |
| <div id="progressOverlay" class="progress-overlay hidden"> |
| <div class="progress-inner"> |
| <div class="progress-icon">⬇</div> |
| <div class="progress-label" id="progressLabel">Downloading model…</div> |
| <div class="progress-track"> |
| <div class="progress-fill" id="progressFill"></div> |
| </div> |
| <div class="progress-pct" id="progressPct">0%</div> |
| <div class="progress-sub" id="progressSub">FP16 · 43 MB · first run only</div> |
| </div> |
| </div> |
|
|
| <div id="outputBox" class="output-box"> |
| <span class="placeholder-text">आपकी कहानी यहाँ दिखाई देगी…</span> |
| </div> |
|
|
| <div class="stats-bar"> |
| <span id="promptTokenMetric" class="stat">—</span> |
| <span class="stat-sep">·</span> |
| <span id="generatedTokenMetric" class="stat">—</span> |
| <span class="stat-sep">·</span> |
| <span id="speedMetric" class="stat">—</span> |
| <span class="stat-sep">·</span> |
| <span id="timeMetric" class="stat">—</span> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| <script src="index.js" type="module"></script> |
| </body> |
|
|
| </html> |
