Cloud commit

backend/app.py

@@ -101,8 +101,8 @@ def home():
 
 
 # --- REMOVED: The local run block is removed. Gunicorn will handle startup on Render. ---
-# if __name__ == "__main__":
-#     print("🚀 Starting Adaptive AI NIDS Backend (threading mode)...")
+if __name__ == "__main__":
+     print("🚀 Starting Adaptive AI NIDS Backend (threading mode)...")
 #     # Run without debug — debug spawns extra processes and uses more CPU
-#     socketio.run(app, host="0.0.0.0", port=5000, debug=False)
+     socketio.run(app, host="0.0.0.0", port=5000, debug=False)
 

frontend/src/App.jsx

@@ -1,10 +1,13 @@
-import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, useLocation, Navigate } from "react-router-dom";
 import { LiveDataProvider } from "./context/DataContext";
 import { AuthProvider } from "./context/AuthContext";
 import ProtectedRoute from "./components/ProtectedRoute";
 import Sidebar from "./components/Sidebar";
 import { useState } from "react";
 
+// --- IMPORT THE GUARD ---
+import FeatureGuard from "./components/FeatureGuard"; 
+
 import AuthPage from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import LiveTraffic from "./components/dashboard/LiveDashboard";
@@ -23,14 +26,15 @@ import SamplePred from "./pages/MLAttackSamplesPage";
 import Aichat from "./pages/ChatAssistant";
 import MainLayout from "./components/MainLayout";
 
