Add FPS display to webcam picker frontend #142
Merged
+6
−3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bgoelTT
commented
Jan 19, 2025
bgoelTT
commented
- Adds the round-trip latency measurement to the object detection backend invocation
- Displays the FPS (computed from round-trip latency) in the webcam picker UI
…ys show icon to upload
…nto object-detection
…um to support WH_ARCH_YAML setting
…tion & use modelID in endpoint invocation
- adds a component to open live webcam - hit endpoint - draws bounding boxes WIP: has errors
…up API call and detection handling
milank94
approved these changes
Jan 19, 2025
anirudTT
approved these changes
Jan 21, 2025
|
minor comment: |
bgoelTT
added a commit
that referenced
this pull request
Jan 22, 2025
* Initial commit - add object detection route * Add package-lock.json * Add two-column object detection component * Add new layout and component structure * Use Aceternity UI file picker * adds tabs to control menu * modifies to move webcam to main component * adds webcam component * add the react package for webcam util * add shadcnn tabs ui component * modifies file upload to show last uploaded file + color change + always show icon to upload * Fix containing element scroll and z-stack * Add overflow scroll to main component * Allow images to assume full width of ObjectDetectionComponent * Add YoloV4 model config to backend API * Create new object-detection endpoint & expand DeviceConfigurations enum to support WH_ARCH_YAML setting * Add ModelType enumeration in frontend to faciliate conditional navigation & use modelID in endpoint invocation * WIP add components to support: - adds a component to open live webcam - hit endpoint - draws bounding boxes WIP: has errors * draw box on image * remove * Optimize real-time object detection to prevent frame backlog * Ensure webcam stops completely when stop button is clicked + layout changes * ts fixes * Fix aspect ratio of video container to 4:3 * Fix navigation and add <img> to SourcePicker component - TODO - wire up API call and detection handling * Refactor inference API call and UI * Fix UI bugs * Add API authentication to YOLOv4 backend * Address PR comments * Add FPS measurement and display * Remove prefix / character in navigation toast --------- Co-authored-by: Anirudh Ramchandran <[email protected]>
bgoelTT
added a commit
that referenced
this pull request
Jan 22, 2025
* Initial commit - add object detection route * Add package-lock.json * Add two-column object detection component * Add new layout and component structure * Use Aceternity UI file picker * adds tabs to control menu * modifies to move webcam to main component * adds webcam component * add the react package for webcam util * add shadcnn tabs ui component * modifies file upload to show last uploaded file + color change + always show icon to upload * Fix containing element scroll and z-stack * Add overflow scroll to main component * Allow images to assume full width of ObjectDetectionComponent * Add YoloV4 model config to backend API * Create new object-detection endpoint & expand DeviceConfigurations enum to support WH_ARCH_YAML setting * Add ModelType enumeration in frontend to faciliate conditional navigation & use modelID in endpoint invocation * WIP add components to support: - adds a component to open live webcam - hit endpoint - draws bounding boxes WIP: has errors * draw box on image * remove * Optimize real-time object detection to prevent frame backlog * Ensure webcam stops completely when stop button is clicked + layout changes * ts fixes * Fix aspect ratio of video container to 4:3 * Fix navigation and add <img> to SourcePicker component - TODO - wire up API call and detection handling * Refactor inference API call and UI * Fix UI bugs * Add API authentication to YOLOv4 backend * Address PR comments * Add FPS measurement and display * Remove prefix / character in navigation toast --------- Co-authored-by: Anirudh Ramchandran <[email protected]>
bgoelTT
added a commit
that referenced
this pull request
Jan 23, 2025
* Initial commit - add object detection route * Add package-lock.json * Add two-column object detection component * Add new layout and component structure * Use Aceternity UI file picker * adds tabs to control menu * modifies to move webcam to main component * adds webcam component * add the react package for webcam util * add shadcnn tabs ui component * modifies file upload to show last uploaded file + color change + always show icon to upload * Fix containing element scroll and z-stack * Add overflow scroll to main component * Allow images to assume full width of ObjectDetectionComponent * Add YoloV4 model config to backend API * Create new object-detection endpoint & expand DeviceConfigurations enum to support WH_ARCH_YAML setting * Add ModelType enumeration in frontend to faciliate conditional navigation & use modelID in endpoint invocation * WIP add components to support: - adds a component to open live webcam - hit endpoint - draws bounding boxes WIP: has errors * draw box on image * remove * Optimize real-time object detection to prevent frame backlog * Ensure webcam stops completely when stop button is clicked + layout changes * ts fixes * Fix aspect ratio of video container to 4:3 * Fix navigation and add <img> to SourcePicker component - TODO - wire up API call and detection handling * Refactor inference API call and UI * Fix UI bugs * Add API authentication to YOLOv4 backend * Address PR comments * Add FPS measurement and display * Remove prefix / character in navigation toast --------- Co-authored-by: Anirudh Ramchandran <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.