Pengarang: Dr. Dharini R
Awalnya diterbitkan di Towards AI the World’s Leading AI and Technology News and Media Company. Jika Anda membuat produk atau layanan terkait AI, kami mengundang Anda untuk mempertimbangkan menjadi sponsor AI. Di Towards AI, kami membantu menskalakan AI dan startup teknologi. Biarkan kami membantu Anda melepaskan teknologi Anda kepada massa.
Menggunakan Hugging Face Inference API, Flask, HTML & CSS
Apa tujuannya? Untuk membangun aplikasi web yang bisa mendapatkan teks input dan menampilkan ringkasannya.
Apa yang akan kita gunakan? Hugging Face Accelerated Inference API, Framework Python Flask, HTML, CSS.
Bagaimana cara melakukannya? Dengan melakukan langkah-langkah berikut.
Proses 3 Langkah
1. Identifikasi API inferensi model peringkasan teks dari library Hugging Face.
2. Bangun ujung depan dengan HTML dan CSS.
3. Bangun bagian belakang dengan Python Flask dan sertakan tugas peringkasan.
Peringkasan teks adalah tugas mengekstraksi ringkasan dari serangkaian kalimat yang diberikan. Ringkasan dapat terdiri dari dua jenis — ringkasan abstraktif atau ringkasan ekstraktif. Ringkasan ekstraktif memiliki kata-kata yang diekstrak dari input yang diberikan, menempatkannya bersama untuk membentuk ringkasan. Ringkasan abstraktif menghasilkan ringkasan tidak hanya dengan mereplikasi kata-kata dalam input, tetapi juga menciptakan kata-kata baru berdasarkan pemahaman teks.
Kita akan membuat aplikasi ringkasan abstraktif menggunakan Hugging Face Accelerated Inference API. Untuk memanfaatkan model dengan memberikan input padanya dan untuk mendapatkan output model, kita hanya perlu melakukan panggilan API.
Inferensi yang dipercepat memungkinkan jenis penggunaan ‘plug-and-play’ ke model pembelajaran mesin melalui panggilan API.
Silakan merujuk ke tautan blog berikut untuk memahami cara kerja Inference API dan manfaatnya dengan demo implementasi.
Model ML Plug-and-Play dengan ‘Accelerated Inference API’ dari Hugging Face
Bagian aplikasi web dari proyek kami dapat dengan mudah dibangun dengan kerangka kerja Flask. Flask membantu pengembangan aplikasi web dan merender file HTML, yang dapat dilihat di browser web.
Selamat datang di Flask – Dokumentasi Flask (2.2.x)
Ujung depan aplikasi web kami dibangun dengan HTML dan CSS. Hyper Text Markup Language (HTML) dan Cascading Style Sheets (CSS) masing-masing digunakan untuk mendesain struktur halaman web dan presentasi halaman web.
Setelah melihat inti dari semua yang akan kita gunakan, mari kita memiliki gambaran tentang apa yang akan kita bangun. Aplikasi web kami akan memiliki
ujung depan – halaman web yang mendapatkan teks input pengguna dan menampilkan ringkasan sebagai output. a back end — tempat input pengguna dimasukkan ke model, dan hasilnya diekstraksi dari model.
Sekarang silakan pastikan untuk melalui proses 3 langkah membangun aplikasi peringkasan kami.
1. Identifikasi dan manfaatkan model peringkasan teks dari Hugging Face
Untuk proyek kami, kami akan menggunakan model facebook/bart-large-cnn yang disediakan oleh Lewis et al. [BART: Denoising Sequence-to-Sequence Pre-training for Natural Language Generation, Translation, and Comprehension]
Untuk menggunakan Inference API model, pilih model dari library Hugging Face lalu klik Inference API di bawah tombol Deploy. Saat mengklik itu, kita akan melihat skrip python yang dapat digunakan untuk inferensi, seperti yang ditunjukkan di bawah ini.
Memilih Inference API dari Hugging Face Token Akses diperlukan untuk mendapatkan API_URL dan header. Buat profil di Hugging Face dan buat token akses baru dengan mengikuti jalur ini Profil -> Pengaturan -> Tab Token Akses. Token akses yang baru dibuat dapat digunakan sebagai pengganti Bearer dan header Sekarang mari beralih ke bagian selanjutnya dari proyek kita untuk membuat aplikasi web.
2. Bangun ujung depan dengan HTML dan CSS.
Kode untuk ujung depan ditulis dalam dua bagian
— File statis
— Berkas HTML
File statis terdiri dari penyesuaian untuk mengimprovisasi tampilan ujung depan kita. Seperti namanya, konten file statis tidak akan diubah sesuai dengan masukan atau tindakan pengguna. File statis dapat mencakup apa saja seperti gambar, video, lembar gaya kaskade (CSS), file flash, dll., dan ini tidak dihasilkan secara dinamis oleh server web seperti respons HTML pada umumnya karena tetap statis.
Di lokasi yang diinginkan, buat dua folder bernama staticdan template Di folder statis, buat file baru bernama main.css, di mana CSS adalah lembar gaya kaskade yang digunakan untuk memberi gaya pada HTML. main.css terdiri dari tag yang ada dalam kode HTML dengan gaya dan pemformatan yang sesuai. Untuk tutorial lebih rinci tentang bagaimana CSS digunakan, silakan merujuk ke tautan ini. Kode untuk main.css file statis diberikan di bawah ini, diikuti dengan penjelasan.
https://medium.com/media/9085edd775ba2e82870a4b711d3e6523/href
Seperti yang dapat kita lihat, file CSS di atas terdiri dari pemformatan berbasis tampilan dan penyesuaian untuk sebagian besar tag yang digunakan dalam kode HTML kita.
Penjelasan Kode
Baris 2 hingga 9 — terdiri dari penataan gaya dan pemformatan yang ditujukan pada tajuk tag. Baris 11 sampai 25 — terdiri dari format untuk tag h1. Baris 28 hingga 34 — memiliki gaya untuk tag body, bersama dengan gambar latar bernama image.gif Baris 35 hingga 39 — memformat untuk wadah Baris 41 hingga 47 — gaya untuk tag div, yang menentukan pembagian beberapa konten Baris 49 hingga 64 — pemformatan untuk tag h2 dan h3 Baris 68 s/d 77 — terdiri dari pemformatan yang bertujuan menempatkan dua kotak teks berdampingan dengan bantuan tag induk dan anak. Mari beralih ke pembuatan ujung depan dengan kode HTML kita.
HTML dibangun dengan tujuan menyediakan antarmuka pengguna yang terstruktur dan menyenangkan, ruang bagi pengguna untuk memberikan input dan ruang untuk menampilkan ringkasan.
Di folder yang sudah dibuat bernama template, buat file baru bernama index.html. Kode untuk index.html diberikan di bawah ini, diikuti dengan penjelasannya.
https://medium.com/media/259955078d0a4fa19f39d7196e7b124b/href
Penjelasan Kode
Baris 4 hingga 11— Header HTML Baris 9 — Kami telah menambahkan sumber file statis (main.css). Baris 10 — Kami telah memberi judul untuk halaman web kami bernama Aplikasi Peringkasan. Baris 13 sampai 42 — Badan HTML Baris 14 sampai 19 — Berisi headertag, yang digunakan untuk menyediakan bagian pengantar halaman web. Dalam kasus kami, kami telah memberikan “Aplikasi Peringkasan Saya” Baris 23 dan 34 — Dua kotak teks dibuat dan ditempatkan berdampingan Baris 25 hingga 31 — Formulir yang dibuat untuk mendapatkan data masukan dan mengirimkannya ke ujung belakang. Kami telah menggunakan tindakan formulir untuk menentukan bahwa data yang dikirimkan harus dikirim ke get_summary metode yang ditulis di bagian belakang untuk diproses. Baris 27 — Kotak teks untuk input dibuat dan diberi nama dengan variabel nameinput_text yang digunakan di bagian belakang untuk memproses data input. Baris 29 dan 30 — Tombol Kirim dan Hapus dibuat. Baris 38 — Kotak teks untuk menampilkan keluaran dibuat dengan nama hasil yang digunakan di bagian belakang untuk menyimpan teks yang diringkas. Setelah membangun ujung depan untuk aplikasi web, mari kita lanjutkan untuk membangun ujung belakang.
3. Bangun bagian belakang dengan Python Flask dan sertakan tugas peringkasan.
Tugas bagian belakang adalah untuk
dapatkan input dari front end, gunakan Hugging Face’s Inference API dengan mengirimkan data input ke model summarization dan kumpulkan outputnya (summary) kirim ringkasan ke front end
Beri nama file python backend kita asapp.py, silakan lihat kode yang diberikan di bawah ini, diikuti dengan penjelasannya.
https://medium.com/media/b7bf53450d6615a682f9e3a4acc6a91b/href
Kita harus ingat bahwa ujung depan dan ujung belakang harus dihubungkan dengan nama variabel umum. Input untuk model peringkasan adalah
— Teks yang akan diringkas (diperoleh dari ujung depan)
— Panjang minimum ringkasan (diinisialisasi)
— Panjang maksimum ringkasan (diinisialisasi)
Penjelasan Kode
Untuk memulainya, mari instal Flask menggunakan perintah pip install flask Baris 6 — sertakan path untuk file statis Baris 7 hingga 9 — metode indeks untuk merender file index.html Baris 12 hingga 38 — metode get_summary Baris 15 dan 16 — include URL untuk API Inferensi dan token autentikasi, masing-masing. Pastikan untuk menempelkan token autentikasi Anda di bagian Pembawa. Baris 25 — tentukan input dari ujung depan menggunakan variabel input_text Baris 26 dan 27 — tentukan panjang maksimum dan minimum untuk ringkasan dengan variabel min_len dan max_len Baris 30 hingga 33 — kirim kueri ke model, termasuk variabel input. Hasilnya disimpan dalam variabel output. Baris 36 — ringkasan dari model yang disimpan di keluaran[“summary_text”] dikirim ke ujung depan menggunakan variabel hasil. Seperti yang bisa kita lihat, nama variabel umum yang digunakan untuk menghubungkan front end dan back end adalah input_text, get_summary, result. Kode lengkap untuk proyek ini diberikan di tautan GitHub ini.
Aplikasi Peringkasan
Saat menjalankan kode python app.py, ujung depan (dibuat menggunakan file main.css dan index.html) dirender di host lokal http://127.0.0.1:5000. Membuka tautan host lokal di browser akan memberi kita aplikasi web. Tangkapan layar dari output diberikan di bawah ini.
Kita dapat melihat Aplikasi Peringkasan sebagai judul halaman kita, APLIKASI RINGKASAN SAYA sebagai konten header, dua kotak teks berdampingan dengan judul Teks Input dan Teks Ringkas, dua tombol Kirim dan Hapus. Jika teks input diberikan di kotak sebelah kiri dan tombol Submit ditekan, metode get_summary dipanggil dan model summarization digunakan. Pada tangkapan layar berikut, kita dapat melihat bahwa teks masukan ditempelkan dan tombol Kirim diklik.
Hasilnya, metode get_summary dipanggil dan perubahan pada bilah alamat dapat dicatat dalam tangkapan layar berikut (http://127.0.0.1:5000/get_summary).
Saat metode get_summary dipanggil, API inferensi dari model Summarization digunakan, dan hasilnya ditampilkan di kotak Summarized Texttext.
Hore!!! Kami telah berhasil membuat aplikasi Web untuk tugas Peringkasan paling populer dalam Pemrosesan Bahasa Alami.
Ringkasan
Kami memiliki pengantar tentang peringkasan, bagaimana kami akan membangun aplikasi web untuk mengekstraksi ringkasan teks, dan inti dari semua elemen yang akan digunakan. Kami melanjutkan untuk memahami proses 3 langkah sederhana dalam mengembangkan aplikasi web, dimulai dengan memilih model dari Hugging Face untuk tugas tersebut. Selanjutnya, kami memahami penggunaan HTML dan CSS dengan contoh kode untuk membangun front end. Dilanjutkan dengan itu, kami menyimpulkan penggunaan Flask dengan contoh kode untuk membangun backend. Akhirnya, kami melihat hasil kerja keras kami, Aplikasi Web Peringkasan yang bermanfaat. Prosedur yang sama dapat diperluas untuk membuat jenis tugas Pemrosesan Bahasa Alami lainnya menggunakan model dari Hugging Face. Lanjutkan dengan tugas Anda dan berhasil!!!!
Pendekatan Langkah-demi-Langkah Untuk Membangun Webapp Peringkasan Teks dengan Python Dari Awal awalnya diterbitkan di Towards AI on Medium, di mana orang melanjutkan percakapan dengan menyoroti dan menanggapi cerita ini.
Diterbitkan melalui Menuju AI
