React Developer — AI Nail Image Detection & Realistic Colour Overlay
Бюджет: $300.0
FIXED /
⭐ 5.00 (19)
United Kingdom
phone, android-app-development, ios, android, augmented-reality, react-js
Overview: https://naild.bolt.host/
I am the founder of Naild — a mobile-first web app for freelance nail technicians. The core app is already built and deployed. I need a specialist developer to solve one specific technical challenge: making the AI nail colour recommendations look realistic on the client's actual hand photo.
This is a focused, well-defined project with clear deliverables. Full technical brief available on request.
The Problem:
The app currently asks clients to upload a photo of their hand. Claude AI analyses the skin tone and recommends nail colours. However, the colour is either:
Rendered as a flat blob over the hand rather than on the nails
Not rendered on the nails at all — just shown as flat colour swatches
What we need is realistic nail colour overlay — the recommended colour should appear painted onto the actual nails in the photo, looking as close to a real manicure as possible.
What We Want the App to Do:
Client uploads a photo of their hand
AI detects the exact location and shape of each fingernail in the photo
The recommended nail colour is overlaid onto each nail realistically — following the natural shape and curve of the nail, with realistic sheen and depth
The result looks like the client is actually wearing that nail colour
Client can tap different colours and see the overlay update in real time
Technical Approach Required:
We believe the correct solution involves a two-step AI pipeline:
Step 1 — Nail Segmentation
Use a specialist image segmentation model to detect and mask the exact nail boundaries:
Preferred: fal.ai SAM2 (fal-ai/sam2) — simple API, ~$0.001 per image
Alternative: Google MediaPipe Hand Landmarker for nail region detection
Output: precise pixel masks for each visible fingernail
Step 2 — Realistic Colour Rendering
Apply the selected colour to the masked nail regions realistically:
Use canvas-based rendering to paint colour within the nail mask boundaries
Apply realistic nail finish effects:
Glossy: specular highlight, subtle shine line
Matte: flat even colour, no shine
Shimmer: subtle sparkle particles within the nail area
Glitter: larger sparkle effect
Chrome: metallic mirror effect
Preserve the natural nail texture and contour beneath the colour overlay
The result must look like a real manicure, not a flat colour fill
Step 3 — Real Time Colour Switching
When the client taps a different colour swatch the overlay updates instantly without re-uploading the photo
The nail masks are computed once on upload and reused for each colour change
Fallback Requirement:
If nail segmentation fails or returns no nail regions:
Fall back gracefully to showing colour swatches only
Show a friendly message: "For best results use a well-lit photo with fingers spread flat"
Never crash or show a blank screen
Claude API Integration:
The existing Claude API call must be maintained for skin tone analysis. The image must be sent exactly as follows:
Base64 encoded using FileReader — no compression, no resizing
Mime type detected dynamically from file.type — never hardcoded
Header required: anthropic-dangerous-direct-browser-access: true
Image block before text block in the messages array
API key stored as VITE_ANTHROPIC_API_KEY environment variable
Tech Stack:
React + Tailwind CSS (existing codebase)
fal.ai client: npm install @fal-ai/client
HTML5 Canvas for colour rendering
Claude API (claude-sonnet-4-6) for skin tone analysis
Deployed on Bolt.new / bolt.host
Design Requirements:
The existing app design must not be changed at all:
Background: dark purple/navy gradient #0f0c29 to #302b63
Primary accent: #FF6B9D pink
Fonts: Playfair Display headings, DM Sans body
All existing screens, navigation and features remain untouched
Only the colour overlay rendering is being changed
Deliverables:
Working nail detection and realistic colour overlay on desktop and Android Chrome mobile
Real time colour switching without re-uploading
All five finish types working: Glossy, Matte, Shimmer, Glitter, Chrome
Fallback behaviour when nail detection fails
Short screen recording demonstrating the feature working on a real hand photo on mobile
Source code exported from Bolt.new as ZIP
fal.ai API key integration documented
Budget:
Please quote a fixed price for the complete deliverable as described.
Timeline:
Ideally 3–5 days for a developer with the right experience.
Required Experience:
React and canvas-based image manipulation
Experience with image segmentation APIs (fal.ai, SAM, MediaPipe or similar)
AI vision API integration
Mobile-first development — Android Chrome priority
To Be Considered Answer These Questions:
Have you worked with image segmentation APIs before (fal.ai SAM, MediaPipe, Segment Anything or similar)? Describe the project briefly.
Have you done canvas-based colour overlay or image manipulation in React before?
What is your approach to making the nail colour look realistic rather than a flat fill?
Can you share an example of a project involving image processing or AI vision?
What is your fixed price quote and estimated timeline?
Applications that do not answer all five questions will not be considered.
Отвори в Upwork