| Undo Redo | Preview Mask | Generate Image |
|---|---|---|
 |
 |
 |
This project is a demo of how to apply brush strokes on an image, generate a mask image with just the brushing information, and use AI API calls to modify specific areas of the original image. The demo is built using Expo, Supabase, fal-ai, and @shopify/react-native-skia.
- Brush Stroke on Image: Users can draw on an image, and the path of the brush stroke is used to generate a mask image.
- Undo and Redo: The brush stroke actions can be undone or redone.
- AI Image Modification: The mask image is combined with an AI API call to modify specific regions of the original image in a natural way.
-
Install dependencies:
bun install
-
Start the app:
bunx expo start
-
The app can be tested on a development build, an Android emulator, an iOS simulator, or in Expo Go.
-
app/_layout.ts: This file contains the main implementation for handling brush strokes and generating mask images.
-
components/MaskCanvas: Responsible for rendering the mask image based on the brush strokes applied to the canvas.
-
libs/operatImage: Contains logic for making API calls to modify the image using AI, applying changes based on the generated mask image.
-
libs/storage: Handles the storage of images and generates signed links for the stored images.
- Some environment variables are used for AI calls and storing images on a CDN. Ensure you configure the necessary keys and endpoints in your environment.
You can copy this directly now! Let me know if you'd like to adjust anything.