Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as an intelligent caching architecture intermediary between Google Drive and end users. The application allows users to click on aircraft models on a map, retrieve images from Google Drive, and process them using OpenAI's Vision API for efficient management and display of aircraft images.

## CORE FEATURES
1. **Image Retrieval**: Users can click on an aircraft model, triggering a workflow that checks the database for existing images. If not found, it retrieves and processes the image from Google Drive.
2. **AI Processing**: The application utilizes OpenAI's Vision API to analyze images and extract model and airline information, streamlining data management.
3. **Caching Mechanism**: Once an image is processed, it is stored in the database, allowing for rapid retrieval on subsequent requests, enhancing performance.
4. **User-Friendly Interface**: A minimalist design ensures ease of navigation, focusing on user experience and quick access to image data.
5. **Automatic Cataloging**: The system automatically organizes images based on processed names, creating an efficient tracking library.
6. **Environment Configuration**: Users can easily set up API keys and manage their configurations within the Lovable platform.

## 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 header with navigation, a central section for the interactive map, and a sidebar for displaying aircraft information. A footer will include contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API for global state management related to aircraft data and user interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using TypeScript and integrate Tailwind CSS for styling.
2. **Create Edge Function**: Develop an Edge Function that receives the aircraft ID, checks the Supabase database for existing images, and calls the OpenAI Vision API if necessary.
3. **Database Configuration**: Set up the Supabase database with appropriate tables for aircraft images and ensure it can store processed names and Google Drive URLs.
4. **Implement Image Processing Logic**: Integrate OpenAI Vision API to analyze images and format the output for storage.
5. **Build User Interface**: Create a minimalist UI that includes an interactive map, image display area, and input for user actions.
6. **Environment Variables Setup**: Configure API keys for Google Drive and OpenAI in the Lovable platform’s environment settings.
7. **Testing and Optimization**: Test the application for performance, especially the caching mechanism, and optimize for user experience.

## USER EXPERIENCE
Users will interact with a clean interface where they can click on aircraft models displayed on the map. Upon clicking, the application quickly checks the database for the image. If it’s already cached, it displays the image instantly. If not, the system retrieves the image from Google Drive, processes it through OpenAI’s API, stores the information, and then displays it, ensuring a seamless experience with minimal wait time. The design promotes easy navigation and efficient access to information, enhancing user satisfaction.