|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<style> |
|
|
body { |
|
|
|
|
|
background-color: #f4f4f4; |
|
|
color: #333; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
} |
|
|
.content-container { |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
padding: 20px; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.model-container { |
|
|
width: 49%; |
|
|
height: 400px; |
|
|
display: inline-block; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
model-viewer { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
.toggle-container { |
|
|
background-color: #fff; |
|
|
padding: 15px; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
margin-top: 10px; |
|
|
} |
|
|
.sub-options { |
|
|
display: none; |
|
|
margin-left: 20px; |
|
|
} |
|
|
|
|
|
label { |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
input[type="radio"] { |
|
|
margin-right: 5px; |
|
|
} |
|
|
|
|
|
|
|
|
.tabbed-interface { |
|
|
max-width: 1000px; |
|
|
margin: 20px auto; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.tabs { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
padding: 10px; |
|
|
background-color: #f9f9f9; |
|
|
border-bottom: 1px solid #ddd; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
background-color: #696969; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 20px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s; |
|
|
margin-right: 12px; |
|
|
} |
|
|
|
|
|
.tab-button:hover { |
|
|
background-color: #fa6a64; |
|
|
} |
|
|
.tab-button.active{ |
|
|
background-color: #fa6a64; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
max-width: 1000px; |
|
|
background-color: #fff; |
|
|
padding-top: 15px; |
|
|
padding-bottom: 15px; |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
|
text-align: center; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.model-title { |
|
|
margin-top: 15px; |
|
|
font-size: 1.2em; |
|
|
color: #333; |
|
|
} |
|
|
.main-title { |
|
|
|
|
|
text-align: center; |
|
|
font-size: 1.6em; |
|
|
color: #333; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
text-align: center; |
|
|
color: #333; |
|
|
font-size: 1.0em; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.paper-links { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.paper-links a { |
|
|
color: #007bff; |
|
|
text-decoration: none; |
|
|
margin: 0 10px; |
|
|
} |
|
|
|
|
|
.paper-links a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.model-description { |
|
|
text-align: justify; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.section-title { |
|
|
font-size: 1.3em; |
|
|
color: #333; |
|
|
margin-top: 80px; |
|
|
margin-bottom: 20px; |
|
|
text-align: justify; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="content-container"> |
|
|
<h1 class="main-title">In Search of a Data Transformation That Accelerates Neural Field Training</h1> |
|
|
<h2 class="subtitle">Junwon Seo, Sangyoon Lee, Kwang In Kim, Jaeho Lee</h2> |
|
|
|
|
|
<p class="paper-links"> |
|
|
<a href="https://arxiv.org/pdf/2311.17094.pdf" target="_blank">paper</a> | |
|
|
<a href="https://arxiv.org/abs/2311.17094" target="_blank">arXiv</a> | |
|
|
<a href="https://github.com/effl-lab/DT4Neural-Field" target="_blank">code</a> |
|
|
</p> |
|
|
|
|
|
<h3 class="section-title"> |
|
|
Loss Landscapes for Original and RPP images |
|
|
</h3> |
|
|
|
|
|
<p class="model-description"> |
|
|
We present 3D visualizations of the loss landscape figures presented in our paper.<br> |
|
|
Please select an option below to explore the preferred loss landscape in detail. |
|
|
</p> |
|
|
|
|
|
<div class="tabbed-interface"> |
|
|
<div class="tabs"> |
|
|
<button class="tab-button" data-tab = "tab1" onclick="openTab('tab1')">Kodak #08</button> |
|
|
<button class="tab-button" data-tab = "tab2" onclick="openTab('tab2')">Kodak #01</button> |
|
|
<button class="tab-button" data-tab = "tab3" onclick="openTab('tab3')">Kodak #02</button> |
|
|
<button class="tab-button" data-tab = "tab4" onclick="openTab('tab4')">DIV2K #801</button> |
|
|
<button class="tab-button" data-tab = "tab5" onclick="openTab('tab5')">DIV2K #802</button> |
|
|
<button class="tab-button" data-tab = "tab6" onclick="openTab('tab6')">CLIC #01</button> |
|
|
<button class="tab-button" data-tab = "tab7" onclick="openTab('tab7')">CLIC #02</button> |
|
|
</div> |
|
|
<div id="tab1" class="tab-content"> |
|
|
<input type="radio" id="option1a" name="subOption1" value="option1a" checked> |
|
|
<label for="option1a">PSNR 50dB</label> |
|
|
<input type="radio" id="option1b" name="subOption1" value="option1b"> |
|
|
<label for="option1b">PSNR 30dB</label> |
|
|
<input type="radio" id="option1c" name="subOption1" value="option1c"> |
|
|
<label for="option1c">PSNR 50dB with top-eigenvector</label> |
|
|
<input type="radio" id="option1d" name="subOption1" value="option1d"> |
|
|
<label for="option1d">PSNR 30dB with top-eigenvector</label> |
|
|
</div> |
|
|
<div id="tab2" class="tab-content"> |
|
|
<input type="radio" id="option2a" name="subOption1" value="option2a"> |
|
|
<label for="option2a">PSNR 50dB</label> |
|
|
<input type="radio" id="option2b" name="subOption1" value="option2b"> |
|
|
<label for="option2b">PSNR 30dB</label> |
|
|
</div> |
|
|
<div id="tab3" class="tab-content"> |
|
|
<input type="radio" id="option3a" name="subOption1" value="option3a"> |
|
|
<label for="option3a">PSNR 50dB</label> |
|
|
<input type="radio" id="option3b" name="subOption1" value="option3b"> |
|
|
<label for="option3b">PSNR 30dB</label> |
|
|
</div> |
|
|
<div id="tab4" class="tab-content"> |
|
|
<input type="radio" id="option4a" name="subOption1" value="option4a"> |
|
|
<label for="option4a">PSNR 50dB</label> |
|
|
<input type="radio" id="option4b" name="subOption1" value="option4b"> |
|
|
<label for="option4b">PSNR 30dB</label> |
|
|
</div> |
|
|
<div id="tab5" class="tab-content"> |
|
|
<input type="radio" id="option5a" name="subOption1" value="option5a"> |
|
|
<label for="option5a">PSNR 50dB</label> |
|
|
<input type="radio" id="option5b" name="subOption1" value="option5b"> |
|
|
<label for="option5b">PSNR 30dB</label> |
|
|
</div> |
|
|
<div id="tab6" class="tab-content"> |
|
|
<input type="radio" id="option6a" name="subOption1" value="option6a"> |
|
|
<label for="option6a">PSNR 50dB</label> |
|
|
<input type="radio" id="option6b" name="subOption1" value="option6b"> |
|
|
<label for="option6b">PSNR 30dB</label> |
|
|
</div> |
|
|
<div id="tab7" class="tab-content"> |
|
|
<input type="radio" id="option7a" name="subOption1" value="option7a"> |
|
|
<label for="option7a">PSNR 50dB</label> |
|
|
<input type="radio" id="option7b" name="subOption1" value="option7b"> |
|
|
<label for="option7b">PSNR 30dB</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="model-container"> |
|
|
<div class="model-title"><b>Original</b></div> |
|
|
<model-viewer |
|
|
id = "modelViewer1" |
|
|
alt="3D image" |
|
|
src="landscape/kodim08_50_ori.gltf" |
|
|
ar |
|
|
ar-modes="webxr scene-viewer quick-look" |
|
|
seamless-poster |
|
|
shadow-intensity="1" |
|
|
camera-controls |
|
|
orientation="0deg -90deg 0deg" |
|
|
camera-orbit = "177.62deg 96.26deg 4.65m" |
|
|
> |
|
|
</model-viewer> |
|
|
</div> |
|
|
|
|
|
<div class="model-container"> |
|
|
<div class="model-title"><b>RPP</b></div> |
|
|
<model-viewer |
|
|
id = "modelViewer2" |
|
|
alt="3D image" |
|
|
src="landscape/kodim08_50_sh.gltf" |
|
|
ar |
|
|
ar-modes="webxr scene-viewer quick-look" |
|
|
seamless-poster |
|
|
shadow-intensity="1" |
|
|
camera-controls |
|
|
orientation = "0deg -90deg 0deg" |
|
|
camera-orbit = "177.62deg 96.26deg 4.65m" |
|
|
> |
|
|
</model-viewer> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> |
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
