App zum Umwandeln von Screenshots in Code
- Eine einfache App, die Screenshots in HTML/Tailwind CSS umwandelt
- Verwendet GPT-4 Vision zur Codegenerierung und DALL-E 3 zur Erzeugung ähnlicher Bilder
- Siehe den Beispielabschnitt unten, um eine Demo anzusehen
Updates
- Einstellung hinzugefügt, um die DALL-E-Bilderzeugung zu deaktivieren, wenn keine Bildgenerierung benötigt wird
- Code kann direkt in der App eingesehen werden
- Wenn die AI Styles falsch anwendet oder Abschnitte auslässt, kann man Anweisungen zum Aktualisieren des Codes geben
Erste Schritte
- App mit React/Vite-Frontend und FastAPI-Backend
- Erfordert einen OpenAI-API-Schlüssel mit Zugriff auf die GPT-4-Vision-API
- Anleitung zum Starten von Backend und Frontend vorhanden, Nutzung der App lokal möglich
Häufig gestellte Fragen (FAQ)
- Bietet Lösungen bei Fehlern während der Backend-Einrichtung
- Erklärt, wie man einen OpenAI-API-Schlüssel erhält, der das GPT-4-Vision-Modell umfasst
- Erläutert, wie man Feedback, Funktionswünsche und Bug-Reports einreichen kann
Beispiele
- Beispiele der Originale und Reproduktionen von NYTimes-, Instagram- und Hacker-News-Seiten
Gehostete Version
- Ein OpenAI-Schlüssel ist erforderlich, und man muss Zugriff auf GPT-4 Vision haben
- Lokale Installationsanweisungen finden sich im Abschnitt „Erste Schritte“
Meinung von GN⁺
Diese App ist ein innovatives Tool zur Umwandlung von Screenshots in Web-Code; besonders wichtig ist der Einsatz der neuesten AI-Technologien GPT-4 Vision und DALL-E 3. Das ist für Webentwickler und Designer interessant und attraktiv, weil es Zeit spart und ihnen ermöglicht, sich stärker auf kreative Arbeit zu konzentrieren. Außerdem verbessert die Möglichkeit, die AI direkt anzuweisen, den Code zu überarbeiten, die User Experience und trägt dazu bei, die Genauigkeit der AI zu erhöhen.
1 Kommentare
Hacker-News-Kommentare
Es wirkt fast wie Magie; man versteht zwar das Konzept, dass neuronale Netze eine Menge von Funktionen modellieren, die Eingaben auf Ausgaben abbilden, aber es ist dennoch erstaunlich, dass GPT den Prozess modelliert, Bilder auf HTML+Tailwind-Text-Token abzubilden und diese dann vom Browser rendern zu lassen.
Frage, ob man dieses Tool als Diagramm-Compiler betrachten kann und ob es Teil einer Build-Pipeline sein könnte, die in Tools wie Sketch oder Figma erzeugte Artefakte in HTML/CSS/JS umwandelt.
Beispiel für einen Prompt, der mit Tailwind, HTML und JS auf Basis eines vom Nutzer bereitgestellten Screenshots einer Webseite eine Single-Page-App erstellt, mit besonderem Fokus auf eine exakte Reproduktion des Designs.
Persönliche Meinung, dass ein anderer Ansatz als defensives Prompting vielleicht der bessere Weg wäre, aber dass allein die Tatsache, dass diese Technik funktioniert, schon erstaunlich ist.
Verweis auf ein YouTube-Forschungsvideo, laut dem die Ergänzung des Satzes „Das ist sehr wichtig für meine Karriere“ die Qualität der Ausgabe verbessert; die Aussage ist, dass dieser Satz die Ausgabequalität bei verschiedenen Aufgaben steigert.
Gedanke, dass diese Technik den Bereich lösbarer Probleme erweitert und man deshalb neu darüber nachdenken muss, was man bauen will und wie man Probleme betrachten und lösen sollte.
Meinung, dass es erstaunlich ist, diese Aufgabe mit einem allgemeinen Modell zu lösen, obwohl sich Daten für überwachtes Lernen dafür leicht erzeugen lassen.
Information, dass über die GitHub-Seite eine gehostete Version über Pico angeboten werden soll, verbunden mit der Frage, warum Pico gewählt wurde.
Lob dafür, dass die Demo der erzeugten Website mithilfe von
iframeundsrcdoclive gezeigt wird; das sei einfach und elegant.Meinung, dass man beim Kopieren bestehender Websites mit Httrack wahrscheinlich ähnlichere Ergebnisse erzielen und dabei GPT-API-Kosten sparen könnte.
Sorge, dass sich damit Phishing-Websites deutlich schneller erstellen lassen.
Frage, ob das Tool perfekt dafür sei, auf ständig wechselnde Anforderungen von Projektmanagern zu reagieren, und ob es auch mit vagen Eingaben wie „Make it pop“ funktioniert.