change approach to docker

Dockerfile

@@ -1,2 +1,10 @@
-FROM huggingface/competitions:latest
-CMD uvicorn competitions.app:app --host 0.0.0.0 --port 7860 --workers 1
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]

README.md

@@ -2,9 +2,8 @@
 title: AlpaSim Challenge 2026
 colorFrom: green
 colorTo: blue
-sdk: gradio
-python_version: 3.11
-app_file: app.py
+sdk: docker
+app_port: 7860
 hf_oauth: true
 hf_oauth_scopes:
   - email
@@ -12,7 +11,7 @@ hf_oauth_scopes:
 
 # AlpaSim Challenge 2026
 
-This Gradio Space hosts:
+This Docker Space serves a static landing page with an embedded Gradio app for:
 
 - team registration
 - signed-in participant registration status
@@ -63,4 +62,5 @@ Each track will award two NVIDIA DGX prizes:
 - PAI-AV track: two NVIDIA DGX prizes for the top two teams.
 - nuPlan track: two NVIDIA DGX prizes for the top two teams.
 
-The app disables Gradio SSR with `demo.launch(ssr_mode=False)`.
+The app serves the landing page from FastAPI at `/` and mounts Gradio at
+`/gradio`.

app.py

@@ -8,6 +8,9 @@ from pathlib import Path
 from typing import Any
 
 import gradio as gr
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
 
 
 API_BASE_URL = os.environ.get(
@@ -39,11 +42,12 @@ BANNER_HTML = f"""
     <a href="#timeline">Timeline</a>
     <a href="#prizes">Prizes</a>
     <a href="#organizers">Organizers</a>
+    <a href="#registration">Registration</a>
   </div>
 </div>
 <header class="alpasim-hero">
   <video autoplay muted loop playsinline preload="auto" aria-label="AlpaSim E2E Closed Loop Challenge 2026 banner">
-    <source src="/gradio_api/file={BANNER_PATH}" type="video/mp4" />
+    <source src="/{BANNER_PATH}" type="video/mp4" />
   </video>
   <div class="hero-overlay">
     <div class="hero-overlay-inner">
@@ -199,7 +203,28 @@ CHALLENGE_OVERVIEW_HTML = """
   </section>
 </main>
 """
+APP_EMBED_HTML = """
+<section id="registration" class="challenge-app">
+  <h2><span>07</span> Registration</h2>
+  <iframe
+    class="gradio-frame"
+    src="/gradio/"
+    title="AlpaSim registration, leaderboard, and review app"
+  ></iframe>
+</section>
+"""
 BANNER_CSS = """
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
 :root,
 .gradio-container {
   --bg: #ffffff;
@@ -238,7 +263,7 @@ BANNER_CSS = """
   justify-content: space-between;
   gap: 20px;
   padding: 12px 24px;
-  margin: -16px -16px 0;
+  margin: 0;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--border);
@@ -272,7 +297,7 @@ BANNER_CSS = """
 .alpasim-hero {
   position: relative;
   overflow: hidden;
-  margin: 0 -16px;
+  margin: 0;
   background: #000000;
   border-bottom: 1px solid var(--border);
 }
@@ -331,6 +356,7 @@ BANNER_CSS = """
 .challenge-info section {
   padding: 48px 0;
   border-bottom: 1px solid var(--border);
+  scroll-margin-top: 72px;
 }
 
 .challenge-info section:last-child {
@@ -496,6 +522,37 @@ BANNER_CSS = """
   margin: 0 auto;
 }
 
+.challenge-app {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px 72px;
+  scroll-margin-top: 72px;
+}
+
+.challenge-app h2 {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin: 0 0 18px;
+  font-size: 28px;
+}
+
+.challenge-app h2 span {
+  color: #76B900;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.7em;
+  letter-spacing: 0.08em;
+}
+
+.gradio-frame {
+  display: block;
+  width: 100%;
+  min-height: 940px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #ffffff;
+}
+
 @media (max-width: 720px) {
   .topline {
     align-items: flex-start;
@@ -530,11 +587,87 @@ BANNER_CSS = """
     padding: 0 18px;
   }
 
+  .challenge-info section,
+  .challenge-app {
+    scroll-margin-top: 112px;
+  }
+
+  .challenge-app {
+    padding: 48px 18px 64px;
+  }
+
+  .gradio-frame {
+    min-height: 1040px;
+  }
+
+  .identity-strip {
+    padding: 0 18px 18px;
+  }
+}
+"""
+GRADIO_CSS = """
+:root,
+.gradio-container {
+  --bg: #ffffff;
+  --panel: #f8f9fb;
+  --panel-2: #f1f3f7;
+  --border: #e4e7ec;
+  --text: #1a1d23;
+  --muted: #6b7280;
+  --button-primary-background-fill: #76B900;
+  --button-primary-background-fill-hover: #5F9500;
+  --button-primary-border-color: #76B900;
+  --button-primary-text-color: white;
+  --color-accent: #76B900;
+  --link-text-color: #1f6feb;
+  --loader-color: #76B900;
+  --slider-color: #76B900;
+  color: var(--text);
+}
+
+.gradio-container {
+  background: var(--bg);
+  max-width: none !important;
+  padding-top: 0 !important;
+}
+
+.identity-strip {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px 18px;
+}
+
+.identity-strip p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.tabs {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+@media (max-width: 720px) {
   .identity-strip {
     padding: 0 18px 18px;
   }
 }
 """
+LANDING_HTML = f"""<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AlpaSim E2E Closed Loop Challenge 2026</title>
+  <style>{BANNER_CSS}</style>
+</head>
+<body>
+{BANNER_HTML}
+{CHALLENGE_OVERVIEW_HTML}
+{APP_EMBED_HTML}
+</body>
+</html>
+"""
 
 
 def split_multivalue(value: str) -> list[str]:
@@ -563,7 +696,7 @@ def current_identity(profile: gr.OAuthProfile | None) -> str:
             "To register a team, connect this Space to your Hugging Face account. "
             "If you are already signed in on huggingface.co, this just authorizes "
             "the Space to read your Hugging Face profile. "
-            "[Connect Hugging Face account](/login/huggingface?_target_url=/)"
+            "[Connect Hugging Face account](/gradio/login/huggingface?_target_url=/gradio/)"
         )
 
     username = profile_value(profile, "preferred_username", "name")
@@ -574,7 +707,7 @@ def current_identity(profile: gr.OAuthProfile | None) -> str:
         parts.append(f"Stable HF user ID: `{user_id}`.")
     if email:
         parts.append(f"HF email: `{email}`.")
-    parts.append("[Disconnect](/logout?_target_url=/).")
+    parts.append("[Disconnect](/gradio/logout?_target_url=/gradio/).")
     return " ".join(parts)
 
 
@@ -1188,11 +1321,9 @@ def add_oauth_route_marker() -> None:
 with gr.Blocks(
     title="AlpaSim E2E Closed Loop Challenge 2026",
     theme=APP_THEME,
-    css=BANNER_CSS,
+    css=GRADIO_CSS,
 ) as demo:
     add_oauth_route_marker()
-    gr.HTML(BANNER_HTML)
-    gr.HTML(CHALLENGE_OVERVIEW_HTML)
     with gr.Group(elem_classes=["identity-strip"]):
         identity = gr.Markdown()
 
@@ -1449,5 +1580,28 @@ with gr.Blocks(
         ],
     )
 
+app = FastAPI(title="AlpaSim E2E Closed Loop Challenge 2026")
+app.mount("/assets", StaticFiles(directory=str(BANNER_DIR)), name="assets")
+
+
+@app.get("/", response_class=HTMLResponse, include_in_schema=False)
+def landing_page() -> HTMLResponse:
+    return HTMLResponse(LANDING_HTML)
+
+
+app = gr.mount_gradio_app(
+    app,
+    demo,
+    path="/gradio",
+    allowed_paths=[str(BANNER_FILE)],
+)
+
+
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False, allowed_paths=[str(BANNER_FILE)])
+    import uvicorn
+
+    uvicorn.run(
+        app,
+        host="0.0.0.0",
+        port=int(os.environ.get("PORT", "7860")),
+    )

requirements.txt

@@ -1 +1,3 @@
-gradio[oauth]>=5.0
+gradio[oauth]>=5.0,<6.0
+fastapi>=0.115
+uvicorn>=0.30