Upload 5 files

Browse files

Files changed (5) hide show

class_indices.pkl +3 -0
fracture_detection_model.pkl +3 -0
index.html +183 -0
main.py +123 -0
new.py +28 -0

class_indices.pkl ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:83b58cbb37e7e8805499e59d9449b182d7cfcc574006075db6e53df072c181c1
+size 151

fracture_detection_model.pkl ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:c9154619b16f95469b5188f54a0e3d71f0a3737c902a8687738d3fa8044acf32
+size 228494688

index.html ADDED Viewed

	@@ -0,0 +1,183 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>X-ray Fracture Detection</title>
+    <!-- Tailwind CSS for styling -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Inter font from Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        /* Simple spinner animation */
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 4px solid #3498db;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div class="w-full max-w-lg mx-auto bg-white rounded-xl shadow-lg p-8 md:p-12">
+        <!-- Header -->
+        <div class="text-center mb-8">
+            <h1 class="text-3xl font-bold text-gray-800">Fracture Detection AI</h1>
+            <p class="text-gray-500 mt-2">Upload an X-ray image to check for fractures.</p>
+        </div>
+        <!-- File Upload Section -->
+        <div>
+            <!-- Styled file input -->
+            <label for="file-upload" class="w-full cursor-pointer bg-gray-200 text-gray-700 font-semibold py-3 px-4 rounded-lg inline-flex items-center justify-center hover:bg-gray-300 transition duration-300">
+                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
+                <span id="file-label">Select an X-ray Image</span>
+            </label>
+            <input id="file-upload" type="file" class="hidden" accept="image/*">
+        </div>
+        <!-- Image Preview -->
+        <div id="image-preview-container" class="mt-6 text-center hidden">
+            <p class="text-sm font-medium text-gray-600 mb-2">Image Preview:</p>
+            <img id="image-preview" src="#" alt="Image preview" class="max-w-xs mx-auto rounded-lg shadow-md"/>
+        </div>
+        <!-- Predict Button -->
+        <div class="mt-8">
+            <button id="predict-button" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transition duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
+                Upload & Predict
+            </button>
+        </div>
+        <!-- Results Section -->
+        <div id="results" class="mt-8 text-center hidden">
+             <!-- Spinner -->
+            <div id="loader" class="loader mx-auto hidden"></div>
+            <!-- Result Text -->
+            <div id="result-text" class="mt-4 p-4 rounded-lg"></div>
+        </div>
+        <!-- Error Message -->
+        <div id="error-message" class="mt-6 text-center text-red-600 font-semibold hidden"></div>
+    </div>
+    <script>
+        const fileUpload = document.getElementById('file-upload');
+        const fileLabel = document.getElementById('file-label');
+        const imagePreviewContainer = document.getElementById('image-preview-container');
+        const imagePreview = document.getElementById('image-preview');
+        const predictButton = document.getElementById('predict-button');
+        const resultsDiv = document.getElementById('results');
+        const resultText = document.getElementById('result-text');
+        const loader = document.getElementById('loader');
+        const errorMessage = document.getElementById('error-message');
+        let selectedFile = null;
+        // Listen for file selection
+        fileUpload.addEventListener('change', (event) => {
+            selectedFile = event.target.files[0];
+            if (selectedFile) {
+                // Update label text
+                fileLabel.textContent = selectedFile.name;
+                // Show image preview
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    imagePreview.src = e.target.result;
+                    imagePreviewContainer.classList.remove('hidden');
+                };
+                reader.readAsDataURL(selectedFile);
+                // Enable predict button
+                predictButton.disabled = false;
+                // Reset previous results
+                resultsDiv.classList.add('hidden');
+                errorMessage.classList.add('hidden');
+            }
+        });
+        // Listen for predict button click
+        predictButton.addEventListener('click', async () => {
+            if (!selectedFile) return;
+            // Prepare for API call
+            const formData = new FormData();
+            formData.append('file', selectedFile);
+            // Show loading spinner and hide previous results
+            resultsDiv.classList.remove('hidden');
+            loader.classList.remove('hidden');
+            resultText.classList.add('hidden');
+            errorMessage.classList.add('hidden');
+            predictButton.disabled = true;
+            try {
+                // IMPORTANT: This assumes your FastAPI server is running on http://127.0.0.1:8000
+                const response = await fetch('http://127.0.0.1:8000/predict', {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || `Server error: ${response.statusText}`);
+                }
+                const data = await response.json();
+                // Display the result
+                displayResult(data);
+            } catch (error) {
+                // Display error message
+                console.error('Error:', error);
+                errorMessage.textContent = `Error: Could not connect to the API or the file is invalid. Make sure the server is running. Details: ${error.message}`;
+                errorMessage.classList.remove('hidden');
+                resultsDiv.classList.add('hidden');
+            } finally {
+                // Hide loader and re-enable button
+                loader.classList.add('hidden');
+                predictButton.disabled = false;
+            }
+        });
+        function displayResult(data) {
+            const prediction = data.prediction;
+            const confidence = parseFloat(data.confidence) * 100;
+            // Clear previous styles
+            resultText.classList.remove('bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800', 'bg-yellow-100', 'text-yellow-800');
+            let resultHTML = `<p class="text-xl font-bold">Prediction: <span class="capitalize">${prediction}</span></p>
+                              <p class="text-md mt-1">Confidence: ${confidence.toFixed(2)}%</p>`;
+            // Style based on prediction
+            if (prediction.toLowerCase().includes('fracture')) {
+                 resultText.classList.add('bg-red-100', 'text-red-800');
+            } else {
+                 resultText.classList.add('bg-green-100', 'text-green-800');
+            }
+            resultText.innerHTML = resultHTML;
+            resultText.classList.remove('hidden');
+        }
+    </script>
+</body>
+</html>

