Implement web interface builder

.github/workflows/pages.yml

@@ -0,0 +1,65 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the branch
+  push:
+    branches:
+      - master
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.12"]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: master
+
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - name: Install Python dependencies
+        run: |
+          python -m pip install . &&
+          python -m pip install -r scripts/requirements.txt
+
+      - name: Build static site contents
+        run: |
+          python scripts/build.py
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: '_public'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -6,6 +6,7 @@ __pycache__/
 build/
 dist/
 *.egg-info/
+_public/
 
 # Compiled dictionary
 *.list

README.md

@@ -107,6 +107,14 @@ converter.convert_file(input=None, output=None
  */
 ```
 
+## 線上版
+
+[簡繁祕書線上版](https://danny0838.github.io/sts-lib/)
+
+本線上轉換工具支援文字轉換及檔案轉換。前者只要在輸入區填入文字，就會自動轉換並且可以互動式校訂。後者可以用按鈕或拖放選擇一或多個檔案，就會逐一轉換後自動下載。預設檔案輸入輸出編碼皆是UTF-8，如要輸入其他編碼的檔案，可在進階選項設定。
+
+目前內建 [OpenCC](https://github.com/BYVoid/OpenCC) 的轉換方案，並且修正了 OpenCC 演算法缺陷導致一些地區詞無法正常轉換的問題（詳見[相關問題回報](https://github.com/BYVoid/OpenCC/issues/475)）。未來有機會再擴充，如中文維基百科的轉換詞庫。
+
 ## License 許可協議
 
 本專案以 Apache License 2.0 協議授權使用。

scripts/build.py

@@ -41,6 +41,40 @@ def main():
     tpl = env.get_template('index_single.html')
     render_on_demand(file, tpl, single_page=True)
 
+    # build static site contents under PUBLIC_DIR
+    www_dir = os.path.join(root_dir, PUBLIC_DIR)
+    os.makedirs(www_dir, exist_ok=True)
+
+    file = os.path.join(www_dir, 'index.html')
+    tpl = env.get_template('index.html')
+    render_on_demand(file, tpl)
+
+    file = os.path.join(www_dir, 'index.css')
+    tpl = env.get_template('index.css')
+    render_on_demand(file, tpl)
+
+    file = os.path.join(www_dir, 'index.js')
+    tpl = env.get_template('index.js')
+    render_on_demand(file, tpl)
+
+    file = os.path.join(www_dir, 'sts.js')
+    tpl = env.get_template('sts.js')
+    render_on_demand(file, tpl)
+
+    # -- compile *.tlist
+    dicts_dir = os.path.join(www_dir, 'dicts', 'opencc')
+    os.makedirs(dicts_dir, exist_ok=True)
+    maker = StsMaker()
+    config_files = os.path.join(glob.escape(StsMaker.config_dir), '[!_]*.json')
+    for config_file in glob.iglob(config_files):
+        file = maker.make(config_file, quiet=True)
+        basename = os.path.basename(file)
+        dest = os.path.join(dicts_dir, basename)
+
+        if not os.path.isfile(dest) or os.path.getmtime(file) > os.path.getmtime(dest):
+            print(f'updating: {dest}')
+            shutil.copyfile(file, dest)
+
 
 if __name__ == '__main__':
     main()

sts/data/htmlpage/index.css

@@ -30,3 +30,8 @@ body > footer { margin-top: 1em; text-align: center; font-size: small; }
 .popup a { padding: .3em; cursor: pointer; }
 .popup a:hover { background-color: #ccc; }
 .popup a:not([tabindex="0"])::before { content: attr(tabindex) "."; }
+
+{%- if not single_page %}
+#panel section { margin: .5em auto; }
+#panel textarea { width: 100%; height: 30vh; min-height: 120px; box-sizing: border-box; }
+{%- endif %}

sts/data/htmlpage/index.html

@@ -4,16 +4,65 @@
 {%- block head %}
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
-<title>{% block title %}{% endblock title %}</title>
+<title>{% block title %}簡繁祕書線上版 v2.0.0{% endblock title %}</title>
 {%- block styles %}
+<link rel="stylesheet" href="index.css">
 {%- endblock styles %}
 {%- block scripts %}
+<script src="sts.js"></script>
+<script src="index.js"></script>
 {%- endblock scripts %}
 {%- endblock head %}
 </head>
 <body>
 {%- block viewer %}
+<pre id="viewer" hidden></pre>
 {%- endblock viewer %}
+{%- block panel %}
+<section id="panel">
+<form>
+  <section>
+    <textarea name="input" placeholder="輸入文字後點擊 [轉換文字]，或點擊 [轉換檔案] 選擇欲轉換的檔案，或拖放檔案與資料夾至此"></textarea>
+  </section>
+  <section>
+    <select name="method">
+      <optgroup label="正體">
+        <option value="opencc/s2t">簡體轉正體</option>
+        <option value="opencc/tw2t">臺灣繁體轉正體</option>
+        <option value="opencc/hk2t">香港繁體轉正體</option>
+        <option value="opencc/jp2t">日本新字體轉正體</option>
+      </optgroup>
+      <optgroup label="臺灣">
+        <option value="opencc/s2tw">簡體轉臺灣繁體</option>
+        <option value="opencc/s2twp" selected>簡體轉臺灣繁體（含用詞）</option>
+        <option value="opencc/t2tw">正體轉臺灣繁體</option>
+      </optgroup>
+      <optgroup label="香港">
+        <option value="opencc/s2hk">簡體轉香港繁體</option>
+        <option value="opencc/t2hk">正體轉香港繁體</option>
+      </optgroup>
+      <optgroup label="簡體（中國）">
+        <option value="opencc/t2s">正體轉簡體</option>
+        <option value="opencc/tw2s">臺灣繁體轉簡體</option>
+        <option value="opencc/tw2sp">臺灣繁體轉簡體（含用詞）</option>
+        <option value="opencc/hk2s">香港繁體轉簡體</option>
+      </optgroup>
+      <optgroup label="日本">
+        <option value="opencc/t2jp">正體轉日本新字體</option>
+      </optgroup>
+    </select>
+    <input type="submit" value="轉換文字">
+    <input name="copy-text" type="button" value="複製轉換結果">
+    <input name="convert-file" type="button" value="轉換檔案">
+    <input name="convert-file-input" type="file" hidden>
+    <input name="convert-file-charset" type="hidden" value="UTF-8">
+    <input name="advanced" type="button" value="進階設定">
+    <input name="exclude-pattern" type="hidden">
+    <input name="custom-dict" type="hidden">
+  </section>
+</form>
+</section>
+{%- endblock panel %}
 {%- block help %}
 <details>
 <summary>操作說明</summary>
@@ -44,6 +93,8 @@ <h3>操作鍵</h3>
 {%- endblock help %}
 <footer>
 {%- block footer %}
+<a rel="external" href="https://github.com/danny0838/sts-lib">STS (Simplified-Traditional Secretary)</a>.
+Released under <a rel="external license" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.
 {%- endblock footer %}
 </footer>
 </body>