[WIP] Issue #6: Frontend Implementation#31
[WIP] Issue #6: Frontend Implementation#31justFadel19 wants to merge 1 commit intoAhmedFatthy1040:mainfrom
Conversation
There was a problem hiding this comment.
Pull Request Overview
This work‐in‐progress PR introduces the initial frontend implementation for the Satellite Image Annotation Tool. Key changes include implementing new UI components (e.g. ImageViewer, ImageGallery, ImageUpload, ProjectEditor, HomePage), enhancing annotation and segmentation interfaces, and adding features like AI-assisted segmentation and a responsive header with scroll‐based visibility.
Reviewed Changes
Copilot reviewed 22 out of 26 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| web/src/models/Project.ts | Added model interfaces for project, image metadata and attributes |
| web/src/components/* | New components for toolbars, viewer, gallery, upload, editor, and home page with updated UI flows |
| web/src/App.tsx | Updated main app structure with responsive header and conditional routing between homepage, gallery and image viewer |
| web/index.html | Updated title and basic HTML to reflect the new tool branding |
Files not reviewed (4)
- web/package-lock.json: Language not supported
- web/package.json: Language not supported
- web/src/App.css: Language not supported
- web/src/index.css: Language not supported
| ref={fileInputRef} | ||
| onChange={handleFileChange} | ||
| className="hidden" | ||
| accept="image/*" |
There was a problem hiding this comment.
Consider updating the input element's accept attribute to match the supported file types (e.g. "image/jpeg,image/png,image/tiff,image/webp") so that users are prevented from selecting unsupported file formats.
| accept="image/*" | |
| accept="image/jpeg,image/png,image/tiff,image/webp" |
| // Initial check | ||
| handleScroll(); | ||
|
|
||
| window.addEventListener('scroll', handleScroll); |
There was a problem hiding this comment.
Consider extracting the scroll listener logic into a custom hook and/or debouncing the scroll events to improve performance and code organization.
| <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> | ||
| <div className="bg-white rounded-lg shadow-md max-w-md w-full p-6" onClick={e => e.stopPropagation()}> | ||
| <h3 className="text-lg font-medium text-gray-900 mb-4">Delete Image?</h3> | ||
| <p className="text-gray-600 mb-6"> |
There was a problem hiding this comment.
For the delete confirmation modal, consider adding appropriate ARIA roles and labels (e.g. role="dialog" and aria-modal="true") to improve accessibility.
| <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> | |
| <div className="bg-white rounded-lg shadow-md max-w-md w-full p-6" onClick={e => e.stopPropagation()}> | |
| <h3 className="text-lg font-medium text-gray-900 mb-4">Delete Image?</h3> | |
| <p className="text-gray-600 mb-6"> | |
| <div | |
| className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" | |
| role="dialog" | |
| aria-modal="true" | |
| aria-labelledby="delete-modal-title" | |
| aria-describedby="delete-modal-description" | |
| > | |
| <div className="bg-white rounded-lg shadow-md max-w-md w-full p-6" onClick={e => e.stopPropagation()}> | |
| <h3 id="delete-modal-title" className="text-lg font-medium text-gray-900 mb-4">Delete Image?</h3> | |
| <p id="delete-modal-description" className="text-gray-600 mb-6"> |
[WIP] Issue #6: Frontend Implementation
This PR adds the initial implementation of the frontend for the Satellite Image Annotation Tool. It includes the image viewer, annotation tools, and supporting components.
Changes:
This is a work in progress. Some features are incomplete and may have bugs.
Closes #6