Update app.py

app.py

@@ -75,22 +75,20 @@ def update_analysis(symbol, prediction_days):
 
     if not fundamental_info:
         return (
-            "Unable to fetch stock data.",
-            "No technical signals available.",
-            "No prediction data available.",
+            "⚠️ Unable to fetch stock data.",
             gr.Plot.update(value=None),
             gr.Plot.update(value=None),
             gr.Plot.update(value=None),
         )
 
     fundamentals = f"""
-    <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>
+    ### 🏢 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):,}  
     """
 
     details_list = "".join(
@@ -98,127 +96,91 @@ def update_analysis(symbol, prediction_days):
     )
 
     trading_signal = f"""
-    <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>
+    ### 📊 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>
     """
 
     prediction = f"""
-    <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')}
+    ### 🤖 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>
     """
 
     return (
-        f"""
-        <div class='triple-panel'>
-            <div class='panel-box'>{fundamentals}</div>
-            <div class='panel-box'>{trading_signal}</div>
-            <div class='panel-box'>{prediction}</div>
-        </div>
-        """,
+        combined,
         fig_price,
         fig_technical,
         fig_prediction,
     )
 
 
+# ---------------------- UI ----------------------
 with gr.Blocks(
-    title="REXPRO FINANCIAL AI DASHBOARD",
+    title="REXPRO Financial AI Dashboard",
     theme=gr.themes.Soft(primary_hue="blue", secondary_hue="gray"),
-    css="""
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-        body {
-            background-color: #f9fafb;
-            color: #1e293b;
-            font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
-        }
-        h1 {
-            color: #1e40af;
-            text-align: center;
-            font-weight: 700;
-            letter-spacing: 0.5px;
-        }
-        h2, h3, h4 {
-            color: #1e3a8a;
-            font-weight: 600;
-            margin-bottom: 6px;
-        }
-        .gr-button {
-            background-color: #2563eb !important;
-            color: white !important;
-            font-weight: 600;
-            border-radius: 8px;
-            padding: 10px 18px;
-        }
-        .panel-box {
-            background-color: #ffffff;
-            border-radius: 10px;
-            border: 1px solid #e2e8f0;
-            padding: 16px;
-            flex: 1;
-            min-width: 30%;
-        }
-        .triple-panel {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            gap: 16px;
-            width: 100%;
-        }
-        ul { margin: 0; padding: 0 0 0 18px; }
-        li { margin-bottom: 4px; }
-        .gr-plot {
-            background-color: #ffffff;
-            border: 1px solid #e2e8f0;
-            border-radius: 10px;
-        }
-    """,
 ) as app:
-    gr.Markdown("# REXPRO FINANCIAL AI DASHBOARD")
+
     gr.Markdown(
-        "Comprehensive stock analytics powered by **AI forecasting and technical analysis.**"
+        """
+        # 💹 REXPRO Financial AI Dashboard  
+        Analyze **Indonesian stocks (IDX)** using AI-powered forecasting and technical indicators.
+        """
     )
 
     with gr.Row():
         symbol = gr.Textbox(
-            label="STOCK SYMBOL (IDX)",
+            label="Stock Symbol (IDX)",
             value="BBCA",
-            placeholder="Example: BBCA, TLKM, ADRO, BMRI",
-            interactive=True,
+            placeholder="e.g., BBCA, TLKM, ADRO, BMRI",
         )
         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")
+        analyze_button = gr.Button("🔍 Run Analysis", variant="primary")
 
     gr.Markdown("---")
-    report_section = gr.HTML()
+
+    report_section = gr.HTML(label="Analysis Summary")
+
     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("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")
+        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")
 
     analyze_button.click(
         fn=update_analysis,
@@ -226,5 +188,6 @@ 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)