Partilhar via

Tutorial: Executar chatbot no App Service com uma extensão Phi-4 de sidecar (Express.js)

Este tutorial orienta você na implantação de um aplicativo de chatbot baseado em Express.jsintegrado com a extensão sidecar Phi-4 no Serviço de Aplicativo do Azure. Seguindo as etapas, você aprenderá como configurar um aplicativo Web escalável, adicionar um sidecar alimentado por IA para recursos de conversação aprimorados e testar a funcionalidade do chatbot.

Hospedar seu próprio modelo de linguagem pequena (SLM) oferece várias vantagens:

  • Controlo total sobre os seus dados. Informações confidenciais não são expostas a serviços externos, o que é crítico para setores com requisitos rigorosos de conformidade.
  • Os modelos auto-hospedados podem ser ajustados para atender a casos de uso específicos ou requisitos específicos de domínio.
  • Latência de rede minimizada e tempos de resposta mais rápidos para uma melhor experiência do usuário.
  • Controle total sobre a alocação de recursos, garantindo o desempenho ideal para sua aplicação.

Pré-requisitos

  • Uma conta do Azure com uma assinatura ativa.
  • Uma conta GitHub.

Implementar o exemplo de aplicação

  1. No navegador, navegue até o repositório de aplicativos de exemplo.

  2. Inicie um novo Codespace a partir do repositório.

  3. Inicie sessão com a sua conta do Azure:

    az login

  4. Abra o terminal no Codespace e execute os seguintes comandos:

    cd use_sidecar_extension/expressapp
az webapp up --sku P3MV3

Este comando de inicialização é uma configuração comum para implantar aplicativos Express.js no Serviço de Aplicativo do Azure. Para obter mais informações, consulte Implantar um aplicativo Web Node.js no Azure.

Adicione a extensão do sidecar Phi-4

Nesta seção, você adiciona a extensão sidecar Phi-4 ao seu aplicativo ASP.NET Core hospedado no Serviço de Aplicativo do Azure.

  1. Navegue até o portal do Azure e vá para a página de gerenciamento do seu aplicativo.
  2. No menu à esquerda, selecione Deployment>Deployment Center.
  3. Na guia Contêineres, selecione Adicionar>extensão sidecar.
  4. Nas opções de extensão do sidecar, selecione AI: phi-4-q4-gguf (Experimental).
  5. Forneça um nome para a extensão do sidecar.
  6. Selecione Guardar para aplicar as alterações.
  7. Aguarde alguns minutos até que a extensão do sidecar seja implantada. Continue selecionando Atualizar até que a coluna Status mostre Em execução.

Esta extensão de sidecar Phi-4 usa uma API de conclusão de bate-papo como OpenAI que pode responder à resposta de conclusão de bate-papo em http://localhost:11434/v1/chat/completions. Para obter mais informações sobre como interagir com a API, consulte:

Teste o chatbot

  1. Na página de gerenciamento do seu aplicativo, no menu à esquerda, selecione Visão geral.

  2. Em Domínio padrão, selecione a URL para abrir seu aplicativo Web em um navegador.

  3. Verifique se o aplicativo de chatbot está em execução e respondendo às entradas do usuário.

    Captura de tela mostrando o aplicativo assistente de moda em execução no navegador.

Como funciona o aplicativo de exemplo

O aplicativo de exemplo demonstra como integrar um serviço baseado em Express.jscom a extensão do sidecar SLM. A SLMService classe encapsula a lógica para enviar solicitações para a API SLM e processar as respostas transmitidas. Essa integração permite que o aplicativo gere respostas conversacionais dinamicamente.

Olhando em use_sidecar_extension/expressapp/src/services/slm_service.js, você vê que:

  • O serviço envia um pedido POST para o ponto de extremidade SLMhttp://127.0.0.1:11434/v1/chat/completions.

    this.apiUrl = 'http://127.0.0.1:11434/v1/chat/completions';

  • A carga útil POST inclui a mensagem do sistema e o prompt criado a partir do produto selecionado e da consulta do usuário.

    const requestPayload = {
  messages: [
    { role: 'system', content: 'You are a helpful assistant.' },
    { role: 'user', content: prompt }
  ],
  stream: true,
  cache_prompt: false,
  n_predict: 2048 // Increased token limit to allow longer responses
};

  • A solicitação POST transmite a resposta linha por linha. Cada linha é analisada para extrair o conteúdo gerado (ou token).

    // Set up Server-Sent Events headers
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();

