Update appointment.html

appointment.html

@@ -136,82 +136,33 @@
 
     <!-- Appointment Start -->
     <h1>Speed Scan Form</h1>
-    <form id="scanForm">
-        <label for="imageUpload">Upload Your Medical Scan:</label>
-        <input type="file" id="imageUpload" accept="image/*" required>
-        <br>
-        <label for="service">Choose the Service You Need:</label>
-        <select id="service" required>
-            <option value="detection">Tumor Detection</option>
-            <option value="classification">Tumor Classification</option>
-        </select>
-        <br>
-        <button type="button" onclick="startScan()">Start Scan</button>
-    </form>
-    <div id="result"></div>
-    <div id="dimensions"></div>
-
-    <script>
-        async function startScan() {
-            const fileInput = document.getElementById('imageUpload');
-            const resultDiv = document.getElementById('result');
-            const dimensionsDiv = document.getElementById('dimensions');
-
-            if (fileInput.files.length === 0) {
-                alert('Please upload an image file.');
-                return;
-            }
-
-            const file = fileInput.files[0];
-            const image = await loadImage(file);
-
-            // Display image dimensions
-            dimensionsDiv.innerHTML = `<strong>Image Dimensions:</strong> ${image.width} x ${image.height}`;
+     <h1>Brain Tumor Detection with AI</h1>
+    <p>Upload an MRI image to detect if a brain tumor is present.</p>
 
-            try {
-                // Load the model
-                const model = await tf.loadLayersModel('model/ae_resnet.h5');
-                console.log('Model loaded successfully.');
-
-                // Preprocess the image
-                const canvas = document.createElement('canvas');
-                canvas.width = 224;
-                canvas.height = 224;
-                const ctx = canvas.getContext('2d');
-                ctx.drawImage(image, 0, 0, 224, 224);
-
-                // Convert to tensor
-                const tensor = tf.browser.fromPixels(canvas)
-                    .toFloat()
-                    .expandDims(0) // Add batch dimension
-                    .div(tf.scalar(255)); // Normalize to [0, 1] range
-
-                // Predict
-                const predictions = await model.predict(tensor).data();
-                console.log('Predictions:', predictions);
+    <form id="upload-form">
+        <input type="file" id="file-input" accept="image/*">
+        <button type="submit">Submit</button>
+    </form>
 
-                // Display results
-                const result = predictions[0] > 0.5 ? 'Tumor Detected' : 'No Tumor Detected';
-                resultDiv.innerHTML = `<strong>Prediction Result:</strong> ${result}`;
-            } catch (error) {
-                console.error('Error during prediction:', error);
-                resultDiv.innerHTML = `<strong>Prediction failed.</strong> Error: ${error.message}`;
-            }
-        }
+    <p id="result"></p>
 
-        function loadImage(file) {
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                    const img = new Image();
-                    img.onload = () => resolve(img);
-                    img.onerror = (err) => reject(err);
-                    img.src = event.target.result;
-                };
-                reader.onerror = reject;
-                reader.readAsDataURL(file);
-            });
-        }
+    <script>
+        document.getElementById('upload-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const fileInput = document.getElementById('file-input');
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+
+            fetch('YOUR_API_URL/predict', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('result').innerText = `Prediction: ${data.prediction}, Confidence: ${data.confidence}`;
+            })
+            .catch(error => console.error('Error:', error));
+        });
     </script>
     <!-- Appointment End -->