Update app.py

app.py

@@ -98,7 +98,7 @@ HEAD_HTML = """
         .gradio-tabs > div[role="tablist"] > button:hover { background-color: var(--content-background-color) !important; color: var(--primary-color) !important; }
         .gradio-tabs > div[role="tablist"] > button.selected { color: var(--primary-color) !important; border-bottom: 3px solid var(--primary-color) !important; background-color: var(--content-background-color) !important; }
         .tabitem { background-color: transparent !important; border: none !important; padding: 0 !important; }
-        .gradio-row.panel, .gradio-accordion { background-color: var(--content-background-color) !important; border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; padding: 24px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+        .gradio-row.panel, .gradio-accordion, .gradio-group { background-color: var(--content-background-color) !important; border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; padding: 24px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
         .gradio-accordion { margin-top: 1rem; }
         .gradio-button.primary { background: linear-gradient(90deg, var(--primary-color), #00c6ff) !important; color: #ffffff !important; font-weight: 600 !important; font-size: 1.1em !important; border-radius: 8px !important; border: none !important; padding: 12px 24px !important; transition: all 0.3s ease; box-shadow: var(--shadow-light); }
         .gradio-button.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); }
@@ -122,6 +122,7 @@ HEAD_HTML = """
         #chatbot-display .message { border-radius: 18px !important; padding: 12px 18px !important; box-shadow: none !important; max-width: 80%; }
         #chatbot-display .user { background-color: var(--primary-color) !important; color: white !important; align-self: flex-end; border-bottom-right-radius: 5px !important; }
         #chatbot-display .bot { background-color: var(--content-background-color) !important; border: 1px solid var(--border-color) !important; align-self: flex-start; border-bottom-left-radius: 5px !important; }
+        #chat-history-sidebar { background-color: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; } /* Styling for gr.Group */
         #chat-history-sidebar .gradio-radio > div { display: flex; flex-direction: column; gap: 8px; }
         #chat-history-sidebar .gradio-radio label { width: 100%; text-align: left; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s ease; }
         #chat-history-sidebar .gradio-radio input:checked + label { border-color: var(--primary-color); background-color: rgba(0, 170, 255, 0.1); color: var(--primary-color); font-weight: 600; }
@@ -182,7 +183,7 @@ if Swin2SRForImageSuperResolution:
         upscaler_processor = Swin2SRImageProcessor.from_pretrained("caidas/swin2sr-realworld-sr-x4-64-bsrgan-psnr")
         print("✅ Model AI Upscaler berhasil dimuat.")
     except Exception as e:
-        print(f"❌ Gagal memuat model Upscaler: {e}. Fitur upscale akan dinonaktifkan.")
+        print(f"❌ Gagal memuat model Upscaler: {e}. Fitur upscale akan dinaktifkan.")
 
 # --- KELAS UNTUK CHATBOT GEMINI ---
 
@@ -215,13 +216,15 @@ class GeminiChat:
             genai.configure(api_key=selected_key)
             model = genai.GenerativeModel('gemini-2.5-flash')
             
-            # Membangun konteks dari riwayat untuk API
-            chat_session = model.start_chat(
-                history=[{"role": "user" if i % 2 == 0 else "model", "parts": [msg]} for i, (user_msg, model_msg) in enumerate(history) for msg in ([user_msg] if user_msg else []) + ([model_msg] if model_msg else [])]
-            )
+            chat_history_for_api = []
+            for user_msg, model_msg in history:
+                if user_msg: chat_history_for_api.append({"role": "user", "parts": [user_msg]})
+                if model_msg: chat_history_for_api.append({"role": "model", "parts": [model_msg]})
+            
+            chat_session = model.start_chat(history=chat_history_for_api)
             
             full_prompt = message
-            if system_prompt and not history: # Terapkan system prompt hanya di awal
+            if system_prompt and not history:
                 full_prompt = f"{system_prompt}\n\nUser query: {message}"
                 
             response = chat_session.send_message(full_prompt)
@@ -296,7 +299,7 @@ def update_visitor_monitor(time_filter: str):
             column_names = ["Timestamp", "IP Address", "User Agent"]
             df = pd.read_csv(VISITOR_LOG_FILE, header=None, names=column_names)
 
-            if df.iloc[0]['Timestamp'] == 'Timestamp':
+            if not df.empty and df.iloc[0]['Timestamp'] == 'Timestamp':
                 df = df.iloc[1:].reset_index(drop=True)
         
         if df.empty: return "## 📈 0", pd.DataFrame({"Timestamp": [], "Total Pengunjung": []})
