Publish UMSR autonomous trainer Space

app.py

@@ -895,10 +895,59 @@ CUSTOM_CSS = """
   padding: 6px;
 }
 
-.runtime-console-panel > .live-console {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+.runtime-terminal,
+#runtime-terminal {
+  min-height: 0 !important;
+  height: 100% !important;
+  flex: 1 1 auto !important;
+  padding: 6px !important;
+}
+
+#runtime-terminal textarea,
+.runtime-terminal textarea {
+  height: 100% !important;
+  min-height: 440px !important;
+  max-height: none !important;
+  resize: none !important;
+  overflow: auto !important;
+  border: 1px solid #2a2a2a !important;
+  border-radius: 10px !important;
+  background:
+    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.02), transparent 52%),
+    #070707 !important;
+  color: #f0f0f0 !important;
+  font-family: "JetBrains Mono", "IBM Plex Mono", "Cascadia Code", "SFMono-Regular", "Fira Code", "Consolas", monospace !important;
+  font-size: 12.4px !important;
+  line-height: 1.38 !important;
+  letter-spacing: 0.01em !important;
+  padding: 10px 12px !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 12px 24px rgba(0, 0, 0, 0.52) !important;
+  scrollbar-width: thin;
+  scrollbar-color: #606060 #0a0a0a;
+}
+
+#runtime-terminal textarea::-webkit-scrollbar,
+.runtime-terminal textarea::-webkit-scrollbar {
+  width: 10px;
+}
+
+#runtime-terminal textarea::-webkit-scrollbar-track,
+.runtime-terminal textarea::-webkit-scrollbar-track {
+  background: #0b0b0b;
+}
+
+#runtime-terminal textarea::-webkit-scrollbar-thumb,
+.runtime-terminal textarea::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #5e5e5e, #444444);
+  border: 2px solid #0b0b0b;
+  border-radius: 8px;
+}
+
+#runtime-terminal .gradio-textbox label,
+.runtime-terminal .gradio-textbox label {
+  display: none !important;
 }
 
 .live-console {
@@ -1724,7 +1773,7 @@ SUBTITLE_SCRAMBLE_JS = r"""
   };
 
   const followTerminal = () => {
-    const body = document.querySelector(".live-console-body");
+    const body = document.querySelector("#runtime-terminal textarea, .runtime-terminal textarea");
     if (!body) {
       window.setTimeout(followTerminal, 150);
       return;
@@ -3132,60 +3181,13 @@ def render_runtime_stream_html(snapshot: dict[str, Any]) -> str:
         display_text = line
         if tone_class == "log-command" and line.startswith("[command]"):
             display_text = line.replace("[command]", "", 1).strip()
-        text = html.escape(display_text) if display_text else " "
-        prefix_symbol, prefix_class = runtime_prefix_for_tone(tone_class)
+        text = display_text if display_text else ""
+        prefix_symbol, _ = runtime_prefix_for_tone(tone_class)
         line_no = start_index + idx
-        rows.append(
-            "<div class='live-line "
-            + tone_class
-            + "'><span class='live-line-no'>"
-            + html.escape(str(line_no))
-            + "</span><span class='live-line-text'><span class='live-line-prefix "
-            + prefix_class
-            + "'>"
-            + html.escape(prefix_symbol)
-            + "</span>"
-            + text
-            + "</span></div>"
-        )
+        rows.append(f"{line_no:>6} {prefix_symbol} {text}")
 
     if not rows:
-        rows.append(
-            "<div class='live-line log-empty'>"
-            "<span class='live-line-no'>-</span>"
-            "<span class='live-line-text'><span class='live-line-prefix prefix-neutral'>-</span>No log lines available.</span>"
-            "</div>"
-        )
-
-    stream_parts: list[str] = [
-        stream_chip("pid", str(snapshot.get("training_pid") or "n/a"), "muted"),
-        stream_chip("exit", "n/a" if exit_code is None else str(exit_code), "muted"),
-        stream_chip("tail", str(line_count), "muted"),
-        stream_chip("total", str(total_log_lines), "muted"),
-        stream_chip("log age", log_age_text, log_age_tone),
-        stream_chip("errors", str(error_count), "fail" if error_count > 0 else "muted"),
-        stream_chip("warnings", str(warn_count), "warn" if warn_count > 0 else "muted"),
-        stream_chip("failure streak", str(failure_streak), "warn" if failure_streak > 0 else "muted"),
-        stream_chip("recording", recording_label, recording_tone),
-        stream_chip("artifacts", recording_coverage, recording_tone),
-        stream_chip("write age", recording_latest, recording_tone),
-    ]
-
-    if progress:
-        step = int(progress.get("global_step", 0) or 0)
-        max_steps = int(progress.get("max_steps", 0) or 0)
-        step_text = f"{step}/{max_steps}" if max_steps > 0 else str(step)
-        stream_parts.append(stream_chip("step", step_text, "live" if training_running else "muted"))
-        stream_parts.append(stream_chip("epoch", format_number(progress.get("epoch"), digits=3), "muted"))
-        stream_parts.append(stream_chip("loss", format_number(progress_metrics.get("loss")), "ok" if training_running else "muted"))
-        stream_parts.append(stream_chip("lr", format_number(progress_metrics.get("learning_rate"), digits=4), "muted"))
-        if bool(progress.get("distill_enabled")):
-            stream_parts.append(stream_chip("kd", format_number(progress_metrics.get("distill_kd_loss")), "live"))
-            stream_parts.append(stream_chip("temp", format_number(progress_metrics.get("distill_temperature"), digits=3), "warn"))
-    elif training_running:
-        stream_parts.append(stream_chip("telemetry", "worker warming up", "warn"))
-    elif log_age_seconds is not None and log_age_seconds > 30:
-        stream_parts.append(stream_chip("stream", "no recent writes", "warn"))
+        rows.append("     - No log lines available.")
 
     if training_running:
         artifact_state = "live"
@@ -3213,60 +3215,37 @@ def render_runtime_stream_html(snapshot: dict[str, Any]) -> str:
     elif artifact_load == 0 and line_count > 0:
         artifact_load = 8
 
-    return (
-        "<section class='live-console'>"
-        "<header class='live-console-head'>"
-        "<div class='live-head-left'>"
-        + f"<span class='live-status-dot dot-{html.escape(state_tone)}'></span>"
-        + "<div class='live-head-copy'>"
-        + "<span class='live-console-title'>Runtime Console</span>"
-        + "<span class='live-console-subtitle'>Real-time native trainer output stream</span>"
-        + "</div>"
-        + "</div>"
-        + "<div class='live-head-right'>"
-        + f"<span class='live-state-badge state-{html.escape(state_tone)}'>{html.escape(state_label)}</span>"
-        + "</div>"
-        + "</header>"
-        + "<div class='live-console-info'>"
-        + f"<span>log: {html.escape(compact_log_path)}</span>"
-        + f"<span>trigger: {html.escape(str(snapshot.get('last_trigger') or 'n/a'))}</span>"
-        + f"<span>window: {html.escape(window_text)}</span>"
-        + f"<span class='live-info-audit'>audit: {html.escape(audit_event)}</span>"
-        + "</div>"
-        + "<div class='live-console-stats'>"
-        + "".join(stream_parts)
-        + "</div>"
-        + "<div class='live-artifact live-artifact-"
-        + html.escape(artifact_state)
-        + "'>"
-        + "<div class='live-artifact-head'>"
-        + "<span class='live-artifact-title'>Live Stream Artifact</span>"
-        + "<span class='live-artifact-status'>"
-        + html.escape(artifact_status)
-        + "</span>"
-        + "</div>"
-        + "<div class='live-artifact-track' style='--artifact-load:"
-        + html.escape(str(artifact_load))
-        + "%;'>"
-        + "<span class='live-artifact-fill'></span>"
-        + "<span class='live-artifact-flow'></span>"
-        + "</div>"
-        + "<div class='live-artifact-meta'>"
-        + "<span>load "
-        + html.escape(str(artifact_load))
-        + "%</span>"
-        + "<span>log age: "
-        + html.escape(log_age_text)
-        + " | write age: "
-        + html.escape(recording_latest)
-        + "</span>"
-        + "</div>"
-        + "</div>"
-        + "<div class='live-console-body'>"
-        + "".join(rows)
-        + "</div>"
-        + "</section>"
-    )
+    stats = [
+        f"PID={snapshot.get('training_pid') or 'n/a'}",
+        f"EXIT={'n/a' if exit_code is None else exit_code}",
+        f"TAIL={line_count}",
+        f"TOTAL={total_log_lines}",
+        f"ERR={error_count}",
+        f"WARN={warn_count}",
+        f"STREAK={failure_streak}",
+        f"REC={recording_label}",
+        f"ART={recording_coverage}",
+    ]
+    if progress:
+        step = int(progress.get("global_step", 0) or 0)
+        max_steps = int(progress.get("max_steps", 0) or 0)
+        step_text = f"{step}/{max_steps}" if max_steps > 0 else str(step)
+        stats.append(f"STEP={step_text}")
+        stats.append(f"EPOCH={format_number(progress.get('epoch'), digits=3)}")
+        stats.append(f"LOSS={format_number(progress_metrics.get('loss'))}")
+        stats.append(f"LR={format_number(progress_metrics.get('learning_rate'), digits=4)}")
+        if bool(progress.get("distill_enabled")):
+            stats.append(f"KD={format_number(progress_metrics.get('distill_kd_loss'))}")
+            stats.append(f"T={format_number(progress_metrics.get('distill_temperature'), digits=3)}")
+
+    header_lines = [
+        "RUNTIME CONSOLE | Real-time native trainer output stream",
+        f"STATE={state_label} | ARTIFACT={artifact_status} | LOAD={artifact_load}% | LOG_AGE={log_age_text} | WRITE_AGE={recording_latest}",
+        f"LOG={compact_log_path} | TRIGGER={snapshot.get('last_trigger') or 'n/a'} | WINDOW={window_text} | AUDIT={audit_event}",
+        " | ".join(stats),
+        "-" * 108,
+    ]
+    return "\n".join(header_lines + rows)
 
 
 def latest_log_text(snapshot: dict[str, Any] | None = None) -> str:
@@ -3368,24 +3347,9 @@ def refresh_live_view(force_overview: bool = False) -> tuple[str, str, str, str,
             )
     except Exception as exc:
         fallback_log = (
-            "<section class='live-console'>"
-            "<header class='live-console-head'>"
-            "<div class='live-head-left'>"
-            "<span class='live-status-dot dot-fail'></span>"
-            "<div class='live-head-copy'>"
-            "<span class='live-console-title'>Runtime Console</span>"
-            "<span class='live-console-subtitle'>Real-time native trainer output stream</span>"
-            "</div>"
-            "</div>"
-            "<div class='live-head-right'>"
-            "<span class='live-state-badge state-fail'>ERROR</span>"
-            "</div>"
-            "</header>"
-            "<div class='live-console-body'>"
-            "<div class='live-line log-error'><span class='live-line-no'>!</span>"
-            "<span class='live-line-text'><span class='live-line-prefix prefix-error'>!</span>"
-            f"UI refresh error: {html.escape(str(exc))}</span></div>"
-            "</div></section>"
+            "RUNTIME CONSOLE | ERROR\n"
+            "STATE=ATTENTION | ARTIFACT=ERROR\n"
+            f"UI refresh error: {str(exc)}"
         )
         return (
             LIVE_REFRESH_CACHE.get("ops_strip", ""),
@@ -4032,7 +3996,14 @@ with gr.Blocks(title="UMSR Autonomous Trainer", **blocks_kwargs) as demo:
                     "<div class='intel-panel-head'><span>Runtime Console</span>"
                     "<span class='intel-panel-tag'>Live Feed</span></div>"
                 )
-                log_box = gr.HTML(elem_classes=["runtime-console-panel"])
+                log_box = gr.Textbox(
+                    show_label=False,
+                    elem_id="runtime-terminal",
+                    elem_classes=["runtime-terminal"],
+                    lines=26,
+                    max_lines=34,
+                    interactive=False,
+                )
             with gr.Column(scale=1, elem_classes=["side-column", "side-stack"]):
                 with gr.Accordion("Runtime Details", open=True, elem_id="runtime-details-panel", elem_classes=["side-accordion"]):
                     detail_box = gr.Markdown(elem_id="runtime-details-scroll", elem_classes=["intel-scroll", "side-scroll"])