Update Gradio app with multiple files

app.py

@@ -123,33 +123,10 @@ def update_analysis(symbol, prediction_days):
     # Gradio secara otomatis akan menata elemen-elemen ini dengan lebih standar
     return (
         f"""
-        <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 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,
@@ -158,243 +135,51 @@ def update_analysis(symbol, prediction_days):
     )
 
 
-# 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 ---
+# --- Perubahan utama di sini ---
 with gr.Blocks(
-    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"]
+    title="REXPRO FINANCIAL AI DASHBOARD"
+    # Parameter theme dan css dihapus untuk kembali ke default Gradio
 ) as app:
-    
-    # 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
+    gr.Markdown("# REXPRO FINANCIAL AI DASHBOARD")
+    gr.Markdown(
+        "Comprehensive stock analytics powered by **AI forecasting and technical analysis.**"
+    )
+
     with gr.Row():
-        theme_toggle = gr.Button(
-            "🌙 Switch to Dark Mode" if gr.load else "☀️ Switch to Light Mode",
-            variant="primary",
-            size="sm",
-            elem_classes=["theme-toggle"]
+        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,
         )
-    
-    # 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>')
+        analyze_button = gr.Button("RUN ANALYSIS")
 
-    with gr.Tab("📊 MARKET CHARTS", elem_classes=["tab-content"]):
+    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.Row():
-            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"])
+            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,
         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)