Atualize o aplicativo de Chat para usar o front-end JavaScript com o back-end Python

O aplicativo Chat é um aplicativo de referência que demonstra como usar o serviço OpenAI do Azure. Cada arquitetura de referência de linguagem de programação fornece funcionalidades ligeiramente diferentes. Este artigo descreve como usar o front-end JavaScript com o back-end Python.

Ao combinar o front-end e o back-end, você pode criar um aplicativo multilíngue que aproveita o melhor dos dois mundos.

  • Demonstração - vídeo sobre como configurar o front-end em JavaScript com back-end em Python

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

Observação

Este artigo usa um ou mais modelos de aplicativo de IA como base para os exemplos e orientações apresentados neste artigo. Os modelos de aplicativo de IA fornecem implementações de referência regulares e fáceis de implantar que ajudam a garantir um ponto de partida de alta qualidade para os 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 implantações ativas; não conclua a seção Limpar recursos até terminar este artigo.

  • Implante o aplicativo de chat em JavaScript usando este artigo
  • Implante o aplicativo de chat em Python usando este artigo

Obter as URLs para o frontend e o backend

Depois de implantar as duas arquiteturas de referência, você passa a ter dois aplicativos full stack. Para conectar o front-end do JavaScript com o Python back-end, obtenha as URLs para ambos os aplicativos e configure-as.

Você deve ter cada repositório em um ambiente de desenvolvimento separado, localmente ou em codespaces.

Defina a URL do front-end em JavaScript no back-end em Python

  1. No ambiente de desenvolvimento JavaScript, obtenha a URL do front-end JavaScript executando o seguinte comando:

    azd env get-values | grep WEBAPP_URI

    Esse comando obtém todas as variáveis de ambiente da nuvem e filtra pela variável WEBAPP_URI. Certifique-se de que a URL não termine com uma barra, /.

  2. Copie a URL.

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

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

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

    azd up

Definir URL do backend Python em frontend JavaScript

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

    azd env get-values | grep BACKEND_URI

    Esse comando obtém todas as variáveis de ambiente da nuvem e filtra pela variável BACKEND_URI. Certifique-se de que a URL não termine com uma barra, /.

  2. Copie a URL.

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

    azd env set BACKEND_URI <BACKEND_URI>

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

    azd up

Usar o front-end JavaScript com o back-end Python

O aplicativo Python usa uma área de assunto de benefícios de RH, enquanto o aplicativo JavaScript usa uma área de assunto de imóveis. 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 em uma avaliação de desempenho?
  • O que faz um Gerente de Produto?

Recursos de limpeza

Quando terminar com os aplicativos, você poderá excluir os recursos para evitar incorrer em mais cobranças.

Troubleshoot

  • Se você receber um erro, verifique se as URLs que você inseriu no ambiente não terminam com uma barra /, /.

Conteúdo relacionado

  • Last updated on