Loncat ke konten utama

Adogen: AI-Powered Metadata Automation

Portfolio Header

Adogen: AI-Powered Metadata Automation

Diperbarui 27 April 2026 Unggulan
Client
Personal Project / Open Tools
Role
Fullstack Developer & UI/UX Designer
Duration
3 Minggu
Tech Stack
Astro Tailwind CSS TypeScript Cloudflare Workers Groq AI Zod

Portfolio Image Content

Preview Dashboard Adogen
Adogen: AI-Powered Metadata Automation

Portfolio Metrics & Case Study

100%
Performa
100%
Aksebilitas
100%
SEO

Portfolio Content

Gallery

Adogen: AI-Powered Metadata Automation Showcase 1
01

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

Portfolio related Content

Jangan lewatkan artikel terbaru

Kirim langsung ke inbox kamu. Tanpa spam, bisa unsubscribe kapan saja.

Data kamu aman. Tidak ada spam.