Construisez AI Q&A dans Optimizely avec Azure Ai Search + Openai / Blogs / Ferfient

Dans Partie 2nous avons intégré la recherche Azure AI avec Azure Personalizer pour créer une expérience plus intelligente et axée sur l’utilisateur dans Optimizely CMS. Nous avons utilisé ServiceAPI pour envoyer du contenu CMS à Azure AI Search. Dans la partie 3, nous allons aller plus loin: permettant aux utilisateurs de poser des questions en langage naturel et d’obtenir des réponses alimentées par l’IA. Mais voici la torsion: au lieu d’utiliser ServiceAPI, cette fois, nous explorerons comment interroger le contenu indexé directement Utilisation de l’API REST d’Ai Search Ai Search.

Pourquoi les questions et réponses en langue naturelle?

Parfois, les utilisateurs ne connaissent pas les mots clés exacts. Ils demandent des choses comme:

«Comment retourner un produit?» «Puis-je réserver une démo?»

Avec Openai on Azure et les capacités sémantiques de la recherche Azure AI, votre site Web peut désormais comprendre ces requêtes et fournir des réponses contextuelles utiles.

Aperçu de l’architecture

1. Le contenu CMS est indexé par Azure AI Search (via ServiceAPI ou Crawler).






2. L’indice de recherche est enrichi de paramètres sémantiques.






3. Un utilisateur tape une requête en langue naturelle.






4. Votre backend utilise la recherche sémantique d’Azure Search + Azure OpenAI (API CHAT / ACHETION) pour renvoyer une réponse contextuelle.

Utilisation de l’API de recherche Azure pour extraire le contenu

Vous pouvez accéder directement au contenu indexé à l’aide de l’API Azure Search REST. Voici un exemple de la façon de récupérer les 5 meilleurs résultats:

public async Task<List<string>> SearchAzureContentAsync(string query)
{
    var searchServiceName = "<your-search-service-name>";
    var indexName = "<your-index-name>";
    var apiKey = "<your-api-key>";

    using var client = new HttpClient();
    client.DefaultRequestHeaders.Add("api-key", apiKey);

    var url = $"https://{searchServiceName}.search.windows.net/indexes/{indexName}/docs?api-version=2021-04-30-Preview&search={query}&$top=5";
    var result = await client.GetStringAsync(url);
    
    var json = JsonDocument.Parse(result);
    var docs = new List<string>();

    foreach (var item in json.RootElement.GetProperty("value").EnumerateArray())
    {
        docs.Add(item.GetProperty("content").GetString());
    }

    return docs;
}

Générer une réponse en utilisant Azure Openai

Une fois que nous aurons récupéré des documents pertinents, nous les transmettons dans Azure Openai pour générer une réponse contextuelle:

public async Task<string> AskOpenAiAsync(string question, List<string> context)
{
    var prompt = $"""
You are a helpful assistant. Based on the following content, answer the question:

{string.Join("\n\n", context)}

Question: {question}
Answer:
""";

    var openAiKey = "<your-openai-key>";
    var endpoint = "https://<your-openai-endpoint>.openai.azure.com/openai/deployments/<deployment-name>/completions?api-version=2022-12-01";

    var payload = new
    {
        prompt = prompt,
        temperature = 0.7,
        max_tokens = 200
    };

    using var client = new HttpClient();
    client.DefaultRequestHeaders.Add("api-key", openAiKey);
    var response = await client.PostAsync(endpoint, new StringContent(JsonSerializer.Serialize(payload), Encoding.UTF8, "application/json"));

    var result = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
    return result.RootElement.GetProperty("choices")[0].GetProperty("text").GetString();
}

Intégrer avec Optimizely CMS

Vous pouvez créer un contrôleur comme celui-ci:

public class QnAController : Controller
{
    [HttpPost]
    public async Task<ActionResult> Ask(string question)
    {
        var docs = await SearchAzureContentAsync(question);
        var answer = await AskOpenAiAsync(question, docs);
        return Json(new { answer });
    }
}

Et à votre avis:

<form method="post" id="qnaForm">
  <input type="text" name="question" placeholder="Ask a question..." />
  <button type="submit">Ask</button>
</form>
<div id="answer"></div>

<script>
  $('#qnaForm').submit(function(e) {
    e.preventDefault();
    const question = $('input[name=question]').val();
    fetch('/QnA/Ask', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ question })
    })
    .then(r => r.json())
    .then(data => $('#answer').text(data.answer));
  });
</script>

Résumé

Cela conclut la pièce finale du puzzle: permettre aux utilisateurs de parler librement avec votre site Optimizely, tandis que l’IA interprète et répond en temps réel. De l’indexation du contenu à la relance en passant par les questions et réponses complètes, votre CMS est désormais intelligente, conversationnelle et d’abord des utilisateurs. Vous voulez voir cela en action? Restez à l’écoute pour l’échantillon de dépôt et de procédure vidéo!

Le blog est également publié ici Q&R en langage naturel en CMS Optimizely en utilisant Azure Openai et la recherche AI