Spaces:

Shad0wKillar
/

EfficientNet_TransferLearned

Sleeping

App Files Files Community

Shad0wKillar commited on 23 days ago

Commit

63ef65b

verified ·

1 Parent(s): f98cb2d

Put some visual feedback

Browse files

Files changed (1) hide show

main.py +88 -56

main.py CHANGED Viewed

@@ -9,7 +9,7 @@ from PIL import Image
 app = FastAPI()
-# Model configurations for the pre-loaded dictionary
 MODEL_CONFIGS = {
     "b1": {"repo": "Shad0wKillar/efficientnet-b1", "file": "EfficientNet_B1_20percent.pth", "features": 1280},
     "b3": {"repo": "Shad0wKillar/efficientnet-b3", "file": "EfficientNet_B3_20percent.pth", "features": 1536},
@@ -18,7 +18,7 @@ MODEL_CONFIGS = {
 }
 def create_model(model_type):
-    # I matched architectures to their specific feature counts
     if model_type == "b1": model = torchvision.models.efficientnet_b1()
     elif model_type == "b3": model = torchvision.models.efficientnet_b3()
     elif model_type == "b5": model = torchvision.models.efficientnet_b5()
@@ -30,7 +30,7 @@ def create_model(model_type):
     )
     return model
-# I pre-loaded the models to avoid cold-start delays
 loaded_models = {}
 for m_type, config in MODEL_CONFIGS.items():
     m = create_model(m_type)
@@ -50,74 +50,96 @@ class_names = ["pizza", "steak", "sushi"]
 @app.get("/", response_class=HTMLResponse)
 async def read_root():
