前端 危！！！ 這個專案可以一鍵圖片轉程式碼

前端web3發表於2024-06-06
前端

這段時間來，AI已經逐步走進我們的工作和生活，作為程式設計師來說，讓AI寫程式碼已經成為稀鬆平常的操作了，今天給大家介紹一個更牛逼的操作，螢幕截圖轉化為程式碼，從此前端開發更簡單

screenshot-to-code

screenshot-to-code可以將任何螢幕截圖或設計轉換為乾淨的程式碼，它是一個簡單的工具，使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。

目前已經有47K start的收藏了

支援的技術棧

  • HTML + Tailwind
  • React + Tailwind
  • Vue + Tailwind
  • Bootstrap
  • Ionic + Tailwind
  • SVG
  • GPT-4 Vision
  • Claude 3 Sonnet
  • DALL-E 3 for image generation

使用

該應用程式有一個 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 to backend/.env

前端

cd frontend
yarn
yarn dev

開啟 http://localhost:5173 可以訪問

藉助GPT-4 Vision的突破效能力，Screenshot to Code 讓人看到一種全新的開發模式，只需點選幾下滑鼠，它就能將以前密集的手動流程自動化。

專案提供了一個線上環境，可以直接上傳圖片並執行

相關文章