Update app.py

app.py

@@ -16,146 +16,176 @@ from fastcore.utils import * # For Upload class
 
 # --- Configuration ---
 # Ensure the path to your exported model is correct
-# When deploying to HF Spaces, this relative path should work if model.pkl is in the same directory
+# When deploying to HF Spaces, this relative path works if model.pkl is in the same directory
 MODEL_PATH = Path(__file__).parent / 'model.pkl'
-# Set device (CPU is usually the default/safest for HF free tier)
+# Set device (CPU is often the default/safest for HF free tier)
+# Use 'cuda' if you have a GPU and want to use it: defaults_device(use_cuda=True)
 defaults.device = torch.device('cpu')
 
 # --- Load Fastai Learner ---
+# Load the model once when the application starts
 try:
-    print(f"Loading model from: {MODEL_PATH}")
+    print(f"Attempting to load model from: {MODEL_PATH.resolve()}") # Use resolve() for absolute path in logs
+    if not MODEL_PATH.is_file():
+        raise FileNotFoundError(f"Model file not found at calculated path: {MODEL_PATH.resolve()}")
     learn = load_learner(MODEL_PATH)
     print("Model loaded successfully.")
     # Get class names (vocab) from the learner's dataloaders
     CLASS_NAMES = learn.dls.vocab
     print(f"Model Classes: {CLASS_NAMES}")
-except FileNotFoundError:
-    print(f"Error: Model file not found at {MODEL_PATH}")
-    print("Please make sure 'model.pkl' is in the same directory or update MODEL_PATH.")
-    # In a deployed environment, you might want to raise the error or handle it differently
-    # For now, we exit if the model isn't found on startup.
-    raise SystemExit(f"Error: Model file not found at {MODEL_PATH}")
+except FileNotFoundError as e:
+    print(f"Error: {e}")
+    print("Please make sure 'model.pkl' is in the same directory as app.py.")
+    # Exit if model loading fails, as the app cannot function
+    raise SystemExit(f"CRITICAL ERROR: Model file not found at {MODEL_PATH}. Application cannot start.")
 except Exception as e:
-    print(f"Error loading the model: {e}")
-    raise SystemExit(f"Error loading the model: {e}")
+    print(f"CRITICAL ERROR: An unexpected error occurred loading the model: {e}")
+    # Exit for any other critical model loading error
+    raise SystemExit(f"CRITICAL ERROR: Failed to load model. Application cannot start. Error: {e}")
 
 # --- FastHTML App Setup ---
-# FastHTML automatically finds this 'app' object when run with uvicorn app:app
+# FastHTML/Uvicorn will automatically find this 'app' object when run via 'uvicorn app:app'
 app = FastHTML()
-rt = app.route # Route decorator
+rt = app.route # Shortcut for the route decorator
 
 # --- Helper Function for Prediction ---
 def predict_image(img_bytes: bytes):
     """Takes image bytes, predicts using the fastai model."""
+    if not img_bytes:
+        return "Error: Image data is empty", 0.0
     try:
+        # Create PILImage from bytes
         img = PILImage.create(img_bytes)
+        # Get prediction from the learner
         pred_class, pred_idx, probs = learn.predict(img)
-        confidence = probs[pred_idx].item() # Get the probability of the predicted class
+        # Get the confidence score for the predicted class
+        confidence = probs[pred_idx].item()
         return pred_class, confidence
     except Exception as e:
         print(f"Error during prediction: {e}")
         # Return a user-friendly error message and neutral confidence
-        return f"Prediction Error: {e}", 0.0
+        return f"Prediction Error: Could not process image ({e})", 0.0
 
 # --- Define Routes ---
 
 @rt("/")
 async def get(request):
     """Serves the main page with the upload form."""
