🏆 Add gamification with achievements system

- 5 unlockable achievements (First Evolution, Fast Learner, Perfectionist, Speed Demon, Marathon)
- Achievement notifications with special styling
- High score tracking
- Social sharing functionality with pre-formatted text
- Achievement grid display with gradient cards
- Motivates users to push for better results
- Makes the demo more engaging and viral

app.py

@@ -19,7 +19,18 @@ state = {
     "iteration": 0,
     "running": False,
     "variants_evaluated": 0,
-    "start_time": None
+    "start_time": None,
+    "achievements": [],
+    "high_score": 0.9333
+}
+
+# Achievement definitions
+ACHIEVEMENTS = {
+    "first_evolution": {"name": "🎯 First Evolution!", "desc": "Started your first evolution", "threshold": 1},
+    "fast_learner": {"name": "⚡ Fast Learner", "desc": "Reached 95% fitness", "threshold": 0.95},
+    "perfectionist": {"name": "💎 Perfectionist", "desc": "Reached 99% fitness", "threshold": 0.99},
+    "speed_demon": {"name": "🏎️ Speed Demon", "desc": "Process 10+ variants/sec", "threshold": 10},
+    "marathon": {"name": "🏃 Marathon Runner", "desc": "Run 10+ generations", "threshold": 10}
 }
 
 # HTML for aurora effect with epic intro
@@ -312,6 +323,9 @@ def simulate_evolution():
     
     state["fitness_history"].append(new_fitness)
     
+    # Check for new achievements
+    new_achievements = check_achievements()
+    
     # Add event
     event = {
         "time": datetime.now().strftime("%H:%M:%S"),
@@ -320,6 +334,14 @@ def simulate_evolution():
     }
     state["events"].append(event)
     
+    # Add achievement events
+    for ach in new_achievements:
+        state["events"].append({
+            "time": datetime.now().strftime("%H:%M:%S"),
+            "type": "achievement",
+            "message": f"🏆 ACHIEVEMENT UNLOCKED: {ach['name']}"
+        })
+    
     return event
 
 def get_evolved_code():
