Начало работы с чатом с помощью собственного примера данных для JavaScript

В этой статье показано, как развернуть и запустить образец приложения "Чат с вашими данными" на JavaScript. В этом примере реализовано приложение для чата с помощью JavaScript, Azure OpenAI Service и восстановления дополненной генерации (RAG) в службе поиска Azure AI для получения ответов об арендных объектах. Приложение для чата по аренде недвижимости заполняется информацией из файлов markdown (*.md), включая политику конфиденциальности, условия использования и информацию о поддержке.

• Демо JavaScript — видео полного стека
• Демонстрация JavaScript — видео о фронтенде с Python в качестве серверной части

Следуя инструкциям в этой статье, вы получите следующее:

• Разверните чат-приложение в Azure.
• Получите ответы о информации на веб-сайте арендной недвижимости.
• Измените параметры, чтобы изменить поведение ответов.

Завершив эту статью, вы можете начать изменение нового проекта с помощью пользовательского кода и данных.

Эта статья является частью коллекции статей, демонстрирующих создание приложения чата с помощью Службы OpenAI Azure и поиска ИИ Azure. Другие статьи в коллекции включают:

• .NET
• Java
• Python

Примечание.

В этой статье в качестве основы для примеров и рекомендаций используются один или несколько шаблонов приложений ИИ. Шаблоны приложений ИИ предоставляют вам хорошо поддерживаемые и простые в развертывании эталонные реализации, которые помогают обеспечить высококачественную отправную точку для приложений ИИ.

Обзор архитектуры

Простая архитектура приложения чата показана на следующей схеме:

Схема, показывающая архитектуру от клиента к бэкэнд приложению.

Пример приложения чата создан для вымышленной компании Contoso Real Estate, и интеллектуальный интерфейс чата позволяет своим клиентам задавать вопросы о поддержке использования своих продуктов. Пример данных содержит набор документов, описывающих условия обслуживания, политику конфиденциальности и руководство по поддержке. Документы включаются в архитектуру во время развертывания.

Приложение выполняется из нескольких компонентов, в том числе:

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

Схема, на которой показаны службы Azure и их поток интеграции для интерфейсного приложения, поиска и приема документов.

Себестоимость

Большинство ресурсов в этой архитектуре используют базовую или ценовую категорию потребления. Цены на потребление основаны на использовании, что означает, что вы оплачиваете только то, что вы используете. Чтобы завершить эту статью, взимается плата, но она минимальна. Когда вы закончите работу со статьей, вы можете удалить ресурсы, чтобы избежать дальнейших затрат.

Узнайте больше о стоимости в репозитории примеров.

Предварительные условия

Среда контейнера для разработки доступна со всеми зависимостями, необходимыми для завершения работы над этой статьей. Контейнер разработки можно запустить в GitHub Codespaces (в браузере) или локально с помощью Visual Studio Code.

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

• подписка Azure — оформите бесплатную подписку.
• Разрешения учетной записи Azure — ваша учетная запись в Azure должна иметь разрешения Microsoft.Authorization/roleAssignments/write, такие как Администратор доступа пользователей или Владелец.
• учетная запись GitHub;

• Подписка на Azure: начните бесплатную подписку.
• Разрешения учетной записи Azure — ваша учетная запись Azure должна иметь разрешения Microsoft.Authorization/roleAssignments/write, такие как User Access Administrator или Owner.
• Интерфейс командной строки Azure Developer CLI
• Docker Desktop — запустите Docker Desktop, если он еще не запущен
• Visual Studio Code
• Расширение контейнера разработки

Открытие среды разработки

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

GitHub Codespaces запускает контейнер разработки, управляемый GitHub, с Visual Studio Code для веба в качестве пользовательского интерфейса. Для наиболее простой среды разработки используйте GitHub Codespaces, чтобы у вас были правильные средства разработчика и зависимости, предварительно установленные для выполнения этой статьи.

Внимание

Все учетные записи GitHub могут использовать Codespaces в течение до 60 часов бесплатно каждый месяц на двухядровых экземплярах. Дополнительные сведения см. в ежемесячно включаемом в тариф GitHub Codespaces хранилище и базовом времени работы.