-
-// Layout wrapper
 function AppLayout() {
   const location = useLocation();
   const hideSidebar = location.pathname === "/login";
-
   const [collapsed, setCollapsed] = useState(false);
 
+  // 🛠️ DEFINE LOCAL-ONLY ROUTES HERE
+  const localOnlyRoutes = ["/livetraffic", "/flow", "/system", "/traffic"];
+  const isProtectedFeature = localOnlyRoutes.includes(location.pathname);
+
   return (
     <div className="flex min-h-screen text-slate-100 relative bg-transparent">
       <ConstellationBackground />
@@ -44,23 +48,33 @@ function AppLayout() {
           ${collapsed ? "ml-20" : "ml-64"}
         `}
       >
-        <Routes>
-          <Route path="/login" element={<AuthPage />} />
-          <Route path="/" element={<ProtectedRoute><MainLayout><Dashboard /></MainLayout></ProtectedRoute>} />
-          <Route path="/livetraffic" element={<ProtectedRoute><MainLayout><LiveTraffic /></MainLayout></ProtectedRoute>} />
-          <Route path="/flow" element={<ProtectedRoute><MainLayout><FlowPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/settings" element={<ProtectedRoute><MainLayout><SettingsPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/alerts" element={<ProtectedRoute><MainLayout><InfoPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/traffic" element={<ProtectedRoute><MainLayout><TrafficPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/samplepred" element={<ProtectedRoute><MainLayout><SamplePred /></MainLayout></ProtectedRoute>} />
-          <Route path="/incidents" element={<ProtectedRoute><MainLayout><IncidentsPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/threats" element={<ProtectedRoute><MainLayout><ThreatIntel /></MainLayout></ProtectedRoute>} />
-          <Route path="/reports" element={<ProtectedRoute><MainLayout><Reports /></MainLayout></ProtectedRoute>} />
-          <Route path="/system" element={<ProtectedRoute><MainLayout><SystemPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/response" element={<ProtectedRoute><MainLayout><ResponsePage /></MainLayout></ProtectedRoute>} />
-          <Route path="/mlmodels" element={<ProtectedRoute><MainLayout><MlmodelPage /></MainLayout></ProtectedRoute>} />
-          <Route path="/chat" element={<ProtectedRoute><Aichat /></ProtectedRoute>} />
-        </Routes>
+        {/* Wrap the Routes in the FeatureGuard. 
+            It will only trigger the popup if the current path is in localOnlyRoutes 
+            AND the user is not on localhost.
+        */}
+        <FeatureGuard requireLocal={isProtectedFeature}>
+          <Routes>
+            <Route path="/login" element={<AuthPage />} />
+            <Route path="/" element={<ProtectedRoute><MainLayout><Dashboard /></MainLayout></ProtectedRoute>} />
+            
+            {/* These routes will now trigger the popup if deployed */}
+            <Route path="/livetraffic" element={<ProtectedRoute><MainLayout><LiveTraffic /></MainLayout></ProtectedRoute>} />
+            <Route path="/flow" element={<ProtectedRoute><MainLayout><FlowPage /></MainLayout></ProtectedRoute>} />
+            <Route path="/system" element={<ProtectedRoute><MainLayout><SystemPage /></MainLayout></ProtectedRoute>} />
+            <Route path="/traffic" element={<ProtectedRoute><MainLayout><TrafficPage /></MainLayout></ProtectedRoute>} />
+            
+            {/* These routes work fine in the cloud (Database/AI based) */}
+            <Route path="/settings" element={<ProtectedRoute><MainLayout><SettingsPage /></MainLayout></ProtectedRoute>} />
+            <Route path="/alerts" element={<ProtectedRoute><MainLayout><InfoPage /></MainLayout></ProtectedRoute>} />
+            <Route path="/samplepred" element={<ProtectedRoute><MainLayout><SamplePred /></MainLayout></ProtectedRoute>} />
+            <Route path="/incidents" element={<ProtectedRoute><MainLayout><IncidentsPage /></MainLayout></ProtectedRoute>} />
+            <Route path="/threats" element={<ProtectedRoute><MainLayout><ThreatIntel /></MainLayout></ProtectedRoute>} />
+            <Route path="/reports" element={<ProtectedRoute><MainLayout><Reports /></MainLayout></ProtectedRoute>} />
+            <Route path="/response" element={<ProtectedRoute><MainLayout><ResponsePage /></MainLayout></ProtectedRoute>} />
+            <Route path="/mlmodels" element={<ProtectedRoute><MainLayout><MlmodelPage /></MainLayout></ProtectedRoute>} />
+            <Route path="/chat" element={<ProtectedRoute><Aichat /></ProtectedRoute>} />
+          </Routes>
+        </FeatureGuard>
       </main>
     </div>
   );
@@ -76,5 +90,4 @@ export default function App() {
       </LiveDataProvider>
     </AuthProvider>
   );
-}
-
+}

frontend/src/api.js

@@ -3,19 +3,19 @@
 // ===============================================
 
 const BASE_URL =
-  import.meta.env.VITE_API_URL || "http://127.0.0.1:5000";
+ import.meta.env.VITE_API_URL || "http://127.0.0.1:5000";
 
 // Safe fetch wrapper
 async function safeFetch(url, options = {}, timeout = 10000, retries = 1) {
-  const controller = new AbortController();
-  const id = setTimeout(() => controller.abort(), timeout);
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), timeout);
 
-  try {
-    const res = await fetch(url, { ...options, signal: controller.signal });
+ try {
+     const res = await fetch(url, { ...options, signal: controller.signal });
 
-    if (!res.ok) {
-      const errText = await res.text();
-      throw new Error(`HTTP ${res.status}: ${errText}`);
+    if (!res.ok) {
+     const errText = await res.text();
+     throw new Error(`HTTP ${res.status}: ${errText}`);
     }
     return await res.json();
   } catch (err) {
@@ -173,8 +173,8 @@ export const offlinePredictAPI = async (file, model) => {
 
 // ➤ Get PDF forensic report download link
 export const downloadOfflineReport = () => {
-  // FIX: Using BASE_URL for live deployment
-  window.open(`${BASE_URL}/api/offline/report`, "_blank");
+// FIX: Using BASE_URL for live deployment
+     window.open(`${BASE_URL}/api/offline/report`, "_blank");
 };
 
 

frontend/src/components/FeatureGuard.jsx

@@ -0,0 +1,63 @@
+// FeatureGuard.jsx
+import React, { useState, useEffect } from "react";
+import { AlertTriangle, Github, Monitor, Terminal } from "lucide-react";
+
+const FeatureGuard = ({ children, requireLocal = false }) => {
+  const [isLocal, setIsLocal] = useState(true);
+  const [showPopup, setShowPopup] = useState(false);
+
+  useEffect(() => {
+    // Detect environment
+    const local = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
+    setIsLocal(local);
+    
+    // Only show popup if it's required AND we are not local
+    if (requireLocal && !local) {
+      setShowPopup(true);
+    }
+  }, [requireLocal]);
+
+  // If we are local, or the feature doesn't require local access, show content normally
+  if (isLocal || !requireLocal) return <>{children}</>;
+
+  return (
+    <div className="relative min-h-screen">
+      {/* Background content is blurred for "Demo" look */}
+      <div className="blur-lg pointer-events-none opacity-50">
+        {children}
+      </div>
+
+      {showPopup && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
+          <div className="bg-[#0b1120] border-2 border-cyan-500/50 rounded-2xl p-8 max-w-lg w-full shadow-[0_0_50px_rgba(6,182,212,0.4)]">
+            <div className="flex items-center gap-3 text-amber-400 mb-4">
+              <AlertTriangle size={28} />
+              <h2 className="text-2xl font-bold">Local Agent Required</h2>
+            </div>
+            
+            <p className="text-gray-300 mb-6">
+              This page requires <b>Live Network Sniffing</b>. To protect privacy, browsers cannot access your hardware. Please run the project locally.
+            </p>
+
+            <div className="bg-black/40 rounded-lg p-4 font-mono text-sm border border-cyan-900/50 mb-6">
+              <p className="text-emerald-400">$ git clone [Your-Repo-URL]</p>
+              <p className="text-blue-400">$ cd nids-project</p>
+              <p className="text-purple-400">$ python app.py --mode live</p>
+            </div>
+
+            <div className="flex gap-3">
+              <button onClick={() => window.open('https://github.com/your-repo', '_blank')} className="flex-1 bg-cyan-600 py-3 rounded-xl font-bold hover:bg-cyan-500 transition-all flex items-center justify-center gap-2">
+                <Github size={18}/> GitHub
+              </button>
+              <button onClick={() => window.history.back()} className="flex-1 bg-gray-800 py-3 rounded-xl font-bold hover:bg-gray-700 transition-all text-gray-400">
+                Go Back
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FeatureGuard;