i have added the saved as ai_api_key in the .env Create the full user interface for an AI-powered file conversion tool that leverages a powerful backend for batch processing. The tool is built with Next.js and Tailwind CSS and has a clean, minimalist design. The user flow should be seamless and provide constant, reassuring feedback. 1. Main Component State & Logic: - The component should manage several states: isReady, isProcessing, isSuccess, error. - When files are uploaded, it should extract the text on the client-side and then trigger a single fetch request to a backend API endpoint at /api/process. - This fetch call will send the combined text of ALL uploaded files in a single POST request. The component must show a loading state while waiting for the response from the backend. 2. The "Ready" State UI: - A large, central drag-and-drop upload zone. - Headline: "Analyze a Year's Worth of Statements in a Single Click." - Sub-headline: "Powered by Kimi-2 with a 200,000 token context window for cross-document analysis." 3. The "Processing" State UI (This is key for user trust): - When processing begins, replace the upload zone with an engaging loading component. - Show a "smart" loading message. Instead of "Loading...", display a series of dynamic messages that explain what the AI is doing. Animate a loop through these messages: - "Sending batch to our secure Kimi-2 endpoint..." - "Analyzing transactions across all documents..." - "Identifying cross-file duplicates and anomalies..." - "Generating your summary report..." - Include a subtle, looping animation, like a pulsating neural network or a series of connected nodes. 4. The "Success" State UI (The AI-Powered Dashboard): - This view appears with the structured data returned from the /api/process endpoint. - AI Summary Card (Top): A prominent card with a lightbulb icon. It should display a holistic, multi-document summary generated by Kimi-2. Placeholder: "Analyzed 312 files. Found 4 potential cross-statement duplicates and flagged 2 unusual expenses. The highest spending category across all documents was 'Software'." - Results Table: A filterable data table showing all transactions from all files. Include the AI-powered columns: - Confidence Dot: A colored dot indicating AI confidence. - AI Category Tag: The category assigned by the AI. - Anomaly Flag: A small warning icon if the AI flagged the transaction for review (e.g., potential duplicate). - Download Buttons: "Download All (CSV)" and "Download AI Report (.txt)". This prompt directly connects your frontend design to your chosen backend technology, creating a cohesive and powerful application that truly showcases the capabilities of Kimi-2.

Create a complete, high-performance, 100% frontend-only AI document analysis web app using Next.js, Tailwind CSS, and Framer Motion. The app's core feature is converting PDFs AND images of financial documents (receipts, bills, invoices) into structured data using a user-provided OpenRouter API key for the Kimi-2 model. --- ### Part 1: The Upgraded Landing Page Objective: Clearly communicate the new, powerful vision capabilities. 1. Hero Section Headline: - Main Headline (Large & Bold): "Your AI Bookkeeping Assistant That Can See." - Sub-headline: "Drop in PDFs, receipts, and invoice photos. Get clean, categorized data in seconds. No sign-up required." 2. Visual Proof Component: - Create an animated "Before & After" component. - "Before" side: Show a mix of icons: a PDF document icon and a slightly skewed photo icon of a paper receipt. - "After" side: Show a clean, structured spreadsheet icon. - Animate the icons flowing from left to right and transforming. 3. Features Section: - Animate this section with a staggered fade-in for each feature. - Feature 1 (Vision Icon): "Reads Images & PDFs: From bank statements to blurry phone pictures of receipts, our AI extracts the data." - Feature 2 (Brain Icon): "Intelligent Categorization: Automatically understands if it's Travel, Software, or a Utility bill." - Feature 3 (Shield Icon): "100% Private & Secure: Your files and API key never touch our servers. Everything happens in your browser." --- ### Part 2: The Core Tool Page (/tool) Objective: Fix the UI bug, implement image handling, and reinforce the BYOK model. 1. Secure API Key Onboarding (First-Time User Experience): - The app MUST first check for an OpenRouter API key in localStorage. - If no key exists, show a modal overlay. This modal asks the user to enter their key. The main tool UI underneath should be disabled. - If a key exists, enable the full tool UI. 2. The Interactive Upload Zone (Bug Fix & Feature Upgrade): - Create a large, central drag-and-drop zone. - CRITICAL FIX: Ensure the ENTIRE dropzone area, including the padding and border, is a single clickable element that opens the file browser. Use the getRootProps() from react-dropzone on the main container div. - Update Accepted Files: Configure the dropzone to accept .pdf, .jpg, .jpeg, and .png files. - Update UI Text: - Icon: Use an icon that combines a document and a picture. - Headline: "Drag & Drop PDFs and Bill Photos Here" - Sub-text: "or click anywhere in this box to browse files." 3. Client-Side Processing Logic (The Core Engine): - When files are uploaded, the app must process them in the browser before sending to the AI. - Create a preprocessing function that handles a mix of files: - If a file is a PDF: Extract its raw text content. - If a file is an IMAGE (.jpg, .png): Convert the image file into a base64 encoded string. - The function should prepare a single JSON payload to send to the Kimi-2 API. This payload will be an array of objects, mixing text content and image content in the format the vision model expects. 4. The "Processing" State UI: - While waiting for the API response, show dynamic loading messages that reflect the new capabilities: - "Preparing your documents and images..." - "Analyzing image receipts with AI vision..." - "Extracting text from PDF statements..." - "Compiling your cross-document report..." 5. The AI Results Dashboard: - Display the final, structured data in a table. - Add a "Source" column with a small icon indicating whether the data came from a PDF or an Image file. This provides clarity and builds trust in the new feature. - All other AI features (Confidence Score, AI Category, Anomaly Flags) remain the same.