Napkins.dev: загрузка электронных схем для генерации внешнего кода на основе Llama4

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

Napkins.dev - это бесплатный проект с открытым исходным кодом, основная функция которого заключается в том, чтобы позволить пользователям загружать скриншоты интерфейса или wireframes для автоматической генерации исполняемого кода front-end. Пользователям нужно только предоставить дизайн, инструмент будет работать по модели Llama 4 (по Вместе Napkins.dev анализирует изображения и генерирует код приложения на основе фреймворка Next.js. Napkins.dev идеально подходит для быстрого создания прототипов и особенно хорош при работе с простыми дизайнами интерфейсов, такими как страницы входа в систему или навигационные панели. Сгенерированный код можно просматривать и редактировать в режиме реального времени, а пользователи могут запускать его напрямую или оптимизировать, что значительно сокращает время от проектирования до разработки.

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

• Загрузка скриншотов: поддержка загрузки скриншотов интерфейса или нарисованных от руки схем в форматах PNG и JPG.
• Генерация кода ИИ: создание кода HTML, CSS и JavaScript для фреймворка Next.js на основе скриншотов анализа моделей Llama 4.
• Предварительный просмотр в реальном времени: после генерации кода предоставляется онлайн-песочница (на основе Sandpack) для демонстрации эффекта от работы приложения.
• Редактирование кода: поддержка корректировки сгенерированного кода по подсказанным словам, например, изменение цвета или расположения.
• Выбор темы: позволяет пользователям выбирать различные темы интерфейса для персонализации вывода кода.
• Сотрудничество с открытым исходным кодом: пользователи могут клонировать репозитории, фиксировать код или оптимизировать функции через GitHub.
• Поддержка мобильных устройств: сгенерированный код адаптирован для настольных компьютеров, отображение на мобильных устройствах оптимизировано.

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

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

napkins.dev предлагает два способа использования: прямой доступ к официальному развертыванию (через https://napkins.dev) или запустите проект локально. Ниже приведены подробные шаги по локальному развертыванию для разработчиков или пользователей, которым необходимо настроить функциональность:

1. Репозиторий клонированного кода
   Откройте терминал и введите следующую команду, чтобы клонировать репозиторий GitHub для napkins.dev:

   git clone https://github.com/Nutlope/napkins

Это позволит загрузить файл проекта локально.

2. Настройка переменных среды
   В корневой каталог проекта скопируйте файл .env.example файл и переименуйте его .envЗатем заполните необходимую информацию ниже:

   TOGETHER_API_KEY=你的Together AI密钥
   AWS_ACCESS_KEY_ID=你的AWS S3访问密钥
   AWS_SECRET_ACCESS_KEY=你的AWS S3秘密密钥
   AWS_S3_BUCKET=你的S3存储桶名称
   AWS_S3_REGION=你的S3区域
   

   • Вместе ключ к искусственному интеллекту: Посетите сайт Together AI, чтобы зарегистрировать аккаунт и получить бесплатный или платный API-ключ для вызова моделей Llama 4. Бесплатного количества обычно достаточно для тестирования.
   • Конфигурация AWS S3: Войдите в консоль AWS и создайте ведро хранения S3 для хранения загруженных скриншотов. См. Next.js Руководство по загрузке в S3 Настройте права доступа к ведру хранения, чтобы разрешить публичное чтение. Имя и регион ведра хранилища должны соответствовать .env Документы соответствуют друг другу.
3. Установка зависимостей
   Убедитесь, что Node.js установлен локально (рекомендуется версия 18 или выше). Запустите его в каталоге проекта:

   npm install
   

   Это позволит установить все необходимые для проекта зависимости, включая Next.js, Tailwind CSS, Sandpack и Together AI's SDK.

4. Начало работы местных служб
   Выполните следующую команду, чтобы запустить сервер разработки:

   npm run dev
   

   Откройте браузер и посетите http://localhost:3000чтобы получить доступ к локальному интерфейсу napkins.dev.

5. Проверка установки
   Загрузите простой скриншот интерфейса (например, дизайн, содержащий кнопки и поля ввода), нажмите кнопку Generate и проверьте, может ли быть выведен код. Если вы столкнулись с ошибкой, проверьте .env Ключ в файле правильный, или убедитесь, что сеть подключена к Together AI и службе AWS S3.

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

Основная функция napkins.dev - преобразование скриншотов интерфейса в исполняемый код. Ниже приведены подробные шаги по его использованию:

1. инструмент доступа
   Если официальное развертывание происходит в режиме реального времени, посетите https://napkins.dev(В настоящее время нам нужно дождаться официального релиза, поэтому мы предлагаем сначала запустить его локально). Чтобы запустить локально, откройте http://localhost:3000.
2. Загрузить скриншот
   Нажмите кнопку "Загрузить" на главной странице и выберите скриншот интерфейса в формате PNG или JPG. Рекомендуется использовать четкий дизайн с простыми элементами (например, кнопки, поля ввода, панель навигации).
   • Требования к документацииРекомендуется, чтобы размер изображений не превышал 5 МБ, не допускать размытия или слишком сложных динамических эффектов (например, анимации).
   • Поддержите ручную роспись: Можно загрузить нарисованные от руки эскизы, но убедитесь, что линии четкие и элементы четко разграничены.
   • привлекать внимание к чему-л.: Попробуйте сделать простой скриншот страницы входа в систему в первый раз, чтобы проверить эффект генерации.
3. Сгенерировать код
   После загрузки скриншота нажмите кнопку "Сгенерировать". Изображение будет проанализировано моделью Llama 4 и сгенерирован внешний код на основе Next.js. Процесс генерации обычно занимает 5-30 секунд, в зависимости от сложности скриншота и скорости сети.
   • Выходное содержимое: Код состоит из HTML (компоненты React), CSS (стили Tailwind) и JavaScript и четко структурирован для быстрой разработки.
   • обработка ошибок: Если генерация не удалась, проверьте, не слишком ли сложен скриншот, или загрузите более простой дизайн.
4. Предварительный просмотр и редактирование
   После того как код сгенерирован, на странице отображается живой предварительный просмотр через песочницу Sandpack, демонстрирующий внешний вид и основные взаимодействия приложения. Файлы кода перечислены справа и могут быть просмотрены, скопированы или загружены пользователем.
   • Редактировать код: Нажмите кнопку "Редактировать", введите запрос (например, "Изменить фон на темный" или "Изменить размер кнопок"), и ИИ изменит код и обновит предварительный просмотр в соответствии с запросами.
   • Выбор темы: Выбрав в настройках другую тему (например, светлый или темный режим), сгенерированный CSS будет автоматически адаптирован.
   • Код экономии: Нажмите кнопку "Загрузить", чтобы упаковать код в ZIP-файл, содержащий полную структуру проекта Next.js.
5. Эксплуатация и развертывание
   Загруженный код можно запустить локально. Перейдите в каталог с кодом и выполните команду npm install ответить пением npm run devДоступ http://localhost:3000 Посмотреть приложение.
   • Методология развертыванияПриложения Next.js рекомендуется развертывать с помощью Vercel или Netlify. Vercel обеспечивает развертывание в один клик и генерирует публичные ссылки после загрузки кода.
   • производственная среда: Сгенерированный код подходит для создания прототипов, в производственных средах необходимо вручную проверять логику, добавлять внутренние интерфейсы или оптимизировать производительность.

Функциональное управление

• Анализ снимков экрана с помощью искусственного интеллекта
  napkins.dev использует модель Llama 4 (с помощью совместного искусственного интеллекта) для распознавания элементов на скриншоте, таких как кнопки, текстовые поля или навигационные панели, и генерирует соответствующие React Компоненты. Например, если вы загрузите дизайн с кнопкой "Регистрация" и полем ввода, инструмент сгенерирует код со структурой формы и стилями Tailwind.
  • Инструкция по эксплуатации: Убедитесь, что элементы скриншота понятны, а сложные конструкции могут привести к неправильному распознаванию. Рекомендуется начинать с простого макета и постепенно тестировать сложные интерфейсы.
  • Описание ограничений: В текущей версии улучшена поддержка статических интерфейсов, а для динамических эффектов (например, вращающихся изображений) может потребоваться ручная настройка кода.
• Песочница кода в реальном времени
  Инструмент интегрируется с Sandpack (на базе CodeSandbox), который генерирует код, запускаемый непосредственно в браузере и показывающий реальные результаты. Пользователи могут интерактивно тестировать нажатия кнопок или ввод форм, чтобы проверить функциональность кода.
  • Пример работы: После создания страницы входа в систему нажмите на кнопку в окне предварительного просмотра, чтобы проверить, сработало ли взаимодействие. Если его необходимо скорректировать, введите запрос (например, "Добавить событие нажатия кнопки"), чтобы изменить код.
• Открытый исходный код и расширения
  napkins.dev имеет полностью открытый исходный код, и разработчики могут участвовать в разработке через GitHub. После клонирования репозитория выполните команду npm run dev Тестируйте изменения и отправляйте Pull Requests, чтобы добавить новые функции. Среди распространенных улучшений - оптимизация отображения на мобильных устройствах, добавление новой темы или усовершенствование функции предупреждающих слов.
  • Пример работы: в src/components каталог, чтобы найти Editor.tsxЧтобы добавить журнал, показывающий результаты анализа Llama 4, выполните команду npm run dev Протестируйте, а затем отправьте код.
• Оптимизация для мобильных устройств (в разработке)
  В настоящее время сгенерированный код подходит для настольных компьютеров, а для мобильных устройств он может быть тесноват. Власти планируют оптимизировать отзывчивый макет, и пользователи также могут запросить "сгенерировать код, дружественный к мобильным устройствам" через подсказку.
  • Пример работы: После загрузки скриншота введите запрос "Оптимизировать под макет мобильного экрана", и ИИ настроит CSS (например, с помощью flex возможно grid (Макет).

Технические детали

Технологический стек napkins.dev включает в себя:

• Ллама 4: Meta предоставляет визуальную языковую модель, отвечающую за анализ скриншотов и генерацию логического кода.
• Совместный искусственный интеллект: Предоставляет сервисы рассуждений для Llama 4, чтобы обеспечить эффективную обработку изображений и текста.
• Песочница: Используется для предварительного просмотра кода в реальном времени для имитации реальной среды выполнения.
• AWS S3: Храните загруженные скриншоты для быстрого доступа.
• Next.js и Tailwind CSS: Создает внешний интерфейс и стили, а генерируемый код основывается на этом фреймворке.
• Геликон: Мониторинг производительности модели и вызовов API.
• Правдоподобный: Анализ данных о доступе к сайту для оптимизации работы пользователей.

сценарий применения

1. Быстрое прототипирование
   Менеджеры по продуктам загружают эскизы интерфейсов для создания готовых демонстрационных приложений, которые можно показать команде или клиентам, что экономит время разработки.
2. Передовые средства обучения
   Новички загружают простые проекты, генерируют код, а затем анализируют компоненты React и стили Tailwind, чтобы быстро освоить современную фронтенд-разработку.
3. Развитие хакатона
   Команда Programming Marathon использует инструменты для превращения дизайна в код, уделяя особое внимание логике бэкенда или расширению функций для повышения эффективности.
4. Создание персонального проекта
   Разработчики загружают дизайн блога или портфолио, генерируют код и развертывают его с помощью нескольких настроек. Это подходит для быстрого создания персональных сайтов в Интернете.
5. Проверка конструкции
   UI-дизайнеры загружают скриншоты, создают интерактивные прототипы, тестируют компоновку интерфейса и пользовательский опыт, а также оптимизируют дизайнерские решения.

QA

1. Какие условия необходимо выполнить для получения снимка экрана?
   Скриншоты должны быть в формате PNG или JPG, их размер не должен превышать 5 МБ, они должны быть четкими и содержать понятные элементы (например, кнопки, поля ввода). Сложный дизайн может привести к неточной генерации, поэтому рекомендуется начинать с простого интерфейса.
2. Подходит ли сгенерированный код для производственной среды?
   Сгенерированный код подходит для прототипирования и содержит базовые компоненты React и стили Tailwind. В производственных средах необходимо проверить логику кода, безопасность и добавить внутреннюю функциональность.
3. Нужно ли платить за пользование сайтом napkins.dev?
   Проект полностью бесплатный и с открытым исходным кодом. Для локальной работы требуется ключ Together AI (доступен бесплатный кредит) и сервис AWS S3 (может взиматься небольшая плата за хранение).
4. Как улучшить качество генерируемого кода?
   Используйте понятные, простые скриншоты и избегайте динамических эффектов. После создания вы можете подправить код с помощью подсказок или принять участие в разработке на GitHub, чтобы оптимизировать модель.
5. Какие фреймворки поддерживаются?
   В настоящее время генерирует код на основе Next.js и Tailwind CSS, а в будущем может поддерживать другие фреймворки (например, Vue или Svelte), в зависимости от вклада сообщества.