ScreenCoder: UIのスクリーンショットを編集可能なHTML/CSSコードに変換するツール

ScreenCoderは、ユーザーインターフェース（UI）のスクリーンショットやデザインスケッチを、制作可能なHTMLとCSSコードに変換するために設計されたオープンソースツールです。モジュラー・マルチ・インテリジェンス・フレームワークを使用し、ビジュアル理解、レイアウト計画、コード生成の3つのステップを通して、複雑なデザインを明確に構造化された編集可能なコードに変換します。ScreenCoderは、Doubao、Qwen、GPT、Geminiなど、さまざまな開発ニーズに適した複数の生成モデルをサポートしています。コードはGitHubで公開されており、ユーザーは自由にダウンロード、修正、デプロイすることができます。

機能一覧

• UIのスクリーンショットやデザインスケッチをHTML/CSSコードに変換。
• 視覚認識、レイアウト計画、コード生成の3つのフェーズに分かれたモジュール式のマルチ・インテリジェント・ボディ・フレームワークをサポート。
• 複数の世代モデル（Doubao、Qwen、GPT、Gemini）をサポートしており、ユーザーはニーズに応じて選択できる。
• 開発者が調整をカスタマイズするための編集可能なコード出力を提供します。
• モデルの性能を最適化するための大規模画像とコードのペアの自動生成。
• ラピッドプロトタイピングとピクセル精度のインターフェイス実装をサポートします。

ヘルプの使用

設置プロセス

ScreenCoderを使用するには、まずGitHubリポジトリからコードをダウンロードし、環境を設定する必要があります。以下は、詳細なインストール手順である：

1. クローン倉庫
   ターミナルで次のコマンドを実行し、ScreenCoder プロジェクトをローカルにクローンします：
   「バッシュ
   git clone https://github.com/leigest519/ScreenCoder.git
   CDスクリーンコーダー

2. 仮想環境の構築
   依存関係の衝突を避けるために、Pythonの仮想環境を作成することをお勧めします：
   「バッシュ
   python3 -m venv .venv
   ソース .venv/bin/activate

Windowsユーザー向け：source .venv\Scripts\activate.

3. 依存関係のインストール
   プロジェクトに必要なPythonライブラリをインストールする：
   「バッシュ
   pip install -r requirements.txt

4. 設定モデルとAPIキー
   ScreenCoderは、複数の世代モデル（Doubao、Qwen、GPT、Geminiなど）をサポートしています。ユーザーは、プロジェクトのルートディレクトリに対応するAPIキーファイルを作成する必要があります（たとえばdoubao_api.txtそしてqwen_api.txtetc.）にAPIキーを貼り付ける。
   そしてblock_parsor.py歌で応えるhtml_generator.pyを設定ファイルに追加して、目的のモデルを設定します。例えば、コンフィギュレーションファイルのモデルパラメータを以下のように変更する：
   「パイソン
   model = "Doubao" #またはQwen、GPT。 ジェミニ

使用プロセス

ScreenCoderの操作は以下のステップに分かれており、ユーザーはコマンドラインを通じてUIからコードへの変換を完了することができます：

1. ブロック検出
   うごきだすblock_parsor.py入力されたUIのスクリーンショットを分析し、主要なコンポーネント（ナビゲーション・バー、サイドバー、コンテンツ・エリアなど）を特定するスクリプト。コマンドは以下の通り：
   「バッシュ
   python block_parsor.py

このステップでは、コンポーネントラベルと位置情報を生成し、その後のレイアウトプランニングに備えます。

2. プレースホルダーでコードを生成する
   うごきだすhtml_generator.pyスクリプトは、プレースホルダーを含む最初のHTMLコードを生成する：
   「バッシュ
   python html_generator.py

出力されるコードには、ページ構造と、さらに編集するためのプレースホルダー（灰色の画像ブロックなど）が含まれる。

3. コンテンツマッピングと最終コード生成
   プレースホルダーコードを生成した後、ScreenCoderは、認識されたUIコンポーネントを最終的なHTML/CSSコードにマッピングします。ユーザーは、スタイルとレイアウトが期待に沿うように、必要に応じてコードを手動で調整できます。

注目の機能操作

