debugging

app.py

@@ -2,19 +2,24 @@ import os
 from fastapi import FastAPI, File, UploadFile
 from PIL import Image
 import io
-
-# --- NEW CODE: Import YOLO directly ---
+from fastapi.middleware.cors import CORSMiddleware
 from ultralytics import YOLO
 
-# Set the cache directory for PyTorch Hub to a writable location
-# (This line is still good practice, so we'll keep it)
+# --- DEBUGGING STEP 1 ---
+print("Application script is starting...")
+
 os.environ['TORCH_HOME'] = '/tmp/torch_cache'
 
-# Initialize the FastAPI app
 app = FastAPI(title="YOLOv8 Car Damage Detection API")
 
-# --- MODIFIED LINE: Load the model directly ---
-# This is the new, recommended way to load a local model
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 model = YOLO('best.pt')
 
 
@@ -25,13 +30,10 @@ def read_root():
 
 @app.post("/detect")
 async def detect_damage(file: UploadFile = File(...)):
-    # ... (the rest of your code remains the same)
     contents = await file.read()
     image = Image.open(io.BytesIO(contents)).convert("RGB")
     results = model(image)
 
-    # --- IMPORTANT CHANGE FOR NEW METHOD ---
-    # The output format is slightly different. We need to access the results differently.
     output = []
     for result in results:
         boxes = result.boxes
@@ -42,4 +44,12 @@ async def detect_damage(file: UploadFile = File(...)):
             if confidence > 0.5:
                 output.append({'name': class_name, 'confidence': confidence})
 
-    return {"detections": output}
+    return {"detections": output}
+
+
+# --- DEBUGGING STEP 2 ---
+# This will print all routes that FastAPI has successfully registered.
+print("\n--- Registered Routes ---")
+for route in app.routes:
+    print(f"Path: {route.path}, Methods: {', '.join(route.methods)}")
+print("-------------------------\n")

front/index.html

@@ -11,17 +11,13 @@
         #image-preview { display: none; max-width: 100%; height: auto; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; }
         .upload-area { border: 2px dashed #007bff; border-radius: 8px; padding: 40px; margin: 20px 0; cursor: pointer; background-color: #f8f9fa; }
         .upload-area p { margin: 0; color: #555; }
-        .button-group { display: flex; justify-content: center; gap: 10px; }
+        .button-group { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
         button { font-size: 1.1em; padding: 12px 25px; cursor: pointer; border: none; border-radius: 5px; transition: background-color 0.3s; }
         #check-button { background-color: #007bff; color: white; }
         #check-button:hover { background-color: #0056b3; }
         #check-button:disabled { background-color: #aaa; cursor: not-allowed; }
-
-        /* --- NEW CSS FOR DELETE BUTTON --- */
-        #delete-button { background-color: #dc3545; color: white; display: none; /* Hidden by default */ }
+        #delete-button { background-color: #dc3545; color: white; display: none; }
         #delete-button:hover { background-color: #c82333; }
-        /* --- END OF NEW CSS --- */
-
         #results { margin-top: 30px; font-size: 1.1em; text-align: left; }
         #results ul { list-style-type: none; padding: 0; }
         #results li { background-color: #e9ecef; padding: 10px; margin-bottom: 8px; border-radius: 4px; }
@@ -43,7 +39,7 @@
         <div class="button-group">
             <button id="check-button" disabled>Check for Damage</button>
             <button id="delete-button">Delete</button>
-            </div>
+        </div>
 
         <img id="image-preview" src="" alt="Your uploaded image">
 
@@ -51,19 +47,15 @@
     </div>
 
     <script>
-        // ⚠️ IMPORTANT: Make sure this URL is correct
-        const API_URL = "https://your-name-your-space.hf.space/detect";
+        // ⚠️ IMPORTANT: REPLACE THIS URL with your actual Hugging Face Space URL!
+        const API_URL = "https://amn23-car-image-classification.hf.space/detect";
 
         const uploadArea = document.getElementById('upload-area');
         const imageUpload = document.getElementById('image-upload');
         const checkButton = document.getElementById('check-button');
         const imagePreview = document.getElementById('image-preview');
         const resultsDiv = document.getElementById('results');
-
-        // --- NEW JAVASCRIPT FOR DELETE BUTTON ---
         const deleteButton = document.getElementById('delete-button');
-        // --- END OF NEW JAVASCRIPT ---
-
         let selectedFile = null;
 
         uploadArea.addEventListener('click', () => imageUpload.click());
@@ -75,23 +67,22 @@
                 imagePreview.src = URL.createObjectURL(selectedFile);
                 imagePreview.style.display = 'block';
                 checkButton.disabled = false;
+                // --- THIS IS THE FIXED LINE ---
                 deleteButton.style.display = 'inline-block'; // Show delete button
+                // --- END OF FIX ---
                 resultsDiv.innerHTML = '';
             }
         }
 
-        // --- NEW JAVASCRIPT LOGIC FOR DELETE BUTTON ---
         deleteButton.addEventListener('click', () => {
-            // Reset everything to the initial state
             selectedFile = null;
-            imageUpload.value = ''; // Clear the file input
+            imageUpload.value = '';
             imagePreview.src = '';
             imagePreview.style.display = 'none';
             resultsDiv.innerHTML = '';
             checkButton.disabled = true;
-            deleteButton.style.display = 'none'; // Hide delete button again
+            deleteButton.style.display = 'none';
         });
-        // --- END OF NEW JAVASCRIPT ---
 
         checkButton.addEventListener('click', async () => {
             if (!selectedFile) {
@@ -101,7 +92,7 @@
 
             resultsDiv.innerHTML = "<p>Analyzing, please wait... 🧐</p>";
             checkButton.disabled = true;
-            deleteButton.disabled = true; // Also disable delete button during analysis
+            deleteButton.disabled = true;
 
             const formData = new FormData();
             formData.append('file', selectedFile);
@@ -124,7 +115,7 @@
                 console.error("Error:", error);
             } finally {
                 checkButton.disabled = false;
-                deleteButton.disabled = false; // Re-enable delete button after analysis
+                deleteButton.disabled = false;
             }
         });