Mulai menggunakan obrolan menggunakan sampel data Anda sendiri untuk JavaScript

Artikel ini menunjukkan kepada Anda cara menyebarkan dan menjalankan Obrolan dengan sampel data untuk JavaScript. Sampel ini mengimplementasikan aplikasi obrolan menggunakan JavaScript, Azure OpenAI Service, dan Retrieval Augmented Generation (RAG) di Azure AI Search untuk mendapatkan jawaban tentang properti sewaan. Aplikasi obrolan properti sewa disemai dengan data dari file markdown (*.md) termasuk kebijakan privasi, ketentuan layanan, dan dukungan.

• Demo JavaScript - video pengembangan penuh
• Demo JavaScript - frontend dengan backend Python video

Dengan mengikuti instruksi dalam artikel ini, Anda akan:

• Menyebarkan aplikasi obrolan ke Azure.
• Dapatkan jawaban tentang informasi situs web properti penyewaan.
• Ubah pengaturan untuk mengubah perilaku respons.

Setelah menyelesaikan artikel ini, Anda dapat mulai memodifikasi proyek baru dengan kode dan data kustom Anda.

Artikel ini adalah bagian dari kumpulan artikel yang menunjukkan kepada Anda cara membuat aplikasi obrolan menggunakan Azure OpenAI Service dan Azure AI Search. Artikel lain dalam koleksi meliputi:

• .NET
• Java
• Python

Catatan

Artikel ini menggunakan satu atau beberapa templat aplikasi AI sebagai dasar untuk contoh dan panduan dalam artikel. Templat aplikasi AI memberi Anda implementasi referensi yang terawat dan mudah disebarkan dengan baik yang membantu memastikan titik awal berkualitas tinggi untuk aplikasi AI Anda.

Ikhtisar arsitektur

Arsitektur sederhana aplikasi obrolan ditampilkan dalam diagram berikut:

Diagram yang menunjukkan arsitektur dari klien ke aplikasi backend.

Aplikasi sampel obrolan dibangun untuk perusahaan fiktif bernama Contoso Real Estate, dan pengalaman obrolan cerdas memungkinkan pelanggannya untuk mengajukan pertanyaan dukungan tentang penggunaan produknya. Data sampel mencakup sekumpulan dokumen yang menjelaskan ketentuan layanan, kebijakan privasi, dan panduan dukungannya. Dokumen dimasukkan ke dalam arsitektur selama penerapan.

Aplikasi ini dibuat dari beberapa komponen, termasuk:

• Layanan pencarian: layanan backend yang menyediakan kemampuan pencarian dan pengambilan.
• Layanan pengindeks: layanan yang mengindeks data dan membuat indeks pencarian.
• Web app: aplikasi web frontend yang menyediakan antarmuka pengguna dan mengatur interaksi antara pengguna dan layanan backend.

Diagram memperlihatkan layanan Azure dan alur integrasinya untuk aplikasi front-end, pencarian, dan pemasukan dokumen.

Biaya

Sebagian besar sumber daya dalam arsitektur ini menggunakan tingkat harga dasar atau konsumsi. Harga konsumsi didasarkan pada penggunaan, yang berarti Anda hanya membayar apa yang Anda gunakan. Untuk menyelesaikan artikel ini, sumber daya menghasilkan biaya tetapi minimal. Setelah selesai dengan artikel ini, Anda dapat menghapus sumber daya untuk berhenti dikenakan biaya.

Pelajari selengkapnya tentang biaya dalam repositori contoh.

Prasyarat

Lingkungan kontainer pengembangan tersedia dengan semua dependensi yang diperlukan untuk menyelesaikan artikel ini. Anda dapat menjalankan kontainer pengembangan di GitHub Codespaces (di browser) atau secara lokal menggunakan Visual Studio Code.

Untuk menggunakan artikel ini, Anda memerlukan prasyarat berikut:

• Langganan Azure - Buat satu secara gratis
• Izin akun Azure - Akun Azure Anda harus memiliki izin untuk Microsoft.Authorization/roleAssignments/write, seperti Administrator Akses Pengguna atau Pemilik.
• Akun GitHub

Visual Studio Code

• Langganan Azure - buat langganan gratis
• Izin akun Azure - Akun Azure Anda harus memiliki izin Microsoft.Authorization/roleAssignments/write, seperti Administrator Akses Pengguna atau Pemilik.
• Azure Developer CLI
• Docker Desktop - mulai Docker Desktop jika belum berjalan
• Visual Studio Code
• Ekstensi Kontainer Dev

Membuka lingkungan pengembangan

Gunakan instruksi berikut untuk menyebarkan lingkungan pengembangan yang telah dikonfigurasi sebelumnya yang berisi semua dependensi yang diperlukan untuk menyelesaikan artikel ini.

GitHub Codespaces menjalankan kontainer pengembangan yang dikelola oleh GitHub dengan Visual Studio Code versi Web sebagai antarmuka pengguna. Untuk lingkungan pengembangan yang paling mudah, gunakan GitHub Codespaces sehingga Anda memiliki alat dan dependensi pengembang yang benar yang telah diinstal sebelumnya untuk menyelesaikan artikel ini.

Penting

Semua akun GitHub dapat menggunakan Codespace hingga 60 jam gratis setiap bulan dengan dua instans inti. Untuk informasi selengkapnya, lihat penyimpanan bulanan yang disertakan dan jam inti GitHub Codespaces.

1. Mulai proses untuk membuat GitHub Codespace baru pada cabang main dari repositori GitHub Azure-Samples/azure-search-openai-javascript.

2. Klik kanan pada tombol berikut, dan pilih Buka tautan di jendela baru agar lingkungan pengembangan dan dokumentasi tersedia secara bersamaan.

   Buka di GitHub Codespaces

3. Pada halaman Buat codespace , tinjau pengaturan konfigurasi codespace, lalu pilih Buat codespace baru

   Cuplikan layar dari layar konfirmasi sebelum membuat codespace baru.

4. Tunggu hingga codespace dimulai. Proses startup ini dapat memakan waktu beberapa menit.

5. Di terminal di bagian bawah layar, masuk ke Azure dengan Azure Developer CLI.

   azd auth login --use-device-code
   

6. Salin kode dari terminal lalu tempelkan ke browser. Ikuti instruksi untuk mengautentikasi dengan akun Azure Anda.

7. Tugas yang tersisa dalam artikel ini berlangsung dalam konteks kontainer pengembangan ini.

Ekstensi Dev Containers untuk Visual Studio Code memerlukan Docker diinstal pada komputer lokal Anda. Ekstensi menghosting kontainer pengembangan secara lokal menggunakan host Docker dengan alat pengembang dan dependensi yang benar yang telah diinstal sebelumnya untuk menyelesaikan artikel ini.

1. Buat direktori lokal baru di komputer Anda untuk proyek tersebut.

   mkdir my-intelligent-app && cd my-intelligent-app
   

2. Buka Visual Studio Code di direktori tersebut:

   code .
   

3. Buka terminal baru di Visual Studio Code.

4. Jalankan perintah AZD berikut untuk membawa repositori GitHub ke komputer lokal Anda.

   azd init -t azure-search-openai-javascript
   

5. Buka Palet Perintah, cari dan pilih Kontainer Dev: Buka Folder di Kontainer untuk membuka proyek dalam kontainer pengembangan. Tunggu hingga kontainer dev terbuka sebelum melanjutkan.

6. Masuk ke Azure dengan Azure Developer CLI.

   azd auth login
   

   Salin kode dari terminal lalu tempelkan ke browser. Ikuti instruksi untuk mengautentikasi dengan akun Azure Anda.

7. Latihan yang tersisa dalam proyek ini berlangsung dalam konteks kontainer pengembangan ini.

Sebarkan dan jalankan

Repositori sampel berisi semua kode dan file konfigurasi yang Anda butuhkan untuk menyebarkan aplikasi obrolan ke Azure. Langkah-langkah berikut membimbing Anda melalui proses penyebaran contoh ke Azure.

Menyebarkan aplikasi obrolan ke Azure

Penting

Sumber daya Azure yang dibuat di bagian ini dikenakan biaya langsung, terutama dari sumber daya Azure AI Search. Sumber daya ini mungkin menimbulkan biaya bahkan jika Anda menghentikan perintah sebelum sepenuhnya dijalankan.

1. Jalankan perintah Azure Developer CLI berikut untuk menyediakan sumber daya Azure dan menyebarkan kode sumber:

   azd up
   

2. Jika Anda diminta untuk memasukkan nama lingkungan, tetap pendekkan dan huruf kecil. Contohnya, myenv. Ini digunakan sebagai bagian dari nama grup sumber daya.

3. Saat diminta, pilih langganan untuk membuat sumber daya.

4. Saat Anda diminta untuk memilih lokasi untuk pertama kalinya, pilih lokasi di dekat Anda. Lokasi ini digunakan untuk sebagian besar sumber daya termasuk hosting.

5. Jika Anda dimintai lokasi untuk model OpenAI, pilih lokasi yang ada di dekat Anda. Jika lokasi yang sama tersedia sebagai lokasi pertama Anda, pilih lokasi tersebut.

6. Tunggu hingga aplikasi diimplementasikan. Mungkin perlu waktu 5-10 menit agar penyebaran selesai.

7. Setelah aplikasi berhasil disebarkan, Anda akan melihat URL yang ditampilkan di terminal.

8. Pilih URL yang diberi label Deploying service web untuk membuka aplikasi obrolan di browser.

   Cuplikan layar aplikasi obrolan di browser memperlihatkan beberapa saran untuk input obrolan dan kotak teks obrolan untuk memasukkan pertanyaan.

Menggunakan aplikasi obrolan untuk mendapatkan jawaban dari file markdown

Aplikasi obrolan telah dimuat sebelumnya dengan informasi sewa dari katalog file markdown. Anda dapat menggunakan aplikasi obrolan untuk mengajukan pertanyaan tentang proses penyewaan. Langkah-langkah berikut memandu Anda melalui proses penggunaan aplikasi obrolan.

1. Di browser, pilih atau masukkan Apa kebijakan pengembalian dana di kotak teks di bagian bawah halaman.

   Cuplikan layar dari jawaban pertama aplikasi chat.

2. Dari jawaban, pilih Tampilkan proses pemikiran.

   Cuplikan layar dari jawaban pertama aplikasi obrolan dengan "Tampilkan proses pemikiran" yang disorot dalam kotak merah.

3. Di panel kanan, gunakan tab untuk memahami bagaimana jawaban dihasilkan.

   Tab	Deskripsi
   Proses pemikiran	Ini adalah skrip interaksi dalam obrolan. Anda dapat melihat permintaan sistem (content) dan pertanyaan pengguna Anda (content).
   Konten pendukung	Ini termasuk informasi untuk menjawab pertanyaan Anda dan materi sumber. Jumlah kutipan materi sumber dicatat dalam Pengaturan Pengembang. Nilai defaultnya adalah 3.
   Kutipan	Ini menampilkan halaman asli yang berisi kutipan.

4. Setelah selesai, pilih tombol sembunyikan yang ditandai dengan X di atas tab.

Menggunakan pengaturan aplikasi obrolan untuk mengubah perilaku respons

Kecerdasan aplikasi obrolan ditentukan oleh model OpenAI dan pengaturan yang digunakan untuk berinteraksi dengan model.

Cuplikan layar dari pengaturan pengembang obrolan.

Pengaturan	Deskripsi
Ambil alih templat perintah	Ini adalah perintah yang digunakan untuk menghasilkan jawaban.
Ambil hasil pencarian sebanyak ini	Ini adalah jumlah hasil pencarian yang digunakan untuk menghasilkan jawabannya. Anda dapat melihat sumber-sumber ini dikembalikan pada tab "Proses Pemikiran" dan "Konten Pendukung" dari kutipan.
Mengecualikan kategori	Ini adalah kategori dokumen yang dikecualikan dari hasil pencarian.
Gunakan ranker semantik untuk pengambilan informasi	Ini adalah fitur Azure AI Search yang menggunakan pembelajaran mesin untuk meningkatkan relevansi hasil pencarian.
Menggunakan ringkasan kontekstual kueri alih-alih seluruh dokumen	"Dalam kondisi ketika dua-duanya Use semantic ranker dan Use query-contextual summaries dicentang, LLM menggunakan keterangan yang diekstrak dari bagian-bagian kunci, alih-alih semua bagian, dalam dokumen yang memiliki peringkat tertinggi."
Sarankan pertanyaan tindak lanjut	Minta aplikasi obrolan menyarankan pertanyaan tindak lanjut berdasarkan jawabannya.
Mode pengambilan	Vektor + Teks berarti bahwa hasil pencarian didasarkan pada teks dokumen dan penyematan dokumen. Vektor berarti bahwa hasil pencarian didasarkan pada embedding dokumen. Teks berarti bahwa hasil pencarian didasarkan pada teks dokumen.
Mengalirkan hasil penyelesaian percakapan	Mengalirkan respons daripada menunggu jawaban lengkap tersedia untuk ditanggapi.

Langkah-langkah berikut membimbing Anda melalui proses mengubah pengaturan.

1. Pada browser, pilih tab Pengaturan Pengembang.

2. Centang kotak Gunakan ringkasan kontekstual kueri alih-alih dan ajukan pertanyaan yang sama lagi.

   What happens if the rental doesn't fit the description?
   

   Obrolan kembali dengan jawaban yang lebih ringkas seperti berikut ini.

Membersihkan sumber daya

Membersihkan sumber daya Azure

Sumber daya Azure yang dibuat dalam artikel ini ditagihkan ke langganan Azure Anda. Jika Anda tidak mengharapkan untuk membutuhkan sumber daya ini di masa mendatang, hapus sumber daya tersebut untuk menghindari dikenakan lebih banyak biaya.

Jalankan perintah Azure Developer CLI berikut untuk menghapus sumber daya Azure dan menghapus kode sumber:

azd down --purge

Membersihkan GitHub Codespaces

Menghapus lingkungan GitHub Codespaces memastikan bahwa Anda dapat memaksimalkan jumlah pemberian izin per jam inti gratis yang Anda dapatkan untuk akun Anda.

Penting

Untuk informasi selengkapnya tentang hak akun GitHub Anda, lihat penyimpanan dan jam inti yang disertakan dalam GitHub Codespaces bulanan.

1. Masuklah ke dasbor GitHub Codespaces.

2. Temukan Codespace Yang sedang berjalan yang bersumber dari Azure-Samples/azure-search-openai-javascript repositori GitHub.

   Cuplikan layar semua Codespace yang sedang berjalan termasuk status dan templatnya.

3. Buka menu konteks untuk codespace, lalu pilih Hapus.

   Cuplikan layar menu konteks untuk satu codespace dengan opsi hapus yang disorot.

Anda tidak perlu membersihkan lingkungan lokal, tetapi Anda dapat menghentikan kontainer pengembangan yang sedang berjalan dan kembali menjalankan Visual Studio Code dalam konteks ruang kerja lokal.

1. Buka Palet Perintah, cari perintah Dev Containers, lalu pilih Dev Containers: Buka Kembali Folder Secara Lokal.

   Cuplikan layar dari opsi Palet Perintah untuk membuka kembali folder saat ini dalam lingkungan lokal Anda.

Petunjuk

Visual Studio Code menghentikan kontainer pengembangan yang sedang berjalan, tetapi kontainer masih ada di Docker dalam status berhenti. Anda selalu dapat menghapus instans kontainer, gambar kontainer, dan volume dari Docker untuk mengosongkan lebih banyak ruang di komputer lokal Anda.

Dapatkan bantuan

Repositori sampel ini menawarkan informasi pemecahan masalah.

Jika masalah Anda tidak diatasi, catat masalah Anda di bagian Issues dari repository.

Langkah berikutnya

• Dapatkan kode sumber untuk sampel yang digunakan dalam artikel ini
• Membangun aplikasi obrolan dengan arsitektur solusi praktik terbaik Azure OpenAI
• Kontrol akses dalam aplikasi AI generatif dengan Azure AI Search
• Membangun solusi OpenAI siap untuk perusahaan dengan Azure API Management
• Pencarian vektor dengan performa lebih unggul dengan kemampuan gabungan untuk pengambilan dan peringkat.

• Pelajari selengkapnya tentang bagaimana AZD digunakan dalam templat ini:
  • Blog komunitas Tech
  • seri video Reactor