Spaces:
Running
Running
| <meta charset=utf-8><style> | |
| .gradio-container { max-width: 1120px ; } | |
| #pr-hero { border-bottom: 1px solid var(--border-color-primary); padding-bottom: 18px; } | |
| #pr-hero h1 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.02em; font-weight: 700; } | |
| #pr-hero .pr-sub { font-size: 15px; color: var(--body-text-color-subdued); max-width: 64ch; margin: 0 0 14px; } | |
| #pr-hero .pr-chips { display: flex; flex-wrap: wrap; gap: 8px; } | |
| #pr-hero .pr-chip { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; | |
| border: 1px solid var(--border-color-primary); border-radius: 999px; padding: 4px 11px; | |
| color: var(--body-text-color-subdued); } | |
| #pr-hero .pr-chip.on { border-color: #2a78d6; color: #2a78d6; font-weight: 600; } | |
| .pr-lab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; | |
| color: #9a7400; margin: 4px 0 8px; } | |
| .pr-map svg { width: 100%; height: auto; border: 1px solid var(--border-color-primary); | |
| border-radius: 12px; display: block; } | |
| .pr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } | |
| .pr-tile { border: 1px solid var(--border-color-primary); border-radius: 10px; padding: 9px 11px; } | |
| .pr-tile .k { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; | |
| color: var(--body-text-color-subdued); } | |
| .pr-tile .v { display: block; font-size: 19px; font-variant-numeric: tabular-nums; margin-top: 2px; } | |
| .pr-feed { height: 522px; overflow-y: auto; border: 1px solid var(--border-color-primary); | |
| border-radius: 12px; padding: 12px; } | |
| .pr-call { border-left: 2px solid #2a78d6; padding: 6px 0 6px 10px; margin-bottom: 9px; } | |
| .pr-call.pr-free { border-left-color: var(--border-color-primary); } | |
| .pr-name { font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 600; } | |
| .pr-args { font-weight: 400; color: var(--body-text-color-subdued); } | |
| .pr-out { font-size: 12.5px; color: var(--body-text-color-subdued); white-space: pre-wrap; | |
| margin-top: 3px; line-height: 1.45; } | |
| .pr-dim { color: var(--body-text-color-subdued); font-size: 13px; } | |
| table.pr-board { width: 100%; border-collapse: collapse; font-size: 14px; } | |
| table.pr-board th { text-align: left; font-size: 10.5px; letter-spacing: .08em; | |
| text-transform: uppercase; color: var(--body-text-color-subdued); font-weight: 700; | |
| border-bottom: 1px solid var(--border-color-primary); padding: 6px 8px 6px 0; } | |
| table.pr-board td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border-color-primary); | |
| font-variant-numeric: tabular-nums; } | |
| table.pr-board .r { text-align: right; } | |
| table.pr-board tr.pr-ref td { color: var(--body-text-color-subdued); } | |
| .pr-board-empty { border: 1px solid var(--border-color-primary); border-radius: 12px; | |
| padding: 18px; max-width: 60ch; } | |
| .pr-board-empty p { margin: 0 0 8px; } | |
| #pr-foot { border-top: 1px solid var(--border-color-primary); margin-top: 24px; padding-top: 14px; | |
| font-size: 13px; color: var(--body-text-color-subdued); } | |
| body{font-family:ui-sans-serif,system-ui;margin:0;padding:24px;background:#fff;color:#15161a; | |
| --border-color-primary:#e4e2dd;--body-text-color-subdued:#6a6d75} | |
| .wrap{max-width:1120px;margin:0 auto}.cols{display:grid;grid-template-columns:3fr 2fr;gap:22px} | |
| </style><body><div class=wrap> | |
| <div class="pr-lab">Recorded runs</div> | |
| <p style="color:#6a6d75;font-size:14px;max-width:70ch;margin:0 0 14px">Episodes from real matches on a real game server. Pick one and it plays back a step at a time.</p> | |
| <div class=cols><div><div class="pr-map"><svg viewBox="0 0 420 420" role="img" | |
| aria-label="top-down view of the agent and the safe circle"> | |
| <defs><mask id="outside"> | |
| <rect width="420" height="420" fill="white"/> | |
| <circle cx="210.0" cy="210.0" r="173.1" fill="black"/> | |
| </mask></defs> | |
| <rect width="420" height="420" fill="#ffffff"/> | |
| <g stroke="#e8e6e1" stroke-width="1"><line x1="70" y1="0" x2="70" y2="420"/><line x1="0" y1="70" x2="420" y2="70"/><line x1="140" y1="0" x2="140" y2="420"/><line x1="0" y1="140" x2="420" y2="140"/><line x1="210" y1="0" x2="210" y2="420"/><line x1="0" y1="210" x2="420" y2="210"/><line x1="280" y1="0" x2="280" y2="420"/><line x1="0" y1="280" x2="420" y2="280"/><line x1="350" y1="0" x2="350" y2="420"/><line x1="0" y1="350" x2="420" y2="350"/></g> | |
| <rect width="420" height="420" fill="#eb6834" opacity=".07" mask="url(#outside)"/> | |
| <circle cx="285.1" cy="143.9" r="138.3" | |
| fill="none" stroke="#8a8d94" stroke-width="1.2" stroke-dasharray="4 4"/> | |
| <circle cx="210.0" cy="210.0" r="173.1" | |
| fill="#2a78d6" fill-opacity=".05" stroke="#eb6834" stroke-width="2"/> | |
| <circle cx="210.0" cy="210.0" r="3" fill="#eb6834"/> | |
| <polyline points="210.2,52.8 210.0,52.8 210.0,52.8 217.8,53.0 217.8,53.0 217.8,52.7 217.8,44.9 217.8,44.9 214.7,45.2 215.3,52.8 215.3,52.8" fill="none" stroke="#2a78d6" stroke-width="2" | |
| stroke-linejoin="round" stroke-linecap="round" opacity=".5"/> | |
| <circle cx="215.3" cy="52.8" r="6" | |
| fill="#2a78d6" stroke="#ffffff" stroke-width="2.5"/> | |
| <g font-family="ui-sans-serif,system-ui" font-size="10" fill="#8a8d94"> | |
| <line x1="14" y1="404" x2="106" y2="404" stroke="#8a8d94" stroke-width="1.5"/> | |
| <line x1="14" y1="400" x2="14" y2="408" stroke="#8a8d94" stroke-width="1.5"/> | |
| <line x1="106" y1="400" x2="106" y2="408" stroke="#8a8d94" stroke-width="1.5"/> | |
| <text x="14" y="396">100 units</text> | |
| <text x="406" y="20" text-anchor="end">+z ↑</text> | |
| </g> | |
| <g font-family="ui-sans-serif,system-ui" font-size="11"> | |
| <text x="14" y="22" fill="#15161a" font-weight="600">INSIDE the circle</text> | |
| <text x="14" y="38" fill="#8a8d94">radius 188 · 0s left · health 100%</text> | |
| </g> | |
| </svg></div><div class="pr-tiles"><div class="pr-tile"><span class="k">inside the circle</span><span class="v">100%</span></div><div class="pr-tile"><span class="k">game time scored</span><span class="v">100s</span></div><div class="pr-tile"><span class="k">decisions</span><span class="v">20</span></div><div class="pr-tile"><span class="k">status</span><span class="v">alive</span></div></div></div><div><div class="pr-lab">What the model called</div><div class="pr-feed"><div class="pr-call pr-free"><div class="pr-name">get_situation<span class="pr-args">()</span></div><div class="pr-out">at x=659.0, z=831.4 · facing 205.1 · inside the circle · radius 300.0 · 85.0s left</div></div><div class="pr-call"><div class="pr-name">turn_to_bearing<span class="pr-args">(bearing=140)</span></div><div class="pr-out">facing 140.0 · 0.0 off the bearing asked for · inside the circle · 83.0s left</div></div><div class="pr-call"><div class="pr-name">move<span class="pr-args">(forward=1.0, run=True, seconds=10)</span></div><div class="pr-out">at x=667.5, z=831.2 · moved 8.5 units · inside the circle · 73.0s left</div></div><div class="pr-call pr-free"><div class="pr-name">get_situation<span class="pr-args">()</span></div><div class="pr-out">at x=667.5, z=831.2 · facing 140.0 · inside the circle · radius 300.0 · 73.0s left</div></div><div class="pr-call"><div class="pr-name">turn_to_bearing<span class="pr-args">(bearing=90)</span></div><div class="pr-out">facing 90.1 · 0.1 off the bearing asked for · inside the circle · 72.0s left</div></div><div class="pr-call"><div class="pr-name">move<span class="pr-args">(forward=1.0, run=True, seconds=6)</span></div><div class="pr-out">at x=667.5, z=831.6 · moved 0.2 units · inside the circle · 66.0s left</div></div><div class="pr-call"><div class="pr-name">turn_to_bearing<span class="pr-args">(bearing=45)</span></div><div class="pr-out">facing 45.1 · 0.1 off the bearing asked for · inside the circle · 65.0s left</div></div><div class="pr-call"><div class="pr-name">move<span class="pr-args">(forward=1.0, run=True, seconds=6)</span></div><div class="pr-out">at x=667.5, z=840.0 · moved 8.5 units · inside the circle · 59.0s left</div></div><div class="pr-call pr-free"><div class="pr-name">get_situation<span class="pr-args">()</span></div><div class="pr-out">at x=667.5, z=840.0 · facing 45.1 · inside the circle · radius 300.0 · 59.0s left</div></div><div class="pr-call"><div class="pr-name">turn_to_bearing<span class="pr-args">(bearing=270)</span></div><div class="pr-out">facing 270.1 · 0.1 off the bearing asked for · inside the circle · 56.0s left</div></div><div class="pr-call"><div class="pr-name">move<span class="pr-args">(forward=1.0, run=True, seconds=8)</span></div><div class="pr-out">at x=664.1, z=839.7 · moved 3.4 units · inside the circle · 48.0s left</div></div><div class="pr-call"><div class="pr-name">turn_to_bearing<span class="pr-args">(bearing=180)</span></div><div class="pr-out">facing 180.1 · 0.1 off the bearing asked for · inside the circle · 46.0s left</div></div><div class="pr-call"><div class="pr-name">move<span class="pr-args">(forward=1.0, run=True, seconds=10)</span></div><div class="pr-out">at x=664.7, z=831.4 · moved 8.3 units · inside the circle · 36.0s left</div></div><div class="pr-call pr-free"><div class="pr-name">get_situation<span class="pr-args">()</span></div><div class="pr-out">at x=664.7, z=831.4 · facing 180.1 · inside the circle · radius 277.7 · 36.0s left</div></div><div class="pr-call"><div class="pr-name">hold_position<span class="pr-args">(seconds=20, crouch=True)</span></div><div class="pr-out">inside the circle · radius 227.7 · 16.0s left</div></div><div class="pr-call"><div class="pr-name">hold_position<span class="pr-args">(seconds=16, crouch=True)</span></div><div class="pr-out">inside the circle · radius 187.7 · 0.0s left</div></div></div></div></div> | |
| </div></body> |