| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Image Super Resolution</title>
|
| </head>
|
| <body>
|
| <h2>Upload Image</h2>
|
|
|
| <input type="file" id="imageInput"><br><br>
|
|
|
| <label>Steps:</label>
|
| <select id="steps">
|
| <option>1</option>
|
| <option>2</option>
|
| <option>3</option>
|
| <option>4</option>
|
| <option>5</option>
|
| </select><br><br>
|
|
|
| <label>Chopping Size:</label>
|
| <select id="chop">
|
| <option>128</option>
|
| <option>256</option>
|
| <option>512</option>
|
| </select><br><br>
|
|
|
| <label>Seed:</label>
|
| <input type="number" id="seed" value="12345"><br><br>
|
|
|
| <button onclick="upload()">Run</button>
|
|
|
| <h3>Result:</h3>
|
| <img id="output" width="400"/>
|
|
|
| <script>
|
| async function upload() {
|
| let file = document.getElementById("imageInput").files[0];
|
|
|
| let formData = new FormData();
|
| formData.append("image", file);
|
| formData.append("num_steps", document.getElementById("steps").value);
|
| formData.append("chopping_size", document.getElementById("chop").value);
|
| formData.append("seed", document.getElementById("seed").value);
|
|
|
| let res = await fetch("http://localhost:5000/predict", {
|
| method: "POST",
|
| body: formData
|
| });
|
|
|
| let blob = await res.blob();
|
| document.getElementById("output").src = URL.createObjectURL(blob);
|
| }
|
| </script>
|
| </body>
|
| </html> |
