Update app.py

app.py

@@ -154,13 +154,13 @@ def analyze_space_activity(available_spaces, repo_dir):
     return space_activity
 
 def create_status_display(space_activity):
-    """Create formatted status display for all spaces"""
-    status_display = "📊 **Current Space Status (sorted by availability):**\n\n"
+    """Create formatted status display for all spaces with proper line breaks"""
+    status_display = "📊 **Current Space Status (sorted by availability):**<br><br>"
     
     for i, space in enumerate(space_activity, 1):
-        status_display += f"{i}. **{space['space_name']}**\n"
-        status_display += f"   • Status: {space['status']}\n"
-        status_display += f"   • Last activity: {space['last_activity_str']}\n\n"
+        status_display += f"{i}. **{space['space_name']}**<br>"
+        status_display += f"&nbsp;&nbsp;&nbsp;• Status: {space['status']}<br>"
+        status_display += f"&nbsp;&nbsp;&nbsp;• Last activity: {space['last_activity_str']}<br><br>"
     
     return status_display
 
@@ -208,7 +208,7 @@ def select_space_with_boundary_check(space_activity, student_id):
     return redirect_to_space(redirect_url, selected_space, status_display)
 
 def redirect_to_space(redirect_url, selected_space, status_display):
-    """Execute redirect with detailed information display"""
+    """Display redirect information with manual click option (HF Spaces can't auto-redirect)"""
     
     if selected_space['idle_minutes'] == float('inf'):
         idle_info = "Never used (completely fresh)"
@@ -217,17 +217,17 @@ def redirect_to_space(redirect_url, selected_space, status_display):
     
     redirect_html = f"""
     <div style="max-width: 900px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
-        <div style="text-align: center; margin-bottom: 30px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px;">
-            <h1 style="margin: 0 0 10px 0;">🎯 Learning Assistant Assigned</h1>
-            <h2 style="margin: 0; font-weight: normal; opacity: 0.9;">{selected_space['space_name']}</h2>
-            <p style="margin: 10px 0 0 0; font-size: 16px;">
+        <div style="text-align: center; margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #28a745, #20c997); color: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+            <h1 style="margin: 0 0 15px 0; font-size: 28px;">🎯 Learning Assistant Assigned</h1>
+            <h2 style="margin: 0 0 10px 0; font-weight: normal; font-size: 24px;">{selected_space['space_name']}</h2>
+            <p style="margin: 0; font-size: 18px; opacity: 0.9;">
                 ✨ This space was idle for: <strong>{idle_info}</strong>
             </p>
         </div>
         
-        <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; margin-bottom: 25px; border-left: 4px solid #007bff;">
+        <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; margin-bottom: 25px; border-left: 4px solid #28a745;">
             <h3 style="margin-top: 0; color: #333;">📊 Space Selection Analysis</h3>
-            <div style="background: white; padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; overflow-x: auto; border: 1px solid #e9ecef;">
+            <div style="background: white; padding: 20px; border-radius: 8px; font-size: 14px; line-height: 1.8; border: 1px solid #e9ecef;">
 {status_display}
             </div>
             <p style="margin-bottom: 0; color: #666; font-size: 14px; margin-top: 15px;">
@@ -235,46 +235,67 @@ def redirect_to_space(redirect_url, selected_space, status_display):
             </p>
         </div>
         
-        <div style="text-align: center; background: linear-gradient(135deg, #28a745, #20c997); color: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-            <h3 style="margin-top: 0;">🔄 Redirecting to Your Learning Assistant</h3>
-            <p style="margin: 15px 0;">You will be automatically redirected in <span id="countdown">5</span> seconds.</p>
+        <div style="text-align: center; margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #2196f3, #1976d2); color: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(33,150,243,0.3);">
+            <h2 style="margin-top: 0; color: white;">🚀 Access Your Learning Assistant</h2>
+            <p style="color: rgba(255,255,255,0.9); font-size: 16px; margin-bottom: 25px;">
+                Click the button below or copy the URL to access your assigned learning assistant.
+            </p>
             
-            <div style="margin: 25px 0;">
-                <a href="{redirect_url}" 
-                   style="display: inline-block; background: rgba(255,255,255,0.2); color: white; padding: 12px 24px; 
-                          text-decoration: none; border-radius: 25px; font-weight: bold; border: 2px solid rgba(255,255,255,0.3);
-                          transition: all 0.3s ease;"
-                   onmouseover="this.style.background='rgba(255,255,255,0.3)'"
-                   onmouseout="this.style.background='rgba(255,255,255,0.2)'">
-                    Click Here if Not Redirected Automatically
-                </a>
-            </div>
+            <a href="{redirect_url}" 
+               target="_blank"
+               style="display: inline-block; background: rgba(255,255,255,0.15); color: white; 
+                      padding: 15px 30px; font-size: 18px; font-weight: bold; text-decoration: none; 
+                      border-radius: 25px; border: 2px solid rgba(255,255,255,0.3);
+                      transition: all 0.3s ease; margin-bottom: 20px;"
+               onmouseover="this.style.background='rgba(255,255,255,0.25)'; this.style.transform='translateY(-2px)'"
+               onmouseout="this.style.background='rgba(255,255,255,0.15)'; this.style.transform='translateY(0px)'">
+                Right-click → "Open in new tab"
+            </a>
             
-            <details style="margin-top: 20px; text-align: left;">
-                <summary style="cursor: pointer; color: rgba(255,255,255,0.9);">🔗 View Target URL</summary>
-                <p style="margin: 10px 0 0 0; padding: 10px; background: rgba(0,0,0,0.1); border-radius: 5px; word-break: break-all; font-family: monospace; font-size: 12px;">
+            <div style="background: rgba(0,0,0,0.1); padding: 15px; border-radius: 8px; margin-top: 15px;">
+                <p style="margin: 5px 0; color: rgba(255,255,255,0.9); font-size: 14px; font-weight: bold;">
+                    📋 Copy this URL:
+                </p>
+                <div style="background: rgba(255,255,255,0.9); color: #333; padding: 12px; border-radius: 5px; 
+                           font-family: 'Courier New', monospace; font-size: 12px; word-break: break-all; 
+                           border: 1px solid rgba(255,255,255,0.5); margin-top: 8px;"
+                     onclick="navigator.clipboard.writeText('{redirect_url}').then(() => {{ 
+                         this.style.background='#d4edda'; 
+                         this.innerHTML = '✅ URL Copied! Paste in new browser tab';
+                         setTimeout(() => {{ 
+                             this.style.background='rgba(255,255,255,0.9)'; 
+                             this.innerHTML = '{redirect_url}'; 
+                         }}, 2000);
+                     }}).catch(() => {{ 
+                         this.innerHTML = 'Click failed - please manually select and copy'; 
+                     }})"
+                     style="cursor: pointer; user-select: all;">
                     {redirect_url}
+                </div>
+                <p style="margin: 8px 0 0 0; color: rgba(255,255,255,0.8); font-size: 12px;">
+                    💡 Click the URL above to copy it automatically
                 </p>
-            </details>
+            </div>
         </div>
-    </div>
-    
-    <script>
-        let countdown = 5;
-        const countdownElement = document.getElementById('countdown');
         
-        const timer = setInterval(function() {{
-            countdown--;
-            if (countdownElement) {{
-                countdownElement.textContent = countdown;
-            }}
-            
-            if (countdown <= 0) {{
-                clearInterval(timer);
-                window.location.href = "{redirect_url}";
-            }}
-        }}, 1000);
-    </script>
+        <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
+            <h4 style="margin-top: 0; color: #856404;">📋 Alternative Access Methods</h4>
+            <div style="color: #856404; line-height: 1.6;">
+                <p><strong>Method 1:</strong> Click the blue button above (recommended)</p>
+                <p><strong>Method 2:</strong> Copy and paste this URL into a new browser tab:</p>
+                <div style="background: white; padding: 10px; border-radius: 5px; margin: 10px 0; font-family: monospace; font-size: 12px; word-break: break-all; border: 1px solid #ddd;">
+                    {redirect_url}
+                </div>
+                <p><strong>Method 3:</strong> Search for "{selected_space['space_name']}" on Hugging Face Spaces</p>
+            </div>
+        </div>
+        
+        <div style="text-align: center; padding: 20px; background: #f1f3f4; border-radius: 8px; margin-top: 20px;">
+            <p style="margin: 0; color: #5f6368; font-size: 14px;">
+                🔄 Need a different assistant? <a href="javascript:location.reload()" style="color: #1976d2; text-decoration: none;">Refresh this page</a> to get reassigned.
+            </p>
+        </div>
+    </div>
     """
     
     return gr.HTML(redirect_html)
@@ -306,7 +327,7 @@ def get_url_params(request: gr.Request):
         query_params = dict(request.query_params)
         check_id = query_params.get('check', None)
         if check_id:
-            return f"Load Distributor - Student {check_id}", check_id
+            return f"Load Distributor", check_id
         else:
             return "Load Distributor", None
     return "Load Distributor", None