In the project directory, you can run:

• npm run dev

  Starts the development server. Open localhost:5173 to view it in your browser. The app will automatically reload if you make changes to the code. You will see build errors and lint warnings in the console.

• npm run dev:host

  Starts the development server and makes it accessible over your local network.

• npm run build

  Compiles TypeScript and builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance. Your app is ready to be deployed!

• npm run lint

  Runs ESLint to find problems in your code.

• npm run lint:fix

  Runs ESLint to find and fix problems in your code automatically.

• npm run preview

  Locally previews the production build.

• npm run test

  Launches the test runner.

• npm run test:watch

  Launches the test runner in interactive watch mode.

• npm run test:coverage

  Runs tests and generates a coverage report.

• For local testing, build the Docker image with default values: docker build -t fertiscan-frontend .

• Production build:

docker build \
  --build-arg ARG_API_URL=https://your_api_url \
  --build-arg ARG_REACT_APP_ACTIVATE_USING_JSON=false \
  --build-arg ARG_REACT_APP_STATE_OBJECT_SIZE_LIMIT=4194304 \
  -t fertiscan-frontend .

• Run the image (on port 3001 for example): docker run -p 3001:3000 fertiscan-frontend

Welcome to our step-by-step guide designed to help new users like yourself effortlessly add new labels and become familiar with our platform's functionality. Let's get started.

Navigate to

Upon loading the page, you should see the following:

You have two options to proceed:

• Use the camera feature
• Upload a file

To toggle between the camera and file upload options, follow these steps:

1. Grant camera access to your browser:

   • 

2. Click the "Switch" button to activate the camera:

   • 

3. Once in the camera view, you can switch between front and rear cameras using the camera switch button:

4. When ready, capture your picture by clicking on "Capture."

1. Click on the large upload area:
   • 
2. Select the desired file from your computer and confirm by clicking "Open."

Once uploaded, your file will appear in the list where you can:

• Delete the file by right-clicking it and selecting "Delete" or by clicking the "X" button when you hover over it:

  • 
  • 

• Rename the file by right-clicking and choosing "Rename." Confirm the new name by clicking "Confirm":

  • 
  • 

After uploading all necessary files, click "Submit" at the bottom of the page:

A new page will display, requiring you to verify each information field:

1. Confirm every field by clicking the checkmark next to it. A green indicator on the progress bar signifies approval:

   • 

2. Click on the progress bar sections to jump to specific fields as needed.

3. Zoom in on images for a clearer view.

4. Ensure that all information in each field is accurate.

5. Any field left unapproved will result in a notification:

   • 

After approving all fields, click on the "Submit" button to proceed:

1. Review the confirmation page thoroughly:
   • 
2. If an error is spotted, select "Cancel" to go back.
   • 

Once all information is verified, check the confirmation box at the bottom of the page. The final step is to click "Confirm" to send the new label information to our database.

Congratulations! You have successfully learned how to upload and manage new labels on our platform. If you require further assistance or have any questions , don't hesitate to reach out for support.

This guide will take you through the simple process of viewing all the labels you've previously saved. Follow these easy steps to get started.

1. Locate and click on the second icon in the side menu:

   • 

1. Upon clicking the icon, you'll be directed to the page displaying all the saved labels:

   • 

2. Scroll down to review all available labels. Pagination options may be available if you have multiple pages of saved labels.

3. To see detailed information for a specific label, simply click on the label entry you are interested in.

   • 

1. Locathe and click on the third icon in the side menu

   • 

1. Upon clicking the icon, you'll be directed to the page displaying the setting.
2. Click on the button to switch the language between French and English.