-    # I styled a new custom upload area and formatted the probability output
     html_content = """
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>EfficientNet Multi-Model API</title>
         <style>
-            body { font-family: system-ui, sans-serif; background-color: #0b0f19; color: #e5e7eb; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; }
-            .container { background-color: #1e293b; border: 1px solid #374151; border-radius: 12px; padding: 30px; width: 100%; max-width: 450px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); }
-            /* Styled Select Box */
-            select { width: 100%; padding: 12px; margin-bottom: 20px; border-radius: 8px; border: 1px solid #374151; background: #0b0f19; color: #e5e7eb; font-size: 14px; outline: none; }
-            /* Attractive Upload Area */
             .upload-label {
                 display: flex; flex-direction: column; align-items: center; justify-content: center;
-                width: 100%; height: 120px; border: 2px dashed #4b5563; border-radius: 12px;
-                cursor: pointer; transition: all 0.2s ease; margin-bottom: 20px; color: #9ca3af;
             }
-            .upload-label:hover { border-color: #3b82f6; background-color: #1a2333; color: #f3f4f6; }
             #imageInput { display: none; }
-            /* Run Button */
-            button { width: 100%; padding: 12px; background: #3b82f6; color: white; font-weight: 700; cursor: pointer; border: none; border-radius: 8px; transition: background 0.2s; }
-            button:hover { background: #2563eb; }
-            button:disabled { background: #4b5563; cursor: not-allowed; }
-            #preview { max-width: 100%; border-radius: 8px; display: none; margin-bottom: 20px; border: 1px solid #374151; }
-            .result-box { padding: 20px; background: #0b0f19; border-radius: 8px; display: none; text-align: center; border: 1px solid #374151; }
-            .prob-text { color: #fbbf24; font-family: monospace; font-size: 0.9rem; margin-top: 10px; line-height: 1.5; }
         </style>
     </head>
     <body>
-        <div class="container">
-            <h2 style="margin-top:0">Food Classifier</h2>
-            <label style="font-size: 12px; color: #9ca3af; display: block; margin-bottom: 5px;">Model Architecture</label>
-            <select id="modelSelect">
-                <option value="b1">EfficientNet-B1</option>
-                <option value="b3">EfficientNet-B3</option>
-                <option value="b5">EfficientNet-B5</option>
-                <option value="b7">EfficientNet-B7</option>
-            </select>
-            <input type="file" id="imageInput" accept="image/*" onchange="previewImage(event)">
-            <label for="imageInput" class="upload-label" id="dropZone">
-                <span style="font-size: 24px; margin-bottom: 8px;">📷</span>
-                <span id="uploadText">Click to upload image</span>
-            </label>
-            <img id="preview">
-            <button onclick="testAPI()" id="runBtn">Run Prediction</button>
-            <div class="result-box" id="resultBox">
-                <div id="topPrediction" style="font-size: 1.8rem; color: #10b981; font-weight: 800; text-transform: uppercase;"></div>
-                <div id="rawProbs" class="prob-text"></div>
             </div>
         </div>
         <script>
             function previewImage(event) {
-                const reader = new FileReader();
                 const file = event.target.files[0];
                 if (!file) return;
                 reader.onload = () => {
                     const p = document.getElementById('preview');
                     p.src = reader.result; p.style.display = 'block';
@@ -129,10 +151,17 @@ async def read_root():
             async function testAPI() {
                 const file = document.getElementById('imageInput').files[0];
                 const model = document.getElementById('modelSelect').value;
-                if (!file) return alert("Please select an image first");
                 const btn = document.getElementById('runBtn');
-                btn.innerText = "Analyzing..."; btn.disabled = true;
                 const formData = new FormData();
                 formData.append("file", file);
@@ -141,21 +170,25 @@ async def read_root():
                     const res = await fetch(`/predict?model_type=${model}`, { method: "POST", body: formData });
                     const data = await res.json();
-                    // I handled the decimal formatting and class extraction here
                     const entries = Object.entries(data);
                     const best = entries.reduce((a, b) => a[1] > b[1] ? a : b);
                     document.getElementById('topPrediction').innerText = best[0];
-                    // Cleaned up the probabilities display
-                    const formattedProbs = entries
-                        .map(([name, prob]) => `${name.toUpperCase()}: ${prob.toFixed(2)}`)
-                        .join(" | ");
-                    document.getElementById('rawProbs').innerText = formattedProbs;
-                    document.getElementById('resultBox').style.display = 'block';
-                } catch (e) { alert("Error: " + e.message); }
-                finally { btn.innerText = "Run Prediction"; btn.disabled = false; }
             }
         </script>
     </body>
@@ -165,7 +198,6 @@ async def read_root():
 @app.post("/predict")
 async def predict(model_type: str = Query("b1"), file: UploadFile = File(...)):
-    # I kept the routing logic the same for speed
     if model_type not in loaded_models:
         return {"error": "Model not found"}

 app = FastAPI()
+# Model configurations sourced from the setup in EfficientNet_TransferLearned.zip
 MODEL_CONFIGS = {
     "b1": {"repo": "Shad0wKillar/efficientnet-b1", "file": "EfficientNet_B1_20percent.pth", "features": 1280},
     "b3": {"repo": "Shad0wKillar/efficientnet-b3", "file": "EfficientNet_B3_20percent.pth", "features": 1536},
 }
 def create_model(model_type):
+    # Architecture mapping for the 4 versions
     if model_type == "b1": model = torchvision.models.efficientnet_b1()
     elif model_type == "b3": model = torchvision.models.efficientnet_b3()
     elif model_type == "b5": model = torchvision.models.efficientnet_b5()
     )
     return model
+# Pre-loading for high-speed inference on LightBox
 loaded_models = {}
 for m_type, config in MODEL_CONFIGS.items():
     m = create_model(m_type)
 @app.get("/", response_class=HTMLResponse)
 async def read_root():
+    # I implemented a flexbox layout to divide the screen vertically
     html_content = """
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>EfficientNet AI - MultiModel</title>
         <style>
