Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to allow users to upload three images of a person and another image of their choice. The application will enable users to customize the appearance of the uploaded person, including hair, clothing, pose, and background, with an intuitive interface that allows for selection and deselection of options. Once the desired configurations are made, users can generate a realistic image based on their preferences.

## CORE FEATURES
1. **Image Upload**: Users can upload three images of a person and one additional image for editing.
2. **Customization Options**: Users can select or deselect specific features such as background, clothing, and pose using checkboxes.
3. **Preview Generation**: After customization, users can click a "Generate" button to create a realistic image based on their selections.
4. **User Interface**: A clean and user-friendly interface that guides users through the upload and customization process.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across devices.

## 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
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs
- Layout: The main layout will feature a hero section for uploading images, followed by a customization section with options, and a preview area where the generated image will be displayed.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Use React's Context API for managing state across components

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript.
2. **Install Tailwind CSS** and configure it for styling.
3. **Create the main components**:
   - Upload component for image uploads.
   - Customization component for feature selection.
   - Preview component to display the generated image.
4. **Implement state management** using the Context API to share data between components.
5. **Add event handlers** for image uploads and customization options.
6. **Integrate image generation functionality** that processes the selected options and outputs a realistic image.
7. **Test the application** on various devices to ensure responsiveness and usability.

## USER EXPERIENCE
Users will begin by uploading three images of a person and an additional image for editing. Once the images are uploaded, they will see a series of checkboxes allowing them to customize features such as background and clothing. As they make selections, a preview of the generated image will be updated in real-time. When satisfied with their choices, users can click the "Generate" button to create the final image, providing a straightforward and engaging experience.