Mokuro JSON GUI 是一個獨立、免安裝的 HTML 工具，專為 mokuro 專案的使用者設計。它提供了一個互動式視覺化介面，讓使用者可以方便地載入 mokuro 產生的圖片和對應的 JSON 檔案，進行 OCR 結果的校對、編輯、修正與匯出。
這個工具完全在您的瀏覽器本機端運行，所有檔案處理都在本地進行，無需上傳到任何伺服器，確保了您的資料隱私和安全。
（不过mokuro字号如果仍然限制在32px的话以下，那大概不太需要自动字号，还得是有能力魔改mokuro的人才能用啊，总觉得给我一个人自娱自乐写的 ）
此版本 (main 分支) 包含針對作者個人魔改版 mokuro 的特殊功能，特別是與「角度 (angle)」相關的屬性。如果您使用的是原版的 mokuro，請下載 no-angle-v1 分支的 HTML，以確保相容性。
mokuro 是一個強大的工具，可以從漫畫圖片中提取文字。然而，OCR 結果有時會出現偏差，例如文字方塊定位不準、文字識別錯誤、或區塊排序混亂等。傳統上，使用者需要手動編輯 JSON 檔案，這個過程不僅繁瑣且容易出錯。
Mokuro JSON GUI 旨在解決這個痛點，提供一個「所見即所得」(WYSIWYG) 的編輯環境，讓修正 OCR 結果變得跟操作繪圖軟體一樣直觀簡單。
- 批次載入：一次性選擇包含多張圖片的資料夾和對應的 JSON 資料夾。工具會自動比對檔名並配對。
- 智慧導航：
- 前進/後退：導航按鈕已重新配置，左箭頭 (◀) 為下一張，右箭頭 (▶) 為上一張，以匹配特定閱讀習慣。
- 跳頁功能：直接輸入頁碼並點擊 "Go"，可快速跳轉到指定檔案。
- 靈活匯出：
- 匯出單檔：僅儲存目前正在編輯的 JSON 檔案。
- 匯出所有：將所有已載入並可能已修改的 JSON 檔案打包成一個 ZIP 檔案，一鍵下載。
- 多圖層顯示：可自由切換「總框」(Block)、「行框」(Line) 和「文字」的顯示/隱藏，讓畫面更清晰。
- 屬性提示：當選取區塊時，會顯示區塊索引、字體大小、角度等實用資訊。針對行框，會動態顯示最小與最大預估字號的行，方便您判斷。
- 一鍵處理 (一)：自動執行一套預設的優化流程，依序包括「套用固定取代規則」、「批次切換數字橫排 (開啟)」和「所有頁面自動字號」。
- 固定規則取代 (替)：對當前或所有檔案套用預設的符號和文字取代規則（例如
．．．->…，「->｢），快速修正常見的 OCR 錯誤。 - 數字橫排/疊字 (叠)：全局開啟或關閉日文排版中的數字橫排 (Tate-Chuu-Yoko) 功能。
- 批次自動字號 (字)：為所有已載入頁面的所有區塊，根據其文字行框的大小自動計算並設定最合適的字體大小。
- 新增文字框 (+)：在「拖曳新增矩形框」模式下，可像畫矩形一樣輕鬆新增文字框。
- 移動與變形：
- 行框 (Line)：透過控制點拖曳移動、旋轉、調整四角，或進行邊緣平移。
- 總框 (Block)：拖曳旋轉控制點或縮放四角控制點來調整整個區塊。
- 自動適應與校正：
- 自適應外框 (適)：根據區塊內的所有行框，自動重新計算總框的大小，但保持角度為零度。
- 計算角度並傾斜外框 (斜)：根據區塊內所有行框的平均角度，自動重新計算總框的大小和傾斜角度。
- 矩形化 (矩)：將不規則的四邊形行框校正為標準矩形。
- 扶正 (扶)：將歪斜的行框拉直，使其變為零度水平矩形。
- 結構編輯：
- 合併 (合)：選取多個行框（可跨不同區塊），將它們合併成一個新的總框。
- 拆分 (拆)：將一個包含多行文字的總框，拆分成數個獨立的區塊（每個區塊包含一行或多行）。
- 手動排序 (序)：進入排序模式，透過點擊區塊來重新定義它們的順序。未被點擊的區塊會保持在順序頂部，而被點擊的區塊將按照點擊順序追加到列表末尾。
- 內容與屬性編輯：
- 修改文字 (文)：彈出對話框，方便地修改單一行的文字內容，並提供常用符號快捷按鈕。
- 改屬性 (属)：快速切換選定區塊的「橫排/豎排」方向，或開關其「數字橫排」屬性。
- 改字號 (号)：手動輸入精確的字體大小。
- 設定角度 (角)：手動輸入總框的精確旋轉角度。
本工具是一個單一的 HTML 檔案，無需安裝任何軟體或伺服器。
- 下載：從本 GitHub 儲存庫下載對應分支的 HTML 檔案。
- 開啟：直接用您的網頁瀏覽器（推薦使用 Chrome、Firefox 或 Vivaldi）開啟這個 HTML 檔案。
- 選擇圖片：點擊左上角的「選擇圖片」按鈕，然後選擇包含您的漫畫/掃描圖片的資料夾。
- 選擇 JSON：點擊「選擇 JSON」按鈕，然後選擇包含對應
mokuroOCR 結果的資料夾。 - 開始編輯：
- 工具會自動匹配同名的圖片和 JSON 檔案。
- 使用頂部工具欄的按鈕進行各種編輯操作。
- 在畫布上直接點擊、拖曳來選取和修改文字框。按住
Shift鍵可一次選取多個行框。
- 匯出結果：完成編輯後，點擊「匯出 JSON」或「匯出所有」來儲存您的工作成果。
注意：本工具需要網路連線才能正常運作。
它使用了以下開源 JavaScript 函式庫，並透過 CDN (內容傳遞網路) 線上載入。如果沒有網路連線，這些函式庫將無法載入，導致工具介面或功能異常。
- Tailwind CSS：用於美化使用者介面。
- JSZip：用於「匯出所有」功能，將多個 JSON 檔案打包成 ZIP。
- Noto Sans JP (from Google Fonts)：確保跨平台日文字體顯示的一致性與專業性。
這裏為您着重介紹 Mokuro JSON GUI 工具中「自動字號」功能的原理及其在精准性上的優勢。
該功能的核心是為 OCR 辨識出的每一行文字，根據其所在的矩形框（Line box）大小，計算出最貼合、最美觀的字體大小（font size）。它摒棄了簡單的「長度/字數」估算，而是針對豎排與橫排兩種情況，採用了截然不同的精確計算模型。
對於豎排文字，字號的核心是在有限的「高度」內容納所有文字。此工具的原理是計算出一個「有效字元總數」，再用行框的平均高度除以這個總數，從而得到每個字元的理想高度，即字號。
其計算步驟如下：
- 測量可用高度：首先，工具會計算文字行框（一個四邊形）的平均高度，作為可供文字排列的總空間。
- 計算有效字元數：這一步是精准性的關鍵。它並非簡單地計算字元個數，而是根據日文排版規則進行加權計算：
- 數字橫排 (疊字/TCY) 處理：如果開啟了數字橫排功能，像「1999」或「03」這樣的 2-4 位數字會被視為一個整體，只佔用 1 個標準字元的垂直空間。
- 半形及壓縮字元處理：半形英數、假名，以及
。、、、（、）等豎排時會被壓縮的標點符號，每個只佔用 0.5 個標準字元的垂直空間。 - 標準字元：一般的漢字、全形假名等標準字元，每個佔用 1 個標準字元的垂直空間。
- 得出最終字號：
最終字號 = 行框平均高度 / 有效字元總數。
範例：對於文字「2025年､始動。」，如果行框高度為 150px，傳統計算會是 150 / 8 = 18.75。而本工具的計算方式是："2025" (1個字元) + "年" (1個字元) + "､" (0.5個字元) + "始" (1個字元) + "動" (1個字元) + "。" (0.5個字元) = 5 個有效字元。最終字號為 150 / 5 = 30，這顯然更符合實際排版效果。
對於橫排文字，字號的核心是在有限的「寬度」內填滿文字。由於不同字元（如 W 和 i）的寬度差異巨大，簡單除法會產生極大誤差。因此，工具採用了基於瀏覽器渲染引擎的比例縮放法。
其計算步驟如下：
- 測量可用寬度：計算文字行框的平均寬度，作為可用總空間。
- 獲取參考寬度：工具會在一個虛擬的畫布上，用一個很大的臨時字號（例如 100px）來「預渲染」這段文字，並利用瀏覽器核心的
measureText函數，精確測量出這段文字在 100px 字號下的實際渲染總寬度。 - 計算縮放比例：用「行框的實際寬度」除以「100px下的參考寬度」，得到一個精確的縮放比例。
- 得出最終字號：
最終字號 = 臨時字號 (100px) * 縮放比例。
範例：一段文字 "Warning!" 在 100px 字號下測量出的寬度為 800px。如果它所在的行框實際寬度只有 160px，那麼縮放比例就是 160 / 800 = 0.2。最終的精確字號就是 100 * 0.2 = 20。
相較於粗略的估算方法，本工具的自動字號功能具備以下核心優勢：
-
區分排版模式，邏輯更專業：
- 它深刻理解豎排與橫排的佈局邏輯根本不同——前者是解決高度問題，後者是解決寬度問題。為此設計兩套完全獨立的演算法，是實現精准的第一步。
-
感知上下文，符合豎排視覺習慣：
- 智能處理疊字：在計算豎排字號時，能識別出數字橫排組合，將其視為一個單元。這避免了因數字位數多而導致字號被過度縮小的問題，計算結果與專業排版軟體的處理邏輯一致。
- 還原標點壓縮：準確處理了日文豎排中標點符號的壓縮慣例，使得計算出的「有效字元數」更少，字號更大，最終的排版結果也更加飽滿、自然，不會因標點過多而顯得稀疏。
-
利用真實渲染，實現橫排像素級貼合：
- 克服不等寬字元問題：橫排計算不依賴任何「平均字寬」的假設。它利用瀏覽器底層的文字渲染引擎，精確測量包含不同寬度字元（漢字、英文、數字、符號）的字串的實際像素寬度，從源頭上保證了寬度計算的準確性。
- 結果高度可靠：因為其原理是基於真實的渲染數據進行比例縮放，所以計算出的字號能讓文字長度完美地貼合行框寬度，實現「所見即所得」的精確填充。