AI StyleGallery

Overview

AI StyleGallery is a web application that allows users to transform their images by applying various AI-generated styles. Users can select an image from a gallery, choose a desired style, and have the image processed by an external AI web service. The styled image is then returned to the user, who can decide to keep it (adding it to their gallery) or discard it.

Features

User-Facing Frontend:

• Image Gallery: Browse and select images from a paginated grid.
• Context Menu: Access options for selected images, including printing and changing style.
• Style Selection: Choose from a curated list of AI-generated styles to apply to an image.
• Image Styling: Send images to a configured web service for AI style application.
• Styled Image Review: After processing, view the newly styled image in a prominent overlay with options to "Keep" (save to gallery) or "Delete" (discard).
• Intuitive Navigation: Swipe gestures for seamless navigation between pages on touch-enabled devices (swipe left for next, swipe right for previous).

Admin Panel (Filament):

• Style Management: Create, edit, and manage AI styles, including their titles, prompts, descriptions, preview images, parameters, and associated AI models. Styles can be enabled/disabled, and duplicated.
• AI Model Management: Configure AI models, linking them to multiple API providers.
• API Provider Management: Manage API endpoints for AI services, including their names, URLs, credentials (username, password, token), and associated plugins. API providers can be enabled/disabled.
• User and Role Management: Standard user and role management functionalities.
• Plugin Management:
  • Install Plugins: Upload new AI API provider plugins (PHP files) directly through the admin interface.
  • List and Manage Plugins: View all installed plugins, including their names, identifiers, and file paths. Plugins can be enabled/disabled and deleted directly from the admin panel.

Plugins

The application supports an extensible plugin system for integrating various AI API providers. Plugins are PHP files located in the app/Api/Plugins/ directory. Each plugin must implement the ApiPluginInterface to provide details like its identifier, name, and methods for enabling/disabling, and interacting with the external AI service (e.g., upload, styleChangeRequest, getStatus, getProgress).

Technology Stack

• Backend:
  • Laravel (PHP Framework): Provides the core application logic, routing, and API endpoints.
  • Filament: Used for building the powerful and intuitive admin panel.
  • Laravel Sanctum: Handles API authentication.
  • Eloquent ORM: For database interactions.
• Frontend:
  • Vue.js: Reactive JavaScript framework for building the user interface.
  • Inertia.js: Connects the Laravel backend with the Vue.js frontend, allowing for single-page application (SPA) like experiences with server-side routing.
  • Axios: Promise-based HTTP client for making API requests.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Database:
  • MySQL: The primary relational database used for storing application data.
• Other:
  • Composer: PHP dependency manager.
  • NPM/Yarn: JavaScript package managers.
  • Vite: Frontend tooling for fast development and optimized builds.