Spaces:

helloadhavan
/

Llara-preview

Sleeping

App Files Files Community

helloadhavan commited on Jun 21

Commit

13d012b

1 Parent(s): 9fd8196

init commit

Browse files

Files changed (5) hide show

Dockerfile +16 -0
app.py +80 -0
index.html +120 -0
static/app.js +154 -0
static/style.css +454 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,16 @@

+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+FROM python:3.9
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+WORKDIR /app
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+COPY --chown=user . /app
+CMD ["gunicorn", "app:app", "--bind", "0.0.0.0:7860", "--timeout", "120"]

app.py ADDED Viewed

	@@ -0,0 +1,80 @@

+"""
+GPT-2 Text Generation Server
+=============================
+A minimal Flask API that loads GPT-2 from Hugging Face Transformers and exposes
+a single POST /generate endpoint. The model is loaded once at startup and kept
+in memory, so generation requests are fast after the first cold start (~10-30s).
+Endpoints
+---------
+POST /generate
+    Body:  { "prompt": str, "max_new_tokens": int, "temperature": float,
+             "top_p": float, "repetition_penalty": float }
+    Returns: { "generated_text": str, "prompt": str }
+GET /
+    Serves the frontend HTML page.
+Usage
+-----
+    pip install flask transformers torch
+    python app.py
+    # Open http://localhost:5000
+"""
+from flask import Flask, request, jsonify, send_from_directory
+from transformers import GPT2LMHeadModel, AutoTokenizer
+import torch
+import os
+app = Flask(__name__, static_folder="static")
+print("Loading GPT-2 model and tokenizer...")
+tokenizer = AutoTokenizer.from_pretrained("helloadhavan/llara1.1-100M-base")
+model = GPT2LMHeadModel.from_pretrained("helloadhavan/llara1.1-100M-base")
+model.eval()
+print("Model ready.")
+DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+model.to(DEVICE)
+@app.route("/")
+def index():
+    return send_from_directory(".", "index.html")
+@app.route("/generate", methods=["POST"])
+def generate():
+    body = request.get_json(force=True)
+    prompt = body.get("prompt", "").strip()
+    if not prompt:
+        return jsonify({"error": "prompt is required"}), 400
+    max_new_tokens = int(body.get("max_new_tokens", 200))
+    temperature = float(body.get("temperature", 0.9))
+    top_p = float(body.get("top_p", 0.95))
+    repetition_penalty = float(body.get("repetition_penalty", 1.2))
+    inputs = tokenizer(prompt, return_tensors="pt").to(DEVICE)
+    with torch.no_grad():
+        output_ids = model.generate(
+            **inputs,
+            max_new_tokens=max_new_tokens,
+            do_sample=True,
+            temperature=temperature,
+            top_p=top_p,
+            repetition_penalty=repetition_penalty,
+            pad_token_id=tokenizer.eos_token_id,
+        )
+    full_text = tokenizer.decode(output_ids[0], skip_special_tokens=True)
+    generated_only = full_text[len(prompt):]
+    return jsonify({"generated_text": generated_only, "prompt": prompt})
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=7860)

index.html ADDED Viewed

	@@ -0,0 +1,120 @@

+<!DOCTYPE html>
+<!--
+  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>>

static/app.js ADDED Viewed

	@@ -0,0 +1,154 @@