+            :root { --bg: #0b0f19; --card: #1e293b; --accent: #3b82f6; --success: #10b981; --amber: #fbbf24; }
+            body, html { margin: 0; padding: 0; height: 100%; font-family: system-ui, sans-serif; background-color: var(--bg); color: #e5e7eb; overflow: hidden; }
+            .split-container { display: flex; height: 100vh; width: 100vw; }
+            /* Left Panel: Inputs */
+            .left-panel { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #374151; background: #0f172a; }
+            /* Right Panel: Results */
+            .right-panel { flex: 1.2; display: flex; align-items: center; justify-content: center; background-color: var(--bg); position: relative; }
+            .content-width { max-width: 400px; width: 100%; margin: 0 auto; }
+            select, button { width: 100%; padding: 14px; margin-bottom: 20px; border-radius: 10px; border: 1px solid #374151; background: var(--bg); color: white; font-size: 15px; outline: none; }
             .upload-label {
                 display: flex; flex-direction: column; align-items: center; justify-content: center;
+                width: 100%; height: 150px; border: 2px dashed #4b5563; border-radius: 15px;
+                cursor: pointer; transition: 0.3s; margin-bottom: 20px; background: #1e293b44;
             }
+            .upload-label:hover { border-color: var(--accent); background: #1e293b88; }
             #imageInput { display: none; }
+            button { background: var(--accent); font-weight: 700; border: none; transition: 0.2s; }
+            button:hover { background: #2563eb; transform: translateY(-1px); }
+            button:disabled { background: #4b5563; opacity: 0.6; }
+            #preview { width: 100%; border-radius: 12px; display: none; margin-bottom: 20px; border: 1px solid #374151; object-fit: cover; height: 200px; }
+            /* Results Styling */
+            .result-display { text-align: center; width: 80%; opacity: 0; transform: translateY(20px); transition: 0.5s ease-out; }
+            .result-display.show { opacity: 1; transform: translateY(0); }
+            .placeholder-text { color: #4b5563; font-size: 1.2rem; font-style: italic; }
+            .prediction-title { font-size: 4rem; font-weight: 900; color: var(--success); text-transform: uppercase; letter-spacing: -2px; margin: 0; }
+            .prob-row { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
+            .prob-pill { background: #1e293b; padding: 8px 15px; border-radius: 20px; border: 1px solid #374151; color: var(--amber); font-family: monospace; font-weight: bold; }
+            @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
+            .loading { animation: pulse 1s infinite; color: var(--accent); font-size: 1.5rem; font-weight: bold; }
         </style>
     </head>
     <body>
+        <div class="split-container">
+            <div class="left-panel">
+                <div class="content-width">
+                    <h2 style="margin: 0 0 10px 0; font-size: 2rem;">Classifier</h2>
+                    <p style="color: #9ca3af; margin-bottom: 30px;">Select a model and upload an image to begin.</p>
+                    <select id="modelSelect">
+                        <option value="b1">EfficientNet-B1 (Fast)</option>
+                        <option value="b3">EfficientNet-B3</option>
+                        <option value="b5">EfficientNet-B5</option>
+                        <option value="b7">EfficientNet-B7 (Max Accuracy)</option>
+                    </select>
+                    <input type="file" id="imageInput" accept="image/*" onchange="previewImage(event)">
+                    <label for="imageInput" class="upload-label">
+                        <span style="font-size: 32px; margin-bottom: 10px;">📤</span>
+                        <span id="uploadText">Drop or click to upload</span>
+                    </label>
+                    <img id="preview">
+                    <button onclick="testAPI()" id="runBtn">Run Analysis</button>
+                </div>
+            </div>
+            <div class="right-panel" id="resultContainer">
+                <div class="placeholder-text" id="statusMsg">Ready for Prediction...</div>
+                <div class="result-display" id="resultDisplay">
+                    <div class="prediction-title" id="topPrediction"></div>
+                    <div class="prob-row" id="probList"></div>
+                </div>
             </div>
         </div>
         <script>
             function previewImage(event) {
                 const file = event.target.files[0];
                 if (!file) return;
+                const reader = new FileReader();
                 reader.onload = () => {
                     const p = document.getElementById('preview');
                     p.src = reader.result; p.style.display = 'block';
             async function testAPI() {
                 const file = document.getElementById('imageInput').files[0];
                 const model = document.getElementById('modelSelect').value;
+                if (!file) return alert("Please select an image.");
+                const statusMsg = document.getElementById('statusMsg');
+                const resultDisplay = document.getElementById('resultDisplay');
                 const btn = document.getElementById('runBtn');
+                // I added a loading state to the right panel for instant feedback
+                resultDisplay.classList.remove('show');
+                statusMsg.innerHTML = '<div class="loading">ANALYZING...</div>';
+                statusMsg.style.display = 'block';
+                btn.disabled = true;
                 const formData = new FormData();
                 formData.append("file", file);
                     const res = await fetch(`/predict?model_type=${model}`, { method: "POST", body: formData });
                     const data = await res.json();
                     const entries = Object.entries(data);
                     const best = entries.reduce((a, b) => a[1] > b[1] ? a : b);
+                    // Update UI components
                     document.getElementById('topPrediction').innerText = best[0];
+                    // I used .toFixed(2) to clean up the overflow issue seen in image_3ac61a.png
+                    const list = document.getElementById('probList');
+                    list.innerHTML = entries.map(([name, prob]) => `
+                        <div class="prob-pill">${name.toUpperCase()}: ${prob.toFixed(2)}</div>
+                    `).join("");
+                    statusMsg.style.display = 'none';
+                    resultDisplay.classList.add('show');
+                } catch (e) {
+                    statusMsg.innerText = "Error during analysis.";
+                } finally {
+                    btn.disabled = false;
+                }
             }
         </script>
     </body>
 @app.post("/predict")
 async def predict(model_type: str = Query("b1"), file: UploadFile = File(...)):
     if model_type not in loaded_models:
         return {"error": "Model not found"}