Lewati ke konten utama

Tutorial Llama 3.2 dan Gradio: Bangun Aplikasi Web Multimodal

Pelajari cara menggunakan model visi Llama 3.2 11B dengan Gradio untuk membuat aplikasi web multimodal yang berfungsi sebagai asisten dukungan pelanggan.
Diperbarui 28 Sep 2026  · 10 mnt Baca

Jelajahi bersama AI

ChatGPTClaudePerplexity

Masa ketika kita puas dengan model bahasa besar yang hanya bisa memproses teks sudah berlalu. Kini kita membutuhkan LLM multimodal yang mampu memahami dan berinteraksi dengan teks, gambar, dan video.

Inilah model visi Llama 3.2 11B & 90B, model multimodal open-source pertama dari Meta AI, yang mampu memproses masukan teks dan gambar.

Dalam panduan praktik ini, saya akan memandu Anda melalui proses membuat asisten dukungan pelanggan multimodal dengan bantuan Llama 3.2 dan Gradio. Di akhir tutorial ini, Anda akan memiliki aplikasi web yang sepenuhnya berfungsi yang dapat menganalisis deskripsi teks dan gambar yang diunggah untuk menghasilkan solusi bermanfaat—persis seperti asisten tiket dukungan!

Jika Anda membutuhkan pengantar singkat tentang Llama 3.2 sebelum memulai, saya sarankan membaca panduan Llama 3.2 ini.

Penyiapan Awal

Dalam demo praktik ini, kita akan menggunakan model Llama3.2-11B-Vision (multimodal). Sebelum mulai menulis kode, pastikan semua dependensi yang diperlukan sudah tersedia.

Kita memerlukan beberapa pustaka agar semuanya berjalan. Yang utama adalah:

  • Transformers: Pustaka inti untuk bekerja dengan model seperti Llama 3.2.
  • Torch: Pustaka pembelajaran mendalam yang menjalankan model kita.
  • Gradio: Untuk membangun antarmuka pengguna.

Jalankan perintah berikut untuk memasang dependensi yang diperlukan:

!pip3 install -U transformers bitsandbytes accelerate peft -q
!pip3 install gradio -q

Memuat Model dan Processor Llama 3.2

Sekarang, mari muat model dan processor Llama 3.2. Kita akan menggunakan pustaka transformers dari Hugging Face untuk memuat model dan processor, memastikan model berjalan di GPU jika tersedia, atau menggunakan CPU jika tidak. Sebagai model 11B parameter, model ini berjalan baik pada GPU A100 di Google Colab.

Pada blok kode di bawah ini:

  • Kita menyiapkan impor yang diperlukan.
  • Kita memuat model dan processor dengan dukungan GPU, jika tersedia. Ini memastikan aplikasi berjalan efisien, terutama saat memproses data dalam jumlah besar.
  • Kode penting yang perlu diperhatikan adalah tie_weight(), yang memastikan bobot pada lapisan embedding input dan output identik. Ini mengurangi konsumsi memori dan dapat meningkatkan performa.
import torch
from PIL import Image
import gradio as gr
from transformers import MllamaForConditionalGeneration, AutoProcessor

def load_model():
    model_id = "meta-llama/Llama-3.2-11B-Vision-Instruct"  
    device = "cuda" if torch.cuda.is_available() else "cpu"  # Check if GPU is available

    model = MllamaForConditionalGeneration.from_pretrained(
        model_id,
        torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,  
        device_map="auto",  # Automatically map to available device
        offload_folder="offload",  # Offload to disk if necessary
    )
    
    model.tie_weights()  # Tying weights for efficiency
    processor = AutoProcessor.from_pretrained(model_id)
    print(f"Model loaded on: {device}")
    
    return model, processor

Mengapa Gradio?

Gradio adalah pustaka Python ringan yang memungkinkan kita dengan cepat membangun aplikasi pembelajaran mesin dengan antarmuka berbasis web. Alih-alih menulis HTML atau JavaScript yang kompleks, kita dapat mendefinisikan komponen aplikasi (seperti kotak teks, tombol, atau gambar) langsung di Python.

Berikut tampilan UI Gradio dasar:

Antarmuka UI Gradio

Gradio memiliki beberapa keunggulan:

  • Tanpa repot instalasi: Aplikasi Gradio dihosting dan dibagikan hanya dengan beberapa baris kode Python. Fitur berbagi bawaan memungkinkan akses melalui tautan publik.
  • Antarmuka kolaboratif: Memungkinkan demo langsung model yang dibagikan dengan kolaborator atau publik. Banyak pengguna dapat berinteraksi secara bersamaan.
  • Mendukung berbagai jenis input dan output: Menawarkan beragam komponen input/output selain teks dan gambar.
  • Konfigurasi minimal untuk hosting cloud: Mudah di-deploy pada platform seperti Hugging Face Spaces atau layanan cloud lainnya.
  • Integrasi lintas platform: Antarmuka dapat disematkan ke aplikasi web lain, Jupyter Notebook, atau artikel blog.
  • Pembuatan API otomatis: Secara otomatis menghasilkan API untuk aplikasi.
  • Keamanan bawaan: Termasuk batas ukuran file dan langkah lain untuk mencegah penyalahgunaan.

