draw a ui

繪畫

這是一個使用TLDRAW和GPT-4-Vision API的應用程序來基於繪製的線框生成HTML。

我目前正在製作託管版的託管版。您可以在draw-a-ui.com上加入候補名單。它的核心將始終是開源的，在這裡可用。

這可以通過將當前的Canvas SVG，將其轉換為PNG，然後將PNG發送到GPT-4-Vision，並帶有指令將其發送到GPT-4-Vision，以返回帶有尾風的單個HTML文件。

免責聲明：這是一個演示，不打算用於生產。它沒有任何驗證，因此如果您部署它，您將破產。

入門

這是一個spap。開始在項目的根目錄中運行以下命令。您將需要一個訪問GPT-4 Vision API的OpenAI API鍵。

請注意，這使用Next.js 14，並且需要一個大於18.17的node版本。在這裡閱讀更多。

 echo " OPENAI_API_KEY=sk-your-key " > .env.local
npm install
npm run dev

打開http：// localhost：3000使用瀏覽器查看結果。