Membina antara muka pengguna untuk aplikasi AI dengan Gradio di Python

Kegunaan model AI hari ini sangat berkurangan tanpa antara muka pengguna yang boleh diakses. Menggunakan Gradio, perpustakaan UI Web Python sumber terbuka, anda boleh menjembatani jurang antara LLM dan pengguna akhir bukan teknikal. Ia membolehkan anda membuat prototaip pesat untuk projek AI anda dan memudahkan penggunaannya kepada khalayak yang lebih luas.

Tutorial ini bertujuan untuk jurutera pembelajaran mesin yang biasanya tidak mempunyai pengalaman pembangunan web. Ia meliputi asas -asas Gradio dan konsep teras, penciptaan antara muka untuk pelbagai jenis model AI, ciri -ciri canggih untuk UX dan interaktiviti, dan penempatan dan perkongsian amalan terbaik.

mari kita mulakan.

Bermula dengan Gradio

Pemasangan

kita akan memulakan dengan mewujudkan persekitaran maya (sebaik -baiknya conda):

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Kemudian, anda boleh menggunakan PIP untuk memasang Vadio dan kebergantungannya:

$ pip install gradio ipykernel

Kami juga telah memasang pakej ipykernel supaya kami dapat memaparkan antara muka Gradio lurus dalam buku nota Jupyter. Proses ini memerlukan anda menambah persekitaran maya yang anda buat sebagai kernel ke makmal Jupyter. Inilah arahan untuk melakukannya:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Ini sepatutnya membolehkan anda membuat buku nota dengan kernel yang telah dipasang Vadio. Untuk mengesahkan, mengimportnya di bawah alias standardnya dan mencetak versi:

import gradio as gr
print(gr.__version__)
4.37.1

konsep asas dan terminologi

kami akan menyelam ke Gradio dengan mempelajari konsep utama dan istilahnya melalui contoh "hello dunia":

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

Apabila anda menjalankan kod di atas dalam sel, output akan menjadi antara muka interaktif kecil yang mengembalikan mesej ucapan tersuai:

Gradio berkisar beberapa konsep utama:

antara muka
1. : kelas teras untuk membuat UIS.
Komponen
2. : elemen input dan output seperti kotak teks, imej dan audio. Terdapat lebih daripada 30 komponen terbina dalam sekarang. Fungsi
: fungsi Python yang memproses maklumat dari komponen input dan mengembalikan hasilnya untuk dipaparkan dengan komponen output.
3. Pelancaran
: Kaedah untuk memulakan aplikasi Gradio anda.
4. di atas, kami membuat fungsi salam yang mengambil dan mengembalikan input teks. Atas sebab ini, komponen input dan output ditentukan sebagai teks di dalam kelas antara muka.

Akhirnya, kami memanggil kaedah pelancaran, yang memulakan pelayan tempatan. Untuk menjadikan UI tersedia kepada sesiapa sahaja, anda boleh menetapkan parameter saham menjadi benar. Ini akan memulakan terowong SSH dan menggunakan aplikasi Gradio ke laman web yang boleh dibayangkan secara terbuka:

Komponen Vadio

demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)

anda akan menghabiskan sebahagian besar masa anda bermain -main di sekitar komponen yang berbeza dan bagaimana meletakkannya di halaman semasa membina aplikasi Gradio. Oleh itu, mari kita lihat dengan lebih dekat apa yang anda ada di pelupusan anda.

komponen input dan output

Gradio menawarkan pelbagai komponen untuk membina antara muka interaktif. Komponen ini biasanya dibahagikan kepada dua kategori: input dan output.

Komponen input membolehkan pengguna menyediakan data kepada pemproses asas (ini boleh menjadi fungsi python). Beberapa input biasa adalah:

• TextBox
• imej
• audio
• slider
• dropdown

Berikut adalah antara muka dummy yang menggunakan beberapa komponen di atas:

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Dalam contoh ini, fungsi Process_Inputs memerlukan lima parameter. Oleh itu, kita perlu membuat lima komponen input dan menyampaikannya kepada input. Walaupun bilangan komponen input sepadan dengan bilangan parameter fungsi yang diperlukan, ini bukan peraturan yang ketat. Untuk mengelakkan kesilapan dan amaran, tetapkan nilai lalai untuk parameter yang tidak memerlukan input pengguna dari UI.