const response = await axios.post(this.apiUrl, requestPayload, {
  headers: { 'Content-Type': 'application/json' },
  responseType: 'stream'
});

response.data.on('data', (chunk) => {
  const lines = chunk.toString().split('\n').filter(line => line.trim() !== '');

  for (const line of lines) {
    let parsedLine = line;
    if (line.startsWith('data: ')) {
      parsedLine = line.replace('data: ', '').trim();
    }

    if (parsedLine === '[DONE]') {
      return;
    }

    try {
      const jsonObj = JSON.parse(parsedLine);
      if (jsonObj.choices && jsonObj.choices.length > 0) {
        const delta = jsonObj.choices[0].delta || {};
        const content = delta.content;

        if (content) {
          // Use non-breaking space to preserve formatting
          const formattedToken = content.replace(/ /g, '\u00A0');
          res.write(`data: ${formattedToken}\n\n`);
        }
      }
    } catch (parseError) {
      console.warn(`Failed to parse JSON from line: ${parsedLine}`);
    }
  }
});

Perguntas frequentes

Como a camada de preços afeta o desempenho do sidecar SLM?

Como os modelos de IA consomem recursos consideráveis, escolha a camada de preço que oferece vCPUs e memória suficientes para executar seu modelo específico. Por esse motivo, as extensões de sidecar de IA integradas só aparecem quando o aplicativo está em um nível de preço adequado. Se você construir seu próprio contêiner de sidecar SLM, também deverá usar um modelo otimizado para CPU, já que as camadas de preços do Serviço de Aplicativo são camadas somente de CPU.

Por exemplo, o modelo mini Phi-3 com um comprimento de contexto 4K do Hugging Face foi projetado para ser executado com recursos limitados e fornece raciocínio matemático e lógico sólido para muitos cenários comuns. Ele também vem com uma versão otimizada para CPU. No Serviço de Aplicativo, testamos o modelo em todas as camadas premium e descobrimos que ele tem um bom desempenho na camada P2mv3 ou superior. Se seus requisitos permitirem, você pode executá-lo em uma camada inferior.

Como usar o meu próprio sidecar SLM?

O repositório de exemplo contém um contêiner SLM de amostra que você pode usar como sidecar. Ele executa um aplicativo FastAPI que escuta na porta 8000, conforme especificado em seu Dockerfile. O aplicativo usa o ONNX Runtime para carregar o modelo Phi-3 e, em seguida, encaminha os dados HTTP POST para o modelo e transmite a resposta do modelo de volta para o cliente. Para obter mais informações, consulte model_api.py.

Para criar a imagem do sidecar por conta própria, você precisa instalar o Docker Desktop localmente em sua máquina.

  1. Clone o repositório localmente.

    git clone https://github.com/Azure-Samples/ai-slm-in-app-service-sidecar
cd ai-slm-in-app-service-sidecar

  2. Mude para o diretório de origem da imagem Phi-3 e faça o download do modelo localmente usando a CLI do Huggingface.

    cd bring_your_own_slm/src/phi-3-sidecar
huggingface-cli download microsoft/Phi-3-mini-4k-instruct-onnx --local-dir ./Phi-3-mini-4k-instruct-onnx

    O Dockerfile está configurado para copiar o modelo de ./Phi-3-mini-4k-instruct-onnx.

  3. Crie a imagem do Docker. Por exemplo:

    docker build --tag phi-3 .

  4. Carregue a imagem criada no Registro de Contêiner do Azure com Envie sua primeira imagem para o Registro de contêiner do Azure usando a CLI do Docker.

  5. Na guia Contêineres do Centro> deImplantação (novo), selecione Adicionar>contêiner personalizado e configure o novo contêiner da seguinte maneira:

    • Designação: phi-3
    • Origem da imagem: Azure Container Registry
    • Registo: o seu registo
    • Imagem: a imagem carregada
    • Tag: a tag de imagem que você deseja
    • Porta: 8000

  6. Selecione Aplicar.

Consulte bring_your_own_slm/src/webapp para obter um exemplo de aplicativo que interage com esse contêiner de sidecar personalizado.

Próximos passos

Tutorial: Configurar um contêiner sidecar para um aplicativo Linux no Serviço de Aplicativo do Azure

  • Last updated on