leigest519/ScreenCoder

What it solves

ScreenCoderは、スクリーンショットやモックアップなどの視覚的なデザインを、本番環境で使用可能なHTMLおよびCSSコードに変換するプロセスを自動化します。視覚的なデザインと機能的なフロントエンド実装の間のギャップを埋めることを目的としており、開発者が画像からインターフェースを再構築するために必要な手動の労力を軽減します。

How it works

このシステムは、視覚的理解とレイアウト計画を組み合わせたモジュール式のマルチエージェントアーキテクチャを採用しています。プロセスは以下のマルチステップ・パイプラインに従います：

1. UI Element Detection: UIEDエンジンを使用して、スクリーンショットを分析し、コンポーネントを検出します。
2. Layout Planning: 検出されたコンポーネントを論理的なページ領域にマッピングし、プレースホルダーを使用して初期HTMLレイアウトを生成します。
3. Code Synthesis: マルチモーダルモデル（Doubao、Qwen、GPT、またはGeminiをサポート）を使用して、実際のコードを生成します。
4. Image Integration: プレースホルダーを特定し、それらを元のスクリーンショットから切り取った実際の画像に置き換えることで、最終的なHTMLを生成します。

Who it’s for

このツールは、インターフェースを迅速にプロトタイプ化したり、既存の視覚的資産からピクセルパーフェクトなウェブページを作成したりしたいフロントエンド開発者やデザイナー向けに設計されています。

Highlights

• Modular Multi-Agent Framework: 検出、計画、および合成のための専門化されたエージェントを組み合わせます。
• Customizable: レイアウトとスタイリングに対するユーザー主導の変更をサポートします。
• Model Agnostic: GPT、Gemini、Qwen、およびDoubaoを含む複数のLLMと互換性があります。
• ScreenBench: 評価のために、1,000個の実世界のウェブスクリーンショットとそれに対応するHTMLソースコードを含む新しいベンチマークが含まれています。