Update app.py

app.py

@@ -4,11 +4,8 @@ import os
 import time
 import gradio as gr
 import importlib.util
-
+import markdown
 from huggingface_hub import hf_hub_download
-from gradio.components.chatbot import Chatbot as grChatbot # Import for type hints
-from gradio.components.textbox import Textbox as grTextbox
-from gradio.events import EventListener
 
 # ----------------------------------------------------------------------
 # Helper to read secrets from the HF Space environment
@@ -22,17 +19,21 @@ def _secret(key: str, fallback: str = None) -> str:
 # ----------------------------------------------------------------------
 # 1. Configuration & Constants
 # ----------------------------------------------------------------------
+# The private repo containing the vector DB and the logic script
 REPO_ID = _secret("REPO_ID") 
+# Files to download from the repo
 FILES_TO_DOWNLOAD = ["index.faiss", "index.pkl", "agent_logic.py"]
+# A local directory to store all downloaded assets
 LOCAL_DOWNLOAD_DIR = "downloaded_assets"
 EMBEDDING_MODEL_NAME = "google/embeddinggemma-300m" 
 
 # ----------------------------------------------------------------------
 # 2. Bootstrap Phase: Download assets and initialize the engine
+#    (This code runs only once when the Space starts up)
 # ----------------------------------------------------------------------
 print("--- [UI App] Starting bootstrap process ---")
 os.makedirs(LOCAL_DOWNLOAD_DIR, exist_ok=True)
-hf_token = _secret("HF_TOKEN")
+hf_token = _secret("HF_TOKEN") # A read-access token is required for private repos
 
 for filename in FILES_TO_DOWNLOAD:
     print(f"--- [UI App] Downloading '{filename}'... ---")
@@ -44,12 +45,15 @@ for filename in FILES_TO_DOWNLOAD:
     except Exception as e:
         raise RuntimeError(f"Failed to download '{filename}'. Check repo/file names and HF_TOKEN. Error: {e}")
 
+# Dynamically import the RAG_Engine class from the downloaded script
 logic_script_path = os.path.join(LOCAL_DOWNLOAD_DIR, "agent_logic.py")
 spec = importlib.util.spec_from_file_location("agent_logic", logic_script_path)
 agent_logic_module = importlib.util.module_from_spec(spec)
 spec.loader.exec_module(agent_logic_module)
 print("--- [UI App] Agent logic module imported successfully. ---")
 
