Разработка форм при помощи AI

Есть ли смысл тратить время на разработку форм с нуля, если есть возможность сгенерировать их? С каждым месяцем все больше людей склоняются к тому, что «не стоит». Но есть нюанс: вопрос безопасности. В этой статье мы поговорим о том, в чем заключаются угрозы работы с LLM для генерации, а также рассмотрим пример создания формы на базе DeepSeek.

Обилие LLM моделей, обученных под различные типы задач и размещенных в публичном доступе, безусловно соблазняет разработчика. Но за использованием публичных AI сервисов кроется угроза, о которой не принято говорить. И угроза эта серьезна, на первый взгляд может быть и не очевидная – утечка данных. Если верить цифрам из открытых источников, то на 2025 год до 77% утечек могут быть связаны с генеративным AI. С точки зрения разработки основной проблемой может быть утечка кода. Дето в том, что многие LLM производят дообучение (fine-tuning) модели на данных, предоставляемых пользователем. К каким же последствиям могут привести утечки кодовой базы в LLM? Давайте рассмотрим некоторые риски:

Таблицу можно еще продолжить, то даже с приведенными выше историями нет желания сталкиваться.

Что же делать?

Есть несколько вариантов:

·       установить приватную LLM модель и использовать ее во внутреннем контуре разработки;

·       установить на рабочее место программиста легковесную LLM;

·       использовать публичные LLM модели, но только на открытых данных;

·       отказаться от генеративного AI.

Последний пункт точно не подходит. Определенно, отказаться от генеративного AI мы не готовы. Но самостоятельная установка LLM сервиса для компании, например, из 100 человек выльется в кругленькую сумму. К тому же локальные установки имеют низкую точность и скорость. Исходя из этого, будем рассматривать использование публичных AI сервисов, но с учетом того, что мы предоставим ему только ту информацию, которую мы будем считать публичной.

Давайте посмотрим, что мы отдаем пользователю, когда он загружает страницу:

— html разметку;

— Java Script сценарии;

— CSS таблицы;

— структурированные данные запросов и ответов.

Так как мы уже добровольно отдали все вышеперечисленные данные, то будем считать, что для нас они не являются конфиденциальными.

Здесь я бы хотел обратить внимание не на сами данные, а на структуры данных. В первую очередь меня интересует структура данных запросов к API. Исходя из того, что данные мы передаем в формате JSON, то структуру этих данных можно описать по стандартам JSON Schema (https://json-schema.org/).

Готовим форму при помощи LLM

Давайте вернемся к предыдущему примеру и сделаем схему при помощи LLM. Для этого нам понадобится любая ваша любимая LLM и JSON схема, которой должна следовать LLM. Я уже подготовил файл схемы, описывающий целевую схему данных, в качестве LLM я возьму DeepSeek (https://www.deepseek.com/ ). Далее загружаю схему в DeepSeek и пишу промпт: «Напиши JSON схему, в которой есть свойства: name — строка, phone — строка, zip — число, address — строка, comment — строка, agreement — булево значение. Свойства name и phone объединены в свойство personal. Свойства zip и address объединены в свойство address. Все поля не обязательны для заполнения и могут оставаться пустыми. Полученная схема должна валидироваться схемой из файла.»

В результате получаю схему:

export const exampleScheme ={  "type": "object",  "properties": {    "personal": {      "type": "object",      "properties": {        "name": {          "type": "string"        },        "phone": {          "type": "string"        }      },      "additionalProperties": false    },    "address": {      "type": "object",      "properties": {        "zip": {          "type": "number"        },        "address": {          "type": "string"        }      },      "additionalProperties": false    },    "comment": {      "type": "string"    },    "agreement": {      "type": "boolean"    }  },  "additionalProperties": false} as const;

Теперь я воспользуюсь пакетом «@cloudx/react-ui-kit-forms-builder» и создам реактивную форму на основе полученной схемы:

const formModel = buildFormModel(exampleScheme);

Всё, модель готова!

Теперь я поступлю так же и с UI составляющей. Здесь я также воспользуюсь утверждением, что разметка страницы не является конфиденциальной информацией и создам схему разметки. Так как в наших проектах мы используем UIKit собственной разработки, то мне достаточно создать схему расположения элементов на странице, а не опускаться на уровень HTML верстки. Файл такой схемы я также заготовил заранее. Дальше загружаю схему в DeepSeek и пишу промпт: «Напиши JSON схему, в которой есть поля: name — input, phone — input, zip — number, address — input, comment — text area, agreement — checkbox. Полученная схема должна валидироваться схемой из файла».

В полученном результате я скорректирую свойство path объекта control согласно полученной выше модели данных:

export const UiScheme = {  "elements": [    {      "type": "field",      "label": "Name",      "control": {        "type": "input",        "path": "personal/name",        "placeholder": "Enter your full name",        "size": "md"      }    },    {      "type": "field",      "label": "Phone",      "control": {        "type": "input",        "path": "personal/phone",        "placeholder": "+1 (555) 000-0000",        "mode": "tel",        "size": "md"      }    },    {      "type": "field",      "label": "ZIP Code",      "control": {        "type": "number",        "path": "address/zip",        "placeholder": "12345",        "minValue": 0,        "maxValue": 99999,        "step": 1,        "hideSpinButtons": false,        "size": "md"      }    },    {      "type": "field",      "label": "Address",      "control": {        "type": "input",        "path": "address/address",        "placeholder": "Street, city, state",        "size": "md"      }    },    {      "type": "field",      "label": "Comment",      "control": {        "type": "textarea",        "path": "comment",        "placeholder": "Additional information...",        "autoResize": true,        "maxLength": 500,        "rows": 4,        "size": "md"      }    },    {      "type": "field",      "label": "I agree to the terms and conditions",      "control": {        "type": "checkbox",        "path": "agreement",        "checked": false,        "inline": true,        "reverse": false      }    }  ]};

Теперь я повторно воспользуюсь пакетом «@cloudx/react-ui-kit-forms-builder» и создам UI формы:

const formElement = buildFormUI({                model: formModel,                scheme: UiScheme,            });

Последним штрихом будет установка формы на страницу:

<FormLayout>{formElement}</FormLayout>

Получаем вот такую форму:

И с такой моделью на выходе:

Заключение

В результате мы получили готовую форму, используя ресурсы публичной модели, но при этом не компрометируя никакой информации. Это еще один пример эффективного применения нашей библиотеки @cloudx/react-ui-kit-forms-builder, так что пользуйтесь на здоровье! Ведь искусственный интеллект – это действительно ресурсоемкий актив, который иногда не стоит развертывать локально, потому что публичные модели и так вполне можно использовать для работы с формами.