Что это?
Приложение, в котором можно нарисовать на холсте вайрфрейм интерфейса, а GPT-4 Vision создаст по этому наброску рабочую HTML-страницу (со стилями Tailwind).
Приложение, в котором можно нарисовать на холсте вайрфрейм интерфейса, а GPT-4 Vision создаст по этому наброску рабочую HTML-страницу (со стилями Tailwind).Как оно на самом деле превращает мой рисунок в HTML?Оно берёт текущий холст в виде SVG, преобразует его в PNG и отправляет это изображение в GPT-4 Vision с инструкцией вернуть один HTML-файл, оформленный с помощью Tailwind.
Оно берёт текущий холст в виде SVG, преобразует его в PNG и отправляет это изображение в GPT-4 Vision с инструкцией вернуть один HTML-файл, оформленный с помощью Tailwind.Как его запустить?Это приложение на Next.js: установите зависимости и выполните команды разработки из корня проекта, затем откройте его в браузере.
Это приложение на Next.js: установите зависимости и выполните команды разработки из корня проекта, затем откройте его в браузере.Что нужно иметь перед запуском?Нужен ключ OpenAI API с доступом к GPT-4 Vision API и Node.js версии выше 18.17, так как проект использует Next.js 14.
Нужен ключ OpenAI API с доступом к GPT-4 Vision API и Node.js версии выше 18.17, так как проект использует Next.js 14.Безопасно ли развернуть это для других людей?Нет — это явно демо без аутентификации, поэтому если развернуть его публично, любой сможет накрутить расходы на ваш ключ OpenAI API.
Нет — это явно демо без аутентификации, поэтому если развернуть его публично, любой сможет накрутить расходы на ваш ключ OpenAI API.Где это работает?Это локальное веб-приложение, которое работает в браузере и построено на Next.js.
Это локальное веб-приложение, которое работает в браузере и построено на Next.js.Какой инструмент для рисования используется для холста?Используется tldraw, библиотека бесконечного холста с открытым исходным кодом, которая служит поверхностью для рисования вайрфрейма.
Используется tldraw, библиотека бесконечного холста с открытым исходным кодом, которая служит поверхностью для рисования вайрфрейма.Есть ли проект-преемник, на который стоит взглянуть?В README указано, что духовным преемником этого проекта является Terragon Labs.
В README указано, что духовным преемником этого проекта является Terragon Labs.Что я получаю на выходе из наброска?Один сгенерированный HTML-файл, оформленный с помощью Tailwind CSS, который приблизительно повторяет нарисованный вайрфрейм.
Один сгенерированный HTML-файл, оформленный с помощью Tailwind CSS, который приблизительно повторяет нарисованный вайрфрейм.What are similar projects?screenshot-to-code, openui, onlook, open-lovable, boardui, ui, awesome-cursorrules, mitosis
screenshot-to-code, openui, onlook, open-lovable, boardui, ui, awesome-cursorrules, mitosisWhich topics is it in?prototype, sketch, design-to-code, gpt-4, vision-language-model, code-generation, gpt, tailwindcss, nextjs, generative-ai, ui, openai
prototype, sketch, design-to-code, gpt-4, vision-language-model, code-generation, gpt, tailwindcss, nextjs, generative-ai, ui, openai