+/*
+  app.js — GPT-2 Playground
+  ==========================
+  Handles all client-side behaviour:
+  1. Slider sync       — live-update value badges next to each range input
+  2. Char counter      — updates as the user types in the prompt textarea
+  3. Generation flow   — POSTs to /generate, manages loading state on the button,
+                         renders prompt + generated text in the output pane
+  4. Copy button       — copies the full output text and shows brief confirmation
+  5. Error display     — surfaces API or network errors in the error banner
+  No build step or framework required — plain ES2020, runs in any modern browser.
+*/
+const $ = id => document.getElementById(id);
+// ── Slider → value badge sync ──────────────────────────────────────────────
+const sliders = [
+  { input: $("maxTokens"),  display: $("maxTokensVal"),  decimals: 0 },
+  { input: $("temperature"), display: $("temperatureVal"), decimals: 2 },
+  { input: $("topP"),        display: $("topPVal"),        decimals: 2 },
+  { input: $("repPenalty"),  display: $("repPenaltyVal"),  decimals: 2 },
+];
+function syncSlider({ input, display, decimals }) {
+  display.textContent = parseFloat(input.value).toFixed(decimals);
+}
+sliders.forEach(s => {
+  syncSlider(s);
+  s.input.addEventListener("input", () => syncSlider(s));
+});
+// ── Character counter ──────────────────────────────────────────────────────
+const promptInput = $("promptInput");
+const charCount   = $("charCount");
+promptInput.addEventListener("input", () => {
+  charCount.textContent = `${promptInput.value.length} chars`;
+});
+// ── Generation ─────────────────────────────────────────────────────────────
+const generateBtn     = $("generateBtn");
+const outputPrompt    = $("outputPrompt");
+const outputGenerated = $("outputGenerated");
+const errorBanner     = $("errorBanner");
+const copyBtn         = $("copyBtn");
+function setLoading(isLoading) {
+  generateBtn.disabled = isLoading;
+  generateBtn.classList.toggle("is-loading", isLoading);
+  // Apply the wider gradient background only during load so shimmer looks right
+  if (isLoading) {
+    generateBtn.style.backgroundImage =
+      "linear-gradient(90deg,#7c3aed,#6d28d9,#2563eb,#4f46e5,#7c3aed)";
+    generateBtn.style.backgroundSize = "300% 100%";
+    generateBtn.querySelector(".btn-label").textContent = "Generating…";
+  } else {
+    generateBtn.style.backgroundImage = "";
+    generateBtn.style.backgroundSize  = "";
+    generateBtn.querySelector(".btn-label").textContent = "Generate";
+  }
+}
+function showError(message) {
+  errorBanner.textContent = message;
+  errorBanner.hidden = false;
+}
+function clearError() {
+  errorBanner.hidden = true;
+  errorBanner.textContent = "";
+}
+function renderOutput(prompt, generatedText) {
+  outputPrompt.textContent = prompt;
+  outputGenerated.textContent = generatedText;
+  outputGenerated.innerHTML = ""; // clear placeholder span
+  outputGenerated.textContent = generatedText;
+  copyBtn.disabled = false;
+}
+generateBtn.addEventListener("click", async () => {
+  const prompt = promptInput.value.trim();
+  if (!prompt) {
+    showError("Please enter a prompt before generating.");
+    return;
+  }
+  clearError();
+  setLoading(true);
+  copyBtn.disabled = true;
+  outputPrompt.textContent = "";
+  outputGenerated.innerHTML = '<span class="placeholder-text">Generating…</span>';
+  const payload = {
+    prompt,
+    max_new_tokens:     parseInt($("maxTokens").value, 10),
+    temperature:        parseFloat($("temperature").value),
+    top_p:              parseFloat($("topP").value),
+    repetition_penalty: parseFloat($("repPenalty").value),
+  };
+  try {
+    const response = await fetch("/generate", {
+      method:  "POST",
+      headers: { "Content-Type": "application/json" },
+      body:    JSON.stringify(payload),
+    });
+    if (!response.ok) {
+      const err = await response.json().catch(() => ({}));
+      throw new Error(err.error || `Server error ${response.status}`);
+    }
+    const data = await response.json();
+    renderOutput(data.prompt, data.generated_text);
+  } catch (err) {
+    showError(`Generation failed: ${err.message}`);
+    outputGenerated.innerHTML = '<span class="placeholder-text">Generated text will appear here…</span>';
+  } finally {
+    setLoading(false);
+  }
+});
+// ── Copy button ─────────────────────────────────────────────────────────────
+copyBtn.addEventListener("click", () => {
+  const fullText = (outputPrompt.textContent + outputGenerated.textContent).trim();
+  if (!fullText) return;
+  navigator.clipboard.writeText(fullText).then(() => {
+    copyBtn.textContent = "✓ Copied!";
+    copyBtn.classList.add("copied");
+    setTimeout(() => {
+      copyBtn.innerHTML = `
+        <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`;
+      copyBtn.classList.remove("copied");
+    }, 2000);
+  });
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,454 @@

+/*
+  style.css — GPT-2 Playground
+  ==============================
+  Design tokens and component styles for the generation interface.
+  Color system
+  ------------
+  --bg-*          dark indigo backgrounds (darkest → surface)
+  --purple-*      purple scale (accent, hover states)
+  --blue-*        blue scale (gradient pair)
+  --text-*        foreground hierarchy
+  --border        subtle separator
+  Component hierarchy
+  -------------------
+  site-header
+  main-layout
+    controls-panel   (parameter sliders)
+    generation-panel (textarea, output pane)
+*/
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg-base:        #0b0718;
+  --bg-surface:     #13102b;
+  --bg-raised:      #1c1840;
+  --bg-input:       #0f0c24;
+  --purple-400: #84d2fc;
+  --purple-500: #5588f7;
+  --purple-600:     #9333ea;
+  --purple-700:     #7c3aed;
+  --blue-500:       #3b82f6;
+  --blue-600:       #2563eb;
+  --grad-primary:   linear-gradient(135deg, #0054fd 0%, #2563eb 100%);
+  --grad-shimmer:   linear-gradient(90deg, #2d31ff, #1068ea, #2563eb, #4f46e5, #7c3aed);
+  --text-primary:   #ede9fe;
+  --text-secondary: #8ba5fa;
+  --text-muted: #5f68a6;
+  --text-on-grad:   #ffffff;
+  --border: rgba(1, 189, 255, 0.25);
+  --border-focus: rgba(85, 136, 247, 0.6);
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --font-display: "Space Grotesk", sans-serif;
+  --font-body:    "Inter", sans-serif;
+  --font-mono:    "JetBrains Mono", monospace;
+}
+html, body {
+  height: 100%;
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+/* ── Accessibility ── */
+.sr-only {
+  position: absolute; width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+}
+/* ── Background ambient glow ── */
+body::before {
+  content: "";
+  position: fixed; inset: 0; pointer-events: none; z-index: 0;
+  background:
+    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(124,58,237,0.18) 0%, transparent 70%),
+    radial-gradient(ellipse 50% 35% at 80% 80%, rgba(37,99,235,0.14) 0%, transparent 70%);
+}
+/* ── Header ── */
+.site-header {
+  position: relative; z-index: 10;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(11, 7, 24, 0.8);
+  backdrop-filter: blur(12px);
+}
+.logo {
+  display: flex; align-items: center; gap: 10px;
+  font-family: var(--font-display);
+  font-size: 17px; font-weight: 600;
+  color: var(--text-primary);
+}
+.model-badge {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--purple-400);
+  background: rgba(124, 58, 237, 0.15);
+  border: 1px solid rgba(124, 58, 237, 0.3);
+  padding: 4px 10px;
+  border-radius: 100px;
+  letter-spacing: 0.02em;
+}
+/* ── Layout ── */
+.main-layout {
+  position: relative; z-index: 1;
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 32px 24px 48px;
+  min-height: calc(100vh - 65px);
+  align-items: start;
+}
+/* ── Controls panel ── */
+.controls-panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  position: sticky;
+  top: 24px;
+}
+.panel-title {
+  font-family: var(--font-display);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
+.control-group {
+  margin-bottom: 22px;
+}
+.control-group label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+.value-display {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--purple-400);
+  background: rgba(85, 123, 247, 0.12);
+  padding: 2px 7px;
+  border-radius: 4px;
+  min-width: 38px;
+  text-align: center;
+}
+/* Custom range slider */
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--bg-raised);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--grad-primary);
+  background: linear-gradient(135deg, var(--purple-500), var(--blue-500));
+  box-shadow: 0 0 0 3px rgba(0, 31, 255, 0.2);
+  transition: box-shadow 0.2s;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 5px rgba(85, 131, 247, 0.3);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 16px; height: 16px;
+  border: none; border-radius: 50%;
+  background: linear-gradient(135deg, var(--purple-500), var(--blue-500));
+}
+.param-explainer {
+  margin-top: 24px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.param-explainer p {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.param-explainer strong {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+/* ── Generation panel ── */
+.generation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+/* Prompt textarea */
+.prompt-area {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+.prompt-area:focus-within {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(85, 98, 247, 0.1);
+}
+#promptInput {
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  padding: 18px 20px 12px;
+  font-family: var(--font-body);
+  font-size: 15px;
+  color: var(--text-primary);
+  line-height: 1.65;
+  caret-color: var(--purple-400);
+}
+#promptInput::placeholder {
+  color: var(--text-muted);
+}
+.prompt-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px 14px;
+  border-top: 1px solid var(--border);
+}
+.char-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+/* Generate button */
+.btn-generate {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 22px;
+  background: var(--grad-primary);
+  color: var(--text-on-grad);
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.btn-generate:hover:not(:disabled) {
+  opacity: 0.92;
+  transform: translateY(-1px);
+}
+.btn-generate:active:not(:disabled) {
+  transform: translateY(0);
+}
+.btn-generate:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+/* Shimmer animation while generating */
+.btn-generate.is-loading {
+  background-size: 300% 100%;
+  animation: shimmerBg 1.5s linear infinite;
+}
+@keyframes shimmerBg {
+  0%   { background-position: 100% 50%; }
+  100% { background-position:   0% 50%; }
+}
+.btn-generate.is-loading .btn-label { opacity: 0; }
+.btn-generate .btn-spinner { display: none; }
+.btn-generate.is-loading .btn-spinner {
+  display: block;
+  position: absolute;
+  inset: 0; margin: auto;
+  width: 18px; height: 18px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+/* ── Output pane ── */
+.output-container {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.output-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-raised);
+}
+.output-label {
+  font-family: var(--font-display);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.btn-copy {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 4px 10px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.btn-copy:hover:not(:disabled) {
+  color: var(--text-primary);
+  border-color: var(--purple-600);
+  background: rgba(124, 58, 237, 0.12);
+}
+.btn-copy:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.btn-copy.copied {
+  color: #34d399;
+  border-color: rgba(52, 211, 153, 0.4);
+}
+.output-body {
+  padding: 20px;
+  min-height: 180px;
+  font-family: var(--font-mono);
+  font-size: 13.5px;
+  line-height: 1.75;
+}
+.output-prompt {
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.output-prompt:not(:empty)::after {
+  content: "";
+  display: inline-block;
+  width: 0;
+}
+.output-generated {
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.output-prompt:not(:empty) + .output-generated {
+  border-left: 2px solid var(--purple-700);
+  padding-left: 12px;
+  margin-top: 12px;
+  color: var(--text-primary);
+}
+.placeholder-text {
+  color: var(--text-muted);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-style: italic;
+}
+/* ── Error banner ── */
+.error-banner {
+  padding: 12px 16px;
+  background: rgba(220, 38, 38, 0.12);
+  border: 1px solid rgba(220, 38, 38, 0.35);
+  border-radius: var(--radius-md);
+  color: #fca5a5;
+  font-size: 13px;
+}
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .main-layout {
+    grid-template-columns: 1fr;
+    padding: 20px 16px 40px;
+  }
+  .controls-panel {
+    position: static;
+  }
+  .site-header {
+    padding: 14px 20px;
+  }
+}