Repolode
投稿する
leigest519

leigest519/ScreenCoder

複数のモデルバックエンドに対応したモジュール型マルチエージェントパイプラインで、UIのスクリーンショットやデザインモックアップを編集可能なHTML/CSSに変換します。

GitHub で見る
スター
3,005
フォーク
320
未解決の Issue
16
最終コミット
先月

これは何？

ScreenCoderは、スクリーンショットやデザインモックアップを受け取り、HTML/CSSのフロントエンドコードを生成するUI-to-codeジェネレーターです。ブロック検出、UIEDエンジンによるUI要素の検出、プレースホルダーの生成、元のスクリーンショットから切り出した領域を生成ページに挿入する画像の置き換えなど、複数のコンポーネントからなるパイプラインを実行します。

パイプラインはblock_parsor.py、html_generator.py、mapping.py、image_replacer.pyなどの個別のPythonスクリプトに分かれており、main.pyで1枚の画像に対する一連の処理を実行します。生成モデルはDoubao（デフォルト）、Qwen、GPT、Geminiから選択でき、各プロバイダーのAPIキーはローカルのテキストファイルに保存します。

ローカルで実行できるGradio風のデモ用エントリーポイント（app.py）と、Hugging Faceのデモへのリンクも用意されています。また、WebのスクリーンショットとHTMLソースを組み合わせたScreenBenchデータセットも含まれています。

主な機能

  • 011枚のUIスクリーンショットまたはデザインモックアップから、編集可能なHTML/CSSを生成します。
  • 02生成前にUIコンポーネントを検出し、ページ上の領域に対応付けます。
  • 03元のスクリーンショットから画像領域を切り出し、出力HTML内の画像として差し替えます。
  • 04生成モデルとしてDoubao、Qwen、GPT、Geminiに対応しています。
  • 05HTMLソース付きのWebスクリーンショット1,000枚を収録したScreenBenchデータセットが含まれています。

ユースケース

  • デザインモックアップを、フロントエンドのプロトタイピングに使えるHTMLページのたたき台にする。
  • 既存のWebページのスクリーンショットから、編集可能なコードでレイアウトを再現する。
  • マルチモーダルなフロントエンド生成のビジュアル-to-codeベンチマークや実験を構築する。

トピック

#screenshot-to-code#html-css#multimodal-llm#front-end#ui-generation#computer-vision

よくある質問

ScreenCoder とは？
複数のモデルバックエンドに対応したモジュール型マルチエージェントパイプラインで、UIのスクリーンショットやデザインモックアップを編集可能なHTML/CSSに変換します。 ScreenCoderは、スクリーンショットやデザインモックアップを受け取り、HTML/CSSのフロントエンドコードを生成するUI-to-codeジェネレーターです。ブロック検出、UIEDエンジンによるUI要素の検出、プレースホルダーの生成、元のスクリーンショットから切り出した領域を生成ページに挿入する画像の置き換えなど、複数のコンポーネントからなるパイプラインを実行します。
ScreenCoder は無料で使えますか？ライセンスは？
ScreenCoder は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
ScreenCoder は今もメンテナンスされていますか？
半年以内に更新あり。ScreenCoder の最終コミットは 2026年9月15日 です。
ScreenCoder は何に使えますか？
デザインモックアップを、フロントエンドのプロトタイピングに使えるHTMLページのたたき台にする。 既存のWebページのスクリーンショットから、編集可能なコードでレイアウトを再現する。 マルチモーダルなフロントエンド生成のビジュアル-to-codeベンチマークや実験を構築する。
ScreenCoder はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/leigest519/ScreenCoder

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト