Tutorial: Membangun chatbot dengan Azure App Service dan Azure OpenAI (.NET)

Dalam tutorial ini, Anda akan membangun aplikasi AI cerdas dengan mengintegrasikan Azure OpenAI dengan aplikasi .NET Blazor dan menyebarkannya ke Azure App Service. Anda akan membuat halaman Blazor interaktif yang mengirim permintaan penyelesaian obrolan ke model di Azure OpenAI dan mengalirkan respons kembali ke halaman.

Dalam tutorial ini, Anda akan belajar cara:

• Membuat sumber daya Azure OpenAI dan menyebarkan model bahasa
• Membangun aplikasi Blazor dengan Azure OpenAI
• Menyebarkan aplikasi ke Azure App Service
• Menerapkan autentikasi tanpa kata sandi baik di lingkungan pengembangan maupun di Azure

Prasyarat

• Akun Azure dengan langganan aktif
• Akun GitHub untuk menggunakan GitHub Codespaces

1. Membuat sumber daya Azure OpenAI

Di bagian ini, Anda menggunakan Azure CLI di GitHub Codespaces untuk membuat sumber daya Azure OpenAI.

1. Masuk ke GitHub Codespaces dengan akun GitHub Anda.

2. Pilih Gunakan templat ini di petak Peta kosong untuk membuat ruang kode kosong baru.

3. Di terminal Codespace, instal Azure CLI.

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

4. Masuk ke akun Azure Anda.

   az login
   

   Ikuti instruksi di terminal untuk mengautentikasi.

5. Atur variabel lingkungan dengan memberikan nama untuk grup sumber daya Dan layanan Azure OpenAI Anda dan atur wilayah Azure yang sesuai sebagai lokasi Anda.

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

   Penting

   Lokasi terkait dengan ketersediaan regional model yang dipilih. Ketersediaan model dan jenis penyebaran bervariasi di antara wilayah Azure dan tingkat penagihan. Tutorial ini menggunakan gpt-4o-mini, yang tersedia di beberapa wilayah di bawah jenis penyebaran Standar.

   Sebelum memilih lokasi, lihat Ringkasan model dan tabel ketersediaan wilayah untuk memverifikasi dukungan model di wilayah pilihan Anda.

6. Buat grup sumber daya dan sumber daya Azure OpenAI dengan domain kustom, lalu tambahkan gpt-4o-mini model:

   # 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
   

Sekarang setelah Anda memiliki sumber daya Azure OpenAI, Anda dapat membuat aplikasi web untuk berinteraksi dengannya.

2. Membuat dan menyiapkan aplikasi web Blazor

Di bagian ini, Anda akan membuat aplikasi web Blazor baru menggunakan .NET CLI.

1. Di terminal Codespace Anda, buat aplikasi Blazor baru dan coba jalankan untuk pertama kalinya.

   dotnet new blazor -o .
   dotnet run
   

   Anda akan melihat pemberitahuan di GitHub Codespaces yang menunjukkan bahwa aplikasi tersedia di port tertentu. Pilih Buka di browser untuk meluncurkan aplikasi di tab browser baru.

2. Kembali ke terminal Codespace, hentikan aplikasi dengan Ctrl+C.

3. Instal paket NuGet yang diperlukan untuk bekerja dengan Azure OpenAI:

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

4. Buka Components/Pages/Home.razor dan ganti kontennya dengan kode berikut, untuk panggilan aliran penyelesaian obrolan sederhana dengan Azure OpenAI:

   @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. Pada terminal, dapatkan titik akhir OpenAI Anda:

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

6. Jalankan aplikasi lagi dengan menambahkan AZURE_OPENAI_ENDPOINT dengan nilainya dari output CLI:

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

7. Pilih Buka di browser untuk meluncurkan aplikasi di tab browser baru.

8. Ketik pesan di kotak teks dan pilih "Kirim, dan berikan aplikasi beberapa detik untuk membalas dengan pesan dari Azure OpenAI.

Aplikasi ini menggunakan DefaultAzureCredential, yang secara otomatis menggunakan pengguna masuk Azure CLI Anda untuk autentikasi token. Kemudian dalam tutorial ini, Anda akan menyebarkan aplikasi Blazor ke Azure App Service dan mengonfigurasinya untuk terhubung dengan aman ke sumber daya Azure OpenAI Anda menggunakan identitas terkelola. Hal yang sama DefaultAzureCredential dalam kode Anda dapat mendeteksi identitas terkelola dan menggunakannya untuk autentikasi. Tidak ada kode tambahan yang diperlukan.

3. Sebarkan ke Azure App Service dan konfigurasikan koneksi OpenAI

Sekarang setelah aplikasi Anda berfungsi secara lokal, mari kita sebarkan ke Azure App Service dan siapkan koneksi layanan ke Azure OpenAI menggunakan identitas terkelola.

1. Pertama, sebarkan aplikasi Anda ke Azure App Service menggunakan perintah az webapp upAzure CLI . Perintah ini membuat aplikasi web baru dan menyebarkan kode Anda ke dalamnya:

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

   Perintah ini mungkin perlu waktu beberapa menit untuk diselesaikan. Ini membuat aplikasi web baru di grup sumber daya yang sama dengan sumber daya OpenAI Anda.

2. Setelah aplikasi disebarkan, buat koneksi layanan antara aplikasi web Anda dan sumber daya Azure OpenAI menggunakan identitas terkelola:

   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
   

   Perintah ini membuat koneksi antara aplikasi web Anda dan sumber daya Azure OpenAI dengan:

   • Menghasilkan identitas terkelola yang ditetapkan sistem untuk aplikasi web.
   • Menambahkan peran Kontributor Cognitive Services OpenAI ke identitas yang dikelola untuk sumber daya Azure OpenAI.
   • AZURE_OPENAI_ENDPOINT Menambahkan pengaturan aplikasi ke aplikasi web Anda.

   Aplikasi Anda sekarang disebarkan dan terhubung ke Azure OpenAI dengan identitas terkelola. Ini mengakses AZURE_OPENAI_ENDPOINT pengaturan aplikasi melalui injeksi IConfiguration.

3. Buka aplikasi web yang disebarkan di browser. Temukan URL aplikasi web yang disebarkan di output terminal. Buka browser web Anda dan navigasikan ke browser web tersebut.

   az webapp browse
   

4. Ketik pesan di kotak teks dan pilih Kirim, dan beri aplikasi beberapa detik untuk membalas dengan pesan dari Azure OpenAI.

   

Tanya jawab umum

• Bagaimana jika saya ingin tersambung ke OpenAI alih-alih Azure OpenAI?
• Dapatkah saya tersambung ke Azure OpenAI dengan kunci API sebagai gantinya?
• Bagaimana cara kerja DefaultAzureCredential dalam tutorial ini?

---

Bagaimana jika saya ingin tersambung ke OpenAI alih-alih Azure OpenAI?

Untuk menyambungkan ke OpenAI, gunakan kode berikut:

@using OpenAI.Client

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

Untuk informasi selengkapnya, lihat Autentikasi OpenAI API.

Saat bekerja dengan rahasia koneksi di App Service, Anda harus menggunakan referensi Key Vault alih-alih menyimpan rahasia langsung di basis kode Anda. Ini memastikan bahwa informasi sensitif tetap aman dan dikelola secara terpusat.

---

Dapatkah saya tersambung ke Azure OpenAI dengan kunci API sebagai gantinya?

Ya, Anda dapat terhubung ke Azure OpenAI menggunakan kunci API alih-alih identitas terkelola. Pendekatan ini didukung oleh Azure OpenAI SDK dan Semantic Kernel.

• Untuk detail tentang menggunakan kunci API dengan Semantic Kernel di C#, lihat Mulai Cepat Semantic Kernel C#.
• Untuk detail tentang menggunakan kunci API dengan pustaka klien Azure OpenAI: Panduan Cepat: Mulai menggunakan penyelesaian obrolan dengan Azure OpenAI Service.

Saat bekerja dengan rahasia koneksi di App Service, Anda harus menggunakan referensi Key Vault alih-alih menyimpan rahasia langsung di basis kode Anda. Ini memastikan bahwa informasi sensitif tetap aman dan dikelola secara terpusat.

---

Bagaimana cara kerja DefaultAzureCredential dalam tutorial ini?

DefaultAzureCredential menyederhanakan autentikasi dengan secara otomatis memilih metode autentikasi terbaik yang tersedia.

• Selama pengembangan lokal: Setelah Anda menjalankan az login, ini menggunakan kredensial Azure CLI lokal Anda.
• Saat disebarkan ke Azure App Service: Ini menggunakan identitas terkelola aplikasi untuk autentikasi tanpa kata sandi yang aman.

Pendekatan ini memungkinkan kode Anda berjalan dengan aman dan lancar di lingkungan lokal dan cloud tanpa modifikasi.

Sumber daya lainnya

• Tutorial: Membangun Retrieval Augmented Generation dengan Azure OpenAI dan Azure AI Search (.NET)
• Tutorial: Menjalankan chatbot di App Service dengan ekstensi sidecar Phi-4 (ASP.NET Core)
• Membuat dan menyebarkan sumber daya Azure OpenAI Service
• Pelajari selengkapnya tentang identitas terkelola di App Service