diff --git a/wasm-demo/README.md b/wasm-demo/README.md index a0777b45f..310f1d115 100644 --- a/wasm-demo/README.md +++ b/wasm-demo/README.md @@ -1,30 +1,29 @@ -# wasm-demo：OpenCC WASM 用法简介 +# wasm-demo：OpenCC WASM 示範站 -本目录提供一个基于发布包 `opencc-wasm` 的浏览器演示：加载配置与词典、执行转换、运行测试用例。 +本目錄提供一個基於發佈套件 `opencc-wasm` 的瀏覽器示範：載入設定與字典、執行轉換、跑測試。 -## 准备 -- 先在仓库根执行 `npm install ./wasm-lib`（或从 npm 安装正式包），确保本目录下的 `node_modules/opencc-wasm` 可用。 +## 準備 +- 先在 `wasm-demo` 根目錄執行 `npm install`，確認本目錄的 `node_modules/opencc-wasm` 可用。 -## 文件概览 -- `index.html`：演示页面，引用 `./vendor/opencc-wasm/opencc-wasm.js` 初始化 WASM（需先运行 `npm run prepare:assets` 复制产物）： - - 配置按钮：从 `./vendor/opencc-wasm/data/config/*.json` 解析并加载所需 `.ocd2` 到虚拟 FS（配置写 `/data/config/`、词典写 `/data/dict/`），自动填充配置名、焦点跳转。 - - 文本转换：选择配置后调用句柄式 `opencc_convert`，支持一键复制输出。 - - 测试用例：读取本目录的 `testcases.json`，批量加载配置/词典并校验输出，结果汇总在日志框。 - - 统一日志/结果输出区。 -- `testcases.json`：从 `../test/testcases` 生成的用例（如需重新生成，可使用 `wasm-lib/scripts/gen_testcases_json.py`，输出到本目录）。 -- `vendor/opencc-wasm/`：通过 `npm run prepare:assets` 从已安装的 `opencc-wasm` 包复制的构建产物。 -- `benchmark.html`：简单性能对比页（WASM 与 opencc-js，本地有 opencc-js 时可用于对比，但性能不是 WASM 目标；WASM 侧优势在于完整 OpenCC 行为与官方 config/ocd2 一致性）。 +## 檔案概覽 +- `index.html`：新版經典介面（類似 byvoid.opencc.com），按鈕式選原文／目標／異體字／地域用詞，動態載入設定與 `.ocd2`（寫入 `/data/config`、`/data/dict`），內建測試入口、複製、快捷鍵等。 +- `wasm.html`：早期的 WASM API 示範頁，直接呼叫 `opencc_create/opencc_convert`，可手動載入設定並跑測試。 +- `public-api.html`：使用 `opencc-wasm` 提供的 opencc-js 相容 API 的示範頁，方便對照官方 JS API。 +- `benchmark.html`：效能對比頁（WASM vs opencc-js，需本機有 opencc-js 才會載入；WASM 重點在行為一致性而非效能）。 +- `testcases.json`：自 `../test/testcases` 產出的用例（如需重生，可用 `wasm-lib/scripts/gen_testcases_json.py` 輸出到本目錄）。 +- `vendor/opencc-wasm/`：透過 `npm run prepare:assets` 從已安裝的 `opencc-wasm` 套件複製的構建產物。 -## 运行 +## 執行 ```bash cd wasm-demo -npm install # 安装依赖（包含 opencc-wasm 本地包） -npm run prepare:assets # 复制 dist 到 vendor，便于静态访问 -python3 -m http.server 8000 -# 浏览器访问 http://localhost:8000/wasm-demo/ +npm install # 安裝相依（包含 opencc-wasm 本地套件） +npm run build # 複製 dist 到 vendor，方便靜態存取 +python3 -m http.server 8000 # 瀏覽器開 http://localhost:8000/wasm-demo/ ``` -点击配置按钮加载词典，然后执行转换或运行测试用例。 +點擊設定按鈕載入字典，再執行轉換或測試。 -## 配置与词典路径 -- 配置 JSON 与字典 `.ocd2` 直接使用包内的 `node_modules/opencc-wasm/dist/data/config/` 与 `node_modules/opencc-wasm/dist/data/dict/`。 -- 页面加载时把配置写入 `/data/config/`，词典写入 `/data/dict/`，并在配置中重写引用路径指向 `/data/dict/...`。 +輸出的 `dist/` 內容可直接用於靜態部署。 + +## 設定與字典路徑 +- 設定 JSON 與字典 `.ocd2` 直接使用套件內的 `node_modules/opencc-wasm/dist/data/config/` 與 `node_modules/opencc-wasm/dist/data/dict/`。 +- 頁面載入時把設定寫入 `/data/config/`，字典寫入 `/data/dict/`，並在設定中改寫引用路徑指向 `/data/dict/...`。 diff --git a/wasm-demo/build.js b/wasm-demo/build.js index 2b7558d59..167087d05 100644 --- a/wasm-demo/build.js +++ b/wasm-demo/build.js @@ -36,7 +36,7 @@ if (fs.existsSync(ocjsSrc)) { } // copy demo assets -const filesToCopy = ["index.html", "public-api.html", "benchmark.html", "testcases.json"]; +const filesToCopy = ["index.html", "public-api.html", "classic.html", "benchmark.html", "testcases.json"]; for (const file of filesToCopy) { const src = path.join(demoRoot, file); if (fs.existsSync(src)) { diff --git a/wasm-demo/index.html b/wasm-demo/index.html index 822256df5..03a80fb79 100644 --- a/wasm-demo/index.html +++ b/wasm-demo/index.html @@ -3,172 +3,311 @@ - OpenCC 浏览器演示 + OpenCC WASM 經典版 -

