Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that features an animated face capable of responding to voice commands and engaging in chat. The main purpose is to create an interactive, conversational AI experience that allows users to communicate naturally—asking questions and receiving answers in a friendly, engaging manner.

## CORE FEATURES
1. **Animated Face Interface**: A visually appealing animated character that reacts to voice commands and displays emotions to enhance user interaction.
2. **Voice Recognition**: Integration of voice recognition technology that allows users to speak naturally, with the AI interpreting and responding to commands.
3. **Text Chat Functionality**: Users can type questions or commands, and the AI will respond in real-time, providing a seamless chat experience.
4. **Personalized Responses**: The AI learns from user interactions to provide tailored answers, making conversations feel more personal and engaging.
5. **Feedback Mechanism**: Users can provide feedback on responses, which will help improve the AI's performance over time.
6. **User Settings**: Allow users to customize their experience, such as selecting different animated characters or adjusting the voice tone.

## 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 structure will consist of a centered animated face interface at the top, followed by a chat window for text input, and a footer with user settings and feedback options.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit for managing application state if necessary

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**:
   - Develop the animated face component using CSS animations or a library like Lottie.
   - Build the chat interface with an input field and display area for conversation.
3. **Integrate Voice Recognition**: Use the Web Speech API to implement voice recognition functionality.
4. **Implement Chat Logic**: Create functions to handle user input (both voice and text) and generate responses from the AI.
5. **Design User Settings**: Develop a settings component that allows users to customize their experience.
6. **Feedback Mechanism**: Implement a simple feedback system for users to rate responses.
7. **Testing and Optimization**: Conduct thorough testing to ensure all features work as intended and optimize performance.

## USER EXPERIENCE
Users will first interact with the animated face, which will greet them and prompt them to speak or type their questions. The AI will listen for voice commands and respond accordingly while displaying engaging animations. Text interactions will be equally smooth, with responses appearing instantaneously. The user settings will allow them to personalize their experience, ensuring that interactions are enjoyable and tailored to their preferences. Feedback options will encourage users to contribute to the AI's learning process, enhancing the overall experience.