Update app.py

app.py

@@ -1,5 +1,3 @@
-# app.py
-
 import uvicorn
 import base64
 import io
@@ -9,23 +7,18 @@ from pathlib import Path
 from fastai.vision.all import *
 
 # FastHTML imports
-from fasthtml.common import * # Imports common HTML tags, App, etc.
-from fasthtml.core import FastHTML # Base class if needed, but App is usually sufficient
-from fasthtml.components import FileInput # Specific component for file input
-from fastcore.utils import * # For Upload class
+from fasthtml.common import *  # Imports common HTML tags, App, etc.
+from fasthtml.core import FastHTML  # Base class if needed, but App is usually sufficient
+from fasthtml.components import FileInput  # Specific component for file input
+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 works if model.pkl is in the same directory
 MODEL_PATH = Path(__file__).parent / 'model.pkl'
-# 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"Attempting to load model from: {MODEL_PATH.resolve()}") # Use resolve() for absolute path in logs
+    print(f"Attempting to load model from: {MODEL_PATH.resolve()}")
     if not MODEL_PATH.is_file():
         raise FileNotFoundError(f"Model file not found at calculated path: {MODEL_PATH.resolve()}")
     learn = load_learner(MODEL_PATH)
@@ -36,17 +29,14 @@ try:
 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"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/Uvicorn will automatically find this 'app' object when run via 'uvicorn app:app'
 app = FastHTML()
-rt = app.route # Shortcut for the route decorator
+rt = app.route  # Shortcut for the route decorator
 
 # --- Helper Function for Prediction ---
 def predict_image(img_bytes: bytes):
@@ -63,129 +53,121 @@ def predict_image(img_bytes: bytes):
         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: 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 and layout
     return Titled("Fastai Image Classifier",
-        Main(cls="container mt-4",
+        Main(
             H1("Upload an Image for Classification"),
             # --- 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",
-                    # File input element
-                    FileInput(name="file", id="fileInput", cls="form-control", required=True, accept="image/*"), # Added required and accept attributes
+                # Positional argument: Div that contains the file input
+                Div(
+                    FileInput(name="file", id="fileInput", cls="form-control", required=True, accept="image/*"),
+                    cls="mb-3"
                 ),
-                Button("Classify Image", type="submit", cls="btn btn-primary"), # Submit button
-
-                # --- 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
+                # Positional argument: Submit button
+                Button("Classify Image", type="submit", cls="btn btn-primary"),
+                # Keyword arguments: Form attributes
+                hx_post="/predict",
+                hx_target="#results",
+                hx_swap="innerHTML",
+                hx_encoding="multipart/form-data",
+                hx_indicator="#loading-spinner",
+                id="upload-form"
+            ),
             # --- 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(
+                Span("Loading...", cls="visually-hidden"),
+                id="loading-spinner", cls="htmx-indicator spinner-border mt-3",
+                role="status", style="display: none;"
             ),
             # --- 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
+            Div(
+                id="results", cls="mt-4"
+            ),
+            cls="container mt-4"
+        )
+    )
 
 @rt("/predict", methods=["POST"])
 async def post(request, file: Upload):
     """Handles image upload, performs prediction, and returns results as an HTML fragment."""
-    # --- Input Validation ---
     if not file or not file.filename:
-        # 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
+        return Div(
+            P("No file uploaded. Please select an image file.", cls="alert alert-warning mt-3"),
+            id="results"
+        )
 
-    # 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 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
+         return Div(
+             P(f"Invalid file type: '{file_ext}'. Please upload an image ({', '.join(allowed_extensions)}).", cls="alert alert-danger mt-3"),
+             id="results"
+         )
 
     print(f"Received file: {file.filename}, Content-Type: {file.content_type}, Size: {file.size}")
 
-    # --- Read Image Data ---
     try:
-        img_bytes = await file.read() # Read the file content asynchronously
+        img_bytes = await file.read()  # Read the file content asynchronously
         if not img_bytes:
-             # 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
+             return Div(
+                 P("Uploaded file appears to be empty.", cls="alert alert-warning mt-3"),
+                 id="results"
+             )
     except Exception as e:
         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
+        return Div(
+            P(f"Error reading uploaded file: {e}", cls="alert alert-danger mt-3"),
+            id="results"
+        )
 
     # --- Perform Prediction ---
     prediction, confidence = predict_image(img_bytes)
 
-    # --- Prepare Response ---
-    # Encode image to base64 to display a preview, only if prediction was okay
+    # Encode image to base64 for preview (only if prediction was successful)
     img_src = None
-    if "Error" not in str(prediction): # Check if the prediction result indicates an error
+    if "Error" not in str(prediction):
         try:
             img_base64 = base64.b64encode(img_bytes).decode('utf-8')
-            # 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'
+            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}")
-            # Log error, but proceed without image preview
 
-    # 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(
         # 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.")),
+        (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",
+        Div(
             P(Strong("Prediction: "), f"{prediction}"),
-            # Only show confidence if prediction was successful
-            (P(Strong("Confidence: "), f"{confidence:.4f}") if "Error" not in str(prediction) else None)
+            (P(Strong("Confidence: "), f"{confidence:.4f}") if "Error" not in str(prediction) else None),
+            cls=f"{result_cls} mt-3",
+            role="alert"
         ),
-        # 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.
+        id="results",
+        hx_swap_oob="true"
     )
 
-
 # --- 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/bootstrap@5.3.2/dist/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN", crossorigin="anonymous")
+    Link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css", rel="stylesheet",
+         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN", crossorigin="anonymous")
 )
 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"),
+    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 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__":
     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)
+    uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=True)