created It20236946 frontend2

api 2/css/styles.css

+/* Add general styles here */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+}
+
+.container {
+    margin-top: 50px;
+}
+
+/* Style the header */
+h1 {
+    color: #343a40;
+}
+
+/* Style the form */
+.form-label {
+    font-weight: bold;
+}
+
+.btn-primary {
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+/* Style the result container */
+#result {
+    border: 1px solid #ddd;
+    padding: 10px;
+    margin-top: 20px;
+    background-color: #fff;
+}
+
+/* Add more styles as needed */
+/* Add your custom CSS styles here */
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.btn-primary:hover {
+    transform: scale(1.1);
+    transition: transform 0.2s ease-in-out;
+}

api 2/js/main.js

+// DOM elements
+const uploadForm = document.getElementById("uploadForm");
+const imageInput = document.getElementById("imageInput");
+const result = document.getElementById("result");
+const predictedClass = document.getElementById("predictedClass");
+const confidence = document.getElementById("confidence");
+
+// Event listener for form submission
+uploadForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    const formData = new FormData();
+    formData.append("file", imageInput.files[0]);
+
+    // Send the image to the backend for prediction
+    fetch("/predict", {
+        method: "POST",
+        body: formData,
+    })
+        .then((response) => response.json())
+        .then((data) => {
+            // Display the prediction result
+            predictedClass.textContent = `Predicted Class: ${data.class}`;
+            confidence.textContent = `Confidence: ${data.confidence.toFixed(2)}`;
+            result.style.display = "block";
+        })
+        .catch((error) => {
+            console.error("Error:", error);
+        });
+});