Update app.py

Tiga perubahan saja:

1. theme dan css dipindah dari gr.Blocks() ke demo.launch()
2. show_copy_button=True dihapus dari Textbox
3. gr.CopyButton(value=box) ditambahkan di samping setiap Textbox

app.py

@@ -24,18 +24,17 @@ import os
 #  KONFIGURASI MODEL
 # ══════════════════════════════════════════════════════
 
-# Pilih salah satu (hapus tanda # di depan yang mau dipakai):
-MODEL_NAME = "Qwen/Qwen2.5-3B-Instruct"          # ← RECOMMENDED, bagus buat Indo
-# MODEL_NAME = "Qwen/Qwen2.5-1.5B-Instruct"         # ← Lebih ringan, cukup bagus
-# MODEL_NAME = "meta-llama/Llama-3.2-1B-Instruct"   # ← Paling ringan, kualitas lower
-# MODEL_NAME = "google/gemma-2-2b-it"               # ← Alternatif bagus
+MODEL_NAME = "Qwen/Qwen2.5-3B-Instruct"
+# MODEL_NAME = "Qwen/Qwen2.5-1.5B-Instruct"
+# MODEL_NAME = "meta-llama/Llama-3.2-1B-Instruct"
+# MODEL_NAME = "google/gemma-2-2b-it"
 
 HF_TOKEN = os.environ.get("HF_TOKEN", "")
 CHAT_API = f"https://api-inference.huggingface.co/models/{MODEL_NAME}/v1/chat/completions"
 TEXT_API = f"https://api-inference.huggingface.co/models/{MODEL_NAME}"
 
 # ══════════════════════════════════════════════════════