• 視覚認識（接地剤）
  ScreenCoderの視覚認識モジュールは、視覚言語モデル（VLM）を使用してUIのスクリーンショットを分析し、ボタン、ナビゲーションバー、テキストボックスなどのインターフェイスの主要要素を自動的に検出してタグ付けします。この機能により、生成されるコード構造がデザインと高い整合性を持つことが保証されます。ユーザーはPNGまたはJPG形式のスクリーンショットをアップロードするだけで、システムが自動的に処理し、コンポーネント・ラベルを出力します。
• レイアウト計画（計画代理人）
  レイアウト・プランニング・モジュールは、フロントエンド・エンジニアリングの原則に基づき、特定されたコンポーネントを階層的なページ構造に編成します。例えば、ナビゲーションバーを上部に、サイドバーを左側に、メインコンテンツエリアを中央に配置します。ユーザーが手動でレイアウトを指定する必要はなく、システムが合理的なHTML構造を自動的に生成します。
• コード生成（生成エージェント）
  コード生成モジュールは、適応性のあるプロンプトでHTMLとCSSコードを生成します。生成されたコードはクリーンで、意味的に明確で、最新のウェブ開発標準に準拠しています。ユーザーは、生成後にコードをプロジェクトに直接コピーしたり、必要に応じてスタイルや機能を調整したりできます。

ほら

• 入力画面のスクリーンショットが鮮明で、UI要素が明確に定義されていることを確認し、不鮮明な画像や複雑すぎる画像を避ける。
• APIキーの有効性をチェックし、選択したモデルがAPIから適切に提供されていることを確認する。
• コードを調整する必要がある場合は、コードエディター（VS Codeなど）を使用して、生成後にCSSスタイルをチェックし、最適化することをお勧めします。

以上の手順で、ユーザは素早くデザインを使用可能なウェブコードに変換することができ、ラピッドプロトタイピングや本番環境のデプロイに適しています。

アプリケーションシナリオ

1. ラピッドプロトタイピング
   デザイナーや開発者は、UIデザインをインタラクティブなWebプロトタイプに素早く変換する必要があります。 ScreenCoderは、デザインから開発までの時間を短縮するために、HTML/CSSコードを自動的に生成します。
2. フロントエンド・オートメーション
   ScreenCoderのモジュラーフレームワークは、大規模プロジェクト向けに高精度のコードを提供します。
3. 学習と教育
   プログラミング初心者やフロントエンド開発コースでは、ScreenCoderを使って実際のUIデザインをコード化し、HTML/CSSの構造や書き方を学ぶことができます。
4. クロスプラットフォームのインターフェース開発
   開発者は、複数のプラットフォーム（例えば、ウェブとモバイル）で同じデザインを使用する必要があり、ScreenCoderによって生成されたコードは、異なるデバイスに適応するために微調整を行うための基礎として使用することができます。

品質保証

1. ScreenCoder はどのようなファイル形式をサポートしていますか？
   ScreenCoderは、PNGやJPG形式のUIスクリーンショットやデザインスケッチをサポートしています。最高の変換結果を得るために、画像が鮮明で、UI要素が明確に定義されていることを確認してください。
2. プログラミングの経験は必要ですか？
   深いプログラミングの経験は必要ありませんが、HTML/CSSに詳しいユーザーであれば、生成されたコードをよりよく調整することができます。初心者は生成されたコードを直接使用することができます。
3. モデルの生成はどのように選択するのですか？
   あるblock_parsor.py歌で応えるhtml_generator.pyその中にモデル（例：Doubao、Qwenなど）を設定し、対応するAPIキーを提供する。モデルが異なると、生成速度やコード品質に影響を与える可能性があるので、要件に応じてテストすることをお勧めします。
4. 生成されたコードを手動で調整する必要がありますか？
   生成されたコードは通常すぐに使用できますが、複雑なデザインでは、特定のニーズに合わせてCSSのスタイルやHTML構造を手動で調整する必要がある場合があります。
5. ScreenCoderは無料ですか？
   ScreenCoderはオープンソースプロジェクトであり、コードはGitHubで無料で公開されています。ただし、特定のジェネレーティブモデル（GPT、Geminiなど）を使用するには、自分でAPIキーを取得する必要があり、コストがかかる場合があります。