Atualize o aplicativo Chat para usar o frontend JavaScript com o backend Python

O aplicativo de bate-papo é um aplicativo de referência que demonstra como usar o serviço Azure OpenAI. Cada arquitetura de referência de linguagem de programação fornece funcionalidades ligeiramente diferentes. Este artigo descreve como usar o frontend JavaScript com o backend Python.

Ao misturar e combinar o frontend e o backend, pode criar uma aplicação multilíngue que utiliza o melhor dos dois mundos.

  • Demo - Configurar o front-end em JavaScript com um back-end em Python no vídeo

Este artigo faz parte de uma coleção de artigos que mostram como criar um aplicativo de chat usando o Serviço OpenAI do Azure e a Pesquisa do Azure AI. Outros artigos da coleção incluem:

Nota

Este artigo usa um ou mais modelos de aplicação de IA como base para os exemplos e as orientações no artigo. Os modelos de aplicativos de IA fornecem implementações de referência bem mantidas e fáceis de implantar que ajudam a garantir um ponto de partida de alta qualidade para seus aplicativos de IA.

Pré-requisitos

Implante as duas arquiteturas de referência usando os artigos a seguir. Certifique-se de usar a mesma assinatura e região para ambas as implantações. A implantação pode levar até 20 minutos. Deixe as implementações ativas; não conclua a secção Limpar recursos enquanto não tiver terminado este artigo.

  • Implantar a app de bate-papo JavaScript usando este artigo
  • Implante o aplicativo de bate-papo Python usando este artigo

Obter as URLs para o frontend e o backend

Depois de implementares as duas arquiteturas de referência, tens duas aplicações full-stack. Para ligar o frontend JavaScript ao backend Python, obtenha os URLs de ambas as aplicações e configure-as.

Deves ter cada repositório num ambiente de desenvolvimento separado, seja localmente ou em Codespaces.

Definir URL de front-end JavaScript no back-end Python

  1. No ambiente de desenvolvimento JavaScript, obtenha a URL para o frontend JavaScript executando o seguinte comando:

    azd env get-values | grep WEBAPP_URI

    Este comando obtém todas as variáveis do ambiente de nuvem e filtra para a variável WEBAPP_URI. Certifique-se de que a URL não termina com uma barra /.

  2. Copiar o URL.

  3. No ambiente de desenvolvimento Python, defina a URL para o frontend JavaScript executando o seguinte comando:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. No ambiente de desenvolvimento Python, reimplante o back-end Python executando o seguinte comando:

    azd up

Definir URL do back-end Python na frontend JavaScript

  1. No ambiente de desenvolvimento Python, obtenha a URL para o back-end Python executando o seguinte comando:

    azd env get-values | grep BACKEND_URI

    Este comando obtém todas as variáveis do ambiente de nuvem e filtra para a variável BACKEND_URI. Certifique-se de que a URL não termina com uma barra /.

  2. Copiar o URL.

  3. No ambiente de desenvolvimento JavaScript, defina a URL para o back-end Python executando o seguinte comando:

    azd env set BACKEND_URI <BACKEND_URI>

  4. No ambiente de desenvolvimento Python, reimplante o back-end Python executando o seguinte comando no ambiente de desenvolvimento Python:

    azd up

Utilize o frontend JavaScript com o backend Python

O aplicativo Python usa uma área de assunto de benefícios de RH, enquanto o aplicativo JavaScript usa uma área de assunto imobiliário. Agora que os aplicativos estão conectados, você pode usar o front-end para perguntar sobre os benefícios de RH. As perguntas sugeridas incluem:

  • O que está incluído no meu plano Northwind Health Plus que não é padrão?
  • O que acontece numa avaliação de desempenho?
  • O que faz um Gestor de Produto?

Recursos de limpeza

Quando terminar de usar os aplicativos, você pode excluir os recursos para evitar incorrer em mais cobranças.

Troubleshoot

  • Se ocorrer um erro, certifique-se de que os URL que introduziu no ambiente não terminam com uma barra, /.

Conteúdo relacionado

  • Last updated on