+# Instantiate the engine. This single line triggers all the complex setup
+# defined in the private_logic.py file.
 engine = agent_logic_module.RAG_Engine(
     local_download_dir=LOCAL_DOWNLOAD_DIR,
     embedding_model_name=EMBEDDING_MODEL_NAME
@@ -57,84 +61,205 @@ engine = agent_logic_module.RAG_Engine(
 print("--- [UI App] Bootstrap complete. Gradio UI is starting. ---")
 
 # ----------------------------------------------------------------------
-# 3. Core Gradio Chat Logic
+# 3. Core Gradio Chat Logic (Now a simple wrapper)
 # ----------------------------------------------------------------------
-def add_message_and_respond(message: str, history: list):
-    history.append([message, None])
-    yield history
-
-    history_for_engine = []
-    for user_msg, bot_msg in history[:-1]:
-        history_for_engine.append({"role": "user", "content": user_msg})
-        if bot_msg:
-            history_for_engine.append({"role": "assistant", "content": bot_msg})
-
-    final_response = engine.get_response(message, history_for_engine)
+def respond(message: str, history: list[dict[str, str]]):
+    """
+    This function is called by Gradio for each user message.
+    It passes the inputs to the RAG engine and streams the output.
+    """
+    final_response = engine.get_response(message, history)
     
-    history[-1][1] = ""
+    # Stream the response back to the UI for a "typing" effect
+    response = ""
     for char in final_response:
-        history[-1][1] += char
+        response += char
         time.sleep(0.01)
-        yield history
+        yield response
 
 # ----------------------------------------------------------------------
-# 4. UI Layout and Launch (Beautified with gr.Blocks)
+# 4. Custom CSS for better styling
 # ----------------------------------------------------------------------
+custom_css = """
+/* Main container styling */
+.contain {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
 
-css = """
-#chatbot { min-height: 600px; }
-.footer { text-align: center; color: #777; font-size: 0.8em; padding: 10px 0; }
-"""
+/* Header styling */
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+}
 
-# The theme must be passed to gr.Blocks now
-with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
-    gr.Markdown("<h1>🤖 PRECISE RAG Agent</h1>")
-    gr.Markdown("Tanya Jawab Cerdas Mengenai Dokumentasi Sistem PRECISE")
-    
-    chatbot = grChatbot(
-        elem_id="chatbot",
-        label="Conversation",
-        likeable=True, # This is a valid and nice feature
-    )
+.header h1 {
+    color: #2c3e50;
+    font-weight: 700;
+    margin-bottom: 10px;
+    font-size: 2.5rem;
+}
+
+.header p {
+    color: #7f8c8d;
+    font-size: 1.2rem;
+}
+
+/* Chat container styling */
+.gr-chat-message {
+    padding: 16px 20px;
+    border-radius: 18px;
+    margin: 10px 0;
+    line-height: 1.5;
+}
+
+.gr-chat-message-user {
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    color: white;
+    margin-left: 20%;
+}
+
+.gr-chat-message-bot {
+    background: linear-gradient(135deg, #ecf0f1 0%, #ffffff 100%);
+    color: #2c3e50;
+    margin-right: 20%;
+    border: 1px solid #e0e0e0;
+}
+
+/* Chat input styling */
+.gr-text-input textarea {
+    border-radius: 12px;
+    padding: 15px;
+    font-size: 16px;
+    border: 2px solid #bdc3c7;
+}
+
+.gr-text-input textarea:focus {
+    border-color: #3498db;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+}
+
+/* Button styling */
+.gr-button {
+    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    padding: 12px 24px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.gr-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Example styling */
+.gr-examples {
+    border-radius: 12px;
+    background: white;
+    padding: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.gr-examples button {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 10px 15px;
+    margin: 5px;
+    transition: all 0.2s ease;
+}
+
+.gr-examples button:hover {
+    background: #e9ecef;
+    transform: translateY(-1px);
+}
+
+/* Formula styling */
+.formula {
+    background-color: #f8f9fa;
+    border-left: 4px solid #3498db;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 0 8px 8px 0;
+    overflow-x: auto;
+}
+
+.formula p {
+    margin: 0;
+    font-family: monospace;
+    color: #2c3e50;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .gr-chat-message-user, .gr-chat-message-bot {
+        margin-left: 10%;
+        margin-right: 10%;
+    }
     
-    with gr.Row():
-        msg = grTextbox(
-            label="Your Question",
-            placeholder="Ketik pertanyaan Anda di sini dan tekan Enter...",
-            scale=4,
-        )
-        submit_btn = gr.Button("Send", variant="primary", scale=1)
+    .header h1 {
+        font-size: 2rem;
+    }
+}
+"""
 
-    gr.Examples(
+# ----------------------------------------------------------------------
+# 5. UI Layout and Launch
+# ----------------------------------------------------------------------
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    # Header section
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.HTML("""
+            <div class="header">
+                <h1>🤖 PRECISE RAG Agent</h1>
+                <p>Silakan bertanya tentang PRECISE dan sistem promosinya</p>
+            </div>
+            """)
+    
+    # Chat interface
+    chatbot = gr.ChatInterface(
+        respond,
+        type="messages",
         examples=[
-            "Apa rumus untuk menghitung PVR?",
-            "Apa tujuan pengadaan PRECISE?",
-            "Jelaskan segmentasi *slow-moving*",
+            ["Apa rumus untuk menghitung PVR?"],
+            ["Apa tujuan pengadaan PRECISE?"],
+            ["Jelaskan tentang promo 'beli 4 gratis 2'"],
         ],
-        inputs=msg,
+        cache_examples=False,
     )
     
-    gr.Markdown("<hr><p class='footer'>Powered by OpenRouter and LangChain. All rights reserved.</p>")
-
-    # --- Event Handlers ---
-    
-    # Create a submit action that can be triggered by button click or textbox submit
-    submit_event = msg.submit(add_message_and_respond, [msg, chatbot], chatbot)
-    submit_event.then(lambda: "", None, msg) # Clears textbox after submit
-    
-    btn_event = submit_btn.click(add_message_and_respond, [msg, chatbot], chatbot)
-    btn_event.then(lambda: "", None, msg) # Clears textbox after click
+    # Additional information section
+    with gr.Accordion("📊 Informasi Formula PVR", open=False):
+        gr.Markdown("""
+        **PVR untuk promo "beli 4 gratis 2" dihitung dengan rumus:**
+        
+        ```math
+        \\text{PVR} = \\frac{\\text{added\\_value}}{\\text{purchase\\_value}} 
+                    = \\frac{\\text{target\\_value} \\times \\text{avg\\_price\\_AVP}}
+                           {\\text{target\\_value} \\times \\text{avg\\_price\\_AVP} 
+                            + \\text{condition\\_value} \\times \\text{avg\\_price\\_REP}}
+        ```
+        
+        Keterangan:
+        - **added_value**: Nilai tambah dari promo
+        - **purchase_value**: Nilai pembelian keseluruhan
+        - **target_value**: Jumlah produk target dalam promo
+        - **avg_price_AVP**: Harga rata-rata produk AVP
+        - **condition_value**: Jumlah produk kondisi dalam promo
+        - **avg_price_REP**: Harga rata-rata produk REP
+        """)
 
-# ----------------------------------------------------------------------
-# 5. Launch the App
-# ----------------------------------------------------------------------
 if __name__ == "__main__":
     allowed_user = _secret("CHAT_USER")
     allowed_pass = _secret("CHAT_PASS")
-    # Tell Gradio to load the MathJax library for LaTeX rendering
     demo.launch(
         auth=(allowed_user, allowed_pass),
         server_name="0.0.0.0",
         ssr_mode=False,
-        server_port=7860,
+        server_port=7860
     )