-    # Using Bootstrap classes for basic styling
+    # Using Bootstrap classes for basic styling and layout
     return Titled("Fastai Image Classifier",
         Main(cls="container mt-4",
             H1("Upload an Image for Classification"),
-            # Form for uploading the image
+            # --- Form for uploading the image ---
+            # Arguments MUST be ordered: Positional arguments (content) first, then Keyword arguments (attributes)
             Form(
+                # --- Positional Arguments (Form Content) ---
                 Div(cls="mb-3",
-                    # Label("Choose Image", fr="fileInput", cls="form-label"), # Optional label
-                    FileInput(name="file", id="fileInput", cls="form-control", required=True), # Added required
+                    # File input element
+                    FileInput(name="file", id="fileInput", cls="form-control", required=True, accept="image/*"), # Added required and accept attributes
                 ),
                 Button("Classify Image", type="submit", cls="btn btn-primary"), # Submit button
-                # HTMX attributes for form submission
-                hx_post="/predict",      # POST request to /predict
-                hx_target="#results",    # Put the response into the #results div
-                hx_swap="innerHTML",     # Replace the content of #results
-                hx_encoding="multipart/form-data", # Needed for file uploads
-                # Add indicator for user feedback during processing
-                hx_indicator="#loading-spinner",
-                id="upload-form"
-            ),
-            # Loading indicator (hidden by default)
-            Div(id="loading-spinner", cls="htmx-indicator spinner-border mt-3", role="status",
-                Span("Loading...", cls="visually-hidden")
+
+                # --- Keyword Arguments (Form Attributes) ---
+                # HTMX attributes for handling the submission
+                hx_post="/predict",             # Send POST request to /predict endpoint
+                hx_target="#results",           # Put the response HTML into the div with id="results"
+                hx_swap="innerHTML",            # Replace the entire content of the target div
+                hx_encoding="multipart/form-data", # Necessary for file uploads
+                hx_indicator="#loading-spinner", # Show the element with id="loading-spinner" during the request
+                id="upload-form"                # Standard HTML id for the form
+            ), # End of Form component arguments
+            # --- Loading Indicator ---
+            # This div is shown by hx-indicator during the HTMX request
+            Div(id="loading-spinner", cls="htmx-indicator spinner-border mt-3", role="status", style="display: none;", # Initially hidden
+                Span("Loading...", cls="visually-hidden") # Accessibility text for the spinner
             ),
-            # Div where results will be displayed
+            # --- Results Area ---
+            # This div is targeted by hx-target to display the prediction results
             Div(id="results", cls="mt-4")
-        )
-    )
+        ) # End of Main component
+    ) # End of Titled component
 
 @rt("/predict", methods=["POST"])
 async def post(request, file: Upload):
-    """Handles image upload, prediction, and returns results."""
+    """Handles image upload, performs prediction, and returns results as an HTML fragment."""
+    # --- Input Validation ---
     if not file or not file.filename:
-        return P("No file uploaded. Please select a file.", cls="alert alert-warning")
+        # Return an error message if no file is received
+        return Div(P("No file uploaded. Please select an image file.", cls="alert alert-warning mt-3"), id="results") # Ensure id matches target
 
-    # Check if it's likely an image file (basic check)
+    # Basic check for allowed image file extensions
     allowed_extensions = {'.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp'}
     file_ext = Path(file.filename).suffix.lower()
     if file_ext not in allowed_extensions:
-         return P(f"Invalid file type: {file_ext}. Please upload an image (png, jpg, jpeg, gif, bmp, webp).", cls="alert alert-danger")
+         # Return an error message for invalid file types
+         return Div(P(f"Invalid file type: '{file_ext}'. Please upload an image ({', '.join(allowed_extensions)}).", cls="alert alert-danger mt-3"), id="results") # Ensure id matches target
 
-    print(f"Received file: {file.filename}, Content-Type: {file.content_type}")
+    print(f"Received file: {file.filename}, Content-Type: {file.content_type}, Size: {file.size}")
 
-    # Read image bytes
+    # --- Read Image Data ---
     try:
-        img_bytes = await file.read() # Use await for async file reading
+        img_bytes = await file.read() # Read the file content asynchronously
         if not img_bytes:
-             return P("Uploaded file is empty.", cls="alert alert-warning")
+             # Handle empty file upload
+             return Div(P("Uploaded file appears to be empty.", cls="alert alert-warning mt-3"), id="results") # Ensure id matches target
     except Exception as e:
-        print(f"Error reading file: {e}")
-        return P(f"Error reading uploaded file: {e}", cls="alert alert-danger")
+        print(f"Error reading uploaded file: {e}")
+        # Return an error if reading fails
+        return Div(P(f"Error reading uploaded file: {e}", cls="alert alert-danger mt-3"), id="results") # Ensure id matches target
 
