Hugging Face's logo

Spaces:
lyunm1206
/
Interactive_Loss_Landscapes
Running

App Files Community
lyunm1206 commited on
Commit
83600b4
·
1 Parent(s): fee056d

tab

Browse files
Files changed (2) hide show
  1. index.html +75 -67
  2. script.js +30 -22
index.html CHANGED
@@ -46,6 +46,33 @@
46
  input[type="radio"] {
47
  margin-right: 5px;
48
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </style>
50
  </head>
51
  <body>
@@ -82,79 +109,60 @@
82
  </model-viewer>
83
  </div>
84
 
85
- <div class="toggle-container">
86
- <input type="radio" id="toggle1" name="toggleOption" value="toggle1" checked>
87
- <label for="toggle1">Kodak 08</label>
88
- <div class="sub-options" id="toggle1Options">
89
- <input type="radio" id="option1a" name="subOption1" value="option1a" checked>
90
- <label for="option1a">PSNR 50</label>
91
- <input type="radio" id="option1b" name="subOption1" value="option1b">
92
- <label for="option1b">PSNR 30</label>
93
- <input type="radio" id="option1c" name="subOption1" value="option1c">
94
- <label for="option1c">PSNR 50 with top-eigenvector</label>
95
- <input type="radio" id="option1d" name="subOption1" value="option1d">
96
- <label for="option1d">PSNR 30 with top-eigenvector</label>
97
- </div>
 
 
 
 
 
98
  </div>
99
- <div class="toggle-container">
100
- <input type="radio" id="toggle2" name="toggleOption" value="toggle2">
101
- <label for="toggle2">Kodak 01</label>
102
- <div class="sub-options" id="toggle2Options">
103
- <input type="radio" id="option2a" name="subOption1" value="option2a">
104
- <label for="option2a">PSNR 50</label>
105
- <input type="radio" id="option2b" name="subOption1" value="option2b">
106
- <label for="option2b">PSNR 30</label>
107
- </div>
108
  </div>
109
- <div class="toggle-container">
110
- <input type="radio" id="toggle3" name="toggleOption" value="toggle3">
111
- <label for="toggle3">Kodak 02</label>
112
- <div class="sub-options" id="toggle3Options">
113
- <input type="radio" id="option3a" name="subOption1" value="option3a">
114
- <label for="option3a">PSNR 50</label>
115
- <input type="radio" id="option3b" name="subOption1" value="option3b">
116
- <label for="option3b">PSNR 30</label>
117
- </div>
118
  </div>
119
- <div class="toggle-container">
120
- <input type="radio" id="toggle4" name="toggleOption" value="toggle4">
121
- <label for="toggle4">DIV2K 801</label>
122
- <div class="sub-options" id="toggle4Options">
123
- <input type="radio" id="option4a" name="subOption1" value="option4a">
124
- <label for="option4a">PSNR 50</label>
125
- <input type="radio" id="option4b" name="subOption1" value="option4b">
126
- <label for="option4b">PSNR 30</label>
127
- </div>
128
  </div>
129
- <div class="toggle-container">
130
- <input type="radio" id="toggle5" name="toggleOption" value="toggle5">
131
- <label for="toggle5">DIV2K 802</label>
132
- <div class="sub-options" id="toggle5Options">
133
- <input type="radio" id="option5a" name="subOption1" value="option5a">
134
- <label for="option5a">PSNR 50</label>
135
- <input type="radio" id="option5b" name="subOption1" value="option5b">
136
- <label for="option5b">PSNR 30</label>
137
- </div>
138
  </div>
139
- <div class="toggle-container">
140
- <input type="radio" id="toggle6" name="toggleOption" value="toggle6">
141
- <label for="toggle6">CLIC 01</label>
142
- <div class="sub-options" id="toggle6Options">
143
- <input type="radio" id="option6a" name="subOption1" value="option6a">
144
- <label for="option6a">PSNR 50</label>
145
- <input type="radio" id="option6b" name="subOption1" value="option6b">
146
- <label for="option6b">PSNR 30</label>
147
- </div>
148
  </div>
149
- <div class="toggle-container">
150
- <input type="radio" id="toggle7" name="toggleOption" value="toggle7">
151
- <label for="toggle7">CLIC 02</label>
152
- <div class="sub-options" id="toggle7Options">
153
- <input type="radio" id="option7a" name="subOption1" value="option7a">
154
- <label for="option7a">PSNR 50</label>
155
- <input type="radio" id="option7b" name="subOption1" value="option7b">
156
- <label for="option7b">PSNR 30</label>
157
- </div>
158
  </div>
159
 
160
  <!-- Import the model-viewer component -->
 
46
  input[type="radio"] {
47
  margin-right: 5px;
48
  }
49
+
50
+ /* Style for the tab buttons */
51
+ .tab-button {
52
+ background-color: #f1f1f1;
53
+ border: none;
54
+ outline: none;
55
+ cursor: pointer;
56
+ padding: 10px 20px;
57
+ transition: background-color 0.3s;
58
+ }
59
+
60
+ .tab-button:hover {
61
+ background-color: #ddd;
62
+ }
63
+
64
+ /* Style for the tab content */
65
+ .tab-content {
66
+ display: none;
67
+ padding: 20px;
68
+ border: 1px solid #ccc;
69
+ border-top: none;
70
+ }
71
+
72
+ /* Style to make the tab content visible */
73
+ .active-tab {
74
+ display: block;
75
+ }
76
  </style>
77
  </head>
78
  <body>
 
109
  </model-viewer>
110
  </div>
111
 
112
+ <div class="tabs">
113
+ <button class="tab-button" onclick="openTab('tab1')">Kodak 08</button>
114
+ <button class="tab-button" onclick="openTab('tab2')">Kodak 01</button>
115
+ <button class="tab-button" onclick="openTab('tab3')">Kodak 02</button>
116
+ <button class="tab-button" onclick="openTab('tab4')">DIV2K 801</button>
117
+ <button class="tab-button" onclick="openTab('tab5')">DIV2K 802</button>
118
+ <button class="tab-button" onclick="openTab('tab6')">CLIC 01</button>
119
+ <button class="tab-button" onclick="openTab('tab7')">CLIC 02</button>
120
+ </div>
121
+ <div id="tab1" class="tab-content">
122
+ <input type="radio" id="option1a" name="subOption1" value="option1a" checked>
123
+ <label for="option1a">PSNR 50</label>
124
+ <input type="radio" id="option1b" name="subOption1" value="option1b">
125
+ <label for="option1b">PSNR 30</label>
126
+ <input type="radio" id="option1c" name="subOption1" value="option1c">
127
+ <label for="option1c">PSNR 50 with top-eigenvector</label>
128
+ <input type="radio" id="option1d" name="subOption1" value="option1d">
129
+ <label for="option1d">PSNR 30 with top-eigenvector</label>
130
  </div>
131
+ <div id="tab2" class="tab-content">
132
+ <input type="radio" id="option2a" name="subOption1" value="option2a">
133
+ <label for="option2a">PSNR 50</label>
134
+ <input type="radio" id="option2b" name="subOption1" value="option2b">
135
+ <label for="option2b">PSNR 30</label>
 
 
 
 
136
  </div>
137
+ <div id="tab3" class="tab-content">
138
+ <input type="radio" id="option3a" name="subOption1" value="option3a">
139
+ <label for="option3a">PSNR 50</label>
140
+ <input type="radio" id="option3b" name="subOption1" value="option3b">
141
+ <label for="option3b">PSNR 30</label>
 
 
 
 
142
  </div>
143
+ <div id="tab4" class="tab-content">
144
+ <input type="radio" id="option4a" name="subOption1" value="option4a">
145
+ <label for="option4a">PSNR 50</label>
146
+ <input type="radio" id="option4b" name="subOption1" value="option4b">
147
+ <label for="option4b">PSNR 30</label>
 
 
 
 
148
  </div>
149
+ <div id="tab5" class="tab-content">
150
+ <input type="radio" id="option5a" name="subOption1" value="option5a">
151
+ <label for="option5a">PSNR 50</label>
152
+ <input type="radio" id="option5b" name="subOption1" value="option5b">
153
+ <label for="option5b">PSNR 30</label>
 
 
 
 
154
  </div>
155
+ <div id="tab6" class="tab-content">
156
+ <input type="radio" id="option6a" name="subOption1" value="option6a">
157
+ <label for="option6a">PSNR 50</label>
158
+ <input type="radio" id="option6b" name="subOption1" value="option6b">
159
+ <label for="option6b">PSNR 30</label>
 
 
 
 
160
  </div>
161
+ <div id="tab7" class="tab-content">
162
+ <input type="radio" id="option7a" name="subOption1" value="option7a">
163
+ <label for="option7a">PSNR 50</label>
164
+ <input type="radio" id="option7b" name="subOption1" value="option7b">
165
+ <label for="option7b">PSNR 30</label>
 
 
 
 
166
  </div>
167
 
168
  <!-- Import the model-viewer component -->
script.js CHANGED
@@ -1,14 +1,26 @@
1
  document.addEventListener('DOMContentLoaded', function() {
2
- const toggleOptions = document.querySelectorAll('input[name="toggleOption"]');
3
  const allSubOptionsContainers = document.querySelectorAll('.sub-options');
4
- const allSubOptions = document.querySelectorAll('.sub-options input[type="radio"]');
 
5
  const initialCameraOrbit1 = "0deg 180deg";
6
  const initialCameraOrbit2 = "0deg 180deg";
7
 
 
 
 
 
 
 
 
 
 
 
 
8
 
9
  function updateModels(selectedSubOption) {
10
  const modelPaths = getModelPaths(selectedSubOption.value);
11
 
 
12
  cameraOrbit = initialCameraOrbit1;
13
  if (selectedSubOption.value == 'option1c') {
14
  cameraOrbit = initialCameraOrbit2;
@@ -22,6 +34,7 @@ document.addEventListener('DOMContentLoaded', function() {
22
  modelViewer1.setAttribute('camera-orbit', cameraOrbit);
23
  modelViewer1.resetCamera();
24
  });
 
25
  modelViewer2.setAttribute('src', modelPaths.model2Path);
26
  modelViewer2.addEventListener('load', () => {
27
  modelViewer2.setAttribute('camera-orbit', cameraOrbit);
@@ -29,15 +42,22 @@ document.addEventListener('DOMContentLoaded', function() {
29
  });
30
  }
31
 
32
- function updateSubOptionsDisplay() {
33
- allSubOptionsContainers.forEach(container => {
34
- container.style.display = 'none'; // Hide all sub-options
35
  });
36
-
37
- const selectedToggleValue = document.querySelector('input[name="toggleOption"]:checked').value;
38
- const selectedSubOptionsContainer = document.getElementById(selectedToggleValue + 'Options');
39
- selectedSubOptionsContainer.style.display = 'block'; // Show sub-options for the selected toggle
40
- }
 
 
 
 
 
 
 
41
 
42
  function getModelPaths(optionValue) {
43
  switch (optionValue) {
@@ -85,18 +105,6 @@ document.addEventListener('DOMContentLoaded', function() {
85
  });
86
  }
87
 
88
- toggleOptions.forEach(option => option.addEventListener('change', () => {
89
- updateSubOptionsDisplay();
90
- }));
91
-
92
- allSubOptions.forEach(option => option.addEventListener('change', function() {
93
- uncheckAllSubOptions(this.value);
94
- if(this.checked) {
95
- updateModels(this) ;
96
- }
97
- }));
98
-
99
- updateSubOptionsDisplay();
100
  updateModels();
101
 
102
  });
 
1
  document.addEventListener('DOMContentLoaded', function() {
 
2
  const allSubOptionsContainers = document.querySelectorAll('.sub-options');
3
+ const tabButtons = document.querySelectorAll('.tab-button');
4
+ const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');
5
  const initialCameraOrbit1 = "0deg 180deg";
6
  const initialCameraOrbit2 = "0deg 180deg";
7
 
8
+ function openTab(tabId) {
9
+ // Hide all tab contents
10
+ const tabContents = document.querySelectorAll('.tab-content');
11
+ tabContents.forEach(content => content.style.display = 'none');
12
+
13
+ // Show the selected tab content
14
+ const selectedTabContent = document.getElementById(tabId);
15
+ if (selectedTabContent) {
16
+ selectedTabContent.style.display = 'block';
17
+ }
18
+ }
19
 
20
  function updateModels(selectedSubOption) {
21
  const modelPaths = getModelPaths(selectedSubOption.value);
22
 
23
+ // Set the camera orbit based on specific conditions
24
  cameraOrbit = initialCameraOrbit1;
25
  if (selectedSubOption.value == 'option1c') {
26
  cameraOrbit = initialCameraOrbit2;
 
34
  modelViewer1.setAttribute('camera-orbit', cameraOrbit);
35
  modelViewer1.resetCamera();
36
  });
37
+
38
  modelViewer2.setAttribute('src', modelPaths.model2Path);
39
  modelViewer2.addEventListener('load', () => {
40
  modelViewer2.setAttribute('camera-orbit', cameraOrbit);
 
42
  });
43
  }
44
 
45
+ tabButtons.forEach(button => {
46
+ button.addEventListener('click', function() {
47
+ openTab(this.getAttribute('data-tab'));
48
  });
49
+ });
50
+
51
+ // Event listeners for all sub-options
52
+ allSubOptions.forEach(option => option.addEventListener('change', function() {
53
+ uncheckAllSubOptions(this.value);
54
+ if(this.checked) {
55
+ updateModels(this) ;
56
+ }
57
+ }));
58
+
59
+ // Initialize the first tab open
60
+ openTab('tab1');
61
 
62
  function getModelPaths(optionValue) {
63
  switch (optionValue) {
 
105
  });
106
  }
107
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  updateModels();
109
 
110
  });