Perhatikan bagaimana kami menggunakan kelas TextBox untuk menentukan komponen input dan bukannya teks rentetan biasa seperti contoh pertama. Ia sentiasa disyorkan untuk menggunakan kelas khusus untuk menentukan komponen input dan output untuk menjadikannya disesuaikan. Sebagai contoh, semua kelas komponen mempunyai atribut label yang berguna, manakala slider dan dropdown mempunyai argumen untuk menentukan julat dan pilihan yang tersedia.

Banyak komponen input boleh digunakan untuk memaparkan output juga. Berikut adalah beberapa senario biasa:

label: untuk memaparkan hasil teks atau klasifikasi
imej: untuk menunjukkan imej yang diproses atau dihasilkan
audio: untuk bermain audio diproses atau dijana
plot: untuk memaparkan graf atau carta

Seperti input, bilangan komponen output mesti sepadan dengan bilangan nilai yang dikembalikan dari fungsi pemprosesan.

Menyesuaikan penampilan komponen

Gradio membolehkan anda menyesuaikan penampilan komponen anda untuk memenuhi keperluan anda. Berikut adalah contoh yang menggunakan kotak teks yang disesuaikan:

$ pip install gradio ipykernel

Dalam contoh ini, kami telah menyesuaikan komponen TextBox dengan menentukan bilangan baris, menambah teks pemegang tempat dan maklumat, dan termasuk butang salinan untuk output.

Eksperimen dengan komponen yang berbeza dan sifat mereka untuk mewujudkan antara muka yang paling sesuai dengan keperluan aplikasi AI anda. Untuk mengetahui jenis sifat yang boleh anda ubah untuk komponen anda, anda boleh melawat dokumennya, atau lebih baik lagi, gunakan? Operand di Jupyter Lab selepas nama kelasnya:

Bangunan antara muka untuk llms

mari kita letakkan segala-galanya yang telah kita pelajari bersama dengan mencipta dua teks dunia sebenar dan antara muka berasaskan imej yang dikuasakan oleh LLMS.

Pertama, kita akan membina penterjemah bahasa dari bahasa Inggeris ke bahasa Turki, Sepanyol, atau Cina:

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Pada mulanya, kami menentukan fungsi translate_text. Di dalam badannya, kami menetapkan kunci API OpenAI dan membuat peta bahasa. Kemudian, kami membina prompt untuk terjemahan. Kemudian, di dalam blok percubaan cuba, kami menghantar permintaan ke titik akhir chatcompletion dengan prompt sistem. Pada akhirnya, kami mengembalikan pilihan pertama.

Sekarang, kita boleh membina antara muka:

$ pip install gradio ipykernel

Kod ini mudah, seperti antara muka terdahulu, tetapi kami memperkenalkan beberapa sifat baru:

• Taipkan argumen kotak teks Tukar medan input teks biasa ke input kata laluan, menyembunyikan teks.
• Tajuk dan perihalan argumen kelas antara muka menambah tajuk H1 dan sari kata ke pusat atas halaman.

inilah hasilnya:

Anda mungkin tertanya -tanya mengapa kami meminta kunci API pengguna sebagai sebahagian daripada aplikasi dan bukannya memberikannya sendiri. Sebabnya ada kaitan dengan bagaimana Vadio menyebarkan UIS.

Jika kami menyediakan kunci API kami sendiri sebagai pemboleh ubah persekitaran (yang merupakan amalan standard), versi aplikasi yang boleh dibagikan secara awam tidak akan berfungsi kerana ia tidak akan mendapat akses kepada pembolehubah persekitaran kami. Di bahagian penempatan, kami akan melihat bagaimana untuk membetulkannya dengan menggunakan aplikasi kami ke ruang pelukan.

mari kita bina UI lain untuk menjana imej:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Kami membuat fungsi bernama Generate_Surrealist_art yang menghantar permintaan ke Dall-E-3 dan mengembalikan URL imej yang dihasilkan menggunakan prompt surrealist. Kemudian, kami akan memberi makan fungsi ini ke dalam kelas antara muka sekali lagi:

import gradio as gr
print(gr.__version__)
4.37.1

Kami menentukan dua input untuk kunci API dan konsep yang kita mahu tangkap dalam imej surrealist. Kemudian, kami membuat satu komponen output untuk imej yang dihasilkan dengan kelas imej. Jika anda menetapkan argumen nilainya kepada STR, komponen boleh memuat turun dan memaparkan imej dari URL, yang hanya apa yang kita perlukan.