main.py ADDED Viewed

	@@ -0,0 +1,123 @@

+import fastapi
+from fastapi import File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware # Added for frontend communication
+import uvicorn
+import pickle
+import numpy as np
+import tensorflow as tf
+from PIL import Image
+import io
+import os
+# --- Basic FastAPI App Setup ---
+app = fastapi.FastAPI(
+    title="X-ray Fracture Detection API",
+    description="An API to predict bone fractures from X-ray images.",
+    version="1.0.0"
+)
+# --- CORS (Cross-Origin Resource Sharing) Middleware ---
+# This is the new section that fixes the "Failed to fetch" error.
+# It allows your HTML frontend to communicate with this Python backend.
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allows all origins
+    allow_credentials=True,
+    allow_methods=["*"],  # Allows all methods (GET, POST, etc.)
+    allow_headers=["*"],  # Allows all headers
+)
+# --- Loading the Model and Class Indices ---
+# Note: Ensure these .pkl files are in the same directory as this script.
+MODEL_PATH = 'fracture_detection_model.pkl'
+CLASS_INDICES_PATH = 'class_indices.pkl'
+# Check if model files exist before loading
+if not os.path.exists(MODEL_PATH) or not os.path.exists(CLASS_INDICES_PATH):
+    raise RuntimeError(f"Model or class indices files not found. Please ensure '{MODEL_PATH}' and '{CLASS_INDICES_PATH}' are in the correct directory.")
+# Load the trained model
+try:
+    with open(MODEL_PATH, 'rb') as f:
+        model = pickle.load(f)
+except Exception as e:
+    raise RuntimeError(f"Error loading the model: {e}")
+# Load the class indices
+try:
+    with open(CLASS_INDICES_PATH, 'rb') as f:
+        class_indices = pickle.load(f)
+    # Invert the dictionary to map index to class name
+    class_names = {v: k for k, v in class_indices.items()}
+except Exception as e:
+    raise RuntimeError(f"Error loading class indices: {e}")
+print("--- Model and class indices loaded successfully! ---")
+# --- Image Preprocessing Function ---
+def preprocess_image(image_bytes: bytes, target_size=(150, 150)) -> np.ndarray:
+    """
+    Preprocesses the uploaded image to match the model's input requirements.
+    """
+    try:
+        # Open the image from bytes
+        img = Image.open(io.BytesIO(image_bytes))
+        # Ensure image is in RGB format
+        if img.mode != "RGB":
+            img = img.convert("RGB")
+        # Resize the image
+        img = img.resize(target_size)
+        # Convert image to numpy array and scale pixel values
+        img_array = tf.keras.preprocessing.image.img_to_array(img)
+        img_array = img_array / 255.0
+        # Expand dimensions to create a batch of 1
+        img_batch = np.expand_dims(img_array, axis=0)
+        return img_batch
+    except Exception as e:
+        # Raise an HTTPException for bad image data
+        raise HTTPException(status_code=400, detail=f"Image preprocessing failed: {e}")
+# --- Prediction Endpoint ---
+@app.post("/predict")
+async def predict(file: UploadFile = File(...)):
+    """
+    Accepts an X-ray image file and returns the predicted fracture type.
+    """
+    # 1. Read the image file uploaded by the user
+    image_bytes = await file.read()
+    # 2. Preprocess the image to prepare it for the model
+    processed_image = preprocess_image(image_bytes)
+    # 3. Make a prediction using the loaded model
+    prediction = model.predict(processed_image)
+    # 4. Process the prediction result
+    # Find the index of the highest probability
+    predicted_index = np.argmax(prediction[0])
+    # Get the corresponding class name
+    predicted_class = class_names[predicted_index]
+    # Get the confidence score
+    confidence = float(prediction[0][predicted_index])
+    # 5. Return the result in a JSON format
+    return {
+        "prediction": predicted_class,
+        "confidence": f"{confidence:.2f}"
+    }
+# --- Root Endpoint ---
+@app.get("/")
+def read_root():
+    return {"message": "Welcome to the Fracture Detection API. Please use the /docs endpoint for more information."}
+# --- To run this application ---
+# 1. Install necessary libraries: pip install fastapi "uvicorn[standard]" tensorflow numpy Pillow python-multipart
+# 2. Save your .pkl files in the same directory as this script.
+# 3. Run from your terminal: uvicorn main:app --reload

new.py ADDED Viewed

	@@ -0,0 +1,28 @@

+import pickle
+# Define the path to your pickle file
+file_path = 'class_indices.pkl'
+try:
+    # Open the file in binary read mode ('rb')
+    with open(file_path, 'rb') as f:
+        # Load the data from the file
+        class_indices = pickle.load(f)
+        # The number of classes is the length of the dictionary/list
+        num_classes = len(class_indices)
+        print(f"✅ Found {num_classes} classes in '{file_path}'.")
+        # Optional: Print the first 5 class mappings to see what they look like
+        if isinstance(class_indices, dict):
+            print("\nHere are a few examples:")
+            for i, (class_name, index) in enumerate(class_indices.items()):
+                if i >= 5:
+                    break
+                print(f"  - '{class_name}': {index}")
+except FileNotFoundError:
+    print(f"❌ Error: The file '{file_path}' was not found.")
+except Exception as e:
+    print(f"An error occurred: {e}")