Deep Chat: компонент чата с искусственным интеллектом для быстрой интеграции с веб-сайтом

Общее введение

Deep Chat - это компонент чата с искусственным интеллектом с открытым исходным кодом, предназначенный для веб-разработчиков. Разработанный Овидиусом Парсюнасом и размещенный на GitHub, он в настоящее время имеет более 2 тысяч звезд. Пользователи могут интегрировать его в свои веб-сайты с помощью простой настройки, поддерживая взаимодействие с основными интерфейсами ИИ, такими как OpenAI, HuggingFace, или с пользовательскими сервисами. Основным преимуществом Deep Chat является его высокая настраиваемость, гибкая настройка стиля интерфейса и функциональности. Deep Chat также поддерживает голосовой ввод, преобразование текста в речь и загрузку файлов, и даже может запускать небольшие модели ИИ непосредственно в браузере без поддержки сервера. Официальная документация тщательно проработана и изобилует примерами, так что приступить к работе не составит труда.

Список функций

• Поддерживает взаимодействие с OpenAI, HuggingFace, Cohere, Azure и другими интерфейсами ИИ.
• Предоставляет пользовательские функции подключения к сервисам, которые можно использовать через конфигурацию API.
• Поддерживает голосовой ввод и преобразование текста в речь, позволяя пользователям взаимодействовать с помощью голоса.
• Позволяет загружать мультимедийные файлы, делая снимки с помощью камеры и записывая их с помощью микрофона.
• Поддержка форматирования Markdown для удобного представления кода и структурированного текста.
• Предоставляет настройки аватара и имени, а также возможность группировки сообщений.
• Включает вводную панель и динамические всплывающие окна, чтобы помочь пользователям разобраться в функциях.
• Поддерживает запуск небольших моделей искусственного интеллекта в браузере без поддержки внутреннего интерфейса.
• Совместимость с основными фреймворками пользовательского интерфейса, такими как React, Vue, Angular и так далее.
• Позволяет настраивать стили интерфейса, включая внешний вид окна сообщения и кнопок.

Использование помощи

Шаги по установке и использованию Deep Chat ясны и понятны. Ниже представлено подробное руководство, которое поможет вам получить полную картину от установки до эксплуатации.

Процесс установки

1. Скачать код проекта
   Выполните следующую команду в терминале, чтобы получить исходный код Deep Chat:

git clone https://github.com/OvidijusParsiunas/deep-chat.git

2. Перейдите в каталог и установите зависимости
   Перейдите в папку с проектом:

cd deep-chat

Установите необходимые зависимости:

npm install

3. Строительные компоненты
   Выполните команду build, чтобы сгенерировать файлы, пригодные для использования:

npm run build

Если вам нужно просмотреть действие кода в реальном времени, вы можете использовать:

npm run build:watch

4. локальный тест
   Запустите локальный сервер:

npm run start

Откройте браузер и посетите http://localhostВы видите экран чата.

5. Для пользователей React (необязательно)
   Если вы используете React, установите специальную версию:

npm install deep-chat-react

Введено в код:

import 'deep-chat-react';

6. Создайте однофайловый пакет (необязательно)
   Если вам нужен отдельный JS-файл, запустите его:

   npm run build:bundle
   

   Выходной файл находится в папке dist/deepChat.bundle.js.

Подключение служб искусственного интеллекта

Deep Chat поддерживает несколько способов подключения и легко настраивается.

• Соединения OpenAI
  Добавьте следующий код в HTML:

  <deep-chat directConnection='{"openAI": {"key": "你的API密钥"}}' />
  

  Примечание: Этот метод можно использовать для разработки, а для использования в режиме онлайн рекомендуется скрывать ключ с помощью прокси-сервиса.

• Подключение к Azure OpenAI
  Настройте службу Azure:

  <deep-chat directConnection='{"azure": {"openAI": {"key": "你的密钥", "endpoint": "你的端点"}}}' />
  

