DEV Community

Cover image for Create a banknote image with your own portrait.
Hex2077
Hex2077

Posted on

Create a banknote image with your own portrait.

#devchallenge #googleaichallenge #ai #gemini

Google AI Challenge Submission

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Upload a portrait to create a realistic and interesting banknote design featuring your photo.

Demo


website：https://the-minter-447170100566.us-west1.run.app/

Multimodal Features

A banknote generator that uses Nano Banana's image editing and consistency features to create designs based on a reference image.

Prompt

@AppGoal
Build a single-page, mobile-first web application named "The Minter". The primary goal is to allow users to upload their portrait and create a personalized, high-quality, realistic-looking currency note featuring themselves. The experience should be fun, intuitive, and result in a highly shareable image.

@CoreConcept
The application immerses the user in the fantasy of becoming a national icon. It's a tool for self-expression and humor, allowing anyone to "mint" their own currency. The final output should feel premium and authentic, mimicking the detailed, engraved style of real banknotes.

@AppFlow (User Journey)

  1. Screen 1: The Grand Welcome

    • Action: The user arrives on the landing page.
    • Content: A catchy headline like "Immortalize Yourself. Mint Your Legacy." and a clear call-to-action button: "Upload Your Portrait".
    • User Input: User uploads a clear portrait photo (JPG, PNG, HEIC).

  2. Screen 2: The Design Vault (Main Workspace)

    • Layout: A two-panel interface. The left panel shows a real-time preview of the currency note being designed. The right panel contains all customization options.
    • Action: The user designs their unique banknote by making selections and filling in text fields. Changes are reflected instantly in the preview panel.
    • User Input / Customization Options:
      • Choose a Template (Radio Buttons with Icons):
        • Federal Reserve: Classic US Dollar greenback style.
        • Crown Treasury: Regal British Pound style with elegant flourishes.
        • Rising Sun Bank: Minimalist and refined Japanese Yen style.
        • Euro Central: Modern, colorful European Union style.
        • Crypto Coin: A bonus futuristic style that looks like a physical representation of a cryptocurrency (holographic elements, circuit board patterns).
      • Customize the Text (Input Fields with default examples):
        • Issuing Bank: Default: "The First Bank of [User's Name]".
        • Face Value: Default: "$1,000,000".
        • Motto / Slogan: Default: "In Me We Trust".
        • Serial Number: Default: User's birthday or a random number.
        • Signature: A field for the user to type their name, which will be rendered in a script font, under the title "Minister of Finance".
    • Final Action: Once satisfied, the user clicks a prominent "MINT MY NOTE" button.

  3. Screen 3: The Printing Press (Loading State)

    • Action: A modal overlay appears while the AI processes the image.
    • Content: Show an engaging animation (e.g., a printing press running, coins minting, a progress bar filling up) with fun text that cycles through messages like: "Engraving your portrait...", "Verifying serial numbers...", "Adding anti-counterfeit measures...".

  4. Screen 4: The Reveal

    • Action: The final, high-resolution currency note is displayed prominently.
    • Content:
      • The generated image.
      • Headline: "Congratulations! Your Legacy is Minted."
      • Bonus Content: Below the main image, show a second, smaller image generated by another AI call: "Your new currency in a huge pile."
    • User Actions (Clear Buttons):
      • Download HD: Downloads the main image as a high-quality PNG.
      • Share: Opens the device's native share sheet with a pre-written message: "I just printed my own money! Check it out. #TheMinterApp".
      • Create Another: Takes the user back to Screen 1.

@AIFunctionality (The Core Engine)

  1. AI_Portrait_Processor: This is the most critical AI function.

    • Input: The user's uploaded photo.
    • Steps:
      1. Face Detection & Cropping: Automatically identify the user's face and crop it into a classic portrait oval or rectangle.
      2. Background Removal: Isolate the portrait from its original background.
      3. Style Transfer: Convert the portrait to monochrome and apply a sophisticated "engraved/intaglio" filter. The output should mimic the look of hand-carved lines, cross-hatching, and stippling seen on real currency. It must not be a simple black-and-white photo.
    • Output: A processed, transparent PNG of the user's portrait in banknote style.

  2. AI_Composition_Engine:

    • Input: The chosen template, the processed portrait from the AI_Portrait_Processor, and all the user's custom text.
    • Steps:
      1. Seamlessly blend the portrait into the designated area of the currency template.
      2. Intelligently place the user's text into the correct fields, using appropriate, thematic fonts (e.g., serif fonts for the Federal Reserve style, modern sans-serif for the Euro style).
    • Output: The final, composed, high-resolution currency note image.

  3. AI_Bonus_Scene_Generator (Optional but highly recommended):

    • Input: The final currency note image from the AI_Composition_Engine.
    • Prompt: Execute a simple image-to-image or text-to-image prompt like: "Photorealistic image of a massive pile of cash, the banknotes are the user's uploaded image. Dramatic lighting, shallow depth of field."
    • Output: A fun, contextual image that enhances the shareability of the result.

@ToneAndStyle

  • UI/UX: Clean, premium, and slightly formal. Use a color palette of dark greens, gold, and cream. Employ guilloché patterns (the complex, thin lines on currency) as background textures.
  • Copywriting: Tongue-in-cheek and empowering. Use words like "Official," "Treasury," "Commemorative," and "Legacy" to build the fantasy. The tone is serious on the surface but humorous underneath.

Top comments (0)