Case study · AI beauty & wellness
Try My StyleFlorian Hurel Hair Couture
In-salon AI skin & scalp diagnostics on premium kiosk hardware.
Computer-vision analysis, structured OpenAI inference, gpt-image-2 visual overlays, hyper-personalised recommendations, React-PDF reports, and WhatsApp delivery—scoped per salon with a superadmin analytics layer across nine locations.
Core stack
01
Executive summary
The Florian Hurel Hair Couture AI Consultation Platform (Try My Style) is a full-stack, in-salon AI experience for personalised skin and scalp diagnostics at point-of-service. It replaces subjective consultations with computer-vision analysis, structured AI inference, and hyper-personalised product recommendations on a premium kiosk-grade touchscreen across Florian Hurel's salon network in India.
This narrative documents product intent, architecture, engineering decisions, operational workflows, and the roadmap to scale the platform to enterprise grade.
02
Business problem
Premium salons often face a gap between client aspiration and consultant capability:
- Skin and scalp assessments are subjective and consultant-dependent
- Recommendations lack scientific grounding visible to the client
- Diagnostic data is not captured or reused across visits
- No unified interface for consultation quality or product performance across the network
- Post-consultation engagement is weak without a report or follow-up mechanism
Try My Style addresses these gaps with one AI-driven consultation layer inside each salon.
03
Product vision
The platform is designed to deliver:
- Clinically credible, camera-based skin and scalp analysis in under two minutes
- AI-personalised product and treatment recommendations grounded in diagnostic data
- Branded, shareable PDF reports via WhatsApp as a post-visit touchpoint
- Premium visual AI overlays that make insights tangible
- A centralised superadmin analytics layer across all salon locations
04
System architecture
High-level map: the kiosk (Next.js) talks HTTPS to a JWT-gated Django REST API; analysis and image generation call OpenAI; media lands on UploadThing; reports leave via WhatsApp; analytics persist for superadmin dashboards.
Platform components
kiosk-appNext.js 14, React, TypeScript, Tailwind CSS, next-intl — questionnaire, camera, results, cart, lead capture.
django-apiDjango, Python, Django REST Framework — JWT `/api`, skin/scalp/admin routes, analytics.
openaigpt-4o-mini (analysis + JSON Schema), gpt-image-2 (8-card skin visualisation, parallel to analysis).
media-pdfUploadThing CDN for captures & AI images; React-PDF off-screen; WhatsApp API for report delivery.
Core architecture traits
- JWT-protected API under `/api` with salon-level authentication
- Salon-scoped data isolation — each kiosk device uses its own Bearer token
- Stateless Django API designed for horizontal scale behind a load balancer
- Client-side PDF via off-screen React-PDF — no server render cost per report
- UploadThing CDN for AI-generated images and captured face photos
- OpenAI structured output (JSON Schema) for deterministic analysis parsing
- Superadmin dashboard with code-gated whitelist (9 authorised salon locations)
Skin analysis flow
Questionnaire → camera → parallel AI → scores → products → PDF.
Scalp analysis flow
Frontal capture → five sections → metrics → wellness → report.
05
Core modules and capabilities
Skin analysis, scalp analysis, AI Look Advisor, Scalp View (microscope), and superadmin analytics—unified in one kiosk application.
06
User journey (skin analysis)
Ten-step lifecycle from kiosk intake to WhatsApp report.
Client at kiosk; stylist opens Skin Analysis.
3-step questionnaire: gender, age, skin type, ingredients, concerns.
Camera capture with oval face guide; retake before proceed.
Proceed → AI scan; gpt-image-2 visualisation starts in parallel with gpt-4o-mini analysis.
Eight scored parameters returned; results carousel shown.
Next → visualisation page (image often ready due to parallel generation).
Follow-up lifestyle questionnaire → AI Expert Tips.
Product recommendations (catalog + AI rank, filterable) → Cart.
Lead capture (name, phone) → PDF generated → WhatsApp delivery.
Thank you → Feedback → Home.
07
AI visualisation engine
The skin visualisation step is the most distinctive product surface—one generative image pass aligned with structured scores.
- Single gpt-image-2 call produces a full 8-card diagnostic overlay (1024×1536)
- Client face photo is the edit input — identity preserved across cards
- Colour-coded overlays per concern (e.g. oiliness, pores, redness) — diagnostic, not beautification
- Generation starts at scan start, parallel to analysis API — cuts perceived wait
- quality="medium" balances ~30–40s generation vs fidelity
- UploadThing hosts the result; URL returned to the kiosk for display
Business impact
- Premium “wow” moment that justifies in-salon AI positioning
- Abstract scores become tangible and credible on screen
- Clear differentiation from standard salon consultations
08
Engineering challenges solved
- Parallel AI: gpt-image-2 visualisation + gpt-4o-mini analysis — no strictly sequential 50s wait
- React temporal dead zone: useCallback dependency ordering fixed for stable scan flow
- Axios 180s timeout on visualisation endpoint vs 60s global default
- Broken-pipe / long-poll UX: heavy work starts early so the client is not blocked on one slow hop
- Client-side React-PDF while user moves through post-result steps
- Dual cameras: normal vs microscope device IDs in localStorage + Settings UI
- Salon-scoped isolation: every request carries Bearer token; ORM queries scoped to salon
- Upload-before-analyse: face image to UploadThing; URL persisted for reports and audit
- JPEG → RGBA PNG normalisation before gpt-image-2 edit (SDK requirement)
09
Security and reliability
Implemented
- JWT-based API authentication per salon device
- Salon-level isolation enforced at the ORM query layer
- Superadmin gated behind separate JWT + salon whitelist (9 access codes)
- Session analytics decoupled from core analysis (non-blocking)
- UploadThing for media persistence — no local disk dependency on kiosks
Recommended hardening
- API rate limiting per salon token
- Upload validation (type, size, malware scanning)
- Secret rotation for OPENAI_API_KEY and UPLOADTHING_SECRET
- OpenAI spend alerts and per-endpoint usage tracking
- Audit log for lead capture and WhatsApp report sends
- Retry / DLQ for failed WhatsApp deliveries
10
Scalability strategy
- Stateless Django — scale horizontally behind a load balancer
- UploadThing absorbs media load; no filesystem coupling
- OpenAI calls async from the user’s perspective on the frontend
- Admin analytics pre-filtered by allowed salon ID set
- Client-side PDF — zero marginal server cost per report
- ALLOWED_SALON_CODES in code — expand per deployment safely
- Future: Celery for AI jobs, Redis catalog cache, WebSocket progress, per-salon cost dashboards
11
Product decision rationale
Why client-side PDF generation?
- Avoids server-side PDF infrastructure cost
- Highly dynamic content (scores, images, products, tips) composes naturally in React
- Off-screen render means PDF is ready by lead capture
Why gpt-image-2 instead of static overlays?
- Static art cannot cover every skin type × concern combination
- Image edit uses the real client face — not a generic mannequin
- One API call yields all eight cards — simpler orchestration
Why parallel generation at scan start?
- Analysis ~15s; visualisation ~35s — sequential would be ~50s
- Parallel caps perceived wait at ~max(15, 35) ≈ 35s
Why a Settings page for cameras?
- Salons use webcam + USB microscope; device IDs change on reconnect
- Persistent localStorage mapping prevents wrong-camera mistakes
- No code deploy to swap hardware at a given desk
12
Database design snapshot
Salon
Device authentication and data scoping
SkinAnalysisResult
Raw AI scores, image URL, recommended products
SkinAnalysisReportToken
Time-limited tokens for PDF report retrieval
SkinAnalysisSession
Analytics per session (lead, demographics, completion)
ScalpAnalysisRecord
Full scalp session analytics
SalonSession
Base session tracking across analysis types
Indexing priorities
- Session `created_at` for date-range analytics
- `salon_id` FK on all analysis records for isolation
- `session_completed` for funnel and completion metrics
13
Deployment and operations
Current setup
Django runserver for local/staging; Next.js on kiosk devices (Electron wrapper or browser kiosk mode). Environment variables include OPENAI_API_KEY, UPLOADTHING_SECRET, and SECRET_KEY.
Recommended production setup
- Backend: Gunicorn + Nginx on VPS or containers (WSGI-compatible)
- Frontend: Next.js standalone build deployed as PWA or Electron
- Database: PostgreSQL (migrate from SQLite for production)
- Media: UploadThing (already CDN-backed)
- CI/CD: GitHub Actions — backend deploy + Next.js artifact per release
Monitoring targets
- OpenAI API error rate and latency per endpoint
- UploadThing upload success rate
- WhatsApp delivery success rate
- Session completion funnel drop-offs
14
Contribution and ownership
Example statements for interviews and portfolio accuracy.
Ownership highlights
- • Full-stack skin analysis flow — frontend state machine + Django pipeline
- • gpt-image-2 skin visualisation engine with parallel generation strategy
- • Scalp section analysis with multi-image upload and per-section scoring
- • Client-side React-PDF reports across skin and scalp modules
- • Superadmin analytics with salon filters and timeseries charts
- • Expert tips inference pipeline (images + questionnaire + analysis summary)
- • UploadThing integration for captures and AI outputs
- • Salon whitelist enforcement on admin analytics endpoints
- • Dual-camera device management (webcam + microscope)
- • AI Look Advisor and Scalp View inside the unified kiosk app
15
Tech stack
Production systems as icon clusters—hover or focus each tile for the technology name.
Kiosk frontend
Next.js 14 kiosk UX, Tailwind, next-intl, parallel AI flows.
Backend API
Django REST, salon-scoped ORM, JWT device auth.
AI & media
Structured outputs, image edit pipeline, CDN-backed uploads.
Delivery & reports
Client-side PDF, WhatsApp handoff, analytics APIs.
16
Metrics and outcomes
Quantified outcomes matter for investors and enterprise buyers—replace template lines with live analytics when available.
Metrics to instrument
- Daily skin and scalp analyses per salon
- Full-flow completion rate (camera → lead capture)
- Lead capture conversion rate
- WhatsApp report delivery success rate
- AI visualisation generation time (target < 40s)
- Product recommendation engagement (cart adds)
- Repeat sessions by phone number
- Expert tips satisfaction ratings
Impact statement templates
- “Parallel AI generation reduced perceived wait from ~50s to ~35s per consultation.”
- “AI-ranked recommendations increased average products viewed per session from N to M.”
- “WhatsApp PDF reports maintained X% open rate as a post-visit retention touchpoint.”
- “Skin visualisation step improved consultation satisfaction from A to B stars.”
17
Product gallery and diagrams
Reserve frames for architecture, flows, kiosk UI, admin analytics, PDF samples, and expert tips. Export at 2× for crisp portfolios.
System architecture
Kiosk → API → OpenAI / CDN · 16:9
Screenshot placeholder
Skin analysis flow
Questionnaire → camera → AI → viz · 16:9
Screenshot placeholder
8-card visualisation sample
gpt-image-2 output · 16:9
Screenshot placeholder
Kiosk home
Entry / module picker · 16:9
Screenshot placeholder
Results dashboard
Score carousel · 16:9
Screenshot placeholder
Superadmin analytics
Network charts · 16:9
Screenshot placeholder
PDF report sample
Redacted client data · 9:16
Screenshot placeholder
Expert tips screen
Personalised guidance · 16:9
Screenshot placeholder
18
Deployment and market validation
Live footprint
Deployed across nine Florian Hurel Hair Couture locations in India—embedded as a core in-salon service, not a standalone consumer app.
- Walkeshwar, Bandra, Waterfield (×2), Juhu, Mumbai
- Pune
- Ahmedabad — Sindhubhavan & Ambli
- Hyderabad — Jubilee Hills
Validation indicators
- Multi-location deployment across nine salons signals enterprise readiness
- Skin + scalp modules prove extensible dual-service architecture
- WhatsApp PDF creates measurable post-visit brand touchpoint
- Superadmin analytics shows network-level operational maturity
19
Roadmap
PHASE 1
Phase 1: Stabilisation and foundation
- Production stack: Gunicorn + PostgreSQL + HTTPS
- Integration tests for all AI paths (skin, scalp, visualisation, expert tips)
- Error monitoring (e.g. Sentry) and alerting
- OpenAI spend tracking and per-endpoint cost attribution
PHASE 2
Phase 2: Operational excellence
- Analytics: funnel visualisation, repeat-client tracking
- Visualisation prompt tuning from real client imagery
- Celery (or similar) for async AI inference off the HTTP cycle
- Structured audit logs for leads and WhatsApp sends
PHASE 3
Phase 3: Scale and intelligence
- Multi-brand / white-label configuration
- Longitudinal profiling by phone across visits
- Live product catalog sync vs static JSON
- Per-location demand analytics (volume, peaks, mix)
- Fine-tuning on Florian Hurel catalog and treatment outcomes
20
Conclusion
Try My Style is not a single feature—it is a coordinated AI product ecosystem spanning kiosk UX, computer vision, generative visualisation, personalised recommendations, automated report delivery, and network-wide analytics. Parallel generation, structured outputs, and client-side PDF are engineering-grade choices that support Florian Hurel's premium positioning.
Next step
Ship an AI product at this bar—with us.
Share flows, compliance needs, or kiosk constraints—we respond with a pragmatic plan.
Get in touch