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.
27db3d968f
This commit establishes the complete Next.js frontend foundation with comprehensive backend integration: ## Core Infrastructure ✅ - Next.js 14 with App Router and TypeScript configuration - Tailwind CSS with custom design system and dark mode - Complete project structure with proper imports and path aliases ## API Integration Layer ✅ - Full-featured API client with authentication, file upload, and WebSocket - Comprehensive TypeScript type definitions for all API responses - Axios-based HTTP client with interceptors and error handling - Socket.io integration for real-time progress updates ## Authentication System ✅ - useAuth hook with Google OAuth integration - JWT token management with automatic refresh - Protected route handling and session persistence - Login/logout flow with redirect management ## File Upload System ✅ - useUpload hook with drag & drop functionality - File validation (size, type, duplicates) - Progress tracking during upload - Batch creation and image processing workflow ## WebSocket Integration ✅ - useWebSocket hook for real-time updates - Progress subscription for batch processing - Reconnection logic with exponential backoff - Event-driven updates for batches, images, and user data ## UI Foundation ✅ - Responsive Header with user authentication state - Professional Footer with proper navigation - Error Boundary for graceful error handling - Toast notification system with multiple variants - Loading spinners and UI components ## Layout & Navigation ✅ - Main page component with authenticated/unauthenticated states - Dynamic content switching between landing and dashboard - Mobile-responsive design with proper accessibility This provides the complete foundation for a production-ready frontend that integrates seamlessly with the existing backend APIs, supporting all core workflows from authentication to file processing. 🤖 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.