1. Запустите процесс создания нового Codespace на ветке main репозитория Azure-Samples/azure-search-openai-javascript GitHub.

2. Щелкните правой кнопкой мыши следующую кнопку и выберите "Открыть ссылку" в новом окне , чтобы среда разработки и документация были доступны одновременно.

   Открыть в GitHub Codespaces

3. На странице "Создание пространства кода" просмотрите параметры конфигурации пространства кода и выберите "Создать новое пространство кода"

   Снимок экрана с подтверждением перед созданием нового кодового пространства.

4. Дождитесь запуска кодового пространства. Этот процесс запуска может занять несколько минут.

5. В терминале в нижней части экрана войдите в Azure с помощью Интерфейса командной строки разработчика Azure.

   azd auth login --use-device-code
   

6. Скопируйте код из терминала и вставьте его в браузер. Следуйте инструкциям по проверке подлинности с помощью учетной записи Azure.

7. Остальные задачи в этой статье выполняются в контексте этого контейнера разработки.

Расширение "Контейнеры разработки" для Visual Studio Code требует установки Docker на локальном компьютере. Расширение размещает контейнер разработки локально с помощью узла Docker с правильными средствами разработчика и предустановленными зависимостями для выполнения этой статьи.

1. Создайте локальный каталог на компьютере для проекта.

   mkdir my-intelligent-app && cd my-intelligent-app
   

2. Откройте Visual Studio Code в этом каталоге:

   code .
   

3. Откройте новый терминал в Visual Studio Code.

4. Выполните следующую команду AZD, чтобы перенести репозиторий GitHub на локальный компьютер.

   azd init -t azure-search-openai-javascript
   

5. Откройте палитру команд, найдите и выберите "Контейнеры разработки": откройте папку в контейнере, чтобы открыть проект в контейнере разработки. Дождитесь, пока контейнер разработки не откроется, прежде чем продолжить.

6. Войдите в Azure с помощью Интерфейса командной строки разработчика Azure.

   azd auth login
   

   Скопируйте код из терминала и вставьте его в браузер. Следуйте инструкциям по проверке подлинности с помощью учетной записи Azure.

7. Остальные упражнения в этом проекте происходят в контексте этого контейнера разработки.

Развертывание и запуск

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

Развертывание приложения чата в Azure

Внимание

Ресурсы Azure, созданные в этом разделе, несут немедленные затраты, в первую очередь из ресурса Azure AI Search. Эти ресурсы могут начислять расходы, даже в случае, если вы прерываете команду до её полного выполнения.

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

   azd up
   

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

3. При появлении запроса выберите подписку для создания ресурсов.

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

5. Если вам будет предложено указать расположение для модели OpenAI, выберите расположение, которое находится рядом с вами. Если то же местоположение доступно в качестве вашего первого выбора, выберите его.

6. Дождитесь развертывания приложения. Для завершения развертывания может потребоваться 5–10 минут.

7. После успешного развертывания приложения в терминале отображается URL-адрес.

8. Выберите URL-адрес с меткой Deploying service web, чтобы открыть приложение чата в браузере.

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

Использование приложения чата для получения ответов из файлов Markdown

Приложение чата предварительно загружено информацией по аренде из Каталога файлов Markdown. Вы можете использовать приложение чата, чтобы задать вопросы о процессе аренды. В следующих шагах описан процесс использования приложения чата.

1. В браузере выберите или введите Какова политика возврата в текстовом поле в нижней части страницы.

   Снимок экрана первого ответа в приложении чата.

2. В ответе выберите "Показать мыслительный процесс".

   Скриншот первого ответа приложения чата с выделенным в красной рамке показом процесса мышления.

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

   Вкладка	Описание
   Процесс мысли	Это сценарий взаимодействия в чате. Вы можете просмотреть системную подсказку (content) и ваш вопрос пользователю (content).
   Вспомогательное содержимое	Сюда входят сведения для ответа на ваш вопрос и исходный материал. Количество ссылок на исходные материалы отмечается в параметрах разработчика. Значение по умолчанию — 3.
   Источник	Откроется исходная страница, содержащая ссылку.

4. По завершении нажмите кнопку скрыть, обозначаемую X над вкладками.

