ScreenCoder: Ein Tool zur Umwandlung von UI-Screenshots in editierbaren HTML/CSS-Code

ScreenCoder ist ein Open-Source-Tool zur Umwandlung von Screenshots von Benutzeroberflächen (UI) oder Designskizzen in produktionsreifen HTML- und CSS-Code. Es nutzt ein modulares Multi-Intelligenz-Framework, um komplexe Entwürfe in klar strukturierten und editierbaren Code umzuwandeln, und zwar in drei Schritten: visuelles Verständnis, Layoutplanung und Codegenerierung. ScreenCoder unterstützt mehrere Generierungsmodelle, wie Doubao, Qwen, GPT und Gemini, die für unterschiedliche Entwicklungsanforderungen geeignet sind. Der Code ist öffentlich auf GitHub verfügbar, so dass Benutzer ihn frei herunterladen, ändern und einsetzen können.

Funktionsliste

• Konvertieren Sie UI-Screenshots oder Designskizzen in HTML/CSS-Code.
• Unterstützt ein modulares multi-intelligentes Body-Framework, das in drei Phasen unterteilt ist: visuelle Erkennung, Layoutplanung und Codegenerierung.
• Es werden mehrere Generationen von Modellen (Doubao, Qwen, GPT, Gemini) unterstützt, und die Benutzer können je nach ihren Bedürfnissen wählen.
• Bietet bearbeitbare Code-Ausgaben für Entwickler, um Anpassungen vorzunehmen.
• Automatische Generierung von großen Bild-Code-Paaren zur Optimierung der Modellleistung.
• Unterstützt das schnelle Prototyping und die pixelgenaue Implementierung von Schnittstellen.

Hilfe verwenden

Einbauverfahren

Um ScreenCoder zu verwenden, müssen Benutzer zunächst den Code aus dem GitHub-Repository herunterladen und die Umgebung konfigurieren. Nachfolgend finden Sie die detaillierten Installationsschritte:

1. Klon-Lager
   Führen Sie den folgenden Befehl im Terminal aus, um das ScreenCoder-Projekt lokal zu klonen:
   "Bash
   git clone https://github.com/leigest519/ScreenCoder.git
   cd screencoder

2. Erstellen einer virtuellen Umgebung
   Um Abhängigkeitskonflikte zu vermeiden, empfiehlt es sich, eine virtuelle Python-Umgebung zu erstellen:
   "Bash
   python3 -m venv .venv
   Quelle .venv/bin/activate

Für Windows-Benutzer:source .venv\Scripts\activate.

3. Installation von Abhängigkeiten
   Installieren Sie die für das Projekt erforderlichen Python-Bibliotheken:
   "Bash
   pip install -r anforderungen.txt

4. Konfigurationsmodelle und API-Schlüssel
   ScreenCoder unterstützt mehrere Generierungsmodelle (z.B. Doubao, Qwen, GPT, Gemini). Die Benutzer müssen die entsprechende API-Schlüsseldatei im Stammverzeichnis des Projekts erstellen (z. B.doubao_api.txtundqwen_api.txtusw.) und fügen Sie den API-Schlüssel in die Datei ein.
   Dann, in derblock_parsor.pyim Gesang antwortenhtml_generator.pyin der Konfigurationsdatei, um das gewünschte Modell einzustellen. Ändern Sie zum Beispiel die Modellparameter in der Konfigurationsdatei zu:
   "`python
   Modell = "Doubao" # oder Qwen, GPT. Zwillinge

Verwendungsprozess

Die Bedienung von ScreenCoder ist in die folgenden Schritte unterteilt, und Benutzer können die Umwandlung von UI in Code über die Befehlszeile abschließen:

1. Block-Erkennung
   in Bewegung seinblock_parsor.pySkript, das die eingegebenen UI-Screenshots analysiert und die wichtigsten Komponenten identifiziert (z. B. Navigationsleiste, Seitenleiste, Inhaltsbereich usw.). Der Befehl lautet wie folgt:
   "Bash
   python block_parsor.py

In diesem Schritt werden Komponentenbeschriftungen und Positionsinformationen als Vorbereitung für die nachfolgende Layoutplanung erzeugt.

2. Code mit Platzhaltern generieren
   in Bewegung seinhtml_generator.pySkript, das den ursprünglichen HTML-Code mit Platzhaltern erzeugt:
   "Bash
   python html_generator.py

Der Ausgabecode enthält die Seitenstruktur und Platzhalter (z. B. graue Bildblöcke) für die weitere Bearbeitung.

3. Inhaltszuordnung und endgültige Codegenerierung
   Nach der Generierung des Platzhaltercodes ordnet ScreenCoder die erkannten UI-Komponenten dem endgültigen HTML/CSS-Code zu. Die Benutzer können den Code bei Bedarf manuell anpassen, um sicherzustellen, dass der Stil und das Layout den Erwartungen entsprechen.

Featured Function Bedienung

