HaiScan

The AI Hair Scanner with ALL THE information about your hair.

Comment

Inspiration

The hair care industry is saturated with products and conflicting advice. We were inspired to create HaiScan to offer consumers clarity and truly personalized recommendations. Generic quizzes often fall short, so we aimed to leverage the multi-modal capabilities of modern AI to incorporate visual evidence—a physical hair image—alongside self-reported data to provide professional-grade analysis instantly.

What it does

HaiScan guides users through a two-step process to generate a comprehensive hair profile: Goal Selection & Quiz: The user selects a primary goal (e.g., "Repair Damage") and completes a quick questionnaire about their hair type, texture, and routine. Visual Scan: The user uploads a photo of their hair. AI Analysis: The application sends all the combined data (quiz answers + image) to the Gemini 2.5 Flash model. Structured Report: The model returns a highly detailed, machine-readable JSON report containing objective metrics like hair density, porosity scores, shine percentage, and specific health indicators (split ends, breakage, scalp health).

How we built it

Frontend & UX

The user interface is built using Next.js and styled with a modern, dark aesthetic via Tailwind CSS. We utilized custom typography (Inter and Lora) and a defined color palette to create a premium feel. Crucially, we employed Framer Motion to enhance the user experience. This includes smooth screen transitions between the welcome/goal selection phase and the upcoming quiz/upload phase, giving the application a polished, dynamic feel. The "Start Scan" button even features a continuous pulsing arrow animation to encourage interaction.

Backend and AI

The backend is a single Next.js API route (/api/analyze) responsible for handling the multi-modal request: Data Handling: It receives the quiz answers (as JSON) and the hair image (as FormData) from the client. It converts the image into a base64 string, as required for the Gemini API inline data format. Prompt Engineering: We crafted a complex, professional prompt instructing the Gemini 2.5 Flash model to act as an AI trichologist. This prompt required the model to synthesize the textual quiz data (user's self-assessment) with the visual evidence from the image. Structured Output: To ensure the frontend could reliably consume the results, the prompt strictly enforces a detailed, minified JSON schema (including numerical scores for quantifiable metrics like porosity and shine). This eliminated the need for complex natural language parsing on the client side.

Challenges we ran into

Enforcing Strict JSON Output: While powerful, multi-modal LLMs sometimes struggle with strict formatting demands. The biggest challenge was training the model through the prompt to consistently return only the minified JSON object, without surrounding markdown fences (like json) or preamble text. We addressed this by refining the prompt and adding robust cleanup logic in the API handler to slice the response string, ensuring only the raw JSON was parsed. Handling Multi-Modal Input: Successfully bundling the form data (quiz results) and the binary image file into a single FormData object on the client and correctly parsing this complex payload in the Next.js API using req.formData() was a non-trivial implementation task.

Accomplishments that we're proud of

Seamless Multi-Modal Analysis: We achieved a clean, robust integration that allows the AI to perform a holistic analysis based on both structured user data and raw visual input. Professional Data Structure: The rigidly defined JSON output structure for the analysis (hairProfile, hairHealth, scalpHealth, hairLoss categories) is ready for immediate visualization and recommendation generation. Polished User Flow: The use of modern frameworks and animation libraries results in a highly fluid and premium user experience, moving a historically tedious process into a modern, enjoyable digital format.

What we learned

We gained significant experience in: Advanced prompt engineering techniques for domain-specific, quantitative analysis using multi-modal models. Best practices for handling multi-part form data containing both JSON payloads and binary files in Next.js API routes. Leveraging libraries like framer-motion and custom Tailwind configurations to elevate application design beyond standard templates.

What's next for HaiScan

Complete Quiz Implementation: Finish the UI components for the actual question-answering and image upload in Quiz.tsx. Report Visualization: Build a dynamic AnalysisReport.tsx component to beautifully visualize the complex structured data (e.g., using radial charts for health scores, clear icons for condition details). Recommendation Engine: Integrate a second AI layer or a recommendation algorithm to automatically suggest personalized products and routines based on the generated Hair Profile. History Tracking: Implement persistent storage (e.g., database integration) to allow users to save and compare their HaiScan reports over time, tracking their hair journey.

Share this project:

Updates