Update Gradio app with multiple files

app.py

@@ -123,10 +123,33 @@ def update_analysis(symbol, prediction_days):
     # Gradio secara otomatis akan menata elemen-elemen ini dengan lebih standar
     return (
         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 class="panel-card" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; padding: 0; overflow: hidden;">
+            <div style="display: flex; flex-direction: row; gap: 0; height: auto;">
+                <div style="flex: 1; min-width: 30%; padding: 20px; border-right: 1px solid rgba(255,255,255,0.1);">
+                    <div style="margin-bottom: 15px;">
+                        <h3 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: #4fc3f7;">🏢 COMPANY FUNDAMENTALS</h3>
+                    </div>
+                    <div style="line-height: 1.8; font-size: 0.95rem;">
+                        {fundamentals.replace('<h4>COMPANY FUNDAMENTALS</h4>', '').replace('<br>', '<br>')}
+                    </div>
+                </div>
+                <div style="flex: 1; min-width: 30%; padding: 20px; border-right: 1px solid rgba(255,255,255,0.1);">
+                    <div style="margin-bottom: 15px;">
+                        <h3 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: #81c784;">📊 TECHNICAL SIGNAL SUMMARY</h3>
+                    </div>
+                    <div style="line-height: 1.8; font-size: 0.95rem;">
+                        {trading_signal.replace('<h4>TECHNICAL SIGNAL SUMMARY</h4>', '').replace('<br>', '<br>').replace('<ul style="margin-top: 8px; padding-left: 20px; line-height: 1.6;">', '<ul style="margin-top: 8px; padding-left: 20px; line-height: 1.4; font-size: 0.9rem;">')}
+                    </div>
+                </div>
+                <div style="flex: 1; min-width: 30%; padding: 20px;">
+                    <div style="margin-bottom: 15px;">
+                        <h3 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: #ffb74d;">🤖 AI FORECAST INSIGHTS</h3>
+                    </div>
+                    <div style="line-height: 1.8; font-size: 0.95rem;">
+                        {prediction.replace('<h4>30-DAY AI FORECAST (CHRONOS-BOLT)</h4>', '').replace('<br>', '<br>')}
+                    </div>
+                </div>
+            </div>
         </div>
         """,
         fig_price,
@@ -135,51 +158,243 @@ def update_analysis(symbol, prediction_days):
     )
 
 
-# --- Perubahan utama di sini ---
+# Theme management
+theme_state = gr.State(value="light")
+
+def toggle_theme(current_theme):
+    return "dark" if current_theme == "light" else "light"
+
+def get_theme_css(theme):
+    if theme == "dark":
+        return """
+        <style>
+        body { background-color: #1a1a1a; color: #ffffff; }
+        .main-container { background-color: #2a2a2a !important; }
+        .panel-modern { 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            color: white !important;
+            border-radius: 15px !important;
+            padding: 20px !important;
+            margin: 10px !important;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
+        }
+        .panel-card {
+            background: rgba(255,255,255,0.05) !important;
+            backdrop-filter: blur(10px) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+            border-radius: 12px !important;
+            padding: 16px !important;
+            margin: 8px !important;
+            transition: all 0.3s ease !important;
+        }
+        .panel-card:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
+        }
+        .header-gradient {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            -webkit-background-clip: text !important;
+            -webkit-text-fill-color: transparent !important;
+            background-clip: text !important;
+        }
+        .theme-toggle {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            border: none !important;
+            border-radius: 25px !important;
+            padding: 12px 20px !important;
+            color: white !important;
+            font-weight: bold !important;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+            transition: all 0.3s ease !important;
+        }
+        .theme-toggle:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+        }
+        .input-modern {
+            background: rgba(255,255,255,0.05) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+            border-radius: 10px !important;
+            color: white !important;
+        }
+        .tab-content {
+            background: rgba(255,255,255,0.02) !important;
+            border-radius: 12px !important;
+            padding: 20px !important;
+        }
+        </style>
+        """
+    else:
+        return """
+        <style>
+        body { background-color: #f8fafc; color: #1a202c; }
+        .main-container { background-color: #ffffff !important; }
+        .panel-modern { 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            color: white !important;
+            border-radius: 15px !important;
+            padding: 20px !important;
+            margin: 10px !important;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
+        }
+        .panel-card {
+            background: rgba(255,255,255,0.9) !important;
+            backdrop-filter: blur(10px) !important;
+            border: 1px solid rgba(0,0,0,0.05) !important;
+            border-radius: 12px !important;
+            padding: 16px !important;
+            margin: 8px !important;
+            transition: all 0.3s ease !important;
+        }
+        .panel-card:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+        }
+        .header-gradient {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            -webkit-background-clip: text !important;
+            -webkit-text-fill-color: transparent !important;
+            background-clip: text !important;
+        }
+        .theme-toggle {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            border: none !important;
+            border-radius: 25px !important;
+            padding: 12px 20px !important;
+            color: white !important;
+            font-weight: bold !important;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+            transition: all 0.3s ease !important;
+        }
+        .theme-toggle:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+        }
+        .input-modern {
+            background: rgba(255,255,255,0.9) !important;
+            border: 1px solid rgba(0,0,0,0.1) !important;
+            border-radius: 10px !important;
+        }
+        .tab-content {
+            background: rgba(255,255,255,0.7) !important;
+            border-radius: 12px !important;
+            padding: 20px !important;
+        }
+        </style>
+        """
+
+# --- Modern UI Redesign ---
 with gr.Blocks(
-    title="REXPRO FINANCIAL AI DASHBOARD"
-    # Parameter theme dan css dihapus untuk kembali ke default Gradio
+    title="REXPRO FINANCIAL AI DASHBOARD",
+    css="""
+    .main-container {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+    .header-section {
+        text-align: center;
+        padding: 30px 0;
+        margin-bottom: 30px;
+    }
+    .control-panel {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        border-radius: 20px;
+        padding: 25px;
+        margin-bottom: 30px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+    }
+    """,
+    elem_classes=["main-container"]
 ) as app:
-    gr.Markdown("# REXPRO FINANCIAL AI DASHBOARD")
-    gr.Markdown(
-        "Comprehensive stock analytics powered by **AI forecasting and technical analysis.**"
-    )
-
+    
+    # Header Section
+    with gr.Row(elem_classes=["header-section"]):
+        gr.HTML("""
+        <div class="header-gradient">
+            <h1 style="font-size: 2.5rem; margin: 0; font-weight: 800;">
+                🚀 REXPRO FINANCIAL AI DASHBOARD
+            </h1>
+            <p style="font-size: 1.2rem; margin: 10px 0 0 0; opacity: 0.8;">
+                Comprehensive stock analytics powered by <strong>AI forecasting and technical analysis</strong>
+            </p>
+        </div>
+        """)
+    
+    # Theme toggle
     with gr.Row():
-        symbol = gr.Textbox(
-            label="STOCK SYMBOL (IDX)",
-            value="BBCA",
-            placeholder="Example: BBCA, TLKM, ADRO, BMRI",
-            interactive=True,
-        )
-        prediction_days = gr.Slider(
-            label="FORECAST PERIOD (DAYS)",
-            minimum=5,
-            maximum=60,
-            step=5,
-            value=30,
-            interactive=True,
+        theme_toggle = gr.Button(
+            "🌙 Switch to Dark Mode" if gr.load else "☀️ Switch to Light Mode",
+            variant="primary",
+            size="sm",
+            elem_classes=["theme-toggle"]
         )
-        analyze_button = gr.Button("RUN ANALYSIS")
+    
+    # Control Panel
+    with gr.Row(elem_classes=["control-panel"]):
+        with gr.Column(scale=2):
+            symbol = gr.Textbox(
+                label="📈 STOCK SYMBOL (IDX)",
+                value="BBCA",
+                placeholder="Example: BBCA, TLKM, ADRO, BMRI",
+                interactive=True,
+                elem_classes=["input-modern"]
+            )
+        with gr.Column(scale=1):
+            prediction_days = gr.Slider(
+                label="🔮 FORECAST PERIOD (DAYS)",
+                minimum=5,
+                maximum=60,
+                step=5,
+                value=30,
+                interactive=True,
+                elem_classes=["input-modern"]
+            )
+        with gr.Column(scale=1):
+            analyze_button = gr.Button(
+                "⚡ RUN ANALYSIS",
+                variant="primary",
+                size="lg",
+                elem_classes=["theme-toggle"]
+            )
+    
+    # Modern theme-aware CSS
+    theme_css = gr.HTML("")
+    
+    gr.HTML('<div style="height: 20px;"></div>')
+    
+    # Enhanced report section with modern styling
+    report_section = gr.HTML(elem_classes=["panel-modern"])
+    
+    gr.HTML('<div style="height: 20px;"></div>')
 
-    gr.Markdown("---")
-    # 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("---")
-
-    with gr.Tab("MARKET CHARTS"):
+    with gr.Tab("📊 MARKET CHARTS", elem_classes=["tab-content"]):
         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")
+            price_chart = gr.Plot(label="💹 PRICE & MOVING AVERAGES", elem_classes=["panel-card"])
+            technical_chart = gr.Plot(label="📈 TECHNICAL INDICATORS OVERVIEW", elem_classes=["panel-card"])
+        gr.HTML('<div style="height: 20px;"></div>')
+        prediction_chart = gr.Plot(label="🤖 AI FORECAST PROJECTION", elem_classes=["panel-card"])
 
     analyze_button.click(
         fn=update_analysis,
         inputs=[symbol, prediction_days],
         outputs=[report_section, price_chart, technical_chart, prediction_chart],
     )
+    
+    # Theme toggle functionality
+    theme_toggle.click(
+        fn=lambda x: toggle_theme(x),
+        inputs=[theme_state],
+        outputs=[theme_state]
+    )
+    
+    # Update theme CSS when theme changes
+    theme_state.change(
+        fn=get_theme_css,
+        inputs=[theme_state],
+        outputs=[theme_css]
+    )
 
 if __name__ == "__main__":
     app.launch(server_name="0.0.0.0", server_port=7860, ssr_mode=True)

requirements.txt

@@ -9,4 +9,4 @@ spaces>=0.20.0
 accelerate>=0.20.0
 tiktoken
 sentencepiece
-chronos-forecasting
+chronos-forecasting

utils.py

@@ -214,4 +214,4 @@ def create_technical_chart(data, indicators):
     fig.add_hline(y=70, line_dash="dash", line_color="red", row=2, col=2)
     fig.add_hline(y=30, line_dash="dash", line_color="green", row=2, col=2)
     fig.update_layout(title='Technical Indicators Overview', height=800, showlegend=False, hovermode='x unified')
-    return fig
+    return fig