• Visuelle Erkennung (Grounding Agent)
  Das visuelle Erkennungsmodul von ScreenCoder analysiert UI-Screenshots mit Hilfe von visuell-linguistischen Modellen (VLMs), um Schlüsselelemente der Benutzeroberfläche wie Schaltflächen, Navigationsleisten, Textfelder usw. automatisch zu erkennen und zu kennzeichnen. Diese Funktion stellt sicher, dass die generierte Codestruktur in hohem Maße mit dem Design übereinstimmt. Die Benutzer laden einfach Screenshots im PNG- oder JPG-Format hoch, und das System verarbeitet und beschriftet die Komponenten automatisch.
• Entwurfsplanung (Planning Agent)
  Das Modul Layout-Planung organisiert die identifizierten Komponenten in einer hierarchischen Seitenstruktur, die auf den Prinzipien des Front-End-Engineering basiert. So wird beispielsweise die Navigationsleiste oben, die Seitenleiste links und der Hauptinhaltsbereich in der Mitte platziert. Die Benutzer müssen das Layout nicht manuell festlegen, das System generiert automatisch eine sinnvolle HTML-Struktur.
• Codegenerierung (Generierungsagent)
  Das Modul zur Codegenerierung erzeugt HTML- und CSS-Code mit adaptiven Eingabeaufforderungen. Der generierte Code ist sauber, semantisch klar und entspricht den modernen Webentwicklungsstandards. Benutzer können den Code nach der Generierung direkt in das Projekt kopieren oder den Stil und die Funktionalität nach Bedarf anpassen.

caveat

• Achten Sie darauf, dass die Eingabe-Screenshots klar sind und die Elemente der Benutzeroberfläche gut definiert sind, und vermeiden Sie unscharfe oder übermäßig komplexe Bilder.
• Überprüfen Sie die Gültigkeit des API-Schlüssels, um sicherzustellen, dass das ausgewählte Modell ordnungsgemäß von der API bedient wird.
• Wenn Sie den Code anpassen müssen, empfiehlt es sich, einen Code-Editor (z. B. VS Code) zu verwenden, um die CSS-Stile nach der Erstellung zu überprüfen und zu optimieren.

Mit den oben genannten Schritten können Benutzer einen Entwurf schnell in brauchbaren Webcode umwandeln, der sich für die schnelle Erstellung von Prototypen oder den Einsatz in der Produktionsumgebung eignet.

Anwendungsszenario

1. Schnelles Prototyping
   Designer oder Entwickler müssen UI-Designs schnell in interaktive Web-Prototypen umwandeln. ScreenCoder generiert automatisch HTML/CSS-Code, um die Zeit zwischen Design und Entwicklung zu verkürzen.
2. Front-End-Automatisierung
   Front-End-Entwicklungsteams möchten die Codegenerierung automatisieren und sich wiederholende Aufgaben reduzieren. Das modulare Framework von ScreenCoder liefert hochpräzisen Code für umfangreiche Projekte.
3. Lernen und Lehren
   Programmieranfänger oder Front-End-Entwicklungskurse können ScreenCoder verwenden, um das aktuelle UI-Design in Code umzuwandeln und die Struktur und den Schreibstil von HTML/CSS zu erlernen.
4. Entwicklung plattformübergreifender Schnittstellen
   Entwickler müssen dasselbe Design für mehrere Plattformen (z. B. Web und Mobile) verwenden, und der von ScreenCoder generierte Code kann als Grundlage für kleinere Anpassungen an verschiedene Geräte verwendet werden.

QA

1. Welche Dateiformate werden von ScreenCoder unterstützt?
   ScreenCoder unterstützt UI-Screenshots oder Design-Skizzen in den Formaten PNG und JPG. Stellen Sie sicher, dass die Bilder klar sind und die UI-Elemente gut definiert sind, um die besten Konvertierungsergebnisse zu erzielen.
2. Ist Programmiererfahrung erforderlich?
   Es ist keine tiefgreifende Programmiererfahrung erforderlich, aber Benutzer, die mit HTML/CSS vertraut sind, können den generierten Code besser abstimmen. Anfänger können den generierten Code direkt verwenden.
3. Wie kann ich ein Modell erstellen?
   existierenblock_parsor.pyim Gesang antwortenhtml_generator.pyLegen Sie darin Modelle (z. B. Doubao, Qwen usw.) fest und stellen Sie die entsprechenden API-Schlüssel bereit. Unterschiedliche Modelle können sich auf die Generierungsgeschwindigkeit und die Codequalität auswirken, daher empfiehlt es sich, entsprechend den Anforderungen zu testen.
4. Muss der generierte Code manuell angepasst werden?
   Der generierte Code ist in der Regel sofort einsatzbereit, aber bei komplexen Entwürfen kann es erforderlich sein, das CSS-Styling oder die HTML-Struktur manuell anzupassen, um bestimmte Anforderungen zu erfüllen.
5. Ist ScreenCoder kostenlos?
   ScreenCoder ist ein Open-Source-Projekt, und der Code ist öffentlich und kostenlos auf GitHub verfügbar. Die Verwendung bestimmter generativer Modelle (z. B. GPT, Gemini) erfordert jedoch, dass Sie sich selbst API-Schlüssel beschaffen, was mit Kosten verbunden sein kann.