@@ -511,17 +514,14 @@ def handle_user_message(user_message, chat_id, all_chats_history):
     if not chat_id or chat_id not in all_chats_history:
         all_chats_history, chat_id, current_history, _ = add_new_chat({})
     
-    # Tambah pesan pengguna ke riwayat
     current_history = all_chats_history[chat_id]['history']
     
-    # Hapus pesan sambutan awal jika ini pesan pertama
     if len(current_history) == 1 and current_history[0][0] is None:
         current_history = []
         
     current_history.append((user_message, None))
     all_chats_history[chat_id]['history'] = current_history
     
-    # Update judul jika ini pesan pertama
     if len(current_history) == 1:
         new_title = user_message[:30] + '...' if len(user_message) > 30 else user_message
         all_chats_history[chat_id]['title'] = new_title
@@ -530,8 +530,7 @@ def handle_user_message(user_message, chat_id, all_chats_history):
     
     yield all_chats_history, current_history, gr.update(choices=history_titles, value=all_chats_history[chat_id]['title']), gr.update(value=""), gr.update(visible=False)
 
-    # Dapatkan respons dari bot
-    bot_response = gemini_bot.chat(user_message, current_history)
+    bot_response = gemini_bot.chat(user_message, [h for h in current_history if h[0] is not None])
     current_history[-1] = (user_message, bot_response)
     all_chats_history[chat_id]['history'] = current_history
     
@@ -540,7 +539,6 @@ def handle_user_message(user_message, chat_id, all_chats_history):
 def switch_chat(selected_title, all_chats_history):
     if not selected_title: return None, [], gr.update(visible=False)
     
-    # Cari ID berdasarkan judul
     selected_id = None
     for chat_id, info in all_chats_history.items():
         if info['title'] == selected_title:
@@ -558,7 +556,6 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
     gr.Markdown("# 🚀 RenXploit's Creative AI Suite 🌌", elem_id="main-title")
     gr.Markdown("Sebuah platform lengkap untuk kreativitas Anda, ditenagai oleh AI.", elem_id="main-subtitle")
 
-    # State untuk menyimpan semua data sesi
     chat_history_state = gr.State({})
     current_chat_id_state = gr.State(None)
 
@@ -589,8 +586,10 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                 with gr.Column(scale=1, min_width=250) as sidebar:
                     gr.Markdown("### 🗂️ Riwayat Chat")
                     new_chat_btn = gr.Button("➕ Obrolan Baru", variant="primary")
-                    with gr.Box(elem_id="chat-history-sidebar"):
+                    # === PERBAIKAN DI SINI: MENGGUNAKAN gr.Group BUKAN gr.Box ===
+                    with gr.Group(elem_id="chat-history-sidebar"):
                         chat_history_list = gr.Radio(label="Pilih Obrolan", choices=[], interactive=True)
+                    # ==========================================================
                     with gr.Row(visible=False) as chat_action_buttons:
                          share_chat_btn = gr.Button("🔗 Bagikan Chat")
                     share_chat_output = gr.Textbox(label="Salin Konten Chat", lines=10, interactive=True, show_copy_button=True, visible=False)
@@ -606,7 +605,7 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                                 user_chat_input = gr.Textbox(show_label=False, placeholder="Ketik pesan Anda di sini...", scale=5)
                                 send_chat_btn = gr.Button("Kirim", variant="secondary", scale=1)
 
-        # --- TAB 3: PROMPT ENHANCER ---
+        # --- TAB-TAB LAINNYA (TETAP SAMA) ---
         with gr.TabItem("✨ Prompt Enhancer", id=2):
             with gr.Row(variant='panel'):
                 with gr.Column():
@@ -616,7 +615,6 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                     enhanced_prompt_output = gr.Textbox(label="Prompt yang Disempurnakan", lines=5, interactive=True, show_copy_button=True)
                     send_to_gen_btn = gr.Button("➡️ Kirim & Pindah ke Generator")
 
-        # --- TAB 4: AI IMAGE UPSCALER ---
         with gr.TabItem("🚀 AI Image Upscaler", id=3):
             with gr.Row(variant='panel', equal_height=False):
                 with gr.Column():
@@ -629,7 +627,6 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                     upscaled_image_output = gr.Image(label="Gambar Hasil Upscale", interactive=False, show_download_button=True)
                     upscale_status_text = gr.Markdown("Status: Menunggu gambar...")
 
