Update app.py

app.py

@@ -75,20 +75,20 @@ def update_analysis(symbol, prediction_days):
 
     if not fundamental_info:
         return (
-            "⚠️ Unable to fetch stock data.",
+            "Unable to fetch stock data.",
             gr.Plot.update(value=None),
             gr.Plot.update(value=None),
             gr.Plot.update(value=None),
         )
 
     fundamentals = f"""
-    ### 🏢 Company Fundamentals  
-    **Name:** {fundamental_info.get('name', 'N/A')} ({symbol.upper()})  
-    **Current Price:** Rp{fundamental_info.get('current_price', 0):,.2f}  
-    **Market Cap:** {fundamental_info.get('market_cap', 0):,}  
-    **P/E Ratio:** {fundamental_info.get('pe_ratio', 0):.2f}  
-    **Dividend Yield:** {fundamental_info.get('dividend_yield', 0):.2f}%  
-    **Volume:** {fundamental_info.get('volume', 0):,}  
+    <h4>COMPANY FUNDAMENTALS</h4>
+    <b>Name:</b> {fundamental_info.get('name', 'N/A')} ({symbol.upper()})<br>
+    <b>Current Price:</b> Rp{fundamental_info.get('current_price', 0):,.2f}<br>
+    <b>Market Cap:</b> {fundamental_info.get('market_cap', 0):,}<br>
+    <b>P/E Ratio:</b> {fundamental_info.get('pe_ratio', 0):.2f}<br>
+    <b>Dividend Yield:</b> {fundamental_info.get('dividend_yield', 0):.2f}%<br>
+    <b>Volume:</b> {fundamental_info.get('volume', 0):,}<br>
     """
 
     details_list = "".join(
@@ -96,91 +96,84 @@ def update_analysis(symbol, prediction_days):
     )
 
     trading_signal = f"""
-    ### 📊 Technical Signal Summary  
-    **Overall Trend:** {signals.get('overall', 'N/A')}  
-    **Signal Strength:** {signals.get('strength', 0):.2f}%  
-    **Support:** Rp{signals.get('support', 0):,.2f}  
-    **Resistance:** Rp{signals.get('resistance', 0):,.2f}  
-    **Stop Loss:** Rp{signals.get('stop_loss', 0):,.2f}  
-
-    **Detailed Signals:**  
-    <ul style="margin-top:6px; padding-left:20px;">{details_list}</ul>
+    <h4>TECHNICAL SIGNAL SUMMARY</h4>
+    <b>Overall Trend:</b> {signals.get('overall', 'N/A')}<br>
+    <b>Signal Strength:</b> {signals.get('strength', 0):.2f}%<br>
+    <b>Support:</b> Rp{signals.get('support', 0):,.2f}<br>
+    <b>Resistance:</b> Rp{signals.get('resistance', 0):,.2f}<br>
+    <b>Stop Loss:</b> Rp{signals.get('stop_loss', 0):,.2f}<br><br>
+    <b>Detailed Signals:</b>
+    <ul style="margin-top: 8px; padding-left: 20px; line-height: 1.6;">
+    {details_list}
+    </ul>
     """
 
     prediction = f"""
-    ### 🤖 30-Day AI Forecast (Chronos-Bolt)  
-    **Predicted High:** Rp{predictions.get('high_30d', 0):,.2f}  
-    **Predicted Low:** Rp{predictions.get('low_30d', 0):,.2f}  
-    **Expected Change:** {predictions.get('change_pct', 0):.2f}%  
-
-    **TP1:** Rp{predictions.get('tp1', 0):,.2f}  
-    **TP2:** Rp{predictions.get('tp2', 0):,.2f}  
-    **Stop Loss:** Rp{predictions.get('sl', 0):,.2f}  
-
-    **Model Insight:**  
-    {predictions.get('summary', 'No analysis available')}
-    """
-
-    combined = f"""
-    <div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;">
-        <div style="flex:1;min-width:300px;background-color:white;border-radius:8px;padding:12px;border:1px solid #e5e7eb;">{fundamentals}</div>
-        <div style="flex:1;min-width:300px;background-color:white;border-radius:8px;padding:12px;border:1px solid #e5e7eb;">{trading_signal}</div>
-        <div style="flex:1;min-width:300px;background-color:white;border-radius:8px;padding:12px;border:1px solid #e5e7eb;">{prediction}</div>
-    </div>
+    <h4>30-DAY AI FORECAST (CHRONOS-BOLT)</h4>
+    <b>Predicted High:</b> Rp{predictions.get('high_30d', 0):,.2f}<br>
+    <b>Predicted Low:</b> Rp{predictions.get('low_30d', 0):,.2f}<br>
+    <b>Expected Change:</b> {predictions.get('change_pct', 0):.2f}%<br><br>
+    <b>TP1:</b> Rp{predictions.get('tp1', 0):,.2f}<br>
+    <b>TP2:</b> Rp{predictions.get('tp2', 0):,.2f}<br>
+    <b>Stop Loss:</b> Rp{predictions.get('sl', 0):,.2f}<br><br>
+    <b>Model Insight:</b><br>{predictions.get('summary', 'No analysis available')}
     """
 
