Генерація коду та каркасу
Огляд
Після того, як ви анотували своє зображення обмежувальними рамками та призначили поведінку, ви можете створити робочий код компонента або каркасний макет. ШІ використовує положення обмежувальної рамки, типи елементів і напрямки поведінки, щоб отримати точні результати.
Бічна панель AI Assistant
Панель AI Assistant — це права бічна панель, яка використовується для налаштування та запуску створення коду або каркасу. Він містить такі елементи керування:
Вибір моделі бачення
Виберіть, яку модель бачення штучного інтелекту використовувати для аналізу ваших зображень і створення результату. Різні моделі можуть мати різний рівень деталізації та точності.
Селектор рамок
Виберіть цільову структуру для створення коду (наприклад, React, Vue, Svelte). Згенерований код використовуватиме синтаксис і шаблони вибраного фреймворку.
Компоненти / Вкладки каркасів
Перемикайтеся між генеруванням коду компонента (вкладка «Компоненти») або каркасними макетами (вкладка «Каркаси») із ваших анотованих зображень.
Групи зображень
Перелічує всі ваші групи зображень для поточного реверсивного проекту. Виберіть групу, щоб переглянути її зображення та налаштувати генерацію. Кожна група показує свою кількість зображень.
Генерувати блоки
Натисніть, щоб розпочати процес генерації ШІ. Штучний інтелект аналізує зображення вибраної групи разом із будь-якими анотаціями та поведінкою обмежувальної рамки, щоб створити результат.
Режими виведення
Згенерувати код
Перетворіть анотоване зображення на робочий код компонента для вашої цільової структури (React, Vue, Svelte тощо). Згенерований код містить макет, стилі та будь-яку поведінку, яку ви визначили для обмежувальних рамок.
Створіть каркас
Експортуйте анотоване зображення як каркасний макет, який відкривається в інструменті «Каркас». Кожна обмежувальна рамка стає каркасним елементом, який можна додатково вдосконалювати, переставляти та підключати до інших екранів.
Особливості генерації коду
Вибір каркаса
Виберіть цільову структуру перед генерацією. Серед підтримуваних фреймворків React, Vue, Svelte, SolidJS, Angular тощо.
Картування поведінки
Поведінки, призначені обмежувальним рамкам, транслюються в обробники подій, логіку навігації, моди та інший інтерактивний код на виході.
Точність макета
ШІ використовує положення та розміри обмежувальної рамки із зображення, щоб створити макет, який точно відповідає оригінальному візуальному дизайну.
Зберегти в блоки
Згенеровані компоненти можна зберігати безпосередньо в бібліотеці Blocks для повторного використання в проектах.
Додати до проекту
Вставте згенерований код безпосередньо в поточний проект як нові файли компонентів.
Поради
Щоб отримати найкращі результати, використовуйте зображення високої роздільної здатності з чіткими елементами інтерфейсу. Щільно намалюйте обмежувальні рамки навколо кожного елемента для точнішого створення коду. Призначте конкретну поведінку, а не розпливчасті описи — «відкриває режим реєстрації» працює краще, ніж «щось робить». AI найкраще працює зі стандартними веб-макетами та типовими шаблонами інтерфейсу користувача.