AI Code Builder — Arsitektur & Alur Pipeline

Arsitektur & Alur Pipeline

Back to: [AI Code Builder — Project README](Research: AI Code Builder)

flowchart LR
    A["Screenshot Image
(Drag & Drop)"] --> B["Image Ingestion
(Validasi & Preprocess)"]
    B --> C["AI Feature Classifier
(Deteksi: Auth, Dashboard, dll)"]
    C --> D{"Target Platform"}

    D -->|Backend| E["AI Code Generator
Backend (API, Server, DB Schema)"]
    D -->|Mobile| F["AI Code Generator
Mobile (Flutter / Native)"]
    D -->|Frontend| G["AI Code Generator
Frontend (React / Vue / HTML)"]

    E --> H["Testing Harness
(Compile & Compare ke Reference)"]
    F --> H
    G --> H

    H --> I["Result Code Output
+ Testing Score"]
    I --> J["Dashboard
(History & Metrics)"]

Tahapan Pipeline

Tahap	Fungsi	Output
Image Ingestion	Validasi format (PNG/JPG), resize, normalisasi, hash	Preprocessed image siap untuk model
AI Feature Classifier	Deteksi kategori fitur (Auth, Dashboard, Payment, dsb)	Label fitur + confidence score
Routing	Pilih code generator sesuai target platform (Backend / Mobile / Frontend)	Target stack identifier
AI Code Generator	Generate source code sesuai stack & template mapping	File-file kode
Testing Harness	Compile + run + compare ke reference	Testing score (compilability, similarity, behavior match)
Result + Dashboard	Output ke user + catat metrics untuk retraining	Final code + score history

Untuk detail breakdown per platform lihat: [Backend](Code Builder → Backend), [Mobile](Code Builder → Mobile), [Frontend](Code Builder → Frontend).