Perbarui aplikasi Obrolan untuk menggunakan frontend JavaScript dengan backend Python

Aplikasi Obrolan adalah aplikasi referensi yang menunjukkan cara menggunakan layanan Azure OpenAI. Setiap arsitektur referensi bahasa pemrograman menyediakan fungsionalitas yang sedikit berbeda. Artikel ini menjelaskan cara menggunakan frontend JavaScript dengan backend Python.

Dengan mencampur dan mencocokkan frontend dan backend, Anda dapat membuat aplikasi multi-bahasa yang menggunakan yang terbaik dari kedua dunia.

  • Demo - Video Mengonfigurasi Frontend JavaScript dengan Backend Python

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

  • .NET
  • Java
  • Python

Catatan

Artikel ini menggunakan satu atau beberapa template 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.

Prasyarat

Sebarkan dua arsitektur referensi menggunakan artikel berikut. Pastikan untuk menggunakan langganan dan wilayah yang sama untuk deployment kedua. Penyebaran mungkin memakan waktu hingga 20 menit. Biarkan deployment tetap berjalan; jangan selesaikan bagian Bersihkan sumber daya sampai Anda selesai membaca artikel ini.

  • Sebarkan aplikasi obrolan JavaScript menggunakan artikel ini
  • Sebarkan aplikasi obrolan Python menggunakan artikel ini

Dapatkan URL untuk frontend dan backend

Setelah Anda menerapkan dua arsitektur referensi, Anda akan memiliki dua aplikasi full-stack. Untuk menyambungkan frontend JavaScript dengan backend Python, dapatkan URL untuk kedua aplikasi dan konfigurasikan.

Anda harus memiliki setiap repositori di lingkungan pengembangan terpisah, baik secara lokal atau di Codespace.

Mengatur URL front-end JavaScript di backend Python

  1. Di lingkungan pengembangan JavaScript, dapatkan URL untuk frontend JavaScript dengan menjalankan perintah berikut:

    azd env get-values | grep WEBAPP_URI

    Perintah ini mendapatkan semua variabel lingkungan cloud dan memfilter untuk variabel WEBAPP_URI. Pastikan URL tidak diakhiri dengan garis miring, /.

  2. Salin URL.

  3. Di lingkungan pengembangan Python, atur URL untuk frontend JavaScript dengan menjalankan perintah berikut:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. Di lingkungan pengembangan Python, sebarkan ulang backend Python dengan menjalankan perintah berikut:

    azd up

Mengatur URL backend Python di frontend JavaScript

  1. Di lingkungan pengembangan Python, dapatkan URL untuk backend Python dengan menjalankan perintah berikut:

    azd env get-values | grep BACKEND_URI

    Perintah ini mendapatkan semua variabel lingkungan cloud dan memfilter untuk variabel BACKEND_URI. Pastikan URL tidak diakhiri dengan garis miring, /.

  2. Salin URL.

  3. Di lingkungan pengembangan JavaScript, atur URL untuk backend Python dengan menjalankan perintah berikut:

    azd env set BACKEND_URI <BACKEND_URI>

  4. Di lingkungan pengembangan Python, sebarkan ulang backend Python dengan menjalankan perintah berikut di lingkungan pengembangan Python:

    azd up

Menggunakan frontend JavaScript dengan backend Python

Aplikasi Python menggunakan area subjek manfaat SDM sementara aplikasi JavaScript menggunakan area subjek real estat. Setelah aplikasi terhubung, Anda dapat menggunakan front-end untuk menanyakan manfaat SDM. Pertanyaan yang disarankan meliputi:

  • Apa yang disertakan dalam paket Northwind Health Plus saya yang tidak standar?
  • Apa yang terjadi dalam tinjauan performa?
  • Apa yang dilakukan Manajer Produk?

Membersihkan sumber daya

Setelah selesai dengan aplikasi, Anda dapat menghapus sumber daya untuk menghindari dikenakan lebih banyak biaya.

Troubleshoot

  • Jika Anda mendapatkan kesalahan, pastikan URL yang Anda masukkan di lingkungan tidak berakhir dengan garis miring, /.

Konten terkait

  • Last updated on