Adogen: AI-Powered Metadata Automation
Tantangan
Kontributor stok foto seringkali menghabiskan 60% waktu mereka hanya untuk urusan administratif seperti menulis judul dan 50 keyword per gambar. Masalah utamanya adalah bagaimana melakukan analisa visual secara masal (batch) dengan biaya rendah namun tetap akurat dan cepat.
Solusi
Saya mengembangkan Adogen menggunakan Astro untuk performa maksimal. Solusi utamanya adalah integrasi Vision AI (Llama 3.2 & Pixtral) melalui backend Cloudflare Workers yang ringan. Saya mengimplementasikan client-side image resizing sebelum upload untuk menghemat bandwidth dan mempercepat durasi pemrosesan API.
Hasil
Adogen berhasil memangkas waktu input metadata dari rata-rata 5 menit per gambar menjadi kurang dari 10 detik. Sistem ini mampu menangani batch upload hingga 50 gambar sekaligus dan mengekspornya ke format CSV yang siap digunakan di dashboard Adobe Stock tanpa modifikasi tambahan.
Key Features & Technical Decisions
1. Performa “Burag” dengan Astro & Tailwind
Memilih Astro adalah keputusan krusial karena hampir semua interaksi bersifat statis kecuali pada bagian antrean gambar. Dengan meminimalkan pengiriman JavaScript ke browser, aplikasi ini mencapai skor Lighthouse 100/100 dengan mudah.
2. Keamanan Data dengan Model “Bring Your Own Key”
Alih-alih membebankan biaya langganan kepada user, saya menerapkan sistem BYOK (Bring Your Own Key). User memasukkan API Key Groq/Mistral mereka sendiri yang disimpan secara aman di localStorage browser. Ini memastikan:
- Biaya operasional server hampir nol ($0).
- Privasi gambar user terjaga karena tidak disimpan di server saya.
3. Arsitektur Antrean (Queue Management)
Untuk menangani Rate Limit dari provider AI gratisan, saya membangun sistem antrean dengan Safe Delay Logic. Sistem ini memastikan request dikirim satu per satu dengan jeda waktu tertentu untuk menghindari error 429 Too Many Requests.
4. Robust CSV Sanitization
Data dari AI seringkali mengandung karakter ilegal atau format yang berantakan. Saya membangun utilitas khusus menggunakan TypeScript untuk membersihkan baris baru (\n), menghapus simbol terlarang (©, ™), dan memastikan limitasi 50 keyword terpenuhi sebelum file CSV diunduh.
// Contoh logika sanitasi yang saya gunakan
const clean = (str: string) => {
return str
.replace(/\r?\n|\r/g, " ")
.replace(/[™®©]/g, "")
.replace(/"/g, '""')
.trim();
};Kenapa Ini Bagus untuk Portfolio Kamu?
- Metrik Terukur: Kamu mencantumkan durasi pengerjaan dan skor performa. Ini sangat disukai klien.
- Highlight Problem/Solution: Kamu tidak hanya bilang “saya buat aplikasi”, tapi “saya menyelesaikan masalah waktu kontributor”.
- Technical Deep Dive: Bagian Key Features menjelaskan bahwa kamu mengerti soal Rate Limiting, Bandwidth Optimization, dan Data Sanitization.
- Modern Stack: Penggunaan Cloudflare Workers dan Astro 6 menunjukkan kamu selalu up-to-date dengan teknologi terbaru.
Dengan draf ini, project Adogen akan terlihat seperti produk profesional yang matang di mata siapa pun yang melihat portfolio kamu! 🔥🚀
Gallery
