FullStack_01

FullStack_01 is an innovative web application that I made to empower creative teams with seamless management and interaction capabilities for AI-generated images. This comprehensive full-stack solution merges a user-friendly frontend with a robust backend, offering an intuitive experience for generating, displaying, and administering visual content.

Key Functionalities

User Stories: FullStack_01 is designed around 18 user stories that define its core functionalities, including:

• Default tab activation and container visibility management.
• Toggleable parameter dropdown for flexible settings viewing.
• Seamless tab navigation for efficient content access.
• Form submission with default value handling for complete data submission.
• Display of AI-generated images in a responsive container with interaction options.
• Download, delete, and upload functionalities for image management.
• Robust AI image metadata capture, storage, retrieval, and management.
• Enhanced query table functionality with sorting, filtering, and metadata viewing.
• Automatic image fetching, pagination, and infinite scroll for optimal user experience.

Technical Overview

Technology Stack: Built using modern technologies including HTML5, CSS3, JavaScript, Python, and integrates APIs for seamless data exchange. Database management ensures efficient storage and retrieval of image metadata, supporting scalability and performance.

---

Table of Contents

1. User Story 1: Default Tab Activation and Container Visibility
2. User Story 2: Toggle Parameter Dropdown
3. User Story 3: Tab Navigation
4. User Story 4: Form Submission and Default Values
5. User Story 5: Display Generated Images
6. User Story 6: Image Download
7. User Story 7: Image Deletion
8. User Story 8: Image Upload
9. User Story 9: AI Image Metadata Management
10. User Story 10: Query Table with Enhanced Functionality
11. User Story 11: Fetch Images
12. User Story 12: Infinite Scroll
13. User Story 13: Image Display
14. User Story 14: Image Interaction
15. User Story 15: Image Details
16. User Story 16: Image Download
17. User Story 17: Image Deletion
18. User Story 18: Focus Overlay

• User Story 9: AI Image Metadata Management
  This feature captures and organizes detailed metadata for each AI-generated image, including filename, creation timestamp, model used, and more. The metadata is stored efficiently and can be retrieved and managed through a dedicated system, ensuring that all relevant details are readily available and easily maintained.

• User Story 10: Query Table with Enhanced Functionality
  The interactive query table provides dynamic sorting, filtering, and detailed metadata viewing capabilities. Users can interact with the table to sort data, apply filters, search entries in real-time, and view detailed metadata or enlarged images. This functionality enhances the user experience by making data management more intuitive and responsive.

Explore the project to see how these features, along with the other functionalities, come together to create a powerful tool for creative teams.

(^Slideshow Background^)

User Story 1: Default Tab Activation and Container Visibility

As a user
I want to see the default model tab activated when I first load the page
So that I don't have to manually select a tab and adjust visibility

Acceptance Criteria:

• Upon loading the page, the script automatically clicks the first tab link with the class tablinks.
• The container with the class container is hidden on page load.

---

User Story 2: Toggle Parameter Dropdown

As a user
I want to show or hide the parameter table when I click a button
So that I can view or hide additional settings as needed

Acceptance Criteria:

• When the button with the ID toggleParametersButton is clicked, the visibility of the parameter table with the class tab toggles between visible and hidden.
• The button text changes to "Show Parameters" or "Hide Parameters" based on the visibility state.

---

User Story 3: Tab Navigation

As a user
I want to switch between different model tabs
So that I can view different content associated with each model

Acceptance Criteria:

• Clicking on a tab link with the class tablinks hides all other tab contents and removes the 'active' class from other tab links.
• The content associated with the clicked tab (identified by modelName) is displayed.
• The clicked tab link receives the 'active' class.

---

User Story 4: Form Submission and Default Values

As a user
I want to submit form data and have missing values filled with defaults
So that I can ensure all necessary data is included in the request

Acceptance Criteria:

• When the form is submitted, missing or empty fields are populated with default values (n is 1, quality is standard, style is natural).
• The form data is sent to the server as a JSON object with properties including prompt, n, width, height, quality, style, and user.

---

User Story 5: Display Generated Images

As a user
I want to see the generated images displayed in a container
So that I can view and interact with the results of the image generation

Acceptance Criteria:

• After fetching images from the server, each image is displayed in a container with the ID artContainer.
• Images are resized to fit within a height of 250px while maintaining aspect ratio and a maximum width of 439px.
• Each image has hover icons for downloading, uploading, and deleting.

---

User Story 6: Image Download

As a user
I want to download an image by clicking a download icon
So that I can save the image to my local device

Acceptance Criteria:

• Clicking the download icon triggers a download of the image.
• The image is fetched as a Blob, and a temporary anchor element is created to facilitate the download.
• The filename for the download is derived from the server response.

---

User Story 7: Image Deletion

As a user
I want to delete an image by clicking a delete icon
So that I can remove unwanted images from the view

Acceptance Criteria:

• Clicking the delete icon prompts a confirmation dialog.
• If confirmed, the image is removed from the DOM.
• Additional server-side logic for image deletion can be included if necessary.

---

User Story 8: Image Upload

As a user
I want to upload an image by clicking an upload button
So that I can submit the image to the server for further processing

Acceptance Criteria:

• Clicking the upload button triggers a POST request to the /upload endpoint with image data.
• If the upload is successful, an alert confirms the success.
• If the upload fails, an alert notifies the user of the failure.

---

User Story 9: AI Image Metadata Management

Overview

This system captures, stores, retrieves, and manages metadata for AI-generated images. It ensures that all relevant details about each image are maintained and can be efficiently managed.

Features

Metadata Capture

• Filename: The name of the generated image file.
• Created Datetime: The timestamp when the image was generated.
• Model: The AI model used for image generation (e.g., DALL-E, Stable Diffusion).
• Prompt: The text prompt used to generate the image.
• Width: The width of the generated image.
• Height: The height of the generated image.
• Quality: The quality setting used (if applicable).
• Style: The style setting used (if applicable).
• User: The identifier of the user who requested the image.
• Filepath: The location where the image file is stored.

Metadata Storage

• Metadata is stored in a database table named ImageMetadata.
• The table captures all the above fields and associates them with the generated image file.

Metadata Retrieval

• Metadata for any generated image can be retrieved by querying the /api/metadata endpoint with the image's filename.
• The response includes all the captured metadata fields.

Metadata Management

• The system performs regular cleanups to manage storage efficiently.
• Images and their metadata older than 48 hours are automatically deleted.

Error Handling

• Errors during image generation or metadata capture are handled gracefully.
• Appropriate error messages are provided when issues arise.

Example Workflow

1. Submit a request to generate an image using the /generate-art/dalle endpoint with a prompt and other parameters.
2. The system generates the image and saves it to the generated_images directory.
3. The system creates a metadata entry in the ImageMetadata database table with all the relevant details.
4. Retrieve the metadata for the image using the /api/metadata endpoint by providing the filename.
5. Images older than 48 hours are automatically deleted along with their metadata.

User Story 10: Query Table with Enhanced Functionality

Overview

This feature introduces an interactive query table designed to facilitate the management and viewing of metadata for AI-generated images. The table supports dynamic sorting, filtering, and detailed metadata viewing to enhance user interaction and data management. (^Sample Data^)

Features

Table Interactivity

• Sorting: Clickable table headers enable sorting by columns. Indicators are displayed for ascending and descending order.

• Filtering: Clickable headers provide access to filter options. Filters persist until toggled off and automatically close when clicking outside the filter area.

• Search: Real-time search functionality allows users to quickly locate entries based on text input.

Metadata Viewing

• Prompt Pop-up: Each row includes a "Prompt" button that triggers a pop-up displaying the associated prompt text.
• Image Enlargement: Clicking on an image thumbnail opens a separate pop-up window showing an enlarged view of the image.

User Experience Enhancements

• Automatic Filter Closure: Filters automatically close when clicking elsewhere on the page, ensuring a clutter-free interface.
• Responsive Design: Pop-ups and interactive elements are designed to fit seamlessly within the existing webpage theme.

Example Workflow

1. Sort Data: Click on a table header to sort the data by that column. The sorting direction toggles between ascending and descending.
2. Filter Data: Click on a filterable header to access filter options. Check or uncheck filter values to refine the displayed data.
3. Search Data: Enter a search query in the search input to filter table entries in real-time.
4. View Metadata: Click the "Prompt" button in a row to view the full prompt text in a pop-up. Click on an image thumbnail to enlarge the image in a separate pop-up window.
5. Close Pop-ups: Click outside the filter area or use the close buttons on pop-ups to hide them.

These enhancements provide a more interactive and user-friendly experience for managing and viewing metadata in the query table.

---

User Story 10.5: Fetch and Display Uploaded Images with Metadata

As a user, I want the application to automatically fetch the list of uploaded images and their associated metadata from the backend server when the page loads. This data should be used to populate the table, allowing me to view all images along with their details.

