Update app.py

app.py

@@ -27,7 +27,6 @@ Teknologi:
 """
 
 import gradio as gr
-
 from prompt_refiner import PemurniPrompt
 from variables import api_token, models, meta_prompts, explanation_markdown, metaprompt_list, metaprompt_explanations, examples
 from custom_css import custom_css
@@ -38,37 +37,36 @@ class PromptSuiteAI:
         self.prompt_refiner = prompt_refiner
         default_model = models[-1] if len(models) >= 1 else models[0] if models else None
 
-        # with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
         with gr.Blocks(theme=IndonesiaTheme(), css=custom_css) as self.interface:
+            # --- HEADER & TITLE ---
             with gr.Column(elem_classes=["container", "title-container"]):
-                # Banner gambar di bagian atas
                 gr.HTML("""
                   <div style='text-align: center;'>
-                        <img src='https://i.ibb.co/Gv3WDQrw/banner-propmptsuite.jpg' alt='Banner' style='width: 100%; height: auto;'/>
+                        <img src='https://i.ibb.co.com/ynqKvrr/banner-pulid.jpg' alt='Banner' style='width: 100%; max-width:820px; height: auto; border-radius:16px; box-shadow:0 2px 12px 0 rgba(30,30,30,0.12); margin-bottom:0.7em;'/>
                     </div>
                 """)
-                gr.Markdown("# PromptSuite AI")
-                gr.Markdown("### Otomatisasi dan Perbandingan Rekayasa Prompt LLM")
-                gr.Markdown("Bandingkan, evaluasi, dan optimasi prompt AI Anda secara praktis dan canggih.")
-                # Keterangan platform
+                gr.Markdown("# 🚀 PromptSuite AI")
+                gr.Markdown("### 🤖 Otomatisasi dan Perbandingan Rekayasa Prompt LLM")
+                gr.Markdown("🔍 Bandingkan, evaluasi, dan optimasi prompt AI Anda secara praktis dan canggih.")
                 gr.Markdown(
                     """
                     <span style='font-size:1.03em; color:#ccc'>
-                    PromptSuite AI adalah platform rekayasa prompt modern untuk membandingkan, menganalisis, 
-                    dan memperbaiki prompt secara otomatis ataupun manual, berbasis Large Language Model (LLM) open source.  
-                    Platform ini dirancang untuk peneliti, praktisi AI, developer, dan siapapun yang ingin mengeksplorasi 
+                    ✨ <b>PromptSuite AI</b> adalah platform rekayasa prompt modern untuk membandingkan, menganalisis, 
+                    dan memperbaiki prompt secara otomatis ataupun manual, berbasis Large Language Model (LLM) open source.<br>
+                    💡 Platform ini dirancang untuk peneliti, praktisi AI, developer, dan siapapun yang ingin mengeksplorasi 
                     efek optimasi prompt terhadap kualitas output AI.
                     </span>
-                    """
+                    """,
+                    unsafe_allow_html=True
                 )
 
             # --- KONTENER 2: Input Prompt & Contoh ---
             with gr.Column(elem_classes=["container", "input-container"]):
-                prompt_text = gr.Textbox(label="Tulis prompt Anda (atau kosongkan untuk melihat metaprompt)", lines=5)
-                with gr.Accordion("Contoh Prompt", open=False, visible=True):     
+                prompt_text = gr.Textbox(label="✏️ Tulis prompt Anda (atau kosongkan untuk melihat metaprompt)", lines=5)
+                with gr.Accordion("📋 Contoh Prompt", open=False, visible=True):     
                     gr.Examples(examples=examples, inputs=[prompt_text]) 
                 automatic_metaprompt_button = gr.Button(
-                    "Pilih Otomatis Metode Perbaikan",
+                    "🔮 Pilih Otomatis Metode Perbaikan",
                     elem_classes=["button-highlight"]
                 )
                 MetaPrompt_analysis = gr.Markdown()
@@ -77,22 +75,22 @@ class PromptSuiteAI:
             with gr.Column(elem_classes=["container", "meta-container"]):
                 meta_prompt_choice = gr.Radio(
                     choices=metaprompt_list,
-                    label="Pilih Metaprompt",
+                    label="🛠️ Pilih Metaprompt",
                     value=metaprompt_list[0],
                     elem_classes=["no-background", "radio-group"]
                 )
                 refine_button = gr.Button(
-                    "Perbaiki Prompt",
+                    "✨ Perbaiki Prompt",
                     elem_classes=["button-waiting"]
                 )
-                with gr.Accordion("Penjelasan Metaprompt", open=False, visible=True): 
+                with gr.Accordion("ℹ️ Penjelasan Metaprompt", open=False, visible=True): 
                     gr.Markdown(explanation_markdown)
 
             # --- KONTENER 4: Analisis & Refined Prompt ---
             with gr.Column(elem_classes=["container", "analysis-container"]):           
                 gr.Markdown(" ")
                 prompt_evaluation = gr.Markdown()
