HSAD · 2024.04 – 2024.07
HSAD AI Platform: Vue 3 Image Generation & Asset Storage
Stable Diffusion image generation and project storage. Image loading went from 3.2s to 1s.
Overview
I built the frontend of a generative AI platform where an ad agency creates images with AI and manages the results and files of each project as storage.
Background
Problem
The ad agency needed one platform to create ad images with AI and to manage the generated results and files per project.
What I did
- Per-project file storage: upload and download, folder-targeted uploads, editing file details, multi-select delete / copy / move for files and folders, and a folder-based viewer.
- Option-based and similar-image generation with the Stable Diffusion + Fooocus REST API, saving results to storage folders.
- A gallery viewer for generated results.
- Thumbnail caching so storage folders load quickly.
- Proposed moving from a single-project structure to multi-tenant, and built it.
Results
- Image loading 3.2s → 1s
Thumbnail caching in the storage folders cut image loading by about 70%.
- Moved to multi-tenant
I proposed switching from a single-project structure to multi-tenant and built it.
Key features
- 01
AI image generation
Generates option-based and similar images with the Stable Diffusion + Fooocus API and saves them to storage folders.
- 02
Project storage
Upload, download, folder-targeted uploads, multi-select delete / copy / move, and a folder-based viewer.
Screens