Acceptance Criteria

1. Fetch Images and Metadata:

   • The application makes a request to the backend server to fetch a list of uploaded images.
   • The application makes a request to the backend server to fetch metadata for each image.
   • The fetched metadata includes fields such as filename, prompt, user, timestamp, quality, style, model, and size.

   

2. Handle Fetch Errors:

   • The application handles any errors that occur during the fetch operation and logs them to the console.

3. Render Table with Fetched Data:

   • The application uses the fetched data to render the table.
   • Each row in the table displays the image, filename, prompt button, user, timestamp, quality, style, model, and size.

4. Async Data Handling:

   • The application ensures that fetching data from the backend and rendering the table is handled asynchronously.

Tasks

1. Implement Data Fetching:

   • Create a function fetchData to fetch the list of uploaded images from /api/uploaded_images.
   • For each image filename, fetch the metadata from /api/metadata.

2. Render Fetched Data:

   • Update the renderTable function to use the fetched data.
   • Ensure the table is populated with the images and metadata once the data is fetched.

3. Error Handling:

   • Implement error handling to log any errors that occur during the fetch operations.

---

User Story 11: Fetch Images

As a user of the image gallery
I want to load a set of images for the current page
So that I can view and interact with a batch of images without loading all at once

Acceptance Criteria:

• The function fetchImages(page) must make a fetch request to the endpoint /api/uploaded_images?page=${page}.
• On a successful response, it must resolve with an array of image URLs.
• On failure, it must reject with an error message.

---

User Story 12: Infinite Scroll

As a user scrolling through the image gallery
I want to have new images automatically loaded when I approach the end of the page
So that I can continue browsing without manually requesting more images

Acceptance Criteria:

• The loadImages function must be triggered when the user scrolls within 100px of the bottom of the page.
• When triggered, loadImages must fetch more images and append them to the gallery.
• The isLoading flag must be used to prevent multiple simultaneous fetches.

---

User Story 13: Image Display

As a user viewing the image gallery
I want to see each image displayed with a maximum width and height of 250px and a border radius
So that the images are consistently styled and fit well within the gallery layout

Acceptance Criteria:

• Each image element must have a maximum width and height of 250px.
• Each image must have a border radius of 8px applied.

---

User Story 14: Image Interaction

As a user viewing an image in the gallery
I want to see hover icons that allow me to download, view details, or delete the image
So that I can easily manage and interact with the images according to my needs

Acceptance Criteria:

• Hover icons must include a download button, a view details button, and a delete button.
• Clicking the download button must trigger the downloadImage function.
• Clicking the view details button must trigger the showFocusOverlay function.
• Clicking the delete button must trigger the deleteImage function.

---

User Story 15: Image Details

As a user who wants more information about an image
I want to click a button to view detailed metadata about the image in a focused overlay
So that I can see relevant information like filename, timestamp, model, prompt, dimensions, quality, style, and user

Acceptance Criteria:

• The showFocusOverlay function must display the selected image in a larger view.
• Metadata for the image must be fetched from /api/metadata?filename=${filename} and displayed in a detailed format.
• The focus overlay must be visible and prevent scrolling on the body while open.

---

User Story 16: Image Download

As a user who wants to download an image
I want to click a download button and receive the image file in my downloads folder
So that I can save and use the image locally

Acceptance Criteria:

• The downloadImage function must fetch the image as a Blob and create a Blob URL.
• A temporary anchor element must be created with the Blob URL as the href and the filename set for download.
• The anchor must be programmatically clicked to initiate the download.
• The anchor element must be removed from the DOM and the Blob URL must be revoked after the download.

---

User Story 17: Image Deletion

As a user who wants to remove an image from the gallery
I want to click a delete button and confirm the deletion
So that the image is removed from the gallery and I no longer see it

Acceptance Criteria:

• Clicking the delete button must display a confirmation dialog.
• If confirmed, the image element must be removed from the DOM.
• (Future enhancement) The function should also send a request to the server to delete the image from storage.

---

User Story 18: Focus Overlay

As a user who is viewing an image in detail
I want to see the image in a larger view with an overlay showing its details
So that I can have a focused and detailed view of the image without being distracted by other content

Acceptance Criteria:

• The showFocusOverlay function must display the image in a larger view with an overlay containing image details.
• The overlay must be styled to cover the entire viewport and must include an image and metadata.
• Scrolling on the body must be disabled while the overlay is visible.