Öğretici: Azure App Service ve Azure OpenAI (.NET) ile sohbet botu oluşturma

Bu öğreticide, Azure OpenAI'yi bir .NET Blazor uygulamasıyla tümleştirip Azure App Service'e dağıtarak akıllı bir yapay zeka uygulaması oluşturacaksınız. Azure OpenAI'deki bir modele sohbet tamamlama istekleri gönderen ve yanıtı sayfaya geri aktaran etkileşimli bir Blazor sayfası oluşturacaksınız.

Bu eğitimde şunları öğreniyorsunuz:

• Azure OpenAI kaynağı oluşturma ve dil modeli dağıtma
• Azure OpenAI ile Blazor uygulaması oluşturma
• Uygulamayı Azure App Service'e dağıtma
• Hem geliştirme ortamında hem de Azure'da parolasız kimlik doğrulaması uygulama

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı
• GitHub Codespaces'i kullanmak için bir GitHub hesabı

1. Azure OpenAI kaynağı oluşturma

Bu bölümde, GitHub Codespaces'ta Azure CLI kullanarak bir Azure OpenAI kaynağı oluşturacaksınız.

1. GitHub hesabınızla GitHub Codespaces'ta oturum açın.

2. Yeni bir boş kod alanı oluşturmak için Boş kutucuğunda Bu şablonu kullan'ı seçin.

3. Codespace terminalinde Azure CLI'yı yükleyin.

   curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
   

4. Azure hesabınızda oturum açın.

   az login
   

   Kimlik doğrulaması yapmak için terminaldeki yönergeleri izleyin.

5. Kaynak grubunuz ve Azure OpenAI hizmetiniz için adlar sağlayarak ve konumunuz olarak uygun bir Azure bölgesi ayarlayarak ortam değişkenlerini ayarlayın.

   export RESOURCE_GROUP="<group-name>"
   export OPENAI_SERVICE_NAME="<azure-openai-name>"
   export APPSERVICE_NAME="<app-name>"
   export LOCATION="<azure-region>"
   

   Önemli

   Konum, seçilen modelin bölgesel kullanılabilirliğine bağlıdır. Model ve dağıtım türü kullanılabilirliği Azure bölgeleri ve faturalama katmanları arasında farklılık gösterir. Bu öğreticide, Standart dağıtım türü altında birkaç bölgede kullanılabilen gpt-4o-mini kullanılır.

   Konum seçmeden önce tercih ettiğiniz bölgede model desteğini doğrulamak için Model özeti ve bölge kullanılabilirliği tablosuna başvurun.

6. Özel etki alanına sahip bir kaynak grubu ve Azure OpenAI kaynağı oluşturun ve ardından bir gpt-4o-mini model ekleyin:

   # Resource group
   az group create --name $RESOURCE_GROUP --location $LOCATION
   # Azure OpenAI resource
   az cognitiveservices account create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --custom-domain $OPENAI_SERVICE_NAME \
     --kind OpenAI \
     --sku s0
   # gpt-4o-mini model
   az cognitiveservices account deployment create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --deployment-name gpt-4o-mini \
     --model-name gpt-4o-mini \
     --model-version 2024-07-18 \
     --model-format OpenAI \
     --sku-name Standard \
     --sku-capacity 1
   # Cognitive Services OpenAI User role that lets the signed in Azure user read models from Azure OpenAI
   az role assignment create \
     --assignee $(az ad signed-in-user show --query id -o tsv) \
     --role "Cognitive Services OpenAI User" \
     --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME
   

Artık bir Azure OpenAI kaynağınız olduğuna göre, bu kaynakla etkileşim kurmak için bir web uygulaması oluşturabilirsiniz.

2. Blazor web uygulaması oluşturma ve ayarlama

Bu bölümde.NET CLI kullanarak yeni bir Blazor web uygulaması oluşturacaksınız.

1. Codespace terminalinizde yeni bir Blazor uygulaması oluşturun ve uygulamayı ilk kez çalıştırmayı deneyin.

   dotnet new blazor -o .
   dotnet run
   

   GitHub Codespaces'ta uygulamanın belirli bir bağlantı noktasında kullanılabilir olduğunu belirten bir bildirim görmeniz gerekir. Uygulamayı yeni bir tarayıcı sekmesinde başlatmak için Tarayıcıda aç'ı seçin.

2. Codespace terminalinde Ctrl+C tuşlarını kullanarak uygulamayı durdurun.

