Part 1: The Core App Concept

"Create a web application where a user can take a photo with their camera or upload an existing one. The app will then use AI to 'virtually dress' the user in a school-themed t-shirt. The UI should feature two main buttons: 'NSU' and 'RiverHawks' to trigger the transformation with that specific text on the shirt."


Part 2: The AI Generation Prompt (The "Brain")

"Use the gemini-2.5-flash-image model. When generating the image, follow these 7 strict rules:

    Target View: The final image MUST be a professional portrait from the waist up. The framing must be wide enough to clearly display the person's entire torso down to the waistline.

    Frame Expansion: If the original image is a headshot or close-up, you MUST realistically generate the person's torso and arms down to the waist.

    Clothing: Replace the person's current top with a high-quality, professional forest green cotton athletic t-shirt. The entire t-shirt, from shoulders to the waist, MUST be clearly visible.

    Logo: On the center chest of the shirt, print the text [INSERT TEXT HERE] in crisp, bold white varsity block letters.

    Face Preservation: The person's face, hair, and facial structure must remain EXACTLY identical to the original photo.

    Background: Replace the entire background with a beautiful, fall day on a university campus, including golden leaves on trees and a campus sidewalk.

    Realism: Ensure the lighting on the person matches the new bright campus background perfectly."


Part 3: Technical Specifications

"The app must be built for a PHP-hosted environment (e.g., billrosener.com/ai/nsu1/) and use Vanilla JavaScript (.js) instead of TypeScript (.tsx). The file structure must include:

    config.php: To store the API Key securely.

    proxy.php: A backend script to handle API requests so the API key is never exposed to the browser.

    index.php: The entry point that includes index.html.

    index.html: The frontend shell using Tailwind CSS and React (via ESM).

    App.js: The main logic for camera handling, file uploads, and UI states.

    services/geminiService.js: The logic to send the image and prompt to the proxy.

    metadata.json: Specifically requesting camera permissions."


Part 4: UI/UX Requirements

    Split View: Show the user's photo on the left and the AI result on the right.

    Camera Handling: Include a 'Take Photo' button that opens a live video stream with a 'Capture' button.

    Loading State: Provide a clear 'Generating...' indicator while the AI works.

    Download: Provide a button to download the final generated image.

    Aesthetics: Use an 'Emerald' and 'Slate' color palette to match the university theme.