fix(hf): revert to standard demo.launch for ZeroGPU compatibility and add base64 API endpoint

app.py

@@ -7,39 +7,8 @@ import numpy as np
 # pyrefly: ignore [missing-import]
 from PIL import Image
 from rembg import remove, new_session
-import uuid
-import os
+import base64
 import io
-from fastapi import FastAPI, File, UploadFile
-from fastapi.responses import JSONResponse
-
-# ── Custom FastAPI app (di-mount ke Gradio) ───────────────────────────────────
-# Digunakan sebagai endpoint upload untuk Vercel frontend.
-# Gradio menerima file input hanya via URL publik — bukan base64.
-app_fastapi = FastAPI()
-
-# Folder sementara untuk simpan file upload
-UPLOAD_DIR = "/tmp/rembg_uploads"
-os.makedirs(UPLOAD_DIR, exist_ok=True)
-
-@app_fastapi.post("/custom/upload")
-async def upload_file(file: UploadFile = File(...)):
-    """
-    Upload gambar dan kembalikan URL publik yang bisa dipakai oleh Gradio API.
-    URL format: https://ilhamdev-rembg.hf.space/file=/tmp/rembg_uploads/{filename}
-    """
-    ext = os.path.splitext(file.filename or "image.png")[1] or ".png"
-    unique_name = f"{uuid.uuid4().hex}{ext}"
-    save_path = os.path.join(UPLOAD_DIR, unique_name)
-
-    content = await file.read()
-    with open(save_path, "wb") as f:
-        f.write(content)
-
-    # URL yang bisa diakses publik via Gradio file serving
-    file_url = f"https://ilhamdev-rembg.hf.space/file={save_path}"
-    return JSONResponse({"url": file_url, "path": save_path})
-
 
 # ── Cache model ───────────────────────────────────────────────────────────────
 _SESSIONS = {}
@@ -50,17 +19,9 @@ def get_session(model_name: str):
         _SESSIONS[model_name] = new_session(model_name)
     return _SESSIONS[model_name]
 
-@spaces.GPU(duration=60)
-def remove_bg(img, model_name, alpha_matting):
-    if img is None:
-        return None
-
-    if not isinstance(img, Image.Image):
-        img = Image.fromarray(np.uint8(img))
+def process_image(img: Image.Image, model_name: str, alpha_matting: bool) -> Image.Image:
     img = img.convert("RGB")
-
     session = get_session(model_name)
-
     kwargs = {}
     if alpha_matting:
         kwargs.update(
@@ -69,35 +30,95 @@ def remove_bg(img, model_name, alpha_matting):
             alpha_matting_background_threshold=10,
             alpha_matting_erode_size=10,
         )
-
-    # Hasil: PIL mode RGBA (background transparan, RGB subjek UTUH)
     return remove(img, session=session, **kwargs)
 
-demo = gr.Interface(
-    fn=remove_bg,
-    inputs=[
-        gr.Image(type="pil", label="Upload Gambar"),
-        gr.Dropdown(
-            choices=[
-                "birefnet-portrait",   # TERBAIK untuk foto orang
-                "birefnet-general",    # TERBAIK untuk objek umum/produk
-                "isnet-general-use",   # Seimbang: cepat & bagus
-                "u2net_human_seg",     # Ringan untuk orang
-            ],
-            value="birefnet-portrait",
-            label="Model AI",
-        ),
-        gr.Checkbox(value=False, label="Alpha Matting (haluskan edge rambut)"),
-    ],
-    outputs=gr.Image(type="pil", label="Hasil (PNG Transparan)"),
-    title="Remove Background API",
-    description="Backend untuk Vercel. Endpoint: /api/remove_bg",
-    api_name="remove_bg",
-)
+# ── Handler untuk HuggingFace Web UI ──────────────────────────────────────────
+@spaces.GPU(duration=60)
+def remove_bg_ui(img, model_name, alpha_matting):
+    if img is None:
+        return None
+    if not isinstance(img, Image.Image):
+        img = Image.fromarray(np.uint8(img))
+    return process_image(img, model_name, alpha_matting)
+
+# ── Handler untuk API Eksternal (Vercel / Next.js) ────────────────────────────
+@spaces.GPU(duration=60)
+def remove_bg_api(img_data, model_name, alpha_matting):
+    """
+    Endpoint API untuk Vercel / frontend.
+    Menerima base64 data URL atau objek {path: ...}.
+    Mengembalikan data:image/png;base64,... secara langsung tanpa perlu file upload terpisah.
+    """
+    if not img_data:
+        return None
 
