aimodelshare 0.3.94__py3-none-any.whl → 0.4.71__py3-none-any.whl

aimodelshare/moral_compass/apps/model_building_app_en.py

@@ -2480,7 +2480,6 @@ def build_final_conclusion_html(best_score, submissions, rank, first_score, feat
 
 def build_conclusion_from_state(best_score, submissions, rank, first_score, feature_set):
     return build_final_conclusion_html(best_score, submissions, rank, first_score, feature_set)
-  
 def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.Blocks":
     """
     Create (but do not launch) the model building game app.
@@ -3303,6 +3302,148 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
             color: color-mix(in srgb, var(--color-accent) 75%, var(--body-text-color) 25%);
         }
     }
+    /* ---------- NEW: Countdown & Interactive Slide Styles ---------- */
+
+    /* 1. Launch Banner (Slide 1) */
+    .launch-banner {
+        background: #111827;
+        color: #4ade80;
+        font-family: monospace;
+        text-align: center;
+        padding: 8px;
+        font-size: 0.9rem;
+        letter-spacing: 2px;
+        margin: -24px -24px 24px -24px; /* Stretch to edges of panel */
+        border-bottom: 2px solid #4ade80;
+        border-radius: var(--slide-radius-lg) var(--slide-radius-lg) 0 0;
+    }
+
+    /* 2. T-Minus Headers */
+    .t-minus-header {
+        text-align: center;
+        margin-bottom: 24px;
+        border-bottom: 2px solid var(--card-border-subtle);
+        padding-bottom: 16px;
+    }
+    
+    .t-minus-badge {
+        display: inline-block;
+        background: var(--text-main);
+        color: var(--body-background-fill);
+        padding: 6px 16px;
+        border-radius: 20px;
+        font-weight: 800;
+        font-size: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-bottom: 8px;
+    }
+
+    .t-minus-title {
+        margin: 0;
+        font-size: 2.2rem;
+        color: var(--accent-strong);
+        font-weight: 800;
+    }
+
+    /* 3. Styled Details/Summary (Click-to-reveal) */
+    details.styled-details {
+        margin-bottom: 12px;
+        background: var(--block-background-fill);
+        border-radius: 10px;
+        border: 1px solid var(--card-border-subtle);
+        overflow: hidden;
+    }
+
+    details.styled-details > summary {
+        list-style: none;
+        cursor: pointer;
+        padding: 16px;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--prose-background-fill);
+        transition: background 0.2s;
+        color: var(--text-main);
+    }
+
+    details.styled-details > summary:hover {
+        background: var(--block-background-fill);
+        color: var(--accent-strong);
+    }
+
+    /* Hide default triangle */
+    details.styled-details > summary::-webkit-details-marker {
+        display: none;
+    }
+
+    /* Custom +/- indicator */
+    details.styled-details > summary::after {
+        content: '+';
+        font-size: 1.5rem;
+        font-weight: 400;
+        color: var(--text-muted);
+    }
+
+    details.styled-details[open] > summary::after {
+        content: '−';
+        color: var(--accent-strong);
+    }
+
+    details.styled-details > div.content {
+        padding: 16px;
+        border-top: 1px solid var(--card-border-subtle);
+        background: var(--block-background-fill);
+        color: var(--text-main);
+    }
+
+    /* 4. Mock UI Widgets (for Slide 4) */
+    .widget-row { display: flex; align-items: center; margin-bottom: 8px; color: var(--text-main); font-size: 1rem; }
+    
+    .radio-circle { 
+        width: 16px; height: 16px; border-radius: 50%; 
+        border: 2px solid var(--text-muted); margin-right: 10px; display: inline-block; 
+    }
+    .radio-circle.selected { 
+        border-color: var(--accent-strong); 
+        background: radial-gradient(circle, var(--accent-strong) 40%, transparent 50%); 
+    }
+    
+    .check-square { 
+        width: 16px; height: 16px; border-radius: 4px; 
+        border: 2px solid var(--text-muted); margin-right: 10px; display: inline-block; 
+    }
+    .check-square.checked { 
+        background: var(--accent-strong); border-color: var(--accent-strong); position: relative; 
+    }
+    
+    .slider-track { 
+        height: 6px; background: var(--border-color-primary); border-radius: 3px; 
+        width: 100%; position: relative; margin: 12px 0; 
+    }
+    .slider-thumb { 
+        width: 18px; height: 18px; background: var(--accent-strong); 
+        border-radius: 50%; position: absolute; left: 20%; top: -6px; 
+        box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
+    }
+    
+    .risk-tag { 
+        background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; 
+        font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; 
+        margin-left: 8px; vertical-align: middle; font-weight: 700; 
+    }
+    
+    /* Pop-up info box inside details */
+    .info-popup {
+        background: color-mix(in srgb, var(--color-accent) 5%, transparent);
+        border-left: 4px solid var(--color-accent);
+        padding: 12px;
+        margin-top: 12px;
+        border-radius: 4px;
+        font-size: 0.95rem;
+        color: var(--text-main);
+    }
     """
 
 
@@ -3316,69 +3457,6 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
     global login_username, login_password, login_submit, login_error
     global attempts_tracker_display, team_name_state
 
-    # --- ONBOARDING INSTRUCTION BLOCKS ---
-    # These contain the exact text from your original Slides 5, 6, and 7.
-
-    # --- JIT ONBOARDING INSTRUCTIONS ---
-    html_step_1_brain = """
-    <div class='mock-ui-box' style='margin-bottom: 12px; border-left: 6px solid #4f46e5;'>
-        <h3 style='margin-top:0; color: #4f46e5;'>🎛️ Knob 1: Model Strategy (The "Brain")</h3>
-        <p>The <strong>Model Strategy</strong> uses a specific mathematical method to find patterns.</p>
-        <ul style='margin-bottom:0; padding-left: 20px; font-size: 0.95rem;'>
-            <li><strong>The Balanced Generalist:</strong> Learns broad patterns. Consistent and reliable.</li>
-            <li><strong>The Rule-Maker:</strong> Creates simple "If/Then" rules. Rigid but easy to understand.</li>
-            <li><strong>The Nearest Neighbor:</strong> Looks at history. "This case looks like Person A, so predict the same outcome."</li>
-        </ul>
-    </div>
-    """
-
-    html_step_2_complexity = """
-    <div class='mock-ui-box' style='margin-bottom: 12px; border-left: 6px solid #0ea5e9;'>
-        <h3 style='margin-top:0; color: #0ea5e9;'>🎛️ Knob 2: Complexity (Fitting Level)</h3>
-        <p>This controls how much detail the model memorizes.</p>
-        <ul style='margin-bottom:0; padding-left: 20px; font-size: 0.95rem;'>
-            <li><strong>Low (1-3):</strong> Focuses on big, obvious rules.</li>
-            <li><strong>High (8-10):</strong> Memorizes tiny details.</li>
-        </ul>
-        <div style='background: #fef2f2; border: 1px solid #fecaca; padding: 8px; border-radius: 6px; margin-top: 8px;'>
-            <p style='color:#b91c1c; font-weight:bold; margin:0; font-size:0.9em;'>
-                ⚠️ Warning: Setting this too high can cause "Overfitting" (memorizing noise).
-            </p>
-        </div>
-    </div>
-    """
-
-    html_step_3_ingredients = """
-    <div class='mock-ui-box' style='margin-bottom: 12px; border-left: 6px solid #8b5cf6;'>
-        <h3 style='margin-top:0; color: #8b5cf6;'>🧪 Knob 3: Data Ingredients</h3>
-        <p><strong>"Garbage in, garbage out."</strong> You decide what the AI sees.</p>
-        <ul style='margin-bottom:0; padding-left: 20px; font-size: 0.95rem;'>
-            <li><strong>Behavioral:</strong> Factual history (e.g., <em>Prior Crimes</em>).</li>
-            <li><strong>Demographic:</strong> Traits like <em>Race</em> or <em>Age</em>. Can introduce bias.</li>
-        </ul>
-    </div>
-    """
-
-    html_step_4_size = """
-    <div class='mock-ui-box' style='margin-bottom: 12px; border-left: 6px solid #10b981;'>
-        <h3 style='margin-top:0; color: #10b981;'>📊 Knob 4: Data Size</h3>
-        <p><strong>Small (20%):</strong> Fast. Great for testing.<br>
-        <strong>Full (100%):</strong> Slower, but most accurate.</p>
-    </div>
-    """
-
-    html_step_5_submit = """
-    <div class='mock-ui-box' style='margin-bottom: 12px; border-left: 6px solid #f59e0b; background: #fffbeb;'>
-        <h3 style='margin-top:0; color: #d97706;'>🏆 Ready to Launch</h3>
-        <p>Clicking Build & Submit will:</p>
-        <ol style='margin-bottom:10px; padding-left: 20px; font-size: 0.95rem;'>
-            <li>Train your model on the selected data.</li>
-            <li>Test it on a <strong>Hidden Vault</strong> of future cases.</li>
-            <li>Post your score to the <strong>Live Leaderboard</strong>.</li>
-        </ol>
-    </div>
-    """
-  
     with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo"), css=css) as demo:
         # Persistent top anchor for scroll-to-top navigation
         gr.HTML("<div id='app_top_anchor' style='height:0;'></div>")
@@ -3407,157 +3485,165 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
 
         # --- Briefing Slideshow (Updated with New Cards) ---
 
-        # Slide 1: From Understanding to Building (Retained as transition)
+        # Slide 1: Intro
         with gr.Column(visible=True, elem_id="slide-1") as briefing_slide_1:
             gr.Markdown("<h1 style='text-align:center;'>🔄 From Understanding to Building</h1>")
-            gr.HTML(
-                """
+            gr.HTML("""
                 <div class='slide-content'>
                 <div class='panel-box'>
                 <h3 style='font-size: 1.5rem; text-align:center; margin-top:0;'>Great progress! You've now:</h3>
-
                 <ul style='list-style: none; padding-left: 0; margin-top: 24px; margin-bottom: 24px;'>
-                    <li style='font-size: 1.1rem; font-weight: 500; margin-bottom: 12px;'>
-                        <span style='font-size: 1.5rem; vertical-align: middle;'>✅</span>
-                        Made tough decisions as a judge using AI predictions
-                    </li>
-                    <li style='font-size: 1.1rem; font-weight: 500; margin-bottom: 12px;'>
-                        <span style='font-size: 1.5rem; vertical-align: middle;'>✅</span>
-                        Learned about false positives (false alarms) and false negatives (missed warnings)
-                    </li>
-                    <li style='font-size: 1.1rem; font-weight: 500; margin-bottom: 12px;'>
-                        <span style='font-size: 1.5rem; vertical-align: middle;'>✅</span>
-                        Understood how AI works:
-                    </li>
+                    <li style='font-size: 1.1rem; font-weight: 500; margin-bottom: 12px;'>✅ Made tough decisions as a judge</li>
+                    <li style='font-size: 1.1rem; font-weight: 500; margin-bottom: 12px;'>✅ Learned about false positives and negatives</li>
+                    <li style='font-size: 1.1rem; font-weight: 500; margin-bottom: 12px;'>✅ Understood how AI works</li>
                 </ul>
-
                 <div style='background:white; padding:16px; border-radius:12px; margin:12px 0; text-align:center;'>
-                    <div style='display:inline-block; background:#dbeafe; padding:12px 16px; border-radius:8px; margin:4px;'>
-                        <h3 style='margin:0; color:#0369a1;'>INPUT</h3>
-                    </div>
-                    <div style='display:inline-block; font-size:1.5rem; margin:0 8px; color:#6b7280;'>→</div>
-                    <div style='display:inline-block; background:#fef3c7; padding:12px 16px; border-radius:8px; margin:4px;'>
-                        <h3 style='margin:0; color:#92400e;'>MODEL</h3>
-                    </div>
-                    <div style='display:inline-block; font-size:1.5rem; margin:0 8px; color:#6b7280;'>→</div>
-                    <div style='display:inline-block; background:#f0fdf4; padding:12px 16px; border-radius:8px; margin:4px;'>
-                        <h3 style='margin:0; color:#15803d;'>OUTPUT</h3>
-                    </div>
+                    <span style='background:#dbeafe; padding:8px; border-radius:4px; color:#0369a1; font-weight:bold;'>INPUT</span> → 
+                    <span style='background:#fef3c7; padding:8px; border-radius:4px; color:#92400e; font-weight:bold;'>MODEL</span> → 
+                    <span style='background:#f0fdf4; padding:8px; border-radius:4px; color:#15803d; font-weight:bold;'>OUTPUT</span>
                 </div>
-
-                <hr style='margin: 24px 0; border-top: 2px solid #c7d2fe;'>
-
-                <h3 style='font-size: 1.5rem; text-align:center;'>Now it's time to step into the shoes of an AI Engineer.</h3>
-                <p style='font-size: 1.1rem; text-align:center; margin-top: 12px;'>
-                    <strong>Your New Challenge:</strong> Build AI models that are more accurate than the one you used as a judge.
-                </p>
-                <p style='font-size: 1.1rem; text-align:center; margin-top: 12px;'>
-                    Remember: You experienced firsthand how AI predictions affect real people's lives. Use that knowledge to build something better.
-                </p>
+                <h3 style='font-size: 1.5rem; text-align:center;'>Now: Step into the shoes of an AI Engineer.</h3>
                 </div>
                 </div>
-                """
-            )
+            """)
             briefing_1_next = gr.Button("Next ▶️", variant="primary", size="lg")
 
-        # Slide 2: Card 1 (Your Engineering Mission)
+        # Slide 2: Mission
         with gr.Column(visible=False, elem_id="slide-2") as briefing_slide_2:
             gr.Markdown("<h1 style='text-align:center;'>📋 Your Mission - Build Better AI</h1>")
-            
-            gr.HTML(
-                """
+            gr.HTML("""
                 <div class='slide-content'>
                     <div class='panel-box'>
                         <h3>The Mission</h3>
-                        <p>Build an AI model that helps judges make better decisions. The model you used previously gave you imperfect advice. Your job now is to build a new model that predicts risk more accurately, providing judges with the reliable insights they need to be fair.</p>
-                        
-                        <h3>The Competition</h3>
-                        <p>To do this, you will compete against other engineers! To help you in your mission, you will join an engineering team. Your results will be tracked both individually and as a group in the Live Standings Leaderboards.</p>
-                    </div>
-
-                    <div class='leaderboard-box' style='max-width: 600px; margin: 16px auto; text-align: center; padding: 16px;'>
-                        <p style='font-size: 1.1rem; margin:0;'>You will join a team like...</p>
-                        <h3 style='font-size: 1.75rem; color: #6b7280; margin: 8px 0;'>
-                            🛡️ The Ethical Explorers
-                        </h3>
-                    </div>
-
-                    <div class='mock-ui-box'>
+                        <p>Build an AI model that helps judges make better decisions. Your job is to predict risk more accurately than the previous model.</p>
                         <h3>The Data Challenge</h3>
-                        <p>To compete, you have access to thousands of old case files. You have two distinct types of information:</p>
-                        <ol style='list-style-position: inside; padding-left: 20px;'>
-                            <li><strong>Defendant Profiles:</strong> This is like what the judge saw at the time of arrest.
-                                <ul style='margin-left: 20px; list-style-type: disc;'>
-                                    <li><em>Age, Number of Prior Offenses, Type of Charge.</em></li>
-                                </ul>
-                            </li>
-                            <li><strong>Historical Outcomes:</strong> This is what actually happened to those people later.
-                                <ul style='margin-left: 20px; list-style-type: disc;'>
-                                    <li><em>Did they re-offend within 2 years? (Yes/No)</em></li>
-                                </ul>
-                            </li>
-                        </ol>
-                        
-                        <h3>The Core Task</h3>
-                        <p>You need to teach your AI to look at the "Profiles" and accurately predict the "Outcome."</p>
-                        <p><strong>Ready to build something that could change how justice works?</strong></p>
+                        <p>You have access to thousands of old case files containing <b>Defendant Profiles</b> (Age, History) and <b>Historical Outcomes</b> (Did they re-offend?).</p>
                     </div>
                 </div>
-                """
-            )
-            
+            """)
             with gr.Row():
                 briefing_2_back = gr.Button("◀️ Back", size="lg")
                 briefing_2_next = gr.Button("Next ▶️", variant="primary", size="lg")
 
-        # Slide 3: Card 2 (What is a "Model"?)
+        # Slide 3: Concept
         with gr.Column(visible=False, elem_id="slide-3") as briefing_slide_3:
             gr.Markdown("<h1 style='text-align:center;'>🧠 What is an AI System?</h1>")
+            gr.HTML("""
+                <div class='slide-content'>
+                    <div class='panel-box'>
+                        <p>Think of an AI System as a "Prediction Machine." You assemble it using three main components:</p>
+                        <p><strong>1. The Inputs:</strong> The data you feed it (Age, Crimes).</p>
+                        <p><strong>2. The Model ("The Brain"):</strong> The math that finds patterns.</p>
+                        <p><strong>3. The Output:</strong> The prediction (Risk Level).</p>
+                    </div>
+                </div>
+            """)
+            with gr.Row():
+                briefing_3_back = gr.Button("◀️ Back", size="lg")
+                briefing_3_next = gr.Button("Next ▶️", variant="primary", size="lg")
+
+        # Slide 4: The Loop
+        with gr.Column(visible=False, elem_id="slide-4") as briefing_slide_4:
+            gr.Markdown("<h1 style='text-align:center;'>🔁 How Engineers Work — The Loop</h1>")
+            gr.HTML("""
+                <div class='slide-content'>
+                    <div class='panel-box'>
+                        <p>Real AI teams never get it right on the first try. They follow a loop: <strong>Try, Test, Learn, Repeat.</strong></p>
+                        <div class='step-visual'>
+                            <div class='step-visual-box'><b>1. Configure</b></div>→
+                            <div class='step-visual-box'><b>2. Submit</b></div>→
+                            <div class='step-visual-box'><b>3. Analyze</b></div>→
+                            <div class='step-visual-box'><b>4. Refine</b></div>
+                        </div>
+                    </div>
+                </div>
+            """)
+            # --- END FIX ---
             
-            # --- FIX FOR SLIDE 3 ---
+            with gr.Row():
+                briefing_4_back = gr.Button("◀️ Back", size="lg")
+                briefing_4_next = gr.Button("Next ▶️", variant="primary", size="lg")
+
+        with gr.Column(visible=False, elem_id="slide-5") as briefing_slide_5:
+            # --- FIX FOR SLIDE 4 ---
             # Combined all content into single gr.HTML()
             gr.HTML(
                 """
                 <div class='slide-content'>
                     <div class='panel-box'>
-                        <p>Before we start competing, let's break down exactly what you are building.</p>
-                        <h3>Think of an AI System as a "Prediction Machine."</h3>
-                        <p>You already know the flow:</p>
-                        
-                        <div style='background:white; padding:16px; border-radius:12px; margin:12px 0; text-align:center;'>
-                            <div style='display:inline-block; background:#dbeafe; padding:12px 16px; border-radius:8px; margin:4px;'>
-                                <h3 style='margin:0; color:#0369a1;'>INPUT</h3>
+                        <div class='t-minus-header'>
+                            <h2 class='t-minus-title'>SYSTEMS CHECK</h2>
+                        </div>
+            
+                        <div style='background:#eff6ff; border:1px solid #bfdbfe; padding:16px; border-radius:10px; text-align:center; margin-bottom:24px;'>
+                            <strong style='color:#1e40af; font-size:1.1rem;'>⚠️ SIMULATION MODE ACTIVE</strong>
+                            <p style='margin:8px 0 0 0; color:#1e3a8a; font-size:1.05rem; line-height:1.4;'>
+                                Below are the <b>exact 4 controls</b> you will use to build your model in the next step.<br>
+                                <b>Click each one now</b> to learn what they do before the competition starts.
+                            </p>
+                        </div>
+            
+                        <!-- 1. Model Strategy -->
+                        <details class="styled-details">
+                            <summary>1. Model Strategy (The Engine)</summary>
+                            <div class="content">
+                                <div class="widget-row"><span class="radio-circle selected"></span> <b>The Balanced Generalist</b></div>
+                                <div class="widget-row"><span class="radio-circle"></span> The Rule-Maker</div>
+                                <div class="widget-row"><span class="radio-circle"></span> The Deep Pattern-Finder</div>
+                                
+                                <div class="info-popup">
+                                    <b>In the Game:</b> You will choose one of these model strategies.<br>
+                                    <i>Tip: Start with "Balanced Generalist" for a safe, reliable baseline score.</i>
+                                </div>
                             </div>
-                            <div style='display:inline-block; font-size:1.5rem; margin:0 8px; color:#6b7280;'>→</div>
-                            <div style='display:inline-block; background:#fef3c7; padding:12px 16px; border-radius:8px; margin:4px;'>
-                                <h3 style='margin:0; color:#92400e;'>MODEL</h3>
+                        </details>
+            
+                        <!-- 2. Model Complexity -->
+                        <details class="styled-details">
+                            <summary>2. Model Complexity (Focus Level)</summary>
+                            <div class="content">
+                                <div class="slider-track"><div class="slider-thumb"></div></div>
+                                <div style="display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-muted);">
+                                    <span>Level 1 (General)</span>
+                                    <span>Level 10 (Specific)</span>
+                                </div>
+                                
+                                <div class="info-popup">
+                                    <b>In the Game:</b> You will slide this to adjust how hard the AI studies.<br>
+                                    <strong style="color:#ef4444;">⚠️ Warning:</strong> Higher isn't always better. Too high = "Overthinking" (memorizing noise).
+                                </div>
                             </div>
-                            <div style='display:inline-block; font-size:1.5rem; margin:0 8px; color:#6b7280;'>→</div>
-                            <div style='display:inline-block; background:#f0fdf4; padding:12px 16px; border-radius:8px; margin:4px;'>
-                                <h3 style='margin:0; color:#15803d;'>OUTPUT</h3>
+                        </details>
+            
+                        <!-- 3. Data Ingredients -->
+                        <details class="styled-details">
+                            <summary>3. Data Ingredients (The Fuel)</summary>
+                            <div class="content">
+                                <div class="widget-row"><span class="check-square checked"></span> <b>Prior Crimes</b></div>
+                                <div class="widget-row"><span class="check-square checked"></span> <b>Charge Degree</b></div>
+                                <div class="widget-row"><span class="check-square"></span> <b>Demographics (Race/Sex)</b> <span class="risk-tag">⚠️ RISK</span></div>
+                                
+                                <div class="info-popup">
+                                    <b>In the Game:</b> You will check boxes to decide what the AI is allowed to know.<br>
+                                    <strong style="color:#ef4444;">⚠️ Ethical Risk:</strong> You <i>can</i> use demographics to boost your score, but is it fair?
+                                </div>
                             </div>
-                        </div>
-                        
-                        <p>As an engineer, you don't need to write complex code from scratch. Instead, you assemble this machine using three main components.</p>
-                    </div>
-
-                    <div class='mock-ui-box'>
-                        <h3>The 3 Components:</h3>
-                        <p><strong>1. The Inputs (Data)</strong><br>
-                        The information you feed the machine.<br>
-                        <em>* Examples: Age, Prior Crimes, Charge Details.</em></p>
-
-                        <p><strong>2. The Model ("The Brain")</strong><br>
-                        This is the "brain" of your machine. It studies the inputs (data) and tries to figure out how things are connected to make a guess. There are different model strategies (brains) that you can choose for your machine.<br>
-                        <em>* Examples: Some "brains" or strategies only find simple rules (like flagging an email if it says 'free money). Other strategies have the ability to find deep, complex patterns (like recognizing a specific person's face in a crowd.</em></p>
-
-                        <p><strong>3. The Output (Prediction)</strong><br>
-                        The model's best guess.<br>
-                        <em>* Example: Risk Level: High or Low.</em></p>
-
-                        <hr>
-                        
-                        <p><strong>How it learns:</strong> You show the model thousands of old cases (Inputs) + what actually happened (Outcomes). It studies them to find the rules, so it can make predictions on new cases it hasn't seen before.</p>
+                        </details>
+            
+                        <!-- 4. Data Size -->
+                        <details class="styled-details">
+                            <summary>4. Data Size (Volume)</summary>
+                            <div class="content">
+                                <div class="widget-row"><span class="radio-circle selected"></span> <b>Small (20%)</b> - Fast Test</div>
+                                <div class="widget-row"><span class="radio-circle"></span> <b>Full (100%)</b> - Max Accuracy</div>
+                                
+                                <div class="info-popup">
+                                    <b>In the Game:</b> You choose how much history the model reads.<br>
+                                    <i>Tip: Use "Small" to test ideas quickly. Use "Full" when you think you have a winning strategy.</i>
+                                </div>
+                            </div>
+                        </details>
+            
                     </div>
                 </div>
                 """
@@ -3565,45 +3651,51 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
             # --- END FIX ---
             
             with gr.Row():
-                briefing_3_back = gr.Button("◀️ Back", size="lg")
-                briefing_3_next = gr.Button("Next ▶️", variant="primary", size="lg")
-
-        # Slide 4: Card 3 (How Engineers Work — The Loop)
-        with gr.Column(visible=False, elem_id="slide-4") as briefing_slide_4:
-            gr.Markdown("<h1 style='text-align:center;'>🔁 How Engineers Work — The Loop</h1>")
+                briefing_5_back = gr.Button("◀️ Back", size="lg")
+                briefing_5_next = gr.Button("Next ▶️", variant="primary", size="lg")
 
-            # --- FIX FOR SLIDE 4 ---
+        # Slide 5: Card 4 (Control Knobs — The "Brain" Settings)
+        with gr.Column(visible=False, elem_id="slide-6") as briefing_slide_6:            
+            # --- FIX FOR SLIDE 5 ---
             # Combined all content into single gr.HTML()
             gr.HTML(
                 """
                 <div class='slide-content'>
                     <div class='panel-box'>
-                        <p>Now that you know the components of a model, how do you build a better one?</p>
-                        <h3>Here is the secret:</h3>
-                        <p>Real AI teams almost never get it right on the first try. Instead, they follow a continuous loop of experimentation: <strong>Try, Test, Learn, Repeat.</strong></p>
+                        <div class='t-minus-header'>
+                            <h2 class='t-minus-title'>FINAL CLEARANCE</h2>
+                        </div>
                         
-                        <h3>The Experiment Loop:</h3>
-                        <ol style='list-style-position: inside;'>
-                            <li><strong>Build a Model:</strong> Assemble your components and get a starting prediction accuracy score.</li>
-                            <li><strong>Ask a Question:</strong> (e.g., "What happens if I change the 'Brain' type?")</li>
-                            <li><strong>Test & Compare:</strong> Did the score get better... or did it get worse?</li>
-                        </ol>
-                    </div>
-
-                    <h3>You will do the exact same thing in a competition!</h3>
-                    
-                    <div class='step-visual'>
-                        <div class='step-visual-box'><b>1. Configure</b><br/>Use Control Knobs to select Strategy and Data.</div>
-                        <div class='step-visual-arrow'>→</div>
-                        <div class='step-visual-box'><b>2. Submit</b><br/>Click "Build & Submit" to train your model.</div>
-                        <div class='step-visual-arrow'>→</div>
-                        <div class='step-visual-box'><b>3. Analyze</b><br/>Check your rank on the Live Leaderboard.</div>
-                        <div class='step-visual-arrow'>→</div>
-                        <div class='step-visual-box'><b>4. Refine</b><br/>Change one setting and submit again!</div>
-                    </div>
-                    
-                    <div class='leaderboard-box' style='text-align:center;'>
-                        <p><strong>Pro Tip:</strong> Try to change only one thing at a time. If you change too many things at once, you won't know what made your model better or worse!</p>
+                        <p style='font-size: 1.15rem; text-align:center; margin-bottom: 24px;'>
+                            <b>Anti-Cheat System Active.</b> You are cleared to begin competing.
+                        </p>
+            
+                        <div style='background:var(--prose-background-fill); padding:20px; border-radius:12px; text-align:left; margin-bottom:24px; display:flex; align-items:center; gap:16px;'>
+                            <div style='font-size:2.5rem;'>🔐</div>
+                            <div>
+                                <strong style='font-size:1.1rem;'>How to Win</strong>
+                                <p style='margin:4px 0 0 0; color:var(--text-muted); font-size:0.95rem;'>
+                                    We have hidden 20% of the cases. Your model <b>never</b> sees them.
+                                    Your final score indicates how accurate your AI system is at predicting this data.
+                                    50% prediction accuracy means your AI system predicts half of the hidden cases correctly.
+                                </p>
+                            </div>
+                        </div>
+            
+                        <div style='text-align:center; border-top:1px solid var(--card-border-subtle); padding-top:20px; margin-bottom:30px;'>
+                            <h3 style='margin:0 0 12px 0; font-size:1.2rem;'>Unlockable Ranks</h3>
+                            <div style='display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;'>
+                                <span style='padding:6px 12px; background:#f3f4f6; border-radius:20px; font-size:0.9rem;'>⭐ Rookie</span>
+                                <span style='padding:6px 12px; background:#e0e7ff; border-radius:20px; font-size:0.9rem; color:#4338ca;'>⭐⭐ Junior</span>
+                                <span style='padding:6px 12px; background:#fae8ff; border-radius:20px; font-size:0.9rem; color:#86198f;'>⭐⭐⭐ Lead Engineer</span>
+                            </div>
+                        </div>
+                        
+                        <div style='text-align:center; background: color-mix(in srgb, var(--color-accent) 10%, transparent); padding: 20px; border-radius: 12px; border: 2px solid var(--color-accent);'>
+                            <p style='margin:0 0 8px 0; font-size: 1.1rem; color: var(--text-muted);'>To start the competition:</p>
+                            <b style='color:var(--accent-strong); font-size:1.3rem;'>Click "Begin", then "Build & Submit Model"</b>
+                            <p style='margin:8px 0 0 0; font-size: 1rem;'>This will make your first submission to the leaderboard.</p>
+                        </div>
                     </div>
                 </div>
                 """
@@ -3611,13 +3703,31 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
             # --- END FIX ---
             
             with gr.Row():
-                briefing_4_back = gr.Button("◀️ Back", size="lg")
-                briefing_4_next = gr.Button("Next ▶️", variant="primary", size="lg")
+                briefing_6_back = gr.Button("◀️ Back", size="lg")
+                briefing_6_next = gr.Button("Begin Model Building ▶️", variant="primary", size="lg")
 
+        # --- End Briefing Slideshow ---
 
-        # --- MODEL BUILDING ARENA ---
-        # Note: visible=True immediately.
+
+        # Model Building App (Main Interface)
         with gr.Column(visible=False, elem_id="model-step") as model_building_step:
+            gr.Markdown("<h1 style='text-align:center;'>🛠️ Model Building Arena</h1>")
+            
+            # Status panel for initialization progress - HIDDEN
+            init_status_display = gr.HTML(value="", visible=False)
+            
+            # Banner for UI state
+
+            init_banner = gr.HTML(
+              value=(
+                  "<div class='init-banner'>"
+                  "<p class='init-banner__text'>"
+                  "⏳ Initializing data & leaderboard… you can explore but must wait for readiness to submit."
+                  "</p>"
+                  "</div>"
+              ),
+              visible=True)
+
             # Session-based authentication state objects
             # Concurrency Note: These are initialized to None/empty and populated
             # during handle_load_with_session_auth. Do NOT use os.environ here.
@@ -3644,91 +3754,110 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
             data_size_state = gr.State(DEFAULT_DATA_SIZE)
 
             rank_message_display = gr.Markdown("### Rank loading...")
-
-            # New State to track if instructions should be hidden
-            onboarding_complete_state = gr.State(False)
-                   
-            gr.Markdown("# 🛠️ Model Building Arena")
-            
-            rank_message_display = gr.HTML(visible=False) 
-
             with gr.Row():
-                # === LEFT COLUMN: Controls & Instructions ===
-                with gr.Column(scale=1, elem_classes="control-panel") as left_col:
-                    
-                    # STEP 1: Strategy (Visible Start)
-                    step_1_box = gr.Group(visible=True)
-                    with step_1_box:
-                        instr_1 = gr.HTML(html_step_1_brain) 
-                        model_type_radio = gr.Radio(
-                            label="1. Select Strategy",
-                            choices=list(MODEL_TYPES.keys()),
-                            value=DEFAULT_MODEL,
-                            interactive=True 
-                        )
-                        model_card_display = gr.Markdown(get_model_card(DEFAULT_MODEL), visible=False)
-
-                    # STEP 2: Complexity (Hidden Start)
-                    step_2_box = gr.Group(visible=False)
-                    with step_2_box:
-                        instr_2 = gr.HTML(html_step_2_complexity) 
-                        complexity_slider = gr.Slider(
-                            label="2. Set Complexity Level",
-                            minimum=1, maximum=3, step=1, value=2,
-                            interactive=True
-                        )
-
-                    # STEP 3: Ingredients (Hidden Start)
-                    step_3_box = gr.Group(visible=False)
-                    with step_3_box:
-                        instr_3 = gr.HTML(html_step_3_ingredients) 
-                        feature_set_checkbox = gr.CheckboxGroup(
-                            label="3. Select Ingredients",
-                            choices=FEATURE_SET_ALL_OPTIONS,
-                            value=DEFAULT_FEATURE_SET,
-                            interactive=True
-                        )
-
-                    # STEP 4: Data Size (Hidden Start)
-                    step_4_box = gr.Group(visible=False)
-                    with step_4_box:
-                        instr_4 = gr.HTML(html_step_4_size) 
-                        data_size_radio = gr.Radio(
-                            label="4. Select Dataset Size",
-                            choices=[DEFAULT_DATA_SIZE],
-                            value=DEFAULT_DATA_SIZE,
-                            interactive=True
-                        )
+                with gr.Column(scale=1):
+
+                    model_type_radio = gr.Radio(
+                        label="1. Model Strategy",
+                        # Initialize with all possible keys so validation passes even if browser caches a high-rank selection
+                        choices=list(MODEL_TYPES.keys()), 
+                        value=DEFAULT_MODEL,
+                        interactive=False
+                    )
+                    model_card_display = gr.Markdown(get_model_card(DEFAULT_MODEL))
+
+                    gr.Markdown("---") # Separator
+
+                    complexity_slider = gr.Slider(
+                        label="2. Model Complexity (1–10)",
+                        minimum=1, maximum=3, step=1, value=2,
+                        info="Higher values allow deeper pattern learning; very high values may overfit."
+                    )
+
+                    gr.Markdown("---") # Separator
+
+                    feature_set_checkbox = gr.CheckboxGroup(
+                        label="3. Select Data Ingredients",
+                        choices=FEATURE_SET_ALL_OPTIONS,
+                        value=DEFAULT_FEATURE_SET,
+                        interactive=False,
+                        info="More ingredients unlock as you rank up!"
+                    )
+
+                    gr.Markdown("---") # Separator
+
+                    data_size_radio = gr.Radio(
+                        label="4. Data Size",
+                        choices=[DEFAULT_DATA_SIZE],
+                        value=DEFAULT_DATA_SIZE,
+                        interactive=False
+                    )
+
+                    gr.Markdown("---") # Separator
+
+                    # Attempt tracker display
+                    attempts_tracker_display = gr.HTML(
+                        value="<div style='text-align:center; padding:8px; margin:8px 0; background:#f0f9ff; border-radius:8px; border:1px solid #bae6fd;'>"
+                        "<p style='margin:0; color:#0369a1; font-weight:600; font-size:1rem;'>📊 Attempts used: 0/10</p>"
+                        "</div>",
+                        visible=True
+                    )
+
+                    submit_button = gr.Button(
+                        value="5. 🔬 Build & Submit Model",
+                        variant="primary",
+                        size="lg"
+                    )
+
+                with gr.Column(scale=1):
+                    gr.HTML(
+                        """
+                        <div class='leaderboard-box'>
+                            <h3 style='margin-top:0;'>🏆 Live Standings</h3>
+                            <p style='margin:0;'>Submit a model to see your rank.</p>
+                        </div>
+                        """
+                    )
 
-                    # STEP 5: Submit (Hidden Start)
-                    step_5_box = gr.Group(visible=False)
-                    with step_5_box:
-                        instr_5 = gr.HTML(html_step_5_submit) 
-                        attempts_tracker_display = gr.HTML(
-                             value=_build_attempts_tracker_html(0), visible=True
-                        )
-                        submit_button = gr.Button(
-                            value="🚀 Build & Submit Model", variant="primary", size="lg"
-                        )
+                    # KPI Card
+                    submission_feedback_display = gr.HTML(
+                        "<p style='text-align:center; color:#6b7280; padding:20px 0;'>Submit your first model to get feedback!</p>"
+                    )
                     
-                    # Inline Login (Hidden)
-                    login_username = gr.Textbox(label="Username", visible=False)
-                    login_password = gr.Textbox(label="Password", type="password", visible=False)
-                    login_submit = gr.Button("Sign In & Submit", variant="primary", visible=False)
-                    login_error = gr.HTML(visible=False)
-
-                # === RIGHT COLUMN: Results (Hidden Start) ===
-                with gr.Column(scale=1, visible=False) as right_col:
-                    gr.HTML("<h3 style='margin-top:0;'>🏆 Live Standings</h3>")
-                    submission_feedback_display = gr.HTML("Loading results...")
+                    # Inline Login Components (initially hidden)
+                    login_username = gr.Textbox(
+                        label="Username",
+                        placeholder="Enter your modelshare.ai username",
+                        visible=False
+                    )
+                    login_password = gr.Textbox(
+                        label="Password",
+                        type="password",
+                        placeholder="Enter your password",
+                        visible=False
+                    )
+                    login_submit = gr.Button(
+                        "Sign In & Submit",
+                        variant="primary",
+                        visible=False
+                    )
+                    login_error = gr.HTML(
+                        value="",
+                        visible=False
+                    )
+
                     with gr.Tabs():
-                        with gr.TabItem("Team"):
-                            team_leaderboard_display = gr.HTML()
-                        with gr.TabItem("Individual"):
-                            individual_leaderboard_display = gr.HTML()
-                    gr.Markdown("---")
-                    step_2_next = gr.Button("Finish & Reflect ▶️", variant="secondary")
+                        with gr.TabItem("Team Standings"):
+                            team_leaderboard_display = gr.HTML(
+                                "<p style='text-align:center; color:#6b7280; padding-top:20px;'>Submit a model to see team rankings.</p>"
+                            )
+                        with gr.TabItem("Individual Standings"):
+                            individual_leaderboard_display = gr.HTML(
+                                "<p style='text-align:center; color:#6b7280; padding-top:20px;'>Submit a model to see individual rankings.</p>"
+                            )
 
+            # REMOVED: Ethical Reminder HTML Block
+            step_2_next = gr.Button("Finish & Reflect ▶️", variant="secondary")
 
         # Conclusion Step
         with gr.Column(visible=False, elem_id="conclusion-step") as conclusion_step:
@@ -3738,12 +3867,18 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
 
         # --- Navigation Logic ---
         all_steps_nav = [
-            briefing_slide_1, briefing_slide_2, briefing_slide_3, briefing_slide_4,
+            briefing_slide_1, briefing_slide_2, briefing_slide_3,
+            briefing_slide_4, briefing_slide_5,  briefing_slide_6, 
             model_building_step, conclusion_step, loading_screen
         ]
 
         def create_nav(current_step, next_step):
+            """
+            Simplified navigation: directly switches visibility without artificial loading screen.
+            Loading screen only shown when entering arena if not yet ready.
+            """
             def _nav():
+                # Direct single-step navigation
                 updates = {next_step: gr.update(visible=True)}
                 for s in all_steps_nav:
                     if s != next_step:
@@ -3846,95 +3981,82 @@ def create_model_building_game_en_app(theme_primary_hue: str = "indigo") -> "gr.
 """
 
 
-# 2. Wire Slide 1-4 Navigation (Keep existing)
-        briefing_1_next.click(fn=create_nav(briefing_slide_1, briefing_slide_2), inputs=None, outputs=all_steps_nav, js=nav_js("slide-2", "Loading mission..."))
-        briefing_2_back.click(fn=create_nav(briefing_slide_2, briefing_slide_1), inputs=None, outputs=all_steps_nav, js=nav_js("slide-1", "Returning..."))
-        briefing_2_next.click(fn=create_nav(briefing_slide_2, briefing_slide_3), inputs=None, outputs=all_steps_nav, js=nav_js("slide-3", "Next slide..."))
-        briefing_3_back.click(fn=create_nav(briefing_slide_3, briefing_slide_2), inputs=None, outputs=all_steps_nav, js=nav_js("slide-2", "Back..."))
-        briefing_3_next.click(fn=create_nav(briefing_slide_3, briefing_slide_4), inputs=None, outputs=all_steps_nav, js=nav_js("slide-4", "Next slide..."))
-        briefing_4_back.click(fn=create_nav(briefing_slide_4, briefing_slide_3), inputs=None, outputs=all_steps_nav, js=nav_js("slide-3", "Back..."))
-
-        # 3. CRITICAL UPDATE: Slide 4 Button -> Jumps to App (model-step)
+        # Wire up slide buttons with enhanced navigation
+        briefing_1_next.click(
+            fn=create_nav(briefing_slide_1, briefing_slide_2),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-2", "Loading mission overview...")
+        )
+        briefing_2_back.click(
+            fn=create_nav(briefing_slide_2, briefing_slide_1),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-1", "Returning to introduction...")
+        )
+        briefing_2_next.click(
+            fn=create_nav(briefing_slide_2, briefing_slide_3),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-3", "Exploring model concept...")
+        )
+        briefing_3_back.click(
+            fn=create_nav(briefing_slide_3, briefing_slide_2),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-2", "Going back one step...")
+        )
+        briefing_3_next.click(
+            fn=create_nav(briefing_slide_3, briefing_slide_4),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-4", "Understanding the experiment loop...")
+        )
+        briefing_4_back.click(
+            fn=create_nav(briefing_slide_4, briefing_slide_3),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-3", "Reviewing previous concepts...")
+        )
         briefing_4_next.click(
-            fn=create_nav(briefing_slide_4, model_building_step),
-            inputs=None, 
-            outputs=all_steps_nav,
-            js=nav_js("model-step", "Entering Arena...")
+            fn=create_nav(briefing_slide_4, briefing_slide_5),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-5", "Configuring brain settings...")
         )
-
-        # --- PROGRESSIVE APP LOGIC (The New Stuff) ---
-
-        # 1. Strategy -> Unlock Step 2
-        model_type_radio.change(fn=lambda: gr.update(visible=True), outputs=step_2_box).then(
-            fn=lambda v: v, inputs=model_type_radio, outputs=model_type_state)
-
-        # 2. Complexity -> Unlock Step 3
-        complexity_slider.release(fn=lambda: gr.update(visible=True), outputs=step_3_box).then(
-            fn=lambda v: v, inputs=complexity_slider, outputs=complexity_state)
-
-        # 3. Ingredients -> Unlock Step 4
-        feature_set_checkbox.change(fn=lambda: gr.update(visible=True), outputs=step_4_box).then(
-             fn=lambda v: v, inputs=feature_set_checkbox, outputs=feature_set_state)
-        
-        # 4. Data Size -> Unlock Step 5
-        data_size_radio.change(fn=lambda: gr.update(visible=True), outputs=step_5_box).then(
-             fn=lambda v: v, inputs=data_size_radio, outputs=data_size_state)
-
-        # 5. Submit Transformation Logic
-        def on_submit_finish_onboarding():
-            return {
-                instr_1: gr.update(visible=False),
-                instr_2: gr.update(visible=False),
-                instr_3: gr.update(visible=False),
-                instr_4: gr.update(visible=False),
-                instr_5: gr.update(visible=False),
-                right_col: gr.update(visible=True), 
-                model_card_display: gr.update(visible=True),
-                onboarding_complete_state: True
-            }
-
-        # 6. Wire Submit Button
-        submit_button.click(
-            fn=run_experiment,
-            inputs=[
-                model_type_state, complexity_state, feature_set_state, data_size_state,
-                team_name_state, last_submission_score_state, last_rank_state,
-                submission_count_state, first_submission_score_state, best_score_state,
-                username_state, token_state, readiness_state, was_preview_state
-            ],
-            outputs=[
-                submission_feedback_display, team_leaderboard_display, individual_leaderboard_display,
-                last_submission_score_state, last_rank_state, best_score_state,
-                submission_count_state, first_submission_score_state, rank_message_display,
-                model_type_radio, complexity_slider, feature_set_checkbox, data_size_radio,
-                submit_button, login_username, login_password, login_submit, login_error,
-                attempts_tracker_display, was_preview_state, kpi_meta_state, last_seen_ts_state
-            ]
-        ).then(
-            fn=on_submit_finish_onboarding,
-            outputs=[instr_1, instr_2, instr_3, instr_4, instr_5, right_col, model_card_display, onboarding_complete_state]
+        briefing_5_back.click(
+            fn=create_nav(briefing_slide_5, briefing_slide_4),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("slide-4", "System check...")
+        )
+        briefing_5_next.click(
+            fn=create_nav(briefing_slide_5,briefing_slide_6),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("model-step", "Final Clearance...")
+        )
+        briefing_6_back.click(
+            fn=create_nav(briefing_slide_6, briefing_slide_5),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("model-step", "Entering model arena...")
+        )
+        briefing_6_next.click(
+            fn=create_nav(briefing_slide_6, model_building_step),
+            inputs=None, outputs=all_steps_nav,
+            js=nav_js("model-step", "Entering model arena...")
         )
 
-        # 7. Finish Button Logic
-        def finalize_and_show_conclusion(best_score, submissions, rank, first_score, feature_set):
-            html = build_final_conclusion_html(best_score, submissions, rank, first_score, feature_set)
-            # Use create_nav helper to ensure clean switching
-            updates = create_nav(model_building_step, conclusion_step)()
-            updates[final_score_display] = gr.update(value=html)
-            return updates
-
+        # App -> Conclusion
         step_2_next.click(
             fn=finalize_and_show_conclusion,
-            inputs=[best_score_state, submission_count_state, last_rank_state, first_submission_score_state, feature_set_state],
+            inputs=[
+                best_score_state,
+                submission_count_state,
+                last_rank_state,
+                first_submission_score_state,
+                feature_set_state
+            ],
             outputs=all_steps_nav + [final_score_display],
-            js=nav_js("conclusion-step", "Generating summary...")
+            js=nav_js("conclusion-step", "Generating performance summary...")
         )
 
-        # Back from conclusion
+        # Conclusion -> App
         step_3_back.click(
             fn=create_nav(conclusion_step, model_building_step),
             inputs=None, outputs=all_steps_nav,
-            js=nav_js("model-step", "Returning...")
+            js=nav_js("model-step", "Returning to experiment workspace...")
         )
 
         # Events
@@ -4163,5 +4285,6 @@ def launch_model_building_game_en_app(height: int = 1200, share: bool = False, d
         X_TRAIN_RAW, X_TEST_RAW, Y_TRAIN, Y_TEST = load_and_prep_data()
 
     demo = create_model_building_game_en_app()
+
     port = int(os.environ.get("PORT", 8080))
     demo.launch(share=share, inline=True, debug=debug, height=height, server_port=port)