+    # Karena custom CSS dihapus, kita akan menggunakan div sederhana tanpa class 'panel-box' dan 'triple-panel'
+    # Gradio secara otomatis akan menata elemen-elemen ini dengan lebih standar
     return (
-        combined,
+        f"""
+        <div style="display: flex; flex-direction: row; gap: 16px;">
+            <div style="flex: 1; min-width: 30%; border: 1px solid #ccc; padding: 10px; border-radius: 5px;">{fundamentals}</div>
+            <div style="flex: 1; min-width: 30%; border: 1px solid #ccc; padding: 10px; border-radius: 5px;">{trading_signal}</div>
+            <div style="flex: 1; min-width: 30%; border: 1px solid #ccc; padding: 10px; border-radius: 5px;">{prediction}</div>
+        </div>
+        """,
         fig_price,
         fig_technical,
         fig_prediction,
     )
 
 
-# ---------------------- UI ----------------------
+# --- Perubahan utama di sini ---
 with gr.Blocks(
-    title="REXPRO Financial AI Dashboard",
-    theme=gr.themes.Soft(primary_hue="blue", secondary_hue="gray"),
+    title="REXPRO FINANCIAL AI DASHBOARD"
+    # Parameter theme dan css dihapus untuk kembali ke default Gradio
 ) as app:
-
+    gr.Markdown("# REXPRO FINANCIAL AI DASHBOARD")
     gr.Markdown(
-        """
-        # 💹 REXPRO Financial AI Dashboard  
-        Analyze **Indonesian stocks (IDX)** using AI-powered forecasting and technical indicators.
-        """
+        "Comprehensive stock analytics powered by **AI forecasting and technical analysis.**"
     )
 
     with gr.Row():
         symbol = gr.Textbox(
-            label="Stock Symbol (IDX)",
+            label="STOCK SYMBOL (IDX)",
             value="BBCA",
-            placeholder="e.g., BBCA, TLKM, ADRO, BMRI",
+            placeholder="Example: BBCA, TLKM, ADRO, BMRI",
+            interactive=True,
         )
         prediction_days = gr.Slider(
-            label="Forecast Period (Days)",
+            label="FORECAST PERIOD (DAYS)",
             minimum=5,
             maximum=60,
             step=5,
             value=30,
+            interactive=True,
         )
-        analyze_button = gr.Button("🔍 Run Analysis", variant="primary")
+        analyze_button = gr.Button("RUN ANALYSIS")
 
     gr.Markdown("---")
-
-    report_section = gr.HTML(label="Analysis Summary")
-
+    # Bagian report_section diubah agar lebih kompatibel dengan tema default,
+    # menggunakan sedikit inline CSS untuk meniru tata letak tiga kolom dasar.
+    report_section = gr.HTML() 
     gr.Markdown("---")
-    gr.Markdown("### 📈 Market Charts")
-
-    with gr.Tabs():
-        with gr.Tab("Price Overview"):
-            price_chart = gr.Plot(label="Price & Moving Averages")
 
-        with gr.Tab("Technical Indicators"):
-            technical_chart = gr.Plot(label="Technical Indicator Overview")
-
-        with gr.Tab("AI Forecast"):
-            prediction_chart = gr.Plot(label="AI Forecast Projection")
+    with gr.Tab("MARKET CHARTS"):
+        with gr.Row():
+            price_chart = gr.Plot(label="PRICE & MOVING AVERAGES")
+            technical_chart = gr.Plot(label="TECHNICAL INDICATORS OVERVIEW")
+        gr.Markdown("---")
+        prediction_chart = gr.Plot(label="AI FORECAST PROJECTION")
 
     analyze_button.click(
         fn=update_analysis,
@@ -188,6 +181,5 @@ with gr.Blocks(
         outputs=[report_section, price_chart, technical_chart, prediction_chart],
     )
 
-
 if __name__ == "__main__":
-    app.launch(server_name="0.0.0.0", server_port=7860, ssr_mode=True)
+    app.launch(server_name="0.0.0.0", server_port=7860, ssr_mode=True)