3. Azure OpenAI ile çalışmak için gerekli NuGet paketlerini yükleyin:

   dotnet add package Azure.AI.OpenAI
   dotnet add package Azure.Identity
   

4. Components/Pages/Home.razor dosyasını açın ve içeriğini Azure OpenAI ile basit bir sohbet tamamlama akışı çağrısı yapmak için aşağıdaki kodla değiştirin.

   @page "/"
   @rendermode InteractiveServer
   @using Azure.AI.OpenAI
   @using Azure.Identity
   @using OpenAI.Chat
   @inject Microsoft.Extensions.Configuration.IConfiguration _config
   
   <h3>Azure OpenAI Chat</h3>
   <div class="mb-3 d-flex align-items-center" style="margin:auto;">
       <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
       <button class="btn btn-primary" @onclick="SendMessage">Send</button>
   </div>
   <div class="card p-3" style="margin:auto;">
       @if (!string.IsNullOrEmpty(aiResponse))
       {
           <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
       }
   </div>
   
   @code {
       private string? userMessage;
       private string? aiResponse;
   
       private async Task SendMessage()
       {
           if (string.IsNullOrWhiteSpace(userMessage)) return;
   
           // Initialize the Azure OpenAI client
           var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
           var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
           var chatClient = client.GetChatClient("gpt-4o-mini");
   
           aiResponse = string.Empty;
           StateHasChanged();
   
           // Create a chat completion streaming request
           var chatUpdates = chatClient.CompleteChatStreamingAsync(
               [
                   new UserChatMessage(userMessage)
               ]);
   
               await foreach(var chatUpdate in chatUpdates)
               {
                   // Update the UI with the streaming response
                   foreach(var contentPart in chatUpdate.ContentUpdate)
               {
                   aiResponse += contentPart.Text;
                   StateHasChanged();
               }
           }
       }
   }
   

5. Terminalde OpenAI uç noktanızı alın:

   az cognitiveservices account show \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --query properties.endpoint \
     --output tsv
   

6. CLI çıktısındaki değeriyle AZURE_OPENAI_ENDPOINT ekleyerek uygulamayı yeniden çalıştırın.

   AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> dotnet run
   

7. Uygulamayı yeni bir tarayıcı sekmesinde başlatmak için Tarayıcıda aç'ı seçin.

8. Metin kutusuna bir ileti yazın ve "Gönder'i seçin ve uygulamaya Azure OpenAI'den gelen iletiyi yanıtlaması için birkaç saniye verin.

Uygulama, belirteç kimlik doğrulaması için Azure CLI üzerinden oturum açmış kullanıcınızı otomatik olarak kullanan DefaultAzureCredential'ı kullanır. Bu öğreticinin ilerleyen bölümlerinde Blazor uygulamanızı Azure App Service'e dağıtacak ve yönetilen kimliği kullanarak Azure OpenAI kaynağınıza güvenli bir şekilde bağlanacak şekilde yapılandıracaksınız. Kodunuzda aynı DefaultAzureCredential, yönetilen kimliği algılayabilir ve kimlik doğrulaması için kullanabilir. Ek kod gerekmez.

3. Azure App Service'e dağıtma ve OpenAI bağlantısını yapılandırma

Uygulamanız yerel olarak çalıştığına göre, şimdi bunu Azure App Service'e dağıtalım ve yönetilen kimlik kullanarak Azure OpenAI'ye bir hizmet bağlantısı ayarlayalım.

1. İlk olarak, Azure CLI komutunu az webapp upkullanarak uygulamanızı Azure App Service'e dağıtın. Bu komut yeni bir web uygulaması oluşturur ve kodunuzu buna dağıtır:

   az webapp up \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --name $APPSERVICE_NAME \
     --plan $APPSERVICE_NAME \
     --sku B1 \
     --os-type Linux \
     --track-status false
   

   Bu komutun tamamlanması birkaç dakika sürebilir. OpenAI kaynağınızla aynı kaynak grubunda yeni bir web uygulaması oluşturur.

