Spaces:

sumaye
/

Pest-detection

Sleeping

App Files Files Community

Fadhili Sumaye commited on Jul 11

Commit

436892e

1 Parent(s): cb1034b

Implement admin password page, database indexing, and optimize app lifecycle polling

Browse files

Files changed (4) hide show

app/src/main/java/com/example/pestdetection/ApiConfig.java +0 -17
app/src/main/java/com/example/pestdetection/MainActivity.java +12 -1
backend/admin.html +126 -47
backend/app.py +20 -3

app/src/main/java/com/example/pestdetection/ApiConfig.java CHANGED Viewed

@@ -27,17 +27,6 @@ public final class ApiConfig {
         return toHealthUrl(getPredictUrl(context));
     }
-    public static String getLoginUrl(Context context) {
-        return toAuthUrl(getPredictUrl(context), "/auth/login");
-    }
-    public static String getRegisterUrl(Context context) {
-        return toAuthUrl(getPredictUrl(context), "/auth/register");
-    }
-    public static String getHistoryUrl(Context context) {
-        return toAuthUrl(getPredictUrl(context), "/history");
-    }
     public static void savePredictUrl(Context context, String url) {
         if (url == null || url.trim().isEmpty()) {
@@ -72,10 +61,4 @@ public final class ApiConfig {
         return predictUrl + "/health";
     }
-    private static String toAuthUrl(String predictUrl, String endpoint) {
-        if (predictUrl.endsWith("/predict")) {
-            return predictUrl.substring(0, predictUrl.length() - "/predict".length()) + endpoint;
-        }
-        return predictUrl + endpoint;
-    }
 }

         return toHealthUrl(getPredictUrl(context));
     }
     public static void savePredictUrl(Context context, String url) {
         if (url == null || url.trim().isEmpty()) {
         return predictUrl + "/health";
     }
 }

app/src/main/java/com/example/pestdetection/MainActivity.java CHANGED Viewed