-                gr.Markdown("### Prompt yang Telah Diperbaiki")
+                gr.Markdown("### ✨ Prompt yang Telah Diperbaiki")
                 refined_prompt = gr.Textbox(
                     label=" ",
                     interactive=True,
@@ -107,60 +105,58 @@ class PromptSuiteAI:
                     apply_model = gr.Dropdown(
                         choices=models,
                         value=default_model,
-                        label="Pilih Model",
+                        label="🧠 Pilih Model",
                         container=False,
                         scale=1,
                         min_width=300
                     )
                     apply_button = gr.Button(
-                        "Uji Prompt ke Model",
+                        "⚡ Uji Prompt ke Model",
                         elem_classes=["button-waiting"]
                     )
-                gr.Markdown("### Hasil Pada Model Terpilih")
+                gr.Markdown("### 📝 Hasil Pada Model Terpilih")
                 with gr.Tabs(elem_classes=["tabs"]):
-                    with gr.TabItem("Perbandingan Output", elem_classes=["tabitem"]):                     
+                    with gr.TabItem("📊 Perbandingan Output", elem_classes=["tabitem"]):                     
                         with gr.Row(elem_classes=["output-row"]):
                             with gr.Column(scale=1, elem_classes=["comparison-column"]):
-                                gr.Markdown("### Output Prompt Asli")
+                                gr.Markdown("### 🔡 Output Prompt Asli")
                                 original_output1 = gr.Markdown(
                                     elem_classes=["output-content"],
                                     visible=True
                                 )
                             with gr.Column(scale=1, elem_classes=["comparison-column"]):
-                                gr.Markdown("### Output Prompt Diperbaiki")
+                                gr.Markdown("### ✨ Output Prompt Diperbaiki")
                                 refined_output1 = gr.Markdown(
                                     elem_classes=["output-content"],
                                     visible=True
                                 )
-                    with gr.TabItem("Output Prompt Asli", elem_classes=["tabitem"]):
+                    with gr.TabItem("🔡 Output Prompt Asli", elem_classes=["tabitem"]):
                         with gr.Row(elem_classes=["output-row"]):
                             with gr.Column(scale=1, elem_classes=["comparison-column"]):
-                                gr.Markdown("### Output Prompt Asli")
+                                gr.Markdown("### 🔡 Output Prompt Asli")
                                 original_output = gr.Markdown(
                                     elem_classes=["output-content"],
                                     visible=True
                                 )
-                    with gr.TabItem("Output Prompt Diperbaiki", elem_classes=["tabitem"]):
+                    with gr.TabItem("✨ Output Prompt Diperbaiki", elem_classes=["tabitem"]):
                         with gr.Row(elem_classes=["output-row"]):
                             with gr.Column(scale=1, elem_classes=["comparison-column"]):
-                                gr.Markdown("### Output Prompt Diperbaiki")
+                                gr.Markdown("### ✨ Output Prompt Diperbaiki")
                                 refined_output = gr.Markdown(
                                     elem_classes=["output-content"],
                                     visible=True
                                 )
-                with gr.Accordion("Respons JSON Lengkap", open=False, visible=True):
+                with gr.Accordion("🧾 Respons JSON Lengkap", open=False, visible=True):
                     full_response_json = gr.JSON()
 
             # ======================= EVENT HANDLER / JS ==========================
 
-            # Handler untuk otomatis memilih metaprompt
             def automatic_metaprompt(prompt: str):
                 if not prompt.strip():
                     return "Silakan masukkan prompt untuk dianalisis.", None
                 metaprompt_analysis, recommended_key = self.prompt_refiner.automatic_metaprompt(prompt)
                 return metaprompt_analysis, recommended_key
 
-            # Handler untuk refine prompt manual
             def refine_prompt(prompt: str, meta_prompt_choice: str):
                 if not prompt.strip():
                     return ("Tidak ada prompt.", "", "", {})
@@ -172,7 +168,6 @@ class PromptSuiteAI:
                     result[3]   # Full JSON response
                 )
 
-            # Handler untuk menguji prompt pada model
             def apply_prompts(original_prompt: str, refined_prompt_: str, model: str):
                 if not original_prompt or not refined_prompt_:
                     return (
@@ -292,7 +287,6 @@ class PromptSuiteAI:
                 """
             )
 
-            # Reset ketika input berubah
             prompt_text.change(
                 fn=lambda: None,
                 inputs=None,
@@ -324,7 +318,6 @@ class PromptSuiteAI:
         """Jalankan antarmuka PromptSuite AI"""
         self.interface.launch(share=share)
 
-
 if __name__ == '__main__':
     prompt_refiner = PemurniPrompt(api_token, meta_prompts, metaprompt_explanations)
     app = PromptSuiteAI(prompt_refiner, custom_css)