Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to enhance an existing aircraft tracking system by integrating real images of aircraft on a map. It utilizes APIs to fetch and display images, processes data in the background, and updates the user interface dynamically, ensuring a smooth user experience.

## CORE FEATURES
1. **API Integration**: Utilizes OpenAI and Google Drive APIs to fetch and analyze aircraft images based on the livery ID.
2. **Database Management**: Implements a Supabase table (`aircraft_library`) to cache aircraft information, ensuring efficient data retrieval.
3. **Real-Time Image Display**: When users click on an aircraft, the system checks the database for existing images and displays them immediately.
4. **Background Processing**: If an image is not found, the application searches through Google Drive, analyzes the images using OpenAI Vision, and updates the database with new entries.
5. **User Interface Enhancements**: Incorporates a sidebar that displays aircraft details along with a loading indicator while images are being processed.
6. **Edge Functionality**: Uses an Edge Function in Supabase to manage the logic of image processing without impacting front-end performance.

## 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 layout will feature a top navigation bar, a main content area displaying the map and aircraft details, and a sidebar for additional information. The image component will be positioned at the top of the sidebar, with loading indicators displayed as needed.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (as needed)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a React application with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Create Supabase Table**: Set up the `aircraft_library` table in Supabase with the specified columns.
3. **API Configuration**: Configure environment variables for OpenAI and Google Drive APIs.
4. **Develop Edge Function**: Create an Edge Function in Supabase to handle image fetching and processing logic.
5. **Implement UI Components**: Design and code the sidebar, map display, and loading indicators using Tailwind CSS for styling.
6. **Integrate Background Processing Logic**: Implement the logic for checking the database, fetching images from Google Drive, and updating the Supabase table.
7. **Test and Optimize**: Conduct thorough testing to ensure all components work seamlessly and optimize performance where necessary.

## USER EXPERIENCE
Users will interact with the application by clicking on aircraft icons on the map. Upon clicking, the application will check the database for the corresponding image. If available, the image will load immediately in the sidebar. If not, the system will process the required images in the background, providing a loading indicator to keep users informed without obstructing their view of flight data such as altitude and speed. This streamlined experience ensures that users can access real-time information while the application efficiently processes any necessary updates.