Build and deploy ETEN DOS demo

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 dos622.iso filter=lfs diff=lfs merge=lfs -text
 wdosbox.wasm.js filter=lfs diff=lfs merge=lfs -text
+ETEN.img filter=lfs diff=lfs merge=lfs -text

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,39 @@
 ---
-title: C Dos
-emoji: 🌖
+title: 倚天中文 DOS 6.22 復刻
+emoji: 🖥️
 colorFrom: blue
-colorTo: red
+colorTo: green
 sdk: static
-pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 倚天中文 DOS 6.22 復刻
+
+以瀏覽器執行 DOS 6.22 與倚天注音中文系統風格的互動示範。DOSBox 由 js-dos 6.22 提供；字型使用 GNU Unifont，詞庫由開放資料產生。
+
+## 操作方式
+
+- 點選 DOS 畫面後使用實體鍵盤，或用畫面下方的虛擬鍵盤。
+- `Ctrl+Space` 切換注音／英文輸入。
+- 注音使用標準倚天鍵位；輸入音節後按空白鍵選字，按 `1`–`9` 選候選字。
+- `F1` 查看系統資訊；`Alt+X` 離開。
+
+啟動時會顯示 DOS 狀態列中的傳統記憶體用量，目標為保留 600KB 以上。
+
+## 本機建置
+
+需求：OpenWatcom（預設 `/opt`，可用 `WATCOM` 指定）、NASM、mtools、curl、Python 3，以及可開機的 DOS 6.22 FAT12 映像（預設為 `dos/boot622.img`）。建置工具 `tools/genime.py` 需要 `pypinyin`、`jieba`、`opencc`；`tools/genfont.py` 預設讀取 `/usr/share/unifont/unifont.hex`。
+
+```sh
+HF_TOKEN=hf_... ./build.sh
+```
+
+若未設定 `HF_TOKEN`，腳本會產生本機發佈檔但略過 Hugging Face 上傳。可用 `DOS_BASE_IMAGE=/path/to/boot.img` 指定其他基底映像。上傳目標為 `HelloSun/c_dos`，token 僅從環境讀取，不寫入專案。
+
+`dist/dos.zip` 內含 `ETEN.img`，供頁面中的 js-dos 啟動；`dist/ETEN.img` 可直接用於本機測試。
+
+## 授權與來源
+
+- GNU Unifont 字形：GPL-2.0-or-later，附 font embedding exception。GPL-2 授權文字可見 `/usr/share/common-licenses/GPL-2`。
+- js-dos 6.22：使用其發佈檔案，請依上游授權條款使用。
+- DOS 6.22 系統檔案：由使用者提供的 DOS 開機映像取得；建置時移除可選應用程式以騰出磁碟空間。
+- 本專案 C/ASM、HTML 與生成工具：MIT License。

index.html

