Build a Hairstyle AI App

There are countless apps and websites that let you try on new looks virtually. But have you ever thought about how these apps are created? What kind of technology powers them? Let’s dive into how you can build your very own hairstyle transformation app using Flutter and machine learning.

What We're Building

In this post, we'll create a simple app that scans a face and applies different hairstyles to it. We'll use Flutter for the front-end, and a pre-trained machine learning model to handle hairstyle recognition.

Please note: This guide will give you an overview of the process, without diving into all the code details. If you're interested in the full implementation, feel free to reach out, and we’d be happy to share it!

Using Pre-trained Models

The first step in building this kind of app is to train a model that can recognize faces and hairstyles. You’d need a dataset of images with labeled faces and corresponding hairstyles. Sounds like a lot of work, right?

The good news is that you don’t need to start from scratch! There are already pre-trained models available that are designed for tasks like this. One great option is HairCLIP, available on Replicate. Replicate is a platform that provides pre-trained models via API, so you don’t need to handle the heavy lifting of training your own model.

While using Replicate’s API comes with a small cost, it’s quite affordable. During our development, our total usage was less than 10 cents. Plus, you can set spending limits to keep things within budget.

Building the App with Flutter

To quickly get our app up and running, we’ll use Flutter, a framework known for its speed and flexibility. Specifically, we’ll be leveraging Stacked, an MVVM (Model-View-ViewModel) architecture that helps keep your app’s code clean and maintainable by separating UI from business logic.

In this app, we will:

1. Capture a photo: Let the user take a selfie or select an image from the gallery.
2. Select a hairstyle: Apply one of several hairstyle options to the image.
3. Select a hair color: Choose a color to complement the hairstyle.
4. View the result: Show the image with the new hairstyle and color applied.

By using Flutter, we can quickly create a smooth and polished app for both Android and iOS.

Key Flutter Packages

For this app, we’ll use a few essential Flutter packages to help with common tasks:

• image_picker: Capture images using the camera or select from the gallery.
• http: Communicate with the Replicate API to apply hairstyles to the image.
• flutter_dotenv: Securely manage API keys. This keeps your keys safe and out of your codebase.
• cached_network_image: Efficiently load and cache images for better performance.
• gal: Store images in the gallery for the user to save their transformed photos.
• permission_handler: Manage permissions for accessing the camera and gallery.

App Architecture

Our app follows a MVVM (Model-View-ViewModel) architecture using Stacked. This architecture makes it easy to maintain and scale the app by separating the app’s UI, business logic, and data handling.

• Views: Handle user interactions and render the UI.
• ViewModels: Manage the app’s state and handle business logic, such as fetching data from the API.
• Services: Handle communication with external services, such as the Replicate API.

By following this architecture, we keep our code clean and organized.

Integrating Replicate API

To create a first version of the UI, you can leverage generative AI. In our case, we went with Windsurf to generate the basic structure of the application based on our proposed app architecture. With the UI and architecture in place, the core functionality of the app is to integrate the Replicate API to apply the hairstyle to the user’s photo.

This is far simpler than you probably thought. Here’s how we send the image to Replicate and get the transformed image:

1. Capture the image: After the user takes a photo or selects an image from the gallery, we send it to Replicate’s API.

2. Store settings: We store the selected hairstyle and color in the app.

3. Send the image to Replicate: We send the image data and settings to the API to generate the image.

   Here’s how the input looks when sending it to Replicate:

   final response = await http.post(
     Uri.parse('https://api.replicate.com/v1/predictions'),
     headers: {
       'Authorization': 'Token $apiToken',
       'Content-Type': 'application/json',
     },
     body: jsonEncode({
       'version': 'b95cb2a16763bea87ed7ed851d5a3ab2f4655e94bcfb871edba029d4814fa587',
       'input': {
         'image': inputImage,  // base64 of the selected image
         'editing_type': 'both',
         'color_description': 'blond',
         'hairstyle_description': 'hi-top fade hairstyle'
       },
     }),
   );
   

4. Display the result: Once the API returns the transformed image, we display it in the app’s interface. The result contains the image that has been edited with the selected hairstyle and color.

5. Download to the gallery: If the user likes the result, they can download it to their gallery using the gal package, which saves the image locally for easy access.

Conclusion

Building a hairstyle transformation app is an exciting project that combines machine learning and mobile development. By using ready-to-use models, you can create an app like this in just a few hours.

If you're interested in the full code or need further help getting started, feel free to reach out! We’d love to share the complete implementation and help you build your own app.