Use direct Gradio Space app

app.py

@@ -28,20 +28,20 @@ def _load_local_env(path: Path, *, override: bool = False) -> None:
 _load_local_env(ROOT_ENV, override=False)
 _load_local_env(LOCAL_ENV, override=False)
 
-from time_machine.application.container import create_container
-from time_machine.ui.gradio_app import create_app
-from time_machine.ui.realtime import realtime_voice_socket
-
-import gradio as gr
+from time_machine.application.container import create_container
+from time_machine.ui.gradio_app import create_app
+from time_machine.ui.realtime import realtime_voice_socket
+
+import gradio as gr
 from fastapi import FastAPI, WebSocket
 from fastapi.responses import JSONResponse, RedirectResponse, Response
 from fastapi.staticfiles import StaticFiles
 
 
-container = create_container()
-demo = create_app(container)
-fastapi_app = FastAPI(title="AI Time Machine")
-fastapi_app.mount("/static", StaticFiles(directory=ROOT / "static"), name="static")
+container = create_container()
+demo = create_app(container)
+fastapi_app = FastAPI(title="AI Time Machine")
+fastapi_app.mount("/static", StaticFiles(directory=ROOT / "static"), name="static")
 
 
 @fastapi_app.websocket("/realtime/voice")
@@ -77,12 +77,16 @@ async def blank_redirect():
 
 
 head = getattr(demo, "time_machine_head", None)
-app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=head)
-
-
-if __name__ == "__main__":
-    import uvicorn
-
+fastapi_app_with_gradio = gr.mount_gradio_app(fastapi_app, demo, path="/app", head=head)
+app = fastapi_app_with_gradio if os.getenv("TIME_MACHINE_FASTAPI_WRAPPER") else demo
+
+
+if __name__ == "__main__":
+    import uvicorn
+
     host = os.getenv("GRADIO_SERVER_NAME", "0.0.0.0")
-    port = int(os.getenv("GRADIO_SERVER_PORT", "7860"))
-    uvicorn.run(app, host=host, port=port)
+    port = int(os.getenv("GRADIO_SERVER_PORT", "7860"))
+    if os.getenv("TIME_MACHINE_FASTAPI_WRAPPER"):
+        uvicorn.run(fastapi_app_with_gradio, host=host, port=port)
+    else:
+        demo.launch(server_name=host, server_port=port)

src/time_machine/adapters/fixtures/fixture_immersion.py

@@ -133,14 +133,11 @@ def _palette(destination: Destination) -> tuple[str, str, str]:
 
 def _scene_svg(destination: Destination) -> str:
     primary, secondary, accent = _palette(destination)
-    title = html.escape(f"{destination.place}, {destination.year}")
-    atmosphere = html.escape(destination.atmosphere[:120])
-    return f"""<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="768" viewBox="0 0 1280 768">
+    return f"""<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="768" viewBox="0 0 1280 768">
 <defs>
 <radialGradient id="portal" cx="50%" cy="38%" r="58%"><stop offset="0" stop-color="{accent}" stop-opacity=".9"/><stop offset=".42" stop-color="{primary}" stop-opacity=".46"/><stop offset="1" stop-color="#080503"/></radialGradient>
 <linearGradient id="ground" x1="0" x2="1"><stop offset="0" stop-color="{secondary}"/><stop offset=".5" stop-color="#080503"/><stop offset="1" stop-color="{primary}"/></linearGradient>
-<filter id="blur"><feGaussianBlur stdDeviation="14"/></filter>
-</defs>
+</defs>
 <rect width="1280" height="768" fill="#080503"/>
 <rect width="1280" height="768" fill="url(#portal)"/>
 <circle cx="640" cy="320" r="210" fill="none" stroke="{accent}" stroke-width="3" opacity=".65"/>
@@ -152,10 +149,8 @@ def _scene_svg(destination: Destination) -> str:
 <path d="M930 590 L980 285 L1050 590 Z" fill="#080503"/>
 <path d="M1110 585 L1160 350 L1210 585 Z" fill="#080503"/>
 </g>