Untuk demo ini, Gradio memudahkan pengguna memasukkan teks dan gambar serta melihat keluaran (analisis teks dan gambar, dalam kasus ini) secara real time. Ini sempurna untuk menunjukkan kemampuan model seperti Llama 3.2 dalam lingkungan yang ramah pengguna.

Membangun Aplikasi Multimodal Llama 3.2

Setelah kita menyiapkan impor dan berhasil menyiapkan model, mari lanjut ke bagian utama aplikasi—memproses masukan (teks dan gambar) dan menghasilkan respons.

Generasi teks-ke-teks

Kita mulai dengan mendefinisikan fungsi yang menerima teks pengguna dan, opsional, gambar. Fungsi ini kemudian menggunakan model Llama 3.2 untuk menghasilkan respons.

def process_ticket(text, image=None):
    model, processor = load_model()
    
    try:
        if image:
            # Resize the image for consistency
            image = image.convert("RGB").resize((224, 224))
            prompt = f"<|image|><|begin_of_text|>{text}"
            # Process both the image and text input
            inputs = processor(images=[image], text=prompt, return_tensors="pt").to(model.device)
        else:
            prompt = f"<|begin_of_text|>{text}"
            # Process text-only input
            inputs = processor(text=prompt, return_tensors="pt").to(model.device)
        
        # Generate response (restrict token length for faster output)
        outputs = model.generate(**inputs, max_new_tokens=200)
        # Decode the response from tokens to text
        response = processor.decode(outputs[0], skip_special_tokens=True)
        return response
    
    except Exception as e:
        print(f"Error processing ticket: {e}")
        return "An error occurred while processing your request."

Fungsi ini menangani dua jenis masukan dalam loop:

  • Hanya teks: Jika tidak ada gambar, model menghasilkan respons berdasarkan masukan teks.
  • Teks + Gambar: Jika ada gambar, model memproses teks dan gambar sebelum menghasilkan respons.

Setelah jenis masukan diidentifikasi, masukan tersebut diteruskan ke processor dari pustaka transformers untuk diproses. Lalu, model menghasilkan keluaran dalam batas max_new_tokens.

Membuat Antarmuka Gradio

Antarmuka Gradio menyatukan semuanya dan memungkinkan kita menjalankan pengujian dalam format berbasis web. Antarmuka ini memungkinkan pengguna mengirimkan teks dan gambar dari masalah yang mereka hadapi dan melihat solusi yang dihasilkan AI.

Mari lihat kodenya dan kemudian kita jelaskan.

def create_interface():
    text_input = gr.Textbox(
        label="Describe your issue",
        placeholder="Describe the problem you're experiencing",
        lines=4,
    )
    
    image_input = gr.Image(label="Upload a Screenshot (Optional)", type="pil")
    
    # Output element
    output = gr.Textbox(label="Suggested Solution", lines=5)
    
    # Create the Gradio interface
    interface = gr.Interface(
        fn=process_ticket,  # Function to process inputs
        inputs=[text_input, image_input],  # User inputs (text and image)
        outputs=output,  # AI-generated output
        title="Multimodal Customer Support Assistant",
        description="Submit a description of your issue, along with an optional screenshot, and get AI-powered suggestions.",
    )
    
    # Launch the interface with debug mode
    interface.launch(debug=True)

Pada kode di atas, kita:

  • Mendefinisikan dua input:
    • text_input untuk teks
    • image_input untuk gambar
  • Menentukan kotak keluaran untuk menampilkan respons.
  • Membuat antarmuka, dengan menyertakan parameter seperti:
    • Input
    • Fungsi untuk memproses masukan
    • Keluaran yang dihasilkan model
    • Judul antarmuka
    • Deskripsi (jika diperlukan)
  • Menyiapkan antarmuka pengguna dasar.
  • Menjalankan antarmuka dengan debug = True untuk menelusuri kesalahan. Setelah kode berjalan baik, ubah kembali ke False.

Antarmuka akhir akan terlihat seperti ini:

Antarmuka Gradio final

Aplikasi Gradio asisten dukungan pelanggan multimodal kita sudah siap! Untuk mendapatkan respons yang diinginkan, coba ubah parameter max_new_tokens atau bereksperimen sedikit dengan prompt.

Use case untuk Llama 3.2 dan Gradio

