Spaces:

Shad0wKillar
/

EfficientNet_TransferLearned

Sleeping

App Files Files Community

Shad0wKillar commited on 27 days ago

Commit

1e6f209

verified ·

1 Parent(s): 63ef65b

Centered in the right window.

Browse files

Files changed (1) hide show

main.py +30 -19

main.py CHANGED Viewed

@@ -9,7 +9,7 @@ from PIL import Image
 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},
@@ -18,7 +18,7 @@ MODEL_CONFIGS = {
 }
 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()
@@ -30,7 +30,7 @@ def create_model(model_type):
     )
     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)
@@ -50,7 +50,7 @@ class_names = ["pizza", "steak", "sushi"]
 @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">
@@ -64,11 +64,19 @@ async def read_root():
             .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; }
@@ -88,17 +96,19 @@ async def read_root():
             #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>
@@ -109,10 +119,10 @@ async def read_root():
                     <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)">
@@ -127,7 +137,10 @@ async def read_root():
             </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>
@@ -157,7 +170,6 @@ async def read_root():
                 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';
@@ -173,10 +185,8 @@ async def read_root():
                     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>
@@ -185,7 +195,7 @@ async def read_root():
                     statusMsg.style.display = 'none';
                     resultDisplay.classList.add('show');
                 } catch (e) {
-                    statusMsg.innerText = "Error during analysis.";
                 } finally {
                     btn.disabled = false;
                 }
@@ -198,6 +208,7 @@ async def read_root():
 @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"}

 app = FastAPI()
+# Model configurations mapped to the weights you provided
 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):
+    # I matched architectures to the weights in EfficientNet_TransferLearned.zip
     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
+# I pre-loaded the dictionary for faster response times
 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 adjusted the CSS flexbox for perfect horizontal and vertical alignment
     html_content = """
     <!DOCTYPE html>
     <html lang="en">
             .split-container { display: flex; height: 100vh; width: 100vw; }
             .left-panel { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #374151; background: #0f172a; }
+            /* I added flex-direction column and width 100% to ensure true centering */
+            .right-panel {
+                flex: 1.2;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                background-color: var(--bg);
+                position: relative;
+                text-align: center;
+            }
             .content-width { max-width: 400px; width: 100%; margin: 0 auto; }
             #preview { width: 100%; border-radius: 12px; display: none; margin-bottom: 20px; border: 1px solid #374151; object-fit: cover; height: 200px; }
+            .result-display { width: 100%; opacity: 0; transform: translateY(20px); transition: 0.5s ease-out; }
             .result-display.show { opacity: 1; transform: translateY(0); }
+            /* I forced the placeholder to occupy full width for centering */
+            #statusMsg { width: 100%; text-align: center; }
+            .placeholder-text { color: #4b5563; font-size: 1.2rem; font-style: italic; width: 100%; display: block; }
             .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; flex-wrap: wrap; padding: 0 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; width: 100%; text-align: center; }
         </style>
     </head>
     <body>
                     <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</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)">
             </div>
             <div class="right-panel" id="resultContainer">
+                <!-- I ensured this container is the central focus of the right side -->
+                <div id="statusMsg">
+                    <span class="placeholder-text">Ready for Prediction...</span>
+                </div>
                 <div class="result-display" id="resultDisplay">
                     <div class="prediction-title" id="topPrediction"></div>
                     <div class="prob-row" id="probList"></div>
                 const resultDisplay = document.getElementById('resultDisplay');
                 const btn = document.getElementById('runBtn');
                 resultDisplay.classList.remove('show');
                 statusMsg.innerHTML = '<div class="loading">ANALYZING...</div>';
                 statusMsg.style.display = 'block';
                     const entries = Object.entries(data);
                     const best = entries.reduce((a, b) => a[1] > b[1] ? a : b);
                     document.getElementById('topPrediction').innerText = best[0];
                     const list = document.getElementById('probList');
                     list.innerHTML = entries.map(([name, prob]) => `
                         <div class="prob-pill">${name.toUpperCase()}: ${prob.toFixed(2)}</div>
                     statusMsg.style.display = 'none';
                     resultDisplay.classList.add('show');
                 } catch (e) {
+                    statusMsg.innerHTML = '<span class="placeholder-text" style="color: #ef4444;">Error during analysis.</span>';
                 } finally {
                     btn.disabled = false;
                 }
 @app.post("/predict")
 async def predict(model_type: str = Query("b1"), file: UploadFile = File(...)):
+    # I kept the prediction logic optimized for LightBox's RAM
     if model_type not in loaded_models:
         return {"error": "Model not found"}