-<g filter="url(#blur)" opacity=".45"><circle cx="290" cy="165" r="80" fill="{accent}"/><circle cx="955" cy="195" r="110" fill="{primary}"/></g>
-<text x="60" y="700" fill="#f4e7c7" font-family="Georgia, serif" font-size="34">{title}</text>
-<text x="64" y="734" fill="#dcb37b" font-family="Georgia, serif" font-size="20">{atmosphere}</text>
-</svg>"""
+<g opacity=".28"><circle cx="290" cy="165" r="80" fill="{accent}"/><circle cx="955" cy="195" r="110" fill="{primary}"/></g>
+</svg>"""
 
 
 def _portrait_svg(destination: Destination, persona: Persona) -> str:

src/time_machine/ui/assets/cockpit.css

@@ -156,7 +156,7 @@ footer,
 .tte-reference-stage__image--warp {
   opacity: var(--tte-warp-opacity, 0);
   background-image: url("/static/img/travel/reference_warp_blend.png");
-  filter: saturate(1.2) contrast(1.16) brightness(1.08);
+  filter: saturate(1.06) contrast(1.06) brightness(1.03);
   transform: scale(var(--tte-warp-scale, 1.04));
 }
 
@@ -180,7 +180,7 @@ footer,
 .tm-state-launching .tte-reference-stage__image--departure,
 .tm-state-traveling .tte-reference-stage__image--departure,
 .tm-state-braking .tte-reference-stage__image--departure {
-  filter: saturate(1.04) contrast(1.08) blur(var(--tte-warp-blur, 0px));
+  filter: saturate(1.04) contrast(1.08);
   transform: scale(var(--tte-departure-scale, 1.02));
 }
 
@@ -450,33 +450,50 @@ footer,
   position: absolute;
   top: var(--sign-top, 42%);
   left: 104%;
-  min-width: 190px;
-  padding: 8px 14px 9px;
-  border: 3px solid rgba(43, 28, 17, 0.8);
-  border-radius: 6px;
+  min-width: 204px;
+  padding: 9px 18px 10px;
+  border: 4px solid rgba(49, 30, 17, 0.9);
+  border-radius: 5px;
   background:
-    linear-gradient(180deg, #47624d, #26382c);
+    linear-gradient(90deg, rgba(255, 235, 166, 0.16), transparent 18% 82%, rgba(67, 37, 18, 0.18)),
+    linear-gradient(180deg, #6a7a55 0%, #3b5039 42%, #243325 100%);
   color: #fff0cb;
-  font: 900 14px/1.05 var(--tte-heading);
-  letter-spacing: 0.08em;
+  font: 900 14px/1.08 var(--tte-heading);
+  letter-spacing: 0.05em;
   text-align: center;
   text-transform: uppercase;
   box-shadow:
-    inset 0 0 0 2px rgba(246, 216, 145, 0.35),
-    0 15px 16px rgba(57, 33, 20, 0.3);
+    inset 0 0 0 2px rgba(246, 216, 145, 0.34),
+    inset 0 12px 12px rgba(255, 239, 184, 0.12),
+    inset 0 -13px 12px rgba(17, 9, 5, 0.28),
+    0 17px 18px rgba(57, 33, 20, 0.34);
   animation: tte-sign-future var(--sign-speed, 1500ms) linear forwards;
 }
 
+.tte-era-sign::before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: 7px;
+  height: 2px;
+  border-radius: 999px;
+  background: rgba(255, 241, 194, 0.42);
+}
+
 .tte-era-sign::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 100%;
-  width: 7px;
-  height: 72px;
+  width: 9px;
+  height: 76px;
   transform: translateX(-50%);
