🌐 中英翻譯與 AI 發音助理（無廣告）

flowchart TD
    INPUT["使用者輸入文字\n<textarea#tr-input>"] --> DETECT{"語言方向判斷\n#tr-src-lang 狀態"}
    DETECT -->|"中 → 英\nlangpair=zh-TW|en"| API
    DETECT -->|"英 → 中\nlangpair=en|zh-TW"| API
    SWAP["⇄ 交換按鈕\n#tr-swap"] -.->|"切換方向\n+ 互換文字"| DETECT

    API["fetch() REST API 呼叫\napi.mymemory.translated.net/get\n?q={text}&langpair={src}|{tgt}\nTry-Catch 錯誤處理"] -->|"HTTP 200\nContent-Type: JSON"| PARSE["JSON 解析\ndata.responseData\n.translatedText"]
    API -->|"HTTP Error\n或 Network Fail"| ERR["❌ 狀態列顯示錯誤\n#tr-status"]

    PARSE --> OUT["填入輸出框\n<textarea#tr-output>"]
    OUT --> SPEAK["🔊 播放發音按鈕\n#tr-speak"]
    SPEAK --> SYNTH["Web Speech API\nwindow.speechSynthesis\nnew SpeechSynthesisUtterance(text)"]
    SYNTH -->|"輸出為英文"| ENVOICE["utterance.lang = 'en-US'\n優先選擇 English voice"]
    SYNTH -->|"輸出為中文"| ZHVOICE["utterance.lang = 'zh-TW'\n優先選擇 Chinese voice"]
    ENVOICE --> PLAY["▶ 瀏覽器朗讀"]
    ZHVOICE --> PLAY

    OUT --> COPY["📋 複製按鈕\nnavigator.clipboard.writeText()\n→ Toast「已複製翻譯結果」"]