OpenCC WASM 库 用法演示

-
-

加载配置与词典

-

点击配置名，自动解析 JSON，按需拉取其中引用的 .ocd2 并写入 WASM 虚拟文件系统的 /data/config/。配置文件；OpenCC OCD2 字典为原始 TXT 文件编译产物。

-
-
+
+ +

OpenCC 轉換工具演示 更新日期：2026-01-01

+
-
-

文本转换

- - - - - -
- 

-      
+  

+    

+      
選擇轉換模式

+      

+    

+    

+      

+        原文
+        
+        
+        
+      

+      

+        目標
+        
+        
+        
+      

+        

+          異體字轉換
+          
+          
+          
+        

+      

+        地域用詞轉換
+        
+        
+        
+      

     

   

 
-  

-    
运行 OpenCC 测试用例

-    
读取 /public/testcases.json，自动加载配置与词典并逐条校验。测试用例来源

-    
-  

+  

+    

+      
輸入原文

+      
+      

+        
+        
+      

+    

 
-  

-    
日志 / 结果

-    

+    

+      
轉換結果

+      

+      

+        
+      

+    

   

 
   
+    

+      

+    

+      

+        本頁面中的轉換全部在瀏覽器內完成，不會上傳文字，保障您的隱私。 |
+        OpenCC GitHub |
+        Telegram 討論組
+      
Copyright 2026 OpenCC Authors

+      

+    

 
 
diff --git a/wasm-demo/package-lock.json b/wasm-demo/package-lock.json
index ac6c17ed3..ccf8a47d7 100644
--- a/wasm-demo/package-lock.json
+++ b/wasm-demo/package-lock.json
@@ -9,12 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "opencc-js": "^1.0.5",
-        "opencc-wasm": "file:../wasm-lib"
+        "opencc-wasm": "^0.1.0"
       }
     },
     "../wasm-lib": {
       "name": "opencc-wasm",
-      "version": "0.1.0"
+      "version": "0.1.0",
+      "license": "Apache-2.0"
     },
     "node_modules/opencc-js": {
       "version": "1.0.5",
diff --git a/wasm-demo/package.json b/wasm-demo/package.json
index bc044a491..0294bd40b 100644
--- a/wasm-demo/package.json
+++ b/wasm-demo/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "opencc-wasm": "file:../wasm-lib",
+    "opencc-wasm": "^0.1.0",
     "opencc-js": "^1.0.5"
   },
   "scripts": {
diff --git a/wasm-demo/wasm.html b/wasm-demo/wasm.html
new file mode 100644
index 000000000..822256df5
--- /dev/null
+++ b/wasm-demo/wasm.html
@@ -0,0 +1,388 @@
+
+
+
+  
+  
+  OpenCC 浏览器演示
+  
+
+
+  
OpenCC WASM 库 用法演示

+  

+    
加载配置与词典

+    
点击配置名，自动解析 JSON，按需拉取其中引用的 .ocd2 并写入 WASM 虚拟文件系统的 /data/config/。配置文件；OpenCC OCD2 字典为原始 TXT 文件编译产物。

+    

+  

+
+  

+    
文本转换

+    
+    
+    
+    
+    
+    

+      

+      
+    

+  

+
+  

+    
运行 OpenCC 测试用例

+    
读取 /public/testcases.json，自动加载配置与词典并逐条校验。测试用例来源

+    
+  

+
+  

+    
日志 / 结果

+    

+  

+
+  
+
+