Perbarui aplikasi Obrolan untuk menggunakan frontend JavaScript dengan backend Python

Artikel
05/21/2024

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 - Mengonfigurasi frontend JavaScript dengan video 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:

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.

Prasyarat

Sebarkan 2 arsitektur referensi menggunakan artikel berikut. Pastikan untuk menggunakan langganan dan wilayah yang sama untuk kedua penyebaran. Penyebaran dapat memakan waktu hingga 20 menit. Biarkan penyebaran 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 menyebarkan dua arsitektur referensi, Anda memiliki dua aplikasi tumpukan penuh 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

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 dan filter lingkungan cloud untuk variabel .WEBAPP_URI Pastikan URL tidak diakhir dengan garis miring, /.
Salin URL.
Di lingkungan pengembangan Python, atur URL untuk frontend JavaScript dengan menjalankan perintah berikut:
```
azd env set ALLOWED_ORIGIN <FRONTEND-URL>
```
Di lingkungan pengembangan Python, sebarkan ulang backend Python dengan menjalankan perintah berikut:
```
azd up
```

Mengatur URL backend Python di frontend JavaScript

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 dan filter lingkungan cloud untuk variabel .BACKEND_URI Pastikan URL tidak diakhir dengan garis miring, /.
Salin URL.
Di lingkungan pengembangan JavaScript, atur URL untuk backend Python dengan menjalankan perintah berikut:
```
azd env set BACKEND_URI <BACKEND_URI>
```
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.

Hapus aplikasi JavaScript dengan instruksi ini
Hapus aplikasi Python dengan instruksi ini

Pemecahan Masalah

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

Bagikan melalui