Selain demo yang kita buat dalam tutorial ini, ada beberapa use case lain yang memerlukan upaya minimal. Di antaranya:

  • Pendidikan dan bimbingan belajar: Siswa dapat mengunggah alat bantu visual seperti grafik atau diagram bersamaan dengan pertanyaan, dan model dapat menghasilkan jawaban komprehensif yang menggabungkan informasi visual dan tekstual.
  • Pembuatan konten: Tingkatkan pembuatan caption, artikel blog, dan konten media sosial dengan menghasilkan teks berdasarkan gambar.
  • Asistensi virtual real estat: Membantu agen dan klien dengan memproses gambar properti dan menjawab pertanyaan terkait. Menghasilkan deskripsi properti atau menganalisis detail visual dari foto.

Praktik Terbaik untuk Pengembangan dengan Llama 3.2 dan Gradio

Untuk setiap use case, ada beberapa kiat yang dapat digunakan setiap pengembang saat membangun aplikasi seperti yang sudah kita buat. Berikut beberapa praktik terbaik yang dapat diadopsi saat bekerja dengan model seperti Llama 3.2.

Menangani latensi

Karena tugas multimodal dapat membutuhkan banyak sumber daya, mengurangi latensi adalah kunci. Pertimbangkan mengoptimalkan model untuk respons lebih cepat dengan menggunakan caching, pruning model, atau membatasi jumlah token yang dihasilkan.

Penanganan galat

Penting untuk menyiapkan mekanisme penanganan kesalahan. Jika model gagal menghasilkan respons bermakna (misalnya karena kualitas gambar buruk), kita dapat menyediakan respons cadangan atau pesan kesalahan. Kita bahkan dapat memilih umpan balik manusia, yang pada gilirannya membantu meningkatkan model.

Pemantauan performa

Melacak performa aplikasi, seperti waktu respons dan data interaksi pengguna, dapat membantu mengoptimalkan antarmuka dan bahkan meningkatkan pengalaman pengguna. Dengan mencatat waktu performa, kita dapat mencoba mengoptimalkan latensi model menggunakan pustaka seperti bits and bytes.

Kesimpulan

Dalam panduan ini, kita mempelajari cara menggabungkan kemampuan multimodal Llama 3.2 dan antarmuka intuitif Gradio. Mulai dari dukungan pelanggan hingga pendidikan dan pembuatan konten, aplikasi potensialnya sangat luas dan beragam.

Dengan menerapkan praktik terbaik seperti pengelolaan latensi, penanganan kesalahan, dan pemantauan performa, kita dapat memastikan aplikasi Llama 3.2 dan Gradio yang tangguh, efisien, dan ramah pengguna.

Untuk mempelajari lebih lanjut, saya merekomendasikan tutorial berikut:


Aashi Dutt's photo
Author
Aashi Dutt
LinkedIn
Twitter

Saya adalah Google Developers Expert di ML (Gen AI), Kaggle 3x Expert, dan Women Techmakers Ambassador dengan pengalaman lebih dari 3 tahun di bidang teknologi. Saya ikut mendirikan startup health-tech pada 2020 dan sedang menempuh studi magister ilmu komputer di Georgia Tech dengan spesialisasi machine learning.

Topik
Kecerdasan Buatan
Large Language Models

Pelajari AI dengan kursus-kursus ini!

Kursus

Bekerja dengan Llama 3

2 jam
15.7K
Jelajahi teknik terbaru untuk menjalankan Llama LLM secara lokal dan mengintegrasikannya ke dalam stack Anda.
Lihat DetailRight Arrow
Mulai Kursus
Lihat SelengkapnyaRight Arrow
Terkait

blogs

40 Pertanyaan Wawancara DBMS Teratas di 2026

Kuasai pertanyaan wawancara basis data, dari konsep SQL dasar hingga skenario desain sistem tingkat lanjut. Panduan mendalam ini mencakup semua yang Anda perlukan untuk sukses di wawancara DBMS dan meraih peran berikutnya.
Dario Radečić's photo

Dario Radečić

15 mnt

blogs

12 Alternatif ChatGPT Terbaik yang Bisa Anda Coba pada 2026

Artikel ini menyajikan daftar alternatif ChatGPT yang akan meningkatkan produktivitas Anda.
Javier Canales Luna's photo

Javier Canales Luna

14 mnt

blogs

Tutorial Korelasi di R

Dapatkan pengenalan dasar-dasar korelasi di R: pelajari lebih lanjut tentang koefisien korelasi, matriks korelasi, plotting korelasi, dan sebagainya.
David Woods's photo

David Woods

13 mnt

blogs

Spaghetti Plot dan Jalur Badai

Temukan alasan mengapa Anda sebaiknya (tidak) menggunakan spaghetti plot untuk menyampaikan ketidakpastian jalur prediksi badai serta dampaknya terhadap interpretasi.
Hugo Bowne-Anderson's photo

Hugo Bowne-Anderson

13 mnt

Lihat SelengkapnyaLihat Selengkapnya