• Индивидуальные услуги
  устанавливать request атрибут для взаимодействия с собственным API:

  <deep-chat request='{"url": "https://你的服务地址/chat"}' />
  

  Сервис должен поддерживать форматы запросов и ответов Deep Chat, как указано в разделе deepchat.dev/docs/connect.

• Корректировка данных с помощью перехватчиков
  Если форматы сервисов не совпадают, используйте перехватчик для их корректировки:

  <deep-chat request='{"url": "https://你的服务地址/chat"}' interceptor='{"onSend": "调整请求数据函数"}' />
  

Включение голосовых и мультимедийных функций

Голосовые и мультимедийные функции Deep Chat просты в использовании.

• Включите голосовой ввод и вывод
  Добавить атрибуты:

  <deep-chat speechToText="true" textToSpeech="true" />
  

  Нажмите на значок микрофона, чтобы ввести сообщение голосом, и ответ будет автоматически зачитан вслух.

• Фотографирование и запись
  Включите камеру и микрофон:

  <deep-chat camera="true" microphone="true" />
  

  Нажмите на камеру, чтобы сделать снимок, или на микрофон, чтобы записать, и файл будет загружен прямо в окно чата.

Индивидуальные стили и функции

Интерфейс и функциональность могут быть настроены по желанию.

• Настройка стиля сообщений
  Изменение цвета пузырька сообщения пользователя:

  <deep-chat messageStyles='{"user": {"bubble": {"backgroundColor": "blue"}}}' />
  

• Пакетная передача сообщений
  Включите группировку сообщений:

  <deep-chat groupedMessages="true" />
  

• Поддержка уценки
  Включает рендеринг Markdown:

  <deep-chat markdown="true" />
  

  импорт # 标题 будет отображаться в формате заголовка.

Запуск моделей искусственного интеллекта в браузере

Используйте ИИ без серверов.

• Установка модуля веб-модели
  Выполнить команду:

  npm install deep-chat-web-llm
  

• Создание местных моделей
  Свойства конфигурации:

  <deep-chat webModel='{"model": "RedPajama"}' />
  

  Поддерживаются такие модели, как RedPajama, TinyLlama и т.д.

Пример потока операций

1. Добавить <deep-chat> Ярлыки.
2. Настройте интерфейсы искусственного интеллекта, такие как OpenAI или пользовательские сервисы.
3. Введите текст или задайте вопрос голосом через микрофон.
4. Просматривайте ответы ИИ и прослушивайте их с помощью функции преобразования текста в речь.
5. Загружайте фотографии или записи и настраивайте стиль интерфейса.

Для получения более подробной информации посетите deepchat.devОфициальная документация и примеры доступны.

сценарий применения

1. Персональный сайт интеллектуального помощника
   Включите Deep Chat в свой блог или сайт портфолио, где пользователи могут задавать вопросы о содержимом с помощью голоса или текста, чтобы повысить интерактивность.
2. Поддержка клиентов платформы электронной коммерции
   Сэкономьте на трудозатратах, используя Deep Chat для ответов на такие распространенные вопросы, как статус заказа и процесс возврата.
3. Интерактивные инструменты для онлайн-образования
   Студенты задают вопросы о сложных моментах курса через Deep Chat, а ИИ отвечает на них в режиме реального времени, что делает его подходящим для дистанционного обучения.

QA

1. Какие сервисы искусственного интеллекта поддерживает Deep Chat?
   Поддержка OpenAI, HuggingFace, Cohere, Stability AI, Azure и AssemblyAI, а также взаимодействие с пользовательскими сервисами.
2. В каких рамках его можно использовать?
   Поддержка React, Vue, Angular, Svelte, Next.js и других основных фреймворков, конкретные примеры см. deepchat.dev/examples/frameworks.
3. Как загрузить сообщение истории?
   пользоваться loadHistory Перехватчик асинхронной загрузки истории, поддержка листания, подробности см. в deepchat.dev/docs/interceptors.