feat: Add comprehensive AI detectors for traffic, safety, and facilities#404
feat: Add comprehensive AI detectors for traffic, safety, and facilities#404RohanExploit wants to merge 4 commits intomainfrom
Conversation
- Backend: - Add `detect_traffic_sign_clip`, `detect_abandoned_vehicle_clip`, `detect_public_facilities_clip`, `detect_construction_safety_clip`, `detect_waste_clip` in `backend/hf_api_service.py` using CLIP. - Expose new endpoints in `backend/routers/detection.py`. - Add backend tests in `backend/tests/test_new_detectors.py`. - Frontend: - Create `TrafficSignDetector.jsx`, `AbandonedVehicleDetector.jsx`, `PublicFacilitiesDetector.jsx`, `ConstructionSafetyDetector.jsx`, `WasteDetector.jsx`. - Update `CrowdDetector.jsx` and `WaterLeakDetector.jsx` to use centralized API client. - Register new routes in `App.jsx`. - Add detector buttons to `Home.jsx` categories. - Update `api/detectors.js` with new methods. - Update English translations in `locales/en.json`. - Verification: - Add `verification/verify_detectors.py` playwright script for UI testing.
|
👋 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. |
🙏 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. |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ✨ 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 |
❌ Deploy Preview for fixmybharat failed. Why did it fail? →
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
9 issues found across 23 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/TrafficSignDetector.jsx">
<violation number="1" location="frontend/src/TrafficSignDetector.jsx:36">
P1: Potential runtime crash: `setDetections(data.detections)` is called before the null check. If the API returns `null`/`undefined` for `detections`, the component state becomes non-array, causing `detections.length` and `detections.map()` in the JSX to throw a `TypeError` and crash the component. Guard the value before setting state.</violation>
</file>
<file name="frontend/src/ConstructionSafetyDetector.jsx">
<violation number="1" location="frontend/src/ConstructionSafetyDetector.jsx:36">
P1: If `data.detections` is `undefined` (e.g., unexpected API response shape), `setDetections(data.detections)` sets state to `undefined`. On the next render, `detections.length` in the JSX will throw a `TypeError`. Use a fallback to guarantee the state is always an array.</violation>
</file>
<file name="frontend/src/App.jsx">
<violation number="1" location="frontend/src/App.jsx:314">
P2: All new detector routes' `onBack` callbacks navigate to `'/'` which renders the `Landing` page (intercepted by the `isLandingPage` guard), not the `Home` dashboard. Since this PR specifically changed `navigateToView('home')` to use `'/home'` instead of `'/'`, the `onBack` callbacks should likely also navigate to `'/home'` for consistency.</violation>
</file>
<file name="backend/routers/detection.py">
<violation number="1" location="backend/routers/detection.py:446">
P2: This endpoint uses raw `await image.read()` without the validation and optimization that most other CLIP-based endpoints in this file perform via `process_uploaded_image(image)`. This skips file size limits, MIME type validation, image integrity checks, resizing, and EXIF stripping. The same issue applies to `detect_construction_safety_endpoint` below.
Consider using `process_uploaded_image` for consistency and security:</violation>
</file>
<file name="frontend/src/WaterLeakDetector.jsx">
<violation number="1" location="frontend/src/WaterLeakDetector.jsx:80">
P2: Potential `TypeError` if `apiClient.postForm` returns `null` (when response content-type is not JSON). Use optional chaining to safely access `data.detections`.</violation>
</file>
<file name="frontend/src/PublicFacilitiesDetector.jsx">
<violation number="1" location="frontend/src/PublicFacilitiesDetector.jsx:36">
P1: If `data.detections` is `null` or `undefined`, this sets state to a non-array value, causing `detections.length` and `detections.map(...)` in the JSX to throw a `TypeError` on the next render. Use a fallback to ensure state is always an array.</violation>
</file>
<file name="verification/verify_detectors.py">
<violation number="1" location="verification/verify_detectors.py:19">
P2: Bare `except: pass` silently swallows all exceptions, including `KeyboardInterrupt` and `SystemExit`. Catch `Exception` (or better, `playwright.sync_api.TimeoutError`) to only suppress the expected timeout while allowing critical signals to propagate.</violation>
<violation number="2" location="verification/verify_detectors.py:57">
P2: Missing `wait_for_timeout()` after scroll. The Traffic Sign section waits 1 s after `scrollBy` before checking visibility, but this section does not, causing a potential race where the button is not yet in the viewport when `is_visible()` is called.</violation>
</file>
<file name="frontend/src/AbandonedVehicleDetector.jsx">
<violation number="1" location="frontend/src/AbandonedVehicleDetector.jsx:36">
P1: If `data.detections` is `undefined` or `null`, `setDetections(data.detections)` stores a non-array value in state. This will cause a runtime crash on the next render when the JSX evaluates `detections.length > 0`, since `undefined`/`null` has no `.length` property. Use a fallback to ensure state is always an array.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
|
|
||
| const data = await detectorsApi.trafficSign(formData); | ||
|
|
||
| setDetections(data.detections); |
There was a problem hiding this comment.
P1: Potential runtime crash: setDetections(data.detections) is called before the null check. If the API returns null/undefined for detections, the component state becomes non-array, causing detections.length and detections.map() in the JSX to throw a TypeError and crash the component. Guard the value before setting state.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/TrafficSignDetector.jsx, line 36:
<comment>Potential runtime crash: `setDetections(data.detections)` is called before the null check. If the API returns `null`/`undefined` for `detections`, the component state becomes non-array, causing `detections.length` and `detections.map()` in the JSX to throw a `TypeError` and crash the component. Guard the value before setting state.</comment>
<file context>
@@ -0,0 +1,93 @@
+
+ const data = await detectorsApi.trafficSign(formData);
+
+ setDetections(data.detections);
+ if (!data.detections || data.detections.length === 0) {
+ alert("No specific traffic sign detected.");
</file context>
|
|
||
| const data = await detectorsApi.constructionSafety(formData); | ||
|
|
||
| setDetections(data.detections); |
There was a problem hiding this comment.
P1: If data.detections is undefined (e.g., unexpected API response shape), setDetections(data.detections) sets state to undefined. On the next render, detections.length in the JSX will throw a TypeError. Use a fallback to guarantee the state is always an array.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/ConstructionSafetyDetector.jsx, line 36:
<comment>If `data.detections` is `undefined` (e.g., unexpected API response shape), `setDetections(data.detections)` sets state to `undefined`. On the next render, `detections.length` in the JSX will throw a `TypeError`. Use a fallback to guarantee the state is always an array.</comment>
<file context>
@@ -0,0 +1,93 @@
+
+ const data = await detectorsApi.constructionSafety(formData);
+
+ setDetections(data.detections);
+ if (!data.detections || data.detections.length === 0) {
+ alert("No safety violations detected.");
</file context>
|
|
||
| const data = await detectorsApi.publicFacilities(formData); | ||
|
|
||
| setDetections(data.detections); |
There was a problem hiding this comment.
P1: If data.detections is null or undefined, this sets state to a non-array value, causing detections.length and detections.map(...) in the JSX to throw a TypeError on the next render. Use a fallback to ensure state is always an array.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/PublicFacilitiesDetector.jsx, line 36:
<comment>If `data.detections` is `null` or `undefined`, this sets state to a non-array value, causing `detections.length` and `detections.map(...)` in the JSX to throw a `TypeError` on the next render. Use a fallback to ensure state is always an array.</comment>
<file context>
@@ -0,0 +1,93 @@
+
+ const data = await detectorsApi.publicFacilities(formData);
+
+ setDetections(data.detections);
+ if (!data.detections || data.detections.length === 0) {
+ alert("No damage detected.");
</file context>
|
|
||
| const data = await detectorsApi.abandonedVehicle(formData); | ||
|
|
||
| setDetections(data.detections); |
There was a problem hiding this comment.
P1: If data.detections is undefined or null, setDetections(data.detections) stores a non-array value in state. This will cause a runtime crash on the next render when the JSX evaluates detections.length > 0, since undefined/null has no .length property. Use a fallback to ensure state is always an array.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/AbandonedVehicleDetector.jsx, line 36:
<comment>If `data.detections` is `undefined` or `null`, `setDetections(data.detections)` stores a non-array value in state. This will cause a runtime crash on the next render when the JSX evaluates `detections.length > 0`, since `undefined`/`null` has no `.length` property. Use a fallback to ensure state is always an array.</comment>
<file context>
@@ -0,0 +1,93 @@
+
+ const data = await detectorsApi.abandonedVehicle(formData);
+
+ setDetections(data.detections);
+ if (!data.detections || data.detections.length === 0) {
+ alert("No abandoned vehicle detected.");
</file context>
| <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="/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.
P2: All new detector routes' onBack callbacks navigate to '/' which renders the Landing page (intercepted by the isLandingPage guard), not the Home dashboard. Since this PR specifically changed navigateToView('home') to use '/home' instead of '/', the onBack callbacks should likely also navigate to '/home' for consistency.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/App.jsx, line 314:
<comment>All new detector routes' `onBack` callbacks navigate to `'/'` which renders the `Landing` page (intercepted by the `isLandingPage` guard), not the `Home` dashboard. Since this PR specifically changed `navigateToView('home')` to use `'/home'` instead of `'/'`, the `onBack` callbacks should likely also navigate to `'/home'` for consistency.</comment>
<file context>
@@ -293,6 +311,13 @@ function AppContent() {
<Route path="/smart-scan" element={<SmartScanner onBack={() => navigate('/')} />} />
<Route path="/grievance-analysis" element={<GrievanceAnalysis onBack={() => navigate('/')} />} />
<Route path="/noise" element={<NoiseDetector onBack={() => navigate('/')} />} />
+ <Route path="/traffic-sign" element={<TrafficSignDetector onBack={() => navigate('/')} />} />
+ <Route path="/abandoned-vehicle" element={<AbandonedVehicleDetector onBack={() => navigate('/')} />} />
+ <Route path="/public-facilities" element={<PublicFacilitiesDetector onBack={() => navigate('/')} />} />
</file context>
| <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="/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="/water-leak" element={<WaterLeakDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/crowd" element={<CrowdDetector onBack={() => navigate('/home')} />} /> | |
| <Route path="/waste" element={<WasteDetector onBack={() => navigate('/home')} />} /> |
| @router.post("/api/detect-public-facilities") | ||
| async def detect_public_facilities_endpoint(request: Request, image: UploadFile = File(...)): | ||
| try: | ||
| image_bytes = await image.read() |
There was a problem hiding this comment.
P2: This endpoint uses raw await image.read() without the validation and optimization that most other CLIP-based endpoints in this file perform via process_uploaded_image(image). This skips file size limits, MIME type validation, image integrity checks, resizing, and EXIF stripping. The same issue applies to detect_construction_safety_endpoint below.
Consider using process_uploaded_image for consistency and security:
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At backend/routers/detection.py, line 446:
<comment>This endpoint uses raw `await image.read()` without the validation and optimization that most other CLIP-based endpoints in this file perform via `process_uploaded_image(image)`. This skips file size limits, MIME type validation, image integrity checks, resizing, and EXIF stripping. The same issue applies to `detect_construction_safety_endpoint` below.
Consider using `process_uploaded_image` for consistency and security:</comment>
<file context>
@@ -436,3 +438,37 @@ async def detect_abandoned_vehicle_endpoint(request: Request, image: UploadFile
+@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)
</file context>
| if (response.ok) { | ||
| const data = await response.json(); | ||
| const data = await detectorsApi.waterLeak(formData); | ||
| if (data.detections) { |
There was a problem hiding this comment.
P2: Potential TypeError if apiClient.postForm returns null (when response content-type is not JSON). Use optional chaining to safely access data.detections.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/WaterLeakDetector.jsx, line 80:
<comment>Potential `TypeError` if `apiClient.postForm` returns `null` (when response content-type is not JSON). Use optional chaining to safely access `data.detections`.</comment>
<file context>
@@ -77,13 +76,8 @@ const WaterLeakDetector = ({ onBack }) => {
- if (response.ok) {
- const data = await response.json();
+ const data = await detectorsApi.waterLeak(formData);
+ if (data.detections) {
drawDetections(data.detections, context);
}
</file context>
| if (data.detections) { | |
| if (data?.detections) { |
| traffic_btn.click() | ||
| else: | ||
| print("Traffic Sign button NOT visible. Scrolling...") | ||
| page.evaluate("window.scrollBy(0, 500)") |
There was a problem hiding this comment.
P2: Missing wait_for_timeout() after scroll. The Traffic Sign section waits 1 s after scrollBy before checking visibility, but this section does not, causing a potential race where the button is not yet in the viewport when is_visible() is called.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At verification/verify_detectors.py, line 57:
<comment>Missing `wait_for_timeout()` after scroll. The Traffic Sign section waits 1 s after `scrollBy` before checking visibility, but this section does not, causing a potential race where the button is not yet in the viewport when `is_visible()` is called.</comment>
<file context>
@@ -0,0 +1,249 @@
+ traffic_btn.click()
+ else:
+ print("Traffic Sign button NOT visible. Scrolling...")
+ page.evaluate("window.scrollBy(0, 500)")
+ page.wait_for_timeout(1000)
+ if traffic_btn.is_visible():
</file context>
|
|
||
| try: | ||
| page.wait_for_load_state("networkidle", timeout=5000) | ||
| except: |
There was a problem hiding this comment.
P2: Bare except: pass silently swallows all exceptions, including KeyboardInterrupt and SystemExit. Catch Exception (or better, playwright.sync_api.TimeoutError) to only suppress the expected timeout while allowing critical signals to propagate.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At verification/verify_detectors.py, line 19:
<comment>Bare `except: pass` silently swallows all exceptions, including `KeyboardInterrupt` and `SystemExit`. Catch `Exception` (or better, `playwright.sync_api.TimeoutError`) to only suppress the expected timeout while allowing critical signals to propagate.</comment>
<file context>
@@ -0,0 +1,249 @@
+
+ try:
+ page.wait_for_load_state("networkidle", timeout=5000)
+ except:
+ pass
+
</file context>
There was a problem hiding this comment.
Pull request overview
This PR introduces comprehensive AI-powered detectors using CLIP (Contrastive Language-Image Pre-training) via Hugging Face API for zero-shot classification. The changes add six new detection capabilities while refactoring two existing detectors to use a consistent API pattern.
Changes:
- Added four new detector endpoints and components: Traffic Sign, Abandoned Vehicle, Public Facilities, and Construction Safety detectors
- Refactored Water Leak and Crowd detectors to use centralized API service
- Updated UI to categorize new detectors in appropriate categories (Road & Traffic, Environment & Safety, Management)
Reviewed changes
Copilot reviewed 14 out of 23 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| backend/hf_api_service.py | Added detect_public_facilities_clip and detect_construction_safety_clip functions using CLIP model |
| backend/routers/detection.py | Added four new detection endpoints (/api/detect-traffic-sign, /api/detect-abandoned-vehicle, /api/detect-public-facilities, /api/detect-construction-safety) and imported new detector functions |
| backend/tests/test_new_detectors.py | Added unit tests for new detection endpoints with mocked HuggingFace API responses |
| frontend/src/TrafficSignDetector.jsx | New React component for traffic sign detection using react-webcam with capture-analyze workflow |
| frontend/src/AbandonedVehicleDetector.jsx | New React component for abandoned vehicle detection with similar UI pattern |
| frontend/src/PublicFacilitiesDetector.jsx | New React component for public facilities damage detection |
| frontend/src/ConstructionSafetyDetector.jsx | New React component for construction safety violation detection |
| frontend/src/WaterLeakDetector.jsx | Refactored to use centralized detectorsApi instead of direct fetch calls |
| frontend/src/CrowdDetector.jsx | Refactored to use centralized detectorsApi instead of direct fetch calls |
| frontend/src/App.jsx | Added lazy-loaded imports, routes, and navigation support for all new detectors; added duplicate /home route |
| frontend/src/views/Home.jsx | Added new detector buttons to Road & Traffic, Environment & Safety, and Management categories; imported motion from framer-motion |
| frontend/src/api/detectors.js | Added API methods for six new/refactored detectors using createDetectorApi helper |
| frontend/src/locales/en.json | Added translations for publicFacilities and constructionSafety |
| verification/verify_detectors.py | New Playwright-based verification script to test UI navigation and rendering of all new detectors |
| verification/error_abandoned_vehicle.png | Binary test artifact PNG file committed to repository |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @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") | ||
|
|
||
|
|
||
| @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 detector endpoints use plain await image.read() instead of the await process_uploaded_image(image) helper used by other endpoints (like detect-water-leak at line 216 and detect-crowd at line 244). This bypasses important security validation including file size limits, MIME type checks, EXIF stripping, and image resizing. This creates a security vulnerability and inconsistency with established patterns. Use _, image_bytes = await process_uploaded_image(image) to match the existing pattern.
| import Webcam from 'react-webcam'; | ||
| import { detectorsApi } from './api/detectors'; | ||
|
|
||
| const PublicFacilitiesDetector = () => { |
There was a problem hiding this comment.
The component doesn't accept or use the onBack prop that is passed from App.jsx (line 316), but other detector components like NoiseDetector and WasteDetector do. While not strictly necessary if users can navigate back via browser controls, this creates an inconsistency in the component API. Consider adding the prop to the component signature for consistency: const PublicFacilitiesDetector = ({ onBack }) => { even if not actively used, or add a back button that calls it.
| const PublicFacilitiesDetector = () => { | |
| const PublicFacilitiesDetector = ({ onBack }) => { |
| import Webcam from 'react-webcam'; | ||
| import { detectorsApi } from './api/detectors'; | ||
|
|
||
| const ConstructionSafetyDetector = () => { |
There was a problem hiding this comment.
The component doesn't accept or use the onBack prop that is passed from App.jsx (line 317), but other detector components like NoiseDetector and WasteDetector do. While not strictly necessary if users can navigate back via browser controls, this creates an inconsistency in the component API. Consider adding the prop to the component signature for consistency: const ConstructionSafetyDetector = ({ onBack }) => { even if not actively used, or add a back button that calls it.
| const ConstructionSafetyDetector = () => { | |
| const ConstructionSafetyDetector = ({ onBack }) => { |
| const validViews = ['home', 'map', 'report', 'action', 'mh-rep', 'pothole', 'garbage', 'vandalism', 'flood', 'infrastructure', 'parking', 'streetlight', 'fire', 'animal', 'blocked', 'tree', 'pest', 'smart-scan', 'grievance-analysis', 'noise', 'safety-check', 'my-reports', 'login', 'signup', 'traffic-sign', 'abandoned-vehicle', 'public-facilities', 'construction-safety', 'water-leak', 'crowd', 'waste']; | ||
| if (validViews.includes(view)) { | ||
| navigate(view === 'home' ? '/' : `/${view}`); | ||
| navigate(view === 'home' ? '/home' : `/${view}`); |
There was a problem hiding this comment.
The navigation logic was changed so that navigating to 'home' now goes to '/home' instead of '/'. While both routes render the same Home component (lines 208-228), this changes user-facing URLs and could break bookmarks or external links. This change should be documented in the PR description as it's a user-facing behavior change. Consider whether this is intentional or if the original behavior should be preserved.
| navigate(view === 'home' ? '/home' : `/${view}`); | |
| navigate(view === 'home' ? '/' : `/${view}`); |
| <Route | ||
| path="/home" | ||
| element={ | ||
| <Home | ||
| setView={navigateToView} | ||
| fetchResponsibilityMap={fetchResponsibilityMap} | ||
| recentIssues={recentIssues} | ||
| handleUpvote={handleUpvote} | ||
| /> | ||
| } | ||
| /> |
There was a problem hiding this comment.
The Home component is now rendered at both '/' and '/home' routes with identical props. This creates code duplication - consider extracting the common Home route element to a variable or using a single route with both paths: <Route path={['/', '/home']} element={...} /> (React Router v6 syntax) or redirect one to the other to maintain a single source of truth.
| try: | ||
| page.wait_for_load_state("networkidle", timeout=5000) | ||
| except: | ||
| pass |
There was a problem hiding this comment.
Bare except clause on lines 19-20 silently catches all exceptions including SystemExit and KeyboardInterrupt. While this is just a verification script and not production code, it's still better practice to catch specific exceptions or at least use except Exception: to avoid masking system-level exceptions that should propagate.
| import Webcam from 'react-webcam'; | ||
| import { detectorsApi } from './api/detectors'; | ||
|
|
||
| const TrafficSignDetector = () => { |
There was a problem hiding this comment.
The component doesn't accept or use the onBack prop that is passed from App.jsx (line 314), but other detector components like NoiseDetector and WasteDetector do. While not strictly necessary if users can navigate back via browser controls, this creates an inconsistency in the component API. Consider adding the prop to the component signature for consistency: const TrafficSignDetector = ({ onBack }) => { even if not actively used, or add a back button that calls it.
| const TrafficSignDetector = () => { | |
| const TrafficSignDetector = ({ onBack }) => { |
| import Webcam from 'react-webcam'; | ||
| import { detectorsApi } from './api/detectors'; | ||
|
|
||
| const AbandonedVehicleDetector = () => { |
There was a problem hiding this comment.
The component doesn't accept or use the onBack prop that is passed from App.jsx (line 315), but other detector components like NoiseDetector and WasteDetector do. While not strictly necessary if users can navigate back via browser controls, this creates an inconsistency in the component API. Consider adding the prop to the component signature for consistency: const AbandonedVehicleDetector = ({ onBack }) => { even if not actively used, or add a back button that calls it.
- Move `vite`, `tailwindcss`, `postcss`, `autoprefixer`, `vite-plugin-pwa` from `devDependencies` to `dependencies` in `frontend/package.json`. - This ensures these tools are installed in Netlify's production environment where `NODE_ENV=production` causes `devDependencies` to be skipped. - Update `frontend/package-lock.json`.
There was a problem hiding this comment.
1 issue found across 2 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-time packages (`vite`, `@vitejs/plugin-react`, `vite-plugin-pwa`, `tailwindcss`, `postcss`, `autoprefixer`) have been moved from `devDependencies` to `dependencies`. These are all build tools or build-time CSS processors and are not needed at runtime. This will unnecessarily bloat production installs (e.g., `npm install --production` or CI deployments that prune dev deps). Move them back to `devDependencies`.</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-time packages (vite, @vitejs/plugin-react, vite-plugin-pwa, tailwindcss, postcss, autoprefixer) have been moved from devDependencies to dependencies. These are all build tools or build-time CSS processors and are not needed at runtime. This will unnecessarily bloat production installs (e.g., npm install --production or CI deployments that prune dev deps). Move them back to devDependencies.
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-time packages (`vite`, `@vitejs/plugin-react`, `vite-plugin-pwa`, `tailwindcss`, `postcss`, `autoprefixer`) have been moved from `devDependencies` to `dependencies`. These are all build tools or build-time CSS processors and are not needed at runtime. This will unnecessarily bloat production installs (e.g., `npm install --production` or CI deployments that prune dev deps). Move them back to `devDependencies`.</comment>
<file context>
@@ -18,16 +18,22 @@
- "react-webcam": "^7.2.0"
+ "react-webcam": "^7.2.0",
+ "tailwindcss": "^3.4.1",
+ "vite": "^7.3.0",
+ "vite-plugin-pwa": "^1.2.0"
},
</file context>
- Set `base = "frontend"` in `netlify.toml` to correctly handle the monorepo structure. - Update `command` to `npm install && npm run build` (executed within the `frontend` directory). - Set `publish` to `dist` (relative to the `frontend` directory). - Revert changes to `package.json` regarding `dependencies` vs `devDependencies` as moving them might not be strictly necessary if build context is correct, but keeping them if already committed is fine. (Wait, I kept them in dependencies in the previous step, so they are still there. This is safer). - Update `package-lock.json` via `npm install` in `frontend` directory.
🔍 Quality Reminder |
- Update `netlify.toml` to remove `base` property and instead use explicit `cd frontend && npm install && npm run build` command. - Set `publish` to `frontend/dist`. - Regenerate `frontend/package-lock.json` to ensure consistency with current environment. - This approach avoids potential ambiguity with Netlify's base directory detection in monorepos.
1 participant
This PR introduces several new AI-powered detectors to the platform, leveraging CLIP (Contrastive Language-Image Pre-training) via Hugging Face API for zero-shot classification.
New Detectors:
Technical Details:
backend/routers/detection.pythat call intobackend/hf_api_service.py. The service usesclip-vit-base-patch32for efficient zero-shot classification.react-webcam. The UI is consistent with existing detectors.Home.jsxis updated to categorize these new tools.Note: The implementation prioritizes resource efficiency by using lightweight API calls to a shared model rather than loading heavy models locally.
PR created automatically by Jules for task 17892053941000703438 started by @RohanExploit
Summary by cubic
Add four CLIP-based detectors (Traffic Sign, Abandoned Vehicle, Public Facilities, Construction Safety) with backend endpoints, routes, and simple camera UIs. Netlify builds are fixed by running the build from the frontend directory and publishing the correct path.
New Features
Refactors
Written for commit fbd4f8e. Summary will update on new commits.