Gemini Clone
Multimodal AI web workspace combining advanced image vision analysis with clean, distraction-free minimalist ergonomics.
< 1.2s
Fast image encoding and analysis turnaround
-75% Size
In-browser WebP downsampling before API dispatch
Interactive
One-click starter chips tailored by category
Material 3
Sleek minimal aesthetics aligned with portfolio theme
Fullstack AI Engineer
2024
Multimodal AI & Next-Gen Interface
Multimodal Intelligence Interface
Project Overview & Purpose
Gemini Clone adalah asisten kecerdasan buatan berbasis multimodal yang mampu menganalisis kombinasi input teks dan gambar secara bersamaan. Dibangun menggunakan Google Generative AI SDK (Gemini Pro & Flash models) dengan antarmuka modern yang ergonomis dan elegan.
Mengeksplorasi potensi kecerdasan multimodal di web: bagaimana pengguna dapat mengunggah diagram, tangkapan layar bug, atau foto dokumen, lalu meminta AI untuk menjelaskan, memperbaiki kode, atau mengekstrak data penting secara instan.
Technologies & Architecture
Multimodal Ingestion & Vision API Flow
Arsitektur pemrosesan berkas gambar di browser sebelum dikirim ke endpoint Google Generative AI.
In-Browser Canvas Downsampling
Gambar beresolusi tinggi dikompresi di browser menggunakan Canvas API untuk menjaga bandwidth dan kecepatan unggah.
Base64 Multipart Payload Construction
Data gambar yang telah terkompresi dibundel bersama prompt instruksi pengguna dalam payload JSON terstruktur.
Gemini Generative Pipeline
Model memproses konteks visual dan menghasilkan respon teks berformat markdown dengan tingkat akurasi tinggi.
Challenges & Technical Solutions
Pengguna sering mengunggah foto kamera berukuran 5MB - 10MB yang membutuhkan waktu lama untuk diunggah dan dapat melampaui batas payload API.
Impact: Waktu tunggu pengguna menjadi sangat lama dan meningkatkan kemungkinan request timeout.
Membangun fungsi kompresi otomatis di browser yang mengubah ukuran gambar ke dimensi optimal (maks 1280px) dan format WebP berkualitas 0.8.
Result: Ukuran file berkurang hingga 75% tanpa mengurangi akurasi analisis visual AI.
API Gemini memiliki pembatasan kuota request per menit serta filter keamanan ketat yang dapat memblokir respon tanpa pesan deskriptif.
Impact: Pengguna bingung ketika sistem tidak memberikan jawaban jika tidak ada penanganan error yang jelas.
Menangkap kode status HTTP spesifik dari API dan menyajikannya dalam bentuk pesan ramah pengguna dengan tombol coba lagi.
Result: Pengalaman pengguna tetap transparan dan tidak membingungkan saat terjadi kendala kuota API.
Menampilkan preview thumbnail gambar yang rapi di samping teks prompt sebelum pengguna menekan tombol kirim.
Impact: Layout input chat berisiko rusak jika ukuran gambar tidak diatur dengan proporsi yang benar.
Merancang komponen thumbnail preview kompak di dalam form input obrolan lengkap dengan tombol hapus cepat.
Result: Antarmuka input tetap bersih, rapi, dan mudah digunakan.
Key Features & Highlights
Multimodal Vision Analysis
Unggah gambar bersama pertanyaan untuk mendapatkan penjelasan, debugging kode, atau analisis visual instan.
Interactive Prompt Suggestion Chips
Kumpulan kartu ide perintah siap pakai yang dapat diklik untuk eksplorasi cepat kapabilitas AI.
Copyable Code & Markdown Formatting
Hasil jawaban AI disajikan rapi dengan styling tabel, daftar, dan blok kode terpisah.
Minimalist Floating Workspace
Layout terfokus dengan ruang baca maksimal dan kontrol navigasi intuitif di bagian bawah.
Lessons Learned & Retrospective
Key Takeaways for Future Iterations
Kompresi gambar di client sebelum upload adalah optimasi paling berdampak untuk mempercepat latency fitur AI multimodal.
Menyediakan kartu inspirasi prompt (prompt chips) secara dramatis meningkatkan interaksi pertama pengguna baru.
Kombinasi input teks dan visual membuka potensi aplikasi web masa depan yang jauh lebih cerdas dan solutif.