Itsdockertest1

Runtime error

Ashrafb commited on Feb 25

Commit

58746b4

•

1 Parent(s): 29da619

Update static/index.html

Files changed (1) hide show

static/index.html CHANGED Viewed

@@ -6,34 +6,31 @@
     <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>
-    <div id="result-container"></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]);
-            try {
-                const response = await fetch("/predict", {
-                    method: "POST",
-                    body: formData
-                });
-                if (!response.ok) {
-                    throw new Error("Failed to get response from server");
-                }
-                const data = await response.json();
-                const sketchImageUrl = data.sketch_image_url;
-                // Display the sketch image in the result container
-                document.getElementById("result-container").innerHTML = `<img src="${sketchImageUrl}" alt="Sketch Image">`;
-            } catch (error) {
-                console.error("Error:", error);
-                alert("Failed to process the image. Please try again.");
-            }
         });
     </script>
 </body>

     <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>