Hugging Face's logo

Spaces:
lyunm1206
/
Interactive_Loss_Landscapes
Running

App Files Community
lyunm1206 commited on
Commit
bb0b03c
·
1 Parent(s): 05aa7ff

box

Browse files
Files changed (1) hide show
  1. index.html +96 -87
index.html CHANGED
@@ -10,6 +10,14 @@
10
  margin: 0;
11
  padding: 20px;
12
  }
 
 
 
 
 
 
 
 
13
 
14
  .model-container {
15
  width: 49%;
@@ -37,7 +45,6 @@
37
 
38
  label {
39
  margin-right: 10px;
40
- font-weight: bold;
41
  }
42
 
43
  input[type="radio"] {
@@ -93,94 +100,96 @@
93
  </style>
94
  </head>
95
  <body>
96
- <!-- 3D Model Viewer -->
97
- <div class="model-container">
98
- <div class="model-title">ORG</div>
99
- <model-viewer
100
- id = "modelViewer1"
101
- alt="3D image"
102
- src="landscape/kodim08_50_ori.gltf"
103
- ar
104
- ar-modes="webxr scene-viewer quick-look"
105
- seamless-poster
106
- shadow-intensity="1"
107
- camera-controls
108
- camera-orbit="0deg 180deg"
109
- >
110
- </model-viewer>
111
- </div>
112
-
113
- <div class="model-container">
114
- <div class="model-title">RPP</div>
115
- <model-viewer
116
- id = "modelViewer2"
117
- alt="3D image"
118
- src="landscape/kodim08_50_sh.gltf"
119
- ar
120
- ar-modes="webxr scene-viewer quick-look"
121
- seamless-poster
122
- shadow-intensity="1"
123
- camera-controls
124
- camera-orbit="0deg 180deg"
125
- >
126
- </model-viewer>
127
- </div>
128
-
129
- <div class="tabbed-interface">
130
- <div class="tabs">
131
- <button class="tab-button" data-tab = "tab1" onclick="openTab('tab1')">Kodak 08</button>
132
- <button class="tab-button" data-tab = "tab2" onclick="openTab('tab2')">Kodak 01</button>
133
- <button class="tab-button" data-tab = "tab3" onclick="openTab('tab3')">Kodak 02</button>
134
- <button class="tab-button" data-tab = "tab4" onclick="openTab('tab4')">DIV2K 801</button>
135
- <button class="tab-button" data-tab = "tab5" onclick="openTab('tab5')">DIV2K 802</button>
136
- <button class="tab-button" data-tab = "tab6" onclick="openTab('tab6')">CLIC 01</button>
137
- <button class="tab-button" data-tab = "tab7" onclick="openTab('tab7')">CLIC 02</button>
138
  </div>
139
- <div id="tab1" class="tab-content">
140
- <input type="radio" id="option1a" name="subOption1" value="option1a" checked>
141
- <label for="option1a">PSNR 50</label>
142
- <input type="radio" id="option1b" name="subOption1" value="option1b">
143
- <label for="option1b">PSNR 30</label>
144
- <input type="radio" id="option1c" name="subOption1" value="option1c">
145
- <label for="option1c">PSNR 50 with top-eigenvector</label>
146
- <input type="radio" id="option1d" name="subOption1" value="option1d">
147
- <label for="option1d">PSNR 30 with top-eigenvector</label>
148
- </div>
149
- <div id="tab2" class="tab-content">
150
- <input type="radio" id="option2a" name="subOption1" value="option2a">
151
- <label for="option2a">PSNR 50</label>
152
- <input type="radio" id="option2b" name="subOption1" value="option2b">
153
- <label for="option2b">PSNR 30</label>
154
- </div>
155
- <div id="tab3" class="tab-content">
156
- <input type="radio" id="option3a" name="subOption1" value="option3a">
157
- <label for="option3a">PSNR 50</label>
158
- <input type="radio" id="option3b" name="subOption1" value="option3b">
159
- <label for="option3b">PSNR 30</label>
160
- </div>
161
- <div id="tab4" class="tab-content">
162
- <input type="radio" id="option4a" name="subOption1" value="option4a">
163
- <label for="option4a">PSNR 50</label>
164
- <input type="radio" id="option4b" name="subOption1" value="option4b">
165
- <label for="option4b">PSNR 30</label>
166
- </div>
167
- <div id="tab5" class="tab-content">
168
- <input type="radio" id="option5a" name="subOption1" value="option5a">
169
- <label for="option5a">PSNR 50</label>
170
- <input type="radio" id="option5b" name="subOption1" value="option5b">
171
- <label for="option5b">PSNR 30</label>
172
- </div>
173
- <div id="tab6" class="tab-content">
174
- <input type="radio" id="option6a" name="subOption1" value="option6a">
175
- <label for="option6a">PSNR 50</label>
176
- <input type="radio" id="option6b" name="subOption1" value="option6b">
177
- <label for="option6b">PSNR 30</label>
178
  </div>
179
- <div id="tab7" class="tab-content">
180
- <input type="radio" id="option7a" name="subOption1" value="option7a">
181
- <label for="option7a">PSNR 50</label>
182
- <input type="radio" id="option7b" name="subOption1" value="option7b">
183
- <label for="option7b">PSNR 30</label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
  </div>
186
 
 
10
  margin: 0;
11
  padding: 20px;
12
  }
13
+ .content-container {
14
+ max-width: 800px; /* Adjust this width as needed */
15
+ margin: 0 auto; /* Center the container */
16
+ background-color: #fff;
17
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
18
+ padding: 20px;
19
+ border-radius: 5px;
20
+ }
21
 
22
  .model-container {
23
  width: 49%;
 
45
 
46
  label {
47
  margin-right: 10px;
 
48
  }
49
 
50
  input[type="radio"] {
 
100
  </style>
101
  </head>
102
  <body>
103
+ <div class="conetent-container">
104
+ <!-- 3D Model Viewer -->
105
+ <div class="model-container">
106
+ <div class="model-title">ORG</div>
107
+ <model-viewer
108
+ id = "modelViewer1"
109
+ alt="3D image"
110
+ src="landscape/kodim08_50_ori.gltf"
111
+ ar
112
+ ar-modes="webxr scene-viewer quick-look"
113
+ seamless-poster
114
+ shadow-intensity="1"
115
+ camera-controls
116
+ camera-orbit="0deg 180deg"
117
+ >
118
+ </model-viewer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
+
121
+ <div class="model-container">
122
+ <div class="model-title">RPP</div>
123
+ <model-viewer
124
+ id = "modelViewer2"
125
+ alt="3D image"
126
+ src="landscape/kodim08_50_sh.gltf"
127
+ ar
128
+ ar-modes="webxr scene-viewer quick-look"
129
+ seamless-poster
130
+ shadow-intensity="1"
131
+ camera-controls
132
+ camera-orbit="0deg 180deg"
133
+ >
134
+ </model-viewer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
+
137
+ <div class="tabbed-interface">
138
+ <div class="tabs">
139
+ <button class="tab-button" data-tab = "tab1" onclick="openTab('tab1')">Kodak 08</button>
140
+ <button class="tab-button" data-tab = "tab2" onclick="openTab('tab2')">Kodak 01</button>
141
+ <button class="tab-button" data-tab = "tab3" onclick="openTab('tab3')">Kodak 02</button>
142
+ <button class="tab-button" data-tab = "tab4" onclick="openTab('tab4')">DIV2K 801</button>
143
+ <button class="tab-button" data-tab = "tab5" onclick="openTab('tab5')">DIV2K 802</button>
144
+ <button class="tab-button" data-tab = "tab6" onclick="openTab('tab6')">CLIC 01</button>
145
+ <button class="tab-button" data-tab = "tab7" onclick="openTab('tab7')">CLIC 02</button>
146
+ </div>
147
+ <div id="tab1" class="tab-content">
148
+ <input type="radio" id="option1a" name="subOption1" value="option1a" checked>
149
+ <label for="option1a">PSNR 50</label>
150
+ <input type="radio" id="option1b" name="subOption1" value="option1b">
151
+ <label for="option1b">PSNR 30</label>
152
+ <input type="radio" id="option1c" name="subOption1" value="option1c">
153
+ <label for="option1c">PSNR 50 with top-eigenvector</label>
154
+ <input type="radio" id="option1d" name="subOption1" value="option1d">
155
+ <label for="option1d">PSNR 30 with top-eigenvector</label>
156
+ </div>
157
+ <div id="tab2" class="tab-content">
158
+ <input type="radio" id="option2a" name="subOption1" value="option2a">
159
+ <label for="option2a">PSNR 50</label>
160
+ <input type="radio" id="option2b" name="subOption1" value="option2b">
161
+ <label for="option2b">PSNR 30</label>
162
+ </div>
163
+ <div id="tab3" class="tab-content">
164
+ <input type="radio" id="option3a" name="subOption1" value="option3a">
165
+ <label for="option3a">PSNR 50</label>
166
+ <input type="radio" id="option3b" name="subOption1" value="option3b">
167
+ <label for="option3b">PSNR 30</label>
168
+ </div>
169
+ <div id="tab4" class="tab-content">
170
+ <input type="radio" id="option4a" name="subOption1" value="option4a">
171
+ <label for="option4a">PSNR 50</label>
172
+ <input type="radio" id="option4b" name="subOption1" value="option4b">
173
+ <label for="option4b">PSNR 30</label>
174
+ </div>
175
+ <div id="tab5" class="tab-content">
176
+ <input type="radio" id="option5a" name="subOption1" value="option5a">
177
+ <label for="option5a">PSNR 50</label>
178
+ <input type="radio" id="option5b" name="subOption1" value="option5b">
179
+ <label for="option5b">PSNR 30</label>
180
+ </div>
181
+ <div id="tab6" class="tab-content">
182
+ <input type="radio" id="option6a" name="subOption1" value="option6a">
183
+ <label for="option6a">PSNR 50</label>
184
+ <input type="radio" id="option6b" name="subOption1" value="option6b">
185
+ <label for="option6b">PSNR 30</label>
186
+ </div>
187
+ <div id="tab7" class="tab-content">
188
+ <input type="radio" id="option7a" name="subOption1" value="option7a">
189
+ <label for="option7a">PSNR 50</label>
190
+ <input type="radio" id="option7b" name="subOption1" value="option7b">
191
+ <label for="option7b">PSNR 30</label>
192
+ </div>
193
  </div>
194
  </div>
195