Начало работы с приложениями чата с многомодальным зрением с помощью Azure OpenAI

Статья
10/30/2024

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

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

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

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

Примечание.

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

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

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

Приложение чата работает в качестве приложения контейнера Azure. Приложение использует управляемое удостоверение с помощью идентификатора Microsoft Entra для проверки подлинности с помощью Azure OpenAI, а не ключа API. Приложение чата использует Azure OpenAI для создания ответов на сообщения пользователей.

Архитектура приложения зависит от следующих служб и компонентов:

Azure OpenAI представляет поставщик ИИ , в который мы отправляем запросы пользователя.
Приложения контейнеров Azure — это среда контейнера , в которой размещено приложение.
Управляемое удостоверение помогает нам обеспечить безопасность в классе и исключить требование, необходимое для разработчика для безопасного управления секретом.
Файлы Bicep для подготовки ресурсов Azure, включая Azure OpenAI, приложения контейнеров Azure, Реестр контейнеров Azure, Azure Log Analytics и роли управления доступом на основе ролей (RBAC).
Протокол чата Microsoft AI предоставляет стандартные контракты API на разных языках и решениях ИИ. Приложение чата соответствует протоколу Microsoft AI Chat.
Quart Python, использующий openai пакет для создания ответов на сообщения пользователей с отправленными файлами изображений.
Базовый интерфейс HTML/JavaScript, который передает ответы из серверной части с помощью строк JSON через readableStream.

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

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

Дополнительные сведения о затратах в примере репозитория.

Необходимые компоненты

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

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

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

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

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

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

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

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

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

Внимание

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

Выполните следующие действия, чтобы создать новое пространство кода GitHub в main ветви Azure-Samples/openai-chat-vision-quickstart репозитория GitHub.

Щелкните правой кнопкой мыши следующую кнопку и нажмите кнопку "Открыть ссылку" в новом окне. Это действие позволяет иметь среду разработки и документацию, доступную для проверки.
На странице "Создание пространства кода" просмотрите и выберите "Создать новое пространство кода"
Дождитесь запуска пространства кода. Этот процесс запуска может занять несколько минут.
Войдите в Azure с помощью интерфейса командной строки разработчика Azure в терминале в нижней части экрана.
```
azd auth login
```
Скопируйте код из терминала и вставьте его в браузер. Следуйте инструкциям по проверке подлинности с помощью учетной записи Azure.

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

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

Создайте локальный каталог на компьютере для проекта.
```
mkdir my-chat-vision-app
```
Перейдите к созданному каталогу.
```
cd my-chat-vision-app
```
Откройте Visual Studio Code в этом каталоге:
```
code .
```
Откройте новый терминал в Visual Studio Code.
Выполните следующую команду AZD, чтобы перенести репозиторий GitHub на локальный компьютер.
```
azd init -t openai-chat-vision-quickstart
```
Откройте палитру команд, найдите и выберите "Контейнеры разработки": откройте папку в контейнере, чтобы открыть проект в контейнере разработки. Дождитесь, пока контейнер разработки не откроется, прежде чем продолжить.
Войдите в Azure с помощью Интерфейса командной строки разработчика Azure.
```
azd auth login
```
Остальные упражнения в этом проекте происходят в контексте этого контейнера разработки.

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

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

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

Внимание

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

Выполните следующую команду Azure Developer CLI для подготовки ресурсов Azure и развертывания исходного кода:
```
azd up
```

Используйте следующую таблицу, чтобы ответить на запросы:

Prompt	Ответ
Имя среды	Сохраните его коротким и строчным регистром. Добавьте имя или псевдоним. Например, `chat-vision`. Он используется в качестве части имени группы ресурсов.
Отток подписок	Выберите подписку, чтобы создать ресурсы.
Расположение (для размещения)	Выберите расположение рядом с вами из списка.
Расположение для модели Azure OpenAI	Выберите расположение рядом с вами из списка. Если то же расположение доступно в качестве первого расположения, выберите это.

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

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

Терминал отображает URL-адрес после успешного развертывания приложения.
Выберите этот URL-адрес, чтобы Deploying service web открыть приложение чата в браузере.
В браузере отправьте изображение, щелкнув " Выбрать файл " и выбрав изображение.
Задайте вопрос о отправленном изображении, например "Что такое изображение?".
Ответ поступает из Azure OpenAI и отображается результат.

Изучение примера кода

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

Кодировка Base64 отправленного изображения в интерфейсном интерфейсе

Отправленное изображение должно быть закодировано в Кодировке Base64, чтобы его можно было использовать непосредственно в качестве URI данных в рамках сообщения.

В примере следующий фрагмент кода внешнего интерфейса в scriptтеге src/quartapp/templates/index.html файла обрабатывает эту функцию. Функция toBase64 со стрелками использует readAsDataURL методFileReader асинхронного чтения в отправленном файле изображения в виде строки в кодировке Base64.

    const toBase64 = file => new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
    });

