React Developer — AI Nail Image Detection & Realistic Colour Overlay

Posted 3 weeks ago

Worldwide

Summary

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.

  • $300.00

    Fixed-price
  • Intermediate
    Experience Level
  • Remote Job
  • Ongoing project
    Project Type
Skills and Expertise
Mandatory skills
Smartphone
Android App Development
Activity on this job
  • Proposals:15 to 20
  • Last viewed by client:3 weeks ago
  • Interviewing:
    5
  • Invites sent:
    0
  • Unanswered invites:
    0
About the client
Member since Feb 25, 2012
  • United Kingdom
    Croydon5:46 PM
  • $4K total spent
    32 hires, 4 active
  • 361 hours

Explore similar jobs on Upwork

How it works

  • Post a job icon
    Create your free profile
    Highlight your skills and experience, show your portfolio, and set your ideal pay rate.
  • Talent comes to you icon
    Work the way you want
    Apply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
  • Payment simplified icon
    Get paid securely
    From contract to payment, we help you work safely and get paid securely.
Want to get started? Create a profile

About Upwork

  • Rating is 4.9 out of 5.
    4.9/5
    (Average rating of clients by professionals)
  • G2 2021
    #1 freelance platform
  • 49,000+
    Signed contract every week
  • $2.3B
    Freelancers earned on Upwork in 2020

Find the best freelance jobs

Growing your career is as easy as creating a free profile and finding work like this that fits your skills.

Trusted by

  • Microsoft Logo
  • Airbnb Logo
  • Bissell Logo
  • GoDaddy Logo