Bangun Aplikasi Pencarian Gambar Bertenaga AI dengan BridgeTower dan Streamlit

Sebagai seorang Insinyur Gen AI, saya memprioritaskan untuk tetap mengikuti alat dan teknologi terbaru dengan terus membaca dan mengeksplorasi kemajuan baru. Baru-baru ini, saya menemukan sebuah makalah riset dari peneliti Microsoft yang memperkenalkan BridgeTower, sebuah model yang menyederhanakan integrasi kemampuan visi dan bahasa, sehingga tugas multimodal jauh lebih mudah diimplementasikan.

Dalam panduan ini, saya akan menunjukkan cara membangun sistem penelusuran gambar-teks yang sederhana namun andal menggunakan BridgeTower dari perpustakaan Hugging Face Transformers. Tutorial ini ramah untuk pemula dan akan memandu Anda melalui langkah-langkah berikut:

• Menyiapkan pustaka yang diperlukan.
• Memproses gambar dan teks dengan BridgeTower.
• Menghasilkan embedding untuk gambar dan teks.
• Membandingkan embedding tersebut menggunakan cosine similarity.

Di akhir tutorial ini, Anda akan memiliki sistem fungsional penuh yang dapat secara efektif mencocokkan gambar dengan kueri teks, menunjukkan kekuatan dan kesederhanaan AI multimodal.

Apa itu BridgeTower?

Model BridgeTower, sebagaimana dijelaskan dalam makalah BridgeTower: Building Bridges Between Encoders in Vision-Language Representative Learning oleh Xiao Xu dan lainnya, bertujuan untuk meningkatkan cara model visi dan bahasa bekerja bersama.

Bayangkan tugas di mana model perlu memahami sebuah gambar dan deskripsi teks, seperti "anjing berlari di taman." 

Biasanya, model akan memproses gambar dan teks secara terpisah menggunakan encoder visi dan bahasa. Model BridgeTower menambahkan sebuah "jembatan" antara encoder-encoder ini dan encoder lintas-modal (yang menggabungkan visi dan bahasa), memungkinkan mereka berinteraksi lebih baik di setiap langkah.

Sumber

Sebagai contoh, ketika memproses gambar anjing, encoder visi mungkin mendeteksi bentuk dan gerakan anjing. Sementara itu, encoder bahasa memahami teks "berlari" dan "anjing." 

Jembatan ini memungkinkan kedua potongan informasi tersebut berinteraksi secara detail, membantu model menghubungkan petunjuk visual dan tekstual dengan lebih efektif. Dengan cara ini, model berkinerja lebih baik pada tugas seperti pembuatan keterangan gambar atau tanya jawab, tanpa memerlukan banyak komputasi tambahan atau memperlambat proses.

Struktur Folder Aplikasi

Kita akan menjaga semuanya tetap rapi dan terorganisasi. Direktori proyek Anda sebaiknya seperti ini:

/image-search-app/
│
├── app.py          # Frontend (Streamlit UI)
├── search.py       # Backend logic (embeddings & similarity search)
├── images/         # Directory for uploaded images
│   ├── image1.jpg
│   ├── image2.png
│   ├── image3.jpeg
│
└── requirements.txt  # Python dependenciesDidukung oleh

• app.py: Menangani frontend dan interaksi pengguna.
• search.py: Berisi logika untuk menghasilkan embedding dan melakukan pencarian.
• images/: Menyimpan berkas gambar yang diunggah.
• requirements.txt: Daftar pustaka yang diperlukan.

Penyiapan dan Instalasi

Sebelum masuk ke kode, mari siapkan lingkungan agar proses pengembangan dan pengujian berjalan lancar. Ikuti langkah-langkah berikut:

1. Instal dependensi

Pertama, pastikan Anda telah menginstal Python (disarankan versi 3.7 atau lebih tinggi). Lalu, jalankan perintah berikut di terminal untuk memasang pustaka yang diperlukan:

pip install torch transformers streamlit PillowDidukung oleh

• torch: Kerangka kerja deep learning yang digunakan untuk membangun dan menjalankan model Bridgetower.
• transformers: Menyediakan model pra-latih seperti Bridgetower untuk pemrosesan teks dan gambar yang efisien.
• streamlit: Kerangka kerja web ringan untuk membuat antarmuka pengguna interaktif bagi aplikasi.
• Pillow: Pustaka pemrosesan gambar, digunakan untuk menangani unggahan dan pengubahan ukuran gambar.

2. Siapkan gambar contoh

Untuk menguji aplikasi, tempatkan beberapa gambar contoh di direktori /images. Pastikan gambar-gambar tersebut dalam format yang didukung seperti JPG, PNG, atau JPEG, karena format ini diakui secara universal dan kompatibel dengan sebagian besar pustaka. 

Gunakan beragam gambar untuk memastikan model dapat mengambil kecocokan dengan akurat berdasarkan kueri teks.

Penjelasan Logika Inti BridgeTower

