Update app.py

app.py

@@ -2,8 +2,9 @@ import gradio as gr
 import numpy as np
 import json
 import pandas as pd
-import plotly.graph_objects as go
-from plotly.subplots import make_subplots
+import matplotlib.pyplot as plt
+import matplotlib
+matplotlib.use('Agg')
 
 class TradeArenaEnv_Deterministic:
     """
@@ -140,7 +141,7 @@ history = []
 def initialize_env(config_file=None):
     global env, history
     
-    if config_file is not None:
+    if config_file is not None and config_file.strip():
         try:
             config = json.loads(config_file)
         except:
@@ -187,76 +188,80 @@ def create_news_display(obs):
     if obs['news_next_day_text']:
         news_html = f"""
         <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-                    padding: 20px; border-radius: 10px; color: white;'>
-            <h3>📰 Next Day News</h3>
-            <p style='font-size: 16px;'>{obs['news_next_day_text']}</p>
+                    padding: 20px; border-radius: 10px; color: white; margin: 10px 0;'>
+            <h3 style='margin-top: 0;'>📰 Next Day News</h3>
+            <p style='font-size: 16px; line-height: 1.6;'>{obs['news_next_day_text']}</p>
         """
         if obs['news_next_day']:
-            news_html += "<p style='font-size: 14px; margin-top: 10px;'><b>Variable Changes:</b> "
+            news_html += "<p style='font-size: 14px; margin-top: 10px;'><b>Variable Changes:</b><br/>"
             for i, var in enumerate(env.variables):
                 change = obs['news_next_day'][i]
-                news_html += f"{var}: {'+' if change > 0 else ''}{change} | "
+                news_html += f"• {var}: <b>{'+' if change > 0 else ''}{change}</b><br/>"
             news_html += "</p>"
         news_html += "</div>"
         return news_html
     else:
-        return "<div style='padding: 20px; background: #f0f0f0; border-radius: 10px;'>No more news available</div>"
+        return "<div style='padding: 20px; background: #f0f0f0; border-radius: 10px; text-align: center;'>📭 No more news available</div>"
 
 def create_price_chart():
-    """Create price history chart"""
+    """Create price history chart using matplotlib"""
     if len(history) <= 1:
-        return None
+        fig, ax = plt.subplots(figsize=(10, 6))
+        ax.text(0.5, 0.5, 'Trade to see price history', 
+                ha='center', va='center', fontsize=14, color='gray')
+        ax.axis('off')
+        return fig
     
     df = pd.DataFrame(history)
     
-    fig = go.Figure()
+    fig, ax = plt.subplots(figsize=(10, 6))
     colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
     
     for i, stock in enumerate(env.stocks):
-        fig.add_trace(go.Scatter(
-            x=df['day'],
-            y=df[stock],
-            mode='lines+markers',
-            name=stock,
-            line=dict(width=3, color=colors[i % len(colors)])
-        ))
-    
-    fig.update_layout(
-        title='Stock Price History',
-        xaxis_title='Day',
-        yaxis_title='Price ($)',
-        hovermode='x unified',
-        template='plotly_white',
-        height=400
-    )
+        ax.plot(df['day'], df[stock], marker='o', linewidth=2, 
+                color=colors[i % len(colors)], label=stock)
+    
+    ax.set_xlabel('Day', fontsize=12, fontweight='bold')
+    ax.set_ylabel('Price ($)', fontsize=12, fontweight='bold')
+    ax.set_title('Stock Price History', fontsize=14, fontweight='bold', pad=20)
+    ax.legend(loc='best', framealpha=0.9)
+    ax.grid(True, alpha=0.3)
+    ax.set_facecolor('#f8f9fa')
+    fig.patch.set_facecolor('white')
+    plt.tight_layout()
     
     return fig
 
 def create_value_chart():
-    """Create portfolio value chart"""
+    """Create portfolio value chart using matplotlib"""
     if len(history) <= 1:
-        return None
+        fig, ax = plt.subplots(figsize=(10, 6))
+        ax.text(0.5, 0.5, 'Trade to see portfolio value', 
+                ha='center', va='center', fontsize=14, color='gray')
+        ax.axis('off')
+        return fig
     
     df = pd.DataFrame(history)
     
-    fig = go.Figure()
-    fig.add_trace(go.Scatter(
-        x=df['day'],
-        y=df['total_value'],
-        mode='lines+markers',
-        name='Portfolio Value',
-        line=dict(width=4, color='#8b5cf6'),
-        fill='tozeroy',
-        fillcolor='rgba(139, 92, 246, 0.1)'
-    ))
-    
-    fig.update_layout(
-        title='Portfolio Value Over Time',
-        xaxis_title='Day',
-        yaxis_title='Total Value ($)',
-        template='plotly_white',
-        height=400
-    )
+    fig, ax = plt.subplots(figsize=(10, 6))
+    ax.plot(df['day'], df['total_value'], marker='o', linewidth=3, 
+            color='#8b5cf6', label='Portfolio Value')
+    ax.fill_between(df['day'], df['total_value'], alpha=0.2, color='#8b5cf6')
+    
+    ax.set_xlabel('Day', fontsize=12, fontweight='bold')
+    ax.set_ylabel('Total Value ($)', fontsize=12, fontweight='bold')
+    ax.set_title('Portfolio Value Over Time', fontsize=14, fontweight='bold', pad=20)
+    ax.legend(loc='best', framealpha=0.9)
+    ax.grid(True, alpha=0.3)
+    ax.set_facecolor('#f8f9fa')
+    fig.patch.set_facecolor('white')
+    
+    # Add initial value line
+    initial_value = history[0]['total_value']
+    ax.axhline(y=initial_value, color='red', linestyle='--', alpha=0.5, label=f'Initial: ${initial_value:.2f}')
+    ax.legend(loc='best', framealpha=0.9)
+    
+    plt.tight_layout()
     
     return fig
 
@@ -286,18 +291,18 @@ def execute_trade(stock, action, amount):
             revenue = env.prices[idx] * qty
             env.positions[idx] -= qty
             env.cash += revenue
-            status = f"✅ Sold {qty} shares of {stock} at ${env.prices[idx]:.2f}"
+            status = f"✅ Sold {qty} shares of {stock} at ${env.prices[idx]:.2f}\n💰 Revenue: ${revenue:.2f}"
         else:  # Buy
             idx = env.stocks.index(stock)
             cost = env.prices[idx] * amount
             if cost > env.cash:
-                return f"❌ Insufficient cash! Need ${cost:.2f}, have ${env.cash:.2f}", None, None, None, None
+                return f"❌ Insufficient cash!\n💵 Need: ${cost:.2f}\n💰 Have: ${env.cash:.2f}", None, None, None, None
             env.positions[idx] += amount
             env.cash -= cost
-            status = f"✅ Bought {amount} shares of {stock} at ${env.prices[idx]:.2f}"
+            status = f"✅ Bought {amount} shares of {stock} at ${env.prices[idx]:.2f}\n💵 Cost: ${cost:.2f}"
         
         obs = env._get_observation()
-        status += f"\n💰 Cash: ${obs['cash']:.2f}\n📊 Total Value: ${obs['total_value']:.2f}"
+        status += f"\n\n📊 Current Status:\n💰 Cash: ${obs['cash']:.2f}\n📈 Total Value: ${obs['total_value']:.2f}"
         
         return (
             status,
@@ -328,9 +333,18 @@ def advance_day():
         })
         
         if done:
-            status = f"🏁 Simulation Complete!\n📅 Final Day: {obs['day']}\n💰 Final Cash: ${obs['cash']:.2f}\n📊 Final Value: ${obs['total_value']:.2f}"
+            initial_value = history[0]['total_value']
+            profit = obs['total_value'] - initial_value
+            profit_pct = (profit / initial_value) * 100
+            status = f"🏁 Simulation Complete!\n\n"
+            status += f"📅 Final Day: {obs['day']}\n"
+            status += f"💰 Final Cash: ${obs['cash']:.2f}\n"
+            status += f"📊 Final Value: ${obs['total_value']:.2f}\n\n"
+            status += f"{'📈' if profit >= 0 else '📉'} P&L: ${profit:+.2f} ({profit_pct:+.2f}%)"
         else:
-            status = f"✅ Advanced to Day {obs['day']}\n💰 Cash: ${obs['cash']:.2f}\n📊 Total Value: ${obs['total_value']:.2f}"
+            status = f"✅ Advanced to Day {obs['day']}\n\n"
+            status += f"💰 Cash: ${obs['cash']:.2f}\n"
+            status += f"📊 Total Value: ${obs['total_value']:.2f}"
         
         return (
             status,
@@ -357,7 +371,7 @@ def reset_env():
         **obs['prices']
     }]
     
-    status = f"🔄 Environment Reset!\n📅 Day: {obs['day']}\n💰 Cash: ${obs['cash']:.2f}\n📊 Total Value: ${obs['total_value']:.2f}"
+    status = f"🔄 Environment Reset!\n\n📅 Day: {obs['day']}\n💰 Cash: ${obs['cash']:.2f}\n📊 Total Value: ${obs['total_value']:.2f}"
     
     return (
         status,
@@ -367,13 +381,28 @@ def reset_env():
         None
     )
 
+# Custom CSS for better styling
+custom_css = """
+.gradio-container {
+    font-family: 'Arial', sans-serif;
+}
+.gr-button-primary {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+}
+.gr-button-secondary {
+    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%) !important;
+    border: none !important;
+}
+"""
+
 # Create Gradio Interface
-with gr.Blocks(theme=gr.themes.Soft(), title="AI Trading Arena") as demo:
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="AI Trading Arena") as demo:
     gr.Markdown(
         """
         # 🚀 AI Trading Arena
         ### Interactive Stock Trading Simulator