-# Mount FastAPI custom ke Gradio agar /custom/upload tersedia
-app = gr.mount_gradio_app(app_fastapi, demo, path="/")
+    try:
+        if isinstance(img_data, str):
+            # Jika berupa data URL atau base64 murni
+            if "," in img_data:
+                img_data = img_data.split(",", 1)[1]
+            img_bytes = base64.b64decode(img_data)
+            pil_img = Image.open(io.BytesIO(img_bytes))
+        elif isinstance(img_data, dict) and "path" in img_data:
+            pil_img = Image.open(img_data["path"])
+        else:
+            return None
+
+        result_img = process_image(pil_img, model_name, alpha_matting)
+
+        # Encode hasil ke base64 PNG
+        buffered = io.BytesIO()
+        result_img.save(buffered, format="PNG")
+        b64_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
+        return f"data:image/png;base64,{b64_str}"
+    except Exception as e:
+        print(f"[ERROR] API processing failed: {e}")
+        raise e
+
+# ── Gradio Blocks Interface ───────────────────────────────────────────────────
+with gr.Blocks(title="Background Remover AI") as demo:
+    gr.Markdown("# 🚀 AI Background Remover")
+    gr.Markdown("Hapus background gambar dengan presisi tinggi menggunakan ZeroGPU.")
+
+    # Tampilan UI untuk pengunjung HuggingFace Space
+    with gr.Row():
+        with gr.Column():
+            ui_input = gr.Image(type="pil", label="Upload Gambar")
+            ui_model = gr.Dropdown(
+                choices=[
+                    "birefnet-portrait",
+                    "birefnet-general",
+                    "isnet-general-use",
+                    "u2net_human_seg",
+                ],
+                value="birefnet-portrait",
+                label="Model AI",
+            )
+            ui_alpha = gr.Checkbox(value=False, label="Alpha Matting (haluskan edge rambut)")
+            ui_btn = gr.Button("Hapus Background", variant="primary")
+        with gr.Column():
+            ui_output = gr.Image(type="pil", label="Hasil (PNG Transparan)")
+
+    ui_btn.click(
+        fn=remove_bg_ui,
+        inputs=[ui_input, ui_model, ui_alpha],
+        outputs=ui_output,
+    )
+
+    # Komponen API untuk Vercel / endpoint /gradio_api/call/remove_bg
+    with gr.Row(visible=False):
+        api_input = gr.Textbox(label="Image Base64")
+        api_model = gr.Textbox(value="birefnet-portrait", label="Model")
+        api_alpha = gr.Checkbox(value=False, label="Alpha Matting")
+        api_output = gr.Textbox(label="Result Base64")
+        api_btn = gr.Button("API Trigger")
+
+    api_btn.click(
+        fn=remove_bg_api,
+        inputs=[api_input, api_model, api_alpha],
+        outputs=api_output,
+        api_name="remove_bg",
+    )
 
 if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    demo.launch()

frontend/src/app/api/remove-bg/route.js

@@ -1,18 +1,12 @@
 /**
  * API Route: /api/remove-bg
  *
- * Flow yang benar sesuai dokumentasi Gradio resmi:
- *   1. Upload gambar ke /custom/upload (FastAPI endpoint di HF Space)
- *      → dapat URL publik file di HF server
- *   2. POST ke /call/remove_bg dengan { "data": [{"path": url}, model, alpha] }
- *      → dapat event_id
- *   3. GET SSE /call/remove_bg/{event_id}
- *      → parse event:complete → dapat URL gambar hasil
- *   4. Fetch gambar hasil → kembalikan base64 ke browser
+ * Mengirim gambar langsung sebagai base64 ke HuggingFace Gradio Space (ZeroGPU).
+ * Tidak memerlukan endpoint /upload terpisah, menghindari masalah 404/405 di Hugging Face SSR proxy.
  */
 
