Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WandB Run Viewer</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"> | |
| <style> | |
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| main.container { | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 1rem; | |
| max-width: 100% ; | |
| } | |
| .form-container { | |
| flex: 0 0 auto; | |
| margin-bottom: 1rem; | |
| max-width: 1200px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 100%; | |
| } | |
| .iframe-container { | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| width: 100vw; | |
| margin-left: calc(-1 * 1rem); | |
| margin-right: calc(-1 * 1rem); | |
| } | |
| .error { | |
| color: red; | |
| margin: 1rem 0; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| align-items: end; | |
| } | |
| .input-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .token-link { | |
| color: #3B82F6; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| } | |
| .token-link:hover { | |
| text-decoration: underline; | |
| } | |
| .token-hint { | |
| font-size: 0.8rem; | |
| color: #666; | |
| margin-top: 0.25rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <div class="form-container"> | |
| <form method="POST"> | |
| <div class="grid"> | |
| <div class="input-group"> | |
| <a href="https://wandb.ai/authorize" target="_blank" class="token-link">Get Token</a> | |
| <input | |
| type="text" | |
| name="token" | |
| placeholder="WandB Token" | |
| value="{{ token or '' }}" | |
| > | |
| </div> | |
| <div class="input-wrapper"> | |
| <input | |
| type="text" | |
| name="entity" | |
| placeholder="Entity" | |
| required | |
| value="{{ entity or '' }}" | |
| > | |
| </div> | |
| <div class="input-wrapper"> | |
| <input | |
| type="text" | |
| name="project" | |
| placeholder="Project" | |
| required | |
| value="{{ project or '' }}" | |
| > | |
| </div> | |
| <div class="input-wrapper"> | |
| <input | |
| type="text" | |
| name="run_id" | |
| placeholder="Run ID" | |
| required | |
| value="{{ run_id or '' }}" | |
| > | |
| </div> | |
| </div> | |
| <button type="submit">Load Run</button> | |
| </form> | |
| {% if error %} | |
| <div class="error"> | |
| {{ error }} | |
| </div> | |
| {% endif %} | |
| </div> | |
| {% if iframe_html %} | |
| <div class="iframe-container"> | |
| {{ iframe_html | safe }} | |
| </div> | |
| {% endif %} | |
| </main> | |
| </body> | |
| </html> |