# ComfyUI Web Frontend: Flux 2 Klein

Ini adalah aplikasi web satu halaman yang super ringan (HTML/CSS/Vanilla JS) sebagai frontend (UI) sederhana bagi server ComfyUI lokal. Aplikasi ini menggunakan API ComfyUI untuk menghasilkan gambar menggunakan workflow text-to-image **Flux 2 Klein**.

Karena hanya menggunakan JavaScript murni (vanilla) tanpa framework yang rumit, kode ini sangat mudah untuk dimodifikasi sesuai kebutuhan.

##  Fitur
* **Tanpa Build Step:** Murni hanya HTML, CSS, dan JavaScript. 
* **UI Dark Mode:** Antarmuka yang bersih dan minimalis untuk memasukkan prompt. Karena light mode terlalu menyilaukan.
* **Live Polling:** Melacak proses *generation* secara otomatis dan menampilkan gambar akhir setelah selesai.

## Prasyarat

Untuk menggunakan frontend ini, lo harus menjalankan [ComfyUI](https://github.com/comfyanonymous/ComfyUI) secara lokal dengan model-model berikut berada di dalam folder masing-masing:
* **UNET:** `flux-2-klein-4b-fp8.safetensors`
* **CLIP:** `qwen_3_4b.safetensors`
* **VAE:** `flux2-vae.safetensors`

## 🚀 Setup & Instalasi

### 1. Aktifkan CORS di ComfyUI (Langkah Sangat Penting)
Karena aplikasi web ini berjalan di browser lo, koneksi ke server ComfyUI lokal akan diblokir kecuali Cross-Origin Resource Sharing (CORS) diaktifkan. 

**Jika lo menggunakan versi Windows Portable:**
1. Klik kanan pada file `run_nvidia_gpu.bat` lo dan buka dengan text editor.
2. Cari baris perintah (command) untuk menjalankan aplikasi dan tambahkan `--enable-cors-header` di bagian paling akhir. 
3. Tampilannya akan menjadi seperti ini:
   ```bat
   .\python_embeded\python.exe -s ComfyUI\main.py --windows-stlolone-build --enable-cors-header


**Atau jika lu mau langsung command nya aja:**
Jalanin ini di powershell/terminal dalam folder `ComfyUI_windows_portable`
```
.\python_embeded\python.exe -s ComfyUI\main.py --windows-stlolone-build --enable-cors-header
```


## Cara Menggunakan Workflow Lain

Jika lo pengen ganti workflow ini dengan workflow ComfyUI lainnya, lo perlu memperbarui beberapa bagian di dalam file `index.html`:

1. **Export Workflow ke Format API:**
   * Buka panel pengaturan ComfyUI (ikon gir, atau icon "C" nya ComfyUI).
   * Pilih menu `File` > `Export (API)`

2. **Perbarui Variabel `workflowTemplate`:**
   * Buka file `index.html` di text editor.
   * Ganti seluruh isi variabel konstan `workflowTemplate` dengan isi file JSON API yang baru saja lo unduh.

3. **Sesuaikan ID Node di JavaScript:**
   Setiap workflow menghasilkan nomor ID Node yang berbeda-beda. lo harus memperbarui 3 ID spesifik di dalam fungsi `generateImage()` agar sesuai dengan JSON baru Anda:
   
   * **Node Text Prompt:** Cari ID untuk node teks prompt positif lo (sebelumnya `"76"`) dan perbarui baris ini:
     ```javascript
     workflow["ID_BARU"].inputs.value = promptText;
     ```
   * **Node Seed/Noise:** Cari ID untuk node yang mengatur *seed* agar gambar bervariasi (sebelumnya `"77:86"`) dan perbarui baris ini:
     ```javascript
     workflow["ID_BARU"].inputs.noise_seed = Math.floor(Math.random() * 999999999999999);
     ```
   * **Node Save Image:** Cari ID untuk node `SaveImage` di mana hasil gambar disimpan (sebelumnya `"97"`) dan perbarui baris ini:
     ```javascript
     if (outputs && outputs["ID_BARU"] && outputs["ID_BARU"].images) {
         const filename = outputs["ID_BARU"].images[0].filename;
     // ...
     ```