Генерируем формы по 200 полей через ИИ
Некоторое время назад посчастливилось участвовать в цифровизации бизнеса, где на условный товар под продажу приходится более друхста полей ввода с данными. Было решено использовать шаблонизатор, получающий на вход JSON шаблон и отдающий на выход адаптивную верстку
Playground, где можно отладить шаблон вне контекста приложения
В ходе работы начали расширять штат сотрудников. Возникла потребность в корпоративной вики. Тем не менее, вместо Confluence, для удобства, решили писать Markdown файлы в отдельный Github репо.
Спустя некоторое время, Microsoft зарелизили Bing Copilot — бесплатный ChatGPT-4 с контекстом на несколько сообщений. Я решил попробовать залить в него промпт
Переписка с Bing Copilot — бесплатный ChatGPT-4
Господа, скажу кратко. Оно делает верстку.
Однако, проблема ИИ заключается в том, что окно контекста не может загрузить все слои абстракции проекта сразу, поэтому при генерации кода нам приходится вручную изменять запрос в зависимости от текущего уровня абстракции.
То есть, если меняем JSX, хуки сам не отладит.
Поле показывается исходя из пользовательского ввода
Бизнесу не нужны статические формы. Исходя из пользовательского ввода, нужно скрывать/показывать поля ввода. Если использовать для этого Conditional Rendering, AI захлебнется из-за нехватки контекстного окна. Однако, можно вынести видемость поля в чистую функцию, тогда, все генерируется нормально
import { TypedField, FieldType } from "react-declarative";
export const fields: TypedField[] = [
{
type: FieldType.Items,
title: 'A sample field',
placeholder: 'Multiple selection',
name: 'items',
itemList: ['a', 'b', 'c'],
isVisible: (data) => data.visible,
isDisabled: (data) => data.disabled,
},
{
type: FieldType.Checkbox,
title: 'Mark as visible',
defaultValue: true,
name: 'visible',
},
{
type: FieldType.Checkbox,
title: 'Mark as disabled',
defaultValue: false,
name: 'disabled',
},
];
В этом коде код, вычисляющий видимость поля ввода, содержится в одном синтаксическом блоке вместе с ним. Таким образом, мы можем дробить форму на сегменты и планомерно скармливать их ИИ, не исчерпывая контекстное окно
Вот несколько инструментов, которые помогут вам автоматически генерировать формы. Рассмотрите их для своего проекта! Сбор пользовательского ввода это самая неприятная вещь при цифровизации чего-либо