dan inilah hasilnya:

Bangunan antara muka untuk model ML klasik

Sekarang, mari kita bina antara muka untuk model regresi jadual klasik. Kami akan menggunakan dataset Diamonds, yang boleh didapati di Seaborn.

Mula dengan membuat direktori kerja baru dan skrip baru bernama App.py di dalam. Kemudian, tampal kod dari inti GitHub ini yang memuatkan data, memprosesnya menggunakan saluran paip SCIKIT-learn dan melatih model Randorestregression.

Langkah seterusnya adalah untuk membuat fungsi pemprosesan yang menerima bilangan input yang sama kerana terdapat ciri -ciri dalam dataset Diamonds:

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Fungsi menukarkan input tersebut ke dalam DataFrame dan meluluskannya ke kaedah .Predict () kaedah saluran paip yang terlatih. Pada akhirnya, ia mengembalikan rentetan dengan harga yang diramalkan.

Sekarang, kelas antara muka mesti sepadan dengan tandatangan fungsi ini: Sembilan komponen input untuk memproses ciri -ciri dan satu output untuk memaparkan harga yang diramalkan:

$ pip install gradio ipykernel

Di dalam kelas, kami mencipta tiga dropdowns untuk ciri -ciri kategori. Pilihan diisi dengan kategori unik dalam setiap ciri. Kami juga membuat enam komponen slider untuk menerima ciri -ciri angka. Julat slider ditentukan oleh nilai minimum dan maksimum setiap ciri.

yang perlu kita lakukan sekarang ialah melaksanakan skrip untuk menjalankan dan menggunakan aplikasi:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

inilah hasilnya:

Untuk amalan terbaik dan petua pengoptimuman, langkau ke bahagian Amalan Terbaik di bawah.

Menggunakan App Vadio

Kami telah melihat betapa mudahnya untuk menggunakan aplikasi Gradio dengan membolehkan satu hujah. Sudah tentu, kelemahan kaedah ini adalah bahawa demo tamat tempoh dalam masa 72 jam. Oleh itu, kaedah yang disyorkan untuk menggunakan Vadio adalah melalui ruang Huggingface. Huggingface memperoleh Gradio pada tahun 2021, menjadikan integrasi antara kedua -dua platform lancar.

Oleh itu, untuk tutorial ini atau mana -mana aplikasi masa depan yang anda buat dengan Gradio, mendaftar untuk akaun percuma di huggingface.co dan navigasi ke tetapan & gt; Token untuk menghasilkan token akses:

token dipaparkan hanya sekali, jadi pastikan untuk menyimpannya di tempat yang selamat.

Dengan token ini, anda boleh menggunakan seberapa banyak aplikasi Gradio yang anda inginkan dengan hosting kekal di ruang. Sebagai contoh, kami akan menggunakan model ramalan Harga Berlian dari bahagian sebelumnya, dan anda akan merasa mudah. ​​

semua yang anda perlu lakukan ialah menavigasi ke direktori dengan skrip UI dan hubungi Stadio yang digunakan di terminal:

Terminal berjalan anda melalui menukar skrip anda ke ruang pelukis yang berfungsi. Ia meminta butiran seperti:

token akses yang anda hasilkan

Tajuk Angkasa: Ini akan menjadi sebahagian daripada URL Angkasa selepas penempatan
Nama skrip yang mengandungi kod UI Vadio (App.py Default)
perkakasan ruang; Tinggalkan kosong untuk menggunakan CPU sahaja (percuma)
mana -mana pembolehubah persekitaran yang digunakan skrip (ini adalah di mana anda menyimpan kunci API dan rahsia pengguna dengan selamat)
Dependencies - Masukkan satu demi satu dengan menekan Enter
• dan terminal membentangkan anda dengan pautan ruang yang digunakan. Inilah yang kelihatan seperti:

Satu lagi perkara yang hebat mengenai kaedah penggunaan ini ialah Gradio secara automatik menukarkan demo ke API REST yang bekerja. Arahan untuk mengakses dan menanyakannya sentiasa terletak di bahagian bawah:

Jadi, dalam satu perjalanan, anda mempunyai hosting UI kekal untuk permohonan anda untuk pengguna bukan teknikal dan API REST untuk rakan-rakan dan rakan pemaju anda.

