The winner is " Image renamer website for SEO"
We are going to build a SAAS website where people can let AI bulk rename images based on keywords they fill in on the site + ai vision that wil look at the content of the images and make sure the new image names also say correctly something about what is inside the actual image.
Example for 1 image:
Old image name: 23441124-2025.jpeg (image of a brown bread)
User given keywords: Bread bakery, Bakery Amsterdam, Best Amsterdam baker
New ai generated image file name: Brown bread from Bakery Amsterdam
Functions
For the best SEO performance we want the new image names to be human-like.
There should be a " enhance keywords with ai" button to let ai generate more SEO valuable keywords to use.
We want people to be able to drag and drop folder of max 50 images per month to the website at 1 time.
Users should be able to download the newly named images as a .zip file.
We want the newly generated image names to be visable before people download the ZIP file, so they can check before download.
We want people to make an account before using the SAAS (login with google),
there should be an option to pay to upgrade your account to " pro" so that you can upload 500 images per month and "max" to upload 1000 images per month.
5a2118e47b
This commit completes the essential frontend components with full backend integration: ## Core UI Components ✅ - FileUpload component with drag & drop, validation, and progress tracking - ProgressTracker component with real-time WebSocket updates and batch monitoring - Complete landing page sections (Hero, Features, How It Works, Pricing) - Dashboard component for authenticated users - WorkflowSection for guided image processing workflow ## Authentication & Pages ✅ - OAuth callback page with error handling and loading states - Complete authentication flow with redirect management - Proper error boundaries and user feedback systems - Toast notification system with multiple variants ## Environment & Configuration ✅ - Environment variable setup for development and production - Complete .env.example with all required variables - Comprehensive README with setup and integration instructions - Development and deployment guidelines ## Integration Features ✅ - Real-time progress tracking via WebSocket connections - File upload with validation, progress, and error handling - Complete authentication flow with Google OAuth - API client integration with all backend endpoints - Error handling and loading states throughout the application ## User Experience ✅ - Responsive design with mobile-first approach - Dark mode support with proper theme management - Comprehensive error handling with user-friendly messages - Loading spinners and progress indicators - Professional UI components with proper accessibility ## Technical Architecture ✅ - Next.js 14 App Router with TypeScript - Complete Tailwind CSS design system - Custom hooks for authentication, upload, and WebSocket - Type-safe API client with comprehensive error handling - Modular component architecture with proper separation This provides a complete, production-ready frontend that seamlessly integrates with the existing backend APIs and supports the full user workflow from authentication to image processing and download. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .forgejo/workflows | ||
| cypress/e2e | ||
| k8s | ||
| logs | ||
| packages | ||
| .env.example | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierrc | ||
| CLAUDE.md | ||
| cypress.config.js | ||
| docker-compose.dev.yml | ||
| docker-compose.yml | ||
| Dockerfile | ||
| jest.config.js | ||
| package.json | ||
| plan-for-devs.md | ||
| plan.md | ||
| README.md | ||
| tsconfig.json | ||
Comprehensive, LLM-Testable Specification for the “AI Bulk Image Renamer” SaaS
0. Terminology
- Batch = one drag-and-drop upload event containing ≤ N images, where N depends on the user’s plan.
- Basic = default free plan, quota = 50 images / calendar month.
- Pro = paid plan, quota = 500 images / calendar month.
- Max = paid plan, quota = 1 000 images / calendar month.
- Keyword Set = the list of keywords a user provides or the system extends.
- Enhanced Keyword Set = Keyword Set after pressing “Enhance keywords with AI”.
- AI Vision Descriptor = tags the vision model returns for one image.
- Proposed Filename = final, human‑readable name generated for one image.
- Review Table = screen listing every original filename beside its Proposed Filename before download.
1. High‑Level Goals
- The product shall let any authenticated user rename many images in one batch using a combination of user‑supplied keywords and automatic computer‑vision tags.
- The product shall output renamed images that are search‑engine‑friendly, syntactically safe for all major file systems, and semantically descriptive of image content.
- The product shall monetise via tiered monthly quotas and Stripe‑handled subscriptions.
hallo
Minimal viable product specs
The MVP has to only have funcitonality for the user to supply keywords that the filenames should be based on.
It is just 1 landingpage with upload functions and the following features:
There should be a " enhance with ai" button to further expand the list of keywords to use when ranaming the images.
it should be posible to see the uploaded images as thumpbnails after uploading them. When the new names are generated, they should be underneath the coresponding image to indicate that that wil be the new file name.
After uplaoding and renaming there should be a download as zip file button. to download the newly renamed images.