Update static/index.html

static/index.html

@@ -3,50 +3,85 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Processing</title>
+    <title>Face Swap App</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f4;
+        }
+        .container {
+            text-align: center;
+        }
+        h1 {
+            margin-bottom: 20px;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        label {
+            background-color: #007bff;
+            color: #fff;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            font-weight: bold;
+        }
+        #preview {
+            margin-top: 20px;
+        }
+        img {
+            max-width: 100%;
+            max-height: 300px;
+            margin-top: 10px;
+        }
+    </style>
 </head>
 <body>
-    <h1>Image Processing</h1>
-    <form id="imageForm">
-        <label for="sourceImage">Source Image (Base64 Encoded):</label><br>
-        <textarea id="sourceImage" name="source_image_base64" rows="4" cols="50"></textarea><br>
-        <label for="sourceFacePosition">Source Face Position:</label><br>
-        <input type="number" id="sourceFacePosition" name="source_face_position"><br>
-        <label for="destinationImage">Destination Image (Base64 Encoded):</label><br>
-        <textarea id="destinationImage" name="destination_image_base64" rows="4" cols="50"></textarea><br>
-        <label for="destinationFacePosition">Destination Face Position:</label><br>
-        <input type="number" id="destinationFacePosition" name="destination_face_position"><br>
-        <button type="button" onclick="submitForm()">Submit</button>
-    </form>
+    <div class="container">
+        <h1>Face Swap App</h1>
+        <form id="uploadForm" enctype="multipart/form-data">
+            <label for="sourceImage">Select Source Image:</label>
+            <input type="file" id="sourceImage" name="sourceImage" accept="image/*" required>
+            <br>
+            <label for="destinationImage">Select Destination Image:</label>
+            <input type="file" id="destinationImage" name="destinationImage" accept="image/*" required>
+            <br>
+            <button type="submit">Swap Faces</button>
+        </form>
+        <div id="preview"></div>
+    </div>
 
     <script>
-        function submitForm() {
-            var form = document.getElementById("imageForm");
-            var formData = new FormData(form);
-            var jsonData = {};
-            formData.forEach(function(value, key){
-                jsonData[key] = value;
-            });
-            fetch('/predict', {
-                method: 'get',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(jsonData)
-            }).then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error('Failed to submit form');
-                }
-            }).then(data => {
-                console.log(data);
-                // Handle response data as needed
-            }).catch(error => {
-                console.error(error);
-                // Handle errors
-            });
-        }
+        const form = document.getElementById('uploadForm');
+        const preview = document.getElementById('preview');
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = new FormData(form);
+
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+                console.log(result);
+
+                preview.innerHTML = `
+                    <h2>Result:</h2>
+                    <p>Source Face Position: ${result.source_face_position}</p>
+                    <p>Destination Face Position: ${result.destination_face_position}</p>
+                `;
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        });
     </script>
 </body>
 </html>