-    # Perform prediction
+    # --- Perform Prediction ---
     prediction, confidence = predict_image(img_bytes)
 
-    # Encode image to base64 to display it back
+    # --- Prepare Response ---
+    # Encode image to base64 to display a preview, only if prediction was okay
     img_src = None
-    if "Error" not in prediction: # Only try to display image if prediction didn't fail critically
+    if "Error" not in str(prediction): # Check if the prediction result indicates an error
         try:
             img_base64 = base64.b64encode(img_bytes).decode('utf-8')
-            # Try to use the provided content type, default if necessary
+            # Try to use the provided content type, default if necessary or invalid
             content_type = file.content_type if file.content_type and file.content_type.startswith('image/') else 'image/jpeg'
             img_src = f"data:{content_type};base64,{img_base64}"
         except Exception as e:
             print(f"Error encoding image to base64: {e}")
-            # Don't display image if encoding fails, but still show prediction
+            # Log error, but proceed without image preview
 
-    # Return the results as HTML fragment
-    # Using Bootstrap alert classes for results
-    result_cls = "alert alert-danger" if "Error" in prediction else "alert alert-success"
+    # Determine result styling based on success or failure
+    result_cls = "alert alert-danger" if "Error" in str(prediction) else "alert alert-success"
 
+    # --- Return HTML Fragment ---
+    # This HTML will replace the content of the #results div
     return Div(
-        (Img(src=img_src, alt="Uploaded Image", style="max-width: 300px; max-height: 300px; margin-top: 15px; margin-bottom: 10px; display: block;") if img_src else P("Preview not available.")),
+        # Display image preview if available
+        (Img(src=img_src, alt="Uploaded Image Preview", style="max-width: 300px; max-height: 300px; margin-top: 15px; margin-bottom: 10px; display: block; border: 1px solid #ddd;") if img_src else P("Preview not available.")),
+        # Display prediction results or error message
         Div(cls=f"{result_cls} mt-3", role="alert",
             P(Strong("Prediction: "), f"{prediction}"),
-            P(Strong("Confidence: "), f"{confidence:.4f}") if "Error" not in prediction else ""
-        )
+            # Only show confidence if prediction was successful
+            (P(Strong("Confidence: "), f"{confidence:.4f}") if "Error" not in str(prediction) else None)
+        ),
+        # Important: The root element returned should match the hx-target for replacement,
+        # or be structured such that the target is updated as intended. Here, we replace the entire #results div content.
+        id="results", # Adding id here ensures the target div itself is replaced if needed, though innerHTML swap is default
+        hx_swap_oob="true" # Example if you wanted to update multiple targets, not needed here for innerHTML swap.
     )
 
-# --- Add CSS/JS ---
-# Add Bootstrap CSS and JS for styling and components (like the spinner)
-app.hdrs.append(
-    Script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js", integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL", crossorigin="anonymous"),
-)
+
+# --- Add CSS/JS Headers ---
+# Include Bootstrap CSS for styling and JS for potential component interactions (like dropdowns, modals, etc., though not used here)
+# FastHTML automatically includes HTMX
 app.sheets.append(
     Link(href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN", crossorigin="anonymous")
 )
-# Add HTMX itself (FastHTML includes a minimal version, but sometimes the full CDN is useful)
-# app.hdrs.append(Script(src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"))
-
+app.hdrs.append(
+    Script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js", integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL", crossorigin="anonymous"),
+)
 
-# --- Run the App (for local testing) ---
-# This part is mainly for running locally with `python app.py`
-# When deployed on Hugging Face Spaces, Uvicorn is run automatically based on the README config
+# --- Run the App (for local development) ---
+# This block is executed when you run `python app.py` directly.
+# Hugging Face Spaces will use its own mechanism to run the 'app' object via an ASGI server like Uvicorn.
 if __name__ == "__main__":
-    # Use port 8000 which is often standard for these deployments
+    print("Starting Uvicorn server for local development...")
+    # Use host="0.0.0.0" to make it accessible on your network
+    # Port 8000 is a common choice for web development
+    # reload=True automatically restarts the server when code changes (useful for development)
     uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=True)