WebWorld: The Browser as a World Model untuk Self-Improving Web Code Generation 2026

Dalam lanskap rekayasa kecerdasan buatan generasi 2026, kemampuan Vision-Language Models (VLM) dalam menghasilkan antarmuka web modern (web code generation) mengalami perkembangan pesat. Namun, seluruh metodologi self-improvement berbasis VLM sebelumnya menyimpan cacat struktural yang fatal: model yang mengusulkan perbaikan adalah model yang sama yang menilai hasilnya. Penilaian visual semata (visual plausibility) terbukti menjadi proxy yang rapuh untuk menentukan apakah sebuah artefak HTML interaktif benar-benar berfungsi di bawah interaksi pengguna nyata.

1. Cacat Struktural Self-Improvement Berbasis Visual Plausibility

Sebelum lahirnya WebWorld, loop self-improvement untuk kode frontend umumnya bergantung pada tangkapan layar (rendered screenshots) yang dianalisis oleh VLM Judge. Paradigma ini memicu tiga kegagalan laten di lingkungan produksi:

• The Self-Deception Loop (Ilusi Visual): Sebuah tombol atau modal dialog mungkin tampak sempurna secara visual pada tangkapan layar statis, tetapi event listener JavaScript di baliknya mengalami TypeError: null is not an object saat diklik. VLM Judge yang hanya melihat gambar akan meloloskan kode rusak ini sebagai "sukses".
• Regression Drift: Ketika model mencoba memperbaiki bug visual pada tata letak (CSS layout glitch), perbaikan tersebut sering kali tanpa sengaja memutus fungsionalitas formulir atau state manajemen yang sebelumnya sudah bekerja. Tanpa regression harness deterministik, kualitas kode berfluktuasi secara acak.
• Data Poisoning pada Dataset SFT: Trajectory sintesis kode yang mengandung kegagalan runtime tersembunyi yang lolos kurasi VLM mencemari dataset fine-tuning, mengakibatkan model terus-menerus memproduksi kode frontend yang tampak indah namun tidak interaktif.

Diagram 1.0: WebWorld Browser-as-World-Model & Quality Ratchet Architecture RESEARCH ARTIFACT

2. Arsitektur WebWorld: Browser sebagai World Model Deterministik

WebWorld mentransformasikan peramban web (Chromium/WebKit headless instance) menjadi simulator status dunia (world model) untuk kode HTML/CSS/JavaScript. Alur kerja WebWorld terdiri dari 4 tahapan orkestrasi yang ketat:

3. Spesifikasi Type-Safe Interaction Contract & Ratchet Engine

Di bawah ini adalah implementasi referensi modul verifikasi kontrak interaksi WebWorld yang digunakan untuk mengisolasi mutasi kode dan memvalidasi sertifikat penerimaan:

// WebWorld Interaction Contract & Acceptance Certificate Verification Harness
export interface InteractionStep {
  action: 'CLICK' | 'TYPE' | 'HOVER' | 'DRAG' | 'SCROLL' | 'ASSERT_DOM';
  selector: string;
  payload?: string | { x: number; y: number };
  expectedDomDelta?: {
    targetSelector: string;
    property: string;
    expectedValue: unknown;
  };
}

export interface InteractionContract {
  contractId: string;
  featureKey: string;
  baselineCapabilityTraces: InteractionStep[][];
  targetRepairTrace: InteractionStep[];
  timeoutMs: number;
}

export interface AcceptanceCertificate {
  isCertified: boolean;
  targetProgressVerified: boolean;
  preservedCapabilityCount: number;
  regressionDetected: boolean;
  executionTraceHash: string;
  timestamp: number;
}

export class WebWorldRatchetEngine {
  private certifiedRatchetLog: Map<string, AcceptanceCertificate> = new Map();

  // Evaluasi kandidat kode web via Headless Browser World Model
  public async evaluateCandidateCode(
    htmlCandidate: string,
    contract: InteractionContract,
    browserSimulator: { executeTrace: (html: string, steps: InteractionStep[]) => Promise<boolean> }
  ): Promise<AcceptanceCertificate> {
    // 1. Verifikasi target progress untuk perbaikan yang diajukan
    const targetPassed = await browserSimulator.executeTrace(htmlCandidate, contract.targetRepairTrace);
    if (!targetPassed) {
      return {
        isCertified: false,
        targetProgressVerified: false,
        preservedCapabilityCount: 0,
        regressionDetected: false,
        executionTraceHash: '',
        timestamp: Date.now()
      };
    }

    // 2. Strict Invariant Check: Re-eksekusi seluruh capability trace sebelumnya
    let preservedCount = 0;
    for (const trace of contract.baselineCapabilityTraces) {
      const tracePassed = await browserSimulator.executeTrace(htmlCandidate, trace);
      if (!tracePassed) {
        // Terjadi regresi: kode memperbaiki satu hal tapi merusak fitur lama
        return {
          isCertified: false,
          targetProgressVerified: true,
          preservedCapabilityCount: preservedCount,
          regressionDetected: true,
          executionTraceHash: '',
          timestamp: Date.now()
        };
      }
      preservedCount++;
    }

    // 3. Terbitkan Acceptance Certificate sebagai Quality Ratchet permanen
    const cert: AcceptanceCertificate = {
      isCertified: true,
      targetProgressVerified: true,
      preservedCapabilityCount: preservedCount,
      regressionDetected: false,
      executionTraceHash: `cert-${nanoid(12)}`,
      timestamp: Date.now()
    };

    this.certifiedRatchetLog.set(contract.contractId, cert);
    return cert;
  }
}

4. Hasil Evaluasi Empiris & Analisis Ablasi

Para peneliti menguji WebWorld pada dua benchmark standar industri yang menantang: HTMLBench-400 (evaluasi sintesis komponen UI statis & dinamis) dan MiniAppBench-Val (evaluasi aplikasi web interaktif multi-step end-to-end seperti kalkulator saintifik, kanban board, dan e-commerce checkout):

Temuan Utama Riset & Ablation Studies:

• Efek Browser-Backed Admission:

  Studi ablasi pada model berukuran 9B membuktikan bahwa tanpa sertifikasi browser (hanya mengandalkan filter visual konvensional), kenaikan performa hampir sepenuhnya hilang ($< 1.0$ poin), membuktikan bahwa umpan balik eksekusi fisik browser adalah pendorong utama kemajuan.

• Pencegahan Regresi Monotonik (Quality Ratchet):

  Dengan mewajibkan seluruh rangkaian uji coba interaksi masa lalu tetap lolos, model tidak pernah mengalami fenomena "memperbaiki tombol kirim namun merusak validasi input".

5. Implikasi bagi Praktisi Frontend & AI Agent Engineering

Bagi tim pengembang yang membangun sistem autonomous coding agent, pergeseran ke arah Browser-as-a-World-Model menawarkan blueprint rekayasa masa depan:

1. Gantikan LLM-as-a-Judge dengan Deterministic Execution: Jangan pernah memvalidasi kode aplikasi web hanya dengan prompt review antar model. Integrasikan Puppeteer, Playwright, atau CDP harness untuk menjalankan interaksi DOM secara fisik.
2. Terapkan Typed Contract-Based Supervision: Formulasikan pengujian fitur dalam bentuk kontrak terstruktur (klik elemen target, ukur mutasi CSS/DOM, pastikan zero console errors) sebelum menyetujui mutasi berkas.
3. Kumpulkan Certified Traces untuk Fine-Tuning: Manfaatkan jejak interaksi yang berhasil melewati Quality Ratchet sebagai data latih SFT berkualitas tinggi untuk model internal perusahaan.