draw a ui

Draw-a-ui

Dies ist eine App, die TLDRAW und die GPT-4-Vision-API verwendet, um HTML basierend auf einem von Ihnen gezeichneten Drahtmodell zu generieren.

Ich arbeite derzeit an einer gehosteten Version von Draw-a-UI. Sie können sich der Warteliste unter Draw-aa-Ui.com anschließen. Der Kern davon wird immer Open Source sein und hier verfügbar sein.

Dies funktioniert nur, indem Sie nur die aktuelle Leinwand SVG übernehmen, sie in ein PNG konvertieren und diese PNG an die GPT-4-Vision mit Anweisungen senden, um eine einzige HTML-Datei mit Tailwind zurückzugeben.

Haftungsausschluss: Dies ist eine Demo, die nicht für die Produktion verwendet wird. Es gibt kein Auth, also werden Sie pleite gehen, wenn Sie es bereitstellen.

Erste Schritte

Dies ist eine Next.js -App. Um loszulegen, führen Sie die folgenden Befehle im Stammverzeichnis des Projekts aus. Sie benötigen einen OpenAI-API-Schlüssel mit Zugriff auf die GPT-4-Vision-API.

Beachten Sie, dass dies als Next.js 14 verwendet wird und eine Version von node mehr als 18,17 erfordert. Lesen Sie hier mehr.

 echo " OPENAI_API_KEY=sk-your-key " > .env.local
npm install
npm run dev

Öffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.