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

Klik kanan pada file run_nvidia_gpu.bat lo dan buka dengan text editor.
Cari baris perintah (command) untuk menjalankan aplikasi dan tambahkan --enable-cors-header di bagian paling akhir.

Tampilannya akan menjadi seperti ini:

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

Export Workflow ke Format API:
- Buka panel pengaturan ComfyUI (ikon gir, atau icon "C" nya ComfyUI).
- Pilih menu File > Export (API)
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.
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:
```
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:
```
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:
```
if (outputs && outputs["ID_BARU"] && outputs["ID_BARU"].images) {
    const filename = outputs["ID_BARU"].images[0].filename;
// ...
```