Hugging Face's logo

Spaces:
nbroad
/
wandb-visualizer
Sleeping

App Files Community
nbroad commited on
Commit
f2b4dd6
·
verified ·
1 Parent(s): 04b482f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +70 -44
index.html CHANGED
@@ -6,63 +6,89 @@
6
  <title>WandB Run Viewer</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
8
  <style>
9
- .iframe-container {
10
- height: calc(100vh - 200px);
11
- width: 100%;
12
- margin-top: 20px;
 
 
 
 
 
 
 
13
  }
14
- .iframe-container iframe {
 
 
 
 
 
 
15
  width: 100%;
16
- height: 100%;
17
- border: none;
 
 
 
 
 
18
  }
19
  .error {
20
  color: red;
21
  margin: 1rem 0;
22
  }
 
 
 
 
 
 
23
  </style>
24
  </head>
25
  <body>
26
  <main class="container">
27
- <form method="POST">
28
- <div class="grid">
29
- <input
30
- type="text"
31
- name="token"
32
- placeholder="WandB Token"
33
- required
34
- value="{{ token or '' }}"
35
- >
36
- <input
37
- type="text"
38
- name="entity"
39
- placeholder="Entity"
40
- required
41
- value="{{ entity or '' }}"
42
- >
43
- <input
44
- type="text"
45
- name="project"
46
- placeholder="Project"
47
- required
48
- value="{{ project or '' }}"
49
- >
50
- <input
51
- type="text"
52
- name="run_id"
53
- placeholder="Run ID"
54
- required
55
- value="{{ run_id or '' }}"
56
- >
57
- </div>
58
- <button type="submit">Load Run</button>
59
- </form>
 
60
 
61
- {% if error %}
62
- <div class="error">
63
- {{ error }}
 
 
64
  </div>
65
- {% endif %}
66
 
67
  {% if iframe_html %}
68
  <div class="iframe-container">
 
6
  <title>WandB Run Viewer</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
8
  <style>
9
+ body, html {
10
+ height: 100%;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+ main.container {
15
+ height: 100vh;
16
+ display: flex;
17
+ flex-direction: column;
18
+ padding: 1rem;
19
+ max-width: 100% !important; /* Override Pico CSS container width */
20
  }
21
+ .form-container {
22
+ flex: 0 0 auto;
23
+ margin-bottom: 1rem;
24
+ /* Keep form inputs from stretching too wide */
25
+ max-width: 1200px;
26
+ margin-left: auto;
27
+ margin-right: auto;
28
  width: 100%;
29
+ }
30
+ .iframe-container {
31
+ flex: 1 1 auto;
32
+ min-height: 0; /* Important for Firefox */
33
+ width: 100vw; /* Full viewport width */
34
+ margin-left: calc(-1 * 1rem); /* Compensate for container padding */
35
+ margin-right: calc(-1 * 1rem); /* Compensate for container padding */
36
  }
37
  .error {
38
  color: red;
39
  margin: 1rem 0;
40
  }
41
+ iframe {
42
+ width: 100%;
43
+ height: 100%;
44
+ border: none;
45
+ display: block;
46
+ }
47
  </style>
48
  </head>
49
  <body>
50
  <main class="container">
51
+ <div class="form-container">
52
+ <form method="POST">
53
+ <div class="grid">
54
+ <input
55
+ type="text"
56
+ name="token"
57
+ placeholder="WandB Token"
58
+ required
59
+ value="{{ token or '' }}"
60
+ >
61
+ <input
62
+ type="text"
63
+ name="entity"
64
+ placeholder="Entity"
65
+ required
66
+ value="{{ entity or '' }}"
67
+ >
68
+ <input
69
+ type="text"
70
+ name="project"
71
+ placeholder="Project"
72
+ required
73
+ value="{{ project or '' }}"
74
+ >
75
+ <input
76
+ type="text"
77
+ name="run_id"
78
+ placeholder="Run ID"
79
+ required
80
+ value="{{ run_id or '' }}"
81
+ >
82
+ </div>
83
+ <button type="submit">Load Run</button>
84
+ </form>
85
 
86
+ {% if error %}
87
+ <div class="error">
88
+ {{ error }}
89
+ </div>
90
+ {% endif %}
91
  </div>
 
92
 
93
  {% if iframe_html %}
94
  <div class="iframe-container">