| <!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 程式 G.EXE 自己透過 TCP/IP 呼叫 Hugging Face 上的 Gradio Space 問答。"> |
| <title>DOS × Gradio — DOS 問 Hy3</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} |
| .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} |
| @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="gradio-img.b64.js" defer></script> |
| <script src="gradio-bridge.js" defer></script> |
| <script src="gradio.js" defer></script> |
| </head> |
| <body> |
| <main class="shell"> |
| <header class="topbar"> |
| <div class="brand"><span class="brand-mark">D:</span><span>DOS × GRADIO <small>v86 · FREEDOS · mTCP · NE2000</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 · GRADIO HTTP API</div> |
| <h1>DOS 程式，<span>問 Gradio。</span></h1> |
| <p>FreeDOS 上的 <b>G.EXE</b> 自己做 DNS、TCP 與 HTTP，依 Gradio 官方 API 先 <code>POST /gradio_api/call/chat</code> 取得 event_id，再 <code>GET</code> 讀回串流答案並印在 DOS 畫面。DOS 沒有 TLS，所以網頁把它的純 HTTP 轉成 HTTPS 送到 Space。<br>DOS 只有 ASCII 字型：請用<b>英文</b>提問。</p> |
| </section> |
|
|
| <section class="control-panel panel"> |
| <div class="panel-heading"><span class="prompt">C:\></span><h2>提問</h2><span class="panel-tag" id="bootTag">BOOTING FREEDOS</span></div> |
| <div class="ask" style="margin-top:19px;grid-template-columns:1fr"> |
| <label class="field"><span>Gradio Space 主機（只接受 *.hf.space，需公開、有 /chat 端點）</span><input id="host" value="tencent-hy3.hf.space" spellcheck="false" autocomplete="off"></label> |
| </div> |
| <div class="ask"> |
| <label class="field"><span>英文問題（ASCII，最多 120 字元）</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="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>DOS 機器 <span class="role">G.EXE</span></h2><p>點選畫面可直接用鍵盤操作；也可自己輸入 <code>G your question</code></p></div><span class="state-pill" id="dosState">BOOT</span></div> |
| <div class="dos-screen" id="screen"><div></div><canvas></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 送出什麼、Gradio 回什麼</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 畫面上印出的答案是否與 Gradio 回傳的一致。</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 請求與解析 SSE。</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>Gradio</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，不帶任何金鑰。DOS 以 ASCII 顯示，非 ASCII 字元會變成 ?。請求內容會送到你填的 Space（預設為 tencent/Hy3），請勿輸入機密。</p><a class="copy-button" href="index.html" style="display:inline-flex;align-items:center;text-decoration:none">MQTT 版 demo <span aria-hidden="true">→</span></a></div> |
| </section> |
|
|
| <footer><span>DOS × GRADIO <b>v1.0</b></span><span>v86 · FreeDOS 1.4 · Crynwr NE2000 · mTCP · GPL 原始碼見 src/</span><span>NO CREDENTIALS</span></footer> |
| </main> |
| <div class="toast" id="toast" role="status" aria-live="polite"></div> |
| </body> |
| </html> |
|
|