Untuk lebih banyak pilihan penggunaan dan perkongsian, seperti membenamkan demo ke dalam halaman web, menambah pengesahan Google ke aplikasi, dan lain -lain, lawati bahagian "berkongsi aplikasi anda" dokumentasi Gradio.

Amalan dan Petua Terbaik Vadio

Apabila membangunkan antara muka pengguna dengan Gradio, berikutan amalan terbaik dapat meningkatkan pengalaman pengguna dan mengekalkan aplikasi anda dengan ketara. Berikut adalah beberapa cadangan utama:

1. Gunakan skrip untuk organisasi dan penyelenggaraan

menganjurkan aplikasi Gradio dalam skrip Python untuk kawalan, kerjasama, dan penggunaan versi yang lebih baik.

2. Mengoptimumkan peruntukan ruang untuk komponen

Gunakan alat saiz dan susun atur yang sesuai (mis., Gr.column (), gr.row ()) untuk memastikan antara muka yang seimbang, responsif.

3. Menyediakan maklumat komprehensif

menggunakan atribut 'Info' dan 'Label' untuk memberikan arahan dan konteks yang jelas untuk setiap komponen.

4. Mengendalikan set ciri besar dengan cekap

Untuk model dengan banyak ciri, gunakan input fail (CSV, JSON) untuk membolehkan ramalan batch dan memudahkan antara muka.

5. Mengurus pembolehubah persekitaran dengan betul

Gunakan python-dotenv untuk pembangunan tempatan dan tetapkan pembolehubah dalam memeluk ruang muka untuk penempatan.

6. Melaksanakan pengendalian dan pengesahan ralat

Mengesahkan input, berikan mesej ralat yang jelas, dan gunakan blok percubaan cuba untuk pengendalian ralat anggun.

7. Mengoptimumkan prestasi

Melaksanakan caching, memuatkan malas untuk model besar, dan gunakan gr.loadingStatus () untuk tugas jangka panjang.

8. Reka bentuk untuk kebolehcapaian

Pastikan kontras yang tinggi, sediakan teks alt untuk imej, dan membolehkan navigasi papan kekunci untuk semua elemen interaktif.

9. Melaksanakan pendedahan progresif

Gunakan akordion atau tab untuk mengatur antara muka yang kompleks, mendedahkan pilihan lanjutan seperti yang diperlukan.

10. Kerap mengemas kini dan menyelenggara

Pastikan kebergantungan dikemas kini, memantau pepijat, dan terus bertambah baik berdasarkan maklum balas pengguna.

11. Leverage HuggingFace Resources

Gunakan alat dan sumber daya Huggingface untuk integrasi lancar dengan Gradio, termasuk repositori model dan dataset.

12. Tuan rumah model besar di hub huggingface

Untuk model tabular besar, muat naik ke HUB HUGGINGFACE dan memuatkan terus dalam skrip Gradio anda untuk meningkatkan prestasi dan mengurangkan keperluan penyimpanan tempatan.

13. Gunakan dataset Huggingface

Untuk dataset yang besar, muat naik ke HUB Huggingface dan mengaksesnya secara langsung dalam aplikasi Gradio anda untuk menyelaraskan pengurusan data dan meningkatkan masa pemuatan.

kesimpulan dan sumber selanjutnya

Dalam artikel ini, kami telah mempelajari asas -asas bangunan antara muka pengguna untuk aplikasi AI menggunakan Gradio. Kami baru sahaja dicelup di bawah permukaan kerana Gradio menawarkan lebih banyak ciri untuk membina antara muka kompleks. Sebagai contoh, keadaan antara muka membolehkan aplikasi anda mengingati output dari satu panggilan fungsi ke yang lain. Antara muka reaktif secara dinamik mengubah UI sebaik sahaja input pengguna berubah. Dengan blok, anda boleh membina aplikasi dengan susun atur dan reka bentuk tersuai.

Begitu juga, lihat sumber -sumber yang berkaitan ini untuk lebih banyak kandungan:

• 10 pakej python untuk ditambahkan pada stack sains data anda
• 7 Alat AI Generatif Essential untuk Membangun Aplikasi AI Stand-Out
• 5 projek yang boleh anda bina dengan model gen ai
• CI/CD untuk Kursus Pembelajaran Mesin

Topicsartificial IntelligencePython

Atas ialah kandungan terperinci Membina antara muka pengguna untuk aplikasi AI dengan Gradio di Python. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!