-#  DATA PLATFORM, GAYA, BAHASA
+#  DATA
 # ══════════════════════════════════════════════════════
 
 PLATFORMS = {
@@ -90,18 +89,16 @@ ATURAN KETAT (WAJIB DIIKUTI):
 
 
 # ══════════════════════════════════════════════════════
-#  LOGIC — API CALL & GENERATE
+#  LOGIC
 # ══════════════════════════════════════════════════════
 
 def call_api(messages):
-    """Panggil HF Inference API (chat dulu, fallback ke text)"""
     headers = {
         "Authorization": f"Bearer {HF_TOKEN}",
         "Content-Type": "application/json"
     }
     params = {"max_tokens": 1000, "temperature": 0.85, "top_p": 0.9}
 
-    # ── Attempt 1: Chat Completions API ──
     try:
         resp = requests.post(
             CHAT_API, headers=headers,
@@ -119,7 +116,6 @@ def call_api(messages):
     except Exception:
         pass
 
-    # ── Attempt 2: Text Generation API (fallback) ──
     try:
         prompt = f"{messages[0]['content']}\n\n{messages[1]['content']}"
         resp = requests.post(
@@ -139,7 +135,6 @@ def call_api(messages):
             data = resp.json()
             if isinstance(data, list) and "generated_text" in data[0]:
                 text = data[0]["generated_text"]
-                # Strip prompt kalau ikut ke-return
                 if prompt in text:
                     text = text.replace(prompt, "").strip()
                 return text
@@ -156,7 +151,6 @@ def call_api(messages):
 
 
 def clean_text(text):
-    """Hapus preamble yang sering muncul dari model"""
     if not text:
         return text
     unwanted = [
@@ -178,14 +172,12 @@ def clean_text(text):
 
 
 def parse_captions(raw_text, jumlah):
-    """Parse response jadi list caption individual"""
     text = clean_text(raw_text)
     parts = [p.strip() for p in text.split("---") if p.strip()]
 
     captions = []
     for p in parts:
         p = p.strip()
-        # Hapus nomor di awal kalau ada
         if len(p) > 2 and p[0].isdigit() and p[1] in ".)":
             p = p[2:].strip()
         if len(p) > 15:
@@ -200,17 +192,10 @@ def parse_captions(raw_text, jumlah):
 
 
 def generate_caption(konteks, platform, gaya, bahasa, jumlah):
-    """Fungsi utama generate — return values + visibility"""
-    error_all_visible = tuple(
-        [gr.update(visible=True)] * 5
-    )
-
-    # Validasi kosong
     if not konteks or not konteks.strip():
         vals = ["⚠️ Tulis dulu deskripsi foto/konten kamu di kolom atas!"] + [""] * 4
         return tuple(gr.update(value=v, visible=True) for v in vals)
 
-    # Validasi token
     if not HF_TOKEN:
         msg = (
             "⚠️ TOKEN BELUM DISET!\n\n"
@@ -223,7 +208,6 @@ def generate_caption(konteks, platform, gaya, bahasa, jumlah):
         vals = [msg] + [""] * 4
         return tuple(gr.update(value=v, visible=True) for v in vals)
 
-    # Bangun user prompt
     user_msg = f"""PLATFORM: {platform}
 {PLATFORMS[platform]}
 
@@ -243,7 +227,6 @@ BUAT TEPAT {jumlah} CAPTION YANG BERBEDA."""
         {"role": "user", "content": user_msg}
     ]
 
-    # Panggil API
     result = call_api(messages)
 
     error_map = {
@@ -257,10 +240,8 @@ BUAT TEPAT {jumlah} CAPTION YANG BERBEDA."""
         vals = [error_map[result]] + [""] * 4
         return tuple(gr.update(value=v, visible=True) for v in vals)
 
-    # Parse caption
     captions = parse_captions(result, jumlah)
 
-    # Bangun output dengan value + visibility
     output = []
     for i in range(5):
         if i < jumlah:
@@ -272,17 +253,15 @@ BUAT TEPAT {jumlah} CAPTION YANG BERBEDA."""
 
 
 def update_visibility(jumlah):
-    """Update visibility saat dropdown jumlah berubah"""
     return tuple(gr.update(visible=(i < jumlah)) for i in range(5))
 
 
 def fill_preset(name):
-    """Isi konteks dari tombol preset"""
     return PRESETS.get(name, "")
 
 
 # ══════════════════════════════════════════════════════
-#  UI — GRADIO INTERFACE
+#  UI
 # ══════════════════════════════════════════════════════
 
 CUSTOM_CSS = """
@@ -309,18 +288,8 @@ CUSTOM_CSS = """
 }
 """
 
-with gr.Blocks(
-    title="CapGen AI — Caption Generator Indonesia",
-    theme=gr.themes.Soft(
-        primary_hue="orange",
-        secondary_hue="amber",
-        neutral_hue="stone",
-        font=gr.themes.GoogleFont("Inter"),
-    ),
-    css=CUSTOM_CSS,
-) as demo:
+with gr.Blocks() as demo:
 
-    # ── HEADER ──
     gr.Markdown("""
     <div style="text-align:center; padding:8px 0 4px 0;">
         <h1 style="margin:0;">✍️ CapGen AI</h1>
@@ -333,10 +302,8 @@ with gr.Blocks(
     </div>
     """)
 
-    # ── MAIN: 2 KOLOM ──
     with gr.Row(equal_height=False):
 
-        # ── KOLOM KIRI: INPUT ──
         with gr.Column(scale=1):
 
             gr.Markdown("### 📝 Ceritakan Foto/Konten Kamu")
@@ -392,42 +359,47 @@ with gr.Blocks(
                 elem_id="btn-generate",
             )
 
-        # ── KOLOM KANAN: OUTPUT ──
         with gr.Column(scale=1):
             gr.Markdown("### 📋 Hasil Caption")
             gr.Markdown(
                 '<span style="font-size:12px;color:#999;">'
-                'Klik ikon 📋 di pojok kanan untuk copy</span>'
+                'Klik tombol 📋 untuk copy tiap caption</span>'
             )
 
             caption_boxes = []
+            caption_groups = []
             for i in range(5):
-                box = gr.Textbox(
-                    label=f"Caption {i + 1}",
-                    lines=4,
-                    max_lines=8,
-                    show_copy_button=True,
-                    interactive=False,
-                    visible=(i < 3),
-                    elem_classes=["caption-output"],
-                )
-                caption_boxes.append(box)
+                with gr.Group(visible=(i < 3)) as group:
+                    with gr.Row():
+                        box = gr.Textbox(
+                            label=f"Caption {i + 1}",
+                            lines=4,
+                            max_lines=8,
+                            interactive=False,
+                            elem_classes=["caption-output"],
+                            scale=5,
+                        )
+                        copy_btn = gr.CopyButton(value=box, scale=1)
+                    caption_boxes.append(box)
+                    caption_groups.append(group)
 
-            # Visibility update saat jumlah berubah
             jumlah.change(
                 fn=update_visibility,
                 inputs=[jumlah],
-                outputs=caption_boxes,
+                outputs=caption_groups,
             )
 
-            # Generate caption
             btn_generate.click(
                 fn=generate_caption,
                 inputs=[konteks, platform, gaya, bahasa, jumlah],
                 outputs=caption_boxes,
             )
+            btn_generate.click(
+                fn=update_visibility,
+                inputs=[jumlah],
+                outputs=caption_groups,
+            )
 
-    # ── FOOTER ──
     gr.Markdown(
         '<div class="footer-text">'
         "Dibuat dengan ❤️ untuk komunitas Indonesia · "
@@ -435,5 +407,11 @@ with gr.Blocks(
         "</div>"
     )
 
-# ── JALANKAN ──
-demo.launch()
+demo.launch(
+    theme=gr.themes.Soft(
+        primary_hue="orange",
+        secondary_hue="amber",
+        neutral_hue="stone",
+    ),
+    css=CUSTOM_CSS,
+)