Fungsionalitas inti aplikasi dibagi menjadi dua komponen utama: Backend (search.py) dan Frontend (app.py). Masing-masing memainkan peran penting agar aplikasi berjalan mulus.

Logika backend (search.py)

Berkas ini berisi logika embedding teks dan gambar serta mekanisme pencarian.

1. Impor pustaka

from transformers import BridgeTowerProcessor, BridgeTowerForImageAndTextRetrieval
from PIL import Image
import torch.nn.functional as F
import osDidukung oleh

• BridgeTowerProcessor: Kelas utilitas yang menyiapkan data (gambar dan teks) dalam format yang benar untuk model BridgeTower. Ia melakukan tugas seperti tokenisasi untuk teks dan prapemrosesan untuk gambar.
• BridgeTowerForImageAndTextRetrieval: Kelas model BridgeTower pra-latih yang dirancang khusus untuk tugas pengambilan gambar-teks, di mana Anda mencari gambar paling relevan berdasarkan kueri teks atau sebaliknya.
• PIL (Python Imaging Library) digunakan untuk penanganan gambar. Dalam kasus ini, digunakan untuk membuka dan memanipulasi gambar (misalnya mengubah ukuran, memotong) sebelum dimasukkan ke model.
• torch.nn.functional menyediakan berbagai fungsi, seperti fungsi aktivasi (ReLU, softmax), fungsi loss (cross-entropy, dll.), dan operasi lain pada tensor. Ini sering digunakan saat bekerja dengan jaringan saraf di PyTorch.
• os digunakan untuk berinteraksi dengan sistem operasi. Bermanfaat untuk membaca berkas, memeriksa direktori, dan menangani path (misalnya, untuk menemukan gambar atau bobot model).

2. Muat model dan prosesor

processor = BridgeTowerProcessor.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")
model = BridgeTowerForImageAndTextRetrieval.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
model.to(device)Didukung oleh

Ini menginisialisasi model dan prosesor yang diperlukan untuk embedding.

3. Temukan kecocokan terbaik

def image_search(query, image_dir):
   image_files = [os.path.join(image_dir, img) for img in os.listdir(image_dir) if img.lower().endswith(('jpg', 'jpeg', 'png'))]
   scores = {}

   for img_path in image_files:
       image = Image.open(img_path).convert("RGB")
       encoding = processor(text=query, images=image, return_tensors="pt").to(device)
       outputs = model(**encoding)
       scores[img_path] = outputs.logits[0, 1].item()

   best_match = max(scores, key=scores.get)
   return best_matchDidukung oleh

Cara kerjanya:

1. Fungsi image_search memproses kueri teks untuk menghasilkan embedding menggunakan model.
2. Ia memproses setiap gambar untuk menghasilkan embedding masing-masing.
3. Embedding dibandingkan menggunakan output logits model.
4. Cosine similarity dihitung antara embedding teks dan gambar.
5. Gambar dengan skor kemiripan tertinggi diidentifikasi dan dikembalikan sebagai kecocokan terbaik.

Antarmuka frontend (app.py)

Berkas ini menggunakan Streamlit untuk menyediakan antarmuka yang ramah pengguna.

1. Impor pustaka

import streamlit as st
from search import search_best_match
import osDidukung oleh

2. Bangun antarmuka

st.title("🖼️ AI-Powered Image Search App")
uploaded_files = st.file_uploader("Upload images", accept_multiple_files=True, type=['jpg', 'jpeg', 'png'])

image_folder = 'images'
os.makedirs(image_folder, exist_ok=True)

if uploaded_files: 
    for uploaded_file in uploaded_files:
        with open(os.path.join(image_folder, uploaded_file.name), 'wb') as f:
            f.write(uploaded_file.getbuffer())
        st.image(uploaded_file, caption="Uploaded Image", use_column_width=True)Didukung oleh

Pengguna dapat mengunggah beberapa gambar. Gambar disimpan di folder images/ dan ditampilkan.

3. Tambahkan kueri pencarian

query = st.text_input("Enter your search query:")

if query and uploaded_files:
    best_match, score = search_best_match(image_folder, query)
    st.write("### Most Relevant Image:")
    st.image(best_match, caption=f"Score: {score:.4f}", use_column_width=True)Didukung oleh

Pengguna memasukkan kueri pencarian. Aplikasi mencari gambar yang paling cocok dan menampilkannya.

Implementasi Lengkap: Bangun Aplikasi Pencarian Gambar BridgeTower dan Streamlit

1. search.py - Logika Backend

from transformers import BridgeTowerProcessor, BridgeTowerForImageAndTextRetrieval
from PIL import Image
import torch
import torch.nn.functional as F
import os

# Load Bridgetower processor and model
processor = BridgeTowerProcessor.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")
model = BridgeTowerForImageAndTextRetrieval.from_pretrained("BridgeTower/bridgetower-base-itm-mlm")

