逐字稿文字預覽
你有沒有遇過這種情況 設計稿看起來很清楚 但真的要把它切成可以跑的網頁 又是另一件事 screenshot-to-code 想解的就是把一張截圖變成可以跑的 網頁原型 真正痛的是時間 Demo前一天要補頁面 舊系統要重做UI 設計師想看互動版本 工程師卻還卡在第一版切版 這種時候 先有一個可改的原型 比從空白檔案開始好很多 screenshot-to-code 的定位很直白 你丟截圖 mockup Figma設計稿 甚至螢幕錄影 它嘗試輸出前端程式 它支援HTML Tailwind React Vue也支援Bootstrap和 Ionic這類常見stack 流程大概是先看畫面 判斷版面 文字圖片和元件 再把它寫成程式 新版本很重視真素材 像logo 照片icon 如果能從截圖裡抓出來 就盡量保留 不是全部重畫成假的 背後可以接Gemini GPT Claude README也特別建議Gemini 因為它對截圖理解和素材擷取比較關 鍵Replicate則負責圖片編 輯去背和生成 換句話說 這不是單一模型秀肌肉 而是一條把多個能力接起來的工作流 它也能吃螢幕錄影 這點很有意思 因為很多產品畫面不是靜態的 按鈕點下去 tab切換 modal彈出 才是使用者真正感受到的UI 如果要本機跑 架構是React加Vite前端 搭配FastAPI後端 至少要準備一組模型金鑰 OpenAI Anthropic或Gemini 其中之一都可以 如果想要更完整的圖片處理 Replicate也要設定 可選的screenshot preview 是另一個重點 工具可以把自己產出的頁面丟進Chromium 截圖讓agent回頭看結果像不像 這一步不會保證完美 但比只相信文字輸出可靠很多 它適合三種場景 做landing page草稿 把舊畫面快速翻成新版 或讓設計和工程在會議前先看到互動 原型你不一定要直接把產物上線 但你可以少花很多時間在第一版 但它不是魔法 截圖裡的小字 陰影間距 響應式狀態 還有真正的資料流 都可能需要人修 QA要看三件事 畫面是不是像 互動是不是對 程式是不是能長期維護 開源的好處是你可以自架 也可以改提示詞 換模型加自己的設計系統 成本也要算 模型越強 畫面越可能接近 但速度和費用通常也會上去 另外別把敏感畫面直接丟進去 內部後台 客戶資料 金鑰未公開設計 都要先遮掉 AI工具越方便 資料邊界越要自己守住 對工程師來說 這是省掉第一版草稿時間的工具 對設計師來說 它可以把看起來像更快推到點起來像 我會把它放在團隊流程的前段 截圖進來 原型出來 接著才是人工整理 測試和重構 真正交付前還是要跑起來 看錯誤改狀態 補可及性 可是如果你的任務是先把UI想法變 成能討論的東西 screenshot-to-code 已經很接近那個入口 所以這個專案值得看 不是因為它讓工程師消失 而是它把第一版畫面這件事變得便宜 很多我的結論很簡單 快但要有QA 省時間但不要省檢查 如果你想看更多像這樣的開源工具 我會繼續在Github雷達幫你拆 解喜歡這種題材 記得訂閱 我們下一支影片見
本次執行流程與問題處理
下達指令
預期流程
- 採用來源字幕（略過語音辨識）
- 來源選擇與品質檢查
- 文字校正與句子單元
- 筆記與發布
- 公開網頁發布
1. 下載與語音辨識
工具：videonote-transcribe-url（主辨識管線：下載、Whisper 辨識與選稿）
處理：下載音訊、以 Whisper 辨識並選出最佳逐字稿
產出：yt_dlp_meta.json（影片元資料）、audio_16k_mono.wav（16kHz 單聲道音訊）、transcript.whisper.json（Whisper 辨識結果）、transcript.json（正式逐字稿）、transcript_selection_report.json（來源選擇報告）
耗時：620.9 秒
關係：依序執行
結果：完成
2. 全文快速校讀
工具：videonote_rapid_transcript_review.py
處理：先速讀完整逐字稿，再修正高可信突兀詞句並列出待確認項目
產出：rapid_transcript_review_report.json（產出檔案）
耗時：38.2 秒
關係：依序執行
結果：完成
3. 建立句子單元
工具：videonote-build-sentence-units
處理：將逐字稿切成帶時間軸的句子單元
產出：sentence_units.json（句子單元）
耗時：0.3 秒
關係：依序執行
結果：完成
4. 時間軸稽核
工具：videonote_timeline_audit.py
處理：檢查時間軸與音訊對齊
產出：timeline_audit_report.json（時間軸稽核）
耗時：0.3 秒
關係：依序執行
結果：完成
5. 品質檢查
工具：videonote_controlled_quality.py（檢查時間軸與品質）
處理：檢查語言、時間軸與可讀性品質
產出：controlled_quality_report.json（品質報告）、language_sanity_report.json（語言檢查）
耗時：0.4 秒
關係：依序執行
結果：完成
6. 播放時間軸回填
工具：videonote_rebase_display_timeline.py
處理：將網頁播放時間軸回填為校正字幕時間
產出：display_timeline_rebase_report.json（時間軸回填報告）
耗時：0.4 秒
關係：依序執行
結果：完成
7. 來源句整理
工具：videonote_prepare_source_entries.py
處理：整理來源句子供時間軸與頁面使用
產出：sentence_units.json（句子單元）
耗時：0.4 秒
關係：依序執行
結果：完成
8. 生成筆記摘要
工具：videonote-generate-note（生成筆記摘要）
處理：生成筆記摘要與重點
產出：note.md（筆記 Markdown）、note.html（筆記 HTML）
耗時：67.8 秒
關係：依序執行
結果：完成
9. 建立筆記頁面
工具：videonote-render-html（產生筆記 HTML）
處理：產生可閱讀的筆記 HTML 頁面
產出：note.html（筆記 HTML）
耗時：0.9 秒
關係：依序執行
結果：完成
10. 發布公開頁面
工具：videonote-publish（發布公開頁面）
處理：發布到公開網站與每日列表
產出：公開筆記網址、result.json（管線結果）
耗時：0.9 秒
關係：依序執行
結果：完成
手動來源字幕
自動來源字幕
Whisper 字幕
- 尚未產生
Qwen 字幕
- 尚未產生
Parakeet 字幕
- 尚未產生
MOSS 字幕
- 尚未產生
聲學時間證據（PyAnnote / WhisperX）
- 尚未產生
校正前後逐字稿
- 校正前 transcript.source.json 純文字 JSON
- 校正後 transcript.json 純文字 JSON
目前待解決問題與初步改善方向
- 逐字稿全文快速校讀未完成
已保留自動字幕/原始逐字稿並繼續生成筆記。；未完成的全文速讀項目可在精進模式回聽確認。；RAPID_REVIEW_STATUS=REVIEW_REQUIRED_INVALID_OUTPUT
- Qwen3-ASR 未完成，需確認 qwen_asr_lab 環境與音訊後重試精進模式。
- 音訊下載不穩定，需更新 cookies / PO token 後重試精進模式。