mirror of
https://git.datalinker.icu/comfyanonymous/ComfyUI
synced 2026-09-04 10:27:10 +08:00
9dc31cd71e
This commit introduces a new gallery feature that allows you to mark images
in your user data folder and view them in a dedicated gallery page.
Key changes:
Backend (`app/user_manager.py`):
- Added a `GALLERY_SUFFIX` constant (`.gallery`).
- Implemented `toggle_gallery_status` to add/remove the gallery suffix from
filenames (e.g., `image.png` <-> `image.gallery.png`).
- Added a POST route `/userdata/{file}/gallery` to toggle an image's gallery
status.
- Implemented `list_gallery_files` to retrieve all images marked for the
gallery.
- Added a GET route `/gallery` to list gallery items for you.
Frontend:
- Created `web/gallery.html` as the main page for the gallery view.
- Created `web/css/gallery.css` for basic styling of the gallery.
- Created `web/scripts/gallery.js` to fetch and display gallery items,
allowing you to remove items from the gallery.
- Created `web/scripts/gallery_integration.js` to dynamically add a "Gallery"
button/link to the main application UI, which navigates to `gallery.html`.
- Updated `web/index.html` to include the gallery integration script.
Tests (`tests-unit/app_test/user_manager_gallery_routes_test.py`):
- Added comprehensive unit tests for the new backend routes, covering:
- Listing gallery items (empty, single, multiple, subdirectories).
- Toggling gallery status (add, remove, file not found, invalid params).
- Correct filename transformations and path handling.
38 lines
825 B
CSS
Vendored
38 lines
825 B
CSS
Vendored
#gallery-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px; /* spacing between items */
|
|
padding: 10px;
|
|
}
|
|
|
|
.gallery-item {
|
|
margin: 10px;
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: calc(200px + 10px); /* width of thumbnail + padding */
|
|
}
|
|
|
|
.gallery-thumbnail {
|
|
width: 200px;
|
|
height: 200px;
|
|
object-fit: cover; /* scales the image to cover the container while maintaining aspect ratio */
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.gallery-item button {
|
|
padding: 8px 12px;
|
|
background-color: #f44336; /* Red */
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.gallery-item button:hover {
|
|
background-color: #d32f2f; /* Darker red */
|
|
}
|