スクリーンショットをコードに変換 - AIを使用してスクリーンショットをウェブページのコードに変換するオープンソースプロジェクト。

スクリーンショットからコードへの変換とは何ですか？

Screenshot to Codeは、人工知能技術（GPT-4VとDALL-E 3）を用いてユーザーのスクリーンショットをフロントエンドのWebページコードに変換するオープンソースプロジェクトです。GitHubではすでに34,000個のスターを獲得しています。このプロジェクトの中核となる機能は、Webページデザインのコーディングプロセスを自動化することです。開発者はWebページのスクリーンショットを提供することで、対応するHTML、CSS、JavaScriptコードを迅速に生成でき、フロントエンド開発者の時間と労力を節約できます。

公式サイトの入り口：https://screenshottocode.com/

GitHubリポジトリ:https://github.com/abi/screenshot-to-code

Screenshot to Codeの主な機能

• インテリジェントなコード生成このプロジェクトは、GPT-4 Visionモデルを使用することで、ユーザーから提供されたスクリーンショットを分析し、対応するHTML、CSS、JavaScriptコードを自動的に生成し、デザイン案を実行可能なウェブページコードに迅速に変換することができます。
• 類似画像生成このプロジェクトには、DALL-E 3の画像生成機能も組み込まれており、生成されたHTMLコード内の<img>タグに基づいて元のスクリーンショットに似た画像を自動的に作成し、これらの画像をウェブページに埋め込むことで視覚的な一貫性を維持することができます。
• リアルタイムのコード更新ユーザーはアプリケーション内で生成されたコードをリアルタイムで確認でき、AIと対話することでスタイルを調整したり、コードの不足部分を更新したりして、特定のデザイン要件を満たすことができます。
• 柔軟な構成オプションこのアプリケーションは、ユーザーが使用するフロントエンド技術（HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwindなど）を選択したり、DALL-Eの画像生成および機能を有効にするかどうかを選択したりできる設定オプションを提供します。
• URLウェブページのクローン作成スクリーンショットを手動でアップロードするだけでなく、URLを入力することで自動的にスクリーンショットを撮影し、オンラインウェブサイトを複製することもできます。
• 生成されたコードを編集するScreenshot to Codeには、開発者が生成されたコードを修正したり、出力を微調整したり、エラーを修正したり、独自のコーディングスタイルを追加したりできる組み込みのコードエディタが含まれています。
• プレビューとコードのエクスポートこのツールはリアルタイムプレビュー機能を備えており、ユーザーは編集や変更の効果をリアルタイムで確認できるほか、最終コードのダウンロードやコピーにも対応しています。
• ローカル展開をサポートユーザーは、プロジェクトをローカルコンピュータにデプロイして自分のコンピュータ上で実行することを選択できるため、ローカル環境でツールを使用したいユーザーにとって便利です。

スクリーンショットを使ってコードを作成する方法

方法1：オンラインホスト版でスクリーンショットからコードを作成する

1. Screenshot to Codeの公式サイト（screenshottocode.com）にアクセスして、登録／ログインしてください。
2. 左側の設定アイコンをクリックし、OpenAI APIキーを入力してください。
3. 生成したいコードで使用されているテクノロジー／フレームワークを選択し、スクリーンショットをアップロードまたは貼り付けてください。
4. 識別とコード生成を待っています。生成されたコードは更新、変更、ダウンロードが可能です。

方法2：Screenshot to Codeのローカル展開と実行

1. GitHubリポジトリをローカルコンピュータにクローンする：git clone https://github.com/abi/screenshot-to-code.git
2.  バックエンドとAPIキーを設定します。
   1. Poetryパッケージマネージャーをインストールしてください。pip install poetry
   2. プロジェクトのバックエンドディレクトリに移動します。cd backend
   3. OpenAI APIキーの設定：echo "OPENAI_API_KEY=your-key" > .env
   4. バックエンドの依存関係をインストールします: 実行poetry installこのコマンドは、すべてのPython依存関係をインストールします。
   5. バックエンドサーバーを起動します。poetry run uvicorn main:app --reload --port 7001
3. フロントエンドの依存関係をインストールします。cd frontendフロントエンドディレクトリに切り替えてから、以下を使用してください...yarn依存関係をインストールして使用するyarn devコマンド実行
4. ブラウザを使用してアプリケーションにアクセスしてください：任意のブラウザを使用してくださいhttp://localhost:5173今すぐスクリーンショットからコードを作成する機能を使い始めることができます。

コード製品の価格のスクリーンショット

• 無料版：Screenshot to Codeは、ユーザーがローカル環境にデプロイしたり、独自のOpenAI APIキーを入力して公式のオンラインホスト版を使用したりできる、無料のオープンソース版を提供しています。
• 有料版：APIキーをお持ちでないユーザー向けに、Screenshot to Codeの公式ホスト版では有料サブスクリプション版も提供しています。Hobbyプランは月額15ドル（月間100クレジット）、Proプランは月額40ドル（月間300クレジット）です。年間契約の場合は2ヶ月無料となります。

よくある質問