Show HN: GPT Vision（OSSツール）を使ってスクリーンショットを整ったHTMLコードに変換
(github.com/abi)スクリーンショットをコードに変換するアプリ
- スクリーンショットをHTML/Tailwind CSSに変換するシンプルなアプリ
- GPT-4 Visionを使ってコードを生成し、DALL-E 3で似た画像を生成
- デモを見るには以下のサンプルセクションを参照
更新履歴
- 画像生成が不要な場合にDALL-E画像生成を無効化する設定を追加
- アプリ内で直接コードを確認可能
- AIがスタイルを誤って適用したり、セクションを見落とした場合にコードの更新を指示可能
はじめに
- React/ViteフロントエンドとFastAPIバックエンドで構成されたアプリ
- GPT-4 Vision APIにアクセスできるOpenAI APIキーが必要
- バックエンドとフロントエンドの実行方法を提供しており、ローカルでアプリを利用可能
よくある質問（FAQ）
- バックエンド設定中にエラーが発生した場合の解決方法を案内
- GPT-4 Visionモデルを含むOpenAI APIキーの取得方法を案内
- フィードバック、機能リクエスト、バグ報告の方法を案内
サンプル
- NYTimes、Instagramページ、Hacker Newsなどの原本と複製例を提供
ホスティング版
- OpenAIキーを持っており、GPT-4 Visionにアクセスできる必要あり
- はじめにセクションでローカルインストール手順を確認可能
GN⁺の意見
このアプリは、スクリーンショットをWebコードに変換する革新的なツールであり、最新のAI技術であるGPT-4 VisionとDALL-E 3を活用している点が最も重要。Web開発者やデザイナーにとって時間を節約し、より創造的な作業に集中できる機会を提供するため、興味深く魅力的。また、ユーザーがAIに直接指示してコードを修正できる機能は、ユーザー体験を改善し、AIの精度向上にも寄与する。
1件のコメント
Hacker News のコメント
この技術はまるで魔法のように感じられ、ニューラルネットワークが入力を出力に写像する関数の集合をモデル化するという概念は理解しているものの、GPTが画像をHTML+Tailwindのテキストトークンに写像し、ブラウザがそれをレンダリングする過程までモデル化しているのは驚きだという意見。
このツールをダイアグラムコンパイラと考えられるか、SketchやFigmaのようなツールで生成されたアーティファクトをHTML/CSS/JSに変換するビルドパイプラインの一部になり得るかという質問。
Tailwind、HTML、JSを使って、ユーザーが提供したWebページのスクリーンショットをもとにシングルページアプリを構築するプロンプトの例と、デザインを正確に複製することを強調する指示。
防御的プロンプティング以外の方法のほうがより良い方向かもしれないが、この技術が実際に動作すること自体が驚きだという個人的な意見。
「私のキャリアに非常に重要だ」という文言を追加すると出力品質が向上するというYouTubeの研究動画に言及し、この文言がさまざまな作業の出力品質を改善するという意見。
この技術によって解決可能な問題の範囲が広がり、何を作るべきかを考えさせられるとともに、問題を別の見方で捉えて解決する必要があるのではないかという考え。
汎用モデルを使ってこの作業を行うのは驚くべきことだが、教師あり学習用のデータは簡単に生成できるという意見。
GitHub Pagesを通じてPicoによるホスティング版を提供する予定だという情報と、なぜPicoを選んだのかという質問。
生成されたWebサイトのデモを
iframeのsrcdocを使ってリアルタイムで表示する方法が、シンプルでエレガントだという称賛。既存のWebサイトをコピーしたい場合、Httrackを使うほうがより似た結果を得られ、GPT APIのコストも節約できるという意見。
フィッシングサイトの作成がはるかに速くなるのではないかという懸念。
プロジェクトマネージャーの絶えず変わる要求に対応するのにこのツールは完璧であり、「Make it pop」のような曖昧な入力でも動作するのかという質問。