Screenshot to Code: AI-инструмент для преобразования скриншотов в чистый внешний код

Общее введение

Screenshot-to-Code - это инструмент с открытым исходным кодом, который использует искусственный интеллект для преобразования скриншотов, эскизов и проектов Figma в чистый, функциональный код. Инструмент поддерживает множество стеков фронтенд-технологий, включая HTML, Tailwind CSS, React и Vue. Он использует GPT-4 Vision и Клод Продвинутые модели искусственного интеллекта, такие как Sonnet 3.5, для генерации кода и поддержки преобразования видео или записей с экрана в функциональные прототипы.

Список функций

• Скриншот в код: Преобразование скриншотов и дизайна в код HTML, Tailwind CSS, React или Vue.
• От видео к прототипу: Преобразование видео или записи экрана в функциональный прототип. (экспериментальная функциональность)
• Поддержка нескольких технологических стеков: Поддержка HTML, Tailwind CSS, React, Vue, Bootstrap и Ionic.
• Поддержка моделей искусственного интеллекта: Генерация кода с помощью GPT-4 Vision и Claude Sonnet 3.5.
• Онлайн-тест: Доступна тестовая онлайн-версия, чтобы пользователи могли оценить функциональность инструмента в режиме реального времени.

Использование помощи

Процесс установки

1. склад клонов: Запуск в терминале git clone https://github.com/abi/screenshot-to-code.git Хранилище клонирования.
2. Установка зависимостей: Войдя в каталог проекта, выполните команду cd backend && poetry install Установите зависимости бэкенда, запустите cd frontend && yarn Установите внешние зависимости.
3. Настройка ключей API: Создать .env файл, добавьте ключ API OpenAI и Антропология Ключ API.

   OPENAI_API_KEY=sk-your-key
   ANTHROPIC_API_KEY=your-key
   

4. подготовка бэкэнда: Беги poetry run uvicorn main:app --reload --port 7001 Запустите внутреннюю службу.
5. Запуск фронтальной части: Беги yarn dev Запустите внешнюю службу и откройте браузер для доступа к http://localhost:5173.

Процесс использования

1. Загрузить скриншот: Загрузите скриншоты или проекты для преобразования во внешнем интерфейсе.
2. Выбор технологического стека: Выберите стек технологий (например, HTML, Tailwind CSS, React или Vue), на основе которого должен быть сгенерирован код.
3. Сгенерировать код: Нажмите кнопку Generate, и инструмент будет использовать модель искусственного интеллекта для генерации соответствующего внешнего кода.
4. Просмотр и редактирование кода: Сгенерированный код будет отображаться в интерфейсе, и пользователь сможет просматривать и редактировать его.
5. Код загрузки: После этого пользователь может загрузить сгенерированный файл кода.

Функции Поток операций

1. Скриншот в код::
   • Загрузите скриншот или рисунок.
   • Выберите стек технологий, для которого необходимо сгенерировать код.
   • Нажмите кнопку Generate и дождитесь, пока модель искусственного интеллекта сгенерирует код.
   • Просмотр, редактирование и загрузка сгенерированного кода.
2. От видео к прототипу::
   • Загрузите видео или файл записи экрана.
   • Инструмент автоматически проанализирует видеоматериалы и создаст функциональный прототип.
   • Просмотр, редактирование и загрузка сгенерированного кода прототипа.
3. Поддержка нескольких технологических стеков::
   • Загрузив скриншот или видео, выберите нужный технологический стек.
   • Инструмент поддерживает множество технологических стеков, таких как HTML, Tailwind CSS, React, Vue, Bootstrap и Ionic.
4. Поддержка моделей искусственного интеллекта::
   • Инструмент генерирует код с использованием передовых моделей искусственного интеллекта, таких как GPT-4 Vision и Claude Sonnet 3.5.
   • Пользователь может выбрать модель искусственного интеллекта, которая будет использоваться в настройках.