Blame for index.html

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#080d0a">
    <meta name="description" content="在 FreeDOS 裡用小貓中文輸入或顯示中文：DOS 程式自己透過 TCP/IP 呼叫 LLM（Gradio Space），並把回答印在 DOS 畫面。">
    <title>DOS LLM — 在 DOS 裡問 AI（中文／English）</title>
    <link rel="stylesheet" href="style.css">
    <style>
      .ask{display:grid;grid-template-columns:1fr auto;gap:11px;align-items:end;margin-top:19px}
      .one{grid-template-columns:minmax(0,1fr);max-width:860px;margin-inline:auto}
      .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
      .chip{border:1px solid #344439;border-radius:99px;background:#141e17;color:#bccabd;font:11px 'DM Mono',monospace;padding:6px 12px;cursor:pointer}
      .chip:hover:not(:disabled){border-color:#78bd53;color:#e5eee6}.chip:disabled{opacity:.5;cursor:not-allowed}
      .answer-box{margin-top:14px;padding:12px 14px;border:1px solid #2f4a2a;border-radius:3px;background:#0b140d;font:12px/1.7 'DM Mono',monospace;color:#d6edce;white-space:pre-wrap}
      .answer-box b{color:var(--green);font-weight:500}
      .ghost{height:30px;padding:0 12px;border:1px solid #344439;border-radius:3px;background:#141e17;color:#cbd6cc;font-size:11px;cursor:pointer;margin-left:auto}
      .ghost:hover{border-color:#78bd53}
      details.adv{margin-top:12px;color:#748076;font-size:10px}details.adv summary{cursor:pointer;font:10px 'DM Mono',monospace}
      @media(max-width:600px){.ask{grid-template-columns:1fr}}
    </style>
    <script src="libv86.js" defer></script>
    <script src="assets.b64.js" defer></script>
    <script src="big5.js" defer></script>
    <script src="bridge.js" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <main class="shell">
      <header class="topbar">
        <div class="brand"><span class="brand-mark">D:</span><span>DOS LLM <small>v86 · FREEDOS · 小貓中文 · mTCP</small></span></div>
        <div class="clock"><span class="live-dot" id="liveDot"></span><span id="netText">BOOTING</span><span class="divider">|</span><span id="clock">--:--:--</span></div>
      </header>

      <section class="intro">
        <div class="eyebrow">REAL DOS · REAL TCP/IP · 中文 / ENGLISH</div>
        <h1>在 DOS 裡，<span>用中文問 AI。</span></h1>
        <p>輸入問題、按下按鈕：<b>G.EXE</b> 這支 DOS 程式自己做 DNS、TCP 與 HTTP，呼叫 Hugging Face 上的 LLM Space（預設 <code>tencent/Hy3</code>，走 Gradio API），並把<b>回答印在 DOS 畫面</b>。DOS 沒有 TLS，所以網頁把它的純 HTTP 轉成 HTTPS 送出。<br>DOS 裡載入了 <b>小貓中文</b>（Big5 顯示＋注音輸入），所以<b>中文與英文</b>都能問、都能顯示。簡體字不在 Big5 內，DOS 會顯示成 ?。</p>
      </section>

      <section class="control-panel panel">
        <div class="panel-heading"><span class="prompt">C:\&gt;</span><h2>提問</h2><span class="panel-tag" id="bootTag">BOOTING FREEDOS</span></div>
        <div class="ask">
          <label class="field"><span>問題（中文或英文，最多 120 位元組：約 60 個中文字）</span><input id="question" maxlength="120" value="What is the capital of France and why is it famous?" spellcheck="false" autocomplete="off"></label>
          <button class="connect-button" id="askButton" type="button" disabled><span class="button-icon">▶</span>等待 DOS 網路…</button>
        </div>
        <div class="chips" id="chips" aria-label="範例問題">
          <button class="chip" type="button" disabled>台灣最高的山是哪一座？</button>
          <button class="chip" type="button" disabled>什麼是封包驅動程式？用一句話回答。</button>
          <button class="chip" type="button" disabled>請寫一首關於磁碟片的短詩。</button>
          <button class="chip" type="button" disabled>What is 17 times 23? Reply with only the number.</button>
          <button class="chip" type="button" disabled>Who created the C programming language?</button>
          <button class="chip" type="button" disabled>Write a short haiku about a floppy disk.</button>
        </div>
        <details class="adv"><summary>進階：換一個 Gradio Space</summary>
          <label class="field" style="margin-top:10px"><span>Space 主機（只接受 *.hf.space；需公開並有 /chat 端點，參數同 tencent/Hy3）</span><input id="host" value="tencent-hy3.hf.space" spellcheck="false" autocomplete="off"></label>
        </details>
        <div class="connection-note"><span class="keycap">TIP</span><span id="note">DOS 開機、載入小貓中文並用 DHCP 取得位址約需 10–20 秒。回答要等模型生成，通常幾秒到十幾秒。</span></div>
      </section>

      <section class="workstations one" aria-label="DOS 虛擬機">
        <article class="terminal-card panel">
          <div class="terminal-title"><span class="terminal-icon">G</span><div><h2>FreeDOS <span class="role">G.EXE</span></h2><p>點選畫面可直接用鍵盤：<code>G your question</code>；要打中文按 <code>Ctrl+Space</code> 開注音（倚天鍵位）</p></div><span class="state-pill" id="dosState">BOOT</span><select class="ghost" id="zoomSel" title="畫面縮放"><option value="fit">符合寬度</option><option value="crisp">整數倍（最銳利）</option><option value="big">放大 2×（可捲動）</option></select><label class="ghost" id="aspectLabel" title="真實 VGA 螢幕把 640×400 顯示成 4:3，畫素略高；取消則為正方形畫素"><input type="checkbox" id="aspect" checked> 4:3</label><button class="ghost" id="imeButton" type="button" title="等同在 DOS 畫面按 Ctrl+Space：開／關小貓中文的注音輸入">注音 Ctrl+Space</button><button class="ghost" id="rebootButton" type="button" style="margin-left:8px">重新開機</button></div>
          <div class="dos-screen" id="stage"><div id="screen" class="v86host"><div></div><canvas></canvas></div><canvas id="view" aria-label="DOS 畫面"></canvas></div>
          <div class="terminal-footer"><span>ASKED <b id="askCount">000</b></span><span>ANSWERED <b id="ansCount">000</b></span><span class="grow"></span><span id="ip">IP —</span></div>
        </article>
      </section>

      <section class="observe panel">
        <div class="panel-heading"><span class="prompt">LOG</span><h2>觀察：DOS 送出什麼、LLM 回什麼</h2><span class="panel-tag" id="matchTag">NOT YET</span></div>
        <div class="answer-box" id="answerBox" hidden></div>
        <div class="log" id="log" aria-live="polite"><div class="log-empty">提問後，這裡會列出橋接器看到的 HTTP 請求、Gradio 串流事件，以及 DOS 畫面上印出的答案是否與 LLM 回傳的一致。</div></div>
      </section>

      <section class="bottom-row">
        <div class="how panel"><div class="mini-heading"><span>01—04</span><h2>資料怎麼走</h2></div><ol>
          <li><b>DOS</b><span>G.EXE 用 mTCP 做 DNS、TCP，自己組 HTTP/1.0 請求並解析 Gradio 的串流事件。</span></li>
          <li><b>網卡</b><span>封包經 Crynwr NE2000 驅動送到 v86 虛擬網卡；DHCP、DNS（DoH）由 v86 回應。</span></li>
          <li><b>橋接</b><span>DOS 對 80 埠的明文 HTTP，由網頁用 fetch() 轉成 HTTPS，只放行 *.hf.space 的 /gradio_api/。</span></li>
          <li><b>LLM</b><span>Space 看到的是標準的 Gradio API 呼叫；答案原樣送回 DOS 並印出。</span></li></ol></div>
        <div class="share panel"><div class="mini-heading"><span>NOTE</span><h2>限制</h2></div><p>只呼叫公開的 Space，不帶任何金鑰。你輸入的問題會送到該 Space，請勿輸入機密。DOS 用 Big5 顯示：簡體字、emoji 等 Big5 沒有的字會變成 ?（中文問題會要求模型用繁體回答）。回答被限制在約 40 個英文單字／80 個中文字內，讓 DOS 畫面容納得下。</p></div>
      </section>

      <footer><span>DOS LLM <b>v1.1</b></span><span>v86 · FreeDOS 1.4 · <b>小貓中文 v1.0，作者 HelloSun（2026-10-25）</b> · Crynwr NE2000 · mTCP · GPL 原始碼見 src/ 與 dev/</span><span>NO CREDENTIALS</span></footer>
    </main>
    <div class="toast" id="toast" role="status" aria-live="polite"></div>
  </body>
</html>