-  border-radius: 999px;
-  background: linear-gradient(90deg, #6e3d20, #d8aa52, #6e3d20);
+  border: 2px solid rgba(45, 25, 14, 0.74);
+  border-top: 0;
+  background:
+    linear-gradient(90deg, #5a3019, #d6a14a 45%, #6e3d20);
+  box-shadow: 0 10px 10px rgba(46, 28, 18, 0.26);
 }
 
 .tte-era-sign.past {
@@ -510,11 +527,11 @@ footer,
 
 .tte-generated-world {
   position: absolute;
-  inset: -5%;
+  inset: -4%;
   z-index: 22;
   opacity: 0;
   pointer-events: none;
-  background-position: center;
+  background-position: center 42%;
   background-size: cover;
   filter: saturate(0.98) contrast(1.05);
   transform: scale(1.04);
@@ -539,18 +556,18 @@ footer,
 
 .tte-generated-person {
   position: absolute;
-  right: clamp(6%, 10vw, 15%);
-  bottom: 8%;
+  left: 50%;
+  bottom: 7%;
   z-index: 29;
   display: block;
-  width: clamp(170px, 18vw, 300px);
-  max-height: 78%;
+  width: clamp(190px, 20vw, 330px);
+  max-height: 80%;
   object-fit: contain;
   object-position: center bottom;
   opacity: 0;
   pointer-events: none;
   border-radius: 26px;
-  transform: translateY(18px) scale(0.96);
+  transform: translateX(-50%) translateY(18px) scale(0.96);
   transform-origin: 50% 100%;
   filter: drop-shadow(0 24px 20px rgba(58, 31, 17, 0.28));
   transition: opacity 900ms ease, transform 1200ms cubic-bezier(0.2, 0.9, 0.2, 1);
@@ -559,7 +576,7 @@ footer,
 .tm-has-portrait.tm-state-arrived .tte-generated-person,
 .tm-has-portrait.tm-state-conversing .tte-generated-person {
   opacity: 1;
-  transform: translateY(0) scale(1);
+  transform: translateX(-50%) translateY(0) scale(1);
 }
 
 .tte-steam-curtain {
@@ -1213,6 +1230,7 @@ footer,
   border: 3px solid rgba(54, 31, 18, 0.86);
   border-radius: 8px;
   background: rgba(255, 240, 203, 0.92);
+  color: #21130d;
   color: var(--tte-readable-ink);
   text-align: center;
   box-shadow: 0 14px 22px rgba(34, 17, 9, 0.2);
@@ -1777,9 +1795,9 @@ footer,
   }
 
   .tte-generated-person {
-    right: 3%;
+    left: 50%;
     bottom: 10%;
-    width: min(190px, 38vw);
+    width: min(210px, 42vw);
   }
 }
 

src/time_machine/ui/assets/cockpit.js

@@ -694,9 +694,9 @@ function updateRideProgress() {
   const warpMix = Math.max(0, 1 - Math.abs(progress - 0.48) / 0.28);
   cockpit.style.setProperty("--tte-progress", progress.toFixed(3));
   cockpit.style.setProperty("--tte-arrival-opacity", arrivalMix.toFixed(3));
-  cockpit.style.setProperty("--tte-warp-opacity", warpMix.toFixed(3));
+  cockpit.style.setProperty("--tte-warp-opacity", (warpMix * 0.32).toFixed(3));
   cockpit.style.setProperty("--tte-vortex-opacity", (warpMix * 0.82).toFixed(3));
-  cockpit.style.setProperty("--tte-warp-blur", `${(warpMix * 2.5).toFixed(2)}px`);
+  cockpit.style.setProperty("--tte-warp-blur", "0px");
   cockpit.style.setProperty("--tte-warp-scale", (1.04 + warpMix * 0.05).toFixed(3));
   cockpit.style.setProperty("--tte-departure-scale", (1.02 + warpMix * 0.035).toFixed(3));
   if (runtime.phase === "launching" && elapsed > 1050) {
@@ -793,9 +793,9 @@ function arriveAtDestination(destination, fallbackOnly) {
   setVisualPhase("braking");
   if (cockpit) {
     cockpit.style.setProperty("--tte-arrival-opacity", "1");
-    cockpit.style.setProperty("--tte-warp-opacity", "0.18");
+    cockpit.style.setProperty("--tte-warp-opacity", "0.06");
     cockpit.style.setProperty("--tte-vortex-opacity", "0.148");
-    cockpit.style.setProperty("--tte-warp-blur", "0.45px");
+    cockpit.style.setProperty("--tte-warp-blur", "0px");
     cockpit.style.setProperty("--tte-warp-scale", "1.049");
     cockpit.style.setProperty("--tte-departure-scale", "1.026");
   }
@@ -831,7 +831,7 @@ function imageSourceFromPayload(image) {
   if (!image || !image.image_b64 || !image.mime_type) {
     return "";
   }
-  if (!/^image\/(png|jpe?g|webp)$/i.test(image.mime_type)) {
+  if (!/^image\/(png|jpe?g|webp|svg\+xml)$/i.test(image.mime_type)) {
     return "";
   }
   return `data:${image.mime_type};base64,${image.image_b64}`;

src/time_machine/ui/gradio_app.py

@@ -1,10 +1,12 @@
-from __future__ import annotations
-
-from pathlib import Path
-import base64
-import inspect
-
-import gradio as gr
+from __future__ import annotations
+
+from pathlib import Path
+import base64
+import inspect
+import mimetypes
+import re
+
+import gradio as gr
 
 from time_machine.application.container import AppContainer
 from time_machine.ui.handlers import GradioHandlers
@@ -15,19 +17,20 @@ ASSET_DIR = Path(__file__).resolve().parent / "assets"
 
 def create_app(container: AppContainer) -> gr.Blocks:
     handlers = GradioHandlers(container)
-    css = (
-        (ASSET_DIR / "intro.css").read_text(encoding="utf-8")
-        + "\n"
-        + (ASSET_DIR / "cockpit.css").read_text(encoding="utf-8")
-    )
-    
-    bg_path = ASSET_DIR / "bg.png"
-    if bg_path.exists():
-        bg_b64 = base64.b64encode(bg_path.read_bytes()).decode("utf-8")
-        css = css.replace("url('bg.png')", f"url('data:image/png;base64,{bg_b64}')")
-
-    cockpit_html = (ASSET_DIR / "cockpit.html").read_text(encoding="utf-8")
-    intro_html = (ASSET_DIR / "intro.html").read_text(encoding="utf-8")
+    css = (
+        (ASSET_DIR / "intro.css").read_text(encoding="utf-8")
+        + "\n"
+        + (ASSET_DIR / "cockpit.css").read_text(encoding="utf-8")
+    )
+
+    bg_path = ASSET_DIR / "bg.png"
+    if bg_path.exists():
+        bg_b64 = base64.b64encode(bg_path.read_bytes()).decode("utf-8")
+        css = css.replace("url('bg.png')", f"url('data:image/png;base64,{bg_b64}')")
+    css = _inline_static_urls(css)
+
+    cockpit_html = _inline_static_urls((ASSET_DIR / "cockpit.html").read_text(encoding="utf-8"))
+    intro_html = _inline_static_urls((ASSET_DIR / "intro.html").read_text(encoding="utf-8"))
     intro_js = (ASSET_DIR / "intro.js").read_text(encoding="utf-8")
     cockpit_js = (ASSET_DIR / "cockpit.js").read_text(encoding="utf-8")
 
@@ -153,6 +156,20 @@ def create_app(container: AppContainer) -> gr.Blocks:
             outputs=[status],
         )
 
-    if "head" not in blocks_kwargs:
-        demo.time_machine_head = f"<script>{cockpit_js}</script><script>{intro_js}</script>"
-    return demo.queue()
+    if "head" not in blocks_kwargs:
+        demo.time_machine_head = f"<script>{cockpit_js}</script><script>{intro_js}</script>"
+    return demo.queue()
+
+
+def _inline_static_urls(text: str) -> str:
+    return re.sub(r"(?P<quote>['\"])/static/(?P<path>[^'\")]+)(?P=quote)", _replace_static_url, text)
+
+
+def _replace_static_url(match: re.Match[str]) -> str:
+    relative_path = match.group("path")
+    file_path = ASSET_DIR.parents[3] / "static" / relative_path
+    if not file_path.exists() or not file_path.is_file():
+        return match.group(0)
+    mime_type = mimetypes.guess_type(file_path.name)[0] or "application/octet-stream"
+    encoded = base64.b64encode(file_path.read_bytes()).decode("ascii")
+    return f"{match.group('quote')}data:{mime_type};base64,{encoded}{match.group('quote')}"