Spaces:
Sleeping
Sleeping
| <!-- | |
| GPT-2 Text Generation UI | |
| ======================== | |
| Single-page interface for interacting with the Flask /generate endpoint. | |
| All logic lives in static/app.js; styling in static/style.css. | |
| Design language: Hugging Face-inspired — deep indigo background, purple-to-blue | |
| gradients, Space Grotesk display type, monospace output pane. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>GPT-2 Playground</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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="static/style.css" /> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div class="logo"> | |
| <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true"> | |
| <rect width="28" height="28" rx="8" fill="url(#logoGrad)"/> | |
| <path d="M8 20 L14 8 L20 20" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M10 16 H18" stroke="white" stroke-width="2.5" stroke-linecap="round"/> | |
| <defs> | |
| <linearGradient id="logoGrad" x1="0" y1="0" x2="28" y2="28"> | |
| <stop offset="0%" stop-color="#7C3AED"/> | |
| <stop offset="100%" stop-color="#2563EB"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <span>LLara Playground</span> | |
| </div> | |
| <div class="model-badge">gpt2 · HF Transformers</div> | |
| </header> | |
| <main class="main-layout"> | |
| <!-- ── Left column: controls ── --> | |
| <aside class="controls-panel"> | |
| <h2 class="panel-title">Parameters</h2> | |
| <div class="control-group"> | |
| <label for="maxTokens">Max new tokens <span class="value-display" id="maxTokensVal">200</span></label> | |
| <input type="range" id="maxTokens" min="20" max="500" step="10" value="200" /> | |
| </div> | |
| <div class="control-group"> | |
| <label for="temperature">Temperature <span class="value-display" id="temperatureVal">0.90</span></label> | |
| <input type="range" id="temperature" min="0.1" max="2.0" step="0.05" value="0.90" /> | |
| </div> | |
| <div class="control-group"> | |
| <label for="topP">Top-p <span class="value-display" id="topPVal">0.95</span></label> | |
| <input type="range" id="topP" min="0.1" max="1.0" step="0.05" value="0.95" /> | |
| </div> | |
| <div class="control-group"> | |
| <label for="repPenalty">Repetition penalty <span class="value-display" id="repPenaltyVal">1.20</span></label> | |
| <input type="range" id="repPenalty" min="1.0" max="2.0" step="0.05" value="1.20" /> | |
| </div> | |
| <div class="param-explainer"> | |
| <p><strong>Temperature</strong> — randomness. Higher = more creative, lower = more focused.</p> | |
| <p><strong>Top-p</strong> — nucleus sampling. Keeps only the top cumulative probability mass.</p> | |
| <p><strong>Repetition penalty</strong> — discourages repeated phrases.</p> | |
| </div> | |
| </aside> | |
| <!-- ── Right column: prompt + output ── --> | |
| <section class="generation-panel"> | |
| <div class="prompt-area"> | |
| <label for="promptInput" class="sr-only">Prompt</label> | |
| <textarea | |
| id="promptInput" | |
| placeholder="Enter your prompt here — e.g. 'The future of artificial intelligence is'" | |
| rows="5" | |
| spellcheck="false" | |
| ></textarea> | |
| <div class="prompt-footer"> | |
| <span class="char-count" id="charCount">0 chars</span> | |
| <button class="btn-generate" id="generateBtn"> | |
| <span class="btn-label">Generate</span> | |
| <span class="btn-spinner" aria-hidden="true"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-container" id="outputContainer" aria-live="polite"> | |
| <div class="output-header"> | |
| <span class="output-label">Output</span> | |
| <button class="btn-copy" id="copyBtn" title="Copy output" aria-label="Copy output" disabled> | |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="9" y="9" width="13" height="13" rx="2"/> | |
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> | |
| </svg> | |
| Copy | |
| </button> | |
| </div> | |
| <div class="output-body"> | |
| <div class="output-prompt" id="outputPrompt"></div> | |
| <div class="output-generated" id="outputGenerated"> | |
| <span class="placeholder-text">Generated text will appear here…</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="error-banner" id="errorBanner" role="alert" hidden></div> | |
| </section> | |
| </main> | |
| <script src="static/app.js"></script> | |
| </body> | |
| </html>> |