スクリーンショットからコードへ — code-from-screenshot

AI/ML
スクリーンショットからコードへ — code-from-screenshot

スクリーンショットからコードへ — code-from-screenshot

このリポジトリは、スクリーンショットやURLから自動的にフロントエンドのコードを生成するツールです。GPT‑4 Visionで画像中のレイアウトやテキストを解析し、HTML/Tailwind CSS、React、Vue、Bootstrapなどのコードを出力します。さらにDALL·E 3で類似の画像を生成したり、ライブサイトのクローンを試せる機能を備え、プロトタイピングやデザインのコード化を高速化します。TypeScriptで実装された小規模なプロジェクトです。

https://github.com/scrt7wonder/code-from-screenshot

概要

このリポジトリ（code-from-screenshot）は、スクリーンショット画像やURLを入力すると、視覚系モデルと生成系モデルを組み合わせてフロントエンドのコードを自動生成するアプリケーションです。GPT‑4 Visionを用いて画像内のレイアウトやテキスト、コンポーネント構造を把握し、HTML＋Tailwind CSSやReact/Vue/Bootstrap向けのコードスニペットを出力します。さらにDALL·E 3で類似画像を生成する機能や、ライブサイトのクローンを試作する機能を備えており、迅速なプロトタイピングやデザインの実装支援に向いています。TypeScriptで実装された軽量なコードベースで、OpenAIのAPIキーを利用する形が想定されています。

GitHub

リポジトリの統計情報

  • スター数: 15
  • フォーク数: 0
  • ウォッチャー数: 15
  • コミット数: 30
  • ファイル数: 9
  • メインの言語: TypeScript

主な特徴

  • GPT‑4 Visionで画像を解析し、UI構造をコードに変換
  • HTML/Tailwind CSS、React、Vue、Bootstrap向けのコード出力をサポート
  • DALL·E 3で類似画像（素材）を生成する統合機能
  • スクリーンショットだけでなく、URL入力によるライブサイトのクローン機能

技術的なポイント

本プロジェクトはTypeScriptベースの軽量アプリケーションで、フロントエンド側でスクリーンショットのアップロードやURL入力を受け付け、サーバー側でOpenAIの視覚・生成APIを呼び出すワークフローが中核です。GPT‑4 Visionは画像中のテキスト抽出やレイアウト認識、ボタンや画像といったUI要素の識別に使われ、得られた構造情報をテンプレート化してHTMLやフレームワーク別のコンポーネントに変換します。DALL·E 3は、画像が不足する箇所や代替素材の生成に使われ、結果としてデザインを再現しつつ素材の補完が可能です。出力コードはTailwindなどのユーティリティファーストなCSSや、React/Vueのコンポーネント構造を想定したマークアップが生成されるため、開発者は生成物をベースに手作業で微調整する流れになります。実装上の注意点としては、モデルの出力は必ずしも完璧なレスポンシブ動作やセマンティックな構造を保証しないこと、API呼び出し回数やレイテンシ、コスト管理、そしてアップロード画像の取り扱い（プライバシー・データ保存ポリシー）を設計で考慮する必要がある点が挙げられます。READMEの記載から「Bring your own API key（自身のAPIキーが必要）」となるため、運用時はキー管理とレート制御を実装するのが現実的です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitattributes: file
  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • Troubleshooting.md: file

…他 4 ファイル

まとめ

スクリーンショットから迅速にプロトタイプ用のフロントエンドコードを生成できる実験的ツールです。

リポジトリ情報：

READMEの抜粋：

screenshot-to-code

This simple app converts a screenshot to code (HTML/Tailwind CSS, or React or Vue or Bootstrap). It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website!

https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045

See the Examples section below for more demos.

🚀 Try It Out!

🆕 Try it here (bring your ow…