@@ -393,14 +415,99 @@ def format_code_display():
     '''
     return html
 
+def check_achievements():
+    """Check and award achievements."""
+    new_achievements = []
+    
+    # First evolution
+    if state["iteration"] >= 1 and "first_evolution" not in state["achievements"]:
+        state["achievements"].append("first_evolution")
+        new_achievements.append(ACHIEVEMENTS["first_evolution"])
+    
+    # Fitness achievements
+    current_fitness = state["fitness_history"][-1] if state["fitness_history"] else 0
+    
+    if current_fitness >= 0.95 and "fast_learner" not in state["achievements"]:
+        state["achievements"].append("fast_learner")
+        new_achievements.append(ACHIEVEMENTS["fast_learner"])
+    
+    if current_fitness >= 0.99 and "perfectionist" not in state["achievements"]:
+        state["achievements"].append("perfectionist")
+        new_achievements.append(ACHIEVEMENTS["perfectionist"])
+    
+    # Speed achievement
+    if state["start_time"] and state["variants_evaluated"] > 0:
+        elapsed = time.time() - state["start_time"]
+        if elapsed > 0:
+            speed = state["variants_evaluated"] / elapsed
+            if speed >= 10 and "speed_demon" not in state["achievements"]:
+                state["achievements"].append("speed_demon")
+                new_achievements.append(ACHIEVEMENTS["speed_demon"])
+    
+    # Marathon achievement
+    if state["iteration"] >= 10 and "marathon" not in state["achievements"]:
+        state["achievements"].append("marathon")
+        new_achievements.append(ACHIEVEMENTS["marathon"])
+    
+    # Update high score
+    if current_fitness > state["high_score"]:
+        state["high_score"] = current_fitness
+    
+    return new_achievements
+
+def format_achievements():
+    """Format achievements display."""
+    html = '<div style="background: #0A0A2A; padding: 20px; border-radius: 10px;">'
+    html += '<h3 style="color: #FFD700; margin-top: 0;">🏆 Achievements</h3>'
+    html += '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;">'
+    
+    for ach_id in state["achievements"]:
+        ach = ACHIEVEMENTS.get(ach_id, {})
+        html += f'''
+        <div style="background: linear-gradient(45deg, #7B3FF2, #00AAFF); padding: 10px; border-radius: 8px; text-align: center;">
+            <div style="font-size: 24px;">{ach.get("name", "")}</div>
+            <div style="font-size: 12px; color: #FFD700;">{ach.get("desc", "")}</div>
+        </div>
+        '''
+    
+    if not state["achievements"]:
+        html += '<div style="color: #666; text-align: center; width: 100%;">Start evolving to unlock achievements!</div>'
+    
+    html += '</div>'
+    html += f'<div style="margin-top: 20px; text-align: center; color: #00FF88; font-size: 20px;">High Score: {state["high_score"]:.4f}</div>'
+    html += '</div>'
+    return html
+
+def get_share_text():
+    """Generate share text for social media."""
+    fitness = state["fitness_history"][-1] if state["fitness_history"] else 0.9333
+    achievements_count = len(state["achievements"])
+    
+    text = f"🌟 Evolution Aurora: I evolved AI to {fitness:.2%} fitness with {achievements_count} achievements unlocked! Can you beat my score?\n\n"
+    text += "Try it yourself: https://huggingface.co/spaces/Agents-MCP-Hackathon/Evolution\n"
+    text += "#EvolutionAurora #AIEvolution #HuggingFace"
+    
+    return text
+
 def format_events():
     """Format events for display."""
     html = '<div style="background: #0A0A2A; padding: 15px; border-radius: 10px; height: 300px; overflow-y: auto; font-family: monospace;">'
     
     for event in state["events"][-20:][::-1]:
-        color = "#FFD700" if event["type"] == "improvement" else "#00FF88"
-        icon = "✨" if event["type"] == "improvement" else "📊"
-        html += f'<div style="color: {color}; padding: 5px;">{icon} [{event["time"]}] {event["message"]}</div>'
+        if event["type"] == "achievement":
+            color = "#FFD700"
+            icon = "🏆"
+            style = "font-size: 16px; font-weight: bold; background: linear-gradient(45deg, #7B3FF2, #00AAFF); padding: 10px; border-radius: 5px; margin: 5px 0;"
+        elif event["type"] == "improvement":
+            color = "#00FF88"
+            icon = "✨"
+            style = "padding: 5px;"
+        else:
+            color = "#00AAFF"
+            icon = "📊"
+            style = "padding: 5px;"
+        
+        html += f'<div style="color: {color}; {style}">{icon} [{event["time"]}] {event["message"]}</div>'
     
     html += '</div>'
     return html
@@ -497,6 +604,19 @@ with gr.Blocks(
     gr.Markdown("### 🧬 Live Code Evolution")
     code_display = gr.HTML(value=format_code_display())
     
+    # Achievements Display
+    gr.Markdown("### 🏆 Achievements & Leaderboard")
+    achievements_display = gr.HTML(value=format_achievements())
+    
+    with gr.Row():
+        share_btn = gr.Button("📱 Share Your Score", variant="secondary")
+        share_text = gr.Textbox(
+            value=get_share_text(),
+            label="Copy & Share:",
+            interactive=True,
+            visible=False
+        )
+    
     with gr.Row():
         with gr.Column():
             gr.Markdown("### 🏔️ Fitness Landscape")
@@ -516,12 +636,20 @@ with gr.Blocks(
         new_state = not running
         return new_state, toggle_evolution(new_state)
     
+    def on_share():
+        return gr.update(visible=True, value=get_share_text())
+    
     toggle_btn.click(
         fn=on_toggle,
         inputs=[running_state],
         outputs=[running_state, toggle_btn]
     )
     
+    share_btn.click(
+        fn=on_share,
+        outputs=[share_text]
+    )
+    
     def update_all():
         if state["running"]:
             simulate_evolution()
@@ -541,12 +669,13 @@ with gr.Blocks(
             fitness_chart: create_fitness_chart(),
             landscape_3d: create_3d_landscape(),
             code_display: format_code_display(),
+            achievements_display: format_achievements(),
             event_log: format_events()
         }
     
     timer.tick(
         fn=update_all,
-        outputs=[fitness_display, generation_display, variants_display, speed_display, fitness_chart, landscape_3d, code_display, event_log]
+        outputs=[fitness_display, generation_display, variants_display, speed_display, fitness_chart, landscape_3d, code_display, achievements_display, event_log]
     )
     
     gr.Markdown("""