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

В этой статье показано, как развернуть и запустить чат с примером данных для JavaScript. В этом примере реализовано приложение чата с помощью JavaScript, Службы Azure OpenAI и получения дополненного поколения (RAG) в службе "Поиск ИИ Azure" , чтобы получить ответы о свойствах аренды. Приложение чата свойств аренды заполняется данными из файлов 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;

Visual Studio Code

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

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

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

Пространства кода GitHub (рекомендуется)

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

Внимание

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

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

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

   Открытие в GitHub Codespaces

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

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

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

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

   Bash

   azd auth login
   

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

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

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

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

   Bash

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

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

   Bash

   code .
   

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

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

   Bash

   azd init -t azure-search-openai-javascript
   

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

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

   Bash

   azd auth login
   

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

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

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

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

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

Внимание

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

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

   Bash

   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", использующая машинное обучение для повышения релевантности результатов поиска.
Использование сводок в контекстном запросе вместо целых документов	Use semantic rankerUse query-contextual summaries При проверке в LLM используются заголовки, извлеченные из ключевых проходов, а не все проходы, в документах с наивысшим рейтингом.
Советы по дальнейшим вопросам	Предложите в приложении чата дальнейшие вопросы на основе ответа.
Режим извлечения	Vectors + Text означает, что результаты поиска основаны на тексте документов и внедрении документов. Векторы означает, что результаты поиска основаны на внедрениях документов. Текст означает, что результаты поиска основаны на тексте документов.
Ответы на завершение чата потоковой передачи	Поток ответа вместо ожидания, пока полный ответ не будет доступен для ответа.

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

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

2. Проверьте сводки с использованием контекстных запросов вместо флажка и задайте один и тот же вопрос еще раз.

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

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

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

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

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

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

Bash

azd down --purge

Очистка GitHub Codespaces

GitHub Codespaces

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

Внимание

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

1. Войдите на панель мониторинга GitHub Codespaces (https://github.com/codespaces).

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

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

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

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

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

1. Откройте палитру команд, найдите команды "Контейнеры разработки", а затем выберите "Контейнеры разработки: открыть папку локально".

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

Совет

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

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

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

Если ваш выпуск не устранен, зайдите в журнал проблемы репозитория.

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

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