Функция toBase64 вызывается прослушивателем события формы submit . submit Когда событие запускается, прослушиватель проверяет файл изображения и обрабатывает его, если он присутствует в Base64, кодируя изображение с помощью toBase64 функции. Затем новый URL-адрес fileDataданных изображения добавляется в сообщение.

    form.addEventListener("submit", async function(e) {
        e.preventDefault();

        const file = document.getElementById("file").files[0];
        const fileData = file ? await toBase64(file) : null;

        const message = messageInput.value;

        const userTemplateClone = userTemplate.content.cloneNode(true);
        userTemplateClone.querySelector(".message-content").innerText = message;
        if (file) {
            const img = document.createElement("img");
            img.src = fileData;
            userTemplateClone.querySelector(".message-file").appendChild(img);
        }
        targetContainer.appendChild(userTemplateClone);

Обработка изображения с помощью серверной части

src\quartapp\chat.py В файле серверный код для обработки изображений начинается после настройки проверки подлинности без ключей.

Примечание.

Дополнительные сведения об использовании бессерверных подключений для проверки подлинности и авторизации в Azure OpenAI см . в статье "Начало работы со стандартным блоком безопасности Azure OpenAI" Microsoft Learn.

Функция обработчика чата

Функция chat_handler() ожидает получения входящих данных JSON запроса из конечной chat/stream точки, а затем обрабатывает ее. Затем сообщения извлекаются из данных JSON. Наконец, образ в кодировке Base64 извлекается из данных JSON.

@bp.post("/chat/stream")
async def chat_handler():
    request_json = await request.get_json()
    request_messages = request_json["messages"]
    # get the base64 encoded image from the request
    image = request_json["context"]["file"]

Поток ответа с помощью клиента OpenAI и модели

Внутри response_stream chat_handler функции выполняется вызов завершения чата в маршруте. Следующий фрагмент кода начинается с предварительной обработки сообщений пользовательского содержимого. Если изображение присутствует, URL-адрес изображения добавляется к содержимому пользователя с помощью url-адреса изображения.

    @stream_with_context
    async def response_stream():
        # This sends all messages, so API request may exceed token limits
        all_messages = [
            {"role": "system", "content": "You are a helpful assistant."},
        ] + request_messages[0:-1]
        all_messages = request_messages[0:-1]
        if image:
            user_content = []
            user_content.append({"text": request_messages[-1]["content"], "type": "text"})
            user_content.append({"image_url": {"url": image, "detail": "auto"}, "type": "image_url"})
            all_messages.append({"role": "user", "content": user_content})
        else:
            all_messages.append(request_messages[-1])

Примечание.

Дополнительные сведения о параметре изображения detail и связанных параметрах см . в разделе "Использование GPT-4 Turbo с vision" в разделе "Низкое, высокое, авто " статьи "Использование GPT-4 Turbo с vision".

bp.openai_client.chat.completions Затем получает завершение чата через вызов API Azure OpenAI и передает ответ.

        chat_coroutine = bp.openai_client.chat.completions.create(
            # Azure OpenAI takes the deployment name as the model name
            model=os.environ["OPENAI_MODEL"],
            messages=all_messages,
            stream=True,
            temperature=request_json.get("temperature", 0.5),
        )

Наконец, ответ передается клиенту обратно с обработкой ошибок для любых исключений.

        try:
            async for event in await chat_coroutine:
                event_dict = event.model_dump()
                if event_dict["choices"]:
                    yield json.dumps(event_dict["choices"][0], ensure_ascii=False) + "\n"
        except Exception as e:
            current_app.logger.error(e)
            yield json.dumps({"error": str(e)}, ensure_ascii=False) + "\n"

    return Response(response_stream())

Другие примеры ресурсов для изучения

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

Записная книжка	Description
chat_pdf_images.ipynb	В этой записной книжке показано, как преобразовать PDF-страницы в изображения и отправить их в модель визуального зрения для вывода.
chat_vision.ipynb	Эта записная книжка предоставляется для ручного экспериментирования с моделью зрения, используемой в приложении.

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

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

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

Чтобы удалить ресурсы Azure и удалить исходный код, выполните следующую команду Azure Developer CLI:

azd down --purge

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

Внимание

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

Войдите на панель мониторинга GitHub Codespaces (https://github.com/codespaces).
Найдите текущие запущенные пространства Codespaces, полученные из Azure-Samples//openai-chat-vision-quickstart репозитория GitHub.
Откройте контекстное меню для пространства кода и нажмите кнопку "Удалить".

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

Зайдите в журнал проблемы репозитория.

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

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

Поделиться через

Начало работы с приложениями чата с многомодальным зрением с помощью Azure OpenAI

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

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

Необходимые компоненты

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

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

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

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

Изучение примера кода

Кодировка Base64 отправленного изображения в интерфейсном интерфейсе

Обработка изображения с помощью серверной части

Функция обработчика чата

Поток ответа с помощью клиента OpenAI и модели

Другие примеры ресурсов для изучения

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

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

Очистка GitHub Codespaces

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

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

Обратная связь

Дополнительные ресурсы