Feat gallery optimization

[wknums]

Purpose

This branch adds usability enhancements to the ui

1. it introduced a "select mode" toggle button (tickbox icon) to the image and video gallery view at the top right, to the left of the "auto-refresh" control and when active, it allows you to select multiple images or videos to move or delete them. This extends the frontend and adds a batch api to the backend to improve the performance of moving and deleting multiple images/videos.
2. the branch adds a control to increase or decrease the number of columns of images in a gallery view. it defaults to the automatically calculated number of columns, but allows the user to click + or - to increase or decrease the number of columns that the image grid renders in the ui. - this control currently only applies to images.

Does this introduce a breaking change?

[ ] Yes
[X ] No

Pull Request Type

What kind of change does this Pull Request introduce?

[ ] Bugfix
[X ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

How to Test

• Get the code

git clone https://github.com/Azure-Samples/visionary-lab.git
cd visionary-lab
git checkout feat-gallery-optimization
follow the instructions in the README.md to configure your .env and start the backend and frontend

• Test the code

There is currently no automated testing for this - so this needs to be done manually.

open the application in the browser.

**Test 1:** if you already have images or videos stored in your assigned Azure Storage account, you should be able to see the generated images in the default gallery view. - note that at the top right above the image tiles, you should see a tickbox icon , a - (minus), a integer number between 1 and 6) followed by a + (plus).  to the right of these controls you should see the previously available clock icon (for auto refresh) and the refresh icons.   If you see these controls, the first test is successful.

**Test 2:** Check that the batch api is active 
open the browser to see the FastAPI OpenAPI published:   http://127.0.0.1:8000/docs
scroll down - there should be 6 sections:

1.  images
2.  video
3.  gallery
4.  env
5.  batch
6.  default

if there is a batch api section(5) this test is successful


**Test 3:** multi-select mode: if you don't have any generated images in your gallery, generate a few images to have some images available in the gallery - no change to image generation functionality in this branch.
Once you have some images in your "All Images" gallery view,  click on the tickbox icon to switch to "select mode" - you should see small selection boxes appearing in every image displayed and you can select the images you want to move or delete.
when you have selected a few images, you can then perform the "move to" folder operation or the delete operation - these are shown in near the "image generation control" lower on your screen.  perform a move to an existing or a new folder to test that this works. - check the console log of the backend terminal session to see that the batch api was used and worked without error. - Note: if there are issues with the batch api, the code falls back to using a series of individual api calls.

**Test4:** UI column control: in the UI, navigate to the image gallery view for all images or a specific album containing images.
 in the top right corner, click on the  - (minus),  icon to reduce the number of columns in the images display grid by 1. the screen should refresh and show one less column withe the effect of the images shown being larger.
, now click 3times on the + icon to add 3 more columns to the display and watch the images resizing to smaller ones and having more columns in the display. This is very useful to have a better overview when working with larger number of images as it is faster to render the smaller images.

What to Check

Verify that the standard functionality is still there.

• ...

Other Information