| from __future__ import annotations
|
|
|
| import json
|
| import os
|
| import queue
|
| import threading
|
| import time
|
| from collections.abc import Iterable
|
| from dataclasses import dataclass
|
|
|
| import gradio as gr
|
| import httpx
|
|
|
| from sovereign_bench.engine import JUDGE_NAME, JUROR_PERSONAS, stream_trial
|
| from sovereign_bench.cases import CASES, get_case
|
| from sovereign_bench.models import CasePacket, EvidenceItem, TrialEvent, TrialRequest
|
|
|
|
|
| def _load_env_file() -> None:
|
| path = ".env"
|
| if not os.path.exists(path):
|
| return
|
| with open(path, encoding="utf-8") as handle:
|
| for line in handle:
|
| stripped = line.strip()
|
| if not stripped or stripped.startswith("#") or "=" not in stripped:
|
| continue
|
| key, value = stripped.split("=", 1)
|
| os.environ.setdefault(key.strip(), value.strip().strip('"').strip("'"))
|
|
|
|
|
| _load_env_file()
|
|
|
| CASE_OPTIONS = {
|
| "Trial of Socrates": "socrates",
|
| "Greg Heffley vs Mom": "greg",
|
| "Custom": "custom",
|
| }
|
|
|
| DEFAULT_MODAL_TRIAL_URL = "https://ali-j-iqbal24--trial-stream.modal.run"
|
| MIN_READ_SECONDS = 2.2
|
| WORDS_PER_SECOND = 3.2
|
| READ_BUFFER_SECONDS = 0.8
|
| MAX_READ_SECONDS = 8.5
|
|
|
| PHASE_GLYPHS = {
|
| "pretrial": "00",
|
| "intake": "01",
|
| "claims": "02",
|
| "opening": "03",
|
| "evidence": "04",
|
| "questions": "05",
|
| "deliberation": "06",
|
| "verdict": "07",
|
| "appeal": "08",
|
| }
|
|
|
| TRIAL_PROGRESS_STAGES = (
|
| ("pretrial", "Pretrial"),
|
| ("intake", "Intake"),
|
| ("claims", "Claims"),
|
| ("opening", "Opening"),
|
| ("evidence", "Evidence"),
|
| ("questions", "Questions"),
|
| ("deliberation", "Deliberation"),
|
| ("verdict", "Verdict"),
|
| )
|
|
|
| VERDICT_LABELS = {
|
| "liable": "Guilty",
|
| "not_liable": "Not Guilty",
|
| "mixed": "Mixed",
|
| "uncertain": "Uncertain",
|
| }
|
|
|
| AUDIO_PATHS = {
|
| "score": "/gradio_api/file=assets/audio/courtroom.ogg",
|
| "judgement": "/gradio_api/file=assets/audio/Judgement.ogg",
|
| "crowd": "/gradio_api/file=assets/audio/crowd_shouting.ogg",
|
| "gavel": "/gradio_api/file=assets/audio/wood_hammer_01.ogg",
|
| "wood": "/gradio_api/file=assets/audio/wood_hit_03.ogg",
|
| "steps": "/gradio_api/file=assets/audio/steps_in_wood_floor.wav",
|
| "paper": "/gradio_api/file=assets/audio/paper_sound_1.mp3",
|
| "paper_long": "/gradio_api/file=assets/audio/paper_sound_4.mp3",
|
| "select": "/gradio_api/file=assets/audio/select_001.ogg",
|
| }
|
|
|
| CSS = """
|
| :root {
|
| --ink: #23170e;
|
| --paper: #f3dfb7;
|
| --paper-dark: #c79455;
|
| --gold: #d9b060;
|
| --mahogany: #4b2119;
|
| --shadow: rgba(10, 5, 2, .6);
|
| --red: #8f2e2d;
|
| --green: #2f6f5e;
|
| --blue: #254f7a;
|
| }
|
|
|
| body,
|
| .gradio-container {
|
| margin: 0;
|
| background: #141413 !important;
|
| background-color: #141413 !important;
|
| color: var(--ink);
|
| font-family: Georgia, "Times New Roman", serif;
|
| }
|
|
|
| .gradio-container {
|
| max-width: none !important;
|
| padding: 0 !important;
|
| }
|
|
|
| .main,
|
| .contain {
|
| max-width: none !important;
|
| padding: 0 !important;
|
| background: transparent !important;
|
| }
|
|
|
| .gradio-container main,
|
| .gradio-container .wrap,
|
| .gradio-container .app,
|
| .gradio-container .html-container {
|
| background: transparent !important;
|
| padding-left: 0 !important;
|
| padding-right: 0 !important;
|
| }
|
|
|
| .docket-book-controls {
|
| position: fixed;
|
| left: 50%;
|
| top: 72px;
|
| z-index: 9999;
|
| width: min(760px, calc(100vw - 160px));
|
| max-width: none;
|
| margin: 0;
|
| padding: 0;
|
| transform: translateX(-50%) rotate(-1deg);
|
| border: 0 !important;
|
| border-radius: 0 !important;
|
| background: transparent !important;
|
| box-shadow: none !important;
|
| color: #321d10;
|
| transition: opacity .32s ease, transform .65s ease;
|
| }
|
|
|
| body.trial-has-started .docket-book-controls {
|
| opacity: 0;
|
| pointer-events: none;
|
| transform: translateX(-50%) rotateX(56deg) rotate(-1deg) scale(.45);
|
| }
|
|
|
| .docket-book-controls::before {
|
| content: none;
|
| }
|
|
|
| .docket-book-controls,
|
| .docket-book-controls > *,
|
| .docket-book-controls .form,
|
| .docket-book-controls .block,
|
| .docket-book-controls .gap,
|
| .docket-book-controls .wrap {
|
| background: transparent !important;
|
| border: 0 !important;
|
| box-shadow: none !important;
|
| }
|
|
|
| .docket-book-controls .docket-book-controls {
|
| position: static !important;
|
| left: auto !important;
|
| top: auto !important;
|
| width: 100% !important;
|
| transform: none !important;
|
| opacity: 1;
|
| pointer-events: auto;
|
| }
|
|
|
| body.trial-has-started .docket-book-controls .docket-book-controls {
|
| pointer-events: none;
|
| }
|
|
|
| .book-control-heading {
|
| margin: 0 0 6px;
|
| color: #694019;
|
| font: 900 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| letter-spacing: .08em;
|
| text-transform: uppercase;
|
| }
|
|
|
| .docket-book-controls label,
|
| .docket-book-controls span,
|
| .docket-book-controls .prose {
|
| color: #321d10 !important;
|
| }
|
|
|
| .docket-book-controls label {
|
| font-size: 11px !important;
|
| font-weight: 800 !important;
|
| }
|
|
|
| .docket-book-controls input,
|
| .docket-book-controls textarea,
|
| .docket-book-controls [role="combobox"],
|
| .docket-book-controls .wrap-inner {
|
| border-color: rgba(90, 50, 20, .24) !important;
|
| border-radius: 4px !important;
|
| background: rgba(255, 243, 207, .58) !important;
|
| color: #241509 !important;
|
| box-shadow: inset 0 1px 0 rgba(255,255,255,.24) !important;
|
| }
|
|
|
| .docket-book-controls textarea {
|
| min-height: 42px !important;
|
| }
|
|
|
| .docket-book-controls button.primary {
|
| min-height: 42px;
|
| border: 1px solid rgba(44, 21, 10, .42) !important;
|
| border-radius: 5px !important;
|
| background: #1c130d !important;
|
| color: #fff3d2 !important;
|
| box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(40, 18, 9, .28);
|
| }
|
|
|
| .docket-book-controls .book-status p {
|
| margin: 0 !important;
|
| color: #5a3519 !important;
|
| font-size: 12px;
|
| line-height: 1.25;
|
| }
|
|
|
| .court-episode-stage {
|
| --spot-x: 50%;
|
| --spot-y: 36%;
|
| position: relative;
|
| min-height: min(880px, calc(100vh - 112px));
|
| height: min(880px, calc(100vh - 112px));
|
| margin: 0;
|
| width: 100%;
|
| max-width: none;
|
| overflow: hidden;
|
| isolation: auto;
|
| color: #fff0d2;
|
| border: 0;
|
| border-radius: 0;
|
| background: transparent;
|
| box-shadow: none;
|
| }
|
|
|
| .court-episode-stage::before {
|
| content: "";
|
| display: none;
|
| }
|
|
|
| .court-episode-stage::after {
|
| content: "";
|
| display: none;
|
| }
|
|
|
| .court-episode-stage > * {
|
| position: relative;
|
| z-index: 4;
|
| }
|
|
|
| .trial-progress {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| z-index: 70;
|
| display: grid;
|
| grid-template-columns: repeat(8, minmax(0, 1fr));
|
| gap: 1px;
|
| padding: 3px clamp(10px, 2vw, 24px) 4px;
|
| border-bottom: 1px solid rgba(217, 176, 96, .2);
|
| background: rgba(23, 13, 8, .58);
|
| backdrop-filter: blur(8px);
|
| box-shadow: 0 8px 18px rgba(8, 4, 2, .22);
|
| pointer-events: none;
|
| }
|
|
|
| .trial-progress-segment {
|
| position: relative;
|
| min-width: 0;
|
| padding-top: 5px;
|
| overflow: hidden;
|
| color: rgba(244, 213, 143, .38);
|
| font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| letter-spacing: .04em;
|
| text-align: center;
|
| text-transform: uppercase;
|
| white-space: nowrap;
|
| }
|
|
|
| .trial-progress-segment::before {
|
| content: "";
|
| position: absolute;
|
| left: 3px;
|
| right: 3px;
|
| top: 0;
|
| height: 2px;
|
| border-radius: 999px;
|
| background: rgba(217, 176, 96, .18);
|
| }
|
|
|
| .trial-progress-segment.complete {
|
| color: rgba(217, 176, 96, .68);
|
| }
|
|
|
| .trial-progress-segment.complete::before {
|
| background: rgba(217, 176, 96, .48);
|
| }
|
|
|
| .trial-progress-segment.current {
|
| color: #ffe6a6;
|
| text-shadow: 0 0 10px rgba(255, 211, 116, .52);
|
| }
|
|
|
| .trial-progress-segment.current::before {
|
| height: 3px;
|
| background: #ffd675;
|
| box-shadow: 0 0 12px rgba(255, 214, 117, .68);
|
| }
|
|
|
| .trial-progress-abbrev {
|
| display: none;
|
| }
|
|
|
| .episode-room {
|
| position: absolute;
|
| inset: 0;
|
| z-index: 3;
|
| background:
|
| url('/gradio_api/file=assets/background/CourtRoom.png') center center / 100% 100% no-repeat,
|
| #26120b;
|
| filter: none;
|
| transform: none;
|
| }
|
|
|
| .trial-started .episode-room,
|
| .phase-intake .episode-room,
|
| .phase-claims .episode-room,
|
| .phase-opening .episode-room,
|
| .phase-evidence .episode-room,
|
| .phase-questions .episode-room,
|
| .phase-deliberation .episode-room,
|
| .phase-verdict .episode-room,
|
| .phase-appeal .episode-room {
|
| filter: none;
|
| transform: none;
|
| }
|
|
|
| .phase-intake,
|
| .phase-appeal { --spot-x: 50%; --spot-y: 30%; }
|
| .phase-claims,
|
| .phase-opening { --spot-x: 43%; --spot-y: 66%; }
|
| .phase-evidence { --spot-x: 70%; --spot-y: 56%; }
|
| .phase-questions,
|
| .phase-verdict { --spot-x: 50%; --spot-y: 34%; }
|
| .phase-deliberation { --spot-x: 79%; --spot-y: 60%; }
|
|
|
| .episode-title {
|
| position: absolute;
|
| left: 26px;
|
| top: 22px;
|
| z-index: 9;
|
| max-width: min(780px, calc(100% - 330px));
|
| text-shadow: 0 3px 18px rgba(0, 0, 0, .75);
|
| }
|
|
|
| .episode-kicker,
|
| .prop-label,
|
| .caption-phase,
|
| .tooltip-meta,
|
| .drawer-kicker {
|
| color: #f4d58f;
|
| font: 800 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| letter-spacing: .06em;
|
| text-transform: uppercase;
|
| }
|
|
|
| .episode-title h1 {
|
| margin: 4px 0 6px;
|
| max-width: 780px;
|
| color: #fff4d7;
|
| font-size: clamp(28px, 4.2vw, 58px);
|
| line-height: .98;
|
| letter-spacing: 0;
|
| }
|
|
|
| .episode-title p {
|
| margin: 0;
|
| max-width: 720px;
|
| color: #f8dcaa;
|
| font-size: 15px;
|
| line-height: 1.38;
|
| }
|
|
|
| .audio-deck {
|
| display: none;
|
| }
|
|
|
| .sound-toggle {
|
| position: fixed;
|
| left: 18px;
|
| bottom: 18px;
|
| z-index: 80;
|
| width: 46px;
|
| height: 46px;
|
| border: 1px solid rgba(255, 226, 154, .48);
|
| border-radius: 50%;
|
| background: rgba(22, 11, 7, .82);
|
| box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
|
| cursor: pointer;
|
| }
|
|
|
| .sound-toggle:hover,
|
| .sound-toggle:focus-visible {
|
| outline: none;
|
| border-color: rgba(255, 226, 154, .82);
|
| background: rgba(41, 20, 12, .92);
|
| }
|
|
|
| .sound-toggle .sound-icon {
|
| position: absolute;
|
| left: 13px;
|
| top: 15px;
|
| width: 10px;
|
| height: 16px;
|
| border-radius: 2px 0 0 2px;
|
| background: #ffe5a6;
|
| }
|
|
|
| .sound-toggle .sound-icon::before {
|
| content: "";
|
| position: absolute;
|
| left: 7px;
|
| top: -3px;
|
| width: 14px;
|
| height: 22px;
|
| border: 3px solid #ffe5a6;
|
| border-left: 0;
|
| border-radius: 0 18px 18px 0;
|
| }
|
|
|
| .sound-toggle .sound-icon::after {
|
| content: "";
|
| position: absolute;
|
| left: 20px;
|
| top: -9px;
|
| width: 3px;
|
| height: 34px;
|
| border-radius: 4px;
|
| background: #d64d45;
|
| opacity: 0;
|
| transform: rotate(42deg);
|
| transform-origin: center;
|
| }
|
|
|
| .sound-toggle.muted .sound-icon::after {
|
| opacity: 1;
|
| }
|
|
|
| .episode-book {
|
| position: absolute;
|
| left: 50%;
|
| top: 122px;
|
| z-index: 14;
|
| width: min(980px, calc(100% - 32px));
|
| aspect-ratio: 3 / 2;
|
| transform: translateX(-50%) rotateX(0) rotateZ(-1deg);
|
| transform-origin: center bottom;
|
| color: #2b1b10;
|
| filter: drop-shadow(0 34px 36px rgba(0, 0, 0, .48));
|
| pointer-events: none;
|
| transition: top .85s ease, width .85s ease, transform .85s ease, filter .85s ease, opacity .85s ease;
|
| }
|
|
|
| .episode-book.custom-book {
|
| pointer-events: auto;
|
| }
|
|
|
| .book-art {
|
| position: absolute;
|
| inset: 0;
|
| width: 100%;
|
| height: 100%;
|
| object-fit: contain;
|
| pointer-events: none;
|
| user-select: none;
|
| transition: opacity .36s ease;
|
| }
|
|
|
| .book-art.closed-art {
|
| opacity: 0;
|
| }
|
|
|
| .episode-book.closed {
|
| top: 50%;
|
| width: min(163px, 20vw);
|
| transform: translateX(-50%) rotateX(56deg) rotateZ(1deg);
|
| opacity: .92;
|
| filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45));
|
| }
|
|
|
| .episode-book.closed .open-art {
|
| opacity: 0;
|
| }
|
|
|
| .episode-book.closed .closed-art {
|
| opacity: 1;
|
| }
|
|
|
| .episode-book.closed .book-open-content {
|
| opacity: 0;
|
| pointer-events: none;
|
| }
|
|
|
| .book-open-content {
|
| position: absolute;
|
| inset: 15% 9% 12%;
|
| z-index: 2;
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 82px;
|
| padding: 0 20px;
|
| transition: opacity .35s ease;
|
| }
|
|
|
| .book-open-content h2 {
|
| margin: 0 0 8px;
|
| color: #4c2a12;
|
| font-size: 28px;
|
| letter-spacing: 0;
|
| }
|
|
|
| .book-open-content p,
|
| .book-entry {
|
| color: #3c2615;
|
| font-size: 14px;
|
| line-height: 1.28;
|
| }
|
|
|
| .book-entry {
|
| margin: 8px 0;
|
| padding-left: 12px;
|
| border-left: 3px solid rgba(111, 61, 23, .36);
|
| }
|
|
|
| .book-context {
|
| margin-top: 8px;
|
| }
|
|
|
| .book-case-title {
|
| margin: 0 0 6px;
|
| color: #4c2a12;
|
| font-weight: 800;
|
| }
|
|
|
| .book-evidence-columns {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 12px;
|
| }
|
|
|
| .book-evidence-column h3 {
|
| margin: 0 0 6px;
|
| color: #4c2a12;
|
| font-size: 15px;
|
| line-height: 1.12;
|
| }
|
|
|
| .book-evidence-list {
|
| margin: 0;
|
| padding: 0;
|
| list-style: none;
|
| }
|
|
|
| .book-evidence-list li {
|
| margin: 0 0 6px;
|
| padding-left: 9px;
|
| border-left: 2px solid rgba(111, 61, 23, .32);
|
| color: #3c2615;
|
| font-size: 12px;
|
| line-height: 1.2;
|
| }
|
|
|
| .book-field {
|
| width: 100%;
|
| min-height: 42px;
|
| resize: none;
|
| border: 1px solid rgba(90, 50, 20, .34);
|
| border-radius: 4px;
|
| background: rgba(255, 247, 224, .7);
|
| color: #2b1b10;
|
| font: 12px/1.22 Georgia, "Times New Roman", serif;
|
| box-shadow: inset 0 1px 2px rgba(59, 29, 10, .16);
|
| pointer-events: auto;
|
| }
|
|
|
| .book-context-field {
|
| min-height: 138px;
|
| font-size: 13px;
|
| }
|
|
|
| .judge-dais {
|
| position: absolute;
|
| left: 50%;
|
| top: 27%;
|
| z-index: 6;
|
| width: min(360px, 32vw);
|
| min-width: 230px;
|
| transform: translateX(-50%);
|
| text-align: center;
|
| }
|
|
|
| .bench-front {
|
| display: none;
|
| }
|
|
|
| .gavel {
|
| display: none;
|
| }
|
|
|
| .gavel::before {
|
| content: "";
|
| display: none;
|
| }
|
|
|
| .phase-verdict .gavel {
|
| animation: gavel-hit .55s ease-out both;
|
| }
|
|
|
| .counsel-table {
|
| position: absolute;
|
| bottom: 19%;
|
| z-index: 6;
|
| width: min(255px, 22vw);
|
| height: 84px;
|
| border: 0;
|
| background: transparent;
|
| box-shadow: none;
|
| }
|
|
|
| .counsel-table.left { left: 17%; }
|
| .counsel-table.right { right: 17%; }
|
|
|
| .trial-floor-mark {
|
| display: none;
|
| }
|
|
|
| .witness-area {
|
| position: absolute;
|
| right: 8.5%;
|
| bottom: 28%;
|
| z-index: 6;
|
| width: min(190px, 18vw);
|
| height: 98px;
|
| border: 0;
|
| background: transparent;
|
| box-shadow: none;
|
| }
|
|
|
| .jury-benches {
|
| position: absolute;
|
| top: 43%;
|
| z-index: 7;
|
| width: min(220px, 16vw);
|
| min-width: 150px;
|
| display: grid;
|
| gap: 6px;
|
| }
|
|
|
| .jury-benches.left {
|
| left: 1%;
|
| }
|
|
|
| .jury-benches.right {
|
| right: 1%;
|
| }
|
|
|
| .jury-benches.left .jury-row {
|
| transform: rotate(-7deg) skewY(-3deg);
|
| }
|
|
|
| .jury-benches.right .jury-row {
|
| transform: rotate(7deg) skewY(3deg);
|
| }
|
|
|
| .jury-rail {
|
| display: none;
|
| }
|
|
|
| .jury-row {
|
| display: grid;
|
| grid-template-columns: repeat(3, 1fr);
|
| gap: 8px;
|
| align-items: end;
|
| }
|
|
|
| .gallery-benches {
|
| display: none;
|
| }
|
|
|
| .gallery-benches div {
|
| display: none;
|
| }
|
|
|
| .prop-label {
|
| display: none;
|
| }
|
|
|
| .foreground-props {
|
| position: absolute;
|
| inset: 0;
|
| z-index: 13;
|
| pointer-events: none;
|
| }
|
|
|
| .foreground-fence,
|
| .judge-table-foreground {
|
| position: absolute;
|
| display: block;
|
| max-width: none;
|
| height: auto;
|
| filter: none;
|
| opacity: 1;
|
| pointer-events: none;
|
| user-select: none;
|
| }
|
|
|
| .foreground-fence {
|
| bottom: -6.5%;
|
| width: 47%;
|
| }
|
|
|
| .foreground-fence.fence-left {
|
| left: 0;
|
| transform: translateX(-2%);
|
| }
|
|
|
| .foreground-fence.fence-right {
|
| right: 0;
|
| transform: translateX(2%);
|
| }
|
|
|
| .judge-table-foreground {
|
| left: 50%;
|
| top: 20%;
|
| z-index: 1;
|
| width: 39.1%;
|
| transform: translateX(-50%);
|
| }
|
|
|
| .puppet {
|
| --skin: #c99257;
|
| --robe: #282128;
|
| --accent: #8a2f2f;
|
| --portrait-width: 74px;
|
| --portrait-top: -14px;
|
| position: absolute;
|
| z-index: 8;
|
| width: 72px;
|
| height: 128px;
|
| transform: translate(-50%, -100%);
|
| transform-origin: center bottom;
|
| filter: none;
|
| color: inherit;
|
| text-decoration: none;
|
| }
|
|
|
| .puppet.small {
|
| width: 50px;
|
| height: 94px;
|
| --portrait-width: 54px;
|
| --portrait-top: -8px;
|
| }
|
|
|
| .puppet.active {
|
| animation: puppet-breathe 1.45s ease-in-out infinite;
|
| }
|
|
|
| .puppet.walking {
|
| animation: lawyer-walk 1.9s ease-in-out infinite;
|
| }
|
|
|
| .puppet.judge {
|
| left: 50%;
|
| top: calc(40% + 156px);
|
| --skin: #c38a55;
|
| --robe: #1b1b20;
|
| --accent: #79242a;
|
| --portrait-width: 96px;
|
| --portrait-top: -28px;
|
| }
|
|
|
| .puppet.clerk {
|
| left: 43%;
|
| top: 66%;
|
| z-index: 14;
|
| --skin: #b77b52;
|
| --robe: #365548;
|
| --accent: #2f6f5e;
|
| }
|
|
|
| .puppet.auric {
|
| left: 24%;
|
| top: 87%;
|
| --skin: #c9975d;
|
| --robe: #5b2719;
|
| --accent: #a45c25;
|
| }
|
|
|
| .speaker-auric .puppet.auric {
|
| left: 43%;
|
| top: 87%;
|
| }
|
|
|
| .puppet.sable {
|
| left: 75%;
|
| top: 87%;
|
| --skin: #a86d4a;
|
| --robe: #1d3045;
|
| --accent: #254f7a;
|
| }
|
|
|
| .speaker-sable .puppet.sable {
|
| left: 75%;
|
| top: 87%;
|
| }
|
|
|
| .puppet-portrait {
|
| position: absolute;
|
| left: 50%;
|
| top: var(--portrait-top);
|
| z-index: 3;
|
| width: var(--portrait-width);
|
| height: auto;
|
| max-height: 118px;
|
| transform: translateX(-50%);
|
| object-fit: contain;
|
| pointer-events: none;
|
| }
|
|
|
| .puppet::before {
|
| content: "";
|
| position: absolute;
|
| left: 50%;
|
| top: 0;
|
| width: 44px;
|
| height: 44px;
|
| transform: translateX(-50%);
|
| border: 2px solid rgba(255, 232, 174, .58);
|
| border-radius: 50%;
|
| background:
|
| radial-gradient(circle at 34% 32%, rgba(255,255,255,.38), transparent 22%),
|
| radial-gradient(circle at 36% 42%, #1b120c 0 2px, transparent 2.5px),
|
| radial-gradient(circle at 62% 42%, #1b120c 0 2px, transparent 2.5px),
|
| linear-gradient(180deg, var(--skin), #8b5638);
|
| }
|
|
|
| .puppet::after {
|
| content: "";
|
| position: absolute;
|
| left: 50%;
|
| top: 48px;
|
| width: 58px;
|
| height: 70px;
|
| transform: translateX(-50%);
|
| border: 1px solid rgba(255, 232, 174, .22);
|
| border-radius: 24px 24px 8px 8px;
|
| background:
|
| linear-gradient(90deg, transparent 46%, rgba(255, 226, 154, .14) 49%, transparent 52%),
|
| linear-gradient(180deg, var(--accent), var(--robe) 52%, #130a07);
|
| }
|
|
|
| .puppet.judge::before,
|
| .puppet.judge::after {
|
| display: none;
|
| }
|
|
|
| .puppet .mouth {
|
| position: absolute;
|
| left: 50%;
|
| top: 27px;
|
| z-index: 2;
|
| width: 15px;
|
| height: 7px;
|
| transform: translateX(-50%);
|
| border-bottom: 2px solid #28150c;
|
| border-radius: 0 0 18px 18px;
|
| }
|
|
|
| .puppet.judge .mouth {
|
| display: none;
|
| }
|
|
|
| .puppet.active .mouth,
|
| .puppet.walking .mouth {
|
| animation: speak-mouth .5s ease-in-out infinite;
|
| }
|
|
|
| .speech-bubble.active-dialogue {
|
| position: absolute;
|
| left: 50%;
|
| top: 43%;
|
| bottom: auto;
|
| z-index: 30;
|
| width: min(500px, calc(100vw - 44px));
|
| max-height: 34vh;
|
| overflow: visible;
|
| transform: translate(-50%, -100%);
|
| padding: 10px 13px 11px;
|
| border: 2px solid #141413;
|
| border-radius: 20px;
|
| background: rgba(255, 253, 247, .97);
|
| color: #141413 !important;
|
| box-shadow: 0 12px 24px rgba(0, 0, 0, .32);
|
| font-size: 12px;
|
| font-weight: 650;
|
| line-height: 1.32;
|
| pointer-events: none;
|
| }
|
|
|
| .speech-bubble.active-dialogue,
|
| .speech-bubble.active-dialogue * {
|
| color: #141413 !important;
|
| }
|
|
|
| .speech-bubble.active-dialogue::before,
|
| .speech-bubble.active-dialogue::after {
|
| content: "";
|
| position: absolute;
|
| left: var(--bubble-tail-x, 50%);
|
| display: block;
|
| transform: translateX(-50%) rotate(45deg);
|
| }
|
|
|
| .speech-bubble.active-dialogue::before {
|
| bottom: -13px;
|
| width: 22px;
|
| height: 22px;
|
| background: #141413;
|
| border-radius: 0 0 5px 0;
|
| }
|
|
|
| .speech-bubble.active-dialogue::after {
|
| bottom: -9px;
|
| width: 16px;
|
| height: 16px;
|
| transform: translateX(-50%) rotate(45deg);
|
| background: rgba(255, 253, 247, .97);
|
| border-radius: 0 0 3px 0;
|
| }
|
|
|
| .speech-bubble.active-dialogue.pending {
|
| opacity: .82;
|
| }
|
|
|
| .dialogue-meta {
|
| display: flex;
|
| align-items: baseline;
|
| gap: 6px;
|
| margin-bottom: 5px;
|
| font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| text-transform: uppercase;
|
| }
|
|
|
| .dialogue-meta strong {
|
| font-size: 10px;
|
| }
|
|
|
| .dialogue-text {
|
| max-height: calc(34vh - 42px);
|
| overflow: auto;
|
| white-space: pre-wrap;
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-clerk { left: 43%; top: 62%; }
|
| .speech-bubble.active-dialogue.speaker-judge { left: 50%; top: 43%; }
|
| .speech-bubble.active-dialogue.speaker-auric { left: 43%; top: 78%; }
|
| .speech-bubble.active-dialogue.speaker-sable { left: 75%; top: 78%; }
|
| .speech-bubble.active-dialogue.juror-dialogue { left: 50%; top: 57%; }
|
| .speech-bubble.active-dialogue.juror-dialogue {
|
| top: 42%;
|
| width: min(340px, calc(50vw - 24px));
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-karl-marx,
|
| .speech-bubble.active-dialogue.speaker-john-stuart-mill,
|
| .speech-bubble.active-dialogue.speaker-confucius {
|
| left: 1.5%;
|
| transform: translateY(-100%);
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-cleopatra-vii,
|
| .speech-bubble.active-dialogue.speaker-niccolo-machiavelli,
|
| .speech-bubble.active-dialogue.speaker-jensen-huang {
|
| right: 1.5%;
|
| left: auto;
|
| transform: translateY(-100%);
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-karl-marx,
|
| .speech-bubble.active-dialogue.speaker-cleopatra-vii {
|
| --bubble-tail-x: 19%;
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-john-stuart-mill,
|
| .speech-bubble.active-dialogue.speaker-niccolo-machiavelli {
|
| --bubble-tail-x: 50%;
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-confucius,
|
| .speech-bubble.active-dialogue.speaker-jensen-huang {
|
| --bubble-tail-x: 81%;
|
| }
|
|
|
| .verdict-popup {
|
| position: absolute;
|
| left: 50%;
|
| top: 54%;
|
| z-index: 42;
|
| width: min(460px, calc(100vw - 44px));
|
| transform: translate(-50%, -50%);
|
| padding: 18px 22px 20px;
|
| border: 2px solid rgba(255, 235, 178, .94);
|
| border-radius: 8px;
|
| background: rgba(20, 12, 7, .95);
|
| color: #fff4d6;
|
| text-align: center;
|
| box-shadow: 0 28px 58px rgba(0, 0, 0, .5);
|
| animation: verdict-pop .34s ease-out both;
|
| }
|
|
|
| .verdict-popup-kicker {
|
| display: block;
|
| margin-bottom: 7px;
|
| color: #d9b060;
|
| font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| letter-spacing: 0;
|
| text-transform: uppercase;
|
| }
|
|
|
| .verdict-popup-finding {
|
| display: block;
|
| color: #fff8e6;
|
| font: 900 clamp(28px, 5vw, 48px)/1.02 Georgia, serif;
|
| }
|
|
|
| .verdict-popup-decree {
|
| margin: 10px auto 0;
|
| max-width: 38ch;
|
| color: rgba(255, 244, 214, .86);
|
| font-size: 13px;
|
| line-height: 1.35;
|
| }
|
|
|
| .tooltip {
|
| position: absolute;
|
| left: 50%;
|
| bottom: calc(100% + 10px);
|
| z-index: 20;
|
| width: 320px;
|
| max-width: min(360px, calc(100vw - 32px));
|
| transform: translateX(-50%) translateY(6px);
|
| opacity: 0;
|
| pointer-events: none;
|
| padding: 8px 10px;
|
| border: 1px solid rgba(255, 226, 154, .34);
|
| border-radius: 5px;
|
| background: rgba(17, 9, 5, .88);
|
| color: #fff0d2;
|
| box-shadow: 0 12px 24px rgba(0,0,0,.36);
|
| transition: opacity .18s ease, transform .18s ease;
|
| }
|
|
|
| .puppet:hover .tooltip,
|
| .puppet:focus-within .tooltip,
|
| .juror:hover .tooltip,
|
| .juror:focus-within .tooltip {
|
| opacity: 1;
|
| transform: translateX(-50%) translateY(0);
|
| }
|
|
|
| .tooltip strong {
|
| display: block;
|
| color: #fff6df;
|
| font-size: 13px;
|
| }
|
|
|
| .tooltip p {
|
| margin: 6px 0 0;
|
| color: #f5dfb5;
|
| font-size: 11px;
|
| line-height: 1.28;
|
| white-space: normal;
|
| }
|
|
|
| .tooltip-meta {
|
| margin-top: 3px;
|
| color: #f4d58f;
|
| font-size: 10px;
|
| }
|
|
|
| .tooltip-io-label,
|
| .thread-label {
|
| display: block;
|
| margin-top: 7px;
|
| color: #f4d58f;
|
| font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| text-transform: uppercase;
|
| }
|
|
|
| .ai-thread-modal {
|
| display: none;
|
| position: fixed;
|
| inset: max(18px, 4vh) max(18px, 5vw);
|
| z-index: 120;
|
| overflow: auto;
|
| padding: 20px;
|
| border: 1px solid rgba(255, 226, 154, .42);
|
| border-radius: 8px;
|
| background: rgba(18, 9, 5, .96);
|
| color: #fff0d2;
|
| box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
|
| }
|
|
|
| .ai-thread-modal:target {
|
| display: block;
|
| }
|
|
|
| .thread-close {
|
| position: sticky;
|
| top: 0;
|
| float: right;
|
| padding: 7px 10px;
|
| border: 1px solid rgba(255, 226, 154, .38);
|
| border-radius: 4px;
|
| background: rgba(255, 226, 154, .12);
|
| color: #fff0d2;
|
| text-decoration: none;
|
| font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| }
|
|
|
| .thread-title {
|
| margin: 0 0 4px;
|
| color: #fff6df;
|
| font-size: 22px;
|
| }
|
|
|
| .thread-subtitle {
|
| margin: 0 0 16px;
|
| color: #f4d58f;
|
| font: 800 12px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| text-transform: uppercase;
|
| }
|
|
|
| .thread-turn {
|
| margin: 0 0 18px;
|
| padding-bottom: 16px;
|
| border-bottom: 1px solid rgba(255, 226, 154, .16);
|
| }
|
|
|
| .thread-turn:last-child {
|
| border-bottom: 0;
|
| }
|
|
|
| .thread-block {
|
| margin: 7px 0 0;
|
| white-space: pre-wrap;
|
| color: #f8dfaa;
|
| font: 12px/1.42 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| }
|
|
|
| .juror {
|
| --face: #c89259;
|
| --juror-image: none;
|
| position: relative;
|
| height: 72px;
|
| transform-origin: center bottom;
|
| filter: none;
|
| color: inherit;
|
| text-decoration: none;
|
| }
|
|
|
| .juror.active {
|
| animation: juror-react .82s ease-in-out infinite alternate;
|
| }
|
|
|
| .juror-face {
|
| position: absolute;
|
| left: 50%;
|
| top: 0;
|
| width: 30px;
|
| height: 30px;
|
| transform: translateX(-50%);
|
| border: 2px solid rgba(255, 232, 174, .5);
|
| border-radius: 50%;
|
| background:
|
| radial-gradient(circle at 35% 40%, #1d1109 0 2px, transparent 2.5px),
|
| radial-gradient(circle at 64% 40%, #1d1109 0 2px, transparent 2.5px),
|
| linear-gradient(180deg, var(--face), #835235);
|
| }
|
|
|
| .juror-face::after {
|
| content: "";
|
| position: absolute;
|
| left: 10px;
|
| bottom: 9px;
|
| width: 14px;
|
| height: 7px;
|
| border-bottom: 2px solid #25140c;
|
| border-radius: 0 0 18px 18px;
|
| }
|
|
|
| .juror-portrait {
|
| position: absolute;
|
| left: 50%;
|
| top: -19px;
|
| z-index: 3;
|
| width: 58px;
|
| height: 74px;
|
| transform: translateX(-50%);
|
| object-fit: contain;
|
| pointer-events: none;
|
| }
|
|
|
| .juror-body {
|
| position: absolute;
|
| left: 50%;
|
| top: 32px;
|
| width: 36px;
|
| height: 36px;
|
| transform: translateX(-50%);
|
| border-radius: 20px 20px 7px 7px;
|
| border: 1px solid rgba(255, 232, 174, .18);
|
| background: linear-gradient(180deg, #5b496f, #211726);
|
| }
|
|
|
| .phase-deliberation .juror:nth-child(odd) {
|
| animation-delay: .18s;
|
| }
|
|
|
| .evidence-props {
|
| position: absolute;
|
| left: 55%;
|
| right: 11%;
|
| bottom: 36%;
|
| z-index: 9;
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 8px;
|
| justify-content: center;
|
| pointer-events: auto;
|
| }
|
|
|
| .evidence-sheet {
|
| width: 96px;
|
| min-height: 72px;
|
| padding: 8px;
|
| transform: rotate(var(--tilt));
|
| border: 1px solid rgba(56, 32, 15, .22);
|
| border-radius: 3px;
|
| background:
|
| linear-gradient(135deg, transparent 0 84%, rgba(64, 38, 20, .18) 85%),
|
| #fff6df;
|
| color: #372212;
|
| box-shadow: 0 10px 20px rgba(0,0,0,.28);
|
| opacity: .18;
|
| transition: transform .25s ease, opacity .25s ease;
|
| }
|
|
|
| .phase-evidence .evidence-sheet,
|
| .phase-questions .evidence-sheet,
|
| .phase-deliberation .evidence-sheet,
|
| .phase-verdict .evidence-sheet,
|
| .phase-appeal .evidence-sheet {
|
| opacity: .96;
|
| animation: paper-land .55s ease-out both;
|
| }
|
|
|
| .evidence-sheet:hover {
|
| transform: rotate(0) translateY(-8px) scale(1.08);
|
| z-index: 15;
|
| }
|
|
|
| .evidence-sheet strong {
|
| display: block;
|
| margin-bottom: 4px;
|
| color: #254f7a;
|
| font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| }
|
|
|
| .evidence-sheet span {
|
| display: block;
|
| font-size: 11px;
|
| line-height: 1.2;
|
| }
|
|
|
| .trial-caption {
|
| position: absolute;
|
| left: 50%;
|
| bottom: 108px;
|
| z-index: 14;
|
| width: min(870px, calc(100% - 44px));
|
| transform: translateX(-50%);
|
| padding: 12px 16px 13px;
|
| border: 1px solid rgba(255, 226, 154, .34);
|
| border-radius: 6px;
|
| background: rgba(13, 7, 4, .78);
|
| backdrop-filter: blur(12px);
|
| box-shadow: 0 18px 36px rgba(0,0,0,.38);
|
| }
|
|
|
| .caption-title {
|
| margin-top: 3px;
|
| color: #fff3d7;
|
| font-size: 20px;
|
| font-weight: 800;
|
| }
|
|
|
| .caption-body {
|
| margin-top: 5px;
|
| color: #f8dfaa;
|
| font-size: 14px;
|
| line-height: 1.36;
|
| white-space: pre-wrap;
|
| }
|
|
|
| .decree-ribbon {
|
| position: absolute;
|
| right: 26px;
|
| top: 22px;
|
| z-index: 10;
|
| max-width: 230px;
|
| padding: 9px 11px;
|
| border: 1px solid rgba(255, 226, 154, .26);
|
| border-radius: 5px;
|
| background: rgba(18, 9, 5, .68);
|
| color: #ffe6ae;
|
| font: 800 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| text-transform: uppercase;
|
| }
|
|
|
| .phase-verdict .judge-dais,
|
| .phase-questions .judge-dais {
|
| animation: bench-lean .9s ease-in-out infinite alternate;
|
| }
|
|
|
| .phase-deliberation .jury-benches {
|
| animation: jury-murmur .7s ease-in-out infinite alternate;
|
| }
|
|
|
| .stage-prop-link {
|
| cursor: help;
|
| }
|
|
|
| .drawer-shell {
|
| max-width: 1500px;
|
| margin: 12px auto 0;
|
| }
|
|
|
| .drawer-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
| gap: 18px 28px;
|
| }
|
|
|
| .drawer-text-stack {
|
| color: var(--ink);
|
| line-height: 1.42;
|
| }
|
|
|
| .drawer-text-block {
|
| color: var(--ink);
|
| }
|
|
|
| .drawer-text-block h4 {
|
| margin: 5px 0 7px;
|
| }
|
|
|
| .drawer-text-block p,
|
| .drawer-empty {
|
| margin: 0 0 8px;
|
| line-height: 1.38;
|
| white-space: pre-wrap;
|
| }
|
|
|
| .vote-liable { color: var(--red); font-weight: 800; }
|
| .vote-not_liable { color: var(--green); font-weight: 800; }
|
| .vote-uncertain { color: var(--blue); font-weight: 800; }
|
|
|
| .mind-text {
|
| max-height: 340px;
|
| overflow: auto;
|
| color: var(--ink);
|
| font: 12px/1.42 ui-monospace, SFMono-Regular, Consolas, monospace;
|
| white-space: pre-wrap;
|
| }
|
|
|
| @keyframes puppet-breathe {
|
| 0%, 100% { transform: translate(-50%, -100%) translateY(0); }
|
| 50% { transform: translate(-50%, -100%) translateY(-4px); }
|
| }
|
|
|
| @keyframes lawyer-walk {
|
| 0%, 100% { transform: translate(-50%, -100%) translateY(0) rotate(-1deg); }
|
| 25% { transform: translate(-50%, -100%) translateY(-7px) rotate(2deg); }
|
| 50% { transform: translate(-50%, -100%) translateY(0) rotate(1deg); }
|
| 75% { transform: translate(-50%, -100%) translateY(-5px) rotate(-2deg); }
|
| }
|
|
|
| @keyframes speak-mouth {
|
| 0%, 100% { height: 5px; border-radius: 0 0 18px 18px; }
|
| 50% { height: 10px; border-radius: 50%; border: 2px solid #28150c; }
|
| }
|
|
|
| @keyframes juror-react {
|
| from { transform: translateY(0) rotate(-1deg); }
|
| to { transform: translateY(-5px) rotate(2deg); }
|
| }
|
|
|
| @keyframes evidence-focus {
|
| 0%, 100% { transform: translate(-50%, -100%) translateY(0) scale(1); }
|
| 50% { transform: translate(-50%, -100%) translateY(-6px) scale(1.035); }
|
| }
|
|
|
| @keyframes paper-land {
|
| from { transform: rotate(var(--tilt)) translateY(-18px); opacity: 0; }
|
| to { transform: rotate(var(--tilt)) translateY(0); opacity: .96; }
|
| }
|
|
|
| @keyframes bench-lean {
|
| from { transform: translateX(-50%) translateY(0); }
|
| to { transform: translateX(-50%) translateY(-5px); }
|
| }
|
|
|
| @keyframes jury-murmur {
|
| from { transform: translateX(0); }
|
| to { transform: translateX(-3px); }
|
| }
|
|
|
| @keyframes gavel-hit {
|
| 0% { transform: rotate(-18deg) translateY(0); }
|
| 45% { transform: rotate(21deg) translateY(18px); }
|
| 100% { transform: rotate(-18deg) translateY(0); }
|
| }
|
|
|
| @keyframes verdict-pop {
|
| 0% {
|
| opacity: 0;
|
| transform: translate(-50%, -46%) scale(.94);
|
| }
|
| 100% {
|
| opacity: 1;
|
| transform: translate(-50%, -50%) scale(1);
|
| }
|
| }
|
|
|
| @media (max-width: 820px) {
|
| .docket-book-controls {
|
| position: fixed;
|
| top: 130px;
|
| width: calc(100vw - 52px);
|
| transform: translateX(-50%) rotate(-1deg);
|
| }
|
|
|
| .trial-progress {
|
| grid-template-columns: repeat(8, minmax(24px, 1fr));
|
| padding: 2px 5px 3px;
|
| }
|
|
|
| .trial-progress-segment {
|
| font-size: 9px;
|
| letter-spacing: 0;
|
| }
|
|
|
| .trial-progress-label {
|
| display: none;
|
| }
|
|
|
| .trial-progress-abbrev {
|
| display: inline;
|
| }
|
|
|
| .court-episode-stage {
|
| height: 1280px;
|
| min-height: 1280px;
|
| }
|
|
|
| .episode-room {
|
| background-position: center top;
|
| }
|
|
|
| .episode-title {
|
| left: 16px;
|
| right: 16px;
|
| max-width: none;
|
| }
|
|
|
| .decree-ribbon {
|
| top: 164px;
|
| left: 16px;
|
| right: auto;
|
| max-width: calc(100% - 32px);
|
| }
|
|
|
| .speech-bubble.active-dialogue,
|
| .speech-bubble.active-dialogue.speaker-clerk,
|
| .speech-bubble.active-dialogue.speaker-judge,
|
| .speech-bubble.active-dialogue.speaker-auric,
|
| .speech-bubble.active-dialogue.speaker-sable,
|
| .speech-bubble.active-dialogue.juror-dialogue {
|
| left: 50%;
|
| top: 218px;
|
| width: calc(100% - 28px);
|
| max-height: 260px;
|
| transform: translateX(-50%);
|
| }
|
|
|
| .speech-bubble.active-dialogue::after {
|
| display: none;
|
| }
|
|
|
| .speech-bubble.active-dialogue.juror-dialogue,
|
| .speech-bubble.active-dialogue.speaker-karl-marx,
|
| .speech-bubble.active-dialogue.speaker-john-stuart-mill,
|
| .speech-bubble.active-dialogue.speaker-confucius,
|
| .speech-bubble.active-dialogue.speaker-cleopatra-vii,
|
| .speech-bubble.active-dialogue.speaker-niccolo-machiavelli,
|
| .speech-bubble.active-dialogue.speaker-jensen-huang {
|
| top: 500px;
|
| width: min(320px, calc(100vw - 28px));
|
| transform: translateY(-100%);
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-karl-marx,
|
| .speech-bubble.active-dialogue.speaker-john-stuart-mill,
|
| .speech-bubble.active-dialogue.speaker-confucius {
|
| left: 14px;
|
| right: auto;
|
| }
|
|
|
| .speech-bubble.active-dialogue.speaker-cleopatra-vii,
|
| .speech-bubble.active-dialogue.speaker-niccolo-machiavelli,
|
| .speech-bubble.active-dialogue.speaker-jensen-huang {
|
| right: 14px;
|
| left: auto;
|
| }
|
|
|
| .episode-book {
|
| top: 218px;
|
| width: min(680px, calc(100% - 20px));
|
| }
|
|
|
| .episode-book.closed {
|
| top: 640px;
|
| width: 140px;
|
| }
|
|
|
| .book-open-content {
|
| grid-template-columns: 1fr;
|
| gap: 10px;
|
| inset: 15% 11% 13%;
|
| padding: 0 16px;
|
| }
|
|
|
| .book-open-content h2 {
|
| font-size: 22px;
|
| margin-bottom: 5px;
|
| }
|
|
|
| .book-open-content p,
|
| .book-entry {
|
| font-size: 12px;
|
| line-height: 1.22;
|
| }
|
|
|
| .book-entry {
|
| margin: 5px 0;
|
| }
|
|
|
| .book-evidence-columns {
|
| grid-template-columns: 1fr 1fr;
|
| gap: 8px;
|
| }
|
|
|
| .book-evidence-list li {
|
| font-size: 10px;
|
| line-height: 1.12;
|
| }
|
|
|
| .book-field {
|
| min-height: 34px;
|
| font-size: 10px;
|
| }
|
|
|
| .book-context-field {
|
| min-height: 84px;
|
| }
|
|
|
| .judge-dais {
|
| top: 390px;
|
| width: 280px;
|
| }
|
|
|
| .counsel-table.left {
|
| left: 7%;
|
| bottom: 470px;
|
| }
|
|
|
| .counsel-table.right {
|
| right: 7%;
|
| bottom: 470px;
|
| }
|
|
|
| .counsel-table {
|
| width: 154px;
|
| }
|
|
|
| .puppet.auric {
|
| left: 20%;
|
| top: 970px;
|
| }
|
|
|
| .puppet.sable {
|
| left: 80%;
|
| top: 970px;
|
| }
|
|
|
| .speaker-auric .puppet.auric {
|
| left: 42%;
|
| top: 970px;
|
| }
|
|
|
| .speaker-sable .puppet.sable {
|
| left: 80%;
|
| top: 970px;
|
| }
|
|
|
| .puppet.clerk {
|
| left: 35%;
|
| top: 880px;
|
| }
|
|
|
| .witness-area {
|
| right: 5%;
|
| bottom: 580px;
|
| width: 138px;
|
| }
|
|
|
| .jury-benches {
|
| top: 520px;
|
| width: 126px;
|
| min-width: 126px;
|
| }
|
|
|
| .jury-benches.left {
|
| left: .5%;
|
| }
|
|
|
| .jury-benches.right {
|
| right: .5%;
|
| }
|
|
|
| .foreground-fence {
|
| bottom: -66px;
|
| width: 64%;
|
| }
|
|
|
| .foreground-fence.fence-left {
|
| left: -17%;
|
| }
|
|
|
| .foreground-fence.fence-right {
|
| right: -17%;
|
| }
|
|
|
| .judge-table-foreground {
|
| top: 213px;
|
| width: 646px;
|
| }
|
|
|
| .evidence-props {
|
| left: 8%;
|
| right: 8%;
|
| bottom: 410px;
|
| }
|
|
|
| .trial-caption {
|
| bottom: 105px;
|
| }
|
|
|
| .gallery-benches {
|
| bottom: 42px;
|
| grid-template-columns: repeat(3, 1fr);
|
| }
|
| }
|
| """
|
|
|
| APP_JS = f"""
|
| () => {{
|
| const paths = {json.dumps(AUDIO_PATHS)};
|
| const SCORE_BASE_VOLUME = 0.16;
|
| const SCORE_QUIET_VOLUME = 0.035;
|
| const SCORE_BREATH_INTERVAL_MS = 20000;
|
| const SCORE_BREATH_DURATION_MS = 5000;
|
| const make = (name, volume = 1, loop = false) => {{
|
| const audio = new Audio(paths[name]);
|
| audio.preload = 'auto';
|
| audio.volume = volume;
|
| audio.loop = loop;
|
| return audio;
|
| }};
|
|
|
| if (!window.SovereignCourtAudio) {{
|
| const controller = {{
|
| unlocked: false,
|
| lastPhase: null,
|
| muted: false,
|
| scoreVolume: SCORE_BASE_VOLUME,
|
| crowdVolume: 0.0,
|
| fadeFrame: null,
|
| breathTimer: null,
|
| score: make('score', SCORE_BASE_VOLUME, true),
|
| crowd: make('crowd', 0.0, true),
|
| begin() {{
|
| this.unlocked = true;
|
| this.ensureLooping();
|
| this.startBreathing();
|
| this.play('select', 0.26);
|
| window.setTimeout(() => this.play('paper_long', 0.45), 120);
|
| window.setTimeout(() => this.play('gavel', 0.72), 520);
|
| this.observePhase();
|
| this.updateToggle();
|
| }},
|
| ensureLooping() {{
|
| if (!this.unlocked || this.muted) return;
|
| this.applyLoopVolumes();
|
| this.score.play().catch(() => {{}});
|
| this.crowd.play().catch(() => {{}});
|
| }},
|
| applyLoopVolumes() {{
|
| this.score.volume = this.muted ? 0 : this.scoreVolume;
|
| this.crowd.volume = this.muted ? 0 : this.crowdVolume;
|
| }},
|
| play(name, volume = 1) {{
|
| if (!this.unlocked || this.muted) return;
|
| const cue = make(name, volume, false);
|
| cue.play().catch(() => {{}});
|
| }},
|
| setCrowd(volume) {{
|
| this.crowdVolume = volume;
|
| this.applyLoopVolumes();
|
| }},
|
| fadeScore(toVolume, duration, onComplete) {{
|
| if (this.fadeFrame) window.cancelAnimationFrame(this.fadeFrame);
|
| const fromVolume = this.scoreVolume;
|
| const started = window.performance.now();
|
| const step = (now) => {{
|
| const progress = Math.min(1, (now - started) / duration);
|
| this.scoreVolume = fromVolume + ((toVolume - fromVolume) * progress);
|
| this.applyLoopVolumes();
|
| if (progress < 1) {{
|
| this.fadeFrame = window.requestAnimationFrame(step);
|
| }} else {{
|
| this.fadeFrame = null;
|
| if (onComplete) onComplete();
|
| }}
|
| }};
|
| this.fadeFrame = window.requestAnimationFrame(step);
|
| }},
|
| breatheScore() {{
|
| if (!this.unlocked) return;
|
| const halfDuration = SCORE_BREATH_DURATION_MS / 2;
|
| this.fadeScore(SCORE_QUIET_VOLUME, halfDuration, () => {{
|
| this.fadeScore(SCORE_BASE_VOLUME, halfDuration);
|
| }});
|
| }},
|
| startBreathing() {{
|
| if (this.breathTimer) return;
|
| this.breathTimer = window.setInterval(() => this.breatheScore(), SCORE_BREATH_INTERVAL_MS);
|
| }},
|
| toggleMuted() {{
|
| this.muted = !this.muted;
|
| if (this.muted) {{
|
| this.applyLoopVolumes();
|
| this.score.pause();
|
| this.crowd.pause();
|
| }} else {{
|
| this.ensureLooping();
|
| }}
|
| this.updateToggle();
|
| }},
|
| updateToggle() {{
|
| document.querySelectorAll('.sound-toggle').forEach((button) => {{
|
| button.classList.toggle('muted', this.muted);
|
| button.setAttribute('aria-pressed', String(this.muted));
|
| button.setAttribute('title', this.muted ? 'Sound off' : 'Sound on');
|
| }});
|
| }},
|
| cuePhase(phase) {{
|
| if (!this.unlocked || !phase || phase === this.lastPhase) return;
|
| this.lastPhase = phase;
|
| if (phase === 'intake') {{
|
| this.setCrowd(0.08);
|
| this.play('paper', 0.45);
|
| this.play('wood', 0.42);
|
| }} else if (phase === 'claims' || phase === 'opening') {{
|
| this.setCrowd(0.045);
|
| this.play('steps', 0.33);
|
| }} else if (phase === 'evidence') {{
|
| this.setCrowd(0.035);
|
| this.play('paper_long', 0.52);
|
| }} else if (phase === 'questions') {{
|
| this.setCrowd(0.02);
|
| this.play('wood', 0.34);
|
| }} else if (phase === 'deliberation') {{
|
| this.setCrowd(0.18);
|
| }} else if (phase === 'verdict') {{
|
| this.setCrowd(0.0);
|
| this.play('judgement', 0.66);
|
| window.setTimeout(() => this.play('gavel', 0.9), 650);
|
| }} else if (phase === 'appeal') {{
|
| this.setCrowd(0.035);
|
| this.play('paper_long', 0.5);
|
| }}
|
| }},
|
| observePhase() {{
|
| const stage = document.querySelector('.court-episode-stage');
|
| if (stage) this.cuePhase(stage.dataset.phase);
|
| this.updateToggle();
|
| }}
|
| }};
|
|
|
| window.SovereignCourtAudio = controller;
|
|
|
| const observer = new MutationObserver(() => controller.observePhase());
|
| observer.observe(document.body, {{ childList: true, subtree: true, attributes: true, attributeFilter: ['data-phase'] }});
|
|
|
| document.addEventListener('click', (event) => {{
|
| const toggle = event.target.closest('.sound-toggle');
|
| if (toggle) {{
|
| event.preventDefault();
|
| controller.toggleMuted();
|
| return;
|
| }}
|
| if (event.target.closest('.docket-book-controls')) {{
|
| controller.play('select', 0.22);
|
| }}
|
| }}, true);
|
| }}
|
| }}
|
| """
|
|
|
| APP_HEAD = f"""
|
| <script>
|
| (function() {{
|
| const installCourtAudio = {APP_JS.strip()};
|
| if (document.readyState === 'loading') {{
|
| document.addEventListener('DOMContentLoaded', installCourtAudio, {{ once: true }});
|
| }} else {{
|
| installCourtAudio();
|
| }}
|
| }})();
|
| </script>
|
| """
|
|
|
| START_JS = """
|
| (case_label, search_query, hypothetical, custom_payload, speed, mind_layer) => {
|
| const book = document.querySelector('.episode-book.custom-book');
|
| const collect = (selector) => Array.from(document.querySelectorAll(selector)).map((node) => node.value || '');
|
| const payload = book ? JSON.stringify({
|
| context: document.querySelector('.book-context-field')?.value || '',
|
| claimant_evidence: collect('.book-claimant-field'),
|
| respondent_evidence: collect('.book-respondent-field')
|
| }) : (custom_payload || '');
|
| if (book) {
|
| const data = JSON.parse(payload);
|
| const hasContext = data.context.trim().length > 0;
|
| const hasClaimant = data.claimant_evidence.some((value) => value.trim().length > 0);
|
| const hasRespondent = data.respondent_evidence.some((value) => value.trim().length > 0);
|
| if (!hasContext || !hasClaimant || !hasRespondent) {
|
| return [case_label, search_query, hypothetical, payload, speed, mind_layer];
|
| }
|
| }
|
| document.body.classList.add('trial-has-started');
|
| if (window.SovereignCourtAudio) {
|
| window.SovereignCourtAudio.begin();
|
| }
|
| return [case_label, search_query, hypothetical, payload, speed, mind_layer];
|
| }
|
| """
|
|
|
| CHARACTERS = {
|
| JUDGE_NAME: {
|
| "class": "judge",
|
| "name": JUDGE_NAME,
|
| "role": "Stoic presiding judge",
|
| "model": "gpt-oss-20b",
|
| "image": "/gradio_api/file=assets/characters/marcus-aurelius.png",
|
| },
|
| "Clerk Meridian": {
|
| "class": "clerk",
|
| "name": "Clerk Meridian",
|
| "role": "Court clerk",
|
| "model": "AgentCPM-Explore",
|
| },
|
| "Mike OSS": {
|
| "class": "auric",
|
| "name": "Mike OSS",
|
| "role": "Claimant advocate",
|
| "model": "gpt-oss-20b",
|
| },
|
| "Harvey Vector": {
|
| "class": "sable",
|
| "name": "Harvey Vector",
|
| "role": "Respondent advocate",
|
| "model": "gpt-oss-20b",
|
| },
|
| "Nemotron Jury": {
|
| "class": "jury",
|
| "name": "Nemotron Jury",
|
| "role": "Jury panel",
|
| "model": "Nemotron-Orchestrator-8B",
|
| },
|
| }
|
|
|
| JUROR_FACES = {
|
| "Karl Marx": "#d0b79c",
|
| "John Stuart Mill": "#c99b72",
|
| "Confucius": "#c49a64",
|
| "Cleopatra VII": "#b98755",
|
| "Niccolo Machiavelli": "#b88963",
|
| "Jensen Huang": "#b37758",
|
| }
|
|
|
| JUROR_IMAGES = {
|
| "Karl Marx": "/gradio_api/file=assets/characters/karl-marx.png",
|
| "John Stuart Mill": "/gradio_api/file=assets/characters/john-stuart-mill.png",
|
| "Confucius": "/gradio_api/file=assets/characters/confucius.png",
|
| "Cleopatra VII": "/gradio_api/file=assets/characters/cleopatra-vii.png",
|
| "Niccolo Machiavelli": "/gradio_api/file=assets/characters/niccolo-machiavelli.png",
|
| "Jensen Huang": "/gradio_api/file=assets/characters/jensen-huang.png",
|
| }
|
|
|
| TRIAL_TURN_ORDER = (
|
| "Clerk Meridian",
|
| JUDGE_NAME,
|
| "Mike OSS",
|
| "Harvey Vector",
|
| JUDGE_NAME,
|
| "Mike OSS",
|
| "Harvey Vector",
|
| "Nemotron Jury",
|
| *JUROR_PERSONAS.keys(),
|
| JUDGE_NAME,
|
| )
|
|
|
| PHASE_AGENTS = {
|
| "pretrial": ["Clerk Meridian"],
|
| }
|
|
|
|
|
| @dataclass(frozen=True)
|
| class SpeakerCue:
|
| name: str
|
| role: str
|
| text: str
|
| pending: bool = False
|
|
|
|
|
| _EVENT_STREAM_DONE = object()
|
|
|
|
|
| def _remote_events(request: TrialRequest) -> Iterable[TrialEvent] | None:
|
| endpoint = os.getenv("MODAL_TRIAL_URL", DEFAULT_MODAL_TRIAL_URL).strip()
|
| if not endpoint:
|
| return None
|
|
|
| def iterator() -> Iterable[TrialEvent]:
|
| with httpx.stream("POST", endpoint, json=request.model_dump(), timeout=900.0) as response:
|
| response.raise_for_status()
|
| for line in response.iter_lines():
|
| if line:
|
| yield TrialEvent.model_validate_json(line)
|
|
|
| return iterator()
|
|
|
|
|
| def get_events(request: TrialRequest, delay: float | None = None) -> Iterable[TrialEvent]:
|
| remote = _remote_events(request)
|
| if remote is not None:
|
| yield from remote
|
| return
|
| stream_delay = {"swift": 1.4, "measured": 2.4, "ceremonial": 3.4}[request.speed] if delay is None else delay
|
| yield from stream_trial(request, delay=stream_delay)
|
|
|
|
|
| def _escape(value: str) -> str:
|
| return (
|
| value.replace("&", "&")
|
| .replace("<", "<")
|
| .replace(">", ">")
|
| .replace('"', """)
|
| )
|
|
|
|
|
| def _latest_packet_title(events: list[TrialEvent]) -> tuple[str, str]:
|
| if not events:
|
| return (
|
| "Judge-GPT",
|
| "The gallery doors open on an AI-native courtroom. Choose a case from the docket book and begin the proceeding.",
|
| )
|
| lines = events[0].body.splitlines()
|
| title = lines[0] if lines else "Judge-GPT"
|
| subtitle = lines[1] if len(lines) > 1 else events[0].title
|
| return title, subtitle
|
|
|
|
|
| def _active_agents_for(event: TrialEvent | None) -> set[str]:
|
| if event is None:
|
| return set(PHASE_AGENTS["pretrial"])
|
| if not event.turns:
|
| return set()
|
| return {event.turns[0].agent}
|
|
|
|
|
| def _active_speaker_for(event: TrialEvent | None) -> str:
|
| if event is None:
|
| return "Clerk Meridian"
|
| if not event.turns:
|
| return ""
|
| return event.turns[0].agent
|
|
|
|
|
| def _role_for_speaker(name: str, event: TrialEvent | None = None) -> str:
|
| if event is not None:
|
| turn = next((turn for turn in event.turns if turn.agent == name), None)
|
| if turn is not None:
|
| return turn.role
|
| if name in CHARACTERS:
|
| return CHARACTERS[name]["role"]
|
| if name in JUROR_FACES:
|
| return "juror"
|
| return "speaker"
|
|
|
|
|
| def _expected_next_speaker(events: list[TrialEvent]) -> SpeakerCue | None:
|
| if len(events) >= len(TRIAL_TURN_ORDER):
|
| return None
|
| name = TRIAL_TURN_ORDER[len(events)]
|
| role = _role_for_speaker(name)
|
| return SpeakerCue(name=name, role=role, text=f"{name} is preparing a response.", pending=True)
|
|
|
|
|
| def _speaker_class_for(speaker: str) -> str:
|
| if not speaker:
|
| return ""
|
| if speaker in CHARACTERS:
|
| return f" speaker-{CHARACTERS[speaker]['class']}"
|
| return " speaker-" + "".join(ch.lower() if ch.isalnum() else "-" for ch in speaker).strip("-")
|
|
|
|
|
| def _latest_turn_text(event: TrialEvent | None, agent: str) -> str:
|
| if event is None:
|
| return ""
|
| turn = next((turn for turn in event.turns if turn.agent == agent), None)
|
| if turn is None:
|
| return ""
|
| return _short_text(turn.content, 210)
|
|
|
|
|
| def _active_speaker_cue(event: TrialEvent | None, pending_speaker: SpeakerCue | None = None) -> SpeakerCue | None:
|
| if pending_speaker is not None:
|
| return pending_speaker
|
| if event is None or not event.turns:
|
| return None
|
| turn = event.turns[0]
|
| text = turn.content.strip()
|
| if not text:
|
| return None
|
| return SpeakerCue(name=turn.agent, role=turn.role, text=text)
|
|
|
|
|
| def _reading_duration(text: str) -> float:
|
| word_count = len(text.split())
|
| return min(MAX_READ_SECONDS, max(MIN_READ_SECONDS, (word_count / WORDS_PER_SECOND) + READ_BUFFER_SECONDS))
|
|
|
|
|
| def _event_dialogue_text(event: TrialEvent) -> str:
|
| if event.turns:
|
| return event.turns[0].content
|
| return event.body
|
|
|
|
|
| def _event_status(event: TrialEvent, step: int) -> str:
|
| if event.turns:
|
| return f"Step {step}: {event.turns[0].agent} - {event.title}"
|
| return f"Step {step}: {event.title}"
|
|
|
|
|
| def _pending_status(cue: SpeakerCue | None) -> str:
|
| if cue is None:
|
| return "The court is preparing the next turn."
|
| return f"{cue.name} is preparing their response."
|
|
|
|
|
| def _start_event_producer(request: TrialRequest) -> queue.Queue[object]:
|
| events: queue.Queue[object] = queue.Queue()
|
|
|
| def produce() -> None:
|
| try:
|
| try:
|
| stream = get_events(request, delay=0.0)
|
| except TypeError:
|
| stream = get_events(request)
|
| for event in stream:
|
| events.put(event)
|
| except Exception as exc:
|
| events.put(exc)
|
| finally:
|
| events.put(_EVENT_STREAM_DONE)
|
|
|
| threading.Thread(target=produce, name="trial-event-producer", daemon=True).start()
|
| return events
|
|
|
|
|
| def _thread_id(name: str) -> str:
|
| return "ai-thread-" + "".join(ch.lower() if ch.isalnum() else "-" for ch in name).strip("-")
|
|
|
|
|
| def _turns_for_agent(events: list[TrialEvent], agent: str) -> list[dict[str, str]]:
|
| turns = []
|
| for event in events:
|
| for turn in event.turns:
|
| if turn.agent == agent:
|
| turns.append(
|
| {
|
| "phase": event.phase,
|
| "title": event.title,
|
| "role": turn.role,
|
| "model": turn.model,
|
| "confidence": f"{turn.confidence:.2f}",
|
| "input": turn.input or "Prompt unavailable for this turn.",
|
| "output": turn.content or "No output captured yet.",
|
| }
|
| )
|
| return turns
|
|
|
|
|
| def _thread_for_character(events: list[TrialEvent], agent: str) -> list[dict[str, str]]:
|
| if agent in JUROR_FACES:
|
| turns = _turns_for_agent(events, agent)
|
| vote = next((vote for event in reversed(events) for vote in event.votes if vote.juror == agent), None)
|
| if not turns:
|
| turns = _turns_for_agent(events, "Nemotron Jury")
|
| if vote and turns:
|
| turns = [
|
| dict(
|
| turn,
|
| output=f"{turn['output']}\n\n{agent} persona: {vote.persona}\n{agent} vote: {vote.vote}\nReason: {vote.reason}",
|
| )
|
| for turn in turns
|
| ]
|
| return turns
|
| return _turns_for_agent(events, agent)
|
|
|
|
|
| def _short_text(value: str, limit: int = 170) -> str:
|
| squashed = " ".join(value.split())
|
| return squashed if len(squashed) <= limit else squashed[: limit - 1].rstrip() + "..."
|
|
|
|
|
| def _tooltip(name: str, role: str, model: str, turns: list[dict[str, str]]) -> str:
|
| latest = turns[-1] if turns else None
|
| input_preview = _short_text(latest["input"] if latest else "Waiting for this model to receive its first prompt.")
|
| output_preview = _short_text(latest["output"] if latest else "No output has been emitted yet.")
|
| return (
|
| "<span class='tooltip'>"
|
| f"<strong>{_escape(name)}</strong>"
|
| f"{_escape(role)}"
|
| f"<span class='tooltip-meta'>{_escape(model)}</span>"
|
| "<span class='tooltip-io-label'>Input</span>"
|
| f"<p>{_escape(input_preview)}</p>"
|
| "<span class='tooltip-io-label'>Output</span>"
|
| f"<p>{_escape(output_preview)}</p>"
|
| "<span class='tooltip-meta'>Click to open full thread</span>"
|
| "</span>"
|
| )
|
|
|
|
|
| def _thread_modal(name: str, role: str, model: str, turns: list[dict[str, str]]) -> str:
|
| body = (
|
| "".join(
|
| "<section class='thread-turn'>"
|
| f"<div class='thread-subtitle'>{_escape(turn['phase'])} / {_escape(turn['role'])} / confidence {turn['confidence']}</div>"
|
| "<span class='thread-label'>Input</span>"
|
| f"<div class='thread-block'>{_escape(turn['input'])}</div>"
|
| "<span class='thread-label'>Output</span>"
|
| f"<div class='thread-block'>{_escape(turn['output'])}</div>"
|
| "</section>"
|
| for turn in turns
|
| )
|
| or "<section class='thread-turn'><div class='thread-block'>Waiting for this model thread to appear.</div></section>"
|
| )
|
| return (
|
| f"<aside id='{_escape(_thread_id(name))}' class='ai-thread-modal'>"
|
| "<a class='thread-close' href='#court-stage'>Close</a>"
|
| f"<h2 class='thread-title'>{_escape(name)}</h2>"
|
| f"<div class='thread-subtitle'>{_escape(role)} / {_escape(model)}</div>"
|
| f"{body}</aside>"
|
| )
|
|
|
|
|
| def _active_dialogue(cue: SpeakerCue | None) -> str:
|
| if cue is None:
|
| return ""
|
| speaker_cls = _speaker_class_for(cue.name).strip()
|
| classes = ["speech-bubble", "active-dialogue"]
|
| if speaker_cls:
|
| classes.append(speaker_cls)
|
| if cue.name in JUROR_FACES:
|
| classes.append("juror-dialogue")
|
| if cue.pending:
|
| classes.append("pending")
|
| pending_attr = " data-pending='true'" if cue.pending else ""
|
| return (
|
| f"<div class='{' '.join(classes)}' data-speaker='{_escape(cue.name)}'{pending_attr}>"
|
| "<div class='dialogue-meta'>"
|
| f"<strong>{_escape(cue.name)}</strong>"
|
| f"<span>{_escape(cue.role)}</span>"
|
| "</div>"
|
| f"<div class='dialogue-text'>{_escape(cue.text)}</div>"
|
| "</div>"
|
| )
|
|
|
|
|
| def _verdict_popup(events: list[TrialEvent], show: bool) -> str:
|
| if not show:
|
| return ""
|
| verdict = next((event.verdict for event in reversed(events) if event.verdict is not None), None)
|
| if verdict is None:
|
| return ""
|
| finding = VERDICT_LABELS.get(verdict.finding, verdict.finding.replace("_", " ").title())
|
| return (
|
| f"<div class='verdict-popup' role='alert' aria-live='assertive' data-finding='{_escape(verdict.finding)}'>"
|
| "<span class='verdict-popup-kicker'>Verdict</span>"
|
| f"<strong class='verdict-popup-finding'>Verdict: {_escape(finding)}</strong>"
|
| f"<p class='verdict-popup-decree'>{_escape(verdict.decree)}</p>"
|
| "</div>"
|
| )
|
|
|
|
|
| def _puppet(agent: str, active_agents: set[str], phase: str, events: list[TrialEvent], latest: TrialEvent | None) -> str:
|
| meta = CHARACTERS[agent]
|
| active = " active" if agent in active_agents else ""
|
| walking = " walking" if agent in {"Mike OSS", "Harvey Vector"} and agent in active_agents else ""
|
| small = " small" if agent == "Clerk Meridian" else ""
|
| turns = _thread_for_character(events, agent)
|
| portrait = ""
|
| if meta.get("image"):
|
| portrait = (
|
| f"<img class='puppet-portrait' src='{_escape(meta['image'])}' "
|
| f"alt='{_escape(meta['name'])} bust' onerror=\"this.style.display='none'\">"
|
| )
|
| return (
|
| f"<a class='puppet {meta['class']}{active}{walking}{small}' href='#{_escape(_thread_id(agent))}' aria-label='Open {_escape(agent)} model thread'>"
|
| f"{portrait}"
|
| "<span class='mouth'></span>"
|
| f"{_tooltip(meta['name'], meta['role'], meta['model'], turns)}"
|
| "</a>"
|
| )
|
|
|
|
|
| def _juror(name: str, active: bool, events: list[TrialEvent] | None = None, latest: TrialEvent | None = None) -> str:
|
| face = JUROR_FACES.get(name, "#c89259")
|
| image = JUROR_IMAGES.get(name, "")
|
| active_cls = " active" if active else ""
|
| turns = _thread_for_character(events or [], name)
|
| portrait = (
|
| f"<img class='juror-portrait' src='{_escape(image)}' alt='{_escape(name)} bust' "
|
| "onerror=\"this.style.display='none'\">"
|
| if image
|
| else ""
|
| )
|
| fallback_art = "" if image else "<span class='juror-face'></span><span class='juror-body'></span>"
|
| return (
|
| f"<a class='juror{active_cls}' href='#{_escape(_thread_id(name))}' style='--face: {face}' aria-label='Open {_escape(name)} model thread'>"
|
| f"{portrait}"
|
| f"{fallback_art}"
|
| f"{_tooltip(name, 'HF-style juror', 'Nemotron panel', turns)}"
|
| "</a>"
|
| )
|
|
|
|
|
| def _packet_for_label(case_label: str) -> CasePacket:
|
| return get_case(CASE_OPTIONS.get(case_label, "socrates"))
|
|
|
|
|
| def _split_evidence(packet: CasePacket) -> tuple[list[EvidenceItem], list[EvidenceItem]]:
|
| claimant = [item for item in packet.evidence if item.supports == "claimant"]
|
| respondent = [item for item in packet.evidence if item.supports == "respondent"]
|
| if len(claimant) < 3:
|
| claimant.extend(item for item in packet.evidence if item.supports in {"mixed", "context"} and item not in claimant)
|
| if len(respondent) < 3:
|
| respondent.extend(item for item in packet.evidence if item.supports in {"mixed", "context"} and item not in respondent)
|
| return claimant[:3], respondent[:3]
|
|
|
|
|
| def _book_evidence_column(title: str, items: list[EvidenceItem]) -> str:
|
| entries = "".join(
|
| "<li>"
|
| f"<strong>{_escape(item.title)}</strong><br>"
|
| f"{_escape(item.note)}"
|
| "</li>"
|
| for item in items
|
| )
|
| return (
|
| "<section class='book-evidence-column'>"
|
| f"<h3>{_escape(title)}</h3>"
|
| f"<ul class='book-evidence-list'>{entries}</ul>"
|
| "</section>"
|
| )
|
|
|
|
|
| def _custom_evidence_fields(class_name: str, label: str) -> str:
|
| fields = "".join(
|
| f"<textarea class='book-field {class_name}' aria-label='{_escape(label)} {index}' "
|
| f"placeholder='{_escape(label)} {index}'></textarea>"
|
| for index in range(1, 4)
|
| )
|
| return f"<section class='book-evidence-column'><h3>{_escape(label)}</h3>{fields}</section>"
|
|
|
|
|
| def _book(open_book: bool, packet: CasePacket | None = None, custom_mode: bool = False) -> str:
|
| closed = "" if open_book else " closed"
|
| custom_class = " custom-book" if custom_mode and open_book else ""
|
| hidden_attr = "" if custom_mode and open_book else " aria-hidden='true'"
|
| packet = packet or get_case("socrates")
|
| if custom_mode and open_book:
|
| left_page = (
|
| "<section><h2>Trial details</h2>"
|
| "<textarea class='book-field book-context-field' aria-label='Custom trial details' "
|
| "placeholder='Write a short paragraph describing what happened and why the court is hearing it.'></textarea>"
|
| "</section>"
|
| )
|
| right_page = (
|
| "<section><h2>Evidence</h2><div class='book-evidence-columns'>"
|
| f"{_custom_evidence_fields('book-claimant-field', 'Evidence for Claimant')}"
|
| f"{_custom_evidence_fields('book-respondent-field', 'Evidence against Claimant')}"
|
| "</div></section>"
|
| )
|
| else:
|
| claimant_evidence, respondent_evidence = _split_evidence(packet)
|
| left_page = (
|
| "<section><h2>Trial details</h2>"
|
| f"<p class='book-case-title'>{_escape(packet.title)}</p>"
|
| f"<p class='book-context'>{_escape(packet.context or packet.setting)}</p>"
|
| f"<div class='book-entry'><strong>{_escape(packet.claimant)}</strong><br>{_escape(packet.claimant_claim)}</div>"
|
| f"<div class='book-entry'><strong>{_escape(packet.respondent)}</strong><br>{_escape(packet.respondent_claim)}</div>"
|
| "</section>"
|
| )
|
| right_page = (
|
| "<section><h2>Evidence</h2><div class='book-evidence-columns'>"
|
| f"{_book_evidence_column(f'Evidence for {packet.claimant}', claimant_evidence)}"
|
| f"{_book_evidence_column(f'Evidence for {packet.respondent}', respondent_evidence)}"
|
| "</div></section>"
|
| )
|
| return (
|
| f"<div class='episode-book{closed}{custom_class}'>"
|
| "<img class='book-art open-art' src='/gradio_api/file=assets/book/docket-book-open.png' alt='Open docket book'>"
|
| "<img class='book-art closed-art' src='/gradio_api/file=assets/book/docket-book-closed.png' alt='Closed docket book'>"
|
| f"<div class='book-open-content'{hidden_attr}>"
|
| f"{left_page}"
|
| f"{right_page}"
|
| "</div>"
|
| "</div>"
|
| )
|
|
|
|
|
| def _caption(event: TrialEvent | None, phase: str) -> tuple[str, str, str]:
|
| if event is None:
|
| return (
|
| "PRETRIAL",
|
| "The Courtroom Is Ready",
|
| "The docket is open, the room is dimmed, and the clerk is waiting for the first call.",
|
| )
|
| body = event.body.splitlines()[0] if event.body.splitlines() else event.body
|
| return (f"{PHASE_GLYPHS[phase]} / {phase.upper()}", event.title, body)
|
|
|
|
|
| def _evidence_props(events: list[TrialEvent]) -> str:
|
| evidence = next((event.evidence for event in reversed(events) if event.evidence), [])
|
| if not evidence:
|
| return ""
|
| tilts = ["-5deg", "3deg", "-2deg", "5deg"]
|
| sheets = []
|
| for idx, item in enumerate(evidence[:4]):
|
| sheets.append(
|
| f"<div class='evidence-sheet stage-prop-link' style='--tilt: {tilts[idx % len(tilts)]}' title='{_escape(item.note)}'>"
|
| f"<strong>{_escape(item.id)}</strong>"
|
| f"<span>{_escape(item.title)}</span></div>"
|
| )
|
| return f"<div class='evidence-props'>{''.join(sheets)}</div>"
|
|
|
|
|
| def _foreground_props() -> str:
|
| fence = "/gradio_api/file=assets/foreground/foregroundFence.png"
|
| judge_table = "/gradio_api/file=assets/foreground/JudgeTable.png"
|
| return (
|
| "<div class='foreground-props' aria-hidden='true'>"
|
| f"<img class='foreground-fence fence-left' src='{fence}' alt=''>"
|
| f"<img class='foreground-fence fence-right' src='{fence}' alt=''>"
|
| f"<img class='judge-table-foreground' src='{judge_table}' alt=''>"
|
| "</div>"
|
| )
|
|
|
|
|
| def _trial_progress(events: list[TrialEvent]) -> str:
|
| latest = events[-1] if events else None
|
| current_phase = latest.phase if latest else "pretrial"
|
| stage_keys = [key for key, _label in TRIAL_PROGRESS_STAGES]
|
| current_index = stage_keys.index(current_phase) if current_phase in stage_keys else None
|
| segments = []
|
| for index, (key, label) in enumerate(TRIAL_PROGRESS_STAGES):
|
| classes = ["trial-progress-segment"]
|
| attrs = [f"data-phase='{_escape(key)}'"]
|
| if current_index is not None and index < current_index:
|
| classes.append("complete")
|
| if current_index == index:
|
| classes.append("current")
|
| attrs.append("aria-current='step'")
|
| if key == "verdict":
|
| classes.append("complete")
|
| abbrev = label[:3]
|
| segments.append(
|
| f"<span class='{' '.join(classes)}' {' '.join(attrs)}>"
|
| f"<span class='trial-progress-label'>{_escape(label)}</span>"
|
| f"<span class='trial-progress-abbrev' aria-hidden='true'>{_escape(abbrev)}</span>"
|
| "</span>"
|
| )
|
| return (
|
| "<nav class='trial-progress' aria-label='Trial progress'>"
|
| + "".join(segments)
|
| + "</nav>"
|
| )
|
|
|
|
|
| def _courtroom_juror_names(votes: list) -> list[str]:
|
| names = list(JUROR_FACES)
|
| names.extend(vote.juror for vote in votes if vote.juror not in names)
|
| return names[:6]
|
|
|
|
|
| def _latest_votes(events: list[TrialEvent]) -> list:
|
| by_juror = {}
|
| for event in events:
|
| for vote in event.votes:
|
| by_juror[vote.juror] = vote
|
| ordered = [by_juror[name] for name in JUROR_FACES if name in by_juror]
|
| ordered.extend(vote for juror, vote in by_juror.items() if juror not in JUROR_FACES)
|
| return ordered
|
|
|
|
|
| def render_court(
|
| events: list[TrialEvent],
|
| started: bool = False,
|
| pending_speaker: SpeakerCue | None = None,
|
| show_verdict_popup: bool = False,
|
| pretrial_case: CasePacket | None = None,
|
| custom_mode: bool = False,
|
| ) -> str:
|
| latest = events[-1] if events else None
|
| phase = latest.phase if latest else "pretrial"
|
| title, subtitle = _latest_packet_title(events)
|
| active_cue = _active_speaker_cue(latest, pending_speaker)
|
| active_speaker = active_cue.name if active_cue is not None else _active_speaker_for(latest)
|
| active_agents = {active_speaker} if active_speaker else _active_agents_for(latest)
|
| speaker_cls = _speaker_class_for(active_speaker)
|
| caption_phase, caption_title, caption_body = _caption(latest, phase)
|
| latest_votes = _latest_votes(events)
|
| juror_names = _courtroom_juror_names(latest_votes)
|
| started_cls = " trial-started" if started or events else ""
|
| book_open = not started and not events
|
| puppets = "".join(
|
| _puppet(agent, active_agents, phase, events, latest)
|
| for agent in [JUDGE_NAME, "Clerk Meridian", "Mike OSS", "Harvey Vector"]
|
| )
|
| left_jurors = "".join(_juror(name, name == active_speaker, events, latest) for name in juror_names[:3])
|
| right_jurors = "".join(_juror(name, name == active_speaker, events, latest) for name in juror_names[3:6])
|
| evidence_props = _evidence_props(events)
|
| thread_modals = "".join(
|
| _thread_modal(meta["name"], meta["role"], meta["model"], _thread_for_character(events, agent))
|
| for agent, meta in CHARACTERS.items()
|
| ) + "".join(
|
| _thread_modal(name, "HF-style juror", "Nemotron panel", _thread_for_character(events, name))
|
| for name in juror_names
|
| )
|
| return (
|
| f"<section id='court-stage' class='court-episode-stage phase-{_escape(phase)}{_escape(speaker_cls)}{started_cls}' data-phase='{_escape(phase)}'>"
|
| f"{_trial_progress(events)}"
|
| "<div class='episode-room'></div>"
|
| "<div class='audio-deck' aria-hidden='true'>"
|
| + "".join(f"<audio preload='auto' src='{_escape(src)}'></audio>" for src in AUDIO_PATHS.values())
|
| + "</div>"
|
| "<button class='sound-toggle' type='button' aria-label='Toggle sound' aria-pressed='false' title='Sound on'>"
|
| "<span class='sound-icon' aria-hidden='true'></span></button>"
|
| "<div class='episode-title'>"
|
| "<div class='episode-kicker'>Judge-GPT Virtual Courtroom</div>"
|
| f"<h1>{_escape(title)}</h1>"
|
| f"<p>{_escape(subtitle)}</p></div>"
|
| f"<div class='decree-ribbon'>Step {len(events) if events else 0}: {caption_title}<br>Hover characters for agent and model details</div>"
|
| f"{_book(book_open, pretrial_case, custom_mode)}"
|
| f"<div class='judge-dais'><div class='prop-label'>{_escape(JUDGE_NAME)}</div><div class='bench-front'></div><span class='gavel'></span></div>"
|
| "<div class='counsel-table left'><div class='prop-label'>Claimant Table</div></div>"
|
| "<div class='counsel-table right'><div class='prop-label'>Respondent Table</div></div>"
|
| "<div class='trial-floor-mark'></div>"
|
| "<div class='witness-area'><div class='prop-label'>Evidence Stand</div></div>"
|
| "<div class='jury-benches left'><div class='prop-label'>Jury Box</div><div class='jury-row'>"
|
| f"{left_jurors}</div><div class='jury-rail'></div></div>"
|
| "<div class='jury-benches right'><div class='prop-label'>Jury Box</div><div class='jury-row'>"
|
| f"{right_jurors}</div><div class='jury-rail'></div></div>"
|
| f"{puppets}"
|
| f"{evidence_props}"
|
| f"{_foreground_props()}"
|
| f"{_active_dialogue(active_cue)}"
|
| f"{_verdict_popup(events, show_verdict_popup)}"
|
| "<div class='gallery-benches'><div></div><div></div><div></div><div></div><div></div><div></div></div>"
|
| "<div class='trial-caption'>"
|
| f"<div class='caption-phase'>Live Trial Feed / {_escape(caption_phase)}</div>"
|
| f"<div class='caption-title'>{_escape(caption_title)}</div>"
|
| f"<div class='caption-body'>{_escape(caption_body)}</div>"
|
| "</div>"
|
| f"{thread_modals}</section>"
|
| )
|
|
|
|
|
| def render_evidence(events: list[TrialEvent]) -> str:
|
| evidence = next((event.evidence for event in reversed(events) if event.evidence), [])
|
| if not evidence:
|
| return "<div class='drawer-empty'>The exhibit drawer is closed until the clerk opens the docket.</div>"
|
| return (
|
| "<div class='drawer-grid drawer-text-stack'>"
|
| + "".join(
|
| "<section class='drawer-text-block'>"
|
| f"<div class='drawer-kicker'>{_escape(item.id)} / {item.reliability:.2f}</div>"
|
| f"<h4>{_escape(item.title)}</h4>"
|
| f"<p>{_escape(item.excerpt)}</p>"
|
| f"<p><strong>Direction:</strong> {_escape(item.supports)}</p>"
|
| f"<p>{_escape(item.note)}</p></section>"
|
| for item in evidence
|
| )
|
| + "</div>"
|
| )
|
|
|
|
|
| def render_jurors(events: list[TrialEvent]) -> str:
|
| votes = _latest_votes(events)
|
| if not votes:
|
| sleepers = "".join(_juror(name, False) for name in JUROR_FACES)
|
| return (
|
| "<section class='drawer-text-block drawer-text-stack'><div class='drawer-kicker'>Jury Box</div>"
|
| f"<div class='jury-row'>{sleepers}</div>"
|
| "<p>The jurors are seated and silent.</p></section>"
|
| )
|
| return (
|
| "<div class='drawer-grid drawer-text-stack'>"
|
| + "".join(
|
| "<section class='drawer-text-block'>"
|
| f"<div class='drawer-kicker'>{_escape(vote.juror)}</div>"
|
| f"<p><strong>Persona:</strong> {_escape(vote.persona)}</p>"
|
| f"<p class='vote-{vote.vote}'>{_escape(vote.vote.replace('_', ' '))}</p>"
|
| f"<p>{_escape(vote.reason)}</p>"
|
| f"<p><strong>Evidence:</strong> {_escape(', '.join(vote.evidence_ids))}</p></section>"
|
| for vote in votes
|
| )
|
| + "</div>"
|
| )
|
|
|
|
|
| def render_mind(events: list[TrialEvent], enabled: bool) -> str:
|
| if not enabled:
|
| return "<div class='mind-text'>Mind Layer hidden.</div>"
|
| if not events:
|
| return "<div class='mind-text'>Awaiting trace.</div>"
|
| compact = [
|
| {
|
| "phase": event.phase,
|
| "title": event.title,
|
| "turns": [turn.model_dump() for turn in event.turns],
|
| "trace": event.trace,
|
| }
|
| for event in events
|
| ]
|
| return f"<pre class='mind-text'>{_escape(json.dumps(compact, indent=2))}</pre>"
|
|
|
|
|
| def _clean_custom_items(values: list[str]) -> list[str]:
|
| return [" ".join(value.split()) for value in values if " ".join(value.split())]
|
|
|
|
|
| def _custom_case_from_payload(payload: str) -> CasePacket:
|
| try:
|
| data = json.loads(payload or "{}")
|
| except json.JSONDecodeError as exc:
|
| raise ValueError("Custom case details could not be read from the docket book.") from exc
|
| context = " ".join(str(data.get("context", "")).split())
|
| claimant_items = _clean_custom_items([str(value) for value in data.get("claimant_evidence", [])])
|
| respondent_items = _clean_custom_items([str(value) for value in data.get("respondent_evidence", [])])
|
| if not context:
|
| raise ValueError("Custom requires a trial details paragraph.")
|
| if not claimant_items or not respondent_items:
|
| raise ValueError("Custom requires at least one evidence item for each side.")
|
| evidence = [
|
| EvidenceItem(
|
| id=f"CUS-F{index}",
|
| title=f"Claimant Evidence {index}",
|
| source="Custom docket entry",
|
| excerpt=item,
|
| supports="claimant",
|
| reliability=0.65,
|
| note=item,
|
| )
|
| for index, item in enumerate(claimant_items[:3], start=1)
|
| ]
|
| evidence.extend(
|
| EvidenceItem(
|
| id=f"CUS-A{index}",
|
| title=f"Respondent Evidence {index}",
|
| source="Custom docket entry",
|
| excerpt=item,
|
| supports="respondent",
|
| reliability=0.65,
|
| note=item,
|
| )
|
| for index, item in enumerate(respondent_items[:3], start=1)
|
| )
|
| return CasePacket(
|
| id="custom",
|
| title="Custom Trial",
|
| subtitle="A custom docket assembled in the opening book.",
|
| claimant="Claimant",
|
| respondent="Respondent",
|
| charge="Whether the custom record supports the claimant or the respondent.",
|
| setting="A custom courtroom packet entered by the user.",
|
| context=context,
|
| claimant_claim="The claimant says the custom context and supporting evidence justify a favorable finding.",
|
| respondent_claim="The respondent says the custom context is incomplete, overread, or answered by contrary evidence.",
|
| source_note="Custom user-entered case packet from the docket book.",
|
| evidence=evidence,
|
| )
|
|
|
|
|
| def render_case_preview(case_label: str) -> str:
|
| case_id = CASE_OPTIONS.get(case_label, "socrates")
|
| return render_court(
|
| [],
|
| pretrial_case=get_case(case_id) if case_id != "custom" else None,
|
| custom_mode=case_id == "custom",
|
| )
|
|
|
|
|
| def run_ui(
|
| case_label: str,
|
| search_query: str,
|
| hypothetical: str,
|
| custom_payload: str,
|
| speed: str,
|
| mind_layer: bool,
|
| ):
|
| case_id = CASE_OPTIONS.get(case_label, "socrates")
|
| try:
|
| custom_case = _custom_case_from_payload(custom_payload) if case_id == "custom" else None
|
| except ValueError as exc:
|
| yield (
|
| render_court([], pretrial_case=None, custom_mode=True),
|
| render_evidence([]),
|
| render_jurors([]),
|
| render_mind([], mind_layer),
|
| str(exc),
|
| )
|
| return
|
| request = TrialRequest(
|
| case_id=case_id,
|
| search_query=search_query or "",
|
| hypothetical=hypothetical or "",
|
| custom_case=custom_case,
|
| speed=speed or "swift",
|
| mind_layer=bool(mind_layer),
|
| )
|
| events: list[TrialEvent] = []
|
| produced_events = _start_event_producer(request)
|
| pending_speaker = _expected_next_speaker(events)
|
| yield (
|
| render_court(events, started=True, pending_speaker=pending_speaker),
|
| render_evidence(events),
|
| render_jurors(events),
|
| render_mind(events, mind_layer),
|
| _pending_status(pending_speaker),
|
| )
|
| try:
|
| while True:
|
| item = produced_events.get()
|
| if item is _EVENT_STREAM_DONE:
|
| break
|
| if isinstance(item, Exception):
|
| raise item
|
| event = item
|
| events.append(event)
|
| yield (
|
| render_court(events, started=True),
|
| render_evidence(events),
|
| render_jurors(events),
|
| render_mind(events, mind_layer),
|
| _event_status(event, len(events)),
|
| )
|
| duration = _reading_duration(_event_dialogue_text(event))
|
| if duration > 0:
|
| time.sleep(duration)
|
| pending_speaker = _expected_next_speaker(events)
|
| if pending_speaker is not None and produced_events.empty():
|
| yield (
|
| render_court(events, started=True, pending_speaker=pending_speaker),
|
| render_evidence(events),
|
| render_jurors(events),
|
| render_mind(events, mind_layer),
|
| _pending_status(pending_speaker),
|
| )
|
| except Exception as exc:
|
| yield (
|
| render_court(events, started=True),
|
| render_evidence(events),
|
| render_jurors(events),
|
| render_mind(events, mind_layer),
|
| f"Model response required. Trial stopped: {exc}",
|
| )
|
| return
|
| yield (
|
| render_court(events, started=True, show_verdict_popup=True),
|
| render_evidence(events),
|
| render_jurors(events),
|
| render_mind(events, mind_layer),
|
| "Verdict sealed.",
|
| )
|
|
|
|
|
| def build_app() -> gr.Blocks:
|
| with gr.Blocks(title="Judge-GPT") as demo:
|
| with gr.Group(elem_classes=["docket-book-controls"]):
|
| gr.HTML("<div class='book-control-heading'>DATA TRIAL:</div>")
|
| with gr.Row():
|
| case = gr.Dropdown(
|
| label="Case entry",
|
| choices=list(CASE_OPTIONS.keys()),
|
| value="Trial of Socrates",
|
| scale=2,
|
| )
|
| start = gr.Button("Begin Trial", variant="primary", scale=1)
|
| status = gr.Markdown("Ready.", elem_classes=["book-status"])
|
| courtroom = gr.HTML(render_case_preview("Trial of Socrates"), label="Live courtroom")
|
| search = gr.State("")
|
| hypo = gr.State("")
|
| custom_payload = gr.State("")
|
| speed = gr.State("swift")
|
| mind = gr.State(True)
|
| with gr.Row(elem_classes=["drawer-shell"]):
|
| with gr.Column(scale=1):
|
| with gr.Tab("Evidence Drawer"):
|
| evidence = gr.HTML(render_evidence([]))
|
| with gr.Tab("Juror Panel"):
|
| jurors = gr.HTML(render_jurors([]))
|
| mind_html = gr.HTML(render_mind([], True), visible=False)
|
| case.change(
|
| render_case_preview,
|
| inputs=[case],
|
| outputs=[courtroom],
|
| )
|
| start.click(
|
| run_ui,
|
| inputs=[case, search, hypo, custom_payload, speed, mind],
|
| outputs=[courtroom, evidence, jurors, mind_html, status],
|
| js=START_JS,
|
| )
|
| return demo
|
|
|
|
|
| demo = build_app()
|
|
|
| if __name__ == "__main__":
|
| demo.queue().launch(
|
| show_error=True,
|
| allowed_paths=["assets"],
|
| css=CSS,
|
| head=APP_HEAD,
|
| theme=gr.themes.Soft(),
|
| )
|
|
|