-const HF_SPACE_URL = process.env.NEXT_PUBLIC_HF_SPACE_URL || 'https://ilhamdev-rembg.hf.space'
-const TIMEOUT_MS = 90_000
+const HF_SPACE_URL = (process.env.NEXT_PUBLIC_HF_SPACE_URL || 'https://ilhamdev-rembg.hf.space').replace(/\/+$/, '')
+const TIMEOUT_MS = 90_000 // 90 detik untuk toleransi ZeroGPU cold start
 
 export async function POST(request) {
   try {
@@ -22,52 +16,60 @@ export async function POST(request) {
     const alphaMatting = formData.get('alpha_matting') === 'true'
 
     if (!imageFile) {
-      return Response.json({ error: 'No image provided' }, { status: 400 })
+      return Response.json({ error: 'Tidak ada file gambar yang dikirim' }, { status: 400 })
     }
 
-    // ── STEP 1: Upload gambar ke endpoint FastAPI custom di HF Space ──────
-    const uploadForm = new FormData()
-    const blob = new Blob([await imageFile.arrayBuffer()], { type: imageFile.type || 'image/png' })
-    uploadForm.append('file', blob, imageFile.name || 'image.png')
+    // ── STEP 1: Konversi file gambar ke Base64 Data URL ────────────────────
+    const arrayBuffer = await imageFile.arrayBuffer()
+    const base64 = Buffer.from(arrayBuffer).toString('base64')
+    const mimeType = imageFile.type || 'image/png'
+    const dataUrl = `data:${mimeType};base64,${base64}`
 
-    const uploadRes = await fetch(`${HF_SPACE_URL}/custom/upload`, {
-      method: 'POST',
-      body: uploadForm,
-    })
-
-    if (!uploadRes.ok) {
-      const errText = await uploadRes.text()
-      console.error('[Upload Error]', uploadRes.status, errText.slice(0, 200))
-      return Response.json(
-        { error: `Gagal upload gambar: ${uploadRes.status} — ${errText.slice(0, 100)}` },
-        { status: 502 }
-      )
+    const payload = {
+      data: [dataUrl, modelName, alphaMatting],
     }
 
-    const { url: imageUrl } = await uploadRes.json()
-    console.log('[Upload OK] imageUrl:', imageUrl)
-
-    // ── STEP 2: POST ke /call/remove_bg dengan URL file ────────────────────
-    // Format sesuai docs Gradio: file input = { "path": "https://..." }
-    const callPayload = {
-      data: [
-        { path: imageUrl },   // URL publik, bukan base64
-        modelName,
-        alphaMatting,
-      ],
+    // ── STEP 2: POST ke Gradio API Endpoint ────────────────────────────────
+    // Coba path standar Hugging Face (/gradio_api/call/remove_bg), lalu fallback ke (/call/remove_bg)
+    const candidateEndpoints = [
+      `${HF_SPACE_URL}/gradio_api/call/remove_bg`,
+      `${HF_SPACE_URL}/call/remove_bg`,
+    ]
+
+    let callRes = null
+    let usedEndpoint = ''
+    let lastErrorText = ''
+
+    for (const endpoint of candidateEndpoints) {
+      try {
+        console.log('[Connecting] Mengirim request ke:', endpoint)
+        const res = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+          },
+          body: JSON.stringify(payload),
+        })
+
+        if (res.ok) {
+          callRes = res
+          usedEndpoint = endpoint
+          break
+        } else {
+          lastErrorText = await res.text()
+          console.warn(`[Endpoint ${res.status}] ${endpoint}:`, lastErrorText.slice(0, 120))
+        }
+      } catch (err) {
+        console.warn(`[Fetch Fail] ${endpoint}:`, err.message)
+      }
     }
 
-    const callRes = await fetch(`${HF_SPACE_URL}/call/remove_bg`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(callPayload),
-    })
-
-    if (!callRes.ok) {
-      const errText = await callRes.text()
-      console.error('[Call Error]', callRes.status, errText.slice(0, 300))
+    if (!callRes) {
       return Response.json(
-        { error: `Gagal panggil HuggingFace API: ${callRes.status} — ${errText.slice(0, 150)}` },
+        {
+          error: `Gagal memanggil backend HuggingFace. Status server mungkin sedang starting/rebuilding: ${lastErrorText.slice(0, 100) || 'Connection failed'}`,
+        },
         { status: 502 }
       )
     }
@@ -78,13 +80,15 @@ export async function POST(request) {
     }
     console.log('[Call OK] event_id:', event_id)
 
-    // ── STEP 3: Baca SSE stream hasil ─────────────────────────────────────
+    // ── STEP 3: Baca SSE Stream untuk mengambil hasil ──────────────────────
+    const sseUrl = `${usedEndpoint}/${event_id}`
     const sseController = new AbortController()
     const sseTimer = setTimeout(() => sseController.abort(), TIMEOUT_MS)
 
     let sseRes
     try {
-      sseRes = await fetch(`${HF_SPACE_URL}/call/remove_bg/${event_id}`, {
+      sseRes = await fetch(sseUrl, {
+        headers: { Accept: 'text/event-stream' },
         signal: sseController.signal,
       })
     } finally {
@@ -93,16 +97,15 @@ export async function POST(request) {
 
     if (!sseRes.ok) {
       return Response.json(
-        { error: `Gagal baca SSE hasil: ${sseRes.status}` },
+        { error: `Gagal membaca SSE status dari HuggingFace: ${sseRes.status}` },
         { status: 502 }
       )
     }
 
     const sseText = await sseRes.text()
-    console.log('[SSE Raw first 500]', sseText.slice(0, 500))
+    console.log('[SSE Status received, length:]', sseText.length)
 
-    // Parse SSE — cari event "complete"
-    let resultData = null
+    let resultOutput = null
     let errorMsg = null
     const lines = sseText.split('\n')
     let currentEvent = ''
@@ -121,77 +124,65 @@ export async function POST(request) {
           try {
             const parsed = JSON.parse(raw)
             if (Array.isArray(parsed) && parsed.length > 0) {
-              resultData = parsed[0]
+              resultOutput = parsed[0]
             }
           } catch {
-            console.error('[SSE parse fail]', raw.slice(0, 100))
+            console.error('[SSE parse error]', raw.slice(0, 100))
           }
         }
       }
     }
 
     if (errorMsg) {
-      return Response.json({ error: `Gradio error: ${errorMsg}` }, { status: 502 })
+      return Response.json({ error: `Gradio inference error: ${errorMsg}` }, { status: 502 })
     }
 
-    if (!resultData) {
+    if (!resultOutput) {
       return Response.json(
-        { error: 'Tidak ada data hasil. Coba lagi — ZeroGPU mungkin cold start.' },
+        { error: 'ZeroGPU belum selesai atau sedang antre. Silakan coba kembali sesaat lagi.' },
         { status: 502 }
       )
     }
 
-    // ── STEP 4: Fetch gambar hasil → kembalikan base64 ────────────────────
-    // resultData sesuai docs: { path, url, orig_name, meta }
-    // url format: "https://ilhamdev-rembg.hf.space/c/file=/tmp/gradio/xxx/image.png"
-    let imgUrl = resultData.url || resultData.path
-    console.log('[Result data]', JSON.stringify(resultData).slice(0, 200))
-
-    if (!imgUrl) {
-      return Response.json({ error: 'Tidak ada URL gambar hasil dari Gradio' }, { status: 502 })
-    }
-
-    // Jika path relatif, buat URL lengkap
-    if (!imgUrl.startsWith('http') && !imgUrl.startsWith('data:')) {
-      // Format Gradio untuk serve file: /file=/tmp/gradio/xxx/image.png
-      imgUrl = `${HF_SPACE_URL}/file=${imgUrl}`
-    }
-
-    const imgRes = await fetch(imgUrl)
-    if (!imgRes.ok) {
-      // Coba format alternatif dengan /c/ prefix (Gradio CDN)
-      const altUrl = `${HF_SPACE_URL}/c/file=${resultData.path || ''}`
-      console.log('[Retry alt URL]', altUrl)
-      const altRes = await fetch(altUrl)
-      if (!altRes.ok) {
-        return Response.json(
-          { error: `Gagal fetch gambar hasil: ${imgRes.status}` },
-          { status: 502 }
-        )
+    // ── STEP 4: Format Kembalian Gambar ───────────────────────────────────
+    // Jika resultOutput adalah base64 data URL langsung (sesuai fungsi remove_bg_api kita)
+    if (typeof resultOutput === 'string') {
+      if (resultOutput.startsWith('data:')) {
+        return Response.json({ success: true, image: resultOutput })
       }
-      const buf = await altRes.arrayBuffer()
       return Response.json({
         success: true,
-        image: `data:image/png;base64,${Buffer.from(buf).toString('base64')}`,
+        image: `data:image/png;base64,${resultOutput}`,
       })
     }
 
-    const imgBuf = await imgRes.arrayBuffer()
-    const mime = imgRes.headers.get('content-type') || 'image/png'
+    // Fallback jika berupa objek file Gradio { path, url }
+    let imgUrl = resultOutput.url || resultOutput.path
+    if (imgUrl) {
+      if (!imgUrl.startsWith('http') && !imgUrl.startsWith('data:')) {
+        imgUrl = `${HF_SPACE_URL}/gradio_api/file=${imgUrl}`
+      }
+      const fileRes = await fetch(imgUrl)
+      if (fileRes.ok) {
+        const buf = await fileRes.arrayBuffer()
+        const mime = fileRes.headers.get('content-type') || 'image/png'
+        return Response.json({
+          success: true,
+          image: `data:${mime};base64,${Buffer.from(buf).toString('base64')}`,
+        })
+      }
+    }
 
-    return Response.json({
-      success: true,
-      image: `data:${mime};base64,${Buffer.from(imgBuf).toString('base64')}`,
-    })
+    return Response.json({ error: 'Format output dari HuggingFace tidak dikenali' }, { status: 502 })
 
   } catch (err) {
     if (err.name === 'AbortError') {
       return Response.json(
-        { error: 'Timeout 90 detik. ZeroGPU sedang cold start, coba lagi dalam 30 detik.' },
+        { error: 'Timeout 90 detik. Model ZeroGPU sedang cold start, silakan coba lagi.' },
         { status: 504 }
       )
     }
-    console.error('[API Error]', err)
+    console.error('[API Handler Error]', err)
     return Response.json({ error: err.message }, { status: 500 })
   }
 }

requirements.txt

@@ -3,7 +3,4 @@ spaces
 pillow
 numpy
 rembg[cpu]
-pymatting
-fastapi
-uvicorn
-python-multipart
+pymatting