Разработка форм при помощи 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, так что пользуйтесь на здоровье! Ведь искусственный интеллект – это действительно ресурсоемкий актив, который иногда не стоит развертывать локально, ведь публичные модели и так вполне можно использовать для работы с формами.