Describe the feature
Description
The AI tagging of the images in PictoPy are sometimes wrong. There should be a feature to remove the wrong AI tagging so that user have an option to remove that tag.
Current Feature
- Image show AI tags but they don't have option to remove it.
Expected Feature
- Tags should have option to remove it. This option should be visible when we hover on it.
Implementation
Backend :
- Created a delete route with parameters for
tag name and image id.
- Get
class_id from mapping (Database) with the help of tag name.
- With the help of
image_id and class_id we can remove the tagging from image_classes.
Frontend :
- Added the delete endpoint to
apiEndpoints.ts and created an asynchronous function using Axios to handle the DELETE request to the backend.
- Implemented a reducer in
imageSlice.ts that filters out the deleted tag from the Redux store, ensuring the UI reflects the change immediately without a page refresh.
- Linked the tag removal logic to the
ImageTags (home gallery) and MediaInfoPanel (image details) components, passing necessary imageId props to trigger deletions.
- Added an "X" button to each tag that stops click propagation to prevent opening the image and includes a loading state to disable multiple clicks during the deletion process.
Add ScreenShots
Screenshots
- Wrong AI tagging. ( no frisbee in image ) and there is not any option to remove the tagging.
- Added an option to remove the tags.
- Tag removed on clicking the "X" icon.
- Tags with option to remove is also visible in Media Info.
Record
Describe the feature
Description
The AI tagging of the images in PictoPy are sometimes wrong. There should be a feature to remove the wrong AI tagging so that user have an option to remove that tag.
Current Feature
Expected Feature
Implementation
Backend:tag nameandimage id.class_idfrom mapping (Database) with the help oftag name.image_idandclass_idwe can remove the tagging from image_classes.Frontend:apiEndpoints.tsand created an asynchronous function usingAxiosto handle theDELETErequest to the backend.imageSlice.tsthat filters out the deleted tag from theReduxstore, ensuring the UI reflects the change immediately without a page refresh.ImageTags(home gallery) andMediaInfoPanel(image details) components, passing necessary imageId props to trigger deletions.Add ScreenShots
Screenshots
Record