diff --git a/README.md b/README.md index eb34459a..88557978 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,16 @@ Handles file system operations and provides a secure bridge between the frontend #### Installation + +1. Clone the repository to your local system: + ```bash + git clone git@github.com:AOSSIE-Org/PictoPy.git + ``` + ```bash + cd PictoPy + ``` + + 1. Navigate to the frontend directory: ```bash cd frontend @@ -232,6 +242,9 @@ The server will start on `http://localhost:8000` by default. In test mode, the s You can control the number of workers by setting the `WORKERS` environment variable before running the script. If not set, it defaults to 1 worker. +### Docker Compose Setup +- [Docker Compose](./docs/docker-compose/redme.md) + ### Setup using Dockerfile - For setting up the frontend, follow the instructions in the [Frontend Setup Guide](./docs/frontend/docker-setup.md). diff --git a/backend/Dockerfile b/backend/Dockerfile index 85cf200a..447af12e 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile @@ -26,8 +26,8 @@ RUN pip install --no-cache-dir -r requirements.txt COPY . /app/ -RUN chmod +x run.sh && mkdir -p ../images - +RUN chmod +x run.sh +RUN ls app EXPOSE 8000 ENV WORKERS=1 diff --git a/backend/app/config/settings.py b/backend/app/config/settings.py index bb6cafb3..e377e9fa 100644 --- a/backend/app/config/settings.py +++ b/backend/app/config/settings.py @@ -6,7 +6,7 @@ TEST_INPUT_PATH = "tests/inputs" TEST_OUTPUT_PATH = "tests/outputs" -IMAGES_PATH = "../images" +IMAGES_PATH = "./images" IMAGES_DATABASE_PATH = "app/database/images.db" ALBUM_DATABASE_PATH = "app/database/albums.db" diff --git a/backend/images/PictoPy_Logo.png b/backend/images/PictoPy_Logo.png new file mode 100644 index 00000000..ab0ac1fa Binary files /dev/null and b/backend/images/PictoPy_Logo.png differ diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 00000000..91d35384 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,35 @@ +name: pictopy + +services: + frontend: + build: + context: ./frontend + dockerfile: Dockerfile + container_name: frontend-container + network_mode: host + ports: + - "1420:1420" + environment: + - DISPLAY=${DISPLAY} + volumes: + - /tmp/.X11-unix:/tmp/.X11-unix + - images-data:/app/images + - /:/host + stdin_open: true + tty: true + + backend: + build: + context: ./backend + dockerfile: Dockerfile + container_name: backend-container + ports: + - "8000:8000" + volumes: + - images-data:/app/images + - /:/host + +volumes: + frontend-data: + images-data: + diff --git a/docs/backend/docker-setup.md b/docs/backend/docker-setup.md index 937424ff..412f3334 100644 --- a/docs/backend/docker-setup.md +++ b/docs/backend/docker-setup.md @@ -1,104 +1,107 @@ -# Backend Docker Setup for PictoPy - -This guide provides step-by-step instructions for building and running the PictoPy backend using Docker. - -## Table of Contents - -1. [Prerequisites](#prerequisites) -2. [Building the Docker Image](#building-the-docker-image) -3. [Running the Docker Container](#running-the-docker-container) -4. [Verifying the Container](#verifying-the-container) -5. [Accessing the Application](#accessing-the-application) -6. [Stopping the Container](#stopping-the-container) -7. [Troubleshooting](#troubleshooting) - -## Prerequisites - -Before you begin, ensure you have the Docker installed on your machine - -- Verify the installation by running: - ```bash - docker --version - ``` - -## Building the Docker Image - -1. Open a terminal and navigate to your project's root directory. - -2. Go to Backend directory - - ```bash - cd backend - ``` - -3. Run the following command to build the Docker image, replacing `` with your desired image name: - - ```bash - docker build -t . - ``` - -4. Wait for the build process to complete. This may take a few minutes depending on your internet speed and system performance. - -## Running the Docker Container - -Once the image is built, you can run a container using the following command: - -```bash -docker run -d -p 8000:8000 --name -``` - -- `-d`: Runs the container in detached mode (in the background). -- `-p 8000:8000`: Maps port 8000 on the host to port 8000 in the container. -- `--name `: Names the container for easier management. -- ``: Specifies the image to use (the one we just built). - -## Verifying the Container - -To check if the container is running: - -```bash -docker ps -``` - -You should see an entry for `` with the status `Up`. - -## Accessing the Application - -Open a web browser or frontend to access the application at: - -``` -http://localhost:8000 -``` - -## Stopping the Container - -If you need to stop the container: - -```bash -docker kill -``` - -## Troubleshooting - -1. **Port already in use**: If you get an error saying the port is already in use, you can either: - - - Stop the process using port 8000, or - - Change the port mapping in the `docker run` command (e.g., `-p 8001:8000`) - -2. **Container exits immediately**: Check the container logs: - - ```bash - docker logs - ``` - -3. **Permission issues**: Ensure that `run.sh` has execute permissions(for linux only): - - ```bash - chmod +x run.sh - ``` - - Then rebuild the Docker image. - -Remember to rebuild your Docker image (`docker build -t .`) after making any changes to your application or Dockerfile. - -For more advanced Docker usage , view the [Docker documentation](https://docs.docker.com/get-started/). +# Backend Docker Setup for PictoPy + +This guide provides step-by-step instructions for building and running the PictoPy backend using Docker. + +## Table of Contents + +1. [Prerequisites](#prerequisites) +2. [Building the Docker Image](#building-the-docker-image) +3. [Running the Docker Container](#running-the-docker-container) +4. [Verifying the Container](#verifying-the-container) +5. [Accessing the Application](#accessing-the-application) +6. [Stopping the Container](#stopping-the-container) +7. [Troubleshooting](#troubleshooting) + +## Prerequisites + +Before you begin, ensure you have the Docker installed on your machine + +- Verify the installation by running: + ```bash + docker --version + ``` + +## Building the Docker Image + +1. Open a terminal and navigate to your project's root directory. + +2. Go to Backend directory + + ```bash + cd backend + ``` + +3. Run the following command to build the Docker image, replacing `` with your desired image name: + + ```bash + docker build -t . + ``` + +4. Wait for the build process to complete. This may take a few minutes depending on your internet speed and system performance. + +## Running the Docker Container + +Once the image is built, you can run a container using the following command: + +```bash +docker run -it --name backend-container -p 8000:8000 \ +-v images-data:/app/images \ +-v /:/host \ + +``` + +- `-it`: Runs the container interactively, attaching to the terminal for input/output. +- `-p 8000:8000`: Maps port 8000 on the host to port 8000 in the container. +- `-v`: Mounts a volume to share data between the host and container. +- ``: Specifies the image to use (the one we just built). + +## Verifying the Container + +To check if the container is running: + +```bash +docker ps +``` + +You should see an entry for `` with the status `Up`. + +## Accessing the Application + +Open a web browser or frontend to access the application at: + +``` +http://localhost:8000 +``` + +## Stopping the Container + +If you need to stop the container: + +```bash +docker kill +``` + +## Troubleshooting + +1. **Port already in use**: If you get an error saying the port is already in use, you can either: + + - Stop the process using port 8000, or + - Change the port mapping in the `docker run` command (e.g., `-p 8001:8000`) + +2. **Container exits immediately**: Check the container logs: + + ```bash + docker logs + ``` + +3. **Permission issues**: Ensure that `run.sh` has execute permissions(for linux only): + + ```bash + chmod +x run.sh + ``` + + Then rebuild the Docker image. + +Remember to rebuild your Docker image (`docker build -t .`) after making any changes to your application or Dockerfile. + +For more advanced Docker usage , view the [Docker documentation](https://docs.docker.com/get-started/). \ No newline at end of file diff --git a/docs/docker-compose/redme.md b/docs/docker-compose/redme.md new file mode 100644 index 00000000..0a181ff1 --- /dev/null +++ b/docs/docker-compose/redme.md @@ -0,0 +1,121 @@ + +# Docker Compose Setup + +This repository includes a Docker Compose configuration to streamline the deployment of services for your application. By using Docker Compose, you can set up and run the entire stack with just a few commands. + +## Prerequisites + +Before you proceed, ensure the following tools are installed in your system: + +- [Docker](https://www.docker.com/) +- [Docker Compose](https://docs.docker.com/compose/) + +You can verify the installations by running: + +```bash +docker --version +docker-compose --version +``` + +- For Linux : An X server also installed (If not installed) + ```bash + sudo apt install x + ``` + Allow X11 forwarding: + ```bash + xhost +local:docker + ``` + +- For Windows: An X Server (e.g., VcXsrv or Xming) + - Start an X Server: + 1. Launch VcXsrv or Xming. + 2. Configure it to allow connections from any host. + + - Find your host machine's IP address: + 1. Open Command Prompt and run `ipconfig`. + 2. Look for the IPv4 Address under your active network adapter. + + - Run the container: + ```bash + docker run -it -p 1420:1420 -e DISPLAY=:0.0 + ``` + Replace `` with your actual IP address. + + + + + +## Services + +The Docker Compose file in this repository orchestrates the following services: + +1. **Backend** : The application backend service. +4. **Frontend** : The application frontend service. + +## Getting Started + +### Step 1: Clone the Repository + +Clone the repository to your local system: + +```bash +git clone git@github.com:AOSSIE-Org/PictoPy.git +``` + +```bash +cd PictoPy +``` + +### Step 2: For resolving Line Ending problems in 'run.sh' + +```bash +cd backend +dos2unix run.sh +``` + +### Step 3 : Move to Actual Location (PictoPy) +```bash +cd .. +``` + +### Step 3: Build and Start Services + +Run the following command to build and start all services: + +```bash +docker compose up --build +``` + +### Step 4: Access Services + +- **Backend**: Accessible at `http://localhost:8000` +- **Frontend**: Accessible at `http://localhost:1420` + +### Step 5: Stopping Services + +To stop all running containers: + +```bash +docker compose down +``` + +To stop services without removing the data: + +```bash +docker compose stop +``` + + +## How to 'Add Folder' Instructions + +Since Docker containers are isolated from each other, we cannot directly access the folders of other containers. This is where the concept of volume mounting comes into play.where if you run your application via docker then for adding folders of your host machine + + 1. Click the Path **Other Locations** + 2. Then click **Computer** + 3. After that click **host** + + (Genrally in Linux , **C** and **D** Drive are located in **mnt** folder) + +Now in this **host** location all of your host machine's files are available now you can add any folder from this path . + +At all if you face any problem Click the [Video Demo](https://s3.eu-north-1.amazonaws.com/jibeshroy.static.dev/Pictopy/FINAL_OUTPUT.mp4) diff --git a/docs/frontend/docker-setup.md b/docs/frontend/docker-setup.md index 545314de..497ecb1d 100644 --- a/docs/frontend/docker-setup.md +++ b/docs/frontend/docker-setup.md @@ -1,116 +1,115 @@ -# Docker Setup for PictoPy Frontend - -This guide provides instructions for building and running the PictoPy frontend using Docker. - -## Table of Contents - -1. [Prerequisites](#prerequisites) -2. [Building the Docker Image](#building-the-docker-image) -3. [Running the Container](#running-the-container) - - [Linux](#linux) - - [Windows](#windows) -4. [Accessing the GUI App](#accessing-the-gui-app) -5. [Common Troubleshooting](#common-troubleshooting) -6. [Notes on Cross-Platform Compatibility](#notes-on-cross-platform-compatibility) - -## Prerequisites - -- Docker installed on your system -- For Windows: An X Server (e.g., VcXsrv or Xming) -- For Linux : An X server also installed - ```bash - sudo apt install x - ``` - -## Building the Docker Image - -1. Open a terminal and navigate to your project's root directory. - -2. Go to Frontend directory - - ```bash - cd frontend - ``` - -3. Run the following command to build the Docker image, replacing `` with your desired image name: - - ```bash - docker build --build-arg TAURI_SIGNING_PRIVATE_KEY= --build-arg TAURI_SIGNING_PRIVATE_KEY_PASSWORD= -t . - ``` - - Replace and with your actual Tauri signing private key and password and with the image name. If you are using the default key, you can use the following command: - - ```bash - docker build --build-arg TAURI_SIGNING_PRIVATE_KEY=dW50cnVzdGVkIGNvbW1lbnQ6IHJzaWduIGVuY3J5cHRlZCBzZWNyZXQga2V5ClJXUlRZMEl5NlF2SjE3cWNXOVlQQ0JBTlNITEpOUVoyQ3ZuNTdOSkwyNE1NN2RmVWQ1a0FBQkFBQUFBQUFBQUFBQUlBQUFBQU9XOGpTSFNRd0Q4SjNSbm5Oc1E0OThIUGx6SS9lWXI3ZjJxN3BESEh1QTRiQXlkR2E5aG1oK1g0Tk5kcmFzc0IvZFZScEpubnptRkxlbDlUR2R1d1Y5OGRSYUVmUGoxNTFBcHpQZ1dSS2lHWklZVHNkV1Byd1VQSnZCdTZFWlVGOUFNVENBRlgweUU9Cg== --build-arg TAURI_SIGNING_PRIVATE_KEY_PASSWORD=pass -t . - ``` - -## Running the Container - -### Linux - -1. Allow X11 forwarding: - - ```bash - xhost +local:docker - ``` - -2. Run the container: - - ```bash - docker run -it -p 1420:1420 -e DISPLAY=$DISPLAY -v /tmp/.X11-unix:/tmp/.X11-unix - ``` - -3. Run the tauri application - ```bash - npm run tauri dev - ``` - -### Windows - -1. Start an X Server: - - - Launch VcXsrv or Xming. - - Configure it to allow connections from any host. - -2. Find your host machine's IP address: - - - Open Command Prompt and run `ipconfig`. - - Look for the IPv4 Address under your active network adapter. - -3. Run the container: - - ```bash - docker run -it -p 1420:1420 -e DISPLAY=:0.0 - ``` - -Replace `` with your actual IP address. - -4. Run the tauri application - ```bash - npm run tauri dev - ``` - -## Accessing the GUI App - -If everything is configured correctly, the Tauri GUI app should display on your screen after running the container. - -## Common Troubleshooting - -### 1. GUI Not Displaying (X Server Issues) - -- **Windows**: - - - Ensure the X server (VcXsrv or Xming) is running. - - Check that it's configured to allow connections from any host. - -- **Linux**: - - Verify X11 forwarding is allowed: `xhost +local:docker` - -### 2. Network Issues - -If the container can't connect to the X server: - -1. Check your firewall settings and ensure it's not blocking the connection. -2. On Windows, try using the host's IP address instead of localhost. - -By following this guide and keeping these notes in mind, you should be able to successfully set up and run the PictoPy frontend using Docker across different platforms. If you encounter any persistent issues, please refer to the project's issue tracker or seek assistance from the development team. +# Docker Setup for PictoPy Frontend + +This guide provides instructions for building and running the PictoPy frontend using Docker. + +## Table of Contents + +1. [Prerequisites](#prerequisites) +2. [Building the Docker Image](#building-the-docker-image) +3. [Running the Container](#running-the-container) + - [Linux](#linux) + - [Windows](#windows) +4. [Accessing the GUI App](#accessing-the-gui-app) +5. [Common Troubleshooting](#common-troubleshooting) +6. [Notes on Cross-Platform Compatibility](#notes-on-cross-platform-compatibility) + +## Prerequisites + +- Docker installed on your system +- For Windows: An X Server (e.g., VcXsrv or Xming) +- For Linux : An X server also installed + ```bash + sudo apt install x + ``` + +## Building the Docker Image + +1. Open a terminal and navigate to your project's root directory. + +2. Go to Frontend directory + + ```bash + cd frontend + ``` + +3. Run the following command to build the Docker image, replacing `` with your desired image name: + + ```bash + docker build --build-arg TAURI_SIGNING_PRIVATE_KEY= --build-arg TAURI_SIGNING_PRIVATE_KEY_PASSWORD= -t . + ``` + + Replace and with your actual Tauri signing private key and password and with the image name. If you are using the default key, you can use the following command: + + ```bash + docker build --build-arg TAURI_SIGNING_PRIVATE_KEY=dW50cnVzdGVkIGNvbW1lbnQ6IHJzaWduIGVuY3J5cHRlZCBzZWNyZXQga2V5ClJXUlRZMEl5NlF2SjE3cWNXOVlQQ0JBTlNITEpOUVoyQ3ZuNTdOSkwyNE1NN2RmVWQ1a0FBQkFBQUFBQUFBQUFBQUlBQUFBQU9XOGpTSFNRd0Q4SjNSbm5Oc1E0OThIUGx6SS9lWXI3ZjJxN3BESEh1QTRiQXlkR2E5aG1oK1g0Tk5kcmFzc0IvZFZScEpubnptRkxlbDlUR2R1d1Y5OGRSYUVmUGoxNTFBcHpQZ1dSS2lHWklZVHNkV1Byd1VQSnZCdTZFWlVGOUFNVENBRlgweUU9Cg== --build-arg TAURI_SIGNING_PRIVATE_KEY_PASSWORD=pass -t . + ``` + +## Running the Container + +### Linux + +1. Allow X11 forwarding: + + ```bash + xhost +local:docker + ``` + +2. Run the container: + + ```bash + docker run -it --name frontend-container --network host -p 1420:1420 -e DISPLAY=${DISPLAY} \ + -v /tmp/.X11-unix:/tmp/.X11-unix \ + -v images-data:/app/images \ + -v /:/host \ + + ``` + +### Windows + +1. Start an X Server: + + - Launch VcXsrv or Xming. + - Configure it to allow connections from any host. + +2. Find your host machine's IP address: + + - Open Command Prompt and run `ipconfig`. + - Look for the IPv4 Address under your active network adapter. + +3. Run the container: + + ```bash + docker run -it -p 1420:1420 -e DISPLAY=:0.0 + ``` + +Replace `` with your actual IP address. + +4. Run the tauri application + ```bash + npm run tauri dev + ``` + +## Accessing the GUI App + +If everything is configured correctly, the Tauri GUI app should display on your screen after running the container. + +## Common Troubleshooting + +### 1. GUI Not Displaying (X Server Issues) + +- **Windows**: + + - Ensure the X server (VcXsrv or Xming) is running. + - Check that it's configured to allow connections from any host. + +- **Linux**: + - Verify X11 forwarding is allowed: `xhost +local:docker` + +### 2. Network Issues + +If the container can't connect to the X server: + +1. Check your firewall settings and ensure it's not blocking the connection. +2. On Windows, try using the host's IP address instead of localhost. + +By following this guide and keeping these notes in mind, you should be able to successfully set up and run the PictoPy frontend using Docker across different platforms. If you encounter any persistent issues, please refer to the project's issue tracker or seek assistance from the development team. \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile index de2e7a95..4c01ed72 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -22,6 +22,8 @@ RUN apt-get update && \ libwebkit2gtk-4.1-dev \ librsvg2-dev \ file \ + dbus-x11 \ + dconf-cli \ && apt-get clean && rm -rf /var/lib/apt/lists/* # Install Node.js (Node.js 16 is compatible with Tauri) @@ -52,4 +54,4 @@ ENV TAURI_SIGNING_PRIVATE_KEY=$TAURI_SIGNING_PRIVATE_KEY ENV TAURI_SIGNING_PRIVATE_KEY_PASSWORD=$TAURI_SIGNING_PRIVATE_KEY_PASSWORD # Set the container's entrypoint to access the bundled files EXPOSE 1420 -CMD ["tail", "-f" ,"/dev/null"] +CMD ["npm","run","tauri","dev"] diff --git a/frontend/src-tauri/src/services/mod.rs b/frontend/src-tauri/src/services/mod.rs index f0a8953d..df79f4ff 100644 --- a/frontend/src-tauri/src/services/mod.rs +++ b/frontend/src-tauri/src/services/mod.rs @@ -1,6 +1,7 @@ use tauri::State; use std::path::PathBuf; use std::collections::HashMap; +use std::time::SystemTime; mod file_service; mod cache_service; use chrono::{DateTime, Utc, Datelike}; @@ -43,16 +44,18 @@ pub fn get_all_images_with_cache( let mut map: HashMap>> = HashMap::new(); for path in cached { if let Ok(metadata) = std::fs::metadata(&path) { - if let Ok(created) = metadata.created() { - let datetime: DateTime = created.into(); - let year = datetime.year() as u32; - let month = datetime.month(); - map.entry(year) - .or_insert_with(HashMap::new) - .entry(month) - .or_insert_with(Vec::new) - .push(path.to_str().unwrap_or_default().to_string()); - } + let date = metadata.created() + .or_else(|_| metadata.modified()) + .unwrap_or_else(|_| SystemTime::now()); + + let datetime: DateTime = date.into(); + let year = datetime.year() as u32; + let month = datetime.month(); + map.entry(year) + .or_insert_with(HashMap::new) + .entry(month) + .or_insert_with(Vec::new) + .push(path.to_str().unwrap_or_default().to_string()); } } map @@ -62,16 +65,18 @@ pub fn get_all_images_with_cache( for path in all_images { if let Ok(metadata) = std::fs::metadata(&path) { - if let Ok(created) = metadata.created() { - let datetime: DateTime = created.into(); - let year = datetime.year() as u32; - let month = datetime.month(); - map.entry(year) - .or_insert_with(HashMap::new) - .entry(month) - .or_insert_with(Vec::new) - .push(path.to_str().unwrap_or_default().to_string()); - } + let date = metadata.created() + .or_else(|_| metadata.modified()) + .unwrap_or_else(|_| SystemTime::now()); + + let datetime: DateTime = date.into(); + let year = datetime.year() as u32; + let month = datetime.month(); + map.entry(year) + .or_insert_with(HashMap::new) + .entry(month) + .or_insert_with(Vec::new) + .push(path.to_str().unwrap_or_default().to_string()); } } diff --git a/frontend/src/App.css b/frontend/src/App.css index a146e422..8f255c12 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -76,3 +76,11 @@ } } +.scrollbar-hide::-webkit-scrollbar { + display: none; +} +.scrollbar-hide { + -ms-overflow-style: none; + scrollbar-width: none; +} + diff --git a/frontend/src/components/AITagging/AIgallery.tsx b/frontend/src/components/AITagging/AIgallery.tsx index ef697540..34824dd9 100644 --- a/frontend/src/components/AITagging/AIgallery.tsx +++ b/frontend/src/components/AITagging/AIgallery.tsx @@ -5,7 +5,7 @@ import MediaGrid from '../Media/Mediagrid'; import { MediaGalleryProps } from '@/types/Media'; import MediaView from '../Media/MediaView'; import PaginationControls from '../ui/PaginationControls'; -import { queryClient, usePictoQuery } from '@/hooks/useQueryExtensio'; +import { usePictoQuery } from '@/hooks/useQueryExtensio'; import { getAllImageObjects } from '../../../api/api-functions/images'; export default function AIGallery({ diff --git a/frontend/src/components/Album/ImageManagementDialog.tsx b/frontend/src/components/Album/ImageManagementDialog.tsx index 6b984794..435931a7 100644 --- a/frontend/src/components/Album/ImageManagementDialog.tsx +++ b/frontend/src/components/Album/ImageManagementDialog.tsx @@ -1,8 +1,4 @@ -import React, { useState, useEffect } from 'react'; -import { - useViewAlbum, - useRemoveImageFromAlbum, -} from '../../hooks/AlbumService'; +import React, { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Dialog, @@ -14,6 +10,8 @@ import { import { convertFileSrc } from '@tauri-apps/api/core'; import ImageSelectionPage from './ImageSelection'; +import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtensio'; +import { removeFromAlbum, viewYourAlbum } from 'api/api-functions/albums'; interface ImageManagementDialogProps { albumName: string | null; @@ -29,25 +27,24 @@ const ImageManagementDialog: React.FC = ({ onError, }) => { const { - album: viewedAlbum, - viewAlbum, + successData: viewedAlbum, isLoading: isViewingAlbum, - error: viewError, - } = useViewAlbum(); - const { removeImage, isLoading: isRemovingImage } = useRemoveImageFromAlbum(); - const [showImageSelection, setShowImageSelection] = useState(false); + errorMessage: viewError, + } = usePictoQuery({ + queryFn: async () => await viewYourAlbum(albumName || ''), + queryKey: ['view-album', albumName], + }); - useEffect(() => { - if (albumName) { - viewAlbum(albumName).catch((err) => onError('Error loading album', err)); - } - }, [albumName, viewAlbum, onError]); + const { mutate: removeImage, isPending: isRemovingImage } = usePictoMutation({ + mutationFn: removeFromAlbum, + autoInvalidateTags: ['view-album', albumName || ''], + }); + const [showImageSelection, setShowImageSelection] = useState(false); const handleRemoveImage = async (imageUrl: string) => { if (albumName) { try { - await removeImage(albumName, imageUrl); - await viewAlbum(albumName); + await removeImage({ album_name: albumName, path: imageUrl }); onSuccess(); } catch (err) { onError('Error Removing Image', err); @@ -59,8 +56,8 @@ const ImageManagementDialog: React.FC = ({ return path.split('\\').pop() || path; }; - if (viewError) { - return
Error loading album: {viewError.message}
; + if (viewError && viewError !== 'Something went wrong') { + return
Error loading album: {viewError}
; } if (isViewingAlbum) { @@ -74,7 +71,6 @@ const ImageManagementDialog: React.FC = ({ onClose={() => setShowImageSelection(false)} onSuccess={() => { setShowImageSelection(false); - viewAlbum(albumName || ''); onSuccess(); }} onError={onError} @@ -94,28 +90,30 @@ const ImageManagementDialog: React.FC = ({
- {viewedAlbum?.image_paths?.map((image, index) => { - const srcc = convertFileSrc(image); - return ( -
- {`Album - -
- {getImageName(image)} + {viewedAlbum.photos && + viewedAlbum.photos.length > 0 && + viewedAlbum?.photos?.map((image: any, index: number) => { + const srcc = convertFileSrc(image); + return ( +
+ {`Album + +
+ {getImageName(image)} +
-
- ); - })} + ); + })}
diff --git a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx index b58bfaab..29d840cd 100644 --- a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx +++ b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx @@ -34,14 +34,14 @@ function Sidebar() { 'h-5 w-5 transition-transform duration-200 ease-out group-hover:scale-110'; return ( -
+
- Home + Home @@ -49,7 +49,7 @@ function Sidebar() { className={iconClasses} strokeWidth={isActive('/ai-tagging') ? 2.5 : 2} /> - AI Tagging + AI Tagging @@ -57,7 +57,7 @@ function Sidebar() { className={iconClasses} strokeWidth={isActive('/videos') ? 2.5 : 2} /> - Videos + Videos @@ -65,7 +65,7 @@ function Sidebar() { className={iconClasses} strokeWidth={isActive('/albums') ? 2.5 : 2} /> - Albums + Albums
@@ -74,10 +74,10 @@ function Sidebar() { className={`${iconClasses} transform transition-transform group-hover:rotate-90`} strokeWidth={isActive('/settings') ? 2.5 : 2} /> - Settings + Settings
); } -export default Sidebar; +export default Sidebar; \ No newline at end of file diff --git a/frontend/src/layout/main.tsx b/frontend/src/layout/main.tsx index 2fd2de7a..88037d39 100644 --- a/frontend/src/layout/main.tsx +++ b/frontend/src/layout/main.tsx @@ -6,7 +6,12 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
- +
+ +
{children}
diff --git a/images/imag1.jpeg b/images/imag1.jpeg deleted file mode 100644 index 06b9ea7a..00000000 Binary files a/images/imag1.jpeg and /dev/null differ