feat: Add 8 new Western-inspired public grievance detectors#391
feat: Add 8 new Western-inspired public grievance detectors#391RohanExploit wants to merge 4 commits intomainfrom
Conversation
- Implement `GenericDetector` component for reusable camera and detection logic. - Add `TrafficSignDetector`, `AbandonedVehicleDetector`, `PublicFacilitiesDetector`, `ConstructionSafetyDetector`. - Add `AccessibilityDetector`, `WaterLeakDetector`, `CrowdDetector`, `WasteDetector`. - Add corresponding backend endpoints in `backend/routers/detection.py` using Hugging Face CLIP. - Update `App.jsx` with routes for all new detectors. - Update `Home.jsx` to display buttons for these new features. - Ensure all features are lightweight using `GenericDetector` and optimized backend calls. - Verify functionality with automated tests and frontend verification script. Co-authored-by: RohanExploit <178623867+RohanExploit@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
❌ Deploy Preview for fixmybharat failed. Why did it fail? →
|
🙏 Thank you for your contribution, @RohanExploit!PR Details:
Quality Checklist:
Review Process:
Note: The maintainers will monitor code quality and ensure the overall project flow isn't broken. |
📝 WalkthroughWalkthroughFrontend package.json updated with React/ReactDOM versions bumped to ^18.2.0, react-router-dom to ^6.22.0, and several build tools (tailwindcss, vite, autoprefixer, postcss, vite-plugin-pwa) restructured from devDependencies to dependencies. Version downgrades applied to type definitions and eslint-related plugins. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@frontend/src/App.jsx`:
- Around line 302-309: Update all Route elements that pass an onBack prop to use
navigate('/home') instead of navigate('/'); specifically change every onBack={()
=> navigate('/')} occurrences for the detector routes (e.g.,
TrafficSignDetector, AbandonedVehicleDetector, PublicFacilitiesDetector,
ConstructionSafetyDetector, AccessibilityDetector, WaterLeakDetector,
CrowdDetector, WasteDetector and the pre-existing detector routes earlier in the
file) so the "Back to Home" buttons navigate to '/home' consistently with the
Home route change.
In `@frontend/src/components/GenericDetector.jsx`:
- Around line 181-183: The dynamic Tailwind class interpolation in
GenericDetector.jsx (btnClass using `bg-${buttonColor}-600`) will be purged in
production; replace the interpolation with a static lookup map of full class
strings keyed by buttonColor (e.g., a colorsToClasses object) and use that map
when computing btnClass (respecting isDetecting fallback to the red classes);
update any references to btnClass generation in the component so it selects the
pre-defined class strings rather than building them dynamically.
In `@frontend/src/TrafficSignDetector.jsx`:
- Around line 11-13: GenericDetector currently builds Tailwind classes with a
template literal using buttonColor (e.g., `bg-${buttonColor}-600
hover:bg-${buttonColor}-700`), which JIT can't detect; replace the dynamic
template with a static mapping (e.g., a COLOR_CLASS_MAP constant inside
GenericDetector mapping "yellow","cyan","purple","gray", etc. to their full
class strings) and use COLOR_CLASS_MAP[buttonColor] (and equivalent maps for
bg/draw classes) wherever GenericDetector constructs classes, or alternatively
add the exact classes to the Tailwind safelist in tailwind.config.js; update
usages of the buttonColor/drawColor/color props to read from the static map
(symbols: GenericDetector, buttonColor, drawColor, COLOR_CLASS_MAP).
In `@frontend/src/views/Home.jsx`:
- Line 87: The new menu/items use hardcoded English labels (e.g., the object
with id 'accessibility' and similar entries for 'construction' and
'public-facilities') which bypass the app i18n; update those entries in
frontend/src/views/Home.jsx to call the translation function t() with keys like
t('home.issues.accessibility'), t('home.issues.construction'), and
t('home.issues.publicFacilities') (matching your translation key naming
convention), and ensure the component has access to the t function (e.g., from
useTranslation or props) where the items array is defined so the labels render
localized strings.
🧹 Nitpick comments (5)
backend/routers/detection.py (1)
443-474: Missing image validation and optimization — inconsistent with other endpoints.These two new endpoints read raw bytes via
await image.read()without callingprocess_uploaded_image(), which performs file-type validation and image optimization. Most other CLIP-based endpoints (e.g.,detect_illegal_parking_endpointat Line 122,detect_water_leak_endpointat Line 216) useprocess_uploaded_image. The traffic-sign and abandoned-vehicle endpoints also skip it, but that appears to be an oversight that's being propagated.Without validation, malformed or non-image uploads will pass through to the HF API, wasting quota and potentially returning confusing errors.
♻️ Suggested fix — use process_uploaded_image for consistency
`@router.post`("/api/detect-public-facilities") async def detect_public_facilities_endpoint(request: Request, image: UploadFile = File(...)): - try: - image_bytes = await image.read() - except Exception as e: - logger.error(f"Invalid image file: {e}", exc_info=True) - raise HTTPException(status_code=400, detail="Invalid image file") + _, image_bytes = await process_uploaded_image(image) try: client = get_http_client(request) detections = await detect_public_facilities_clip(image_bytes, client=client) return {"detections": detections} except Exception as e: logger.error(f"Public facilities detection error: {e}", exc_info=True) raise HTTPException(status_code=500, detail="Internal server error") `@router.post`("/api/detect-construction-safety") async def detect_construction_safety_endpoint(request: Request, image: UploadFile = File(...)): - try: - image_bytes = await image.read() - except Exception as e: - logger.error(f"Invalid image file: {e}", exc_info=True) - raise HTTPException(status_code=400, detail="Invalid image file") + _, image_bytes = await process_uploaded_image(image) try: client = get_http_client(request) detections = await detect_construction_safety_clip(image_bytes, client=client) return {"detections": detections} except Exception as e: logger.error(f"Construction safety detection error: {e}", exc_info=True) raise HTTPException(status_code=500, detail="Internal server error")The same fix should ideally be applied to
detect_traffic_sign_endpointanddetect_abandoned_vehicle_endpointas well.frontend/src/components/GenericDetector.jsx (3)
161-179: Stale closure:detectFramecaptured bysetIntervalwill never see updated state or props.
detectFrameis defined during render and closes over the current values ofisDetecting,apiEndpoint, etc. ThesetIntervalin the effect captures that single reference. While this is safe today (wrappers pass static props and the interval is cleared onisDetectingchange), it will silently break if the component is ever used with dynamic props.A more robust approach would use a ref for the latest
detectFrameor usesetTimeoutchaining (which re-evaluates on each tick):♻️ Suggested: replace setInterval with chained setTimeout
useEffect(() => { - let interval; + let timeoutId; + let cancelled = false; + + const tick = async () => { + if (cancelled) return; + await detectFrame(); + if (!cancelled) { + timeoutId = setTimeout(tick, 2000); + } + }; + if (isDetecting) { startCamera(); - interval = setInterval(detectFrame, 2000); + timeoutId = setTimeout(tick, 2000); } else { stopCamera(); - if (interval) clearInterval(interval); if (canvasRef.current) { const ctx = canvasRef.current.getContext('2d'); ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height); } } return () => { + cancelled = true; stopCamera(); - if (interval) clearInterval(interval); + clearTimeout(timeoutId); }; - // eslint-disable-next-line react-hooks/exhaustive-deps }, [isDetecting]);This also prevents overlapping requests when the API takes longer than 2 seconds to respond.
40-56: Camera stream leak if component unmounts betweengetUserMediaresolve and ref assignment.If the component unmounts after
getUserMediaresolves but beforevideoRef.current.srcObject = streamexecutes (or ifvideoRef.currentis null at that point), the obtained media stream is never stopped. Store the stream reference independently so the cleanup can always release it.♻️ Suggested: track stream in a ref for reliable cleanup
+ const streamRef = useRef(null); + const startCamera = async () => { setError(null); try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: { ideal: 640 }, height: { ideal: 480 } } }); + streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; } } catch (err) { setError("Could not access camera: " + err.message); setIsDetecting(false); } }; const stopCamera = () => { - if (videoRef.current && videoRef.current.srcObject) { - const tracks = videoRef.current.srcObject.getTracks(); - tracks.forEach(track => track.stop()); - videoRef.current.srcObject = null; - } + if (streamRef.current) { + streamRef.current.getTracks().forEach(track => track.stop()); + streamRef.current = null; + } + if (videoRef.current) { + videoRef.current.srcObject = null; + } };
5-13: Thecolorprop is accepted but never used.
drawColordrives the canvas stroke color andbuttonColordrives the button styling. Thecolorprop is unused within the component, yet all wrappers pass it. Consider removing it to avoid confusion, or document its intended purpose.frontend/src/App.jsx (1)
74-74: ThevalidViewsarray is growing unwieldy — consider deriving it from route config.With 30+ entries this inline array is hard to maintain and easy to desync with actual routes. Consider extracting a route configuration object that both the
<Routes>andvalidViewsderive from.
frontend/src/App.jsx
Outdated
| <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/public-facilities" element={<PublicFacilitiesDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/construction-safety" element={<ConstructionSafetyDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/accessibility" element={<AccessibilityDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/')} />} /> | ||
| <Route path="/waste" element={<WasteDetector onBack={() => navigate('/')} />} /> |
There was a problem hiding this comment.
onBack navigates to / (Landing) instead of /home — all "Back to Home" buttons are broken.
The Home route was changed to /home (Line 207), but all new detector routes pass onBack={() => navigate('/')}, which navigates to the Landing page. The same issue exists for the pre-existing detectors (Lines 264-301), but this PR introduced the /home path change that made them all regress.
All onBack callbacks should use navigate('/home') instead of navigate('/').
🐛 Proposed fix for the new routes
- <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/')} />} />
- <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/')} />} />
- <Route path="/public-facilities" element={<PublicFacilitiesDetector onBack={() => navigate('/')} />} />
- <Route path="/construction-safety" element={<ConstructionSafetyDetector onBack={() => navigate('/')} />} />
- <Route path="/accessibility" element={<AccessibilityDetector onBack={() => navigate('/')} />} />
- <Route path="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/')} />} />
- <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/')} />} />
- <Route path="/waste" element={<WasteDetector onBack={() => navigate('/')} />} />
+ <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/home')} />} />
+ <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/home')} />} />
+ <Route path="/public-facilities" element={<PublicFacilitiesDetector onBack={() => navigate('/home')} />} />
+ <Route path="/construction-safety" element={<ConstructionSafetyDetector onBack={() => navigate('/home')} />} />
+ <Route path="/accessibility" element={<AccessibilityDetector onBack={() => navigate('/home')} />} />
+ <Route path="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/home')} />} />
+ <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/home')} />} />
+ <Route path="/waste" element={<WasteDetector onBack={() => navigate('/home')} />} />Also update the pre-existing detector routes (Lines 264-301) the same way.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/public-facilities" element={<PublicFacilitiesDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/construction-safety" element={<ConstructionSafetyDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/accessibility" element={<AccessibilityDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/waste" element={<WasteDetector onBack={() => navigate('/')} />} /> | |
| <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/public-facilities" element={<PublicFacilitiesDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/construction-safety" element={<ConstructionSafetyDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/accessibility" element={<AccessibilityDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/waste" element={<WasteDetector onBack={() => navigate('/home')} />} /> |
🤖 Prompt for AI Agents
In `@frontend/src/App.jsx` around lines 302 - 309, Update all Route elements that
pass an onBack prop to use navigate('/home') instead of navigate('/');
specifically change every onBack={() => navigate('/')} occurrences for the
detector routes (e.g., TrafficSignDetector, AbandonedVehicleDetector,
PublicFacilitiesDetector, ConstructionSafetyDetector, AccessibilityDetector,
WaterLeakDetector, CrowdDetector, WasteDetector and the pre-existing detector
routes earlier in the file) so the "Back to Home" buttons navigate to '/home'
consistently with the Home route change.
| const btnClass = isDetecting | ||
| ? 'bg-red-600 hover:bg-red-700' | ||
| : `bg-${buttonColor}-600 hover:bg-${buttonColor}-700`; |
There was a problem hiding this comment.
Dynamic Tailwind classes won't be included in the production build.
Tailwind's class detection (both JIT and AOT) scans source files for complete class strings. Dynamically interpolated classes like `bg-${buttonColor}-600` are never matched by the scanner, so they'll be purged from the production CSS. The button will render with no background color.
Use a lookup map of complete class strings instead:
🐛 Proposed fix
- const btnClass = isDetecting
- ? 'bg-red-600 hover:bg-red-700'
- : `bg-${buttonColor}-600 hover:bg-${buttonColor}-700`;
+ const buttonColorMap = {
+ blue: 'bg-blue-600 hover:bg-blue-700',
+ red: 'bg-red-600 hover:bg-red-700',
+ green: 'bg-green-600 hover:bg-green-700',
+ yellow: 'bg-yellow-600 hover:bg-yellow-700',
+ orange: 'bg-orange-600 hover:bg-orange-700',
+ purple: 'bg-purple-600 hover:bg-purple-700',
+ gray: 'bg-gray-600 hover:bg-gray-700',
+ cyan: 'bg-cyan-600 hover:bg-cyan-700',
+ teal: 'bg-teal-600 hover:bg-teal-700',
+ indigo: 'bg-indigo-600 hover:bg-indigo-700',
+ };
+
+ const btnClass = isDetecting
+ ? 'bg-red-600 hover:bg-red-700'
+ : (buttonColorMap[buttonColor] || 'bg-blue-600 hover:bg-blue-700');📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const btnClass = isDetecting | |
| ? 'bg-red-600 hover:bg-red-700' | |
| : `bg-${buttonColor}-600 hover:bg-${buttonColor}-700`; | |
| const buttonColorMap = { | |
| blue: 'bg-blue-600 hover:bg-blue-700', | |
| red: 'bg-red-600 hover:bg-red-700', | |
| green: 'bg-green-600 hover:bg-green-700', | |
| yellow: 'bg-yellow-600 hover:bg-yellow-700', | |
| orange: 'bg-orange-600 hover:bg-orange-700', | |
| purple: 'bg-purple-600 hover:bg-purple-700', | |
| gray: 'bg-gray-600 hover:bg-gray-700', | |
| cyan: 'bg-cyan-600 hover:bg-cyan-700', | |
| teal: 'bg-teal-600 hover:bg-teal-700', | |
| indigo: 'bg-indigo-600 hover:bg-indigo-700', | |
| }; | |
| const btnClass = isDetecting | |
| ? 'bg-red-600 hover:bg-red-700' | |
| : (buttonColorMap[buttonColor] || 'bg-blue-600 hover:bg-blue-700'); |
🤖 Prompt for AI Agents
In `@frontend/src/components/GenericDetector.jsx` around lines 181 - 183, The
dynamic Tailwind class interpolation in GenericDetector.jsx (btnClass using
`bg-${buttonColor}-600`) will be purged in production; replace the interpolation
with a static lookup map of full class strings keyed by buttonColor (e.g., a
colorsToClasses object) and use that map when computing btnClass (respecting
isDetecting fallback to the red classes); update any references to btnClass
generation in the component so it selects the pre-defined class strings rather
than building them dynamically.
frontend/src/TrafficSignDetector.jsx
Outdated
| color="yellow" | ||
| drawColor="yellow" | ||
| buttonColor="yellow" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for Tailwind config files
fd -e js -e ts -e cjs "tailwind.config"Repository: RohanExploit/VishwaGuru
Length of output: 94
🏁 Script executed:
#!/bin/bash
# Check for GenericDetector file
fd "GenericDetector" frontend/srcRepository: RohanExploit/VishwaGuru
Length of output: 110
🏁 Script executed:
#!/bin/bash
# Look for dynamic class construction in GenericDetector
rg 'bg-\$|buttonColor' frontend/src --type jsx -A 3 -B 3Repository: RohanExploit/VishwaGuru
Length of output: 94
🏁 Script executed:
#!/bin/bash
# Read Tailwind config
cat frontend/tailwind.config.jsRepository: RohanExploit/VishwaGuru
Length of output: 269
🏁 Script executed:
#!/bin/bash
# Read GenericDetector to see how buttonColor is used
cat frontend/src/components/GenericDetector.jsxRepository: RohanExploit/VishwaGuru
Length of output: 8844
🏁 Script executed:
#!/bin/bash
# Search for dynamic class construction with buttonColor
rg -n 'buttonColor|bg-\$' frontend/src/components/ -A 2 -B 2Repository: RohanExploit/VishwaGuru
Length of output: 874
Dynamic Tailwind classes like bg-yellow-600 won't be generated by Tailwind's JIT compiler.
GenericDetector constructs button classes via template literal at line 183: `bg-${buttonColor}-600 hover:bg-${buttonColor}-700`, which Tailwind's content scanner cannot detect at build time. The Tailwind config contains no safelist to work around this. This means the button will render without background color for yellow, cyan, purple, gray, and other color values introduced by these new wrappers (only the hardcoded red variant will work).
The fix belongs in GenericDetector.jsx — either use a static mapping from color name to full class string, or add these classes to the Tailwind safelist.
🤖 Prompt for AI Agents
In `@frontend/src/TrafficSignDetector.jsx` around lines 11 - 13, GenericDetector
currently builds Tailwind classes with a template literal using buttonColor
(e.g., `bg-${buttonColor}-600 hover:bg-${buttonColor}-700`), which JIT can't
detect; replace the dynamic template with a static mapping (e.g., a
COLOR_CLASS_MAP constant inside GenericDetector mapping
"yellow","cyan","purple","gray", etc. to their full class strings) and use
COLOR_CLASS_MAP[buttonColor] (and equivalent maps for bg/draw classes) wherever
GenericDetector constructs classes, or alternatively add the exact classes to
the Tailwind safelist in tailwind.config.js; update usages of the
buttonColor/drawColor/color props to read from the static map (symbols:
GenericDetector, buttonColor, drawColor, COLOR_CLASS_MAP).
frontend/src/views/Home.jsx
Outdated
| { id: 'streetlight', label: t('home.issues.darkStreet'), icon: <Lightbulb size={24} />, color: 'text-slate-600', bg: 'bg-slate-50' }, | ||
| { id: 'traffic-sign', label: t('home.issues.trafficSign'), icon: <Signpost size={24} />, color: 'text-yellow-600', bg: 'bg-yellow-50' }, | ||
| { id: 'abandoned-vehicle', label: t('home.issues.abandonedVehicle'), icon: <Car size={24} />, color: 'text-gray-600', bg: 'bg-gray-50' }, | ||
| { id: 'accessibility', label: "Accessibility", icon: <Accessibility size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, |
There was a problem hiding this comment.
Hardcoded labels bypass i18n.
The new items use hardcoded English strings ("Accessibility", "Construction", "Public Facilities") instead of the t('home.issues.xxx') translation function used by older items. This is consistent with other recently added items (e.g., "Noise", "Crowd", "Water Leak") but extends the i18n gap. Consider wrapping these in t() with corresponding translation keys.
Also applies to: 104-104, 111-111
🤖 Prompt for AI Agents
In `@frontend/src/views/Home.jsx` at line 87, The new menu/items use hardcoded
English labels (e.g., the object with id 'accessibility' and similar entries for
'construction' and 'public-facilities') which bypass the app i18n; update those
entries in frontend/src/views/Home.jsx to call the translation function t() with
keys like t('home.issues.accessibility'), t('home.issues.construction'), and
t('home.issues.publicFacilities') (matching your translation key naming
convention), and ensure the component has access to the t function (e.g., from
useTranslation or props) where the items array is defined so the labels render
localized strings.
There was a problem hiding this comment.
Pull request overview
This PR adds 8 new Western-inspired public grievance detectors to the VishwaGuru platform by creating a reusable GenericDetector component and corresponding backend endpoints. The changes aim to reduce code duplication in the frontend while expanding detection capabilities for civic issues like traffic signs, abandoned vehicles, public facilities, construction safety, accessibility barriers, water leaks, crowd density, and waste management.
Changes:
- Created GenericDetector component for consistent camera-based detection UI across all detectors
- Added 8 new frontend detector pages and corresponding routes
- Added 2 new backend detection endpoints (public-facilities and construction-safety) with CLIP-based inference
- Refactored existing detectors (WaterLeakDetector, CrowdDetector, AccessibilityDetector, WasteDetector) to use GenericDetector
- Updated Home.jsx navigation to include all new detector buttons with proper iconography
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/GenericDetector.jsx | New reusable component for camera-based detection with canvas rendering and API communication |
| frontend/src/views/Home.jsx | Added navigation buttons for new detectors (accessibility, construction-safety, public-facilities) across road/traffic, environment/safety, and management categories |
| frontend/src/App.jsx | Added lazy-loaded routes for 8 new detectors and modified home route path from "/" to "/home" |
| frontend/src/TrafficSignDetector.jsx | New detector using GenericDetector for traffic sign inspection |
| frontend/src/AbandonedVehicleDetector.jsx | New detector using GenericDetector for abandoned vehicle detection |
| frontend/src/PublicFacilitiesDetector.jsx | New detector using GenericDetector for public facilities inspection |
| frontend/src/ConstructionSafetyDetector.jsx | New detector using GenericDetector for construction safety monitoring |
| frontend/src/AccessibilityDetector.jsx | Refactored to use GenericDetector instead of custom implementation |
| frontend/src/WaterLeakDetector.jsx | Refactored to use GenericDetector instead of custom implementation |
| frontend/src/CrowdDetector.jsx | Refactored to use GenericDetector instead of custom implementation |
| frontend/src/WasteDetector.jsx | Refactored to use GenericDetector instead of custom implementation with disposal instructions |
| backend/routers/detection.py | Added detect-public-facilities and detect-construction-safety endpoints |
| backend/hf_api_service.py | Added detect_public_facilities_clip and detect_construction_safety_clip functions using CLIP |
| backend/tests/test_western_detectors.py | Added tests for new public-facilities and construction-safety endpoints |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
backend/routers/detection.py
Outdated
| @router.post("/api/detect-public-facilities") | ||
| async def detect_public_facilities_endpoint(request: Request, image: UploadFile = File(...)): | ||
| try: | ||
| image_bytes = await image.read() | ||
| except Exception as e: | ||
| logger.error(f"Invalid image file: {e}", exc_info=True) | ||
| raise HTTPException(status_code=400, detail="Invalid image file") | ||
|
|
||
| try: | ||
| client = get_http_client(request) | ||
| detections = await detect_public_facilities_clip(image_bytes, client=client) | ||
| return {"detections": detections} | ||
| except Exception as e: | ||
| logger.error(f"Public facilities detection error: {e}", exc_info=True) | ||
| raise HTTPException(status_code=500, detail="Internal server error") |
There was a problem hiding this comment.
The new detection endpoints (detect-public-facilities and detect-construction-safety) bypass the process_uploaded_image validation that is used by other CLIP-based detection endpoints. This function performs critical validation, resizing, and EXIF stripping. For consistency and security, these endpoints should call process_uploaded_image before passing image_bytes to the detection functions.
Looking at lines 213-238, existing endpoints like detect-water-leak, detect-accessibility, and detect-crowd all use process_uploaded_image. The same pattern should be followed here.
backend/routers/detection.py
Outdated
| @router.post("/api/detect-construction-safety") | ||
| async def detect_construction_safety_endpoint(request: Request, image: UploadFile = File(...)): | ||
| try: | ||
| image_bytes = await image.read() | ||
| except Exception as e: | ||
| logger.error(f"Invalid image file: {e}", exc_info=True) | ||
| raise HTTPException(status_code=400, detail="Invalid image file") | ||
|
|
||
| try: | ||
| client = get_http_client(request) | ||
| detections = await detect_construction_safety_clip(image_bytes, client=client) | ||
| return {"detections": detections} | ||
| except Exception as e: | ||
| logger.error(f"Construction safety detection error: {e}", exc_info=True) | ||
| raise HTTPException(status_code=500, detail="Internal server error") |
There was a problem hiding this comment.
The new construction safety detection endpoint bypasses the process_uploaded_image validation that is used by other CLIP-based detection endpoints. This function performs critical validation, resizing, and EXIF stripping. For consistency and security, this endpoint should call process_uploaded_image before passing image_bytes to the detection function.
Looking at lines 213-238, existing endpoints like detect-water-leak, detect-accessibility, and detect-crowd all use process_uploaded_image. The same pattern should be followed here.
| const btnClass = isDetecting | ||
| ? 'bg-red-600 hover:bg-red-700' | ||
| : `bg-${buttonColor}-600 hover:bg-${buttonColor}-700`; |
There was a problem hiding this comment.
String interpolation in Tailwind classes will not work as expected. Tailwind's JIT compiler needs to see the full class names at build time. The expression bg-${buttonColor}-600 will not generate the required CSS classes.
Instead, you should either:
- Use a complete class string mapping (e.g., a switch statement or object mapping buttonColor to full class strings)
- Use inline styles for dynamic colors
- Use a safelist in your Tailwind config to include all possible color combinations
This is a known Tailwind limitation documented in their official docs.
frontend/src/App.jsx
Outdated
|
|
||
| <Route | ||
| path="/" | ||
| path="/home" |
There was a problem hiding this comment.
The route path has been changed from "/" to "/home", but this creates a breaking change. The NotFound component (views/NotFound.jsx) still links to "/" when the user clicks "Back to Home", which will now fail to match any route since the catch-all "*" route will handle it.
Additionally, there's no "/" route defined anymore, so users navigating to the root of the application will see the NotFound page instead of the Home page. You should either:
- Keep both "/" and "/home" routes pointing to the Home component
- Or add a redirect from "/" to "/home"
- Update NotFound.jsx and any other components that link to "/" to use "/home" instead
This affects user experience and could break existing bookmarks and links.
| navigate(view === 'home' ? '/home' : `/${view}`); | ||
| } else { | ||
| console.warn(`Attempted to navigate to invalid view: ${view}`); | ||
| navigate('/'); |
There was a problem hiding this comment.
The navigateToView function has been modified to navigate to '/home' when view is 'home', but this introduces an inconsistency. The function already handles the home case specially (line 76), so when someone calls navigateToView('home'), it will navigate to '/home'. However, the else clause (line 79) still navigates to '/' on invalid views, which is now inconsistent since there's no "/" route defined.
The else clause should navigate to '/home' instead of '/' to be consistent with the new routing structure.
| navigate('/'); | |
| navigate('/home'); |
frontend/src/WasteDetector.jsx
Outdated
| import React from 'react'; | ||
| import GenericDetector from './components/GenericDetector'; | ||
|
|
||
| const WasteDetector = ({ onBack }) => { | ||
| const videoRef = useRef(null); | ||
| const canvasRef = useRef(null); | ||
| const [stream, setStream] = useState(null); | ||
| const [analyzing, setAnalyzing] = useState(false); | ||
| const [result, setResult] = useState(null); | ||
| const [error, setError] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| startCamera(); | ||
| return () => stopCamera(); | ||
| }, []); | ||
|
|
||
| const startCamera = async () => { | ||
| setError(null); | ||
| try { | ||
| const mediaStream = await navigator.mediaDevices.getUserMedia({ | ||
| video: { facingMode: 'environment' } | ||
| }); | ||
| setStream(mediaStream); | ||
| if (videoRef.current) { | ||
| videoRef.current.srcObject = mediaStream; | ||
| } | ||
| } catch (err) { | ||
| setError("Camera access failed: " + err.message); | ||
| } | ||
| }; | ||
|
|
||
| const stopCamera = () => { | ||
| if (stream) { | ||
| stream.getTracks().forEach(track => track.stop()); | ||
| setStream(null); | ||
| } | ||
| }; | ||
|
|
||
| const analyze = async () => { | ||
| if (!videoRef.current || !canvasRef.current) return; | ||
|
|
||
| setAnalyzing(true); | ||
| setResult(null); | ||
|
|
||
| const video = videoRef.current; | ||
| const canvas = canvasRef.current; | ||
| const context = canvas.getContext('2d'); | ||
|
|
||
| canvas.width = video.videoWidth; | ||
| canvas.height = video.videoHeight; | ||
| context.drawImage(video, 0, 0); | ||
|
|
||
| canvas.toBlob(async (blob) => { | ||
| if (!blob) return; | ||
| const formData = new FormData(); | ||
| formData.append('image', blob, 'waste.jpg'); | ||
|
|
||
| try { | ||
| const data = await detectorsApi.waste(formData); | ||
| setResult(data); | ||
| } catch (err) { | ||
| console.error(err); | ||
| setError("Analysis failed. Please try again."); | ||
| } finally { | ||
| setAnalyzing(false); | ||
| } | ||
| }, 'image/jpeg', 0.8); | ||
| }; | ||
|
|
||
| const getDisposalInstruction = (type) => { | ||
| const t = (type || '').toLowerCase(); | ||
| if (t.includes('plastic')) return { bin: 'Blue Bin', color: 'bg-blue-100 text-blue-800', icon: '♻️' }; | ||
| if (t.includes('paper') || t.includes('cardboard')) return { bin: 'Yellow Bin', color: 'bg-yellow-100 text-yellow-800', icon: '📄' }; | ||
| if (t.includes('glass')) return { bin: 'Green Bin', color: 'bg-green-100 text-green-800', icon: '🍾' }; | ||
| if (t.includes('organic') || t.includes('food')) return { bin: 'Green/Compost Bin', color: 'bg-green-100 text-green-800', icon: '🍏' }; | ||
| if (t.includes('metal') || t.includes('can')) return { bin: 'Red Bin', color: 'bg-red-100 text-red-800', icon: '🥫' }; | ||
| if (t.includes('electronic')) return { bin: 'E-Waste Center', color: 'bg-purple-100 text-purple-800', icon: '🔌' }; | ||
| return { bin: 'Black/General Bin', color: 'bg-gray-100 text-gray-800', icon: '🗑️' }; | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col items-center w-full max-w-md mx-auto"> | ||
| {error && ( | ||
| <div className="w-full bg-red-50 text-red-600 p-3 rounded-lg mb-4 flex items-center gap-2"> | ||
| <Info size={18} /> | ||
| <span className="text-sm">{error}</span> | ||
| </div> | ||
| )} | ||
|
|
||
| <div className="relative w-full aspect-[4/3] bg-black rounded-2xl overflow-hidden shadow-lg mb-6"> | ||
| <video | ||
| ref={videoRef} | ||
| autoPlay | ||
| playsInline | ||
| muted | ||
| className="w-full h-full object-cover" | ||
| /> | ||
| <canvas ref={canvasRef} className="hidden" /> | ||
|
|
||
| {analyzing && ( | ||
| <div className="absolute inset-0 bg-black/50 flex items-center justify-center backdrop-blur-sm"> | ||
| <div className="flex flex-col items-center text-white"> | ||
| <RefreshCw className="animate-spin mb-2" size={32} /> | ||
| <span className="font-medium">Identifying waste...</span> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| {result ? ( | ||
| <div className="w-full bg-white rounded-xl shadow-sm border border-gray-100 p-6 animate-fadeIn"> | ||
| <div className="flex items-center gap-3 mb-4"> | ||
| <div className="bg-green-100 p-2 rounded-full"> | ||
| <CheckCircle className="text-green-600" size={24} /> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-gray-500 font-medium">Detected Type</p> | ||
| <h3 className="text-xl font-bold text-gray-800 capitalize">{result.waste_type}</h3> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="border-t border-gray-100 my-4"></div> | ||
|
|
||
| <div className={`p-4 rounded-xl ${getDisposalInstruction(result.waste_type).color} flex items-center gap-4`}> | ||
| <span className="text-3xl">{getDisposalInstruction(result.waste_type).icon}</span> | ||
| <div> | ||
| <p className="text-xs font-bold uppercase opacity-70 mb-1">Disposal Method</p> | ||
| <p className="font-bold text-lg">{getDisposalInstruction(result.waste_type).bin}</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="text-xs text-center text-gray-400 mt-4"> | ||
| Confidence: {(result.confidence * 100).toFixed(1)}% | ||
| </p> | ||
|
|
||
| <button | ||
| onClick={() => setResult(null)} | ||
| className="w-full mt-6 bg-gray-900 text-white py-3 rounded-xl font-bold hover:bg-gray-800 transition flex items-center justify-center gap-2" | ||
| > | ||
| <RefreshCw size={18} /> | ||
| Scan Another Item | ||
| </button> | ||
| </div> | ||
| ) : ( | ||
| <div className="w-full"> | ||
| <button | ||
| onClick={analyze} | ||
| disabled={analyzing || !!error} | ||
| className="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-4 rounded-xl font-bold shadow-lg hover:shadow-xl transition transform active:scale-95 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" | ||
| > | ||
| <Camera size={24} /> | ||
| Identify Waste | ||
| </button> | ||
| <p className="text-center text-sm text-gray-500 mt-3"> | ||
| Point camera at the item and tap to identify | ||
| </p> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <GenericDetector | ||
| apiEndpoint="detect-waste" | ||
| title="Waste Management Inspector" | ||
| description="Classify waste types and detect overflowing bins or littering." | ||
| onBack={onBack} | ||
| color="green" | ||
| drawColor="green" | ||
| buttonColor="green" | ||
| /> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
The refactored WasteDetector has lost critical functionality. The original implementation had:
- Custom UI showing waste type classification (plastic, paper, glass, etc.)
- Disposal instructions with color-coded bins (Blue Bin for plastic, Yellow Bin for paper, etc.)
- A single-shot "analyze" flow optimized for waste sorting
The new GenericDetector implementation:
- Performs continuous detection every 2 seconds
- Only shows detection labels on canvas without disposal instructions
- Uses a different API response format
Additionally, the backend endpoint /api/detect-waste uses detect_waste_clip which returns {waste_type, confidence, all_scores} not {detections: [...]}, so the GenericDetector won't work correctly with this endpoint. The original WasteDetector was specifically designed to work with this unique API response format.
This is a significant regression in user experience and functionality for the waste sorting feature.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
7 issues found across 14 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="frontend/src/AccessibilityDetector.jsx">
<violation number="1" location="frontend/src/AccessibilityDetector.jsx:11">
P3: The `color` prop is accepted by `GenericDetector` but never used in its implementation — only `drawColor` and `buttonColor` are referenced. Passing `color="blue"` here has no effect and may confuse future maintainers. Consider removing it.</violation>
</file>
<file name="frontend/src/components/GenericDetector.jsx">
<violation number="1" location="frontend/src/components/GenericDetector.jsx:10">
P3: The `color` prop is destructured but never used in the component. Only `drawColor` is used (via `getColorHex`). Remove the unused prop to avoid confusion for consumers.</violation>
<violation number="2" location="frontend/src/components/GenericDetector.jsx:183">
P1: Dynamic Tailwind class names (`bg-${buttonColor}-600`) are not detected by Tailwind's content scanner and will be purged from production CSS. The button will lose its background color in all production builds.
Per the [Tailwind docs on dynamic class names](https://tailwindcss.com/docs/content-configuration#dynamic-class-names), class names must be complete unbroken strings. Use a mapping object instead.</violation>
</file>
<file name="frontend/src/WasteDetector.jsx">
<violation number="1" location="frontend/src/WasteDetector.jsx:11">
P3: The `color` prop is passed but never used by `GenericDetector`. Only `drawColor` and `buttonColor` are functional. This is dead code that may mislead future contributors into thinking it controls something. Remove it to avoid confusion.</violation>
</file>
<file name="backend/routers/detection.py">
<violation number="1" location="backend/routers/detection.py:446">
P1: This endpoint skips input validation and image optimization. Most other detection endpoints use `process_uploaded_image(image)` which enforces file size limits, validates MIME types, resizes oversized images, and strips EXIF metadata. Using raw `image.read()` exposes this endpoint to oversized uploads, non-image payloads, and EXIF data leakage.</violation>
</file>
<file name="frontend/src/App.jsx">
<violation number="1" location="frontend/src/App.jsx:302">
P1: Bug: `onBack` navigates to `/` (Landing page) instead of `/home` (Home dashboard). Since this PR moved the Home route from `/` to `/home`, all these `onBack={() => navigate('/')}` callbacks will take users to the Landing page instead of the Home page with the detector buttons. All 8 new detector routes have this issue.
Should be `onBack={() => navigate('/home')}` for all new routes.</violation>
</file>
<file name="frontend/src/views/Home.jsx">
<violation number="1" location="frontend/src/views/Home.jsx:87">
P2: Hardcoded label string breaks i18n. All other items in this category use the `t()` translation function (e.g., `t('home.issues.pothole')`). This label won't be translated when the user switches language.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
…ng python-magic. Co-authored-by: RohanExploit <178623867+RohanExploit@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/package.json`:
- Around line 21-36: The listed build-time packages (`@vitejs/plugin-react`,
autoprefixer, postcss, tailwindcss, vite, vite-plugin-pwa) should be moved from
"dependencies" into "devDependencies" in package.json; edit the package.json to
remove these entries from dependencies and add them under devDependencies, run
npm install (or pnpm/yarn) to update the lockfile, and verify your build/start
scripts (e.g., the scripts that call vite or build) still work locally and in CI
so that devDependencies are installed during the build step rather than being
shipped to production.
🧹 Nitpick comments (1)
backend/utils.py (1)
13-18: Graceful degradation pattern looks good, but consider the security implication.When
python-magicis absent, MIME-type validation is silently skipped at runtime, leaving PIL as the sole gatekeeper. PIL can be tricked by certain polyglot files (files that are simultaneously valid images and another type, e.g., a GIFAR). The MIME check via libmagic is a defense-in-depth layer against content-type spoofing.Consider either:
- Making
python-magica hard dependency (preferred for security).- Adding a fallback MIME check using Python's built-in
mimetypesmodule or checkingfile.content_type(weaker, but still adds a layer).If option 2:
Suggested fallback
HAS_MAGIC = False logging.getLogger(__name__).warning("python-magic not found. MIME type validation will be skipped.") + +def _check_mime_fallback(file: UploadFile) -> None: + """Weak MIME check when python-magic is unavailable.""" + if file.content_type and file.content_type not in ALLOWED_MIME_TYPES: + raise HTTPException( + status_code=400, + detail=f"Invalid file type. Only image files are allowed. Detected: {file.content_type}", + )Note:
file.content_typeis client-supplied and easily spoofed, so it's not a strong check — but it raises the bar compared to no check at all.
frontend/package.json
Outdated
| "@vitejs/plugin-react": "^5.1.2", | ||
| "autoprefixer": "^10.4.23", | ||
| "dexie": "^4.2.1", | ||
| "framer-motion": "^12.29.2", | ||
| "i18next": "^25.8.0", | ||
| "i18next-browser-languagedetector": "^8.2.0", | ||
| "lucide-react": "^0.562.0", | ||
| "react": "^19.2.0", | ||
| "react-dom": "^19.2.0", | ||
| "postcss": "^8.5.6", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-i18next": "^16.5.3", | ||
| "react-router-dom": "^7.12.0", | ||
| "react-webcam": "^7.2.0" | ||
| "react-router-dom": "^6.22.0", | ||
| "react-webcam": "^7.2.0", | ||
| "tailwindcss": "^3.4.1", | ||
| "vite": "^5.0.0", | ||
| "vite-plugin-pwa": "^1.2.0" |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Build-time tooling should remain in devDependencies, not dependencies.
@vitejs/plugin-react, autoprefixer, postcss, tailwindcss, vite, and vite-plugin-pwa are all build-time tools that are not needed at runtime. Moving them into dependencies bloats production installs and misrepresents the dependency graph.
If the motivation was fixing a deployment where devDependencies weren't installed, the correct fix is to ensure npm install (without --omit=dev) runs during the build step, rather than reclassifying these packages.
♻️ Proposed fix: move build tools back to devDependencies
"dependencies": {
"@tensorflow-models/mobilenet": "^2.1.1",
"@tensorflow/tfjs": "^4.22.0",
- "@vitejs/plugin-react": "^5.1.2",
- "autoprefixer": "^10.4.23",
"dexie": "^4.2.1",
"framer-motion": "^12.29.2",
"i18next": "^25.8.0",
"i18next-browser-languagedetector": "^8.2.0",
"lucide-react": "^0.562.0",
- "postcss": "^8.5.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^16.5.3",
"react-router-dom": "^6.22.0",
- "react-webcam": "^7.2.0",
- "tailwindcss": "^3.4.1",
- "vite": "^5.0.0",
- "vite-plugin-pwa": "^1.2.0"
+ "react-webcam": "^7.2.0"
},
"devDependencies": {
+ "@vitejs/plugin-react": "^5.1.2",
+ "autoprefixer": "^10.4.23",
"@babel/core": "^7.24.0",
...
+ "postcss": "^8.5.6",
+ "tailwindcss": "^3.4.1",
+ "vite": "^5.0.0",
+ "vite-plugin-pwa": "^1.2.0",
"msw": "^2.3.0"
}🤖 Prompt for AI Agents
In `@frontend/package.json` around lines 21 - 36, The listed build-time packages
(`@vitejs/plugin-react`, autoprefixer, postcss, tailwindcss, vite,
vite-plugin-pwa) should be moved from "dependencies" into "devDependencies" in
package.json; edit the package.json to remove these entries from dependencies
and add them under devDependencies, run npm install (or pnpm/yarn) to update the
lockfile, and verify your build/start scripts (e.g., the scripts that call vite
or build) still work locally and in CI so that devDependencies are installed
during the build step rather than being shipped to production.
There was a problem hiding this comment.
2 issues found across 4 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="frontend/package.json">
<violation number="1" location="frontend/package.json:35">
P2: Build tools (`vite`, `@vitejs/plugin-react`, `postcss`, `autoprefixer`, `tailwindcss`, `vite-plugin-pwa`) have been moved from `devDependencies` to `dependencies`. These are only needed at build time and should remain in `devDependencies` to avoid bloating production installs and increasing the attack surface.</violation>
</file>
<file name="backend/utils.py">
<violation number="1" location="backend/utils.py:17">
P1: Security: MIME-type validation is silently disabled when `python-magic` is unavailable. Since this is a security-critical validation that prevents upload of malicious non-image files, consider either (1) failing hard at startup in production environments when `magic` is unavailable, or (2) adding a lightweight fallback that checks `file.content_type` against `ALLOWED_MIME_TYPES` (less robust than magic but better than nothing).
Example fallback:
```python
else:
# Lightweight fallback: check declared content type
if file.content_type and file.content_type not in ALLOWED_MIME_TYPES:
raise HTTPException(status_code=400, detail=f"Invalid file type: {file.content_type}")
```</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| @@ -18,16 +18,22 @@ | |||
| "dependencies": { | |||
There was a problem hiding this comment.
P2: Build tools (vite, @vitejs/plugin-react, postcss, autoprefixer, tailwindcss, vite-plugin-pwa) have been moved from devDependencies to dependencies. These are only needed at build time and should remain in devDependencies to avoid bloating production installs and increasing the attack surface.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/package.json, line 35:
<comment>Build tools (`vite`, `@vitejs/plugin-react`, `postcss`, `autoprefixer`, `tailwindcss`, `vite-plugin-pwa`) have been moved from `devDependencies` to `dependencies`. These are only needed at build time and should remain in `devDependencies` to avoid bloating production installs and increasing the attack surface.</comment>
<file context>
@@ -18,16 +18,22 @@
+ "react-router-dom": "^6.22.0",
+ "react-webcam": "^7.2.0",
+ "tailwindcss": "^3.4.1",
+ "vite": "^5.0.0",
+ "vite-plugin-pwa": "^1.2.0"
},
</file context>
… resilience. Co-authored-by: RohanExploit <178623867+RohanExploit@users.noreply.github.com>
🔍 Quality Reminder |
There was a problem hiding this comment.
1 issue found across 5 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="backend/main.py">
<violation number="1" location="backend/main.py:124">
P1: Removing the production fail-fast check for missing `FRONTEND_URL` is a significant regression. In production, if this variable is accidentally unset, the app will silently start with `allowed_origins = ["http://localhost:5173"]`, causing all real frontend requests to be blocked by CORS — a silent, hard-to-debug failure. The previous behavior (crash with a clear `ValueError`) was the correct approach: fail fast with an actionable message rather than silently misconfigure CORS. Consider at minimum preserving the production guard:
```python
if is_production:
raise ValueError(
"FRONTEND_URL environment variable is required in production. "
"Set it to your frontend URL (e.g., https://your-app.netlify.app)."
)
```</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
…e backend reqs. Co-authored-by: RohanExploit <178623867+RohanExploit@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/package.json`:
- Around line 50-52: Update the dependency version for
"eslint-plugin-react-hooks" in package.json to at least ^5.2.0 so the plugin
provides native ESLint 9 flat config support; locate the
"eslint-plugin-react-hooks" entry and change its version string from "^5.0.0" to
"^5.2.0" (or a later compatible version), then run your package manager
(npm/yarn/pnpm) to install and update lockfile.
| "eslint-plugin-react-hooks": "^5.0.0", | ||
| "eslint-plugin-react-refresh": "^0.4.14", | ||
| "globals": "^15.12.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check eslint-plugin-react-hooks 5.0.0 peer dependencies
echo "=== eslint-plugin-react-hooks 5.0.0 ==="
curl -s "https://registry.npmjs.org/eslint-plugin-react-hooks/5.0.0" | jq '.peerDependencies'
# Check eslint-plugin-react-refresh 0.4.14 peer dependencies
echo "=== eslint-plugin-react-refresh 0.4.14 ==="
curl -s "https://registry.npmjs.org/eslint-plugin-react-refresh/0.4.14" | jq '.peerDependencies'Repository: RohanExploit/VishwaGuru
Length of output: 258
🌐 Web query:
eslint-plugin-react-hooks 5.0.0 ESLint 9 flat config support
💡 Result:
eslint-plugin-react-hooks@5.0.0 does not provide an official ESLint “flat config” preset (i.e. no configs['flat/recommended']). Flat config support was added later in 5.2.0 (“Support flat config” is listed in the 5.2.0 changelog). [1]
If you’re on ESLint 9 and must stay on react-hooks 5.0.0, you can still use it in eslint.config.js by manually wiring the plugin + rules (example shown in the React repo issue): [2]
// eslint.config.js
import js from "@eslint/js";
import reactHooks from "eslint-plugin-react-hooks";
export default [
js.configs.recommended,
{
plugins: { "react-hooks": reactHooks },
rules: reactHooks.configs.recommended.rules,
},
];If you can upgrade, use eslint-plugin-react-hooks >= 5.2.0 and its flat config export (commonly referenced as configs['flat/recommended'] in later versions). [1]
Sources: [1] [2]
🌐 Web query:
eslint-plugin-react-refresh 0.4.14 ESLint 9 flat config compatibility
💡 Result:
Yes—eslint-plugin-react-refresh@0.4.14 is compatible with ESLint 9 and flat config:
- Its
peerDependenciesdeclareseslint: ">=7", which includes ESLint 9. [1] - The
0.4.14docs include a flat-config example and show how to register the plugin viaplugins: { "react-refresh": reactRefresh }. [2] - ESLint 9 uses flat config (
eslint.config.js) by default. [3]
Minimal eslint.config.js example:
import reactRefresh from "eslint-plugin-react-refresh";
export default [
{
plugins: { "react-refresh": reactRefresh },
rules: { "react-refresh/only-export-components": "warn" },
},
];Or use the provided preset config:
import reactRefresh from "eslint-plugin-react-refresh";
export default [reactRefresh.configs.recommended];Sources: [1] [2] [3]
Upgrade eslint-plugin-react-hooks to ≥5.2.0 for ESLint 9 flat config support.
eslint-plugin-react-hooks@5.0.0 does not provide official flat config presets—flat config support was added in 5.2.0. While it can technically work in ESLint 9 with manual rule wiring, this requires boilerplate and is error-prone. Upgrade to eslint-plugin-react-hooks@^5.2.0 or later to use the native flat config export.
eslint-plugin-react-refresh@0.4.14 is fully compatible with ESLint 9's flat config and requires no changes.
🤖 Prompt for AI Agents
In `@frontend/package.json` around lines 50 - 52, Update the dependency version
for "eslint-plugin-react-hooks" in package.json to at least ^5.2.0 so the plugin
provides native ESLint 9 flat config support; locate the
"eslint-plugin-react-hooks" entry and change its version string from "^5.0.0" to
"^5.2.0" (or a later compatible version), then run your package manager
(npm/yarn/pnpm) to install and update lockfile.
There was a problem hiding this comment.
13 issues found across 21 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="frontend/src/WasteDetector.jsx">
<violation number="1">
P1: Bug: Stale closure — `stopCamera` in the `useEffect` cleanup captures the initial `stream` value (`null`), so the camera is never stopped on unmount, causing a resource leak. Use a ref to track the media stream.</violation>
<violation number="2">
P1: Bug: If `toBlob` yields a `null` blob, the early `return` skips the `finally` block, so `setAnalyzing(false)` is never called and the UI gets stuck in the loading state forever.</violation>
</file>
<file name="backend/utils.py">
<violation number="1">
P1: Removing the `try/except ImportError` guard around `import magic` makes the entire module crash if `libmagic` (the C library `python-magic` depends on) is not available on the system. The previous code intentionally handled this with a `HAS_MAGIC` flag and graceful fallback to PIL-only validation. Consider restoring the guarded import pattern to maintain deployment resilience.</violation>
</file>
<file name="start-backend.py">
<violation number="1">
P2: The `try/except` around `uvicorn.run()` was removed, so server startup failures (port in use, app import errors, etc.) will now produce unhandled tracebacks instead of a clean error message with a controlled `sys.exit(1)`. Consider keeping the error handling for more graceful failure reporting in production.</violation>
</file>
<file name="frontend/src/CrowdDetector.jsx">
<violation number="1">
P2: Race condition: `setInterval(detectFrame, 2000)` fires regardless of whether the previous `toBlob` + `fetch` cycle has completed. Since both are async, overlapping calls can produce out-of-order detection draws. Consider adding a guard (e.g., an `isProcessing` ref) to skip frames while a previous request is in-flight.</violation>
<violation number="2">
P1: Bug: The visible overlay canvas is reused for frame capture, causing visual flicker every 2 seconds. `context.drawImage(video, ...)` draws an opaque video frame onto the overlay canvas (which sits on top of the live `<video>` element), briefly blocking the live feed before `drawDetections` clears it.
Use a separate off-screen canvas for blob creation so the visible overlay is only used for detection labels.</violation>
</file>
<file name="frontend/src/App.jsx">
<violation number="1">
P1: Broken navigation: `validViews` no longer includes `'traffic-sign'`, `'abandoned-vehicle'`, `'crowd'`, `'water-leak'`, and `'waste'`, but `Home.jsx` still renders buttons for these 5 detectors in its categories. Clicking any of them will log a warning and redirect away. Either add these views back to `validViews` (and re-add their routes), or remove the corresponding items from the `categories` array in `Home.jsx`.</violation>
<violation number="2">
P0: Critical routing conflict: The Home route at `path="/"` is unreachable because the `isLandingPage` guard (line 151) checks `location.pathname === '/'` and renders `<Landing />` before `<Routes>` is ever evaluated. The previous `path="/home"` avoided this conflict. Either revert the route path to `/home`, or update the `isLandingPage` guard to use a dedicated landing path (e.g., `/landing`).</violation>
</file>
<file name="frontend/src/WaterLeakDetector.jsx">
<violation number="1">
P2: No cancellation mechanism for in-flight API requests. When the component unmounts or detection is stopped, pending `toBlob` + `fetch` chains continue executing and may attempt to draw on an unmounted canvas, potentially causing errors.
Consider using an `AbortController` (aborted in the cleanup function) and/or a `mountedRef` guard to skip drawing when the component is no longer active.</violation>
<violation number="2">
P2: The overlay canvas is used for both frame capture (via `drawImage` + `toBlob`) and rendering detection results. Between `drawImage` and the async `drawDetections` callback, the canvas shows an opaque copy of the video frame on top of the live `<video>` element, causing a visible flicker every 2 seconds.
Consider using a separate offscreen canvas for frame capture so the visible overlay canvas is only used for drawing detections.</violation>
</file>
<file name="frontend/src/AccessibilityDetector.jsx">
<violation number="1">
P2: No cancellation of in-flight API requests on unmount/stop. The `toBlob` callback fires a `fetch` that will still call `drawDetections` after the component unmounts or detection stops. Use an `AbortController` (cleaned up in the effect's return) and/or a mounted ref to guard against this. This also prevents overlapping requests from racing when the API is slower than the 2-second interval.</violation>
<violation number="2">
P2: Drawing the video frame onto the visible overlay canvas causes visual flicker. `drawImage` renders a static frame on the overlay that sits on top of the live `<video>` feed. This frozen frame persists until the async API call completes and `drawDetections` clears it — potentially hundreds of milliseconds later. Use an offscreen canvas for frame capture instead.</violation>
</file>
<file name="frontend/package.json">
<violation number="1" location="frontend/package.json:50">
P2: `eslint-plugin-react-hooks@5.0.0` lacks native ESLint 9 flat config support - this was added in version 5.2.0. Since ESLint 9 uses flat config by default, this version will require manual plugin/rule wiring and is error-prone. Upgrade to `^5.2.0` or later for proper flat config exports.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| "eslint-plugin-react-hooks": "^7.0.1", | ||
| "eslint-plugin-react-refresh": "^0.4.24", | ||
| "globals": "^16.5.0", | ||
| "eslint-plugin-react-hooks": "^5.0.0", |
There was a problem hiding this comment.
P2: eslint-plugin-react-hooks@5.0.0 lacks native ESLint 9 flat config support - this was added in version 5.2.0. Since ESLint 9 uses flat config by default, this version will require manual plugin/rule wiring and is error-prone. Upgrade to ^5.2.0 or later for proper flat config exports.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/package.json, line 50:
<comment>`eslint-plugin-react-hooks@5.0.0` lacks native ESLint 9 flat config support - this was added in version 5.2.0. Since ESLint 9 uses flat config by default, this version will require manual plugin/rule wiring and is error-prone. Upgrade to `^5.2.0` or later for proper flat config exports.</comment>
<file context>
@@ -45,11 +44,12 @@
- "eslint-plugin-react-hooks": "^7.0.1",
- "eslint-plugin-react-refresh": "^0.4.24",
- "globals": "^16.5.0",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.14",
+ "globals": "^15.12.0",
</file context>
| "eslint-plugin-react-hooks": "^5.0.0", | |
| "eslint-plugin-react-hooks": "^5.2.0", |
1 participant
This PR introduces 8 new AI-powered detection features inspired by Western public grievance apps to the VishwaGuru platform.
Key Changes:
frontend/src/components/GenericDetector.jsx) that encapsulates camera access, canvas rendering, and API communication. This significantly reduces code duplication and ensures a consistent UI across all detectors.GenericDetector:backend/routers/detection.pythat utilize thebackend/hf_api_service.pyservice. These endpoints leverage the Hugging Face CLIP model for zero-shot classification, ensuring versatile and lightweight detection capabilities without heavy local model inference.frontend/src/views/Home.jsxto include navigation buttons for all new features, organized logically. Updatedfrontend/src/App.jsxto include lazy-loaded routes for these features.Verification:
This update enhances the platform's capability to address a wider range of civic issues while maintaining a lightweight and performant architecture suitable for deployment on Netlify and Render.
PR created automatically by Jules for task 9148110458697096801 started by @RohanExploit
Summary by cubic
Adds eight Western-inspired detectors with a unified camera UI and two new CLIP-backed endpoints. Also fixes deployment by reverting to React 18, aligning types/plugins, and moving build tools to runtime deps, plus safer backend startup defaults.
New Features
Bug Fixes
Written for commit 98cf8a4. Summary will update on new commits.
Summary by CodeRabbit