Skip to content

OpenAI UI to Code

  • by

致敬 Gemini UI to Code. 

幾個月前曾經用過 Gemini UI to Code,主要功能是用 Gemini AI 去解讀上傳的圖檔,然後根據解讀資料來撰寫出相對應的網頁原始碼。

最近在研究 OpenAI API ,所以就把 Gemini API 改成 OpenAI 相容 API, 這樣子其他的 LLM 模型都可以套用。然後就有現在的成果了。

要測試許多不同的 LLM, 勢必要分別註冊許多不同的 Models, 為了結省測試成本,除了 gemini 是用免費的版本 (不過很快就會用完 tokens), 其他的模型我是用第三方的 https://openrouter.ai/ 去驗證 OpenAI/GPT4o 及 XAI/grok-vision. 雖然是透過第三方 API 轉接,不過因為這個 Prompt 還算單純,我想效果應該不會和直接呼叫原始 API 差太多。

最終的程式碼可在 github 取得。

https://github.com/aitwg/openai-ui2code

執行起來的結果會是如下, 首先要上傳待分析的網頁畫面。

然後按 Code UI 開始分析。

分析完後會產生 index.html ,就可以 Download 了。

以下是用幾個不同的 LLM 產生的網頁結果,僅供參考。

gemini 1.5 pro

gpt4o

xai-grok-vision

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *