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 multilanguage 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 Azure AI Search. 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 instalasi tetap aktif; jangan selesaikan bagian Bersihkan sumber daya hingga Anda selesai dengan artikel ini.

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

Dapatkan URL untuk frontend dan backend

Setelah mengimplementasikan dua arsitektur referensi, Anda memiliki dua aplikasi full-stack yang disebarkan. Untuk menggunakan frontend JavaScript dengan backend Python, Anda perlu mendapatkan URL untuk frontend JS dan backend PY dan mengonfigurasinya di aplikasi lain.

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

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 menyaring 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.

Pemecahan Masalah

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

Langkah berikutnya

  • Last updated on