@@ -188,8 +188,19 @@ public class MainActivity extends AppCompatActivity {
     protected void onResume() {
         super.onResume();
         checkBackendConnection();
     }
     @Override
     protected void onDestroy() {
@@ -396,7 +407,7 @@ public class MainActivity extends AppCompatActivity {
                     } else if ("None".equalsIgnoreCase(pest)) {
                         resultText.setText("No Pests Detected");
                         treatmentText.setText(treatment);
-                        if (btnReportUnrecognized != null) btnReportUnrecognized.setVisibility(View.GONE);
                     } else {
                         resultText.setText(pest + " (" + (int) (confidence * 100) + "%)");
                         treatmentText.setText(treatment);

     protected void onResume() {
         super.onResume();
         checkBackendConnection();
+        if (activeReportId != -1) {
+            startPolling();
+        }
     }
+    @Override
+    protected void onPause() {
+        super.onPause();
+        if (pollingRunnable != null) {
+            pollingHandler.removeCallbacks(pollingRunnable);
+            pollingRunnable = null;
+        }
+    }
     @Override
     protected void onDestroy() {
                     } else if ("None".equalsIgnoreCase(pest)) {
                         resultText.setText("No Pests Detected");
                         treatmentText.setText(treatment);
+                        if (btnReportUnrecognized != null) btnReportUnrecognized.setVisibility(View.VISIBLE);
                     } else {
                         resultText.setText(pest + " (" + (int) (confidence * 100) + "%)");
                         treatmentText.setText(treatment);

backend/admin.html CHANGED Viewed

@@ -308,55 +308,73 @@
     </style>
 </head>
 <body>
-    <header>
-        <div class="logo-container">
-            <span class="logo-icon">🌾</span>
-            <div>
-                <h1>Pest Detection Admin</h1>
-                <p style="font-size: 0.75rem; color: var(--text-muted);">Real-time Crop Diagnostics Console</p>
-            </div>
         </div>
-        <div class="nav-stats">
-            <div class="stat-badge">
-                <span>Pending Review:</span>
-                <span class="stat-count pending" id="pending-count">0</span>
             </div>
-            <div class="stat-badge">
-                <span>Resolved:</span>
-                <span class="stat-count" id="resolved-count">0</span>
             </div>
-        </div>
-    </header>
-    <main>
-        <div class="notification-banner" id="notif-banner" style="display: none;">
-            <p>🔔 Enable desktop notifications to receive instant audio and visual alerts when users report unrecognized pests.</p>
-            <button onclick="requestNotificationPermission()">Enable Notifications</button>
-        </div>
-        <section>
-            <h2 class="section-title">🕒 Pending User Submissions</h2>
-            <div class="reports-grid" id="pending-reports-grid">
-                <div class="empty-state">
-                    <div class="empty-icon">🎉</div>
-                    <p>All clear! There are no pending unrecognized pest reports.</p>
                 </div>
-            </div>
-        </section>
-        <section style="margin-top: 4rem;">
-            <h2 class="section-title">✅ Resolved Submissions</h2>
-            <div class="reports-grid" id="resolved-reports-grid">
-                <div class="empty-state">
-                    <p>No reports resolved yet.</p>
                 </div>
-            </div>
-        </section>
-    </main>
-    <footer>
-        <p>Administered by Fadhili and Didas</p>
-    </footer>
     <audio id="alert-sound" src="https://assets.mixkit.co/active_storage/sfx/911/911-500.wav" preload="auto"></audio>
@@ -364,9 +382,55 @@
         let previousPendingIds = new Set();
         let isInitialLoad = true;
         async function fetchReports() {
             try {
-                const response = await fetch('/admin/api/reports');
                 const data = await response.json();
                 if (data.status === 'success') {
                     renderReports(data.reports);
@@ -383,6 +447,9 @@
             const pendingReports = reports.filter(r => r.status === 'pending');
             const resolvedReports = reports.filter(r => r.status === 'resolved');
             // Update stats in header
             document.getElementById('pending-count').textContent = pendingReports.length;
             document.getElementById('resolved-count').textContent = resolvedReports.length;
@@ -424,7 +491,7 @@
                 pendingGrid.innerHTML = pendingReports.map(r => `
                     <div class="report-card" id="card-${r.id}">
                         <div class="report-image-container">
-                            <img class="report-image" src="/admin/image/${r.image_path}" alt="Unrecognized pest">
                         </div>
                         <div class="report-details">
                             <div>
@@ -461,7 +528,7 @@
                 resolvedGrid.innerHTML = resolvedReports.map(r => `
                     <div class="report-card resolved-card">
                         <div class="report-image-container">
-                            <img class="report-image" src="/admin/image/${r.image_path}" alt="Resolved pest">
                         </div>
                         <div class="report-details">
                             <div>
@@ -494,8 +561,14 @@
             try {
                 const response = await fetch(`/admin/api/resolve/${id}`, {
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
                 if (data.status === 'success') {
                     // Remove card with visual fade effect
@@ -546,10 +619,16 @@
             }
         }
-        // Initialize and poll
-        checkNotificationPermission();
-        fetchReports();
-        setInterval(fetchReports, 10000);
     </script>
 </body>
 </html>

     </style>
 </head>
 <body>
+    <div id="login-view" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; flex: 1;">
+        <div style="background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1.5rem; padding: 3rem; width: 100%; max-width: 450px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.5);">
+            <span style="font-size: 3.5rem; display: block; margin-bottom: 1rem;">🌾</span>
+            <h2 style="font-size: 1.75rem; margin-bottom: 0.5rem; font-weight: 700; background: linear-gradient(to right, #10b981, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Pest Detection Admin</h2>
+            <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 2rem;">Enter admin password to access the console</p>
+            <form onsubmit="handleLogin(event)" style="display: flex; flex-direction: column; gap: 1rem; width: 100%;">
+                <div style="display: flex; flex-direction: column; text-align: left; gap: 0.5rem;">
+                    <label for="admin-password">Admin Password</label>
+                    <input type="password" id="admin-password" required placeholder="••••••••" style="background-color: #0b0f19; border: 1px solid var(--card-border); border-radius: 0.5rem; padding: 0.75rem 1rem; color: var(--text-main); font-size: 1rem; outline: none; transition: border-color 0.2s ease;">
+                </div>
+                <div id="login-error" style="color: var(--danger); font-size: 0.875rem; display: none; text-align: left; margin-top: 0.25rem;">❌ Incorrect password, please try again.</div>
+                <button type="submit" style="background-color: var(--accent-primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-weight: 600; font-size: 1rem; transition: background-color 0.2s ease; margin-top: 0.5rem;">Access Dashboard</button>
+            </form>
         </div>
+    </div>
+    <div id="dashboard-view" style="display: none; flex-direction: column; flex: 1; width: 100%;">
+        <header>
+            <div class="logo-container">
+                <span class="logo-icon">🌾</span>
+                <div>
+                    <h1>Pest Detection Admin</h1>
+                    <p style="font-size: 0.75rem; color: var(--text-muted);">Real-time Crop Diagnostics Console</p>
+                </div>
             </div>
+            <div class="nav-stats">
+                <div class="stat-badge">
+                    <span>Pending Review:</span>
+                    <span class="stat-count pending" id="pending-count">0</span>
+                </div>
+                <div class="stat-badge">
+                    <span>Resolved:</span>
+                    <span class="stat-count" id="resolved-count">0</span>
+                </div>
             </div>
+        </header>
+        <main>
+            <div class="notification-banner" id="notif-banner" style="display: none;">
+                <p>🔔 Enable desktop notifications to receive instant audio and visual alerts when users report unrecognized pests.</p>
+                <button onclick="requestNotificationPermission()">Enable Notifications</button>
+            </div>
+            <section>
+                <h2 class="section-title">🕒 Pending User Submissions</h2>
+                <div class="reports-grid" id="pending-reports-grid">
+                    <div class="empty-state">
+                        <div class="empty-icon">🎉</div>
+                        <p>All clear! There are no pending unrecognized pest reports.</p>
+                    </div>
                 </div>
+            </section>
+            <section style="margin-top: 4rem;">
+                <h2 class="section-title">✅ Resolved Submissions</h2>
+                <div class="reports-grid" id="resolved-reports-grid">
+                    <div class="empty-state">
+                        <p>No reports resolved yet.</p>
+                    </div>
                 </div>
+            </section>
+        </main>
+        <footer>
+            <p>Administered by Fadhili and Didas</p>
+        </footer>
+    </div>
     <audio id="alert-sound" src="https://assets.mixkit.co/active_storage/sfx/911/911-500.wav" preload="auto"></audio>
         let previousPendingIds = new Set();
         let isInitialLoad = true;
+        function getAuthHeaders() {
+            const password = sessionStorage.getItem('adminPassword') || '';
+            return {
+                'X-Admin-Password': password
+            };
+        }
+        async function handleLogin(event) {
+            event.preventDefault();
+            const passwordInput = document.getElementById('admin-password').value;
+            const errorDiv = document.getElementById('login-error');
+            try {
+                const response = await fetch('/admin/api/reports', {
+                    headers: { 'X-Admin-Password': passwordInput }
+                });
+                if (response.status === 200) {
+                    sessionStorage.setItem('adminPassword', passwordInput);
+                    errorDiv.style.display = 'none';
+                    showDashboard();
+                } else {
+                    errorDiv.style.display = 'block';
+                }
+            } catch (err) {
+                console.error("Login failed:", err);
+                errorDiv.style.display = 'block';
+            }
+        }
+        function showDashboard() {
+            document.getElementById('login-view').style.display = 'none';
+            document.getElementById('dashboard-view').style.display = 'flex';
+            checkNotificationPermission();
+            fetchReports();
+            setInterval(fetchReports, 10000);
+        }
         async function fetchReports() {
             try {
+                const response = await fetch('/admin/api/reports', {
+                    headers: getAuthHeaders()
+                });
+                if (response.status === 401) {
+                    // Password expired or changed, kick back to login
+                    sessionStorage.removeItem('adminPassword');
+                    location.reload();
+                    return;
+                }
                 const data = await response.json();
                 if (data.status === 'success') {
                     renderReports(data.reports);
             const pendingReports = reports.filter(r => r.status === 'pending');
             const resolvedReports = reports.filter(r => r.status === 'resolved');
+            const password = sessionStorage.getItem('adminPassword') || '';
+            const passwordParam = `?password=${encodeURIComponent(password)}`;
             // Update stats in header
             document.getElementById('pending-count').textContent = pendingReports.length;
             document.getElementById('resolved-count').textContent = resolvedReports.length;
                 pendingGrid.innerHTML = pendingReports.map(r => `
                     <div class="report-card" id="card-${r.id}">
                         <div class="report-image-container">
+                            <img class="report-image" src="/admin/image/${r.image_path}${passwordParam}" alt="Unrecognized pest">
                         </div>
                         <div class="report-details">
                             <div>
                 resolvedGrid.innerHTML = resolvedReports.map(r => `
                     <div class="report-card resolved-card">
                         <div class="report-image-container">
+                            <img class="report-image" src="/admin/image/${r.image_path}${passwordParam}" alt="Resolved pest">
                         </div>
                         <div class="report-details">
                             <div>
             try {
                 const response = await fetch(`/admin/api/resolve/${id}`, {
                     method: 'POST',
+                    headers: getAuthHeaders(),
                     body: formData
                 });
+                if (response.status === 401) {
+                    sessionStorage.removeItem('adminPassword');
+                    location.reload();
+                    return;
+                }
                 const data = await response.json();
                 if (data.status === 'success') {
                     // Remove card with visual fade effect
             }
         }
+        // Initialize session check
+        window.addEventListener('DOMContentLoaded', () => {
+            const savedPassword = sessionStorage.getItem('adminPassword');
+            if (savedPassword) {
+                showDashboard();
+            } else {
+                document.getElementById('login-view').style.display = 'flex';
+                document.getElementById('dashboard-view').style.display = 'none';
+            }
+        });
     </script>
 </body>
 </html>

backend/app.py CHANGED Viewed

@@ -49,6 +49,7 @@ def init_db():
             created_at DATETIME DEFAULT CURRENT_TIMESTAMP
         )
     """)
     conn.commit()
     # Prune audit logs older than 30 days
@@ -78,6 +79,21 @@ def log_audit(username: Optional[str], endpoint: str, status: str, details: str,
 init_db()
 app = FastAPI(title="Pest Detection API")
 # Configure CORS Middleware
@@ -605,7 +621,7 @@ def admin_dashboard():
     return HTMLResponse(content="<h1>Admin Dashboard Template Missing</h1>")
 @app.get("/admin/api/reports")
-def admin_get_reports():
     try:
         conn = sqlite3.connect(str(DB_FILE), timeout=30.0)
         conn.row_factory = sqlite3.Row
@@ -633,7 +649,8 @@ def admin_get_reports():
 def admin_resolve_report(
     report_id: int,
     pest_name: str = Form(...),
-    treatment: str = Form(...)
 ):
     try:
         conn = sqlite3.connect(str(DB_FILE), timeout=30.0)
@@ -649,7 +666,7 @@ def admin_resolve_report(
         raise HTTPException(status_code=500, detail=f"Database error: {e}")
 @app.get("/admin/image/{filename}")
-def admin_serve_image(filename: str):
     file_path = BASE_DIR / "uploads" / "unrecognized" / filename
     if file_path.exists():
         return FileResponse(str(file_path))

             created_at DATETIME DEFAULT CURRENT_TIMESTAMP
         )
     """)
+    cursor.execute("CREATE INDEX IF NOT EXISTS idx_unrecognized_reports_device_id ON unrecognized_reports (device_id);")
     conn.commit()
     # Prune audit logs older than 30 days
 init_db()
+from fastapi import Depends, Header, Query
+def authenticate_admin(
+    x_admin_password: Optional[str] = Header(None),
+    password: Optional[str] = Query(None)
+):
+    admin_pass = os.environ.get("ADMIN_PASSWORD", "admin123")
+    passed_pass = x_admin_password or password
+    if not passed_pass or passed_pass != admin_pass:
+        raise HTTPException(
+            status_code=401,
+            detail="Unauthorized: Invalid admin password"
+        )
+    return True
 app = FastAPI(title="Pest Detection API")
 # Configure CORS Middleware
     return HTMLResponse(content="<h1>Admin Dashboard Template Missing</h1>")
 @app.get("/admin/api/reports")
+def admin_get_reports(authenticated: bool = Depends(authenticate_admin)):
     try:
         conn = sqlite3.connect(str(DB_FILE), timeout=30.0)
         conn.row_factory = sqlite3.Row
 def admin_resolve_report(
     report_id: int,
     pest_name: str = Form(...),
+    treatment: str = Form(...),
+    authenticated: bool = Depends(authenticate_admin)
 ):
     try:
         conn = sqlite3.connect(str(DB_FILE), timeout=30.0)
         raise HTTPException(status_code=500, detail=f"Database error: {e}")
 @app.get("/admin/image/{filename}")
+def admin_serve_image(filename: str, authenticated: bool = Depends(authenticate_admin)):
     file_path = BASE_DIR / "uploads" / "unrecognized" / filename
     if file_path.exists():
         return FileResponse(str(file_path))