Це магія: нейронка перетворює простий скріншот сайту на HTML/CSS-код! Скріньте будь-який сайт, а GPT-4 Vision прожує скрін і видасть майже точну його копію разом з кодом!
На додачу до цього ШІ ще й зображення скопіює, використовуючи DALL-E 3. Звучить, як крутий інструмент для веб-дизайну.
Функціональність та можливості
- Перетворення зображення в код: Основна функціональність “скріншоту в код” – це можливість зробити знімок екрана і згенерувати чистий HTML, Tailwind CSS і JavaScript код. Він використовує GPT-4 Vision для розуміння елементів дизайну і DALL-E 3 для створення візуально схожих зображень.
- Налаштування: Однією з важливих особливостей є можливість доручити штучному інтелекту вносити корективи в згенерований код. Це неймовірно корисно, коли ви хочете точно налаштувати стилі або внести певні зміни в макет.
- Генерація зображень DALL-E: Під час генерації коду інструмент також може створювати візуально схожі зображення за допомогою DALL-E. Це може бути дуже корисним, коли вам потрібно створити ресурси для вашого проекту.
- Локальні та розміщені версії: Ви можете запустити “Screenshot to code” локально на своєму комп’ютері, що робить його ідеальним для розробників, які піклуються про конфіденційність. Крім того, доступна також хостингова версія, за умови, що у вас є власний ключ OpenAI.
- FastAPI Backend та React/Vite Frontend: Інструмент побудований на основі FastAPI бекенду і фронтенду React/Vite, що забезпечує плавний і чуйний користувальницький інтерфейс.
Приклад використання
Щоб продемонструвати, як використовувати “скріншот в код”, давайте пройдемося по процесу:
Передумови: Перед початком роботи вам знадобиться ключ OpenAI API з доступом до GPT-4 Vision API.
Запуск бекенда:
- Перейдіть до каталогу бекенду: cd backend
- Створіть файл .env і додайте ваш ключ OpenAI API: echo “OPENAI_API_KEY=sk-your-key” > .env
- Встановіть необхідні пакети за допомогою Poetry: poetry install
- Активуйте віртуальне середовище: poetry shell
- Запускаємо сервер бекенда: poetry run uvicorn main:app –reload –port 7000
Запускаємо фронтенд:
- Перейдіть до каталогу фронтенду: cd frontend
- Встановіть залежності інтерфейсу за допомогою Yarn: yarn
- Запустіть сервер розробки фронтенду: yarn dev
Отримайте доступ до додатку: Відкрийте веб-браузер і перейдіть на http://localhost:5173, щоб скористатися інструментом. Якщо ви бажаєте запустити бекенд на іншому порту, ви можете оновити VITE_WS_BACKEND_URL в frontend/.env.local.
Висновок
На закінчення, “screenshot-to-code” від Abi Raja – це чудовий інструмент, який використовує передові моделі штучного інтелекту, щоб спростити процес перетворення скріншотів в код. Завдяки широким можливостям налаштування та підтримці локальних інсталяцій він є універсальним вибором для розробників і дизайнерів. Незалежно від того, чи працюєте ви над проектом веб-дизайну, чи просто хочете пришвидшити процес розробки інтерфейсу, цей інструмент просто необхідно спробувати.
Для зворотного зв’язку, запитів щодо функцій або повідомлень про помилки, ви можете зв’язатися з розробником через GitHub issues або через Twitter. Спробуйте і відчуйте магію перетворення зображень на код без особливих зусиль!