-        # --- TAB 5 (BARU): GALERI & RIWAYAT (dengan Share) ---
         with gr.TabItem("🖼️ Galeri & Riwayat", id=4) as history_tab:
             with gr.Row(variant='panel'):
                 with gr.Column(scale=2):
@@ -646,7 +643,6 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                         share_history_btn = gr.Button("🔗 Bagikan Detail")
                     share_history_output = gr.Textbox(label="URL & Detail untuk Dibagikan", lines=8, interactive=True, show_copy_button=True, visible=False)
 
-        # --- TAB 6 (BARU): IMAGE EDITOR ---
         with gr.TabItem("��� Image Editor", id=5):
             with gr.Row(variant='panel'):
                 with gr.Column(scale=1):
@@ -663,7 +659,6 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                     gr.Markdown("### **Hasil Editing**")
                     editor_output_image = gr.Image(label="Hasil Akhir", interactive=False, show_download_button=True)
 
-        # --- TAB 7: VISITOR MONITOR ---
         with gr.TabItem("📊 Visitor Monitor", id=6):
             with gr.Row(variant='panel'):
                 with gr.Column():
@@ -675,7 +670,6 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                             refresh_btn = gr.Button("🔄 Segarkan Manual", variant="secondary")
                     visitor_plot = gr.LinePlot(x="Timestamp", y="Total Pengunjung", title="Grafik Pertumbuhan Pengunjung", tooltip=['Timestamp', 'Total Pengunjung'], height=500, interactive=True)
 
-        # --- TAB 8: SYSTEM & SETTINGS ---
         with gr.TabItem("⚙️ System & Settings", id=7):
             with gr.Row(variant='panel'):
                 with gr.Column():
@@ -689,14 +683,13 @@ with gr.Blocks(theme=gr.themes.Base(), head=HEAD_HTML) as demo:
                                  value="FP16 (Cepat, Kualitas Baik)" if device == "cuda" else "FP32 (Lambat, Kualitas Terbaik)",
                                  label="Presisi Model Generator", interactive=False, info="Terkunci. Ditentukan saat aplikasi dimulai.")
 
-        # --- TAB-TAB STATIS ---
         with gr.TabItem("💡 Panduan Prompting", id=8):
             with gr.Row(variant='panel'): gr.Markdown("""## Cara Menjadi "Art Director" yang Hebat untuk AI...\n (Konten panduan Anda di sini)""")
         with gr.TabItem("📖 Blog & Updates", id=9):
             with gr.Row(variant='panel'): gr.Markdown("""### Perkembangan Terbaru dari RenXploit's AI Suite
-v2.7 (Pembaruan Terkini): Perombakan total UI Chatbot menjadi lebih profesional dengan fitur riwayat percakapan, new chat, dan share chat. Menambahkan fitur share detail gambar dari galeri.
-v2.6: Perbaikan final untuk bug KeyError: 'Timestamp' pada Visitor Monitor, membuatnya lebih tahan banting.
-v2.5: Menambahkan Galeri & Riwayat Generasi dan Image Editor untuk pasca-produksi.
+v2.8 (Perbaikan): Mengganti komponen `gr.Box` dengan `gr.Group` untuk kompatibilitas dengan versi Gradio yang lebih lama.
+v2.7: Perombakan total UI Chatbot menjadi lebih profesional dengan fitur riwayat percakapan, new chat, dan share chat. Menambahkan fitur share detail gambar dari galeri.
+v2.6: Perbaikan final untuk bug KeyError: 'Timestamp' pada Visitor Monitor.
 Rencana Berikutnya: Menjajaki model generator gambar yang berbeda dan fitur Inpainting/Outpainting.""")
         with gr.TabItem("ℹ️ About & Support", id=10):
             with gr.Row(variant='panel'):
@@ -704,15 +697,13 @@ Rencana Berikutnya: Menjajaki model generator gambar yang berbeda dan fitur Inpa
                     gr.Markdown("### Tentang Proyek dan Dukungan")
                     with gr.Accordion("Tentang RenXploit's Creative AI Suite", open=True):
                         gr.Markdown("""
-                        RenXploit's Creative AI Suite adalah proyek pribadi yang dibuat untuk mengeksplorasi kemampuan AI generatif dalam sebuah antarmuka yang mudah digunakan dan profesional.
-                        Aplikasi ini terus dikembangkan dengan fitur-fitur baru untuk memberdayakan kreativitas Anda.
-
-                        Jika Anda memiliki masukan, menemukan bug, atau ingin berdiskusi, jangan ragu untuk menghubungi saya melalui website portofolio di: ngoprek.xyz/contact
+                        RenXploit's Creative AI Suite adalah proyek pribadi untuk mengeksplorasi AI generatif.
+                        Hubungi saya melalui: ngoprek.xyz/contact
                         """)
                     with gr.Accordion("Laporkan Masalah atau Beri Masukan"):
                         report_name = gr.Textbox(label="Nama Anda")
                         report_email = gr.Textbox(label="Email Anda (Opsional)")
