Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
OmniPix is a premium AI image generation web application designed to enable users to create stunning images based on their prompts. The application features a user-friendly interface that offers a seamless experience for both new and returning users, allowing them to generate, manage, and download their AI-created images effortlessly.

## CORE FEATURES
1. **User Authentication**: Secure sign-up and login flow with email/password authentication, allowing users to create accounts and manage their credits.
2. **Image Generation**: Users can input prompts and select style presets to generate images, with a clear credit deduction mechanism.
3. **Gallery Management**: A dedicated gallery page where users can view their generated images, reuse prompts, and manage their image history.
4. **Credit System**: A credit-based system that grants new users 10 free credits and deducts credits for each image generated, with real-time balance updates.
5. **Responsive Design**: A mobile-first approach ensuring optimal usability across devices, including touch-optimized interactions and navigation.
6. **Error Handling**: Clear feedback for users regarding their actions, including generation successes, failures, and credit warnings.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and accessibility.
- **Layout**: 
  - **Landing Page**: Hero section with a prominent prompt textarea, rotating placeholder examples, and a call-to-action (CTA) for sign-up.
  - **Gallery Page**: Grid layout showcasing generated images with timestamp and style used for quick actions.
  - **Generator Page**: Centralized area for prompt input, style selections, and real-time image result display.
- **Typography**: Use modern sans-serif fonts for clean readability, with a clear hierarchy for headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a scalable and maintainable application.
- **Styling**: Tailwind CSS for utility-first styling that promotes a clean and responsive design.
- **UI Components**: Utilize shadcn/ui library for ready-to-use components that match the visual design.
- **State Management**: Use React Query for handling server state and local state for UI interactions.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize the React project with TypeScript and install necessary dependencies, including Tailwind CSS and shadcn/ui.
2. **Create the database schema**: Define the tables for user profiles and generated images, implementing row-level security for data access.
3. **Develop the Authentication System**: Implement email/password signup and login features, ensuring protected routes for generating and viewing images.
4. **Implement the Credit System**: Set up the logic to manage user credits, including the deduction process and visual feedback for low credits.
5. **Build the AI Image Generation Backend**: Create an edge function that handles image generation requests, ensuring safety validations and credit checks.
6. **Design the UI**: Develop the landing page, generator page, and gallery page according to the specified layout and visual style.
7. **Ensure Responsiveness**: Test and optimize the application for various screen sizes, ensuring a smooth mobile experience.
8. **Implement Error Handling**: Establish clear messaging for users regarding errors, API failures, and credit notifications.

## USER EXPERIENCE
Users will start on the landing page, where they are greeted with a hero section and a prompt textarea. They can sign up to access the full features of the application. Once logged in, users can generate images by entering prompts and selecting their desired styles. The gallery page enables users to view and manage their generated images, including options to download or reuse prompts. Throughout the application, users receive real-time updates on their credit balance and status messages for their actions, ensuring a smooth and engaging experience.