Partilhar via

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

  • Artigo

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, você pode criar um aplicativo multilíngue que usa o melhor dos dois mundos.

  • Demo - Configurar frontend JavaScript com vídeo de backend Python

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 aplicativo de IA como base para os exemplos e 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 2 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 implantações para cima; não conclua a seção Limpar recursos até terminar este artigo.

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

Obter as URLs para frontend e backend

Depois de implantar as duas arquiteturas de referência, você tem dois aplicativos full-stack implantados. Para usar o frontend JavaScript com o backend Python, você precisa obter as URLs para o frontend JS e o backend PY e configurá-las no outro aplicativo.

Você deve ter cada repositório em um ambiente de desenvolvimento separado, localmente no 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 de ambiente de nuvem e filtros para a WEBAPP_URI variável. Certifique-se de que o 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 de back-end Python no 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 de ambiente de nuvem e filtros para a BACKEND_URI variável. Certifique-se de que o 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

Use 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?

Clean up resources (Limpar recursos)

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

Resolução de Problemas

  • Se você receber um erro, revise as URLs inseridas no ambiente. Certifique-se de que eles não terminam com uma barra, /.

Próximos passos