大傢好，我是開源探索者，持續分享開源項目，關註技術的最新動態，分享自己的經驗和見解。

大傢好，我是開源探索者。

今天給大傢介紹一個非常牛的開源項目：Screenshot-to-code。

Screenshot-to-code 是一個可以將屏幕截圖轉化為 HTML/JS/Tailwind CSS 代碼的工具。它利用 GPT-4 Vision 生成代碼，結合 DALL-E 3 生成相似的圖片。

項目特性

1、屏幕截圖即代碼

能夠將屏幕截圖瞬間轉變為可運行的代碼。這意味著，你隻需要截取一個網頁或應用程序的截圖，Screenshot-to-code 就可以自動生成對應的 HTML、CSS、JavaScript 代碼。

這項功能對於初學者來說非常友好，可以幫助快速學習前端開發。對於經驗豐富的開發人員來說，也可以節省大量的時間和精力。

項目利用最新的 GPT-4 Vision 技術，可以生成高度智能化的代碼，能夠幫助我們更好地理解屏幕截圖中的元素，並生成更加貼近設計意圖的代碼。

可以結合 DALL-E 3 技術生成相似的圖片，我們可以使用 Screenshot-to-code 生成一個網頁或應用程序的截圖，然後使用 DALL-E 3 生成一個相似的圖片。

這項功能可以讓我們的頁面呈現更加豐富多彩、獨具特色。

一個例子

Screenshot-to-code 的使用很簡單，官方給了很詳細的說明。

使用前提是有一個能夠訪問 GPT-4 Vision API 的 OpenAI API 密鑰。

接著按照下面的步驟：

1、下載 Screenshot-to-code 的源代碼。

2、在 backend/.env 文件中添加你的 OpenAI API 密鑰。

3、使用 poetry install 安裝依賴項。

4、使用 poetry run uvicorn main:app --reload --port 700運行後端。（如果您希望在不同端口上運行後端，可以修改文件 VITE_WS_BACKEND_URLfrontend/.env.local）

5、使用 yarn 安裝前端依賴項。

6、使用 yarn dev 運行前端。

7、打開瀏覽器，訪問 http://localhost:5173 即可使用。

如果你安裝了Docker，也可以用下面的命令快速開始：

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

當然，如果你也不想這麼麻煩，官方提供了一個在線的版本供體驗使用

https://screenshottocode.com

目前 Screenshot-to-code 項目依然還在開發更新中，已經取得了令人印象深刻的進展。未來，Screenshot-to-code 會在支持更多的語言和框架、提高生成代碼的準確性和效率、增加更多功能，例如代碼片段共享和代碼編輯器集成等方面進行提示。

開源君有一種感覺，Screenshot-to-code 有可能會成為未來前端開發的必備工具。

關於項目的更多細節，感興趣的同學可以自行去項目地址查看。

項目地址：
https://github.com/abi/screenshot-to-code

在數字時代的浪潮中，有一群人他們不畏艱難，勇攀技術高峰，他們就是開源探索者。他們不僅僅是技術的實踐者，更是開源文化的傳播者和推動者。

在開源的世界裡，沒有絕對的權威，隻有共同的合作。