# Search for the best matching image
def image_search(query, image_dir):
   image_files = [os.path.join(image_dir, img) for img in os.listdir(image_dir) if img.lower().endswith(('jpg', 'jpeg', 'png'))]
   scores = {}

   for img_path in image_files:
       image = Image.open(img_path).convert("RGB")
       encoding = processor(text=query, images=image, return_tensors="pt").to(device)
       outputs = model(**encoding)
       scores[img_path] = outputs.logits[0, 1].item()

   best_match = max(scores, key=scores.get)
   return best_matchDidukung oleh

2. app.py - Antarmuka Streamlit

import streamlit as st
from search import image_search
import os

# Title of the app
st.title("🖼️ Image Search Application with BridgeTower")

# Image upload section
uploaded_files = st.file_uploader("Upload your images", accept_multiple_files=True, type=['jpg', 'jpeg', 'png'])

# Create image folder if not exists
image_folder = 'images'
os.makedirs(image_folder, exist_ok=True)

if uploaded_files:
    for uploaded_file in uploaded_files:
        with open(os.path.join(image_folder, uploaded_file.name), 'wb') as f:
            f.write(uploaded_file.getbuffer())
        st.image(uploaded_file, caption="Uploaded Image", use_column_width=True)

# Text input for query
query = st.text_input("Enter your search query:")

# Display search results
if query and uploaded_files:
    best_match, score = image_search(image_folder, query)
    st.write("### Most Relevant Image:")
    st.image(best_match, caption=f"Similarity Score: {score:.4f}", use_column_width=True)Didukung oleh

3. Jalankan aplikasi

streamlit run app.pyDidukung oleh

Contoh Aplikasi BridgeTower dan Streamlit

Berikut contoh aplikasi saat berjalan! Sebuah gambar diunggah, dan pengguna mengetik kueri pencarian “cat.” Aplikasi dengan cepat menganalisis gambar dan teks, lalu mencocokkannya menggunakan model BridgeTower. 

Aplikasi menemukan kecocokan terbaik dan menampilkan gambar kucing yang benar. Ini menunjukkan seberapa baik aplikasi mengaitkan gambar dan teks untuk memberikan hasil yang akurat.

Rasa ingin tahu tidak perlu berhenti sampai di sini. Potensi aplikasi seperti ini melampaui apa yang saat ini diterapkan, membuka peluang menarik untuk pertumbuhan dan inovasi. Kemungkinan untuk meningkatkan pengalaman pengguna, kinerja, dan fungsionalitas sangat luas. Di bawah ini, saya mengusulkan beberapa peningkatan yang dapat membawa aplikasi seperti ini ke level berikutnya.

Peningkatan BridgeTower di Masa Depan

Ada beberapa cara untuk meningkatkan aplikasi yang kita buat, misalnya: 

Tambahkan pengindeksan FAISS untuk pencarian gambar yang lebih cepat

Terapkan pengindeksan FAISS untuk meningkatkan kecepatan pencarian gambar pada dataset besar. Ini memungkinkan Anda mengonversi gambar menjadi vektor fitur, membangun indeks, dan melakukan pencarian kemiripan dengan cepat, memastikan pengambilan gambar tetap efisien seiring pertumbuhan dataset.

Deploy aplikasi di Streamlit Cloud atau AWS

Deploy aplikasi di Streamlit Cloud untuk penyiapan yang cepat dan mudah, terutama jika Anda bekerja dengan Python dan Streamlit. Atau, deploy di AWS untuk kontrol yang lebih besar, skalabilitas, dan kemampuan menangani lalu lintas yang lebih tinggi, memastikan performa lebih baik seiring pengembangan aplikasi.

Implementasikan pembaruan real-time untuk unggahan gambar

Siapkan pembaruan secara real-time sehingga ketika gambar baru diunggah, gambar tersebut langsung muncul untuk semua pengguna tanpa perlu memuat ulang halaman. Dengan teknologi seperti WebSockets atau Socket.IO, Anda dapat mendorong pembaruan ke semua pengguna yang terhubung segera setelah gambar diunggah, meningkatkan interaktivitas dan pengalaman aplikasi.

Kesimpulan

Kita telah berhasil membangun aplikasi pencarian gambar bertenaga AI menggunakan Bridgetower, Streamlit, dan PyTorch, menunjukkan bagaimana AI dapat menyederhanakan dan meningkatkan interaksi dengan konten digital. 

Meskipun sudah berfungsi penuh, masih ada ruang untuk perbaikan, seperti mengoptimalkan kecepatan pencarian dengan pengindeksan FAISS, melakukan deploy di platform seperti AWS untuk skalabilitas, dan menambahkan pembaruan real-time untuk pengalaman pengguna yang lebih mulus. Proyek ini merupakan fondasi kuat untuk inovasi lebih lanjut dalam sistem pencarian cerdas.

Jika Anda ingin mempelajari lebih lanjut, saya dapat merekomendasikan sumber berikut: 

• Streamlit Python: Tutorial
• Kursus Transformer Models dengan PyTorch
• Cara Membangun Antarmuka Pengguna untuk Aplikasi AI Menggunakan Streamlit dan LangChain