Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Zero-1-to-3</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> | |
| <script> | |
| var loc = window.location.pathname; | |
| var path = loc.substring(0, loc.lastIndexOf('/')) + '/nerf_wild'; | |
| function ShowFolderFileList() | |
| { | |
| var fso, f, fc, s, temp; | |
| fso = new ActiveXObject("Scripting.FileSystemObject"); | |
| f = fso.GetFolder(path); | |
| fc = new Enumerator(f.files); | |
| s = ""; | |
| temp = ""; | |
| for (; !fc.atEnd(); fc.moveNext()) | |
| { | |
| temp = fc.item(); | |
| s = temp.name; | |
| console.log(s) | |
| document.getElementById('example').options[document.getElementById('example').options.length] = new Option (s, s); | |
| }; | |
| } | |
| function update() { | |
| var polar = $("#polar").val(); | |
| var azimuth = $("#azimuth").val(); | |
| var zoom = $("#zoom").val(); | |
| var seed = $("#seed").val(); | |
| var img_id = $("#example").val(); | |
| var dataset = $("#dataset").val(); | |
| $("#novelim").attr('src', dataset + '/step-100_scale-6.0/' + img_id + '/polar-' + Math.round((parseInt(polar) + 30) / 30) + '_azimuth-' + Math.round(parseInt(azimuth) / 30) + '_distance-' + (parseInt(zoom) + 1) + '_seed-' + seed + '.png'); | |
| $("#originalim").attr('src', dataset + '/step-100_scale-6.0/' + img_id + '/input.png') | |
| $("#polar-val").html(polar + "°"); | |
| $("#azimuth-val").html(azimuth + "°"); | |
| $("#zoom-val").html(zoom); | |
| $("#seed-val").html(seed); | |
| } | |
| $(document).ready(function() { | |
| $("#example").on("input change", update); | |
| $("#polar").on("input change", update); | |
| $("#azimuth").on("input change", update); | |
| $("#zoom").on("input change", update); | |
| $("#seed").on("input change", update); | |
| update(); | |
| }); | |
| </script> | |
| <style> | |
| #originalim, #novelim { | |
| width : 300px; | |
| height : 300px; | |
| border : 1px solid black; | |
| } | |
| .control-label { | |
| width : 75px; | |
| display : inline-block; | |
| text-align : right; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="viewer"> | |
| <img id="originalim"> | |
| <img id="novelim"><br> | |
| <div id="controls"> | |
| <span class="control-label">Dataset:</span> <select id="dataset"> | |
| <option value="GSO">GSO</option> | |
| <option value="nerf_wild">nerf_wild</option> | |
| <option value="RTMV">RTMV</option> | |
| </select><br> | |
| <span class="control-label">Example:</span> <select id="example"> | |
| <option value="alma">Alma</option> | |
| <option value="bike">Bike</option> | |
| <option value="car1">Car 1</option> | |
| <option value="car2">Car 2</option> | |
| </select><br> | |
| <span class="control-label">Polar:</span> <input type="range" id="polar" min="-30" max="30" step="30" value="0"><span class="control-value" id="polar-val"></span><br> | |
| <span class="control-label">Azimuth:</span> <input type="range" id="azimuth" min="0" max="330" step="30" value="0"> <span class="control-value" id="azimuth-val"></span><br> | |
| <span class="control-label">Zoom:</span> <input type="range" id="zoom" min="-1" max="1" step="1" value="0"> <span class="control-value" id="zoom-val"></span><br> | |
| <span class="control-label">Seed:</span> <input type="range" id="seed" min="0" max="4" step="1" value="0"> <span class="control-value" id="seed-val"></span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |