Update app.py

app.py

@@ -888,78 +888,115 @@ def get_recommendation_with_ai(user_id, merchant, category, amount):
         print(f"Recommendation error: {error_details}")
         yield f"❌ Error: {str(e)}\n\nPlease check your API connection or try again.", None
 
-def create_rewards_comparison_chart(data: Dict) -> go.Figure:
-    """Create rewards comparison chart with proper error handling"""
+def create_rewards_comparison_chart(data):
+    """Create dual chart: current transaction + annual projection"""
     
     try:
-        cards = [data['recommended_card']]
-        rewards = [data['rewards_earned']]
-        colors = ['#667eea']
-        
-        for alt in data.get('alternatives', [])[:3]:
-            cards.append(alt['card'])
-            rewards.append(float(alt['rewards']))
-            colors.append('#a0aec0')
-        
-        if not cards or all(r == 0 for r in rewards):
-            fig = go.Figure()
-            fig.add_annotation(
-                text="No rewards data available for comparison",
-                xref="paper", yref="paper",
-                x=0.5, y=0.5, showarrow=False,
-                font=dict(size=14, color="#666")
-            )
-            fig.update_layout(
-                height=400,
-                template='plotly_white'
-            )
-            return fig
-        
-        fig = go.Figure(data=[
-            go.Bar(
-                x=cards,
-                y=rewards,
-                marker=dict(
-                    color=colors,
-                    line=dict(color='white', width=2)
-                ),
-                text=[f'${r:.2f}' for r in rewards],
-                textposition='outside',
-                hovertemplate='<b>%{x}</b><br>Rewards: $%{y:.2f}<extra></extra>'
-            )
-        ])
+        import matplotlib.pyplot as plt
+        import matplotlib
+        matplotlib.use('Agg')
+        
+        # Extract data
+        primary_card = data.get('recommended_card', 'Unknown')
+        primary_rewards = data.get('rewards_earned', 0)
+        annual_potential = data.get('annual_potential', 0)
+        
+        # Calculate transaction amount
+        transaction_amount = primary_rewards / 0.02
+        
+        # Prepare data
+        cards = [primary_card]
+        current_rewards = [primary_rewards]
+        annual_rewards = [annual_potential]
+        colors = ['#2ecc71']
+        
+        # Add alternatives
+        alternatives = data.get('alternatives', [])
+        
+        if alternatives and len(alternatives) > 0:
+            for alt in alternatives[:3]:
+                cards.append(alt.get('card', 'Unknown'))
+                current_rewards.append(alt.get('rewards', 0))
+                # Estimate annual based on current ratio
+                annual_est = (alt.get('rewards', 0) / primary_rewards) * annual_potential if primary_rewards > 0 else 0
+                annual_rewards.append(annual_est)
+                colors.append('#3498db')
+        
+        # Add baseline if only 1 card
+        if len(cards) == 1:
+            cards.extend(['Citi Double Cash', 'Chase Freedom Unlimited', 'Baseline (1%)'])
+            current_rewards.extend([
+                transaction_amount * 0.02,
+                transaction_amount * 0.015,
+                transaction_amount * 0.01
+            ])
+            annual_rewards.extend([
+                annual_potential * 1.0,  # Assuming similar rate
+                annual_potential * 0.75,
+                annual_potential * 0.5
+            ])
+            colors.extend(['#3498db', '#3498db', '#95a5a6'])
+        
+        # Create subplots
+        fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(16, 6))
+        
+        # Chart 1: Current Transaction
+        y_pos = range(len(cards))
+        bars1 = ax1.barh(y_pos, current_rewards, color=colors, edgecolor='black', linewidth=1.5, alpha=0.85)
+        
+        ax1.set_yticks(y_pos)
+        ax1.set_yticklabels(cards, fontsize=11, fontweight='bold')
+        ax1.set_xlabel('Rewards ($)', fontsize=12, fontweight='bold')
+        ax1.set_title(f'💳 This Transaction (${transaction_amount:.2f})', fontsize=13, fontweight='bold')
+        ax1.grid(axis='x', alpha=0.3, linestyle='--')
+        ax1.set_axisbelow(True)
+        
+        # Add labels
+        for i, (bar, reward) in enumerate(zip(bars1, current_rewards)):
+            label = f'⭐ ${reward:.2f}' if i == 0 else f'${reward:.2f}'
+            ax1.text(reward + max(current_rewards)*0.02, bar.get_y() + bar.get_height()/2,
+                    label, va='center', fontsize=10, fontweight='bold')
+        
+        # Chart 2: Annual Projection
+        bars2 = ax2.barh(y_pos, annual_rewards, color=colors, edgecolor='black', linewidth=1.5, alpha=0.85)
+        
+        ax2.set_yticks(y_pos)
+        ax2.set_yticklabels([''] * len(cards))  # Hide labels on second chart
+        ax2.set_xlabel('Annual Rewards ($)', fontsize=12, fontweight='bold')
+        ax2.set_title('📊 Estimated Annual Value', fontsize=13, fontweight='bold')
+        ax2.grid(axis='x', alpha=0.3, linestyle='--')
+        ax2.set_axisbelow(True)
+        
+        # Add labels
+        for i, (bar, reward) in enumerate(zip(bars2, annual_rewards)):
+            label = f'⭐ ${reward:.2f}' if i == 0 else f'${reward:.2f}'
+            ax2.text(reward + max(annual_rewards)*0.02, bar.get_y() + bar.get_height()/2,
+                    label, va='center', fontsize=10, fontweight='bold')
+        
+        # Set limits
+        ax1.set_xlim(0, max(current_rewards) * 1.15)
+        ax2.set_xlim(0, max(annual_rewards) * 1.15)
+        
+        # Add overall legend
+        from matplotlib.patches import Patch
+        legend_elements = [
+            Patch(facecolor='#2ecc71', edgecolor='black', label='⭐ Recommended'),
+            Patch(facecolor='#3498db', edgecolor='black', label='Alternatives')
+        ]
+        fig.legend(handles=legend_elements, loc='lower center', ncol=2, fontsize=11, framealpha=0.9)
         
-        fig.update_layout(
-            title={
-                'text': 'Rewards Comparison',
-                'x': 0.5,
-                'xanchor': 'center'
-            },
-            xaxis_title='Credit Card',
-            yaxis_title='Rewards Earned ($)',
-            template='plotly_white',
-            height=400,
-            showlegend=False,
-            margin=dict(t=60, b=50, l=50, r=50),
-            hovermode='x'
-        )
+        plt.tight_layout()
+        plt.subplots_adjust(bottom=0.1)
         
         return fig
-        
+    
     except Exception as e:
         print(f"Chart creation error: {e}")
-        print(traceback.format_exc())
-        
-        fig = go.Figure()
-        fig.add_annotation(
-            text=f"Error creating chart",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=14, color="red")
-        )
-        fig.update_layout(height=400, template='plotly_white')
-        return fig
+        import traceback
+        traceback.print_exc()
+        return None
 
+        
 def get_analytics_with_insights(user_id):
     """Get analytics with LLM-generated insights"""
     
@@ -1724,7 +1761,7 @@ with gr.Blocks(
             <strong>You have 5 credit cards. You're at checkout. Which one do you use?</strong><br>
             Most people pick wrong and lose <strong>$400+ per year</strong>.<br>
             Our AI agent makes the optimal choice in <strong>2 seconds</strong>.<br>
-            Powered by OpenAI <strong>GPT-4 + Gemini + Modal</strong><br>
+            Powered by <strong>OpenAI GPT-4 + Gemini + Modal</strong><br>
         </p>
         
         <div class="impact-stats">