-        Upload your config or use the default configuration to start trading!
+        Test your trading strategies in a deterministic market environment!
         """
     )
     
@@ -381,16 +410,16 @@ with gr.Blocks(theme=gr.themes.Soft(), title="AI Trading Arena") as demo:
         with gr.Column(scale=1):
             gr.Markdown("## 🎮 Control Panel")
             
-            with gr.Accordion("📁 Configuration", open=True):
+            with gr.Accordion("📁 Configuration", open=False):
+                gr.Markdown("Upload your custom JSON config or leave empty to use default")
                 config_input = gr.Textbox(
-                    label="Upload Config JSON (or leave empty for default)",
-                    placeholder='Paste JSON config here or leave empty',
-                    lines=5
+                    label="Custom Config JSON",
+                    placeholder='{"num_days": 30, "stocks": ["TECH", "ENERGY"], ...}',
+                    lines=3
                 )
-                init_btn = gr.Button("🚀 Initialize/Load Config", variant="primary", size="lg")
-                reset_btn = gr.Button("🔄 Reset Environment", variant="secondary")
+                init_btn = gr.Button("🚀 Load Config", variant="primary", size="lg")
             
-            with gr.Accordion("💹 Trading", open=True):
+            with gr.Accordion("💹 Trading Operations", open=True):
                 stock_dropdown = gr.Dropdown(
                     choices=DEFAULT_CONFIG["stocks"],
                     label="Select Stock",
@@ -403,35 +432,54 @@ with gr.Blocks(theme=gr.themes.Soft(), title="AI Trading Arena") as demo:
                 )
                 amount_input = gr.Number(
                     label="Amount (shares)",
-                    value=1,
-                    minimum=1
+                    value=10,
+                    minimum=1,
+                    step=1
                 )
-                trade_btn = gr.Button("📈 Execute Trade", variant="primary")
+                trade_btn = gr.Button("📈 Execute Trade", variant="primary", size="lg")
+            
+            gr.Markdown("---")
             
-            advance_btn = gr.Button("⏭️ Advance to Next Day", variant="primary", size="lg")
+            with gr.Row():
+                advance_btn = gr.Button("⏭️ Next Day", variant="primary", size="lg")
+                reset_btn = gr.Button("🔄 Reset", variant="secondary", size="lg")
             
             status_output = gr.Textbox(
-                label="📊 Status",
-                lines=5,
-                interactive=False
+                label="📊 Status & Messages",
+                lines=8,
+                interactive=False,
+                show_copy_button=True
             )
         
         with gr.Column(scale=2):
-            gr.Markdown("## 📊 Market Overview")
+            gr.Markdown("## 📊 Market Dashboard")
             
             portfolio_table = gr.Dataframe(
-                label="Portfolio Holdings",
-                interactive=False
+                label="💼 Portfolio Holdings",
+                interactive=False,
+                wrap=True
             )
             
-            news_display = gr.HTML(label="News")
+            news_display = gr.HTML(label="📰 Market News")
+            
+            with gr.Tab("📈 Price History"):
+                price_chart = gr.Plot(label="Stock Prices Over Time")
             
-            with gr.Tabs():
-                with gr.Tab("📈 Price History"):
-                    price_chart = gr.Plot(label="Stock Prices")
-                
-                with gr.Tab("💰 Portfolio Value"):
-                    value_chart = gr.Plot(label="Total Value")
+            with gr.Tab("💰 Portfolio Value"):
+                value_chart = gr.Plot(label="Total Portfolio Value")
+    
+    gr.Markdown(
+        """
+        ---
+        ### 📖 How to Use
+        1. **Initialize**: Click "Load Config" or start with default settings
+        2. **Trade**: Select stock, choose Buy/Sell, enter amount, and execute
+        3. **Advance**: Click "Next Day" to see how news affects prices
+        4. **Monitor**: Watch your portfolio value change over time
+        
+        💡 **Tip**: Check the news preview to make informed trading decisions!
+        """
+    )
     
     # Event handlers
     init_btn.click(