Spaces:

Lashtw
/

flashcards

Running

App Files Files Community

Lashtw commited on 26 days ago

Commit

3c8ce5d

verified ·

1 Parent(s): 1713756

Update index.html

Browse files

Files changed (1) hide show

index.html +81 -47

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>單字閃卡 (手寫測試版)</title>
     <!-- 載入 Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- 載入彩帶效果庫 -->
@@ -434,7 +434,7 @@
                         </button>
                         <button id="hw-recognize-btn" class="flex-[2] py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 shadow-md transition-colors flex items-center justify-center gap-1">
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
-                            辨識輸入
                         </button>
                     </div>
                 </div>
@@ -668,6 +668,10 @@
         let currentStrokes = []; // 存放所有筆畫: [ [[x], [y], [t]], [[x], [y], [t]], ... ]
         let currentStroke = {x: [], y: [], t: []}; // 暫存當前筆畫
         let canvasCtx = null;
         document.addEventListener('DOMContentLoaded', () => {
             // DOM 元素
@@ -900,7 +904,7 @@
                 // 3. 設定 Context
                 canvasCtx = canvas.getContext('2d');
-                canvasCtx.lineWidth = 5;
                 canvasCtx.lineCap = 'round';
                 canvasCtx.lineJoin = 'round';
                 canvasCtx.strokeStyle = '#000000';
@@ -1032,67 +1036,91 @@
                 canvasCtx.stroke();
             }
-            // [修正] 辨識手寫 (呼叫 Google API) - 修正 INVALID_INPUT_METHOD_NAME
             async function recognizeHandwriting() {
                 if (currentStrokes.length === 0) {
                     showToast("請先手寫內容！");
                     return;
                 }
-                hwRecognizeBtn.disabled = true;
-                hwRecognizeBtn.textContent = "辨識中...";
-                const canvas = document.getElementById('handwriting-canvas');
-                const width = canvas.width;
-                const height = canvas.height;
-                // [修正] 移除 language 欄位，避免參數衝突
-                const payload = {
-                    "options": "enable_pre_space",
-                    "requests": [{
-                        "writing_guide": {
-                            "writing_area_width": width,
-                            "writing_area_height": height
-                        },
-                        "ink": currentStrokes
-                    }]
-                };
                 try {
-                    // [修正] 改用最通用的 www.google.com 端點，並將 app 參數改為 translate
-                    const response = await fetch('https://www.google.com/inputtools/request?itc=en-t-i0-handwriting&app=translate', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(payload)
-                    });
-                    const result = await response.json();
-                    // 解析回傳資料: ["SUCCESS", [[["candidate1", ...], ...]]]
-                    if (result[0] === 'SUCCESS' && result[1] && result[1][0] && result[1][0][1]) {
-                        const candidates = result[1][0][1];
-                        // 1. 填入第一個候選字
-                        answerInput.value = candidates[0];
-                        // 2. 顯示候選字列
-                        showCandidates(candidates);
-                        // 視覺回饋
                         answerInput.classList.add('border-green-500', 'bg-green-50');
                         setTimeout(() => answerInput.classList.remove('border-green-500', 'bg-green-50'), 500);
                     } else {
-                        console.warn("API 回傳格式不如預期", result);
-                        if(result[0] === 'INVALID_INPUT_METHOD_NAME') {
-                             showToast("API 錯誤：輸入法名稱無效，請確認網路環境或稍後再試。");
-                        }
                     }
                 } catch (error) {
-                    console.error("手寫辨識失敗:", error);
-                    showToast("辨識失敗，請檢查網路連線。");
                 } finally {
                     hwRecognizeBtn.disabled = false;
-                    hwRecognizeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> 辨識輸入`;
                 }
             }
@@ -1137,12 +1165,18 @@
                     // [關鍵] 延遲時間設為 400ms，配合 CSS transition
                     setTimeout(() => initHandwritingBoard(), 400);
-                    // 3. 鎖定輸入框
                     answerInput.readOnly = true;
                     answerInput.placeholder = "請在下方手寫英文...";
                     answerInput.classList.add('handwriting-mode');
-                    // 4. 嘗試讓輸入框失去焦點，避免鍵盤彈出
                     if (document.activeElement === answerInput) {
                         answerInput.blur();
                     }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>單字閃卡 (TrOCR AI 版)</title>
     <!-- 載入 Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- 載入彩帶效果庫 -->
                         </button>
                         <button id="hw-recognize-btn" class="flex-[2] py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 shadow-md transition-colors flex items-center justify-center gap-1">
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
+                            辨識 (TrOCR AI)
                         </button>
                     </div>
                 </div>
         let currentStrokes = []; // 存放所有筆畫: [ [[x], [y], [t]], [[x], [y], [t]], ... ]
         let currentStroke = {x: [], y: [], t: []}; // 暫存當前筆畫
         let canvasCtx = null;
+        // [新增] TrOCR 相關變數
+        let ocrPipeline = null; // 存放載入好的模型
+        let isModelLoading = false;
         document.addEventListener('DOMContentLoaded', () => {
             // DOM 元素
                 // 3. 設定 Context
                 canvasCtx = canvas.getContext('2d');
+                canvasCtx.lineWidth = 10; // [修改] 增加線條寬度以利 OCR 辨識
                 canvasCtx.lineCap = 'round';
                 canvasCtx.lineJoin = 'round';
                 canvasCtx.strokeStyle = '#000000';
                 canvasCtx.stroke();
             }
+            // [新增] 載入 TrOCR AI 模型 (使用 dynamic import)
+            async function initOCR() {
+                if (ocrPipeline) return; // 已載入
+                if (isModelLoading) return; // 載入中
+                isModelLoading = true;
+                showToast("正在下載 AI 手寫模型 (首次需約 200MB)...");
+                try {
+                    // 使用動態導入載入 Transformers.js
+                    const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2');
+                    // 設定環境：不使用本地模型 (因為是網頁版)，強制使用 Browser Cache
+                    env.allowLocalModels = false;
+                    env.useBrowserCache = true;
+                    // 載入 TrOCR 模型 (手寫文字辨識)
+                    // Xenova/trocr-small-handwritten 是量化後的版本，適合瀏覽器
+                    ocrPipeline = await pipeline('image-to-text', 'Xenova/trocr-small-handwritten', {
+                        progress_callback: (data) => {
+                            if (data.status === 'progress') {
+                                console.log(`Model loading: ${Math.round(data.progress || 0)}%`);
+                            }
+                        }
+                    });
+                    showToast("AI 模型載入完成！");
+                    isModelLoading = false;
+                } catch (error) {
+                    console.error("AI 模型載入失敗:", error);
+                    showToast("模型載入失敗，請檢查網路連線");
+                    isModelLoading = false;
+                }
+            }
+            // [修正] 辨識手寫 (改用 TrOCR)
             async function recognizeHandwriting() {
+                // 1. 檢查是否有筆跡
                 if (currentStrokes.length === 0) {
                     showToast("請先手寫內容！");
                     return;
                 }
+                // 2. 確保模型已載入
+                if (!ocrPipeline) {
+                    await initOCR();
+                    if (!ocrPipeline) return; // 載入失敗
+                }
+                hwRecognizeBtn.disabled = true;
+                hwRecognizeBtn.textContent = "AI 辨識中...";
                 try {
+                    const canvas = document.getElementById('handwriting-canvas');
+                    // 將 Canvas 轉為 Data URL
+                    const imageData = canvas.toDataURL("image/png");
+                    // 呼叫 pipeline 進行辨識
+                    const output = await ocrPipeline(imageData);
+                    // 輸出格式通常是 [{ generated_text: "hello" }]
+                    const text = output[0]?.generated_text?.trim();
+                    if (text) {
+                        // TrOCR 可能會回傳句點，如果是單字練習可以移除
+                        const cleanedText = text.replace(/\.$/, '');
+                        answerInput.value = cleanedText;
                         answerInput.classList.add('border-green-500', 'bg-green-50');
                         setTimeout(() => answerInput.classList.remove('border-green-500', 'bg-green-50'), 500);
+                        showToast("辨識結果：" + cleanedText);
+                        // 也可以把原文當作候選字 (TrOCR 通常只回傳最可能的結果，不像 API 有多個候選)
+                        showCandidates([cleanedText]);
                     } else {
+                        showToast("未能辨識出文字");
                     }
                 } catch (error) {
+                    console.error("AI 辨識失敗:", error);
+                    showToast("辨識發生錯誤: " + error.message);
                 } finally {
                     hwRecognizeBtn.disabled = false;
+                    hwRecognizeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> 辨識 (TrOCR)`;
                 }
             }
                     // [關鍵] 延遲時間設為 400ms，配合 CSS transition
                     setTimeout(() => initHandwritingBoard(), 400);
+                    // 3. 觸發模型預載 (Lazy Load)
+                    // 當使用者切換到英文輸入模式時，就開始在背景下載模型
+                    if (!ocrPipeline && !isModelLoading) {
+                        initOCR();
+                    }
+                    // 4. 鎖定輸入框
                     answerInput.readOnly = true;
                     answerInput.placeholder = "請在下方手寫英文...";
                     answerInput.classList.add('handwriting-mode');
+                    // 5. 嘗試讓輸入框失去焦點，避免鍵盤彈出
                     if (document.activeElement === answerInput) {
                         answerInput.blur();
                     }