feat: add quick-start text samples

app.js

@@ -11,6 +11,22 @@ import { prepareGuardedTopK } from './guarded-topk.js';
 // to per-step on both builds, 12x fewer GPU<->CPU syncs).
 const SPEC_WINDOW = 16;
 
+const SAMPLES = Object.freeze({
+  story: [
+    'Hắn đối với chuyện này cũng không có biện pháp nào.',
+    'Nghe được lời này, mọi người ở đây đều là hơi sững sờ.',
+  ].join('\n'),
+  dialogue: [
+    '“Ngươi xác định muốn cùng ta động thủ?” hắn nhíu mày hỏi.',
+    '“Nếu đã như vậy, vậy thì không cần nhiều lời.” nàng nhàn nhạt nói.',
+  ].join('\n'),
+  action: [
+    'Kiếm quang xẹt qua, đem trước mặt cự thạch sinh sinh bổ thành hai nửa.',
+    'Đối mặt một chưởng này, hắn không lùi mà tiến tới.',
+    'Chỉ thấy thân hình hắn lóe lên, trong nháy mắt liền xuất hiện tại đối phương trước người.',
+  ].join('\n'),
+});
+
 const $ = (id) => document.getElementById(id);
 const status = (message, state = '', short = message) => {
   $('status').textContent = message;
@@ -48,6 +64,22 @@ function updateInputState() {
   $('clear').disabled = !value || $('run').disabled && document.body.classList.contains('running');
 }
 
+function setSampleButtonsDisabled(disabled) {
+  for (const button of document.querySelectorAll('[data-sample]')) {
+    button.disabled = disabled;
+  }
+}
+
+function loadSample(name) {
+  const value = SAMPLES[name];
+  if (!value) return;
+  const input = $('input');
+  input.value = value;
+  updateInputState();
+  input.focus();
+  input.setSelectionRange(value.length, value.length);
+}
+
 function setProgress(done, total) {
   const active = total > 0 && done < total;
   $('progress').hidden = !active;
@@ -92,6 +124,9 @@ async function warmEngine(ctx, weights, pieceTable, bias, tok) {
 
 async function boot() {
   $('input').addEventListener('input', updateInputState);
+  for (const button of document.querySelectorAll('[data-sample]')) {
+    button.addEventListener('click', () => loadSample(button.dataset.sample));
+  }
   $('clear').addEventListener('click', () => {
     $('input').value = '';
     $('input').focus();
@@ -150,6 +185,7 @@ async function boot() {
       $('run').disabled = true;
       $('clear').disabled = true;
       $('copy').disabled = true;
+      setSampleButtonsDisabled(true);
       copyText = '';
       status(`Đang polish · 0/${jobs.length} dòng`, 'running', `Đang chạy · 0/${jobs.length}`);
       setProgress(0, jobs.length);
@@ -217,6 +253,7 @@ async function boot() {
       } finally {
         setProgress(1, 1);
         $('run').disabled = false;
+        setSampleButtonsDisabled(false);
         updateInputState();
       }
     };

dist-manifest.json

@@ -10,8 +10,8 @@
   },
   {
    "path": "app.js",
-   "bytes": 10090,
-   "sha256": "c7b340857785fa7faf19afc08aa34f6de8ad217b5b228c2d7bfe8b4f21fc4286"
+   "bytes": 11482,
+   "sha256": "aa56286d4012e6ab44027f85bf906d7b84fa1a43db7dac21cbe3a46b39c5ed87"
   },
   {
    "path": "decode-guard.js",
@@ -270,8 +270,8 @@
   },
   {
    "path": "index.html",
-   "bytes": 3221,
-   "sha256": "2e1c55c247483577699727f1818e68d16ea4abfdaef8137f697529c926c99871"
+   "bytes": 3727,
+   "sha256": "b24c7ed319e3de94fbf9868a2115366f28e1c101ac38ed52b56b5e4903272ad1"
   },
   {
    "path": "model/vp2vi/piece_table.json",
@@ -290,8 +290,8 @@
   },
   {
    "path": "styles.css",
-   "bytes": 9004,
-   "sha256": "4e798236d0169daa6b6467f3f98f8e3aba35cb02124a7ee322848f4eb78ce88c"
+   "bytes": 10099,
+   "sha256": "4e01e6d7de6467c47584ef42f1fc2de32f37411d2f0cd312c0377c9971fd2789"
   },
   {
    "path": "weights/manifest.json",
@@ -319,5 +319,5 @@
    "sha256": "030b8178c17fc02b3ed38f3d2248ee2565065c39cd38e549a7fed0d58cde12e6"
   }
  ],
- "totalBytes": 76300003
+ "totalBytes": 76302996
 }

index.html

@@ -40,6 +40,15 @@
 
           <textarea id="input" spellcheck="false" placeholder="Dán nội dung vào đây…" aria-describedby="input-note"></textarea>
 
+          <div class="samples" aria-label="Văn bản mẫu">
+            <span class="samples-label">Thử nhanh</span>
+            <div class="sample-options">
+              <button class="sample-button" type="button" data-sample="story">Kể chuyện</button>
+              <button class="sample-button" type="button" data-sample="dialogue">Đối thoại</button>
+              <button class="sample-button" type="button" data-sample="action">Giao chiến</button>
+            </div>
+          </div>
+
           <div class="panel-actions">
             <button id="clear" class="button button-quiet" type="button" disabled>Xóa</button>
             <div class="run-group">

styles.css

@@ -210,6 +210,57 @@ textarea::selection,
 .out::selection,
 .draft::selection { background: rgba(227, 111, 69, .35); }
 
+.samples {
+  min-height: 48px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 8px 22px;
+  border-top: 1px solid var(--line-soft);
+}
+
+.samples-label {
+  color: var(--faint);
+  font: 400 10px/1 "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.sample-options {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.sample-button {
+  border: 0;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  padding: 4px 0;
+  color: var(--muted);
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1.2;
+  transition: color 160ms ease, border-color 160ms ease, opacity 160ms ease;
+}
+
+.sample-button:hover:not(:disabled) {
+  color: var(--ink);
+  border-bottom-color: var(--accent);
+}
+
+.sample-button:focus-visible {
+  outline: 2px solid var(--accent-soft);
+  outline-offset: 3px;
+}
+
+.sample-button:disabled {
+  cursor: default;
+  opacity: .34;
+}
+
 .panel-actions {
   min-height: 72px;
   flex: 0 0 auto;
@@ -425,6 +476,8 @@ kbd {
   .heading > p:last-child { font-size: 13px; }
   .panel-head { height: 64px; padding-inline: 16px; }
   textarea { padding: 20px 18px; }
+  .samples { align-items: flex-start; gap: 10px; padding-inline: 18px; }
+  .sample-options { flex-wrap: wrap; gap: 12px; }
   .panel-actions { padding-inline: 10px 12px; }
   .shortcut { display: none; }
   .result-row { padding-inline: 22px 16px; }