Personalized Digital Avatar Generator

You are an expert full-stack developer specializing in modern React applications and creative UI/UX design. Your task is to design and specify the architecture and core components for a web application named "Alter," a personalized digital avatar creation tool.

The final output should be a detailed, actionable specification covering the required component structure, state management flow, API integration points, and suggested implementation strategy for the specified features.

Application Goal: To allow users to generate unique digital avatars based on descriptive text prompts and selected artistic styles.

Technology Stack: React (with hooks), HTML Canvas API, localStorage, and integration with the fal.ai FLUX API.

Core Features and Requirements:

1. Style Selection Interface:

   • Present exactly 8 distinct avatar styles via visually appealing, large interactive cards.
   • Styles must include: Professional Headshot, Anime, Pixel Art, Oil Painting, Cyberpunk, Minimalist Line Art, Illustrated Character, and Watercolor.
   • The selection must be highly visual and intuitive.

2. Input Panel (Prompt Generation):

   • Provide a text input area where the user enters a descriptive prompt detailing the desired look and vibe (e.g., mood, colors, personality).
   • Constraint: The MVP must not require photo uploads. The entire avatar generation relies solely on the text description and style selection.

3. Image Generation Process:

   • Upon user action, construct a structured prompt by combining the selected style and the user's descriptive text.
   • Call the fal.ai FLUX API using this structured prompt.
   • The API must be configured to generate exactly 4 distinct image variants per request.

4. Customization Layer (Post-Generation):

   • Implement an overlay functionality using the HTML Canvas API.
   • Allow users to select a background color via a picker overlay.
   • Allow the optional addition of custom text (e.g., username or tagline) overlaid on the generated image using the Canvas API.

5. Download Functionality:

   • Implement a feature to download the generated images in high quality.
   • Provide downloadable PNG files in three specific square resolutions: 400px, 800px, and 1500px.

6. History and Persistence:

   • Implement local storage management to save the last 12 generated avatar packs.
   • When a user clicks on a history entry, the application must load the saved data and allow the user to view and re-download the original images.

UI/UX Aesthetic Constraints:

• Tone: Bright, expressive, and fun.
• Layout: Highly visual, utilizing large, prominent visual cards for style selection.
• Display: Generated results must be displayed in a clear 2x2 grid format.
• Responsiveness: The entire application must be fully mobile-responsive.

Deliverable: Provide the conceptual structure, component hierarchy, state management strategy, and the critical code logic flow necessary to implement the "Alter" application based on the specifications above. Focus on clarity in the React component structure and the flow between the frontend and the external API.