-                        report_message = gr.Textbox(label="Pesan Anda", lines=5, placeholder="Jelaskan masalah yang Anda temui atau ide yang Anda miliki...")
+                        report_message = gr.Textbox(label="Pesan Anda", lines=5, placeholder="Jelaskan masalah atau ide Anda...")
                         report_btn = gr.Button("Kirim Laporan", variant="primary")
                         report_status = gr.Markdown(visible=False)
 
@@ -720,15 +711,12 @@ Rencana Berikutnya: Menjajaki model generator gambar yang berbeda dan fitur Inpa
 
     # --- PENANGANAN EVENT (EVENT HANDLERS) ---
     
-    # 0. Event Utama App
     demo.load(log_visitor, inputs=None, outputs=None)
     demo.load(fn=add_new_chat, inputs=[chat_history_state], outputs=[chat_history_state, current_chat_id_state, chatbot_display, chat_history_list])
     
-    # 1. Event Image Generator
     random_seed_btn.click(lambda: -1, outputs=seed_input)
     generate_btn.click(fn=genie_wrapper, inputs=[prompt_input, negative_prompt_input, steps_slider, seed_input, num_images_slider], outputs=[output_gallery, loader_html, generate_btn, info_box])
     
-    # 2. Event Chatbot (UPGRADED)
     new_chat_btn.click(fn=add_new_chat, inputs=[chat_history_state], outputs=[chat_history_state, current_chat_id_state, chatbot_display, chat_history_list])
     
     send_chat_btn.click(
@@ -752,12 +740,10 @@ Rencana Berikutnya: Menjajaki model generator gambar yang berbeda dan fitur Inpa
         outputs=[share_chat_output]
     )
 
-    # 3. Event Fitur Lainnya
     enhance_btn.click(fn=enhance_prompt, inputs=[simple_prompt_input], outputs=[enhanced_prompt_output])
     send_to_gen_btn.click(fn=lambda prompt: (prompt, gr.Tabs(selected=0)), inputs=[enhanced_prompt_output], outputs=[prompt_input, tabs])
     upscale_btn.click(fn=upscale_image, inputs=[image_to_upscale_input, clarity_slider], outputs=[upscaled_image_output, upscale_status_text])
     
-    # 4. Event untuk Galeri, Editor & Share
     history_tab.select(fn=load_history, inputs=None, outputs=[history_gallery, history_df_state, history_details_md])
     refresh_history_btn.click(fn=load_history, inputs=None, outputs=[history_gallery, history_df_state, history_details_md])
     history_gallery.select(fn=show_history_details, inputs=[history_df_state], outputs=[history_details_md, history_action_buttons, share_history_output])
@@ -771,7 +757,6 @@ Rencana Berikutnya: Menjajaki model generator gambar yang berbeda dan fitur Inpa
     filter_radio.change(fn=apply_image_edits, inputs=editor_inputs, outputs=editor_output_image)
     editor_input_image.change(fn=apply_image_edits, inputs=editor_inputs, outputs=editor_output_image)
 
-    # 5. Event Monitor
     demo.load(fn=update_visitor_monitor, inputs=[time_filter_radio], outputs=[visitor_count_display, visitor_plot])
     refresh_btn.click(fn=update_visitor_monitor, inputs=[time_filter_radio], outputs=[visitor_count_display, visitor_plot])
     time_filter_radio.change(fn=update_visitor_monitor, inputs=[time_filter_radio], outputs=[visitor_count_display, visitor_plot])
@@ -779,10 +764,8 @@ Rencana Berikutnya: Menjajaki model generator gambar yang berbeda dan fitur Inpa
     system_info_trigger_btn.click(fn=update_system_info, inputs=None, outputs=system_info_md)
     demo.load(fn=update_system_info, inputs=None, outputs=system_info_md)
     
-    # 6. Event Support
     report_btn.click(fn=submit_report, inputs=[report_name, report_email, report_message], outputs=[report_status])
 
-
 # --- Menjalankan Aplikasi ---
 
 if __name__ == "__main__":