Added functionality to delete images in Pictopy and updated UI

[Jibesh10101011]

Pull Request: Add Image Deletion Functionality for Folders in Pictopy

1. Issue Description #96

Reference: Feat: Add Image Deletion Functionality for Folders in Pictopy #96

• Summary: Implemented the ability to delete selected images from folders via the frontend interface and backend API.

2. Frontend Changes

a. Component Updates

• File Updated: pictopy/frontend/src/AITagging/FilterControls.tsx

  • Added a Delete Image button.
  • On click, sets the isVisibleSelectedImage state to false.
  • When isVisibleSelectedImage is false, renders the <DeleteSelectedImagePage /> component (imported from src/components/FolderPicker/DeleteSelectedImagePage).

• New Component: <DeleteSelectedImagePage />

  • Enables users to select images to delete.
  • Provides a Delete Selected Image button.
  • Clicking the button triggers the handleAddSelectedImages function.

b. API Integration

• New Hook: frontend/src/hooks/DeleteImages.ts
  • Handles API requests to delete selected images.
  • Sends a DELETE request to the backend API /images/multiple-images with the paths of images to delete.
  • Request Format:

    const response = await fetch(`${BACKEND_URL}/images/multiple-images`, 
        {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ paths }),
        }
    );

c. State Management

• After successful deletion:
  • Clears the selectedImages state.
  • Sets isVisibleSelectedImage back to true if isLoading is not active.

3. Backend Changes

a. Endpoint Addition

• New API Route: /images/multiple-images in backend/routes/images.py

   @router.delete("/multiple-images")
   def delete_multiple_images(payload:dict) : 
       try :
           paths = payload["paths"]
           if not isinstance(paths, list):
               raise HTTPException(
                   status_code=status.HTTP_400_BAD_REQUEST,
                   detail="'paths' should be a list",
               )

           for path in paths:
               try:   
                   if not os.path.isfile(path):
                       raise HTTPException(
                           status_code=status.HTTP_404_NOT_FOUND,
                           detail="Image file not found"
                       )

                   os.remove(path)
                   delete_image_db(path)
               except:
                   raise HTTPException(
                       status_code=status.HTTP_400_BAD_REQUEST,
                       detail=f"{path} not in Database",
                   )
           
           return {"message": f"Images deleted successfully"}
       
       except Exception as e : 
           raise HTTPException(
               status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, 
               detail=str(e)
           )
   

• DELETE Endpoint: Accepts a payload with an array of paths for images to delete.
• Validation:
  • Ensures paths is a list.
  • Verifies each path corresponds to an existing file.
  • Deletes images using os.remove(path) and updates the database with delete_image_db(path).

b. Error Handling

• Returns appropriate HTTP status codes for errors:
  • 400: Invalid paths or missing files.
  • 404: File not found on the server.
  • 500: Internal server errors.

c. Successful Response

• Returns a message:

  { "message": "Images deleted successfully" }
  
  

2. UI Updation

• BackgroundColor Updated: In layout/main.tsx updated bg-white to bg-gray-900
• Props Updated: In frontend/src/components/Navigation/Sidebar/Sidebar.tsx updated all fillColor props to fill because SVG elements use fill instead of fillColor otherwise in frontend console this error will come

• Logo not coming problem fixed : In frontend/src/components/Navigation/Navbar/Navbar.tsx converted :

   <img src="/Pictopy.svg" alt="" />

  to :

  <img src="/tauri.svg" height={"20px"} width={"20px"} alt="" />

• Removed Images: Rmoved all unnecessary images from images folder

4. Final Output :

FINAL-OUTPUT.mp4