Itsdockertest1

Running

Ashrafb commited on Feb 24, 2024

Commit

4d1d14d

verified ·

1 Parent(s): 2c151eb

Update static/index.html

Files changed (1) hide show

static/index.html CHANGED Viewed

@@ -3,30 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sketch Prediction</title>
 </head>
 <body>
-    <h1>Sketch Prediction</h1>
-    <form id="uploadForm" enctype="multipart/form-data">
-        <input type="file" id="fileInput" name="file" accept="image/*">
         <button type="submit">Submit</button>
     </form>
-    <div id="result"></div>
     <script>
-        document.getElementById('uploadForm').addEventListener('submit', async function(event) {
             event.preventDefault();
             const formData = new FormData();
-            formData.append('file', document.getElementById('fileInput').files[0]);
-            const response = await fetch('/predict/', {
-                method: 'POST',
                 body: formData
             });
-            const data = await response.blob();
-            const url = URL.createObjectURL(data);
-            document.getElementById('result').innerHTML = `<img src="${url}" alt="Prediction Result">`;
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image to Sketch</title>
 </head>
 <body>
+    <h1>Upload Image to Get Sketch</h1>
+    <form id="upload-form" action="/predict" method="post" enctype="multipart/form-data">
+        <input type="file" name="file" id="file-input">
         <button type="submit">Submit</button>
     </form>
+    <h2>Sketch Result:</h2>
+    <div id="resultcontainer"></div>
     <script>
+        document.getElementById("upload-form").addEventListener("submit", async function(event) {
             event.preventDefault();
             const formData = new FormData();
+            formData.append("file", document.getElementById("file-input").files[0]);
+            const response = await fetch("/predict", {
+                method: "POST",
                 body: formData
             });
+            const data = await response.json();
+            const sketchImage = data.sketch_image;
+            // Update the result container with the sketch image
+            document.getElementById("resultcontainer").innerHTML = `<img src="${sketchImage}" alt="Sketch Image">`;
         });
     </script>
 </body>