Adogen: AI-Powered Metadata Automation

$
Personal Project / Open Tools / Fullstack Developer & UI/UX Designer / [3 Minggu]
Astro Tailwind CSS TypeScript Cloudflare Workers Groq AI Zod
Preview Dashboard Adogen
// Preview Dashboard Adogen
98%
Performance
100%
Accessibility
100%
SEO

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

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.

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.

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.

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();
};

Gallery

Adogen: AI-Powered Metadata Automation screenshot 1
$ Menemukan masalah? / Laporkan di GitHub
[ Diperbarui: 10 Apr ]