Создание Diagram на основе ИИ

DHTMLX Diagram можно интегрировать с ИИ для создания приложений для построения диаграмм на основе ИИ. Мы подготовили пример того, как использовать DHTMLX Diagram с ИИ для создания приложения, формирующего организационную диаграмму на основе запроса, сформулированного на естественном языке.

Демонстрационное приложение включает такие функции, как преобразование текста в диаграмму, генерацию JSON на основе ИИ, мгновенный живой предпросмотр готовой диаграммы и встроенный редактор кода для просмотра и корректировки сгенерированных данных JSON с обновлением предпросмотра диаграммы «на лету». Дополнительную информацию см. в соответствующем репозитории GitHub.

Настройка проекта

Чтобы скачать проект, клонируйте репозиторий с помощью следующей команды:

git clone diagram-org-chart-builder-ai-demo

затем перейдите в репозиторий проекта с помощью команды ниже:

cd diagram-org-chart-builder-ai-demo

Установка зависимостей

Для установки зависимостей и запуска приложения вам понадобится менеджер пакетов. В этом руководстве используется npm. Установите демонстрационное приложение, выполнив следующую команду:

npm install

Настройка переменных окружения

Затем необходимо настроить переменные окружения. Для этого создайте новый файл с именем .env внутри директории diagram-org-chart-builder-ai-demo, скопировав содержимое файла env.sample. Новый созданный файл .env будет хранить ваши ключи и настройки. Заполните обязательные значения, указанные ниже:

diagram-org-chart-builder-ai-demo/.env

# --- Конфигурация OpenAI API ---
OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere
OPENAI_BASE_URL=https://api.openai.com/v1

# --- Конфигурация безопасности ---
CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500

# --- Конфигурация сервера (опционально) ---
PORT=3001

К сведению

НЕ загружайте файл .env, так как он содержит конфиденциальную информацию!

Ниже приведено описание переменных файла .env:

• OPENAI_API_KEY: (Обязательно) Ваш секретный API-ключ для сервиса ИИ.
• OPENAI_BASE_URL: Конечная точка API для сервиса ИИ. Можно изменить для использования прокси или другого провайдера, совместимого с OpenAI API.
• CORS_ALLOWED_ORIGINS: Важная настройка безопасности. Это список веб-адресов, разделённых запятыми, которым разрешено подключаться к вашему бэкенд-серверу. Для продакшена вы обязательно должны изменить это значение на URL вашего публичного фронтенда (например, https://myapp.com).
• PORT: (Опционально) Номер порта, на котором будет работать сервер. Если не задан, по умолчанию используется 3001.

Запуск приложения

Чтобы запустить приложение, выполните следующую команду в директории приложения:

npm start // это обязательная команда запуска

В терминале вы должны увидеть следующий вывод:

Server started on port 3001.

Затем откройте веб-браузер и перейдите по адресу http://localhost:3001, чтобы увидеть приложение, готовое к генерации диаграмм.

Как работает демонстрационное приложение

Ниже перечислены основные шаги преобразования текстового запроса в диаграмму:

• Сначала пользователь вводит текстовое описание диаграммы простыми словами, например: «Диаграмма с топ-менеджером и пятью отделами, в каждом из которых по два сотрудника».
• Затем запрос отправляется на бэкенд, где сервис ИИ генерирует структурированную конфигурацию JSON на основе запроса.
• После этого фронтенд получает полученные данные и мгновенно отрисовывает интерактивную диаграмму DHTMLX.
• Далее соответствующий код JSON отображается в редакторе кода под диаграммой. Пользователь может настроить код и редактировать итоговую диаграмму в режиме реального времени.
• Наконец, пользователь может сохранить сгенерированные данные в файл JSON или экспортировать диаграмму в файл PDF или PNG.