Add Air Quality, Noise Pollution, and Graffiti Verification Features#408
Add Air Quality, Noise Pollution, and Graffiti Verification Features#408RohanExploit wants to merge 5 commits intomainfrom
Conversation
…tures - Add Air Quality Detector using CLIP (backend + frontend). - Add Graffiti Verification tool using CLIP (backend + frontend). - Enhance Noise Detector to flag pollution events. - Add new endpoints `/api/detect-air-quality`, `/api/detect-cleanliness`, `/api/detect-noise-pollution`. - Update `render.yaml` and `requirements-render.txt` for deployment stability. - Add UI buttons in `Home.jsx` and routes in `App.jsx`.
|
👋 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. |
📝 WalkthroughWalkthroughAdds three environmental detectors: air-quality and cleanliness CLIP-based image detectors, and a noise-pollution audio detector. Backend gains detector functions and endpoints; frontend gains UI components/routes and updates the noise detector to use the new audio endpoint. Dependency and deploy config adjustments included. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Frontend as Browser/App
participant Backend as Detection API
participant Service as Detection Service
rect rgba(100, 200, 150, 0.5)
Note over User,Service: CLIP-Based Image Detection
User->>Frontend: Capture or select image
Frontend->>Frontend: Convert frame/file to JPEG Blob
Frontend->>Backend: POST /api/detect-air-quality or /api/detect-cleanliness<br/>(FormData with image)
Backend->>Service: Call detect_air_quality_clip / detect_cleanliness_clip<br/>(image bytes, http client)
Service->>Service: Run _detect_clip_generic -> filter target labels
Service-->>Backend: Return detections list
Backend-->>Frontend: Return JSON detections
Frontend->>User: Render top result with confidence
end
rect rgba(150, 180, 220, 0.5)
Note over User,Service: Audio-Based Noise Pollution Detection
User->>Frontend: Start recording / upload audio
Frontend->>Frontend: Capture audio blob
Frontend->>Backend: POST /api/detect-noise-pollution<br/>(UploadFile with audio)
Backend->>Service: Call detect_noise_pollution_event<br/>(audio bytes, http client)
Service->>Service: Call detect_audio_event -> filter labels by noise set and threshold
Service-->>Backend: Return filtered audio event detections
Backend-->>Frontend: Return JSON detections
Frontend->>User: Update UI badge / alert if pollution detected
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ 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 |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| <div className="w-full aspect-square bg-white rounded-2xl shadow-sm border-2 border-dashed border-gray-200 flex flex-col items-center justify-center relative overflow-hidden group hover:border-blue-400 transition-colors cursor-pointer" onClick={triggerCamera}> | ||
| {image ? ( | ||
| <img src={image} alt="Preview" className="w-full h-full object-cover" /> |
Check failure
Code scanning / CodeQL
DOM text reinterpreted as HTML High
Copilot Autofix
AI about 6 hours ago
Copilot could not generate an autofix suggestion
Copilot could not generate an autofix suggestion for this alert. Try pushing a new commit or if the problem persists contact support.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
10 issues found across 9 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/AirQualityDetector.jsx">
<violation number="1" location="frontend/src/AirQualityDetector.jsx:38">
P2: No guard against zero video dimensions: if the camera hasn't started producing frames yet, `videoWidth`/`videoHeight` will be `0`, resulting in a 0×0 canvas and either a null or meaningless blob being sent to the server. Add an early return if dimensions are not positive.</violation>
<violation number="2" location="frontend/src/AirQualityDetector.jsx:69">
P1: Media stream leak: `startCamera()` is not awaited, so the `useEffect` cleanup can run before the stream is obtained. When `getUserMedia` eventually resolves, the stream is assigned but never cleaned up. Also, if `videoRef.current` is `null` at that point, the stream leaks entirely.
Consider using an `AbortController` or a ref flag (`isMounted`/`isActive`) checked after `await getUserMedia`, and stop the stream tracks in the `else` branch.</violation>
</file>
<file name="backend/routers/detection.py">
<violation number="1" location="backend/routers/detection.py:476">
P1: Missing post-read file size validation. Unlike the existing `/api/detect-audio` endpoint, this endpoint only checks `file.size` (which may be unavailable for streamed/blob uploads) and does not validate `len(audio_bytes)` after reading. An oversized file can bypass the pre-read guard and be fully loaded into memory.</violation>
</file>
<file name="frontend/src/GraffitiVerification.jsx">
<violation number="1" location="frontend/src/GraffitiVerification.jsx:15">
P2: Memory leak: `URL.createObjectURL(file)` is never revoked. Each file selection leaks a blob URL. You should revoke the previous URL before creating a new one, and also revoke on unmount (e.g., via a `useEffect` cleanup).</violation>
<violation number="2" location="frontend/src/GraffitiVerification.jsx:99">
P1: Bug: Inconsistent label check — when the result is `"freshly painted wall"`, the container is green and shows a check icon, but this line only checks for `'clean'`, so it will incorrectly display **"Action Required"** instead of **"Verification Passed"**. The `'freshly'` check is missing here, unlike the two conditions above.</violation>
</file>
<file name="backend/hf_api_service.py">
<violation number="1" location="backend/hf_api_service.py:490">
P2: Missing type validation on `events` before iteration. If `detect_audio_event` returns a non-list value (e.g., a dict from an unexpected API response), iterating and calling `.get()` on the elements will raise an `AttributeError`. The codebase convention (see `analyze_image_full_clip`) is to check `isinstance(results, list)` before processing.</violation>
</file>
<file name="frontend/src/views/Home.jsx">
<violation number="1" location="frontend/src/views/Home.jsx:104">
P2: Hardcoded English label `'Air Quality'` bypasses the i18n translation system. All other items in this array use `t('home.issues.xxx')`. This will display untranslated English text for non-English users.</violation>
<violation number="2" location="frontend/src/views/Home.jsx:112">
P2: Hardcoded English label `'Verify Clean'` bypasses the i18n translation system. All other items in this array use `t('home.issues.xxx')`. This will display untranslated English text for non-English users.</violation>
</file>
<file name="frontend/src/NoiseDetector.jsx">
<violation number="1" location="frontend/src/NoiseDetector.jsx:121">
P2: The `status` state is set in 5 places but is never rendered after this change removed the `<p>` that displayed it. Every `setStatus(...)` call triggers a pointless re-render. Either remove the `status`/`setStatus` entirely, or restore the UI element that displays it.</violation>
</file>
<file name="backend/requirements-render.txt">
<violation number="1" location="backend/requirements-render.txt:16">
P2: Prefer `python-jose[cryptography]` over splitting into separate packages. The python-jose docs state: "The backend must be selected as an extra when installing python-jose." While it works because `cryptography` is installed separately and detected at runtime, using the extras syntax is the documented approach, preserves version constraints, and avoids pulling in unnecessary native-python backend dependencies (`rsa`, `ecdsa`, `pyasn1`). The same applies to `passlib[bcrypt]` — passlib documents `pip install passlib[bcrypt]` as the recommended installation method.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| useEffect(() => { | ||
| let interval; | ||
| if (isDetecting) { | ||
| startCamera(); |
There was a problem hiding this comment.
P1: Media stream leak: startCamera() is not awaited, so the useEffect cleanup can run before the stream is obtained. When getUserMedia eventually resolves, the stream is assigned but never cleaned up. Also, if videoRef.current is null at that point, the stream leaks entirely.
Consider using an AbortController or a ref flag (isMounted/isActive) checked after await getUserMedia, and stop the stream tracks in the else branch.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/AirQualityDetector.jsx, line 69:
<comment>Media stream leak: `startCamera()` is not awaited, so the `useEffect` cleanup can run before the stream is obtained. When `getUserMedia` eventually resolves, the stream is assigned but never cleaned up. Also, if `videoRef.current` is `null` at that point, the stream leaks entirely.
Consider using an `AbortController` or a ref flag (`isMounted`/`isActive`) checked after `await getUserMedia`, and stop the stream tracks in the `else` branch.</comment>
<file context>
@@ -0,0 +1,147 @@
+ useEffect(() => {
+ let interval;
+ if (isDetecting) {
+ startCamera();
+ interval = setInterval(captureAndAnalyze, 3000); // Every 3s
+ } else {
</file context>
| raise HTTPException(status_code=413, detail="Audio file too large") | ||
|
|
||
| try: | ||
| audio_bytes = await file.read() |
There was a problem hiding this comment.
P1: Missing post-read file size validation. Unlike the existing /api/detect-audio endpoint, this endpoint only checks file.size (which may be unavailable for streamed/blob uploads) and does not validate len(audio_bytes) after reading. An oversized file can bypass the pre-read guard and be fully loaded into memory.
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 476:
<comment>Missing post-read file size validation. Unlike the existing `/api/detect-audio` endpoint, this endpoint only checks `file.size` (which may be unavailable for streamed/blob uploads) and does not validate `len(audio_bytes)` after reading. An oversized file can bypass the pre-read guard and be fully loaded into memory.</comment>
<file context>
@@ -436,3 +439,49 @@ async def detect_abandoned_vehicle_endpoint(request: Request, image: UploadFile
+ raise HTTPException(status_code=413, detail="Audio file too large")
+
+ try:
+ audio_bytes = await file.read()
+ except Exception as e:
+ logger.error(f"Invalid audio file: {e}", exc_info=True)
</file context>
| audio_bytes = await file.read() | |
| audio_bytes = await file.read() | |
| if len(audio_bytes) > 10 * 1024 * 1024: | |
| raise HTTPException(status_code=413, detail="Audio file too large") |
| if (!videoRef.current || !isDetecting) return; | ||
|
|
||
| const canvas = document.createElement('canvas'); | ||
| canvas.width = videoRef.current.videoWidth; |
There was a problem hiding this comment.
P2: No guard against zero video dimensions: if the camera hasn't started producing frames yet, videoWidth/videoHeight will be 0, resulting in a 0×0 canvas and either a null or meaningless blob being sent to the server. Add an early return if dimensions are not positive.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/AirQualityDetector.jsx, line 38:
<comment>No guard against zero video dimensions: if the camera hasn't started producing frames yet, `videoWidth`/`videoHeight` will be `0`, resulting in a 0×0 canvas and either a null or meaningless blob being sent to the server. Add an early return if dimensions are not positive.</comment>
<file context>
@@ -0,0 +1,147 @@
+ if (!videoRef.current || !isDetecting) return;
+
+ const canvas = document.createElement('canvas');
+ canvas.width = videoRef.current.videoWidth;
+ canvas.height = videoRef.current.videoHeight;
+ canvas.getContext('2d').drawImage(videoRef.current, 0, 0);
</file context>
| const handleFile = async (file) => { | ||
| if (!file) return; | ||
|
|
||
| const url = URL.createObjectURL(file); |
There was a problem hiding this comment.
P2: Memory leak: URL.createObjectURL(file) is never revoked. Each file selection leaks a blob URL. You should revoke the previous URL before creating a new one, and also revoke on unmount (e.g., via a useEffect cleanup).
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/GraffitiVerification.jsx, line 15:
<comment>Memory leak: `URL.createObjectURL(file)` is never revoked. Each file selection leaks a blob URL. You should revoke the previous URL before creating a new one, and also revoke on unmount (e.g., via a `useEffect` cleanup).</comment>
<file context>
@@ -0,0 +1,112 @@
+ const handleFile = async (file) => {
+ if (!file) return;
+
+ const url = URL.createObjectURL(file);
+ setImage(url);
+ setResult(null);
</file context>
| ] | ||
|
|
||
| detected_noise = [] | ||
| for event in events: |
There was a problem hiding this comment.
P2: Missing type validation on events before iteration. If detect_audio_event returns a non-list value (e.g., a dict from an unexpected API response), iterating and calling .get() on the elements will raise an AttributeError. The codebase convention (see analyze_image_full_clip) is to check isinstance(results, list) before processing.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At backend/hf_api_service.py, line 490:
<comment>Missing type validation on `events` before iteration. If `detect_audio_event` returns a non-list value (e.g., a dict from an unexpected API response), iterating and calling `.get()` on the elements will raise an `AttributeError`. The codebase convention (see `analyze_image_full_clip`) is to check `isinstance(results, list)` before processing.</comment>
<file context>
@@ -456,3 +456,49 @@ async def detect_abandoned_vehicle_clip(image: Union[Image.Image, bytes], client
+ ]
+
+ detected_noise = []
+ for event in events:
+ # MIT/AST labels might be specific, e.g. "Car alarm"
+ label = event.get('label', '').lower()
</file context>
| icon: <Monitor size={20} className="text-gray-600" />, | ||
| items: [ | ||
| { id: 'safety-check', label: t('home.issues.civicEye'), icon: <Eye size={24} />, color: 'text-blue-600', bg: 'bg-blue-50' }, | ||
| { id: 'graffiti-verify', label: 'Verify Clean', icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, |
There was a problem hiding this comment.
P2: Hardcoded English label 'Verify Clean' bypasses the i18n translation system. All other items in this array use t('home.issues.xxx'). This will display untranslated English text for non-English users.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/views/Home.jsx, line 112:
<comment>Hardcoded English label `'Verify Clean'` bypasses the i18n translation system. All other items in this array use `t('home.issues.xxx')`. This will display untranslated English text for non-English users.</comment>
<file context>
@@ -100,13 +101,15 @@ const Home = ({ setView, fetchResponsibilityMap, recentIssues, handleUpvote, loa
icon: <Monitor size={20} className="text-gray-600" />,
items: [
{ id: 'safety-check', label: t('home.issues.civicEye'), icon: <Eye size={24} />, color: 'text-blue-600', bg: 'bg-blue-50' },
+ { id: 'graffiti-verify', label: 'Verify Clean', icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' },
{ id: 'my-reports', label: t('home.issues.myReports'), icon: <CheckCircle size={24} />, color: 'text-teal-600', bg: 'bg-teal-50' },
{ id: 'grievance', label: t('home.issues.grievanceManagement'), icon: <AlertTriangle size={24} />, color: 'text-orange-600', bg: 'bg-orange-50' },
</file context>
| { id: 'graffiti-verify', label: 'Verify Clean', icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, | |
| { id: 'graffiti-verify', label: t('home.issues.graffitiVerify'), icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, |
| { id: 'crowd', label: t('home.issues.crowd'), icon: <Users size={24} />, color: 'text-red-500', bg: 'bg-red-50' }, | ||
| { id: 'water-leak', label: t('home.issues.waterLeak'), icon: <Waves size={24} />, color: 'text-blue-500', bg: 'bg-blue-50' }, | ||
| { id: 'waste', label: t('home.issues.waste'), icon: <Recycle size={24} />, color: 'text-emerald-600', bg: 'bg-emerald-50' }, | ||
| { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, |
There was a problem hiding this comment.
P2: Hardcoded English label 'Air Quality' bypasses the i18n translation system. All other items in this array use t('home.issues.xxx'). This will display untranslated English text for non-English users.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/views/Home.jsx, line 104:
<comment>Hardcoded English label `'Air Quality'` bypasses the i18n translation system. All other items in this array use `t('home.issues.xxx')`. This will display untranslated English text for non-English users.</comment>
<file context>
@@ -100,13 +101,15 @@ const Home = ({ setView, fetchResponsibilityMap, recentIssues, handleUpvote, loa
{ id: 'crowd', label: t('home.issues.crowd'), icon: <Users size={24} />, color: 'text-red-500', bg: 'bg-red-50' },
{ id: 'water-leak', label: t('home.issues.waterLeak'), icon: <Waves size={24} />, color: 'text-blue-500', bg: 'bg-blue-50' },
{ id: 'waste', label: t('home.issues.waste'), icon: <Recycle size={24} />, color: 'text-emerald-600', bg: 'bg-emerald-50' },
+ { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' },
]
},
</file context>
| { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, | |
| { id: 'air-quality', label: t('home.issues.airQuality'), icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, |
| @@ -1,5 +1,5 @@ | |||
| import React, { useRef, useState, useEffect } from 'react'; | |||
There was a problem hiding this comment.
P2: The status state is set in 5 places but is never rendered after this change removed the <p> that displayed it. Every setStatus(...) call triggers a pointless re-render. Either remove the status/setStatus entirely, or restore the UI element that displays it.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/NoiseDetector.jsx, line 121:
<comment>The `status` state is set in 5 places but is never rendered after this change removed the `<p>` that displayed it. Every `setStatus(...)` call triggers a pointless re-render. Either remove the `status`/`setStatus` entirely, or restore the UI element that displays it.</comment>
<file context>
@@ -122,53 +118,60 @@ const NoiseDetector = ({ onBack }) => {
}
};
+ const hasPollution = detections.some(d => d.is_pollution);
+
return (
</file context>
| python-jose | ||
| cryptography |
There was a problem hiding this comment.
P2: Prefer python-jose[cryptography] over splitting into separate packages. The python-jose docs state: "The backend must be selected as an extra when installing python-jose." While it works because cryptography is installed separately and detected at runtime, using the extras syntax is the documented approach, preserves version constraints, and avoids pulling in unnecessary native-python backend dependencies (rsa, ecdsa, pyasn1). The same applies to passlib[bcrypt] — passlib documents pip install passlib[bcrypt] as the recommended installation method.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At backend/requirements-render.txt, line 16:
<comment>Prefer `python-jose[cryptography]` over splitting into separate packages. The python-jose docs state: "The backend must be selected as an extra when installing python-jose." While it works because `cryptography` is installed separately and detected at runtime, using the extras syntax is the documented approach, preserves version constraints, and avoids pulling in unnecessary native-python backend dependencies (`rsa`, `ecdsa`, `pyasn1`). The same applies to `passlib[bcrypt]` — passlib documents `pip install passlib[bcrypt]` as the recommended installation method.</comment>
<file context>
@@ -13,5 +13,7 @@ Pillow
a2wsgi
-python-jose[cryptography]
-passlib[bcrypt]
+python-jose
+cryptography
+passlib
</file context>
| python-jose | |
| cryptography | |
| python-jose[cryptography] |
- Downgraded `vite`, `react`, and other frontend dependencies to stable versions (React 18, Vite 5) to resolve `npm install` failures. - Sanitized input and label handling in `GraffitiVerification.jsx` to address CodeQL security alert. - Updated `netlify.toml` build command to force clean install (`rm -rf node_modules`).
There was a problem hiding this comment.
Pull request overview
This PR adds three new public grievance monitoring features inspired by western municipal apps: Air Quality monitoring using CLIP-based visual classification, Graffiti Verification for confirming wall cleanliness, and enhanced Noise Pollution detection. The changes also improve deployment configuration for Render by fixing package dependency specifications and removing a conflicting PYTHONPATH environment variable.
Changes:
- Added three new detection features: Air Quality monitoring, Graffiti Verification, and Noise Pollution detection with specialized filtering
- Updated frontend with new detector components and integrated them into the Home view navigation
- Fixed deployment configuration issues in render.yaml and requirements-render.txt for better Render/Netlify compatibility
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| render.yaml | Removed conflicting PYTHONPATH environment variable |
| backend/requirements-render.txt | Split package extras into separate dependencies for deployment compatibility |
| frontend/src/views/Home.jsx | Added Air Quality and Graffiti Verify buttons to feature navigation |
| frontend/src/NoiseDetector.jsx | Updated UI/UX and changed API endpoint to detect-noise-pollution |
| frontend/src/App.jsx | Added routing for new AirQualityDetector and GraffitiVerification components |
| frontend/src/AirQualityDetector.jsx | New component for real-time air quality monitoring via camera |
| frontend/src/GraffitiVerification.jsx | New component for verifying wall cleanliness |
| backend/routers/detection.py | Added three new detection endpoints for air quality, cleanliness, and noise pollution |
| backend/hf_api_service.py | Implemented detection logic using CLIP for air quality/cleanliness and enhanced audio event filtering |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Simple sanitization of filename (though createObjectURL handles blob securely) | ||
| const safeName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_'); |
There was a problem hiding this comment.
Creating object URLs with URL.createObjectURL without cleanup can cause memory leaks. The created URL should be revoked using URL.revokeObjectURL when the component unmounts or when a new image is selected. Consider adding a cleanup effect or revoking the old URL before creating a new one.
| if (data.detections && data.detections.length > 0) { | ||
| setResult(data.detections[0]); // Top result | ||
| } else { | ||
| setResult({ label: "Analysing...", confidence: 0 }); |
There was a problem hiding this comment.
The spelling 'Analysing' uses British English spelling, while the rest of the codebase appears to use American English spelling (e.g., 'Analyzing' in GraffitiVerification.jsx line 79). Consider using 'Analyzing' for consistency.
| setResult({ label: "Analysing...", confidence: 0 }); | |
| setResult({ label: "Analyzing...", confidence: 0 }); |
| { id: 'crowd', label: t('home.issues.crowd'), icon: <Users size={24} />, color: 'text-red-500', bg: 'bg-red-50' }, | ||
| { id: 'water-leak', label: t('home.issues.waterLeak'), icon: <Waves size={24} />, color: 'text-blue-500', bg: 'bg-blue-50' }, | ||
| { id: 'waste', label: t('home.issues.waste'), icon: <Recycle size={24} />, color: 'text-emerald-600', bg: 'bg-emerald-50' }, | ||
| { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, |
There was a problem hiding this comment.
The label for the new Air Quality feature is hardcoded as 'Air Quality' instead of using the translation function like other features. This breaks internationalization consistency. All other features in this file use t('home.issues.*') for their labels.
| { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, | |
| { id: 'air-quality', label: t('home.issues.airQuality'), icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, |
| useEffect(() => { | ||
| let interval; | ||
| if (isDetecting) { | ||
| startCamera(); | ||
| interval = setInterval(captureAndAnalyze, 3000); // Every 3s | ||
| } else { | ||
| stopCamera(); | ||
| setResult(null); | ||
| } | ||
| return () => { | ||
| stopCamera(); | ||
| clearInterval(interval); | ||
| }; | ||
| }, [isDetecting]); |
There was a problem hiding this comment.
The interval in the useEffect hook is not properly cleaned up. The dependency array is missing isDetecting, which means the cleanup function may not properly clear the interval when isDetecting changes. Additionally, captureAndAnalyze depends on isDetecting but it's not in the dependency array. This could lead to stale closures and memory leaks.
| @router.post("/api/detect-air-quality") | ||
| async def detect_air_quality_endpoint(request: Request, image: UploadFile = File(...)): | ||
| # Optimized Image Processing: Validation + Optimization | ||
| _, image_bytes = await process_uploaded_image(image) | ||
|
|
||
| try: | ||
| client = get_http_client(request) | ||
| detections = await detect_air_quality_clip(image_bytes, client=client) | ||
| return {"detections": detections} | ||
| except Exception as e: | ||
| logger.error(f"Air quality detection error: {e}", exc_info=True) | ||
| raise HTTPException(status_code=500, detail="Internal server error") | ||
|
|
||
| @router.post("/api/detect-cleanliness") | ||
| async def detect_cleanliness_endpoint(request: Request, image: UploadFile = File(...)): | ||
| # Optimized Image Processing: Validation + Optimization | ||
| _, image_bytes = await process_uploaded_image(image) | ||
|
|
||
| try: | ||
| client = get_http_client(request) | ||
| detections = await detect_cleanliness_clip(image_bytes, client=client) | ||
| return {"detections": detections} | ||
| except Exception as e: | ||
| logger.error(f"Cleanliness detection error: {e}", exc_info=True) | ||
| raise HTTPException(status_code=500, detail="Internal server error") | ||
|
|
||
| @router.post("/api/detect-noise-pollution") | ||
| async def detect_noise_pollution_endpoint(request: Request, file: UploadFile = File(...)): | ||
| # Audio validation | ||
| if hasattr(file, 'size') and file.size and file.size > 10 * 1024 * 1024: | ||
| raise HTTPException(status_code=413, detail="Audio file too large") | ||
|
|
||
| try: | ||
| audio_bytes = await file.read() | ||
| except Exception as e: | ||
| logger.error(f"Invalid audio file: {e}", exc_info=True) | ||
| raise HTTPException(status_code=400, detail="Invalid audio file") | ||
|
|
||
| try: | ||
| client = get_http_client(request) | ||
| detections = await detect_noise_pollution_event(audio_bytes, client=client) | ||
| return {"detections": detections} | ||
| except Exception as e: | ||
| logger.error(f"Noise pollution 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-air-quality, detect-cleanliness, detect-noise-pollution) lack test coverage. Other similar detection endpoints in the codebase have corresponding tests in backend/tests/test_new_detectors.py. Tests should be added to verify the endpoints work correctly and handle errors appropriately.
| # Audio validation | ||
| if hasattr(file, 'size') and file.size and file.size > 10 * 1024 * 1024: | ||
| raise HTTPException(status_code=413, detail="Audio file too large") | ||
|
|
||
| try: | ||
| audio_bytes = await file.read() | ||
| except Exception as e: | ||
| logger.error(f"Invalid audio file: {e}", exc_info=True) | ||
| raise HTTPException(status_code=400, detail="Invalid audio file") |
There was a problem hiding this comment.
The audio file validation logic is duplicated from the existing /api/detect-audio endpoint (lines 256-285). Consider extracting this validation logic into a shared helper function to reduce code duplication and ensure consistent validation across audio endpoints.
|
|
||
| is_noise = any(nl in label for nl in noise_pollution_labels) | ||
|
|
||
| if is_noise and score > 0.3: |
There was a problem hiding this comment.
The confidence threshold of 0.3 for noise pollution detection is relatively low and may result in false positives. Consider documenting why this threshold was chosen or making it configurable. Other detection functions in the codebase typically don't filter by score, leaving that decision to the caller.
| icon: <Monitor size={20} className="text-gray-600" />, | ||
| items: [ | ||
| { id: 'safety-check', label: t('home.issues.civicEye'), icon: <Eye size={24} />, color: 'text-blue-600', bg: 'bg-blue-50' }, | ||
| { id: 'graffiti-verify', label: 'Verify Clean', icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, |
There was a problem hiding this comment.
The label for the Graffiti Verification feature is hardcoded as 'Verify Clean' instead of using the translation function. This breaks internationalization consistency with the rest of the codebase where all feature labels use t('home.issues.*').
| { id: 'graffiti-verify', label: 'Verify Clean', icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, | |
| { id: 'graffiti-verify', label: t('home.issues.verifyClean'), icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' }, |
| async def detect_noise_pollution_event(audio_bytes: bytes, client: httpx.AsyncClient = None): | ||
| """ | ||
| Wraps detect_audio_event to flag noise pollution. | ||
| """ | ||
| events = await detect_audio_event(audio_bytes, client) | ||
|
|
||
| noise_pollution_labels = [ | ||
| "traffic", "horn", "siren", "jackhammer", "construction", "drill", | ||
| "engine", "explosion", "gunshot", "scream", "shout", "bark", "chainsaw", | ||
| "aircraft", "helicopter", "train" | ||
| ] | ||
|
|
||
| detected_noise = [] | ||
| for event in events: | ||
| # MIT/AST labels might be specific, e.g. "Car alarm" | ||
| label = event.get('label', '').lower() | ||
| score = event.get('score', 0) | ||
|
|
||
| is_noise = any(nl in label for nl in noise_pollution_labels) | ||
|
|
||
| if is_noise and score > 0.3: | ||
| detected_noise.append({ | ||
| "type": event.get('label'), | ||
| "confidence": score, | ||
| "is_pollution": True | ||
| }) | ||
|
|
||
| return detected_noise |
There was a problem hiding this comment.
The detect_noise_pollution_event function only returns events that match the noise pollution criteria and filters out all other sounds. This means when non-pollution sounds are detected (like speech or music), the frontend receives an empty array and shows "Listening..." even though sounds were actually detected. Consider returning all detected sounds with the is_pollution flag set to false for non-pollution events, so users get feedback that the system is working and detecting sounds even when there's no pollution.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (3)
frontend/src/NoiseDetector.jsx (1)
148-156: Verifydet.typehandlesundefinedgracefully.If the backend's
detect_noise_pollution_eventencounters an event without a'label'key,event.get('label')returnsNone, which serializes to JSONnull. In that case,det.typewould benulland rendering{det.type}would display nothing (React skips null), but thecapitalizeclass wouldn't cause an error. Just worth being aware of.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/NoiseDetector.jsx` around lines 148 - 156, The rendering of det.type inside the detections.map in NoiseDetector.jsx can be null/undefined when the backend omits the label; update the display to coalesce to a safe fallback (e.g., use det.type ?? 'unknown' or String(det.type || 'unknown')) where det.type is referenced so the UI shows a sensible label and the capitalize styling still applies; locate the JSX inside the detections.map callback and replace the raw {det.type} usage with the fallback expression.backend/hf_api_service.py (1)
477-504: Substring matching on noise labels could produce incidental matches.
any(nl in label for nl in noise_pollution_labels)at line 495 does substring containment, so a label like"Bark, Barking"would match"bark"correctly, but labels containing"engine"as a substring of a longer word could theoretically match too. Given AudioSet labels, this is unlikely to be a practical issue, butany(nl in label.split() for nl in ...)or word-boundary matching would be more precise.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/hf_api_service.py` around lines 477 - 504, The substring check in detect_noise_pollution_event using any(nl in label for nl in noise_pollution_labels) can produce incidental matches; change it to perform whole-word matching (e.g., use regex word-boundary checks) against the normalized label string: ensure label is lowercased and run re.search(r'\b' + re.escape(nl) + r'\b', label) for each nl in noise_pollution_labels (import re at top), and keep the existing score threshold and return shape unchanged.backend/requirements-render.txt (1)
16-19: Consider pinning versions for the new dependencies.Splitting
python-jose[cryptography]andpasslib[bcrypt]into individual packages works, but none of the four new entries are version-pinned. Without pins, a future deploy could pull a breaking or vulnerable release. This is consistent with the rest of the file, but worth addressing eventually — especially forcryptographyandbcrypt, which have had breaking changes across major versions.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/requirements-render.txt` around lines 16 - 19, The new dependency entries (python-jose, cryptography, passlib, bcrypt) are not version-pinned; update them to explicit, tested pins using exact versions (e.g. python-jose[cryptography]==<stable-version>, passlib[bcrypt]==<stable-version>, cryptography==<stable-version>, bcrypt==<stable-version>) so future installs are deterministic, then run your test suite or a dependency resolver (pip-compile/poetry) to pick compatible versions and lock them in the requirements file; ensure you reference the package names python-jose, cryptography, passlib, and bcrypt when making the changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@backend/hf_api_service.py`:
- Around line 460-466: The targets for pollution detection in
detect_air_quality_clip include "fog", which can cause false positives for
natural fog; update detect_air_quality_clip so targets no longer treat "fog" as
pollution (remove "fog" from the targets list) or alternatively add a
neutral/ambiguous category and adjust the call to _detect_clip_generic
accordingly (e.g., keep "fog" in labels but not in targets and/or add a separate
neutral_labels list and handle it in _detect_clip_generic or post-process its
results).
- Around line 468-475: The detector currently only passes positive targets to
_detect_clip_generic (targets = ["clean wall","freshly painted wall"]), so dirty
walls produce an empty list; change detect_cleanliness_clip to return full CLIP
results so the frontend can decide: call _detect_clip_generic with either
targets set to the full labels list (labels) or with a flag/None that disables
target filtering (so all top labels like "graffiti", "vandalism", "dirty wall"
are returned), leaving GraffitiVerification.jsx able to interpret pass/fail;
update detect_cleanliness_clip (and if needed _detect_clip_generic) accordingly.
In `@backend/routers/detection.py`:
- Around line 469-487: The endpoint detect_noise_pollution_endpoint validates
file.size before reading but misses the necessary post-read check, so add a
check immediately after reading audio_bytes (i.e., after await file.read()) to
raise HTTPException 413 if len(audio_bytes) > 10 * 1024 * 1024; keep the
existing error handling around reading and only call
detect_noise_pollution_event(client=client, audio_bytes) after the size check to
prevent oversized uploads from being processed.
In `@frontend/src/AirQualityDetector.jsx`:
- Around line 66-79: The interval is scheduled before the camera stream/video
dimensions are ready, causing early captures to fail; update the effect so it
waits for camera readiness before starting periodic captures: either make
startCamera() return a Promise that resolves when the video is
playing/loadedmetadata, or attach a loadedmetadata/play event listener to the
video element inside useEffect, and only call setInterval(captureAndAnalyze,
3000) after that promise/event fires; keep stopCamera() and clearInterval in the
cleanup and reference the existing functions useEffect, startCamera,
captureAndAnalyze, and stopCamera when locating the change.
- Line 2: Remove the unused CloudRain import from the component import line in
AirQualityDetector.jsx; update the import statement that currently lists
CloudRain, Wind, AlertTriangle to only import Wind and AlertTriangle so
CloudRain is not imported anywhere in the AirQualityDetector component.
In `@frontend/src/GraffitiVerification.jsx`:
- Line 2: Remove the unused Upload icon import from the lucide-react import list
at the top of GraffitiVerification.jsx (the line importing Camera, Upload,
CheckCircle, XCircle, Loader2, Brush) — update the import to only include the
icons actually used (Camera, CheckCircle, XCircle, Loader2, Brush) so there are
no unused imports.
- Around line 12-41: handleFile creates blob URLs with URL.createObjectURL(file)
but never revokes them, causing memory leaks and also does nothing when fetch
returns non-ok; fix by revoking any existing blob URL before calling
URL.createObjectURL (use the existing image state and
URL.revokeObjectURL(image)), ensure you set an error result or message when
res.ok is false (e.g., setResult({ label: "Error", confidence: 0, error: true })
or similar) and keep setLoading(false) in finally, and add a useEffect cleanup
that revokes the current image URL on unmount (useEffect with dependency [image]
returning a function that revokes if image exists) so handleFile, setImage,
setResult, setLoading and the image state are properly managed.
In `@frontend/src/views/Home.jsx`:
- Line 104: The two category entries in the categories array in Home.jsx use
hardcoded English labels ("Air Quality" and "Verify Clean"); replace those with
calls to the translation function (e.g., t('categories.airQuality') and
t('categories.verifyClean')) so they follow the same i18n pattern as the other
items (search for the categories array and the existing t() usage in Home.jsx to
locate them), and then add the corresponding keys to your i18n resource files.
---
Nitpick comments:
In `@backend/hf_api_service.py`:
- Around line 477-504: The substring check in detect_noise_pollution_event using
any(nl in label for nl in noise_pollution_labels) can produce incidental
matches; change it to perform whole-word matching (e.g., use regex word-boundary
checks) against the normalized label string: ensure label is lowercased and run
re.search(r'\b' + re.escape(nl) + r'\b', label) for each nl in
noise_pollution_labels (import re at top), and keep the existing score threshold
and return shape unchanged.
In `@backend/requirements-render.txt`:
- Around line 16-19: The new dependency entries (python-jose, cryptography,
passlib, bcrypt) are not version-pinned; update them to explicit, tested pins
using exact versions (e.g. python-jose[cryptography]==<stable-version>,
passlib[bcrypt]==<stable-version>, cryptography==<stable-version>,
bcrypt==<stable-version>) so future installs are deterministic, then run your
test suite or a dependency resolver (pip-compile/poetry) to pick compatible
versions and lock them in the requirements file; ensure you reference the
package names python-jose, cryptography, passlib, and bcrypt when making the
changes.
In `@frontend/src/NoiseDetector.jsx`:
- Around line 148-156: The rendering of det.type inside the detections.map in
NoiseDetector.jsx can be null/undefined when the backend omits the label; update
the display to coalesce to a safe fallback (e.g., use det.type ?? 'unknown' or
String(det.type || 'unknown')) where det.type is referenced so the UI shows a
sensible label and the capitalize styling still applies; locate the JSX inside
the detections.map callback and replace the raw {det.type} usage with the
fallback expression.
| async def detect_air_quality_clip(image: Union[Image.Image, bytes], client: httpx.AsyncClient = None): | ||
| """ | ||
| Detects air quality/smog levels using CLIP. | ||
| """ | ||
| labels = ["clean air", "mild smog", "dense smog", "hazardous air pollution", "fog", "clear sky", "blue sky", "polluted city"] | ||
| targets = ["mild smog", "dense smog", "hazardous air pollution", "fog", "polluted city"] | ||
| return await _detect_clip_generic(image, labels, targets, client) |
There was a problem hiding this comment.
"fog" classified as pollution may produce false positives.
The targets list includes "fog", which is a natural weather phenomenon and not necessarily an indicator of air pollution. This could cause clean-air scenes with natural fog to be flagged as polluted. Consider removing "fog" from targets or adding a separate neutral category.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/hf_api_service.py` around lines 460 - 466, The targets for pollution
detection in detect_air_quality_clip include "fog", which can cause false
positives for natural fog; update detect_air_quality_clip so targets no longer
treat "fog" as pollution (remove "fog" from the targets list) or alternatively
add a neutral/ambiguous category and adjust the call to _detect_clip_generic
accordingly (e.g., keep "fog" in labels but not in targets and/or add a separate
neutral_labels list and handle it in _detect_clip_generic or post-process its
results).
| async def detect_cleanliness_clip(image: Union[Image.Image, bytes], client: httpx.AsyncClient = None): | ||
| """ | ||
| Verifies if a wall/area is clean (for graffiti removal verification). | ||
| """ | ||
| labels = ["clean wall", "graffiti", "vandalism", "freshly painted wall", "dirty wall"] | ||
| # We want to know if it is CLEAN | ||
| targets = ["clean wall", "freshly painted wall"] | ||
| return await _detect_clip_generic(image, labels, targets, client) |
There was a problem hiding this comment.
Cleanliness detector only returns positive matches — dirty walls produce empty results, breaking frontend UX.
detect_cleanliness_clip targets only ["clean wall", "freshly painted wall"]. When a wall has graffiti, the top CLIP labels will be "graffiti", "vandalism", or "dirty wall" — none of which are in target_labels. _detect_clip_generic (line 81) filters to only target labels with score > 0.4, so the function returns [] for dirty walls.
In GraffitiVerification.jsx, an empty detection list results in { label: "Unable to determine", confidence: 0 } — which is neither a pass nor a clear fail. The user gets an ambiguous result instead of a definitive "wall has graffiti" message.
Consider returning the top result regardless of target membership, or include negative labels in targets so the frontend can distinguish clean from dirty.
Proposed fix: return all results and let the frontend decide
async def detect_cleanliness_clip(image: Union[Image.Image, bytes], client: httpx.AsyncClient = None):
"""
Verifies if a wall/area is clean (for graffiti removal verification).
"""
labels = ["clean wall", "graffiti", "vandalism", "freshly painted wall", "dirty wall"]
- # We want to know if it is CLEAN
- targets = ["clean wall", "freshly painted wall"]
- return await _detect_clip_generic(image, labels, targets, client)
+ try:
+ img_bytes = _prepare_image_bytes(image)
+ results = await query_hf_api(img_bytes, labels, client=client)
+ if not isinstance(results, list) or len(results) == 0:
+ return []
+ top = results[0]
+ return [{
+ "label": top.get('label', 'unknown'),
+ "confidence": top.get('score', 0),
+ "box": []
+ }]
+ except Exception as e:
+ logger.error(f"Cleanliness Detection Error: {e}")
+ return []🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/hf_api_service.py` around lines 468 - 475, The detector currently
only passes positive targets to _detect_clip_generic (targets = ["clean
wall","freshly painted wall"]), so dirty walls produce an empty list; change
detect_cleanliness_clip to return full CLIP results so the frontend can decide:
call _detect_clip_generic with either targets set to the full labels list
(labels) or with a flag/None that disables target filtering (so all top labels
like "graffiti", "vandalism", "dirty wall" are returned), leaving
GraffitiVerification.jsx able to interpret pass/fail; update
detect_cleanliness_clip (and if needed _detect_clip_generic) accordingly.
| @router.post("/api/detect-noise-pollution") | ||
| async def detect_noise_pollution_endpoint(request: Request, file: UploadFile = File(...)): | ||
| # Audio validation | ||
| if hasattr(file, 'size') and file.size and file.size > 10 * 1024 * 1024: | ||
| raise HTTPException(status_code=413, detail="Audio file too large") | ||
|
|
||
| try: | ||
| audio_bytes = await file.read() | ||
| except Exception as e: | ||
| logger.error(f"Invalid audio file: {e}", exc_info=True) | ||
| raise HTTPException(status_code=400, detail="Invalid audio file") | ||
|
|
||
| try: | ||
| client = get_http_client(request) | ||
| detections = await detect_noise_pollution_event(audio_bytes, client=client) | ||
| return {"detections": detections} | ||
| except Exception as e: | ||
| logger.error(f"Noise pollution detection error: {e}", exc_info=True) | ||
| raise HTTPException(status_code=500, detail="Internal server error") |
There was a problem hiding this comment.
Missing post-read file size validation for audio bytes.
The existing /api/detect-audio endpoint (line 273) validates len(audio_bytes) after reading, because file.size can be None for streamed/blob uploads. This new endpoint only checks file.size before the read (line 472), which is unreliable. An oversized file could bypass the check.
Proposed fix: add post-read size check
try:
audio_bytes = await file.read()
+ if len(audio_bytes) > 10 * 1024 * 1024:
+ raise HTTPException(status_code=413, detail="Audio file too large")
except Exception as e:
logger.error(f"Invalid audio file: {e}", exc_info=True)
raise HTTPException(status_code=400, detail="Invalid audio file")🧰 Tools
🪛 Ruff (0.15.0)
[warning] 470-470: Do not perform function call File in argument defaults; instead, perform the call within the function, or read the default from a module-level singleton variable
(B008)
[warning] 479-479: Within an except clause, raise exceptions with raise ... from err or raise ... from None to distinguish them from errors in exception handling
(B904)
[warning] 484-484: Consider moving this statement to an else block
(TRY300)
[warning] 487-487: Within an except clause, raise exceptions with raise ... from err or raise ... from None to distinguish them from errors in exception handling
(B904)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/routers/detection.py` around lines 469 - 487, The endpoint
detect_noise_pollution_endpoint validates file.size before reading but misses
the necessary post-read check, so add a check immediately after reading
audio_bytes (i.e., after await file.read()) to raise HTTPException 413 if
len(audio_bytes) > 10 * 1024 * 1024; keep the existing error handling around
reading and only call detect_noise_pollution_event(client=client, audio_bytes)
after the size check to prevent oversized uploads from being processed.
| @@ -0,0 +1,147 @@ | |||
| import React, { useRef, useState, useEffect } from 'react'; | |||
| import { CloudRain, Wind, AlertTriangle } from 'lucide-react'; | |||
There was a problem hiding this comment.
Unused import CloudRain.
CloudRain is imported but never used in the component. Only Wind and AlertTriangle are referenced.
Fix
-import { CloudRain, Wind, AlertTriangle } from 'lucide-react';
+import { Wind, AlertTriangle } from 'lucide-react';📝 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.
| import { CloudRain, Wind, AlertTriangle } from 'lucide-react'; | |
| import { Wind, AlertTriangle } from 'lucide-react'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/AirQualityDetector.jsx` at line 2, Remove the unused CloudRain
import from the component import line in AirQualityDetector.jsx; update the
import statement that currently lists CloudRain, Wind, AlertTriangle to only
import Wind and AlertTriangle so CloudRain is not imported anywhere in the
AirQualityDetector component.
| useEffect(() => { | ||
| let interval; | ||
| if (isDetecting) { | ||
| startCamera(); | ||
| interval = setInterval(captureAndAnalyze, 3000); // Every 3s | ||
| } else { | ||
| stopCamera(); | ||
| setResult(null); | ||
| } | ||
| return () => { | ||
| stopCamera(); | ||
| clearInterval(interval); | ||
| }; | ||
| }, [isDetecting]); |
There was a problem hiding this comment.
First captures will silently fail — camera isn't ready when the interval starts.
startCamera() is async (it awaits getUserMedia), but the effect doesn't await it before scheduling setInterval(captureAndAnalyze, 3000). The video element won't have a stream or valid dimensions yet, so the first capture(s) will produce a 0×0 canvas and a null blob (silently skipped at line 43). This wastes interval cycles and delays the first real result.
Consider awaiting camera readiness (e.g., listening for the video loadedmetadata event or awaiting startCamera and capturing only after the stream is live).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/AirQualityDetector.jsx` around lines 66 - 79, The interval is
scheduled before the camera stream/video dimensions are ready, causing early
captures to fail; update the effect so it waits for camera readiness before
starting periodic captures: either make startCamera() return a Promise that
resolves when the video is playing/loadedmetadata, or attach a
loadedmetadata/play event listener to the video element inside useEffect, and
only call setInterval(captureAndAnalyze, 3000) after that promise/event fires;
keep stopCamera() and clearInterval in the cleanup and reference the existing
functions useEffect, startCamera, captureAndAnalyze, and stopCamera when
locating the change.
| @@ -0,0 +1,112 @@ | |||
| import React, { useState, useRef } from 'react'; | |||
| import { Camera, Upload, CheckCircle, XCircle, Loader2, Brush } from 'lucide-react'; | |||
There was a problem hiding this comment.
Unused import Upload.
Upload is imported from lucide-react but never referenced in the JSX.
Fix
-import { Camera, Upload, CheckCircle, XCircle, Loader2, Brush } from 'lucide-react';
+import { Camera, CheckCircle, XCircle, Loader2, Brush } from 'lucide-react';📝 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.
| import { Camera, Upload, CheckCircle, XCircle, Loader2, Brush } from 'lucide-react'; | |
| import { Camera, CheckCircle, XCircle, Loader2, Brush } from 'lucide-react'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/GraffitiVerification.jsx` at line 2, Remove the unused Upload
icon import from the lucide-react import list at the top of
GraffitiVerification.jsx (the line importing Camera, Upload, CheckCircle,
XCircle, Loader2, Brush) — update the import to only include the icons actually
used (Camera, CheckCircle, XCircle, Loader2, Brush) so there are no unused
imports.
| const handleFile = async (file) => { | ||
| if (!file) return; | ||
|
|
||
| const url = URL.createObjectURL(file); | ||
| setImage(url); | ||
| setResult(null); | ||
| setLoading(true); | ||
|
|
||
| const formData = new FormData(); | ||
| formData.append('image', file); | ||
|
|
||
| try { | ||
| const res = await fetch(`${API_URL}/api/detect-cleanliness`, { | ||
| method: 'POST', | ||
| body: formData | ||
| }); | ||
| if (res.ok) { | ||
| const data = await res.json(); | ||
| if (data.detections && data.detections.length > 0) { | ||
| setResult(data.detections[0]); | ||
| } else { | ||
| setResult({ label: "Unable to determine", confidence: 0 }); | ||
| } | ||
| } | ||
| } catch (e) { | ||
| console.error("Verification failed", e); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Object URL memory leak — URL.createObjectURL is never revoked.
Each call to handleFile creates a new blob URL (line 15) without revoking the previous one. Over multiple uploads, this leaks browser memory. Revoke the old URL before creating a new one, and clean up on unmount.
Additionally, when res.ok is false (e.g., 500 from backend), the user receives no feedback — loading clears but no error is shown.
Proposed fix for the memory leak
const GraffitiVerification = ({ onBack }) => {
const fileInputRef = useRef(null);
const [image, setImage] = useState(null);
const [result, setResult] = useState(null);
const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
const handleFile = async (file) => {
if (!file) return;
+ if (image) URL.revokeObjectURL(image);
const url = URL.createObjectURL(file);
setImage(url);
setResult(null);
+ setError(null);
setLoading(true);
const formData = new FormData();
formData.append('image', file);
try {
const res = await fetch(`${API_URL}/api/detect-cleanliness`, {
method: 'POST',
body: formData
});
if (res.ok) {
const data = await res.json();
if (data.detections && data.detections.length > 0) {
setResult(data.detections[0]);
} else {
setResult({ label: "Unable to determine", confidence: 0 });
}
+ } else {
+ setError("Analysis failed. Please try again.");
}
} catch (e) {
console.error("Verification failed", e);
+ setError("Network error. Please try again.");
} finally {
setLoading(false);
}
};Also add cleanup on unmount:
useEffect(() => {
return () => {
if (image) URL.revokeObjectURL(image);
};
}, [image]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/GraffitiVerification.jsx` around lines 12 - 41, handleFile
creates blob URLs with URL.createObjectURL(file) but never revokes them, causing
memory leaks and also does nothing when fetch returns non-ok; fix by revoking
any existing blob URL before calling URL.createObjectURL (use the existing image
state and URL.revokeObjectURL(image)), ensure you set an error result or message
when res.ok is false (e.g., setResult({ label: "Error", confidence: 0, error:
true }) or similar) and keep setLoading(false) in finally, and add a useEffect
cleanup that revokes the current image URL on unmount (useEffect with dependency
[image] returning a function that revokes if image exists) so handleFile,
setImage, setResult, setLoading and the image state are properly managed.
| { id: 'crowd', label: t('home.issues.crowd'), icon: <Users size={24} />, color: 'text-red-500', bg: 'bg-red-50' }, | ||
| { id: 'water-leak', label: t('home.issues.waterLeak'), icon: <Waves size={24} />, color: 'text-blue-500', bg: 'bg-blue-50' }, | ||
| { id: 'waste', label: t('home.issues.waste'), icon: <Recycle size={24} />, color: 'text-emerald-600', bg: 'bg-emerald-50' }, | ||
| { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' }, |
There was a problem hiding this comment.
Hardcoded labels break i18n — all other items use t().
Both new category items use hardcoded English strings ('Air Quality' and 'Verify Clean') while every other item in the categories array uses the t() translation function. This will display English text regardless of the user's locale.
Proposed fix
- { id: 'air-quality', label: 'Air Quality', icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' },
+ { id: 'air-quality', label: t('home.issues.airQuality'), icon: <Wind size={24} />, color: 'text-sky-500', bg: 'bg-sky-50' },- { id: 'graffiti-verify', label: 'Verify Clean', icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' },
+ { id: 'graffiti-verify', label: t('home.issues.graffitiVerify'), icon: <Sparkles size={24} />, color: 'text-purple-600', bg: 'bg-purple-50' },Don't forget to add the corresponding translation keys to your i18n resource files.
Also applies to: 112-112
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/views/Home.jsx` at line 104, The two category entries in the
categories array in Home.jsx use hardcoded English labels ("Air Quality" and
"Verify Clean"); replace those with calls to the translation function (e.g.,
t('categories.airQuality') and t('categories.verifyClean')) so they follow the
same i18n pattern as the other items (search for the categories array and the
existing t() usage in Home.jsx to locate them), and then add the corresponding
keys to your i18n resource files.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
frontend/package.json (1)
32-37: Build tools should be indevDependencies, notdependencies.
vite,@vitejs/plugin-react,autoprefixer,postcss, andvite-plugin-pwaare build-time tools and don't belong independencies. This inflates any production install and blurs the runtime/build boundary.Proposed fix — move to devDependencies
"dependencies": { "@supabase/supabase-js": "^2.39.0", "@tensorflow-models/mobilenet": "^2.1.1", "@tensorflow/tfjs": "^4.16.0", "dexie": "^3.2.4", "framer-motion": "^11.0.3", "i18next": "^23.8.2", "i18next-browser-languagedetector": "^7.2.0", "lucide-react": "^0.344.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-router-dom": "^6.22.1", - "react-webcam": "^7.2.0", - "@vitejs/plugin-react": "^4.2.1", - "autoprefixer": "^10.4.18", - "postcss": "^8.4.35", - "tailwindcss": "^3.4.1", - "vite": "^5.1.4", - "vite-plugin-pwa": "^0.19.0" + "react-webcam": "^7.2.0" }, "devDependencies": { + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.18", + "postcss": "^8.4.35", + "tailwindcss": "^3.4.1", + "vite": "^5.1.4", + "vite-plugin-pwa": "^0.19.0",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/package.json` around lines 32 - 37, Remove the build-only packages from dependencies and add them to devDependencies: move "vite", "@vitejs/plugin-react", "autoprefixer", "postcss", "tailwindcss", and "vite-plugin-pwa" out of the dependencies object and into devDependencies in package.json, then reinstall/update the lockfile (npm/yarn/pnpm) so the lockfile reflects the change; ensure no runtime code imports these packages in production entrypoints before moving them.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/package.json`:
- Line 43: The package.json dependency "@eslint/js" is pinned to ^9.0.0 which is
incompatible with the project's "eslint" ^8.57.0; update package.json so the
ESLint packages match by either upgrading "eslint" to ^9.0.0 (if the codebase
supports ESLint 9) or downgrading "@eslint/js" to a v8 range such as ^8.57.0;
modify the "eslint" and/or "@eslint/js" entries in package.json accordingly and
run install/lint to verify compatibility.
In `@frontend/src/GraffitiVerification.jsx`:
- Around line 85-89: The file input's onChange handler (the inline handler that
calls handleFile) won't fire if the user selects the same file again; after
successfully handling the file you should reset the input's value so subsequent
identical selections trigger onChange. Update the handler that calls handleFile
(or inside handleFile itself) to clear the input value (e.g., set e.target.value
= '' or use a ref to the <input> and set ref.current.value = '') immediately
after handling so the same filename can be re-selected.
- Around line 100-118: The component currently does case-sensitive checks with
result.label.includes('clean') and .includes('freshly') which misclassifies
labels like "Clean" or "Freshly painted"; compute a normalized boolean (e.g.,
isClean) before rendering by testing result.label case-insensitively (lowercase
or a case-insensitive regex such as /clean|freshly/i) and then replace all
occurrences of result.label.includes(...) in GraffitiVerification.jsx (the
conditional that chooses classes/icons and the "Verification Passed"/"Action
Required" text) with that isClean variable so rendering uses the normalized
check.
In `@netlify.toml`:
- Line 6: The build command in netlify.toml deletes package-lock.json causing
non-deterministic installs; update the command string to stop removing the
lockfile and use a reproducible install: replace the current command ("cd
frontend && rm -rf node_modules package-lock.json && npm install && npm run
build") with either "cd frontend && npm ci && npm run build" (preferred) or at
minimum "cd frontend && rm -rf node_modules && npm install && npm run build" so
the committed package-lock.json is preserved and builds remain reproducible.
---
Duplicate comments:
In `@frontend/src/GraffitiVerification.jsx`:
- Line 2: The import list in GraffitiVerification.jsx includes an unused symbol
`Upload`; remove `Upload` from the import statement that currently imports from
'lucide-react' (the line importing Camera, Upload, CheckCircle, XCircle,
Loader2, Brush) so only used icons remain (e.g., Camera, CheckCircle, XCircle,
Loader2, Brush), and run the linter/formatter to ensure no unused-import
warnings remain.
- Around line 12-53: In handleFile, ensure the created blob URL is revoked to
avoid memory leaks: call URL.revokeObjectURL on the previous URL (tracked via
state or a local variable) when replacing or on cleanup/after use, and revoke
the new URL in error paths and when the component unmounts; additionally, handle
non-OK fetch responses by reading the response body (e.g., await res.text() or
res.json() safely) and setResult with an explicit error/placeholder (and log the
response details) so the UI shows user feedback when res.ok is false instead of
silently doing nothing; update references to URL.createObjectURL,
URL.revokeObjectURL, setImage, setResult, and the fetch block inside handleFile.
---
Nitpick comments:
In `@frontend/package.json`:
- Around line 32-37: Remove the build-only packages from dependencies and add
them to devDependencies: move "vite", "@vitejs/plugin-react", "autoprefixer",
"postcss", "tailwindcss", and "vite-plugin-pwa" out of the dependencies object
and into devDependencies in package.json, then reinstall/update the lockfile
(npm/yarn/pnpm) so the lockfile reflects the change; ensure no runtime code
imports these packages in production entrypoints before moving them.
| "@babel/preset-env": "^7.24.0", | ||
| "@babel/preset-react": "^7.24.0", | ||
| "@eslint/js": "^9.39.1", | ||
| "@eslint/js": "^9.0.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -name "package.json" -type f | head -20Repository: RohanExploit/VishwaGuru
Length of output: 90
🌐 Web query:
@eslint/js version 9 compatibility with eslint version 8
💡 Result:
@eslint/js v9 is intended to be used with ESLint v9 (ESLint v9.x depends on the matching @eslint/js v9.x release). [1]
If you’re staying on ESLint v8, you should use @eslint/js@^8. Mixing ESLint 8 + @eslint/js 9 is not recommended because the v9 configs can reference rules/options aligned with ESLint 9 and may fail validation under ESLint 8.
If your goal is just to use flat config while still on ESLint 8, ESLint explicitly supports that—use an eslint.config.js file (or set ESLINT_USE_FLAT_CONFIG=true). [2]
Sources:
[1] ESLint v9.9.1 package.json (dependency on @eslint/js 9.9.1) https://app.unpkg.com/eslint@9.9.1/files/package.json
[2] ESLint Configuration Migration Guide (flat config usage in ESLint v8) https://eslint.org/docs/latest/use/configure/migration-guide
🏁 Script executed:
sed -n '40,55p' ./frontend/package.jsonRepository: RohanExploit/VishwaGuru
Length of output: 624
@eslint/js ^9.0.0 is incompatible with eslint ^8.57.0.
@eslint/js v9 is designed for ESLint 9. Mixing with ESLint 8 will cause validation failures. Either upgrade eslint to ^9.0.0 or downgrade @eslint/js to ^8.57.0.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/package.json` at line 43, The package.json dependency "@eslint/js"
is pinned to ^9.0.0 which is incompatible with the project's "eslint" ^8.57.0;
update package.json so the ESLint packages match by either upgrading "eslint" to
^9.0.0 (if the codebase supports ESLint 9) or downgrading "@eslint/js" to a v8
range such as ^8.57.0; modify the "eslint" and/or "@eslint/js" entries in
package.json accordingly and run install/lint to verify compatibility.
| onChange={(e) => { | ||
| if (e.target.files && e.target.files.length > 0) { | ||
| handleFile(e.target.files[0]); | ||
| } | ||
| }} |
There was a problem hiding this comment.
File input won't re-trigger for the same file.
If the user selects the same image again (e.g., after re-taking a photo with the same name), the onChange event won't fire because the input's value hasn't changed. Reset the input value after handling.
Proposed fix
onChange={(e) => {
if (e.target.files && e.target.files.length > 0) {
handleFile(e.target.files[0]);
}
+ e.target.value = '';
}}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/GraffitiVerification.jsx` around lines 85 - 89, The file input's
onChange handler (the inline handler that calls handleFile) won't fire if the
user selects the same file again; after successfully handling the file you
should reset the input's value so subsequent identical selections trigger
onChange. Update the handler that calls handleFile (or inside handleFile itself)
to clear the input value (e.g., set e.target.value = '' or use a ref to the
<input> and set ref.current.value = '') immediately after handling so the same
filename can be re-selected.
- Committed the `frontend/package-lock.json` generated by `npm install` with stable dependencies (React 18, Vite 5). - This ensures Netlify's installation phase succeeds by syncing the lockfile with `package.json`. - Downgraded unstable/future dependencies to resolve build errors.
There was a problem hiding this comment.
4 issues found across 3 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="netlify.toml">
<violation number="1" location="netlify.toml:6">
P1: Deleting `package-lock.json` in the build command breaks reproducible builds. Every deploy will resolve dependency versions fresh, which can silently introduce incompatible transitive dependency updates. If the goal is a clean install, remove only `node_modules` and keep the lockfile, or use `npm ci` which does a clean install from the lockfile automatically.</violation>
</file>
<file name="frontend/src/GraffitiVerification.jsx">
<violation number="1" location="frontend/src/GraffitiVerification.jsx:19">
P2: Memory leak: `URL.createObjectURL` is called without revoking previous object URLs. Each upload creates a new blob URL that persists in memory. Revoke the previous URL before creating a new one (e.g., `if (image) URL.revokeObjectURL(image)` before this line) and add cleanup on component unmount via useEffect.</violation>
</file>
<file name="frontend/package.json">
<violation number="1" location="frontend/package.json:50">
P1: ESLint downgraded to v8 but the project's `eslint.config.js` uses ESLint 9-only APIs (`defineConfig`, `globalIgnores` from `'eslint/config'`). This will break all linting. Either keep ESLint at v9 or rewrite the config for v8.</violation>
<violation number="2" location="frontend/package.json:51">
P1: `eslint-plugin-react-hooks` v4.6.0 does not have the `configs.flat.recommended` export used in the project's `eslint.config.js`. The flat config API was added in v5+. This will break linting.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| "eslint-plugin-react-refresh": "^0.4.24", | ||
| "globals": "^16.5.0", | ||
| "eslint": "^8.57.0", | ||
| "eslint-plugin-react-hooks": "^4.6.0", |
There was a problem hiding this comment.
P1: eslint-plugin-react-hooks v4.6.0 does not have the configs.flat.recommended export used in the project's eslint.config.js. The flat config API was added in v5+. This will break linting.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/package.json, line 51:
<comment>`eslint-plugin-react-hooks` v4.6.0 does not have the `configs.flat.recommended` export used in the project's `eslint.config.js`. The flat config API was added in v5+. This will break linting.</comment>
<file context>
@@ -16,44 +16,44 @@
- "eslint-plugin-react-refresh": "^0.4.24",
- "globals": "^16.5.0",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.5",
+ "globals": "^13.24.0",
</file context>
| "eslint-plugin-react-hooks": "^4.6.0", | |
| "eslint-plugin-react-hooks": "^5.0.0", |
| "eslint-plugin-react-hooks": "^7.0.1", | ||
| "eslint-plugin-react-refresh": "^0.4.24", | ||
| "globals": "^16.5.0", | ||
| "eslint": "^8.57.0", |
There was a problem hiding this comment.
P1: ESLint downgraded to v8 but the project's eslint.config.js uses ESLint 9-only APIs (defineConfig, globalIgnores from 'eslint/config'). This will break all linting. Either keep ESLint at v9 or rewrite the config for v8.
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 downgraded to v8 but the project's `eslint.config.js` uses ESLint 9-only APIs (`defineConfig`, `globalIgnores` from `'eslint/config'`). This will break all linting. Either keep ESLint at v9 or rewrite the config for v8.</comment>
<file context>
@@ -16,44 +16,44 @@
- "eslint-plugin-react-hooks": "^7.0.1",
- "eslint-plugin-react-refresh": "^0.4.24",
- "globals": "^16.5.0",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.5",
</file context>
| "eslint": "^8.57.0", | |
| "eslint": "^9.0.0", |
| const safeName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_'); | ||
|
|
||
| try { | ||
| const url = URL.createObjectURL(file); |
There was a problem hiding this comment.
P2: Memory leak: URL.createObjectURL is called without revoking previous object URLs. Each upload creates a new blob URL that persists in memory. Revoke the previous URL before creating a new one (e.g., if (image) URL.revokeObjectURL(image) before this line) and add cleanup on component unmount via useEffect.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/GraffitiVerification.jsx, line 19:
<comment>Memory leak: `URL.createObjectURL` is called without revoking previous object URLs. Each upload creates a new blob URL that persists in memory. Revoke the previous URL before creating a new one (e.g., `if (image) URL.revokeObjectURL(image)` before this line) and add cleanup on component unmount via useEffect.</comment>
<file context>
@@ -12,13 +12,22 @@ const GraffitiVerification = ({ onBack }) => {
+ const safeName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_');
+
+ try {
+ const url = URL.createObjectURL(file);
+ setImage(url);
+ } catch (e) {
</file context>
🔍 Quality Reminder |
- Implemented strict regex-based sanitization for the `label` field in `GraffitiVerification.jsx`. - Replaced previous loose sanitization with a whitelist approach (alphanumeric, spaces, hyphens). - This addresses the CodeQL alert regarding potential XSS risks from API responses.
- Replaced regex sanitization with a strict lookup map (`getSafeLabel`). - Ensures that the rendered label is always one of a predefined set of safe strings (e.g., "Clean Wall", "Graffiti Detected"). - Completely breaks the taint path from API response to JSX rendering, satisfying CodeQL's XSS prevention requirements.
1 participant
Implemented new features inspired by western public grievance apps:
Also improved deployment configuration for Render/Netlify by fixing
requirements-render.txtand removing conflictingPYTHONPATH.PR created automatically by Jules for task 12105682344040582540 started by @RohanExploit
Summary by cubic
Adds air quality monitoring, noise pollution detection, and graffiti cleanup verification with new endpoints and UI screens. Stabilizes builds with a synced lockfile and npm ci, and hardens Graffiti Verification by mapping labels to a strict safe set.
New Features
Dependencies
Written for commit 67c50bd. Summary will update on new commits.
Summary by CodeRabbit
New Features
UI / Navigation