Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based RAG (Retrieval-Augmented Generation) evaluation UI pipeline designed to facilitate interaction between users and backend services. Users can upload documents to extract requirements, which are then processed to fetch contextual information from a knowledge graph, all while ensuring an intuitive and engaging user experience.

## CORE FEATURES
1. **Document Upload**: Users can upload documents that will be processed to extract relevant requirements through a simple and user-friendly interface.
2. **Requirements Display**: Once the requirements are extracted, they will be displayed in a clear and organized manner, utilizing animations for an enhanced user experience.
3. **Selection Options**: Users can select individual requirements or choose all at once, facilitating customized inputs based on their needs.
4. **Keyword Input Form**: A dedicated form for users to input additional keywords that will accompany their selected requirements, enhancing the context retrieval process.
5. **Context Fetching**: A button triggers a request to the backend, which retrieves contextual information and metadata from the knowledge graph based on the selected requirements and keywords.
6. **Interactive Metadata Display**: Contextual information is presented alongside metadata that is revealed upon hover or click, ensuring users have access to detailed insights without cluttering the main interface.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with an emphasis on clean lines and simplicity, allowing users to focus on the content without distractions.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high readability and a pleasant viewing experience.
- **Layout**: A single-page layout with a top navigation bar for easy access to document upload, requirements display, and keyword input sections. The main content area will be spacious, allowing for easy viewing of requirements and contextual information.
- **Typography**: Use a sans-serif font such as 'Inter' or 'Roboto' for modern appeal, with a clear hierarchy (e.g., H1 for titles, H2 for section headers, and body text for descriptions).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid UI development and consistent design.
- **UI Components**: Utilize shadcn/ui for pre-built UI components that align with the minimalist aesthetic.
- **State Management**: Implement React Context or Zustand for efficient state management of user selections and data fetching.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project, ensuring to configure Tailwind for styles.
3. **Create Components**: 
   - Document upload component for handling file inputs.
   - Requirements display component to render fetched requirements with animations.
   - Selection and keyword input form for user interaction.
   - Context display component for showing contextual information and metadata.
4. **Implement State Management**: Set up React Context or Zustand to manage the state across components, particularly for user selections and fetched data.
5. **Connect to Backend**: Implement API calls to the backend for document processing, requirements retrieval, and context fetching.
6. **Finalize UI**: Apply Tailwind CSS styles to achieve the minimalist design, ensuring adequate whitespace and responsive design for various screen sizes.
7. **Testing**: Conduct thorough testing of each functionality, including document upload, requirement selection, and context display interactions.

## USER EXPERIENCE
The user journey begins with a simple document upload process, followed by an automatic extraction of requirements that are displayed in an elegant list format. Users can easily select the relevant requirements and enter additional keywords before submitting their request, which triggers a backend call to fetch contextual information. The presentation of this information is intuitive, allowing users to hover or click for more details, thereby enhancing their understanding of the requirements and associated contexts. All interactions are designed to be smooth and responsive, providing a seamless user experience throughout the application.