希望 AI 生成圖片辨識功能所需的 GPT 指令

日期：

 


希望 AI 生成圖片辨識功能所需的 GPT 指令

如果要讓 AI 生成這個 圖片文字辨識應用程式（OCR），可以使用以下指令：

指令範例

請幫我建立一個 **圖片文字辨識（OCR）應用程式**，並使用 **Tesseract.js** 來進行圖片中文字辨識。

### **功能需求**
1. **使用 HTML、CSS 和 JavaScript**
   - **HTML** 應包含：
     - **圖片上傳功能**
     - **圖片預覽**
     - **語言選擇（繁體中文、簡體中文、英文、日文、韓文）**
     - **辨識結果顯示區塊**
   - **CSS** 設計簡潔美觀，確保適應不同螢幕尺寸。

2. **使用 Tesseract.js 進行 OCR**
   - 當使用者上傳圖片時：
     1. 顯示圖片預覽
     2. 自動開始 **文字辨識**
     3. 根據 **選擇的語言** 進行 OCR
     4. 將 **辨識結果顯示** 在網頁上
   - 支援語言：
     - 繁體中文 (`chi_tra`)
     - 簡體中文 (`chi_sim`)
     - 英文 (`eng`)
     - 日文 (`jpn`)
     - 韓文 (`kor`)

3. **錯誤處理**
   - 若圖片格式不支援或上傳失敗，應顯示錯誤訊息。
   - 若辨識失敗，應顯示「辨識失敗，請嘗試其他圖片」。

4. **最佳化**
   - 使用 `FileReader` **預覽圖片**
   - 使用 **Tesseract.js 的 logger** 來顯示辨識進度
   - **適應行動裝置與桌面端**

請提供完整的 **HTML、CSS 和 JavaScript 程式碼**，確保可直接在瀏覽器執行。

關鍵 Prompt 拆解

  1. 描述應用程式的目標

    • 「建立圖片文字辨識（OCR）應用程式」
    • 使用 Tesseract.js 來辨識圖片中的文字
    • 支援多國語言（繁中、簡中、英文、日文、韓文）

  2. 功能需求

    • HTML 介面
      • 圖片上傳
      • 圖片預覽
      • 語言選擇
      • 辨識結果顯示
    • 使用 Tesseract.js 進行 OCR
    • 錯誤處理機制
    • 適應行動裝置

  3. 請求完整的程式碼

    • HTML 結構
    • CSS 美化
    • JavaScript 綁定事件
    • Tesseract.js 的使用方式

最佳化 Prompt 建議

如果想讓 AI 產出的程式碼更加完整，可以進一步補充：

  • 提升辨識速度 
    優化圖片處理，例如調整圖片大小或灰階化，以加快 OCR 速度。
  • 支援多張圖片辨識 
    允許使用者一次上傳多張圖片，並批次進行 OCR。
  • 加入翻譯功能 
    將辨識出的文字自動翻譯成使用者指定的語言（使用 Google Translate API）。
  • 加入語音朗讀 
    使用 Web Speech API 讓辨識結果可以朗讀出來。

結論

  1. 關鍵 API：

    • Tesseract.js 來進行 OCR
    • FileReader API 來預覽圖片
    • HTML + JavaScript 來處理圖片上傳與辨識

  2. 關鍵 Prompt：

    • 「建立 OCR 應用程式，支援圖片文字辨識與語言選擇」
    • 請 AI 提供完整的 HTML、CSS、JavaScript 程式碼
    • 確保錯誤處理、使用者體驗優化

  3. 最佳 Prompt 設計

    • 讓 AI 一次產生完整的應用程式
    • 確保 UI 簡潔、適應行動裝置
    • 要求錯誤處理與多國語言支援

這樣 GPT 生成的程式碼就會符合你的需求！🚀