個簡單的工具，可使用 AI 將屏幕截圖、模型和 Figma 設計轉換為干凈、實用的代碼。

支持的堆棧：

• HTML + Tailwind
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

支持的AI模型：

• GPT-4 Turbo (Apr 2024) - Best model
• GPT-4 Vision (Nov 2023) - Good model that's better than GPT-4 Turbo on some inputs
• Claude 3 Sonnet - Faster, and on par or better than GPT-4 vision for many inputs
• DALL-E 3 for image generation

有關更多演示，請參閱下面的示例部分。

https://screenshottocode.com/

我們還剛剛添加了實驗性支持，用于拍攝正在運行的網站的視頻/屏幕記錄并將其轉變為功能原型。

開始使用

該應用程序有一個 React/Vite 前端和一個 FastAPI 后端。如果您想使用 Claude Sonnet 或獲得實驗視頻支持，您將需要一個能夠訪問 GPT-4 Vision API 的 OpenAI API 密鑰或一個 Anthropic 密鑰。

運行后端（我使用 Poetry 進行包管理 -pip install poetry如果你沒有它）：

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

如果您想使用 Anthropic，請將與您的 Anthropic 的 API 密鑰一起ANTHROPIC_API_KEY添加。backend/.env

運行前端：

cd frontend
yarn
yarn dev

打開http://localhost:5173以使用該應用程序。

如果您希望在不同端口上運行后端，請更新 VITE_WS_BACKEND_URLfrontend/.env.local

出于調試目的，如果您不想浪費 GPT4-Vision 積分，您可以在模擬模式下運行后端（該模式會傳輸預先錄制的響應）：

MOCK=true poetry run uvicorn main:app --reload --port 7001

Docker

如果您的系統上安裝了 Docker，請在根目錄中運行：

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

該應用程序將在http://localhost:5173啟動并運行。請注意，您無法使用此設置開發應用程序，因為文件更改不會觸發重建。

?♂? 常見問題解答

• 我在設置后端時遇到錯誤。我該如何修復它？ 嘗試這個。如果仍然不起作用，請提出問題。
• 如何獲取 OpenAI API 密鑰？請參閱https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
• 如何配置 OpenAI 代理？- 如果您無法直接訪問 OpenAI API（例如由于國家/地區限制），您可以嘗試使用 VPN，或者您可以配置 OpenAI 基本 URL 以使用代理：在backend/.env或直接在 UI 中設置 OPENAI_BASE_URL設置對話框。確保 URL 的路徑中包含“v1”，因此它應如下所示： https://xxx.xxxxx.xxx/v1
• 如何更新前端連接的后端主機？- 在 front/.env.local 中配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL 例如設置 VITE_HTTP_BACKEND_URL= http://124.10.20.1:7001
• 運行后端時看到 UTF-8 錯誤？- 在 Windows 上，使用 notepad++ 打開 .env 文件，然后轉到編碼并選擇 UTF-8。

些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。

花了一點時間研究了一下各家的編輯器，規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進，或者丟失顏色樣式。

所以，這就難了。先得找個支持代碼高亮的編輯器，仔細地選擇并復制代碼塊，復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。

因為瀏覽器操作系統剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。

先看軟件成品演示：

軟件用法：

1、輸入編程語言名稱（支持自動完成）。

2、然后在輸入框中粘貼要轉換的編程代碼。

3、點擊「復制高亮代碼塊」按鈕。

然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

下面是這個軟件的 aardio 源代碼：

import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.webCtrl);

import win.clip.html;
wb.export({ 
    onHighlight = function(html,background,foreground){
        html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
            + html + `</code></pre>`;

        html,count = string.replace(html,'\n',"<br>");
        if(!count){
            html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
        }
        var cb = win.clip.html();
        cb.write(html); 

        winform.setTimeout( 
            function(){
                winform.editCode.show(true);
                winform.webCtrl.show(false);
                winform.text = "HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板，可在網頁直接粘貼";
            },1000); 
    };
    setLanguages = function(langs){
        winform.languages = langs;
    }  
})


winform.cmbLangs.onEditChange = function(){ 

    var text = string.lower(winform.cmbLangs.text);
    var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
    winform.cmbLangs.autoComplete(items);  
}
winform.cmbLangs.editBox.disableInputMethod();

import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer(); 
httpServer.run(web.prism,{
    ["/index.html"] = /*****
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> 
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
    <script src="prism.js"></script>
    <script>
   function computedColorStyle(element, options = {}) {

        Array.prototype.forEach.call(element.children,child => {
            computedColorStyle(child, options);
        });

        const computedStyle = getComputedStyle(element);
        element.style["color"] = computedStyle.getPropertyValue("color");  
    }

    highlight = function(code,language){
        var html = Prism.highlight(code, Prism.languages[language], language);

        var codeEle = document.getElementById("code");
        codeEle.innerHTML = html;
        computedColorStyle(codeEle);

        const computedStyle = getComputedStyle(codeEle);  
        onHighlight(codeEle.innerHTML
            ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
            ,computedStyle.getPropertyValue("color"));
    }

    setLanguages( Object.keys(Prism.languages) );
    </script>
  </body> 
</html> 
    *****/
});

wb.go( httpServer.getUrl("/index.html"));

winform.button.oncommand = function(id,event){
    winform.text = "HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
    winform.editCode.show(false);
    winform.webCtrl.show(true);

    wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}


winform.show();
win.loopMessage();

打開 aardio 創建工程，然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：

這個軟件的原理：

1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js （ 支持生成獨立 EXE ），我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發獨立 EXE 程序

2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。

3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊，aardio 的任務是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板：

import win.clip.html;

var cb = win.clip.html();
cb.write(html); 

然后只要愉快地粘貼代碼塊就可以。

如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『 復制全部到 HTML 代碼塊 』就可以了：