DEV Community

Cover image for NanoGem Nail Art Studio 💅🏻
Saloni Agarwal
Saloni Agarwal

Posted on

NanoGem Nail Art Studio 💅🏻

#devchallenge #googleaichallenge #ai #gemini

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Introducing NanoGem Studio, a delightful and engaging nail art experience built with the power of NanoBanana and Google AI Studio.
This applet allows you to virtually try on different nail art designs from a palette, try custom studio views that further enhances the beauty of nails, and also create your own nail art look using natural language prompts.It also offers a gallery section to save your favorite designs for future use.
So, the next time when you sit with your nail art kit at home or pay a visit to some studio, you will have your own personalized collection of nail art designs to get that perfect dreamy look on your nails.

Demo

Applet link: live app

Applet demo

Applet Screenshots
Home Screen

Generated img

Studio views

gallery

Create design screen

How I Used Google AI Studio

  • Ideation and prompting: Initially, I wrote a simple prompt that let me layout my idea and build the core MVP easily, with no errors.

  • Iterative feature addition and testing: As I continued building the app, I kept prompting the code assistant with tiny features and UI fixes. The Auto-fix feature is something that I personally loved a lot, it showed up whenever there was some error in running the code.

  • Custom prompts for gemini 2.5 flash-image-preview: I wrote many prompts for designing and testing the palette and custom studio views which were passed on to the image generation and editing model API.

  • Code remix: Certain UI elements of the applet which were generated by the code assistant did not look very good, so I wrote some code here and there in different component files to get the desired UI.

  • Applet Deployment: Using the Cloud Run feature, I deployed the app directly from AI Studio. In the Google Cloud console website, I set the service scaling to auto in the Cloud Run, services tab to ensure that the applet runs smoothly.

    Multimodal Features

  • Text-to-Image: For the Palette screen in the applet, I designed 5 descriptive text prompts to define a variety of nail art designs. I leveraged the gemini 2.5 flash-image-preview API to get the best generated images from these prompts. The Create Your Own design feature in the applet also uses this API to generate custom user-defined nail art designs.

  • Image + Text-to-Image(Editing): The following custom studio views utilize this multimodal feature provided by gemini 2.5 flash-image-preview API:

    • Sun-kissed view: On the generated nail art design, I passed in a text prompt to add a sun-kissed look to the image which lets users see how a certain design glows in a bright sunlit area.
    • Accessories add-on view: This view option adds a bracelet on the wrist of user which coordinates with the generated nail art design, giving a more complete and stylized look.

Conclusion

I had an incredible amount of fun into crafting this experience, because this project gave me the opportunity to make something that I personally care a lot about. NanoGem Studio is not just an experience , it plays the role of your own Nail Art Style Assistant that delivers the best designs at your fingertips.
Let me know in the comments which palette look you loved the most, and what other features you liked!
Cheers🥂 💅🏻

Top comments (0)