Использование параметров приложения чата для изменения поведения ответов

Аналитика приложения чата определяется моделью OpenAI и параметрами, которые используются для взаимодействия с моделью.

Снимок экрана параметров разработчика чата.

Настройка	Описание
Переопределение шаблона запроса	Это запрос, используемый для создания ответа.
Получение этого большого количества результатов поиска	Это количество результатов поиска, используемых для создания ответа. Эти источники отображаются в ходе мыслей и содержательном материале ссылки.
Исключить категорию	Это категория документов, исключенных из результатов поиска.
Используйте семантический ранжировщик для извлечения	Это функция Azure AI Search, использующая машинное обучение для повышения релевантности результатов поиска.
Использование сводок в контекстном запросе вместо целых документов	Когда обе Use semantic ranker и Use query-contextual summaries проверены, LLM использует подписи, извлеченные из ключевых отрывков, вместо всех отрывков, в документах с наивысшим рейтингом.
Предложить дополнительные вопросы	Предложите в приложении чата дальнейшие вопросы на основе ответа.
Режим извлечения	Vectors + Text означает, что результаты поиска основаны на тексте документов и их векторных представлениях. Векторы означает, что результаты поиска основаны на встраиваниях документов. Текст означает, что результаты поиска основаны на тексте документов.
Ответы на завершение потокового чата	Передача ответа вместо ожидания, пока полный ответ не будет доступен.

Ниже описан процесс изменения параметров.

1. В браузере перейдите на вкладку "Параметры разработчика ".

2. Установите флажок «Использовать сводки на основе контекста запроса вместо» и задайте тот же вопрос ещё раз.

   What happens if the rental doesn't fit the description?
   

   Чат вернулся с более кратким ответом, например следующим.

Очистка ресурсов

Очистка ресурсов Azure

Ресурсы Azure, созданные в этой статье, учитываются в счете вашей подписки Azure. Если вы не ожидаете, что эти ресурсы потребуются в будущем, удалите их, чтобы избежать дополнительных расходов.

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

azd down --purge

Очистить пространства кода GitHub

Удаление среды GitHub Codespaces гарантирует, что вы можете максимально увеличить объем бесплатных прав на базовые часы, которые вы получаете для вашей учетной записи.

Внимание

Дополнительные сведения о правах учетной записи GitHub см. в разделе Ежемесячно включенные хранилище и основные часы для GitHub Codespaces.

1. Войдите на панель мониторинга GitHub Codespaces.

2. Найдите текущие запущенные Codespaces из репозитория GitHub Azure-Samples/azure-search-openai-javascript.

   Снимок экрана всех запущенных Codespaces, включая их статус и шаблоны.

3. Откройте контекстное меню для пространства кода и нажмите кнопку "Удалить".

   Снимок экрана — контекстное меню для одного пространства кода с выделенной опцией удаления.

Не обязательно очищать локальную среду, но вы можете остановить работающий контейнер разработки и вернуться к запуску Visual Studio Code в среде локальной рабочей области.

1. Откройте Command Palette, найдите команды Dev Containers, а затем выберите Dev Containers: Reopen Folder Locally.

   ```html Снимок экрана параметра палитры команд для повторного открытия текущей папки в локальной среде. ```

Совет

Visual Studio Code останавливает запущенный контейнер разработки, но контейнер по-прежнему существует в Docker в остановленном состоянии. Вы всегда можете удалить экземпляр контейнера, образ контейнера и тома из Docker, чтобы освободить больше места на локальном компьютере.

Получить помощь

Этот репозиторий предлагает сведения об устранении неполадок.

Если ваша проблема не решена, добавьте её в раздел Issues репозитория.

Следующие шаги

• Получите исходный код для примера, используемого в этой статье.
• Архитектура решения для создания приложения чата с использованием Azure OpenAI по лучшим практикам.
• Управление доступом в генеративных приложениях ИИ с помощью Azure AI Search
• Создание готового к использованию в предприятиях решения OpenAI с помощью Управления API в Azure
• Превосходящий векторный поиск с гибридными возможностями извлечения и ранжирования

• Узнайте больше о том, как AZD используется в этом шаблоне:
  • запись блога технологического сообщества
  • видеосерия о Реакторе