@@ -1,145 +1,152 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-Hant">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>ETen 中文 DOS 系統 · js-dos 6.22 Demo</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=Noto+Sans+TC:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
-<style>
-  :root{--bg:#000;--fg:#0f0;--amber:#ffb000;--cyan:#0ff}
-  *{box-sizing:border-box}
-  body{margin:0;background:var(--bg);color:var(--fg);font-family:'Share Tech Mono',monospace;min-height:100vh;display:flex;flex-direction:column}
-  header{padding:8px 12px;border-bottom:1px solid #030;background:#010;display:flex;justify-content:space-between;align-items:center;font-size:12px}
-  header .title{color:var(--amber);font-weight:700}
-  .mem{color:var(--cyan)}
-  main{flex:1;display:grid;grid-template-columns:1fr 320px;gap:8px;padding:8px}
-  @media(max-width:800px){main{grid-template-columns:1fr}}
-  .term{background:#010;border:1px solid #030;padding:10px;overflow:auto;min-height:360px;font-size:14px;line-height:1.4;white-space:pre-wrap}
-  .term .prompt{color:var(--amber)}
-  .term .zh{font-family:'Noto Sans TC',sans-serif;color:#fff}
-  .side{background:#010;border:1px solid #030;padding:10px;font-size:12px}
-  .side h3{color:var(--amber);margin:0 0 6px}
-  .ime-status{display:inline-block;padding:2px 6px;border:1px solid #030;margin:4px 0}
-  .ime-status.on{background:#030;color:var(--cyan)}
-  .kbd{background:#111;border:1px solid #333;padding:1px 4px;border-radius:3px}
-  #dosbox{width:100%;height:240px;background:#000;border:1px solid #030;margin-top:8px}
-  footer{padding:6px 12px;border-top:1px solid #030;font-size:11px;color:#060}
-  input#cmd{background:#000;color:var(--fg);border:none;outline:none;font:inherit;width:100%}
-</style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <meta name="theme-color" content="#05070a">
+  <title>倚天中文 DOS · js-dos 6.22</title>
+  <style>
+    :root { color-scheme: dark; font-family: system-ui, sans-serif; background: #05070a; color: #e7edf5; }
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
+    header, footer { padding: .7rem 1rem; background: #0c1118; border-color: #202a36; }
+    header { border-bottom: 1px solid #202a36; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
+    header strong { color: #80d8ff; }
+    #memory { color: #a7b8ca; font-size: .85rem; }
+    main { width: min(100%, 1060px); margin: auto; padding: 1rem; }
+    #screen-wrap { width: 100%; background: #000; border: 1px solid #263342; border-radius: 8px; overflow: hidden; }
+    #dosbox { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #000; image-rendering: pixelated; touch-action: none; }
+    #message { min-height: 1.4em; padding: .35rem .15rem; color: #93a4b6; font: .8rem ui-monospace, monospace; }
+    .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0 .75rem; }
+    button { border: 1px solid #344457; border-radius: 6px; background: #141e2a; color: #e7edf5; min-height: 40px; padding: .45rem .75rem; font: inherit; cursor: pointer; touch-action: manipulation; }
+    button:active, button.active { background: #164467; border-color: #52b9ec; }
+    .spacer { flex: 1; }
+    .keypad { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .35rem; }
+    .keypad button { min-width: 0; padding: .45rem .15rem; font-size: .9rem; }
+    .keypad .wide { grid-column: span 2; }
+    .hint { color: #9aabba; font-size: .82rem; line-height: 1.5; margin: .8rem 0; }
+    footer { border-top: 1px solid #202a36; font-size: .78rem; color: #9aabba; text-align: center; }
+    @media (max-width: 620px) {
+      main { padding: .55rem; }
+      header { padding: .6rem .7rem; align-items: flex-start; flex-direction: column; gap: .2rem; }
+      .keypad { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
+      .keypad button { min-height: 42px; }
+    }
+  </style>
 </head>
 <body>
-<header>
-  <div class="title">倚天中文 DOS 6.22 · ETen Chinese System (復刻)</div>
-  <div class="mem">Conventional Memory: <span id="memfree">624</span> KB free / 640 KB</div>
-</header>
-<main>
-  <section class="term" id="term" tabindex="0">
-    <div>ETen Chinese System v3.5 (demo) — js-dos 6.22</div>
-    <div>Copyright (C) 1990-1994 E-TEN Information Systems Co.</div>
-    <div>開源字型：Noto Sans TC (OFL-1.1)</div>
-    <div>輸入法：注音 (Bopomofo) — 按 <span class="kbd">Ctrl+Space</span> 切換</div>
-    <div>────────────────────────────────────────</div>
-    <div id="log"></div>
-    <div class="prompt">C:\&gt; <input id="cmd" autocomplete="off" spellcheck="false"></div>
-  </section>
-  <aside class="side">
-    <h3>輸入法狀態</h3>
-    <div id="ime" class="ime-status">EN</div>
-    <div>模式：<span id="imemode">英文</span></div>
-    <h3>注音對照</h3>
-    <div style="font-family:'Noto Sans TC',sans-serif;font-size:13px">
-      ㄅ b ㄆ p ㄇ m ㄈ f ㄉ d ㄊ t ㄋ n ㄌ l<br>
-      ㄍ g ㄎ k ㄏ h ㄐ j ㄑ q ㄒ x ㄓ zh ㄔ ch<br>
-      ㄕ sh ㄖ r ㄗ z ㄘ c ㄙ s ㄧ i ㄨ u ㄩ v<br>
-      ㄚ a ㄛ o ㄜ e ㄝ ei ㄞ ai ㄠ ao ㄢ an<br>
-      ㄣ en ㄤ ang ㄥ eng ㄦ er
+  <header>
+    <strong>倚天中文 DOS 6.22 復刻</strong>
+    <span id="memory">DOS 啟動後顯示可用傳統記憶體</span>
+  </header>
+  <main>
+    <div id="screen-wrap"><canvas id="dosbox" width="640" height="480" aria-label="DOS emulator screen"></canvas></div>
+    <div class="toolbar">
+      <button id="ime-toggle" type="button">Ctrl+Space 注音切換</button>
+      <button id="fullscreen" type="button">全螢幕</button>
+      <span class="spacer"></span>
+      <span id="message" role="status">正在載入 DOS 6.22…</span>
     </div>
-    <h3>js-dos 6.22</h3>
-    <div id="dosbox"></div>
-    <div id="dosstatus" style="margin-top:6px;color:#060">載入中…</div>
-  </aside>
-</main>
-<footer>Build: 一鍵 build.sh · 上傳至 Hugging Face Static Space hellosun/c_dos · 600KB+ 傳統記憶體保留</footer>
-
-<script src="js-dos.js"></script>
-<script>
-// Conventional memory display
-let memFree = 624;
-function setMem(v){ memFree=v; document.getElementById('memfree').textContent=v; }
-setMem(624);
-
-// Zhuyin IME
-const zhuyinMap = {
-  'ㄅㄚ':'巴','ㄆㄚ':'怕','ㄇㄚ':'媽','ㄈㄚ':'發','ㄉㄚ':'大','ㄊㄚ':'他','ㄋㄚ':'拿','ㄌㄚ':'拉',
-  'ㄍㄚ':'家','ㄎㄚ':'卡','ㄏㄚ':'哈','ㄐㄧ':'機','ㄑㄧ':'七','ㄒㄧ':'西','ㄓ':'之','ㄔ':'吃',
-  'ㄕ':'是','ㄖ':'日','ㄗ':'字','ㄘ':'次','ㄙ':'四','ㄧ':'一','ㄨ':'五','ㄩ':'女',
-  'ㄠ':'好','ㄞ':'來','ㄢ':'安','ㄣ':'恩','ㄤ':'昂','ㄥ':'鞥','ㄦ':'兒','ㄅㄛ':'波','ㄆㄛ':'坡',
-  'ㄇㄛ':'摸','ㄈㄛ':'佛','ㄉㄜ':'的','ㄊㄜ':'特','ㄋㄜ':'呢','ㄌㄜ':'樂','ㄍㄜ':'哥','ㄎㄜ':'科',
-  'ㄏㄜ':'喝','ㄐㄜ':'歌','ㄑㄜ':'課','ㄒㄜ':'喝','ㄓㄜ':'者','ㄔㄜ':'車','ㄕㄜ':'社','ㄖㄜ':'熱',
-  'ㄗㄜ':'則','ㄘㄜ':'測','ㄙㄜ':'色','ㄅㄞ':'百','ㄆㄞ':'派','ㄇㄞ':'買','ㄈㄞ':'發','ㄉㄞ':'呆',
-  'ㄊㄞ':'台','ㄋㄞ':'乃','ㄌㄞ':'來','ㄍㄞ':'改','ㄎㄞ':'開','ㄏㄞ':'海','ㄐㄞ':'介','ㄑㄞ':'且',
-  'ㄒㄞ':'鞋','ㄓㄞ':'宅','ㄔㄞ':'差','ㄕㄞ':'晒','ㄖㄞ':'乳','ㄗㄞ':'再','ㄘㄞ':'才','ㄙㄞ':'塞'
-};
-let imeOn = false;
-let buf = '';
-const imeEl = document.getElementById('ime');
-const modeEl = document.getElementById('imemode');
-const logEl = document.getElementById('log');
-const cmdEl = document.getElementById('cmd');
-
-function toggleIme(){
-  imeOn = !imeOn;
-  imeEl.textContent = imeOn ? '注音' : 'EN';
-  imeEl.classList.toggle('on', imeOn);
-  modeEl.textContent = imeOn ? '注音' : '英文';
-  buf = '';
-}
-document.addEventListener('keydown', (e)=>{
-  if (e.ctrlKey && e.code === 'Space') { e.preventDefault(); toggleIme(); return; }
-  if (!imeOn) return;
-  // zhuyin symbols typed via bopomofo keys? We accept direct unicode zhuyin too.
-});
-
-cmdEl.addEventListener('keydown', (e)=>{
-  if (e.key === 'Enter'){
-    const v = cmdEl.value;
-    const line = document.createElement('div');
-    line.innerHTML = '<span class="prompt">C:\\&gt; </span>' + (imeOn && buf ? convert(buf) : '') + escapeHtml(v);
-    logEl.appendChild(line);
-    handleCmd(v);
-    cmdEl.value=''; buf='';
-    return;
-  }
-  if (imeOn){
-    // accumulate last char as zhuyin buffer display
-  }
-});
-
-function convert(b){ return zhuyinMap[b] || b; }
-function escapeHtml(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;'); }
-
-function handleCmd(v){
-  const t = v.trim().toLowerCase();
-  if (t === 'mem'){ print('640 KB total conventional memory'); print(memFree+' KB free'); }
-  else if (t === 'ver'){ print('MS-DOS 6.22 (ETen demo)'); }
-  else if (t === 'help'){ print('命令: mem, ver, cls, exit'); }
-  else if (t === 'cls'){ logEl.innerHTML=''; }
-  else if (t){ print('Bad command or file name'); }
-  const term = document.getElementById('term'); term.scrollTop = term.scrollHeight;
-}
-function print(s){ const d=document.createElement('div'); d.textContent=s; logEl.appendChild(d); }
-
-// js-dos 6.22 init
-(function(){
-  const status = document.getElementById('dosstatus');
-  if (typeof Dos === 'undefined'){ status.textContent='js-dos 未載入'; return; }
-  try {
-    const dos = Dos(document.getElementById('dosbox'), {wdosboxUrl:'wdosbox.js'});
-    status.textContent = 'js-dos 6.22 已載入 (DOSBox 核心)';
-  } catch(err){ status.textContent = 'js-dos 初始化: '+err.message; }
-})();
-</script>
+    <p class="hint">點選 DOS 畫面後可使用實體鍵盤。手機可用下方按鍵輸入；注音鍵盤採標準倚天鍵位。F1 顯示系統資訊，Alt+X 離開。</p>
+    <section class="keypad" aria-label="虛擬鍵盤">
+      <button type="button" data-key="49">1 ㄅ</button><button type="button" data-key="81">Q ㄆ</button><button type="button" data-key="65">A ㄇ</button><button type="button" data-key="90">Z ㄈ</button><button type="button" data-key="50">2 ㄉ</button><button type="button" data-key="87">W ㄊ</button>
+      <button type="button" data-key="83">S ㄋ</button><button type="button" data-key="88">X ㄌ</button><button type="button" data-key="69">E ㄍ</button><button type="button" data-key="68">D ㄎ</button><button type="button" data-key="67">C ㄏ</button><button type="button" data-key="82">R ㄐ</button>
+      <button type="button" data-key="70">F ㄑ</button><button type="button" data-key="86">V ㄒ</button><button type="button" data-key="53">5 ㄓ</button><button type="button" data-key="84">T ㄔ</button><button type="button" data-key="71">G ㄕ</button><button type="button" data-key="66">B ㄖ</button>
+      <button type="button" data-key="89">Y ㄗ</button><button type="button" data-key="72">H ㄘ</button><button type="button" data-key="78">N ㄙ</button><button type="button" data-key="85">U ㄧ</button><button type="button" data-key="74">J ㄨ</button><button type="button" data-key="77">M ㄩ</button>
+      <button type="button" data-key="56">8 ㄚ</button><button type="button" data-key="73">I ㄛ</button><button type="button" data-key="75">K ㄜ</button><button type="button" data-key="188">, ㄝ</button><button type="button" data-key="57">9 ㄞ</button><button type="button" data-key="79">O ㄟ</button>
+      <button type="button" data-key="76">L ㄠ</button><button type="button" data-key="190">. ㄡ</button><button type="button" data-key="48">0 ㄢ</button><button type="button" data-key="80">P ㄣ</button><button type="button" data-key="186">; ㄤ</button><button type="button" data-key="191">/ ㄥ</button>
+      <button type="button" data-key="189">- ㄦ</button><button type="button" data-key="54">6 ˊ</button><button type="button" data-key="51">3 ˇ</button><button type="button" data-key="52">4 ˋ</button><button type="button" data-key="55">7 ˙</button><button type="button" data-key="8">⌫</button>
+      <button type="button" data-key="27">Esc</button><button type="button" data-key="13">Enter</button><button type="button" data-key="32" class="wide">Space</button><button type="button" data-key="37">←</button><button type="button" data-key="38">↑</button><button type="button" data-key="39">→</button><button type="button" data-key="40">↓</button>
+      <button type="button" data-key="112">F1</button><button id="alt-x" type="button" class="wide">Alt+X</button>
+    </section>
+  </main>
+  <footer>OpenWatcom · GNU Unifont · Big5 注音輸入 · 目標保留 600KB 以上傳統記憶體</footer>
+  <script src="js-dos.js"></script>
+  <script>
+    (() => {
+      const status = document.getElementById('message');
+      const memory = document.getElementById('memory');
+      const host = document.getElementById('dosbox');
+      let controller = null;
+      const canvas = host;
+      const send = (code, down) => {
+        if (!controller) return;
+        controller.simulateKeyEvent(code, down);
+      };
+      const tap = (code) => {
+        send(code, true);
+        window.setTimeout(() => send(code, false), 90);
+      };
+      const toggleIme = () => {
+        send(17, true);
+        tap(32);
+        window.setTimeout(() => send(17, false), 130);
+      };
+      window.etImeToggle = toggleIme;
+      document.getElementById('ime-toggle').addEventListener('click', toggleIme);
+      document.getElementById('fullscreen').addEventListener('click', () => controller && controller.fullscreen());
+      document.getElementById('alt-x').addEventListener('click', () => {
+        send(18, true); tap(88); window.setTimeout(() => send(18, false), 130);
+      });
+      document.querySelectorAll('.keypad [data-key]').forEach((button) => {
+        button.addEventListener('pointerdown', (event) => {
+          event.preventDefault();
+          const code = Number(button.dataset.key);
+          tap(code);
+          button.classList.add('active');
+        });
+        button.addEventListener('pointerup', () => button.classList.remove('active'));
+        button.addEventListener('pointercancel', () => button.classList.remove('active'));
+        button.addEventListener('pointerleave', () => button.classList.remove('active'));
+      });
+      canvas.tabIndex = 0;
+      canvas.addEventListener('pointerdown', () => canvas.focus());
+      document.addEventListener('keydown', (event) => {
+        if (!controller) return;
+        if (event.code === 'Space' && event.ctrlKey) {
+          if (canvas.contains(event.target)) return;
+          event.preventDefault();
+          toggleIme();
+          return;
+        }
+        if (canvas.contains(event.target)) {
+          if (event.isTrusted && event.key === 'x' && event.altKey) event.preventDefault();
+          return;
+        }
+        if (!event.isTrusted) return;
+        if (event.code === 'AltLeft' || event.code === 'AltRight') {
+          send(18, true);
+          return;
+        }
+        if (event.code === 'ControlLeft' || event.code === 'ControlRight') {
+          send(17, true);
+          return;
+        }
+        if (event.code === 'KeyX' && event.altKey) event.preventDefault();
+        if (!event.repeat) send(event.keyCode, true);
+      });
+      document.addEventListener('keyup', (event) => {
+        if (!controller) return;
+        if (canvas.contains(event.target)) return;
+        if (!event.isTrusted) return;
+        if (event.code === 'AltLeft' || event.code === 'AltRight') { send(18, false); return; }
+        if (event.code === 'ControlLeft' || event.code === 'ControlRight') { send(17, false); return; }
+        send(event.keyCode, false);
+      });
+      if (typeof Dos !== 'function') { status.textContent = 'js-dos 核心載入失敗'; return; }
+      Dos(host, { wdosboxUrl: 'wdosbox.js' }).ready((fs, main) => {
+        status.textContent = '正在載入 DOS 開機磁碟…';
+        fs.extract('dos.zip', '/').then(() => main(['-c', 'boot ETEN.img']))
+          .then((ci) => {
+            controller = ci;
+            window.etController = ci;
+            canvas.tabIndex = 0;
+            status.textContent = 'DOS 6.22 已啟動；點選畫面輸入';
+            memory.textContent = '倚天中文系統 · js-dos 6.22';
+          })
+          .catch((error) => { status.textContent = '啟動失敗：' + (error.message || error); });
+      });
+    })();
+  </script>
 </body>
 </html>