← Oferty

React Developer — AI Nail Image Detection & Realistic Colour Overlay

Budżet: $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.
Otwórz na Upwork