Itsdock

Paused

Ashrafb commited on Feb 25, 2024

Commit

1140f00

verified ·

1 Parent(s): 0fb1caa

Rename index.html to static/index.html

Files changed (1) hide show

index.html → static/index.html RENAMED Viewed

@@ -3,34 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image to Sketch</title>
 </head>
 <body>
-    <h1>Image to Sketch</h1>
-    <form action="/upload/" method="post" enctype="multipart/form-data">
-        <input type="file" name="file">
-        <button type="submit">Upload</button>
-    </form>
-    <div id="result"></div>
     <script>
-        async function uploadFile() {
             const formData = new FormData();
-            const fileInput = document.querySelector('input[type="file"]');
-            formData.append('file', fileInput.files[0]);
             const response = await fetch('/upload/', {
                 method: 'POST',
                 body: formData
             });
-            const data = await response.json();
-            document.getElementById('result').innerHTML = `<img src="data:image/png;base64,${data.sketch_image}" />`;
-        }
-        document.querySelector('form').addEventListener('submit', function(event) {
-            event.preventDefault();
-            uploadFile();
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sketch Image Result</title>
 </head>
 <body>
+    <h1>Sketch Image Result</h1>
+    <input type="file" id="imageUpload" accept="image/*">
+    <img id="resultImage" src="" alt="Result Image">
     <script>
+        const imageUpload = document.getElementById('imageUpload');
+        const resultImage = document.getElementById('resultImage');
+        imageUpload.addEventListener('change', async function(event) {
+            const file = event.target.files[0];
             const formData = new FormData();
+            formData.append('file', file);
             const response = await fetch('/upload/', {
                 method: 'POST',
                 body: formData
             });
+            const responseData = await response.json();
+            const resultImageUrl = responseData.sketch_image;
+            resultImage.src = resultImageUrl;
         });
     </script>
 </body>