loncat ke konten utama

Adogen: Otomatisasi Metadata Berbasis AI

Header Portfolio

Adogen: Otomatisasi Metadata Berbasis AI

Diperbarui 27 April 2026 Unggulan
Klien Personal Project / Open Tools
Peran Fullstack Developer & UI/UX Designer
Durasi 3 Minggu
Tech Stack
AstroTailwind CSSTypeScriptCloudflare WorkersGroq AIZod

Gambar Konten Portfolio

Preview Dashboard Adogen
Adogen: Otomatisasi Metadata Berbasis AI

Metrik & Studi Kasus Portfolio

100%
Performa
100%
Aksesibilitas
100%
SEO

Konten Portfolio

Galeri

Adogen: Otomatisasi Metadata Berbasis AI Showcase 1

Project Journey

Membangun Adogen bukan sekadar membuat wrapper AI, melainkan menyelesaikan masalah nyata yang dihadapi kontributor stock photo di Indonesia. Fokus utama saya adalah pada kecepatan dan privasi data.

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 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.

// Contoh logika sanitasi yang saya gunakan
const clean = (str: string) => {
  return str
    .replace(/\r?\n|\r/g, " ")
    .replace(/[™®©]/g, "")
    .replace(/"/g, '""')
    .trim();
};

Konten Terkait Portfolio