2. Uygulama dağıtıldıktan sonra yönetilen kimliği kullanarak web uygulamanızla Azure OpenAI kaynağı arasında bir hizmet bağlantısı oluşturun:

   az webapp connection create cognitiveservices \
     --resource-group $RESOURCE_GROUP \
     --name $APPSERVICE_NAME \
     --target-resource-group $RESOURCE_GROUP \
     --account $OPENAI_SERVICE_NAME
     --connection azure-openai \
     --system-identity
   

   Bu komut, web uygulamanızla Azure OpenAI kaynağı arasında şu şekilde bir bağlantı oluşturur:

   • Web uygulaması için sistem tarafından atanan yönetilen kimlik oluşturma.
   • Azure OpenAI kaynağının yönetilen kimliğine Bilişsel Hizmetler OpenAI Katkıda Bulunanı rolünü ekleme.
   • AZURE_OPENAI_ENDPOINT Uygulama ayarını web uygulamanıza ekleme.

   Uygulamanız artık yönetilen kimlikle Azure OpenAI'ye dağıtılır ve bağlanır. AZURE_OPENAI_ENDPOINT eklemesi aracılığıyla uygulama ayarını okur.

3. Dağıtılan web uygulamasını tarayıcıda açın. Dağıtılan web uygulamasının URL'sini terminal çıkışında bulun. Web tarayıcınızı açın ve hedef web sitesine gidin.

   az webapp browse
   

4. Metin kutusuna bir ileti yazın ve Gönder'i seçin ve uygulamaya Azure OpenAI'den gelen iletiyi yanıtlaması için birkaç saniye verin.

   

Sıkça sorulan sorular

• Azure OpenAI yerine OpenAI'ye bağlanmak istersem ne olur?
• Bunun yerine bir API anahtarıyla Azure OpenAI'ye bağlanabilir miyim?
• DefaultAzureCredential bu öğreticide nasıl çalışır?

---

Azure OpenAI yerine OpenAI'ye bağlanmak istersem ne olur?

Bunun yerine OpenAI'ye bağlanmak için aşağıdaki kodu kullanın:

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

Daha fazla bilgi için bkz. OpenAI API kimlik doğrulaması.

App Service'te bağlantı gizli dizileriyle çalışırken, gizli dizileri doğrudan kod tabanınızda depolamak yerine Key Vault başvurularını kullanmanız gerekir. Bu, hassas bilgilerin güvenli kalmasını ve merkezi olarak yönetilmesini sağlar.

---

Bunun yerine bir API anahtarıyla Azure OpenAI'ye bağlanabilir miyim?

Evet, yönetilen kimlik yerine bir API anahtarı kullanarak Azure OpenAI'ye bağlanabilirsiniz. Bu yaklaşım Azure OpenAI SDK'ları ve Anlam Çekirdeği tarafından desteklenir.

• C# dilinde Anlam Çekirdeği ile API anahtarlarını kullanma hakkında ayrıntılı bilgi için bkz. Semantik Çekirdek C# Hızlı Başlangıcı.
• Azure OpenAI istemci kitaplığıyla API anahtarlarını kullanma hakkında ayrıntılı bilgi için: Hızlı Başlangıç: Azure OpenAI Hizmeti ile sohbet tamamlamalarını kullanmaya başlama.

App Service'te bağlantı gizli dizileriyle çalışırken, gizli dizileri doğrudan kod tabanınızda depolamak yerine Key Vault başvurularını kullanmanız gerekir. Bu, hassas bilgilerin güvenli kalmasını ve merkezi olarak yönetilmesini sağlar.

---

DefaultAzureCredential bu öğreticide nasıl çalışır?

, DefaultAzureCredential en iyi kullanılabilir kimlik doğrulama yöntemini otomatik olarak seçerek kimlik doğrulamasını basitleştirir:

• Yerel geliştirme sırasında: komutunu çalıştırdıktan az loginsonra yerel Azure CLI kimlik bilgilerinizi kullanır.
• Azure App Service'e dağıtıldığında: Güvenli, parolasız kimlik doğrulaması için uygulamanın yönetilen kimliğini kullanır.

Bu yaklaşım, kodunuzun hem yerel hem de bulut ortamlarında değişiklik yapmadan güvenli ve sorunsuz bir şekilde çalışmasını sağlar.

Daha fazla kaynak

• Öğretici: Azure OpenAI ve Azure AI Search (.NET) ile Alma Artırmalı Üretim Oluşturun
• Öğretici: App Service'te Phi-4 sepet uzantısıyla (ASP.NET Core) sohbet botu çalıştırma
• Bir Azure OpenAI Hizmeti kaynağı oluşturma ve dağıtma
• App Service'te yönetilen kimlik hakkında daha fazla bilgi edinin