10d:I[144680,["$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$91","$81","$7f","$80","$92","$86","$82","$83","$8b","$8e","$93","$88","$8a","$94","$8f","$84","$89","$8c","$95","$8d","$96","$97","$98","$87","$99"],"S"] 115:"ExplicitChatIdProvider" 116:I[903690,["$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$91","$81","$7f","$80","$92","$86","$82","$83","$8b","$8e","$93","$88","$8a","$94","$8f","$84","$89","$8c","$95","$8d","$96","$97","$98","$87","$99"],"$115"] 117:I[838238,["$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$91","$81","$7f","$80","$92","$86","$82","$83","$8b","$8e","$93","$88","$8a","$94","$8f","$84","$89","$8c","$95","$8d","$96","$97","$98","$87","$99"],"SWRDataProvider"] 119:[] 11a:[["b_Ft23LlOI6rP",null],["b_ytWIBMKGFhR",null],["b_J6zfCm5zw8o",null]] 11b:[["b_Ft23LlOI6rP",{"templateVersionId":null,"templateCanonId":null}],["b_ytWIBMKGFhR",{"templateVersionId":null,"templateCanonId":null}],["b_J6zfCm5zw8o",{"templateVersionId":null,"templateCanonId":null}]] 11c:[["wEe8o3wMZwp","$D2025-04-30T10:06:13.401Z"],["b_q4lL5QpVHvC","$D2025-05-02T13:04:11.448Z"],["b_CF1PsLbqzCQ","$D2025-05-02T13:05:41.120Z"],["b_g7vz6Uvbp7z","$D2025-05-02T13:07:16.728Z"],["b_vpiQtkMx6p9","$D2025-05-02T13:11:34.410Z"],["b_S0gVrSuLj0v","$D2025-05-03T06:16:09.450Z"],["b_p8hN9w0bL2q","$D2025-05-05T05:29:10.589Z"],["b_80UhbTPgkut","$D2025-05-05T05:32:22.461Z"],["b_u1S0UlESStB","$D2025-05-05T05:40:26.294Z"],["b_mAx3lZw9Q4e","$D2025-05-05T06:00:16.532Z"],["b_bppG7aG5JWs","$D2025-05-05T06:07:14.765Z"],["b_qHmTLnZj6Wp","$D2025-05-06T05:16:59.059Z"],["b_UWn6Ccj4hz5","$D2025-05-06T05:44:22.633Z"],["b_AvuoFBwvThd","$D2025-05-06T05:47:30.604Z"],["b_gsFcEKpTkGM","$D2025-05-06T05:54:26.855Z"],["b_el0y3gFqd47","$D2025-05-06T10:27:22.597Z"],["b_SiNvukcqo9n","$D2025-05-06T10:33:03.481Z"],["b_xOKHrfDUtDm","$D2025-05-07T08:59:32.195Z"],["b_jHzjS6NKoZA","$D2025-05-07T09:06:17.351Z"],["b_cs6dQzgWGkm","$D2025-05-07T09:14:00.834Z"],["b_nWBxpmeSYb4","$D2025-05-08T10:07:23.865Z"],["b_c9v44FftWYl","$D2025-05-08T10:09:56.844Z"],["b_uyrkdMBCuwY","$D2025-05-08T10:13:03.891Z"],["b_gTk6W5yI9w3","$D2025-05-08T10:14:43.809Z"],["b_zcWD3Z3BSWM","$D2025-05-13T06:56:37.555Z"],["b_q3pSPHmqtpF","$D2025-05-13T06:59:31.534Z"],["b_YaicunDuSzv","$D2025-05-13T07:03:26.715Z"],["b_q6cN8UsNe4i","$D2025-05-13T07:07:11.985Z"],["b_JgFaNubjHGS","$D2025-05-13T07:12:48.441Z"],["b_i10w6pX2bCx","$D2025-05-13T07:15:59.987Z"],["b_xKCueMKlnME","$D2025-05-13T07:19:35.444Z"],["b_yp4M8lQcn1U","$D2025-05-13T07:23:14.528Z"],["b_JQRBqWeHUFD","$D2025-05-13T07:26:28.726Z"],["b_1bXhN514i3A","$D2025-05-13T07:29:56.894Z"],["b_0bj7IUSzLof","$D2025-05-13T07:57:15.355Z"],["b_ppB3UZpifon","$D2025-05-13T08:12:11.555Z"],["b_5G1uUr4lxTx","$D2025-05-13T08:18:31.934Z"],["b_dt0qD7WLA0f","$D2025-05-13T08:39:11.834Z"],["b_2AzspfQcKMo","$D2025-05-13T08:53:51.828Z"],["b_Py2WNj2Mutj","$D2025-05-13T08:56:39.137Z"],["b_1PR2w9cz2Bi","$D2025-05-13T09:05:27.559Z"],["b_Ttqza3tzxT8","$D2025-05-13T09:06:43.133Z"],["b_hfGRzXckdoz","$D2025-05-13T09:08:26.599Z"],["b_8ipiq4mP3Lz","$D2025-05-13T09:10:16.395Z"],["b_eD7LG2yopcb","$D2025-05-13T09:11:27.173Z"],["b_ONm3ME78p38","$D2025-05-13T09:23:33.715Z"],["b_V6qg60Ru3Xj","$D2025-05-13T09:32:37.103Z"],["b_a2AyIBnVtsg","$D2025-05-13T09:35:05.313Z"],["b_38hJEwArerJ","$D2025-05-15T06:02:29.675Z"],["b_EUvpkyO6gEd","$D2025-05-15T06:15:16.437Z"],["b_JE7GzyfWzZZ","$D2025-05-15T10:28:11.747Z"],["b_EmpANwEKSzB","$D2025-05-15T10:50:44.578Z"],["b_UHl1EWEZ2vK","$D2025-05-15T10:57:00.099Z"],["b_oJt6pcRouTN","$D2025-05-15T11:05:29.788Z"],["b_KbQ8xPkvbq5","$D2025-05-16T15:59:20.995Z"],["b_chtlTuXBKSn","$D2025-05-16T16:06:26.286Z"],["b_Mq9pcRgpEbV","$D2025-05-16T16:11:18.938Z"],["b_szoWIauenWQ","$D2025-05-16T16:19:34.438Z"],["b_ktJgKGvqq40","$D2025-05-16T16:42:37.826Z"],["b_OpJWrnzH6Ow","$D2025-06-02T12:09:28.883Z"],["b_bbu0KDrZ5yj","$D2025-06-03T05:09:40.834Z"],["b_xxCKvsZAJiT","$D2025-06-03T05:13:13.400Z"],["b_Wb6O8OSqC6y","$D2025-06-03T05:20:56.392Z"],["b_0BvQ8YYyAao","$D2025-06-03T05:41:52.240Z"],["b_Ft23LlOI6rP","$D2025-06-03T05:43:47.509Z"],["b_ytWIBMKGFhR","$D2025-06-09T06:49:04.320Z"],["b_J6zfCm5zw8o","$D2025-06-09T06:57:40.352Z"]] 11d:[["b_Ft23LlOI6rP",false],["b_ytWIBMKGFhR",false],["b_J6zfCm5zw8o",false]] 11e:[["b_Ft23LlOI6rP","$undefined"],["b_ytWIBMKGFhR","$undefined"],["b_J6zfCm5zw8o","$undefined"]] 11f:[["b_Ft23LlOI6rP",null],["b_ytWIBMKGFhR",null],["b_J6zfCm5zw8o",null]] 120:[["b_Ft23LlOI6rP",true],["b_ytWIBMKGFhR",true],["b_J6zfCm5zw8o",true]] 121:[["b_Ft23LlOI6rP",true],["b_ytWIBMKGFhR",true],["b_J6zfCm5zw8o",true]] 122:[] 123:T40e,The user has provided an image showing a glass morphism design with health metrics displayed. The image shows cards with a translucent, frosted glass effect with rounded corners displaying "BLOOD GLUCOSE" information. The background is blurred and the cards have a semi-transparent appearance with subtle borders, creating that modern glass morphism aesthetic. The user wants me to add similar glass morphism backgrounds behind text boxes in the full body scan screens, but not where they already exist (like in the onboarding flow). I need to update the scan progress component to add glass morphism styling to text elements that don't already have it. Looking at the scan progress component, I can see there are several areas where text is displayed without glass morphism backgrounds: - The scan title and progress information - The metric labels and descriptions - The completion messages - Various status texts I should add glass morphism styling to these elements while being careful not to duplicate it where it already exists.124:Tcd449,[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/ethereal-dust.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ethereal-dust-yQOjKeTQlhZb8RuVq33hXNcLPudo4K.png" isMerged="true" [V0_FILE]typescriptreact:file="components/widgets/clock.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" interface ClockProps { compact?: boolean } export default function Clock({ compact = false }: ClockProps) { const [date, setDate] = useState(new Date()) useEffect(() => { const timer = setInterval(() => { setDate(new Date()) }, 1000) return () => { clearInterval(timer) } }, []) const formatTime = (date: Date) => { return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: true, }) } const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { weekday: compact ? "short" : "long", month: compact ? "short" : "long", day: "numeric", }) } if (compact) { return (

{formatTime(date)}

{formatDate(date)}

) } return (

{formatTime(date)} {formatDate(date)}

) } [V0_FILE]typescriptreact:file="components/widgets/weather.tsx" isMerged="true" "use client" import { useState } from "react" import { Cloud, Sun, CloudRain, CloudSnow, CloudLightning } from "lucide-react" import { motion } from "framer-motion" interface WeatherProps { compact?: boolean } export default function Weather({ compact = false }: WeatherProps) { const [weather, setWeather] = useState({ temp: 22, condition: "Partly Cloudy", icon: "cloud", high: 25, low: 18, }) // In a real implementation, you would fetch weather data from an API const getWeatherIcon = (condition: string) => { switch (condition.toLowerCase()) { case "sunny": return case "rainy": return case "snowy": return case "stormy": return default: return } } if (compact) { return (

{getWeatherIcon(weather.condition)}

{weather.temp}°C

{weather.condition}

) } return (

{weather.temp}°C {weather.condition}

{getWeatherIcon(weather.condition)}

H: {weather.high}°C L: {weather.low}°C

) } [V0_FILE]typescriptreact:file="components/user-detection-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" export default function UserDetectionDemo() { const [stage, setStage] = useState<"idle" | "detecting" | "detected" | "scanning" | "complete">("idle") const [scanProgress, setScanProgress] = useState(0) const [metrics, setMetrics] = useState({ heartRate: { value: null, scanning: false }, bodyTemp: { value: null, scanning: false }, hydration: { value: null, scanning: false }, stress: { value: null, scanning: false }, sleep: { value: null, scanning: false }, weight: { value: null, scanning: false }, }) // Simulate the user detection and scanning process const simulateUserDetection = () => { // Reset state setStage("detecting") setScanProgress(0) setMetrics({ heartRate: { value: null, scanning: false }, bodyTemp: { value: null, scanning: false }, hydration: { value: null, scanning: false }, stress: { value: null, scanning: false }, sleep: { value: null, scanning: false }, weight: { value: null, scanning: false }, }) // Step 1: Detecting user setTimeout(() => { setStage("detected") // Step 2: Start scanning after user is detected setTimeout(() => { setStage("scanning") // Start progress bar const progressInterval = setInterval(() => { setScanProgress((prev) => { if (prev >= 100) { clearInterval(progressInterval) return 100 } return prev + 1 }) }, 50) // Start scanning metrics with delays setTimeout(() => { setMetrics((prev) => ({ ...prev, heartRate: { value: 72, scanning: true }, })) }, 500) setTimeout(() => { setMetrics((prev) => ({ ...prev, bodyTemp: { value: "36.7", scanning: true }, })) }, 1200) setTimeout(() => { setMetrics((prev) => ({ ...prev, hydration: { value: 85, scanning: true }, })) }, 2000) setTimeout(() => { setMetrics((prev) => ({ ...prev, stress: { value: 35, scanning: true }, })) }, 2800) // Complete scan setTimeout(() => { setMetrics((prev) => ({ heartRate: { value: 72, scanning: false }, bodyTemp: { value: "36.7", scanning: false }, hydration: { value: 85, scanning: false }, stress: { value: 35, scanning: false }, sleep: { value: "7.5", scanning: false }, weight: { value: "70.5", scanning: false }, })) setStage("complete") }, 5000) }, 1500) }, 2000) } return (

Smart Mirror User Detection Demo

{stage === "idle" && (

No user detected. Stand in front of the mirror.

)} {stage === "detecting" && (

Detecting user...

Please stand still

)} {stage === "detected" && (

User detected!

Preparing health scan...

)} {stage === "scanning" && (

{scanProgress}%

Real-Time Scanning

{Object.entries(metrics).map(([key, metric]) => { if (!metric.scanning && metric.value === null) return null let color = "blue-400" let unit = "" switch (key) { case "heartRate": color = "red-400" unit = " bpm" break case "bodyTemp": color = "orange-400" unit = "°C" break case "hydration": color = "blue-400" unit = "%" break case "stress": color = "yellow-400" unit = "" break case "sleep": color = "purple-400" unit = "h" break case "weight": color = "green-400" unit = "kg" break } return (

{key.replace(/([A-Z])/g, " $1").trim()}

{metric.value !== null ? metric.value + unit : "..."} {metric.scanning && }

) })}

)} {stage === "complete" && (

Scan Complete

View your health insights

)}

) } [V0_FILE]typescriptreact:file="components/health/health-scanner.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, AnimatePresence, useAnimationControls } from "framer-motion" import type { ScanningMetrics } from "../mirror-dashboard" interface HealthScannerProps { scanning: boolean scanComplete: boolean scanningMetrics: ScanningMetrics } export default function HealthScanner({ scanning, scanComplete, scanningMetrics }: HealthScannerProps) { const [scanPhase, setScanPhase] = useState("") const [showCompletionAnimation, setShowCompletionAnimation] = useState(false) const [showResults, setShowResults] = useState(false) const particlesRef = useRef(null) const circleControls = useAnimationControls() const bodyControls = useAnimationControls() // Update scan phase based on time useEffect(() => { if (!scanning) { setScanPhase("") return } const phases = [ "Initializing scan...", "Processing...", "Analyzing data...", "Generating health profile...", "Finalizing results...", ] let currentPhase = 0 const phaseInterval = setInterval(() => { currentPhase = (currentPhase + 1) % phases.length setScanPhase(phases[currentPhase]) }, 1000) return () => clearInterval(phaseInterval) }, [scanning]) // Handle scan completion animation useEffect(() => { if (scanning) { setShowCompletionAnimation(false) setShowResults(false) } else if (scanComplete && !showCompletionAnimation) { // Start completion animation sequence setShowCompletionAnimation(true) // Animate the body silhouette bodyControls.start({ opacity: [1, 0.7, 0.3, 0], scale: [1, 1.05, 1.1, 0], transition: { duration: 0.8 }, }) // Animate the circles circleControls.start({ scale: [1, 1.2, 1.5], opacity: [1, 0.8, 0], transition: { duration: 0.8 }, }) // Show results after animation completes setTimeout(() => { setShowCompletionAnimation(false) setShowResults(true) }, 2000) } }, [scanning, scanComplete, showCompletionAnimation, circleControls, bodyControls]) // Create particles effect const createParticles = () => { if (!particlesRef.current) return const container = particlesRef.current container.innerHTML = "" for (let i = 0; i < 100; i++) { const particle = document.createElement("div") particle.className = "absolute rounded-full" // Randomize particle properties const size = Math.random() * 6 + 2 const color = Math.random() > 0.5 ? "bg-blue-400" : "bg-green-400" const opacity = Math.random() * 0.7 + 0.3 const startX = 50 + (Math.random() * 40 - 20) const startY = 50 + (Math.random() * 40 - 20) const angle = Math.random() * Math.PI * 2 const distance = Math.random() * 100 + 50 const duration = Math.random() * 1.5 + 1 const delay = Math.random() * 0.5 // Set particle styles particle.style.width = `${size}px` particle.style.height = `${size}px` particle.classList.add(color) particle.style.opacity = opacity.toString() particle.style.left = `calc(${startX}% - ${size / 2}px)` particle.style.top = `calc(${startY}% - ${size / 2}px)` // Calculate end position const endX = startX + Math.cos(angle) * distance const endY = startY + Math.sin(angle) * distance // Animate the particle particle.animate( [ { transform: "scale(0)", opacity: opacity }, { transform: "scale(1)", opacity: opacity, offset: 0.2 }, { transform: "scale(0.8)", opacity: 0, left: `calc(${endX}% - ${size / 2}px)`, top: `calc(${endY}% - ${size / 2}px)`, }, ], { duration: duration * 1000, delay: delay * 1000, easing: "cubic-bezier(0.1, 0.8, 0.2, 1)", fill: "forwards", }, ) container.appendChild(particle) } } // Trigger particles effect when completion animation starts useEffect(() => { if (showCompletionAnimation) { createParticles() } }, [showCompletionAnimation]) return (

{!scanning && !scanComplete ? (

Ready to Scan Click "Start Health Scan" to begin ) : scanning ? ( {/* Scanning animation */}

{/* Body silhouette with scan line */}

{/* Scanning line animation */}

{/* Scan phase indicator */}

{scanPhase}

Scanning in Progress Please remain still while we analyze your health metrics {/* Scan particles effect */}

{Array.from({ length: 20 }).map((_, i) => ( ))}

) : showCompletionAnimation ? ( {/* Completion animation */}

{/* Animated circles */} {/* Body silhouette that fades out */}

{/* Particles container */}

{/* Glowing orb that appears */}

Analysis Complete {/* Data processing visualization */} Processing health data... ) : ( Scan Complete View your health insights {/* Health metrics summary */} {Object.entries(scanningMetrics) .slice(0, 4) .map(([key, metric], index) => { if (metric.value === null) return null let color = "blue-400" const label = key.replace(/([A-Z])/g, " $1").trim() const value = metric.value let unit = "" switch (key) { case "heartRate": color = "red-400" unit = " bpm" break case "bodyTemp": color = "orange-400" unit = "°C" break case "hydration": color = "blue-400" unit = "%" break case "stress": color = "yellow-400" break } return ( {value} {unit} {label} ) })} )}

) } [V0_FILE]typescriptreact:file="components/history/scan-history.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight, Calendar, BarChart3, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import HistoryChart from "./history-chart" import HistoryTable from "./history-table" import HistoryComparison from "./history-comparison" import type { HistoricalScan } from "../mirror-dashboard" interface ScanHistoryProps { historicalScans: HistoricalScan[] onBack: () => void } export default function ScanHistory({ historicalScans, onBack }: ScanHistoryProps) { const [selectedScanIndex, setSelectedScanIndex] = useState( historicalScans.length > 0 ? historicalScans.length - 1 : null, ) const [comparisonScanIndex, setComparisonScanIndex] = useState(null) const [viewMode, setViewMode] = useState<"single" | "compare">("single") // Reset comparison when switching to single view useEffect(() => { if (viewMode === "single") { setComparisonScanIndex(null) } }, [viewMode]) // If no scans are available if (historicalScans.length === 0) { return (

No Scan History

Complete your first scan to start tracking your health over time.

) } const selectedScan = selectedScanIndex !== null ? historicalScans[selectedScanIndex] : null const comparisonScan = comparisonScanIndex !== null ? historicalScans[comparisonScanIndex] : null const handlePreviousScan = () => { if (selectedScanIndex !== null && selectedScanIndex > 0) { setSelectedScanIndex(selectedScanIndex - 1) } } const handleNextScan = () => { if (selectedScanIndex !== null && selectedScanIndex < historicalScans.length - 1) { setSelectedScanIndex(selectedScanIndex + 1) } } const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", }) } return (

{/* Header */}

Scan History

{/* Scan selector */}

{selectedScan && (

Scan {selectedScanIndex + 1} of {historicalScans.length}

{formatDate(selectedScan.date)}

)}

{/* Comparison selector (only in compare mode) */} {viewMode === "compare" && (

Compare with:

{historicalScans.map((scan, index) => { if (index === selectedScanIndex) return null return ( ) })}

)} {/* Main content */}

Charts Details {viewMode === "single" ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="components/history/history-chart.tsx" isMerged="true" "use client" import { useState } from "react" import { Heart, Thermometer, Droplets, Brain, Scale } from "lucide-react" import type { HistoricalScan } from "../mirror-dashboard" interface HistoryChartProps { historicalScans: HistoricalScan[] selectedScanIndex: number | null } export default function HistoryChart({ historicalScans, selectedScanIndex }: HistoryChartProps) { const [selectedMetric, setSelectedMetric] = useState< "heartRate" | "bodyTemp" | "hydration" | "stress" | "sleep" | "weight" >("heartRate") // Get the data for the selected metric const chartData = historicalScans.map((scan) => { let value: number switch (selectedMetric) { case "heartRate": value = scan.data.heartRate break case "bodyTemp": value = Number.parseFloat(scan.data.bodyTemp) break case "hydration": value = scan.data.hydration break case "stress": value = scan.data.stress break case "sleep": value = scan.data.sleep break case "weight": value = Number.parseFloat(scan.data.weight) break } return { date: scan.date, value, } }) // Find min and max values for the chart const values = chartData.map((d) => d.value) const minValue = Math.min(...values) const maxValue = Math.max(...values) const range = maxValue - minValue const padding = range * 0.1 // Add 10% padding const chartMin = Math.max(0, minValue - padding) const chartMax = maxValue + padding // Get metric details const getMetricDetails = () => { switch (selectedMetric) { case "heartRate": return { name: "Heart Rate", unit: "bpm", color: "red", icon: , } case "bodyTemp": return { name: "Body Temperature", unit: "°C", color: "orange", icon: , } case "hydration": return { name: "Hydration", unit: "%", color: "blue", icon: , } case "stress": return { name: "Stress Level", unit: "", color: "yellow", icon: , } case "sleep": return { name: "Sleep", unit: "hours", color: "purple", icon: ( ), } case "weight": return { name: "Weight", unit: "kg", color: "green", icon: , } } } const metricDetails = getMetricDetails() // Format date for display const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) } return (

{/* Metric selector */}

{(["heartRate", "bodyTemp", "hydration", "stress", "sleep", "weight"] as const).map((metric) => { const details = getMetricDetails() const isSelected = metric === selectedMetric const colorClass = `text-${details.color}-300` const bgClass = isSelected ? `bg-${details.color}-500/20` : "bg-white/5" const borderClass = isSelected ? `border-${details.color}-500/50` : "border-white/10" return ( ) })}

{/* Chart */}

{metricDetails.icon}

{metricDetails.name} History

{/* Y-axis labels */}

{chartMax.toFixed(1)}

{((chartMax + chartMin) / 2).toFixed(1)}

{chartMin.toFixed(1)}

{/* Chart area */}

{/* Horizontal grid lines */}

{/* Data points and lines */}

{/* X-axis labels */}

{chartData.map((point, i) => (

{formatDate(point.date)}

))}

{/* Current value */} {selectedScanIndex !== null && (

Current Value

{chartData[selectedScanIndex].value.toFixed(1)} {metricDetails.unit}

{selectedScanIndex > 0 && (

Change

chartData[selectedScanIndex - 1].value ? "text-green-400" : chartData[selectedScanIndex].value < chartData[selectedScanIndex - 1].value ? "text-red-400" : "text-white/70" } > {chartData[selectedScanIndex].value > chartData[selectedScanIndex - 1].value ? "+" : ""} {(chartData[selectedScanIndex].value - chartData[selectedScanIndex - 1].value).toFixed(1)} {metricDetails.unit}

)}

) } [V0_FILE]typescriptreact:file="components/history/history-table.tsx" isMerged="true" "use client" import { Heart, Thermometer, Droplets, Brain, Scale } from "lucide-react" import type { HistoricalScan } from "../mirror-dashboard" interface HistoryTableProps { historicalScans: HistoricalScan[] selectedScanIndex: number | null comparisonScanIndex: number | null viewMode: "single" | "compare" } export default function HistoryTable({ historicalScans, selectedScanIndex, comparisonScanIndex, viewMode, }: HistoryTableProps) { if (selectedScanIndex === null) return null const selectedScan = historicalScans[selectedScanIndex] const comparisonScan = comparisonScanIndex !== null ? historicalScans[comparisonScanIndex] : null const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", }) } // Calculate difference between two values const calculateDifference = (current: number, previous: number) => { const diff = current - previous return { value: diff.toFixed(1), isPositive: diff > 0, isNegative: diff < 0, isNeutral: diff === 0, } } // Determine if a change is good or bad const isGoodChange = (metric: string, diff: number) => { switch (metric) { case "heartRate": // Assume moving closer to 70 is good return ( Math.abs(selectedScan.data.heartRate - 70) < Math.abs(Number.parseFloat(comparisonScan?.data.heartRate.toString() || "0") - 70) ) case "bodyTemp": // Assume moving closer to 37 is good return ( Math.abs(Number.parseFloat(selectedScan.data.bodyTemp) - 37) < Math.abs(Number.parseFloat(comparisonScan?.data.bodyTemp || "0") - 37) ) case "hydration": // Higher is better return diff > 0 case "stress": // Lower is better return diff < 0 case "sleep": // Closer to 8 hours is better return ( Math.abs(selectedScan.data.sleep - 8) < Math.abs(Number.parseFloat(comparisonScan?.data.sleep.toString() || "0") - 8) ) case "weight": // Neutral (depends on goals) return false default: return false } } return (

Detailed Metrics

{viewMode === "single" ? `Scan from ${formatDate(selectedScan.date)}` : `Comparing ${formatDate(selectedScan.date)} with ${ comparisonScan ? formatDate(comparisonScan.date) : "..." }`}

{viewMode === "compare" && comparisonScan && ( <> )} {viewMode === "compare" && comparisonScan && ( <> )} {viewMode === "compare" && comparisonScan && ( <> )} {viewMode === "compare" && comparisonScan && ( <> )} {viewMode === "compare" && comparisonScan && ( <> )} {viewMode === "compare" && comparisonScan && ( <> )} {viewMode === "compare" && comparisonScan && ( <> )}

Metric	Current Value	Previous Value	Change
Heart Rate	{selectedScan.data.heartRate} bpm	{comparisonScan.data.heartRate} bpm	{(() => { const diff = calculateDifference(selectedScan.data.heartRate, comparisonScan.data.heartRate) const good = isGoodChange("heartRate", Number.parseFloat(diff.value)) return ( {diff.isPositive ? "+" : ""} {diff.value} bpm ) })()}
Body Temperature	{selectedScan.data.bodyTemp}°C	{comparisonScan.data.bodyTemp}°C	{(() => { const diff = calculateDifference( Number.parseFloat(selectedScan.data.bodyTemp), Number.parseFloat(comparisonScan.data.bodyTemp), ) const good = isGoodChange("bodyTemp", Number.parseFloat(diff.value)) return ( {diff.isPositive ? "+" : ""} {diff.value}°C ) })()}
Hydration	{selectedScan.data.hydration}%	{comparisonScan.data.hydration}%	{(() => { const diff = calculateDifference(selectedScan.data.hydration, comparisonScan.data.hydration) const good = isGoodChange("hydration", Number.parseFloat(diff.value)) return ( {diff.isPositive ? "+" : ""} {diff.value}% ) })()}
Stress Level	{selectedScan.data.stress}	{comparisonScan.data.stress}	{(() => { const diff = calculateDifference(selectedScan.data.stress, comparisonScan.data.stress) const good = isGoodChange("stress", Number.parseFloat(diff.value)) return ( {diff.isPositive ? "+" : ""} {diff.value} ) })()}
Sleep	{selectedScan.data.sleep} hours	{comparisonScan.data.sleep} hours	{(() => { const diff = calculateDifference(selectedScan.data.sleep, comparisonScan.data.sleep) const good = isGoodChange("sleep", Number.parseFloat(diff.value)) return ( {diff.isPositive ? "+" : ""} {diff.value} hours ) })()}
Weight	{selectedScan.data.weight} kg	{comparisonScan.data.weight} kg	{(() => { const diff = calculateDifference( Number.parseFloat(selectedScan.data.weight), Number.parseFloat(comparisonScan.data.weight), ) // Weight change is neutral (depends on goals) return ( {diff.isPositive ? "+" : ""} {diff.value} kg ) })()}

) } [V0_FILE]typescriptreact:file="components/history/history-comparison.tsx" isMerged="true" "use client" import { Heart, Thermometer, Droplets, Brain, Scale, TrendingUp, TrendingDown } from "lucide-react" import type { HistoricalScan } from "../mirror-dashboard" interface HistoryComparisonProps { selectedScan: HistoricalScan | null comparisonScan: HistoricalScan | null formatDate: (date: Date) => string } export default function HistoryComparison({ selectedScan, comparisonScan, formatDate }: HistoryComparisonProps) { if (!selectedScan) return null // If no comparison scan is selected if (!comparisonScan) { return (

Select a scan to compare with {formatDate(selectedScan.date)}

Use the "Compare with" selector above to choose a scan

) } // Calculate percentage change const calculateChange = (current: number, previous: number) => { if (previous === 0) return { percent: 0, isIncrease: false } const change = ((current - previous) / previous) * 100 return { percent: Math.abs(change).toFixed(1), isIncrease: change > 0, } } // Determine if a change is good or bad const isGoodChange = (metric: string, current: number, previous: number) => { switch (metric) { case "heartRate": // Assume moving closer to 70 is good return Math.abs(current - 70) < Math.abs(previous - 70) case "bodyTemp": // Assume moving closer to 37 is good return Math.abs(current - 37) < Math.abs(previous - 37) case "hydration": // Higher is better return current > previous case "stress": // Lower is better return current < previous case "sleep": // Closer to 8 hours is better return Math.abs(current - 8) < Math.abs(previous - 8) case "weight": // Neutral (depends on goals) return false default: return false } } // Comparison metrics const metrics = [ { name: "Heart Rate", key: "heartRate", icon: , current: selectedScan.data.heartRate, previous: comparisonScan.data.heartRate, unit: "bpm", color: "red", }, { name: "Body Temperature", key: "bodyTemp", icon: , current: Number.parseFloat(selectedScan.data.bodyTemp), previous: Number.parseFloat(comparisonScan.data.bodyTemp), unit: "°C", color: "orange", }, { name: "Hydration", key: "hydration", icon: , current: selectedScan.data.hydration, previous: comparisonScan.data.hydration, unit: "%", color: "blue", }, { name: "Stress Level", key: "stress", icon: , current: selectedScan.data.stress, previous: comparisonScan.data.stress, unit: "", color: "yellow", }, { name: "Sleep", key: "sleep", icon: ( ), current: selectedScan.data.sleep, previous: comparisonScan.data.sleep, unit: "hours", color: "purple", }, { name: "Weight", key: "weight", icon: , current: Number.parseFloat(selectedScan.data.weight), previous: Number.parseFloat(comparisonScan.data.weight), unit: "kg", color: "green", }, ] return (

Comparison

{formatDate(selectedScan.date)} vs {formatDate(comparisonScan.date)}

{metrics.map((metric) => { const change = calculateChange(metric.current, metric.previous) const isGood = isGoodChange(metric.key, metric.current, metric.previous) const diff = metric.current - metric.previous return (

{metric.icon} {metric.name}

{diff !== 0 && (

{change.isIncrease ? ( ) : ( )} {change.percent}%

)}

Current

{metric.current} {metric.unit}

0 ? isGood ? "text-green-400" : "text-red-400" : diff < 0 ? isGood ? "text-green-400" : "text-red-400" : "text-white/50" }`} > {diff > 0 ? "+" : ""} {diff.toFixed(1)} {metric.unit}

{metric.previous} {metric.unit}

{/* Progress bar comparison */}

) })}

) } [V0_FILE]typescriptreact:file="components/trends/trend-notification.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { BarChart2, X } from "lucide-react" import { Button } from "@/components/ui/button" interface TrendNotificationProps { visible: boolean onView: () => void onDismiss: () => void } export default function TrendNotification({ visible, onView, onDismiss }: TrendNotificationProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { if (visible) { // Add a small delay before showing the notification const timer = setTimeout(() => { setIsVisible(true) }, 1500) return () => clearTimeout(timer) } else { setIsVisible(false) } }, [visible]) return ( {isVisible && (

Trend Analysis Ready

New insights from your latest scan are available

)} ) } [V0_FILE]typescriptreact:file="components/camera/real-time-output.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { RefreshCw, History, ArrowRight, BarChart2 } from "lucide-react" import { Button } from "@/components/ui/button" import type { ScanningMetrics } from "../mirror-dashboard" interface RealTimeOutputProps { active: boolean scanning: boolean scanComplete: boolean scanningMetrics: ScanningMetrics onRescan: () => void onViewHistory: () => void scanProgress: number onViewTrends: () => void } export default function RealTimeOutput({ active, scanning, scanComplete, scanningMetrics, onRescan, onViewHistory, scanProgress, onViewTrends, }: RealTimeOutputProps) { const [currentMetric, setCurrentMetric] = useState(null) const [showControls, setShowControls] = useState(true) // Update current metric based on which one is scanning useEffect(() => { if (!scanning) { setCurrentMetric(null) return } // Find the metric that's currently scanning const activeMetric = Object.entries(scanningMetrics).find(([_, data]) => data.scanning) setCurrentMetric(activeMetric ? activeMetric[0] : null) }, [scanning, scanningMetrics]) // Auto-hide controls after inactivity during scan useEffect(() => { if (!active) return let timeout: NodeJS.Timeout const resetTimer = () => { clearTimeout(timeout) setShowControls(true) if (scanning) { timeout = setTimeout(() => { setShowControls(false) }, 5000) } } resetTimer() window.addEventListener("mousemove", resetTimer) window.addEventListener("click", resetTimer) return () => { clearTimeout(timeout) window.removeEventListener("mousemove", resetTimer) window.removeEventListener("click", resetTimer) } }, [active, scanning]) if (!active) return null // Helper to get the color and icon for different metrics const getMetricInfo = (metric: string) => { switch (metric) { case "heartRate": return { color: "red", icon: "♥", label: "Heart Rate" } case "bodyTemp": return { color: "orange", icon: "◉", label: "Body Temperature" } case "hydration": return { color: "blue", icon: "◈", label: "Hydration" } case "stress": return { color: "yellow", icon: "◎", label: "Stress Level" } case "sleep": return { color: "purple", icon: "☾", label: "Sleep Quality" } case "weight": return { color: "green", icon: "◯", label: "Weight" } default: return { color: "blue", icon: "●", label: "Scanning" } } } // Render the appropriate unit for each metric const renderUnit = (metric: string, value: any) => { switch (metric) { case "heartRate": return `${value} bpm` case "bodyTemp": return `${value}°C` case "hydration": return `${value}%` case "stress": return `${value}` case "sleep": return `${value}h` case "weight": return `${value}kg` default: return value } } return (

{/* Real-time output overlay */} {scanning && ( {/* Top status indicators */} {/* Scan status */}

Real-Time Scan {Math.round(scanProgress)}%

{/* Controls (conditionally visible) */} {showControls && ( )} {/* Currently scanning metric highlight */} {currentMetric && (

{getMetricInfo(currentMetric).icon}

)} {/* Bottom metrics display */}

Real-Time Metrics {scanComplete && ( )}

{Object.entries(scanningMetrics).map(([key, metric]) => { const { color, icon, label } = getMetricInfo(key) return (

{icon} {label} {metric.scanning && (

)}

{metric.value !== null ? ( renderUnit(key, metric.value) ) : ( -- )}

) })}

{scanComplete && ( )}

)} {/* Scan complete overlay confirmation */} {scanComplete && !scanning && (

Scan Complete

All metrics captured successfully

)}

) } [V0_FILE]typescriptreact:file="components/trends/dashboard-trend-panel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { ArrowUpRight, ArrowDownRight, ArrowRight, BarChart2, Maximize2 } from "lucide-react" import { Button } from "@/components/ui/button" import type { HistoricalScan } from "../mirror-dashboard" interface DashboardTrendPanelProps { historicalScans: HistoricalScan[] latestScan: HistoricalScan | null onExpandView: () => void } export default function DashboardTrendPanel({ historicalScans, latestScan, onExpandView }: DashboardTrendPanelProps) { const [selectedMetric, setSelectedMetric] = useState< "heartRate" | "bodyTemp" | "hydration" | "stress" | "sleep" | "weight" >("heartRate") const [insights, setInsights] = useState>({}) const [healthScore, setHealthScore] = useState(0) const [healthScoreChange, setHealthScoreChange] = useState(0) // Calculate trends and insights when scans change useEffect(() => { if (historicalScans.length < 2 || !latestScan) return // Calculate insights const calculateInsights = () => { const newInsights: Record = {} // Get previous scan (before the latest) const previousScans = [...historicalScans] .filter((scan) => scan.date.getTime() !== latestScan.date.getTime()) .sort((a, b) => b.date.getTime() - a.date.getTime()) const previousScan = previousScans[0] if (!previousScan) return {} // Calculate heart rate trend const hrChange = latestScan.data.heartRate - previousScan.data.heartRate const hrTrend = hrChange > 0 ? "increasing" : hrChange < 0 ? "decreasing" : "stable" const hrStatus = Math.abs(latestScan.data.heartRate - 70) < Math.abs(previousScan.data.heartRate - 70) ? "improving" : "worsening" newInsights.heartRate = { trend: hrTrend, change: hrChange, status: hrStatus, } // Calculate body temperature trend const btChange = Number.parseFloat(latestScan.data.bodyTemp) - Number.parseFloat(previousScan.data.bodyTemp) const btTrend = btChange > 0 ? "increasing" : btChange < 0 ? "decreasing" : "stable" const btStatus = Math.abs(Number.parseFloat(latestScan.data.bodyTemp) - 37) < Math.abs(Number.parseFloat(previousScan.data.bodyTemp) - 37) ? "improving" : "worsening" newInsights.bodyTemp = { trend: btTrend, change: btChange, status: btStatus, } // Calculate hydration trend const hydChange = latestScan.data.hydration - previousScan.data.hydration const hydTrend = hydChange > 0 ? "increasing" : hydChange < 0 ? "decreasing" : "stable" const hydStatus = hydChange > 0 ? "improving" : "worsening" newInsights.hydration = { trend: hydTrend, change: hydChange, status: hydStatus, } // Calculate stress trend const stressChange = latestScan.data.stress - previousScan.data.stress const stressTrend = stressChange > 0 ? "increasing" : stressChange < 0 ? "decreasing" : "stable" const stressStatus = stressChange < 0 ? "improving" : "worsening" newInsights.stress = { trend: stressTrend, change: stressChange, status: stressStatus, } // Calculate sleep trend const sleepChange = latestScan.data.sleep - previousScan.data.sleep const sleepTrend = sleepChange > 0 ? "increasing" : sleepChange < 0 ? "decreasing" : "stable" const sleepStatus = Math.abs(latestScan.data.sleep - 8) < Math.abs(previousScan.data.sleep - 8) ? "improving" : "worsening" newInsights.sleep = { trend: sleepTrend, change: sleepChange, status: sleepStatus, } // Calculate weight trend const weightChange = Number.parseFloat(latestScan.data.weight) - Number.parseFloat(previousScan.data.weight) const weightTrend = weightChange > 0 ? "increasing" : weightChange < 0 ? "decreasing" : "stable" // Weight status depends on personal goals, so we'll mark it as neutral const weightStatus = "neutral" newInsights.weight = { trend: weightTrend, change: weightChange, status: weightStatus, } return newInsights } setInsights(calculateInsights()) // Calculate health score const calculateHealthScore = () => { if (!latestScan) return 0 // Normalize each metric to a 0-100 scale const heartRateScore = 100 - Math.min(100, Math.abs(latestScan.data.heartRate - 70) * 2) const bodyTempScore = 100 - Math.min(100, Math.abs(Number.parseFloat(latestScan.data.bodyTemp) - 37) * 50) const hydrationScore = latestScan.data.hydration const stressScore = 100 - latestScan.data.stress const sleepScore = 100 - Math.min(100, Math.abs(latestScan.data.sleep - 8) * 15) // Average the scores return Math.round((heartRateScore + bodyTempScore + hydrationScore + stressScore + sleepScore) / 5) } const score = calculateHealthScore() setHealthScore(score) // Calculate health score change const calculateHealthScoreChange = () => { if (historicalScans.length < 2 || !latestScan) return 0 // Get previous scan const previousScans = [...historicalScans] .filter((scan) => scan.date.getTime() !== latestScan.date.getTime()) .sort((a, b) => b.date.getTime() - a.date.getTime()) if (previousScans.length === 0) return 0 const previousScan = previousScans[0] // Calculate previous health score const prevHeartRateScore = 100 - Math.min(100, Math.abs(previousScan.data.heartRate - 70) * 2) const prevBodyTempScore = 100 - Math.min(100, Math.abs(Number.parseFloat(previousScan.data.bodyTemp) - 37) * 50) const prevHydrationScore = previousScan.data.hydration const prevStressScore = 100 - previousScan.data.stress const prevSleepScore = 100 - Math.min(100, Math.abs(previousScan.data.sleep - 8) * 15) const prevScore = (prevHeartRateScore + prevBodyTempScore + prevHydrationScore + prevStressScore + prevSleepScore) / 5 return Math.round(score - prevScore) } setHealthScoreChange(calculateHealthScoreChange()) }, [historicalScans, latestScan]) // Get data for the selected metric const getMetricData = () => { // Sort scans by date (oldest to newest) const sortedScans = [...historicalScans].sort((a, b) => a.date.getTime() - b.date.getTime()) // Get the last 5 scans (or fewer if not available) const recentScans = sortedScans.slice(-5) return recentScans.map((scan) => { let value: number switch (selectedMetric) { case "heartRate": value = scan.data.heartRate break case "bodyTemp": value = Number.parseFloat(scan.data.bodyTemp) break case "hydration": value = scan.data.hydration break case "stress": value = scan.data.stress break case "sleep": value = scan.data.sleep break case "weight": value = Number.parseFloat(scan.data.weight) break } return { date: scan.date, value, } }) } // Get metric details (name, unit, color) const getMetricDetails = (metric: string) => { switch (metric) { case "heartRate": return { name: "Heart Rate", unit: "bpm", color: "red", icon: "♥" } case "bodyTemp": return { name: "Body Temperature", unit: "°C", color: "orange", icon: "◉" } case "hydration": return { name: "Hydration", unit: "%", color: "blue", icon: "◈" } case "stress": return { name: "Stress Level", unit: "", color: "yellow", icon: "◎" } case "sleep": return { name: "Sleep", unit: "hours", color: "purple", icon: "☾" } case "weight": return { name: "Weight", unit: "kg", color: "green", icon: "◯" } default: return { name: metric, unit: "", color: "blue", icon: "●" } } } // Format date for display const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) } // Get trend arrow icon based on trend direction and status const getTrendIcon = (trend: string, status: string) => { if (trend === "increasing") { return status === "improving" ? ( ) : ( ) } else if (trend === "decreasing") { return status === "improving" ? ( ) : ( ) } else { return } } if (historicalScans.length < 2 || !latestScan) { return (

Trend Analysis

Complete more scans to view trends

) } const chartData = getMetricData() const metricDetails = getMetricDetails(selectedMetric) return (

Trend Analysis

{/* Health Score */}

Health Score

0 ? "text-green-400" : healthScoreChange < 0 ? "text-red-400" : "text-white/70" }`} > {healthScoreChange > 0 ? "+" : ""} {healthScoreChange} {healthScoreChange !== 0 && ( {healthScoreChange > 0 ? ( ) : ( )} )}

{healthScore}

{healthScore >= 80 ? "Excellent" : healthScore >= 70 ? "Very Good" : healthScore >= 60 ? "Good" : healthScore >= 50 ? "Fair" : "Needs Improvement"}

{healthScoreChange > 0 ? "Your health metrics are improving" : healthScoreChange < 0 ? "Your health metrics need attention" : "Your health metrics are stable"}

{/* Key Insights */}

Key Insights

{Object.entries(insights) .filter(([_, insight]) => insight.change !== 0) .slice(0, 3) .map(([metric, insight]) => { const details = getMetricDetails(metric) return (

{details.icon} {details.name} {getTrendIcon(insight.trend, insight.status)} {insight.change > 0 ? "+" : ""} {insight.change.toFixed(1)} {details.unit}

) })}

{/* Metric selector */}

{(["heartRate", "bodyTemp", "hydration", "stress", "sleep", "weight"] as const).map((metric) => { const details = getMetricDetails(metric) const isSelected = metric === selectedMetric const colorClass = `text-${details.color}-300` const bgClass = isSelected ? `bg-${details.color}-500/20` : "bg-white/5" const borderClass = isSelected ? `border-${details.color}-500/50` : "border-white/10" return ( ) })}

{/* Chart */}

{/* Chart area */}

{/* Data visualization */} {chartData.length > 0 && ( )} {/* X-axis labels */}

{chartData.map((point, i) => (

{formatDate(point.date)}

))}

) } [V0_FILE]typescriptreact:file="components/trends/mirror-trend-panel.tsx" isMerged="true" "use client" import { useState, useEffect, useMemo } from "react" import { ArrowUpRight, ArrowDownRight, ArrowRight, BarChart2, Maximize2 } from "lucide-react" import { Button } from "@/components/ui/button" import type { HistoricalScan } from "../mirror-dashboard" interface MirrorTrendPanelProps { historicalScans: HistoricalScan[] latestScan: HistoricalScan | null onExpandView: () => void } export default function MirrorTrendPanel({ historicalScans, latestScan, onExpandView }: MirrorTrendPanelProps) { const [selectedMetric, setSelectedMetric] = useState< "heartRate" | "bodyTemp" | "hydration" | "stress" | "sleep" | "weight" >("heartRate") const [insights, setInsights] = useState>({}) // Calculate trends and insights when scans change useEffect(() => { if (historicalScans.length < 2 || !latestScan) return // Calculate insights const calculateInsights = () => { const newInsights: Record = {} // Get previous scan (before the latest) const previousScans = [...historicalScans] .filter((scan) => scan.date.getTime() !== latestScan.date.getTime()) .sort((a, b) => b.date.getTime() - a.date.getTime()) const previousScan = previousScans[0] if (!previousScan) return {} // Calculate heart rate trend const hrChange = latestScan.data.heartRate - previousScan.data.heartRate const hrTrend = hrChange > 0 ? "increasing" : hrChange < 0 ? "decreasing" : "stable" const hrStatus = Math.abs(latestScan.data.heartRate - 70) < Math.abs(previousScan.data.heartRate - 70) ? "improving" : "worsening" newInsights.heartRate = { trend: hrTrend, change: hrChange, status: hrStatus, } // Calculate body temperature trend const btChange = Number.parseFloat(latestScan.data.bodyTemp) - Number.parseFloat(previousScan.data.bodyTemp) const btTrend = btChange > 0 ? "increasing" : btChange < 0 ? "decreasing" : "stable" const btStatus = Math.abs(Number.parseFloat(latestScan.data.bodyTemp) - 37) < Math.abs(Number.parseFloat(previousScan.data.bodyTemp) - 37) ? "improving" : "worsening" newInsights.bodyTemp = { trend: btTrend, change: btChange, status: btStatus, } // Calculate hydration trend const hydChange = latestScan.data.hydration - previousScan.data.hydration const hydTrend = hydChange > 0 ? "increasing" : hydChange < 0 ? "decreasing" : "stable" const hydStatus = hydChange > 0 ? "improving" : "worsening" newInsights.hydration = { trend: hydTrend, change: hydChange, status: hydStatus, } // Calculate stress trend const stressChange = latestScan.data.stress - previousScan.data.stress const stressTrend = stressChange > 0 ? "increasing" : stressChange < 0 ? "decreasing" : "stable" const stressStatus = stressChange < 0 ? "improving" : "worsening" newInsights.stress = { trend: stressTrend, change: stressChange, status: stressStatus, } // Calculate sleep trend const sleepChange = latestScan.data.sleep - previousScan.data.sleep const sleepTrend = sleepChange > 0 ? "increasing" : sleepChange < 0 ? "decreasing" : "stable" const sleepStatus = Math.abs(latestScan.data.sleep - 8) < Math.abs(previousScan.data.sleep - 8) ? "improving" : "worsening" newInsights.sleep = { trend: sleepTrend, change: sleepChange, status: sleepStatus, } // Calculate weight trend const weightChange = Number.parseFloat(latestScan.data.weight) - Number.parseFloat(previousScan.data.weight) const weightTrend = weightChange > 0 ? "increasing" : weightChange < 0 ? "decreasing" : "stable" // Weight status depends on personal goals, so we'll mark it as neutral const weightStatus = "neutral" newInsights.weight = { trend: weightTrend, change: weightChange, status: weightStatus, } return newInsights } setInsights(calculateInsights()) }, [historicalScans, latestScan]) // Get data for the selected metric - use useMemo to prevent recalculation on every render const chartData = useMemo(() => { if (!historicalScans.length) return [] // Sort scans by date (oldest to newest) const sortedScans = [...historicalScans].sort((a, b) => a.date.getTime() - b.date.getTime()) // Get the last 5 scans (or fewer if not available) const recentScans = sortedScans.slice(-5) return recentScans.map((scan) => { let value: number switch (selectedMetric) { case "heartRate": value = scan.data.heartRate break case "bodyTemp": value = Number.parseFloat(scan.data.bodyTemp) break case "hydration": value = scan.data.hydration break case "stress": value = scan.data.stress break case "sleep": value = scan.data.sleep break case "weight": value = Number.parseFloat(scan.data.weight) break } return { date: scan.date, value, } }) }, [historicalScans, selectedMetric]) // Memoize min, max and other chart calculations const chartValues = useMemo(() => { if (chartData.length === 0) return { min: 0, max: 100, range: 100 } const values = chartData.map((d) => d.value) const min = Math.min(...values) const max = Math.max(...values) const range = max - min || 1 // Prevent division by zero return { min, max, range } }, [chartData]) // Get metric details (name, unit, color) const getMetricDetails = (metric: string) => { switch (metric) { case "heartRate": return { name: "Heart Rate", unit: "bpm", color: "red", icon: "♥" } case "bodyTemp": return { name: "Body Temperature", unit: "°C", color: "orange", icon: "◉" } case "hydration": return { name: "Hydration", unit: "%", color: "blue", icon: "◈" } case "stress": return { name: "Stress Level", unit: "", color: "yellow", icon: "◎" } case "sleep": return { name: "Sleep", unit: "hours", color: "purple", icon: "☾" } case "weight": return { name: "Weight", unit: "kg", color: "purple", icon: "☾" } case "weight": return { name: "Weight", unit: "kg", color: "green", icon: "◯" } default: return { name: metric, unit: "", color: "blue", icon: "●" } } } // Format date for display const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) } // Get trend arrow icon based on trend direction and status const getTrendIcon = (trend: string, status: string) => { if (trend === "increasing") { return status === "improving" ? ( ) : ( ) } else if (trend === "decreasing") { return status === "improving" ? ( ) : ( ) } else { return } } if (historicalScans.length < 2 || !latestScan) { return (

Trend Analysis

Complete more scans to view trends

) } const metricDetails = getMetricDetails(selectedMetric) return (

Trend Analysis

{/* Metric selector */}

{/* Chart */}

{/* Chart area */}

{/* Data visualization */} {chartData.length > 0 && ( )}

{/* Key Insights */}

{Object.entries(insights) .filter(([metric, insight]) => metric === selectedMetric && insight.change !== 0) .map(([metric, insight]) => { const details = getMetricDetails(metric) return (

{details.icon} {details.name} {getTrendIcon(insight.trend, insight.status)} {insight.change > 0 ? "+" : ""} {insight.change.toFixed(1)} {details.unit}

) })}

) } [V0_FILE]typescriptreact:file="components/home/scan-results.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import type { ScanningMetrics } from "../mirror-dashboard" interface ScanResultsProps { scanningMetrics: ScanningMetrics onViewDetails: () => void } export default function ScanResults({ scanningMetrics, onViewDetails }: ScanResultsProps) { // Calculate overall health score (simple average of normalized metrics) const calculateHealthScore = () => { const metrics = Object.values(scanningMetrics).filter((m) => m.value !== null) if (metrics.length === 0) return 0 // Normalize each metric to a 0-100 scale let totalScore = 0 let count = 0 if (scanningMetrics.heartRate.value !== null) { const heartRateScore = 100 - Math.min(100, Math.abs(scanningMetrics.heartRate.value - 70) * 2) totalScore += heartRateScore count++ } if (scanningMetrics.bodyTemp.value !== null) { const bodyTempScore = 100 - Math.min(100, Math.abs(Number.parseFloat(scanningMetrics.bodyTemp.value) - 37) * 50) totalScore += bodyTempScore count++ } if (scanningMetrics.hydration.value !== null) { totalScore += scanningMetrics.hydration.value count++ } if (scanningMetrics.stress.value !== null) { const stressScore = 100 - scanningMetrics.stress.value totalScore += stressScore count++ } if (scanningMetrics.sleep.value !== null) { const sleepScore = 100 - Math.min(100, Math.abs(scanningMetrics.sleep.value - 8) * 15) totalScore += sleepScore count++ } return Math.round(totalScore / count) } const healthScore = calculateHealthScore() return (

{healthScore}

{healthScore >= 80 ? "Excellent Health" : healthScore >= 70 ? "Very Good Health" : healthScore >= 60 ? "Good Health" : healthScore >= 50 ? "Fair Health" : "Health Needs Attention"} Scan completed successfully

{Object.entries(scanningMetrics) .slice(0, 6) .map(([key, metric], index) => { if (metric.value === null) return null let color = "blue" let icon = "●" let unit = "" switch (key) { case "heartRate": color = "red" icon = "♥" unit = " bpm" break case "bodyTemp": color = "orange" icon = "◉" unit = "°C" break case "hydration": color = "blue" icon = "◈" unit = "%" break case "stress": color = "yellow" icon = "◎" unit = "" break case "sleep": color = "purple" icon = "☾" unit = "h" break case "weight": color = "green" icon = "◯" unit = "kg" break } return (

{icon}

{metric.value} {unit}

{key.replace(/([A-Z])/g, " $1").trim()}

) })}

) } [V0_FILE]typescriptreact:file="components/utils/data-generators.ts" isMerged="true" import type { HealthData, HistoricalScan } from "../mirror-dashboard" // Generate sample health data export function generateHealthData(): HealthData { return { heartRate: Math.floor(Math.random() * (90 - 60) + 60), bodyTemp: (Math.random() * (37.2 - 36.5) + 36.5).toFixed(1), hydration: Math.floor(Math.random() * (95 - 70) + 70), sleep: Math.floor(Math.random() * (8 - 5) + 5), stress: Math.floor(Math.random() * (70 - 20) + 20), weight: (Math.random() * (80 - 65) + 65).toFixed(1), trends: { heartRateChange: Math.floor(Math.random() * 5) - 2, sleepChange: (Math.random() * 1.4 - 0.7).toFixed(1), stressChange: Math.floor(Math.random() * 10) - 5, weightChange: (Math.random() * 0.6 - 0.3).toFixed(1), }, } } // Generate sample historical data export function generateHistoricalData(): HistoricalScan[] { const now = new Date() const scans: HistoricalScan[] = [] // Generate 7 historical scans, one per day for (let i = 6; i >= 0; i--) { const scanDate = new Date(now) scanDate.setDate(scanDate.getDate() - i) // Add some randomness to the time scanDate.setHours(Math.floor(Math.random() * 12) + 8) scanDate.setMinutes(Math.floor(Math.random() * 60)) const data = generateHealthData() scans.push({ date: scanDate, data: { heartRate: data.heartRate, bodyTemp: data.bodyTemp, hydration: data.hydration, sleep: data.sleep, stress: data.stress, weight: data.weight, }, }) } return scans } [V0_FILE]typescriptreact:file="components/DetailedView.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import type { ScanData } from "../types" interface DetailedViewProps { scanData: ScanData historicalScans: ScanData[] onClose: () => void } export default function DetailedView({ scanData, historicalScans, onClose }: DetailedViewProps) { const [activeTab, setActiveTab] = useState("metrics") return (

{/* Header */}

Health Analysis

{/* Tabs */}

{["metrics", "trends", "history"].map((tab) => ( ))}

{/* Content */}

{activeTab === "metrics" && } {activeTab === "trends" && } {activeTab === "history" && }

) } // Metrics Tab Component function MetricsTab({ scanData }: { scanData: ScanData }) { return (

{Object.entries(scanData.metrics).map(([key, value]) => { const metricInfo = getMetricInfo(key) return (

{metricInfo.icon} {metricInfo.label}

{value} {metricInfo.unit}

{metricInfo.description}

) })}

) } // Trends Tab Component function TrendsTab({ historicalScans }: { historicalScans: ScanData[] }) { const [selectedMetric, setSelectedMetric] = useState("heartRate") // Get data for the selected metric const chartData = historicalScans .map((scan) => ({ timestamp: new Date(scan.timestamp), value: scan.metrics[selectedMetric as keyof typeof scan.metrics], })) .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime()) const metricInfo = getMetricInfo(selectedMetric) // Find min and max values for the chart const values = chartData.map((d) => Number(d.value)) const minValue = Math.min(...values) const maxValue = Math.max(...values) const range = maxValue - minValue || 1 // Prevent division by zero return (

{/* Metric selector */}

{Object.keys(historicalScans[0]?.metrics || {}).map((metric) => { const info = getMetricInfo(metric) const isSelected = metric === selectedMetric return ( ) })}

{/* Chart */}

{metricInfo.icon}

{metricInfo.label} Trend

{/* Chart area */}

{/* Data visualization */} {chartData.length > 0 && ( )} {/* X-axis labels */}

{chartData.map((point, i) => (

{point.timestamp.toLocaleDateString(undefined, { month: "short", day: "numeric" })}

))}

) } // History Tab Component function HistoryTab({ historicalScans }: { historicalScans: ScanData[] }) { return (

{historicalScans .slice() .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()) .map((scan, index) => (

{new Date(scan.timestamp).toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric", })}

{new Date(scan.timestamp).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit", })}

{Object.entries(scan.metrics) .slice(0, 3) .map(([key, value]) => { const metricInfo = getMetricInfo(key) return (

{metricInfo.icon} {value} {metricInfo.unit}

) })}

Health Score:

{scan.overallScore}

))}

) } // Helper function to get metric display information function getMetricInfo(key: string) { switch (key) { case "heartRate": return { label: "Heart Rate", unit: " bpm", icon: "♥", rgbColor: "239, 68, 68", description: "Normal range: 60-100 bpm", } case "bodyTemp": return { label: "Body Temp", unit: "°C", icon: "◉", rgbColor: "249, 115, 22", description: "Normal range: 36.5-37.5°C", } case "hydration": return { label: "Hydration", unit: "%", icon: "◈", rgbColor: "59, 130, 246", description: "Optimal: Above 85%", } case "stress": return { label: "Stress", unit: "", icon: "◎", rgbColor: "234, 179, 8", description: "Lower is better", } case "sleep": return { label: "Sleep", unit: "h", icon: "☾", rgbColor: "168, 85, 247", description: "Recommended: 7-9 hours", } case "weight": return { label: "Weight", unit: "kg", icon: "◯", rgbColor: "34, 197, 94", description: "BMI: Normal", } default: return { label: key, unit: "", icon: "●", rgbColor: "156, 163, 175", description: "No additional data", } } } // Helper function to calculate percentage for progress bars function getMetricPercentage(key: string, value: any): number { const numValue = Number(value) switch (key) { case "heartRate": // Assuming normal range 60-100 return Math.min(100, Math.max(0, ((numValue - 40) / 80) * 100)) case "bodyTemp": // Assuming normal range 36.5-37.5 return Math.min(100, Math.max(0, ((numValue - 35) / 3) * 100)) case "hydration": return numValue case "stress": return numValue case "sleep": // Assuming ideal is 8 hours return Math.min(100, (numValue / 10) * 100) case "weight": // Just a visual indicator return 70 default: return 50 } } [V0_FILE]typescriptreact:file="components/HandTracker.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface HandTrackerProps { onSwipe: (direction: "up" | "down", velocity: number) => void onSwipeProgress: (progress: number) => void } export function HandTracker({ onSwipe, onSwipeProgress }: HandTrackerProps) { const startY = useRef(null) const lastY = useRef(null) const velocityRef = useRef(0) const animationFrameRef = useRef(null) const swipeThreshold = 100 // Minimum distance to trigger swipe useEffect(() => { const handleTouchStart = (e: TouchEvent) => { startY.current = e.touches[0].clientY lastY.current = e.touches[0].clientY velocityRef.current = 0 // Start tracking velocity const trackVelocity = () => { if (lastY.current !== null && startY.current !== null) { // Calculate swipe progress (0-1) const distance = startY.current - lastY.current const progress = Math.min(Math.abs(distance) / swipeThreshold, 1) onSwipeProgress(distance > 0 ? progress : -progress) animationFrameRef.current = requestAnimationFrame(trackVelocity) } } animationFrameRef.current = requestAnimationFrame(trackVelocity) } const handleTouchMove = (e: TouchEvent) => { if (startY.current === null) return const currentY = e.touches[0].clientY // Calculate velocity if (lastY.current !== null) { velocityRef.current = lastY.current - currentY } lastY.current = currentY } const handleTouchEnd = () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (startY.current !== null && lastY.current !== null) { const distance = startY.current - lastY.current if (Math.abs(distance) > swipeThreshold) { // Determine swipe direction const direction = distance > 0 ? "up" : "down" onSwipe(direction, Math.abs(velocityRef.current)) } else { // Reset progress if swipe wasn't completed onSwipeProgress(0) } } startY.current = null lastY.current = null } // For mouse events (simulating hand gestures) const handleMouseDown = (e: MouseEvent) => { startY.current = e.clientY lastY.current = e.clientY velocityRef.current = 0 // Start tracking velocity const trackVelocity = () => { if (lastY.current !== null && startY.current !== null) { // Calculate swipe progress (0-1) const distance = startY.current - lastY.current const progress = Math.min(Math.abs(distance) / swipeThreshold, 1) onSwipeProgress(distance > 0 ? progress : -progress) animationFrameRef.current = requestAnimationFrame(trackVelocity) } } animationFrameRef.current = requestAnimationFrame(trackVelocity) } const handleMouseMove = (e: MouseEvent) => { if (startY.current === null) return const currentY = e.clientY // Calculate velocity if (lastY.current !== null) { velocityRef.current = lastY.current - currentY } lastY.current = currentY } const handleMouseUp = () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (startY.current !== null && lastY.current !== null) { const distance = startY.current - lastY.current if (Math.abs(distance) > swipeThreshold) { // Determine swipe direction const direction = distance > 0 ? "up" : "down" onSwipe(direction, Math.abs(velocityRef.current)) } else { // Reset progress if swipe wasn't completed onSwipeProgress(0) } } startY.current = null lastY.current = null } // Add event listeners document.addEventListener("touchstart", handleTouchStart) document.addEventListener("touchmove", handleTouchMove) document.addEventListener("touchend", handleTouchEnd) document.addEventListener("mousedown", handleMouseDown) document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) return () => { // Clean up event listeners document.removeEventListener("touchstart", handleTouchStart) document.removeEventListener("touchmove", handleTouchMove) document.removeEventListener("touchend", handleTouchEnd) document.removeEventListener("mousedown", handleMouseDown) document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } }, [onSwipe, onSwipeProgress, swipeThreshold]) // This component doesn't render anything visible return null } [V0_FILE]typescriptreact:file="components/HomeScreen.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import CameraFeed from "./CameraFeed" import ScanResults from "./ScanResults" import DetailPanel from "./DetailPanel" import SpatialButton from "./ui/SpatialButton" import { generateScanData } from "../utils/scanUtils" import type { ScanData } from "../types" export default function HomeScreen() { const [scanning, setScanning] = useState(false) const [scanComplete, setScanComplete] = useState(false) const [scanProgress, setScanProgress] = useState(0) const [scanData, setScanData] = useState(null) const [detailPanelOpen, setDetailPanelOpen] = useState(false) const [swipeProgress, setSwipeProgress] = useState(0) const [historicalScans, setHistoricalScans] = useState([]) const scanTimerRef = useRef(null) const containerRef = useRef(null) const startY = useRef(null) const lastY = useRef(null) // Initialize with sample historical data useEffect(() => { const sampleData = Array(5) .fill(0) .map((_, i) => { const date = new Date() date.setDate(date.getDate() - i) return { ...generateScanData(), timestamp: date.toISOString(), } }) setHistoricalScans(sampleData) // Set initial scan data for demonstration setScanData(sampleData[0]) setScanComplete(true) }, []) // Clean up timers useEffect(() => { return () => { if (scanTimerRef.current) clearTimeout(scanTimerRef.current) } }, []) // Handle touch/swipe gestures useEffect(() => { const handleTouchStart = (e: TouchEvent) => { startY.current = e.touches[0].clientY } const handleTouchMove = (e: TouchEvent) => { if (!startY.current) return const currentY = e.touches[0].clientY const diff = startY.current - currentY // Calculate swipe progress (0-1) const maxSwipe = 200 // Maximum swipe distance const progress = Math.max(0, Math.min(1, diff / maxSwipe)) setSwipeProgress(progress) } const handleTouchEnd = () => { if (!startY.current) return // If swipe progress is more than 40%, open the detail panel if (swipeProgress > 0.4) { setDetailPanelOpen(true) } else { setDetailPanelOpen(false) } startY.current = null setSwipeProgress(0) } // Mouse events for desktop testing const handleMouseDown = (e: MouseEvent) => { startY.current = e.clientY } const handleMouseMove = (e: MouseEvent) => { if (!startY.current) return const currentY = e.clientY const diff = startY.current - currentY // Calculate swipe progress (0-1) const maxSwipe = 200 // Maximum swipe distance const progress = Math.max(0, Math.min(1, diff / maxSwipe)) setSwipeProgress(progress) } const handleMouseUp = () => { if (!startY.current) return // If swipe progress is more than 40%, open the detail panel if (swipeProgress > 0.4) { setDetailPanelOpen(true) } else { setDetailPanelOpen(false) } startY.current = null setSwipeProgress(0) } // Add event listeners document.addEventListener("touchstart", handleTouchStart) document.addEventListener("touchmove", handleTouchMove) document.addEventListener("touchend", handleTouchEnd) document.addEventListener("mousedown", handleMouseDown) document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) return () => { // Clean up event listeners document.removeEventListener("touchstart", handleTouchStart) document.removeEventListener("touchmove", handleTouchMove) document.removeEventListener("touchend", handleTouchEnd) document.removeEventListener("mousedown", handleMouseDown) document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [swipeProgress]) // Start scan process const startScan = () => { if (scanning) return // Reset state setScanning(true) setScanComplete(false) setScanProgress(0) setDetailPanelOpen(false) // Clear any existing timers if (scanTimerRef.current) clearTimeout(scanTimerRef.current) // Start progress animation const progressInterval = setInterval(() => { setScanProgress((prev) => { if (prev >= 100) { clearInterval(progressInterval) return 100 } return prev + 1 }) }, 50) // Complete scan after delay scanTimerRef.current = setTimeout(() => { const newScanData = generateScanData() setScanData(newScanData) setHistoricalScans((prev) => [{ ...newScanData, timestamp: new Date().toISOString() }, ...prev]) setScanning(false) setScanComplete(true) clearInterval(progressInterval) }, 5000) } // Close detail panel const handleCloseDetailPanel = () => { setDetailPanelOpen(false) } return (

{/* Spatial environment background */}

{/* Camera feed as background */}

{/* Main content container */}

{/* Header */}

Vision Scanner

Camera Active

{/* Central content area - Results display */} {/* Scanning animation */} {scanning && (

{scanProgress}%

Scanning...

Please remain still

{/* Scanning line animation */}

)} {/* Results display - Always visible when scan is complete */} {scanComplete && scanData && !scanning && ( )} {/* Bottom action area - Scan button */} {scanComplete ? "Scan Again" : "Scan Now"} {/* Swipe indicator - Only shown when scan is complete */} {scanComplete && !detailPanelOpen && !scanning && (

Swipe up for details

)}

{/* Detail panel - Slides up from bottom */} {(detailPanelOpen || swipeProgress > 0) && ( {scanData && ( )} )}

) } [V0_FILE]typescriptreact:file="components/ScanResults.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ScanData } from "../types" interface ScanResultsProps { scanData: ScanData compact?: boolean } export default function ScanResults({ scanData, compact = false }: ScanResultsProps) { // Calculate overall health score const healthScore = scanData.overallScore return (

{healthScore}

{healthScore >= 80 ? "Excellent Health" : healthScore >= 70 ? "Very Good Health" : healthScore >= 60 ? "Good Health" : healthScore >= 50 ? "Fair Health" : "Health Needs Attention"} {!compact && ( Scan completed successfully )}

{Object.entries(scanData.metrics).map(([key, value], index) => { const metricInfo = getMetricInfo(key) return (

{metricInfo.icon}

{value} {metricInfo.unit}

{metricInfo.label}

) })}

) } // Helper function to get metric display information function getMetricInfo(key: string) { switch (key) { case "heartRate": return { label: "Heart Rate", unit: " bpm", icon: "♥", rgbColor: "239, 68, 68", } case "bodyTemp": return { label: "Body Temp", unit: "°C", icon: "◉", rgbColor: "249, 115, 22", } case "hydration": return { label: "Hydration", unit: "%", icon: "◈", rgbColor: "59, 130, 246", } case "stress": return { label: "Stress", unit: "", icon: "◎", rgbColor: "234, 179, 8", } case "sleep": return { label: "Sleep", unit: "h", icon: "☾", rgbColor: "168, 85, 247", } case "weight": return { label: "Weight", unit: "kg", icon: "◯", rgbColor: "34, 197, 94", } default: return { label: key, unit: "", icon: "●", rgbColor: "156, 163, 175", } } } [V0_FILE]typescriptreact:file="components/ui/SpatialButton.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" interface SpatialButtonProps { children: React.ReactNode onClick: () => void disabled?: boolean className?: string } export default function SpatialButton({ children, onClick, disabled = false, className = "" }: SpatialButtonProps) { const [isHovered, setIsHovered] = useState(false) const [isPressed, setIsPressed] = useState(false) return ( !disabled && setIsHovered(true)} onMouseLeave={() => { setIsHovered(false) setIsPressed(false) }} onMouseDown={() => !disabled && setIsPressed(true)} onMouseUp={() => setIsPressed(false)} disabled={disabled} > {/* Glass effect overlay */} {/* Button content */} {children} {/* Disabled state overlay */} {disabled && } ) } [V0_FILE]typescriptreact:file="types.ts" isMerged="true" export interface ScanData { timestamp: string overallScore: number metrics: { heartRate: number bodyTemp: string hydration: number stress: number sleep: number weight: string } } [V0_FILE]typescriptreact:file="utils/scanUtils.ts" isMerged="true" import type { ScanData } from "../types" export function generateScanData(): ScanData { return { timestamp: new Date().toISOString(), overallScore: Math.floor(Math.random() * 30) + 70, // 70-100 metrics: { heartRate: Math.floor(Math.random() * 30) + 60, // 60-90 bodyTemp: (Math.random() * 0.7 + 36.5).toFixed(1), // 36.5-37.2 hydration: Math.floor(Math.random() * 25) + 70, // 70-95 stress: Math.floor(Math.random() * 50) + 20, // 20-70 sleep: Math.floor(Math.random() * 4) + 5, // 5-9 weight: (Math.random() * 15 + 65).toFixed(1), // 65-80 }, } } [V0_FILE]typescriptreact:file="components/camera/user-scanner.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import CameraFeed from "./camera-feed" import RealTimeOutput from "./real-time-output" import type { ScanningMetrics } from "../mirror-dashboard" // Import the new AR overlay component at the top import ARBodyOverlay from "./ar-body-overlay" interface UserScannerProps { active: boolean onScanStart: () => void onScanComplete: () => void scanningMetrics: ScanningMetrics onViewHistory: () => void onViewTrends: () => void } export default function UserScanner({ active, onScanStart, onScanComplete, scanningMetrics, onViewHistory, onViewTrends, }: UserScannerProps) { const [scanStage, setScanStage] = useState<"idle" | "detecting" | "scanning" | "complete">("idle") const [detectionMessage, setDetectionMessage] = useState("Stand in front of the mirror") const [simulationMode, setSimulationMode] = useState(false) const [scanProgress, setScanProgress] = useState(0) const [progressTimer, setProgressTimer] = useState(null) // Reset state when component becomes active useEffect(() => { if (active) { setScanStage("detecting") setDetectionMessage("Detecting user...") setScanProgress(0) } else { setScanStage("idle") } }, [active]) // Clean up timers when component unmounts useEffect(() => { return () => { if (progressTimer) { clearInterval(progressTimer) } } }, [progressTimer]) // Handle scan completion when progress reaches 100% useEffect(() => { if (scanStage === "scanning" && scanProgress >= 100) { // Stop the progress timer if (progressTimer) { clearInterval(progressTimer) setProgressTimer(null) } // Complete the scan setScanStage("complete") onScanComplete() } }, [scanProgress, scanStage, progressTimer, onScanComplete]) // Handle user detection const handleUserDetected = () => { setDetectionMessage("User detected. Preparing scan...") // Start the scan after a short delay setTimeout(() => { setScanStage("scanning") setScanProgress(0) onScanStart() // Start progress timer const timer = setInterval(() => { setScanProgress((prev) => { if (prev >= 100) { return 100 } return prev + 1 }) }, 70) // Adjust for desired scan duration setProgressTimer(timer) }, 2000) } // Handle rescan request const handleRescan = () => { // Clear any existing timer if (progressTimer) { clearInterval(progressTimer) setProgressTimer(null) } setScanStage("detecting") setDetectionMessage("Preparing new scan...") setScanProgress(0) // Restart the scanning process setTimeout(() => { setScanStage("scanning") onScanStart() // Start progress timer const timer = setInterval(() => { setScanProgress((prev) => { if (prev >= 100) { return 100 } return prev + 1 }) }, 70) setProgressTimer(timer) }, 1500) } return (

{active && ( {/* Add AR Body Overlay here */} {/* Real-time output overlay */} )} {/* Overlay for idle state */} {scanStage === "idle" && (

Camera Scan Ready

Stand in front of the mirror to begin

)} {/* Biometric data indicators */} {scanStage === "scanning" && (

{Object.entries(scanningMetrics).map(([key, metric]) => { if (!metric.scanning && metric.value === null) return null let color = "blue" let icon = "●" switch (key) { case "heartRate": color = "red" icon = "♥" break case "bodyTemp": color = "orange" icon = "◉" break case "hydration": color = "blue" icon = "◈" break case "stress": color = "yellow" icon = "◎" break case "sleep": color = "purple" icon = "☾" break case "weight": color = "green" icon = "◯" break } return ( {icon}

{key.replace(/([A-Z])/g, " $1").trim()} {metric.value !== null && ( {metric.value} {key === "heartRate" ? " bpm" : key === "bodyTemp" ? "°C" : key === "hydration" ? "%" : key === "sleep" ? "h" : key === "weight" ? "kg" : ""} )}

{metric.scanning && (

)}

) })}

)}

{/* Status message */} {scanStage === "detecting" && (

{detectionMessage}

)} {/* Simulation mode notice */} {scanStage !== "idle" && (

Smart Mirror Scan

)}

) } [V0_FILE]typescriptreact:file="utils/body-visualization.ts" isMerged="true" // 3D body visualization helper functions // Define key body scan points and their relative positions export const bodyScanPoints = { heartRate: { x: 0.5, y: 0.3, z: 0.1, label: "Heart Rate", color: "red" }, bodyTemp: { x: 0.5, y: 0.07, z: 0, label: "Body Temperature", color: "orange" }, hydration: { x: 0.5, y: 0.5, z: 0.05, label: "Hydration", color: "blue" }, stress: { x: 0.5, y: 0.15, z: 0, label: "Stress Level", color: "yellow" }, sleep: { x: 0.5, y: 0.12, z: 0, label: "Sleep Quality", color: "purple" }, weight: { x: 0.5, y: 0.7, z: 0.1, label: "Weight", color: "green" }, } // Calculate scan point positions based on container dimensions export function calculateScanPointPosition( point: { x: number; y: number; z: number }, containerWidth: number, containerHeight: number, ) { return { x: point.x * containerWidth, y: point.y * containerHeight, z: point.z * Math.min(containerWidth, containerHeight), } } // Get body part name from scan point type export function getBodyPartForMetric(metricKey: string): string { switch (metricKey) { case "heartRate": return "chest" case "bodyTemp": return "forehead" case "hydration": return "abdomen" case "stress": return "brain" case "sleep": return "eyes" case "weight": return "full body" default: return "body" } } // Generate a description of what's being scanned export function generateScanDescription(metricKey: string): string { switch (metricKey) { case "heartRate": return "Analyzing heart rate and cardiovascular health" case "bodyTemp": return "Measuring body temperature" case "hydration": return "Assessing hydration levels in tissue" case "stress": return "Evaluating stress levels through facial analysis" case "sleep": return "Determining sleep quality from eye movement patterns" case "weight": return "Calculating body composition and weight" default: return "Scanning body metrics" } } [V0_FILE]typescriptreact:file="components/home-screen.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, useAnimation, type PanInfo } from "framer-motion" import { ArrowRight, Activity, ChevronUp } from "lucide-react" import { Button } from "@/components/ui/button" import CameraFeed from "./camera/camera-feed" import ScanResults from "./home/scan-results" import DetailedView from "./home/detailed-view" import type { ScanningMetrics, HistoricalScan } from "./mirror-dashboard" import { generateHealthData, generateHistoricalData } from "./utils/data-generators" // Import our new animation component import ScanCompletionAnimation from "./animations/scan-completion-animation" export default function HomeScreen() { // State for screen management const [currentView, setCurrentView] = useState<"home" | "details">("home") const [scanning, setScanning] = useState(false) const [scanComplete, setScanComplete] = useState(false) const [scanProgress, setScanProgress] = useState(0) const [showCompletionAnimation, setShowCompletionAnimation] = useState(false) const [scanningMetrics, setScanningMetrics] = useState({ heartRate: { scanning: false, value: null }, bodyTemp: { scanning: false, value: null }, hydration: { scanning: false, value: null }, sleep: { scanning: false, value: null }, stress: { scanning: false, value: null }, weight: { scanning: false, value: null }, }) const [historicalScans, setHistoricalScans] = useState([]) const [latestScan, setLatestScan] = useState(null) // Animation controls const homeControls = useAnimation() const detailsControls = useAnimation() const swipeIndicatorControls = useAnimation() // Refs const containerRef = useRef(null) const scanTimerRef = useRef(null) // Initialize historical data useEffect(() => { const initialData = generateHistoricalData() setHistoricalScans(initialData) if (initialData.length > 0) { const latest = initialData[initialData.length - 1] setLatestScan(latest) setScanningMetrics({ heartRate: { scanning: false, value: latest.data.heartRate }, bodyTemp: { scanning: false, value: latest.data.bodyTemp }, hydration: { scanning: false, value: latest.data.hydration }, sleep: { scanning: false, value: latest.data.sleep }, stress: { scanning: false, value: latest.data.stress }, weight: { scanning: false, value: latest.data.weight }, }) setScanComplete(true) } // Animate swipe indicator swipeIndicatorControls.start({ y: [0, -10, 0], opacity: [0.5, 1, 0.5], transition: { duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "loop", ease: "easeInOut", }, }) }, [swipeIndicatorControls]) // Clean up timers useEffect(() => { return () => { if (scanTimerRef.current) clearTimeout(scanTimerRef.current) } }, []) // Handle swipe gesture const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { const threshold = 100 // Minimum distance to trigger view change if (currentView === "home" && info.offset.y < -threshold) { // Swiped up from home view setCurrentView("details") homeControls.start({ y: "-100%", transition: { type: "spring", damping: 20 } }) detailsControls.start({ y: 0, transition: { type: "spring", damping: 20 } }) } else if (currentView === "details" && info.offset.y > threshold) { // Swiped down from details view setCurrentView("home") homeControls.start({ y: 0, transition: { type: "spring", damping: 20 } }) detailsControls.start({ y: "100%", transition: { type: "spring", damping: 20 } }) } else { // Reset position if threshold not met homeControls.start({ y: currentView === "home" ? 0 : "-100%" }) detailsControls.start({ y: currentView === "details" ? 0 : "100%" }) } } // Start scan process const startScan = () => { // Reset state setScanning(true) setScanComplete(false) setShowCompletionAnimation(false) setScanProgress(0) setScanningMetrics({ heartRate: { scanning: false, value: null }, bodyTemp: { scanning: false, value: null }, hydration: { scanning: false, value: null }, sleep: { scanning: false, value: null }, stress: { scanning: false, value: null }, weight: { scanning: false, value: null }, }) // Clear any existing timers if (scanTimerRef.current) clearTimeout(scanTimerRef.current) // Start progress animation const progressInterval = setInterval(() => { setScanProgress((prev) => { if (prev >= 100) { clearInterval(progressInterval) return 100 } return prev + 1 }) }, 50) // Simulate scanning different metrics with delays setTimeout(() => { setScanningMetrics((prev) => ({ ...prev, heartRate: { scanning: true, value: null }, })) }, 1000) setTimeout(() => { setScanningMetrics((prev) => ({ ...prev, heartRate: { scanning: false, value: Math.floor(Math.random() * (90 - 60) + 60) }, bodyTemp: { scanning: true, value: null }, })) }, 2000) setTimeout(() => { setScanningMetrics((prev) => ({ ...prev, bodyTemp: { scanning: false, value: (Math.random() * (37.2 - 36.5) + 36.5).toFixed(1) }, hydration: { scanning: true, value: null }, })) }, 3000) setTimeout(() => { setScanningMetrics((prev) => ({ ...prev, hydration: { scanning: false, value: Math.floor(Math.random() * (95 - 70) + 70) }, stress: { scanning: true, value: null }, })) }, 4000) setTimeout(() => { setScanningMetrics((prev) => ({ ...prev, stress: { scanning: false, value: Math.floor(Math.random() * (70 - 20) + 20) }, sleep: { scanning: true, value: null }, })) }, 5000) // Complete scan scanTimerRef.current = setTimeout(() => { // Generate new health data const newData = generateHealthData() // Create new scan record const newScan: HistoricalScan = { date: new Date(), data: { heartRate: newData.heartRate, bodyTemp: newData.bodyTemp, hydration: newData.hydration, sleep: newData.sleep, stress: newData.stress, weight: newData.weight, }, } // Update state with new scan data setScanningMetrics({ heartRate: { scanning: false, value: newData.heartRate }, bodyTemp: { scanning: false, value: newData.bodyTemp }, hydration: { scanning: false, value: newData.hydration }, sleep: { scanning: false, value: newData.sleep }, stress: { scanning: false, value: newData.stress }, weight: { scanning: false, value: newData.weight }, }) setHistoricalScans((prev) => [...prev, newScan]) setLatestScan(newScan) setScanning(false) // Show completion animation setShowCompletionAnimation(true) // Clear interval clearInterval(progressInterval) }, 6000) } // Handle animation completion const handleAnimationComplete = () => { setShowCompletionAnimation(false) setScanComplete(true) } return (

{/* Home View */} {/* Camera Feed Background */}

{/* Scan Button and Results Overlay */}

Smart Mirror

{scanComplete && ( )}

{!scanning && !scanComplete && (

Health Scanner

Stand in front of the mirror and tap scan

)} {scanning && (

{scanProgress}%

Scanning...

Please remain still

)} {scanComplete && ( { setCurrentView("details") homeControls.start({ y: "-100%", transition: { type: "spring", damping: 20 } }) detailsControls.start({ y: 0, transition: { type: "spring", damping: 20 } }) }} /> )}

{!scanning && ( )}

{/* Swipe indicator (only shown when scan is complete) */} {scanComplete && (

Swipe up for details

)} {/* Detailed View */} { setCurrentView("home") homeControls.start({ y: 0, transition: { type: "spring", damping: 20 } }) detailsControls.start({ y: "100%", transition: { type: "spring", damping: 20 } }) }} /> {/* Enhanced Completion Animation */}

) } [V0_FILE]plaintext:file="public/welcoming-health-scan.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/welcoming-health-scan-a5bEShasGtQwoYZEj6RmuZJQH2AsgH.png" isMerged="true" [V0_FILE]plaintext:file="public/document-scan-process.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/document-scan-process-miRkrd5UseejEueRbjBjQDfpvM6Awd.png" isMerged="true" [V0_FILE]plaintext:file="public/phone-swipe-up.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/phone-swipe-up-iZe376Vr77COrK9Aq2ne2PeWpWzMt5.png" isMerged="true" [V0_FILE]plaintext:file="public/personal-health-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/personal-health-dashboard-rrZ99hNMwsV6YfgWTZtg1FNg25JU12.png" isMerged="true" [V0_FILE]typescriptreact:file="components/visionos/scan-completion-animation.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import type { ScanningMetrics } from "../mirror-dashboard" interface ScanCompletionAnimationProps { visible: boolean scanningMetrics: ScanningMetrics onAnimationComplete: () => void enhanced?: boolean } export default function ScanCompletionAnimation({ visible, scanningMetrics, onAnimationComplete, enhanced = false, }: ScanCompletionAnimationProps) { const [animationPhase, setAnimationPhase] = useState< "initial" | "collecting" | "processing" | "compiling" | "complete" | "finished" >("initial") const [dataPoints, setDataPoints] = useState>([]) const particlesRef = useRef(null) const timeoutRef = useRef(null) // Reset animation state when visibility changes useEffect(() => { if (visible) { setAnimationPhase("initial") // Create data points from scanning metrics const points = Object.entries(scanningMetrics) .filter(([_, metric]) => metric.value !== null) .map(([key, metric]) => { let color = "blue-400" let label = key let unit = "" switch (key) { case "heartRate": color = "red-400" label = "Heart Rate" unit = " bpm" break case "bodyTemp": color = "orange-400" label = "Body Temp" unit = "°C" break case "hydration": color = "blue-400" label = "Hydration" unit = "%" break case "stress": color = "yellow-400" label = "Stress" unit = "" break case "sleep": color = "purple-400" label = "Sleep" unit = "h" break case "weight": color = "green-400" label = "Weight" unit = "kg" break } return { id: key, color, label, value: `${metric.value}${unit}`, } }) setDataPoints(points) // Start animation sequence startAnimationSequence() } else { // Clean up timeouts when component hides if (timeoutRef.current) { clearTimeout(timeoutRef.current) } setAnimationPhase("initial") } return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) } } }, [visible, scanningMetrics]) // Animation sequence timing const startAnimationSequence = () => { // Phase 1: Collecting data (data points fly in) timeoutRef.current = setTimeout(() => { setAnimationPhase("collecting") // Phase 2: Processing data (spinning circle) timeoutRef.current = setTimeout(() => { setAnimationPhase("processing") // Phase 3: Compiling results (data points arrange) timeoutRef.current = setTimeout(() => { setAnimationPhase("compiling") // Phase 4: Complete (checkmark appears) timeoutRef.current = setTimeout(() => { setAnimationPhase("complete") createParticleEffect() // Phase 5: Finished (fade out and signal completion) timeoutRef.current = setTimeout(() => { setAnimationPhase("finished") // Signal that animation is complete timeoutRef.current = setTimeout(() => { onAnimationComplete() }, 1000) }, 2000) }, 1500) }, 1500) }, 1500) }, 500) } // Create particle explosion effect const createParticleEffect = () => { if (!particlesRef.current) return const container = particlesRef.current container.innerHTML = "" // Create particles with different colors based on data points const colors = dataPoints.map((dp) => dp.color) for (let i = 0; i < 150; i++) { const particle = document.createElement("div") // Randomize particle properties const size = Math.random() * 8 + 2 const colorIndex = Math.floor(Math.random() * colors.length) const color = colors[colorIndex] || "blue-400" const opacity = Math.random() * 0.7 + 0.3 const angle = Math.random() * Math.PI * 2 const distance = Math.random() * 200 + 50 const duration = Math.random() * 1.5 + 1 const delay = Math.random() * 0.3 // Set particle styles particle.className = `absolute rounded-full bg-${color}` particle.style.width = `${size}px` particle.style.height = `${size}px` particle.style.opacity = opacity.toString() // Position at center particle.style.left = "50%" particle.style.top = "50%" particle.style.transform = "translate(-50%, -50%)" // Animate the particle particle.animate( [ { transform: "translate(-50%, -50%) scale(0)", opacity: opacity }, { transform: "translate(-50%, -50%) scale(1)", opacity: opacity, offset: 0.1 }, { transform: `translate(calc(-50% + ${Math.cos(angle) * distance}px), calc(-50% + ${ Math.sin(angle) * distance }px)) scale(0.5)`, opacity: 0, }, ], { duration: duration * 1000, delay: delay * 1000, easing: "cubic-bezier(0.1, 0.8, 0.2, 1)", fill: "forwards", }, ) container.appendChild(particle) } } if (!visible) return null return (

{/* Collecting phase - data points fly in from body parts */} {(animationPhase === "collecting" || animationPhase === "processing") && dataPoints.map((point, index) => ( {point.label} {point.value} ))} {/* Processing phase - spinning circle with progress */} {animationPhase === "processing" && (

Processing Analyzing data

)} {/* Compiling phase - data points arrange in a circle */} {animationPhase === "compiling" && (

{dataPoints.map((point, index) => { const angle = (index / dataPoints.length) * Math.PI * 2 const radius = 100 const x = Math.cos(angle) * radius const y = Math.sin(angle) * radius return ( {point.value} ) })} {/* Central connecting lines */}

Compiling Results

)} {/* Complete phase - checkmark and success message */} {(animationPhase === "complete" || animationPhase === "finished") && (

Scan Complete

All health metrics captured successfully

)} {/* Particle container for the completion effect */}

) } // Helper function to determine initial positions for data points function getInitialPosition(metricId: string): { x: number; y: number } { switch (metricId) { case "heartRate": return { x: -150, y: -50 } // From left chest case "bodyTemp": return { x: 0, y: -150 } // From head case "hydration": return { x: 150, y: 0 } // From right side case "stress": return { x: -100, y: -120 } // From left head case "sleep": return { x: 0, y: -130 } // From eyes case "weight": return { x: 0, y: 150 } // From bottom default: return { x: 0, y: 0 } } } [V0_FILE]typescript:file="utils/data-generators.ts" isMerged="true" import type { HealthData, HistoricalScan } from "../components/mirror-dashboard" // Generate sample health data export function generateHealthData(): HealthData { return { heartRate: Math.floor(Math.random() * (90 - 60) + 60), bodyTemp: (Math.random() * (37.2 - 36.5) + 36.5).toFixed(1), hydration: Math.floor(Math.random() * (95 - 70) + 70), sleep: Math.floor(Math.random() * (8 - 5) + 5), stress: Math.floor(Math.random() * (70 - 20) + 20), weight: (Math.random() * (80 - 65) + 65).toFixed(1), trends: { heartRateChange: Math.floor(Math.random() * 5) - 2, sleepChange: (Math.random() * 1.4 - 0.7).toFixed(1), stressChange: Math.floor(Math.random() * 10) - 5, weightChange: (Math.random() * 0.6 - 0.3).toFixed(1), }, } } // Generate sample historical data export function generateHistoricalData(): HistoricalScan[] { const now = new Date() const scans: HistoricalScan[] = [] // Generate 7 historical scans, one per day for (let i = 6; i >= 0; i--) { const scanDate = new Date(now) scanDate.setDate(scanDate.getDate() - i) // Add some randomness to the time scanDate.setHours(Math.floor(Math.random() * 12) + 8) scanDate.setMinutes(Math.floor(Math.random() * 60)) const data = generateHealthData() scans.push({ date: scanDate, data: { heartRate: data.heartRate, bodyTemp: data.bodyTemp, hydration: data.hydration, sleep: data.sleep, stress: data.stress, weight: data.weight, }, }) } return scans } [V0_FILE]typescriptreact:file="components/performance-optimizer.tsx" isMerged="true" "use client" import { useEffect } from "react" /** * This component optimizes performance by applying various browser optimizations * to reduce stuttering and improve rendering performance. */ export default function PerformanceOptimizer() { useEffect(() => { // Request animation frame optimization let frameId: number | null = null let lastFrameTime = 0 // Function to optimize animation frames const optimizeFrames = (timestamp: number) => { // Skip frames if they're coming too quickly (throttle to ~60fps) if (timestamp - lastFrameTime < 16) { frameId = requestAnimationFrame(optimizeFrames) return } lastFrameTime = timestamp // Apply any per-frame optimizations here frameId = requestAnimationFrame(optimizeFrames) } // Start the optimization loop frameId = requestAnimationFrame(optimizeFrames) // Apply CSS optimizations document.documentElement.style.setProperty("--enable-gpu", "1") // Force GPU acceleration for animations const style = document.createElement("style") style.textContent = ` .glass-panel, .glass-card { transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; will-change: transform, opacity; } /* Optimize animations */ @media (prefers-reduced-motion: no-preference) { .animate-pulse { animation-duration: 2s; } } ` document.head.appendChild(style) // Clean up return () => { if (frameId) cancelAnimationFrame(frameId) document.head.removeChild(style) } }, []) // This component doesn't render anything return null } [V0_FILE]typescriptreact:file="components/visionos/swipe-gesture-handler.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface SwipeGestureHandlerProps { onSwipe: (direction: "up" | "down", velocity: number) => void onSwipeProgress: (progress: number) => void disabled?: boolean } export default function SwipeGestureHandler({ onSwipe, onSwipeProgress, disabled = false }: SwipeGestureHandlerProps) { const startY = useRef(null) const lastY = useRef(null) const velocityRef = useRef(0) const animationFrameRef = useRef(null) const swipeThreshold = 100 // Minimum distance to trigger swipe const swipeSnapThreshold = 40 // Threshold to show visual snap feedback // visionOS-inspired gesture sensitivity const visionSensitivity = 1.2 useEffect(() => { if (disabled) return const handleTouchStart = (e: TouchEvent) => { if (disabled) return startY.current = e.touches[0].clientY lastY.current = e.touches[0].clientY velocityRef.current = 0 // Provide haptic feedback if available (iOS) if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(5) // Subtle vibration } // Start tracking velocity and progress const trackVelocity = () => { if (lastY.current !== null && startY.current !== null) { // Calculate swipe progress (0-1) const distance = startY.current - lastY.current const progress = Math.min(Math.abs(distance) / swipeThreshold, 1) * visionSensitivity // Apply the direction to progress (positive for up, negative for down) onSwipeProgress(distance > 0 ? progress : -progress) // Add snap effect when approaching threshold if (Math.abs(distance) > swipeSnapThreshold && Math.abs(distance) < swipeThreshold) { if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(10) // Medium vibration for snap effect } } animationFrameRef.current = requestAnimationFrame(trackVelocity) } } animationFrameRef.current = requestAnimationFrame(trackVelocity) } const handleTouchMove = (e: TouchEvent) => { if (startY.current === null || disabled) return const currentY = e.touches[0].clientY // Calculate velocity if (lastY.current !== null) { velocityRef.current = (lastY.current - currentY) * visionSensitivity } lastY.current = currentY } const handleTouchEnd = () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (startY.current !== null && lastY.current !== null && !disabled) { const distance = startY.current - lastY.current if (Math.abs(distance) > swipeThreshold / visionSensitivity) { // Determine swipe direction const direction = distance > 0 ? "up" : "down" // Provide haptic feedback for completed swipe if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(15) // Stronger vibration for completed swipe } onSwipe(direction, Math.abs(velocityRef.current)) } else { // Reset progress if swipe wasn't completed onSwipeProgress(0) } } startY.current = null lastY.current = null } // Mouse event handlers for desktop testing const handleMouseDown = (e: MouseEvent) => { if (disabled) return startY.current = e.clientY lastY.current = e.clientY velocityRef.current = 0 // Start tracking velocity and progress const trackVelocity = () => { if (lastY.current !== null && startY.current !== null) { // Calculate swipe progress (0-1) const distance = startY.current - lastY.current const progress = Math.min(Math.abs(distance) / swipeThreshold, 1) * visionSensitivity onSwipeProgress(distance > 0 ? progress : -progress) animationFrameRef.current = requestAnimationFrame(trackVelocity) } } animationFrameRef.current = requestAnimationFrame(trackVelocity) } const handleMouseMove = (e: MouseEvent) => { if (startY.current === null || disabled) return const currentY = e.clientY // Calculate velocity if (lastY.current !== null) { velocityRef.current = (lastY.current - currentY) * visionSensitivity } lastY.current = currentY } const handleMouseUp = () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (startY.current !== null && lastY.current !== null && !disabled) { const distance = startY.current - lastY.current if (Math.abs(distance) > swipeThreshold / visionSensitivity) { // Determine swipe direction const direction = distance > 0 ? "up" : "down" onSwipe(direction, Math.abs(velocityRef.current)) } else { // Reset progress if swipe wasn't completed onSwipeProgress(0) } } startY.current = null lastY.current = null } // Add event listeners document.addEventListener("touchstart", handleTouchStart, { passive: true }) document.addEventListener("touchmove", handleTouchMove, { passive: true }) document.addEventListener("touchend", handleTouchEnd) document.addEventListener("mousedown", handleMouseDown) document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) return () => { // Clean up event listeners document.removeEventListener("touchstart", handleTouchStart) document.removeEventListener("touchmove", handleTouchMove) document.removeEventListener("touchend", handleTouchEnd) document.removeEventListener("mousedown", handleMouseDown) document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } }, [onSwipe, onSwipeProgress, disabled, visionSensitivity]) // This component doesn't render anything visible return null } [V0_FILE]typescriptreact:file="utils/animation-effects.ts" isMerged="true" // Animation utility functions for visionOS-inspired effects // Create a particle explosion effect with visionOS aesthetic export function createParticleEffect( container: HTMLElement, count = 100, colors: string[] = ["blue-400", "green-400", "red-400", "purple-400", "yellow-400"], ) { if (!container) return container.innerHTML = "" for (let i = 0; i < count; i++) { const particle = document.createElement("div") // Randomize particle properties with visionOS-inspired settings const size = Math.random() * 8 + 2 const colorIndex = Math.floor(Math.random() * colors.length) const color = colors[colorIndex] const opacity = Math.random() * 0.7 + 0.3 const angle = Math.random() * Math.PI * 2 const distance = Math.random() * 200 + 50 const duration = Math.random() * 1.5 + 1 const delay = Math.random() * 0.3 // VisionOS-style glow effect const glow = Math.random() > 0.7 // Set particle styles particle.className = `absolute rounded-full bg-${color}` particle.style.width = `${size}px` particle.style.height = `${size}px` particle.style.opacity = opacity.toString() // Add glow effect to some particles for depth if (glow) { particle.style.boxShadow = `0 0 ${size * 2}px rgba(var(--${color.replace("-400", "")}), 0.5)` particle.style.filter = "blur(0.5px)" } // Position at center particle.style.left = "50%" particle.style.top = "50%" particle.style.transform = "translate(-50%, -50%)" // Animate the particle with visionOS-like easing particle.animate( [ { transform: "translate(-50%, -50%) scale(0)", opacity: opacity }, { transform: "translate(-50%, -50%) scale(1)", opacity: opacity, offset: 0.1 }, { transform: `translate(calc(-50% + ${Math.cos(angle) * distance}px), calc(-50% + ${ Math.sin(angle) * distance }px)) scale(0.5)`, opacity: 0, }, ], { duration: duration * 1000, delay: delay * 1000, easing: "cubic-bezier(0.1, 0.8, 0.2, 1)", // VisionOS-style easing fill: "forwards", }, ) container.appendChild(particle) } } // Create a data flow effect (particles moving along a path) export function createDataFlowEffect( container: HTMLElement, startX: number, startY: number, endX: number, endY: number, color = "blue-400", count = 20, ) { if (!container) return for (let i = 0; i < count; i++) { const particle = document.createElement("div") // Randomize particle properties const size = Math.random() * 4 + 1 const opacity = Math.random() * 0.7 + 0.3 const duration = Math.random() * 1 + 0.5 const delay = Math.random() * 1 // VisionOS-style glow const glow = Math.random() > 0.5 // Set particle styles particle.className = `absolute rounded-full bg-${color}` particle.style.width = `${size}px` particle.style.height = `${size}px` particle.style.opacity = opacity.toString() // Add glow to some particles if (glow) { particle.style.boxShadow = `0 0 ${size * 2}px rgba(var(--${color.replace("-400", "")}), 0.5)` } // Position at start particle.style.left = `${startX}px` particle.style.top = `${startY}px` // Animate the particle particle.animate( [ { transform: "scale(0)", opacity: 0 }, { transform: "scale(1)", opacity: opacity, offset: 0.1 }, { transform: "scale(1)", opacity: opacity, offset: 0.9 }, { transform: "scale(0)", opacity: 0 }, ], { duration: duration * 1000, delay: delay * 1000, easing: "cubic-bezier(0.1, 0.8, 0.2, 1)", // VisionOS-style easing fill: "forwards", }, ) // Animate position with slight curve for visionOS aesthetic const controlX = (startX + endX) / 2 + (Math.random() * 20 - 10) const controlY = (startY + endY) / 2 + (Math.random() * 20 - 10) const keyframes = [ { left: `${startX}px`, top: `${startY}px` }, { left: `${controlX}px`, top: `${controlY}px`, offset: 0.5 }, { left: `${endX}px`, top: `${endY}px` }, ] particle.animate(keyframes, { duration: duration * 1000, delay: delay * 1000, easing: "cubic-bezier(0.1, 0.8, 0.2, 1)", fill: "forwards", }) container.appendChild(particle) } } // Create a glowing pulse effect for visionOS aesthetic export function createGlowingPulse(container: HTMLElement, x: number, y: number, color = "blue-400", size = 50) { if (!container) return const pulse = document.createElement("div") // Set pulse styles pulse.className = `absolute rounded-full bg-${color}/20` pulse.style.width = `${size}px` pulse.style.height = `${size}px` pulse.style.left = `${x}px` pulse.style.top = `${y}px` pulse.style.transform = "translate(-50%, -50%)" pulse.style.boxShadow = `0 0 ${size / 2}px rgba(var(--${color.replace("-400", "")}), 0.3)` // Animate the pulse with visionOS-style glow pulse.animate( [ { transform: "translate(-50%, -50%) scale(0)", opacity: 0.8, boxShadow: `0 0 ${size / 3}px rgba(var(--${color.replace("-400", "")}), 0.3)`, }, { transform: "translate(-50%, -50%) scale(0.7)", opacity: 0.5, boxShadow: `0 0 ${size / 2}px rgba(var(--${color.replace("-400", "")}), 0.4)`, }, { transform: "translate(-50%, -50%) scale(1.5)", opacity: 0, boxShadow: `0 0 ${size}px rgba(var(--${color.replace("-400", "")}), 0)`, }, ], { duration: 1500, iterations: 3, easing: "cubic-bezier(0.1, 0.8, 0.2, 1)", // VisionOS-style easing fill: "forwards", }, ) container.appendChild(pulse) // Remove after animation completes setTimeout(() => { if (container.contains(pulse)) { container.removeChild(pulse) } }, 4500) } // Add a specific animation effect for hand detection feedback // Add this new function to the file: // Create a hand detection success animation export function createHandDetectionEffect(container: HTMLElement, x = 50, y = 15) { if (!container) return // Create hand gesture confirmation animation const handEffect = document.createElement("div") // Position in upper area where hand would be raised handEffect.style.position = "absolute" handEffect.style.left = `${x}%` handEffect.style.top = `${y}%` handEffect.style.width = "120px" handEffect.style.height = "120px" handEffect.style.transform = "translate(-50%, -50%)" handEffect.style.pointerEvents = "none" // Add hand icon const handIcon = document.createElement("div") handIcon.innerHTML = ` ` handEffect.appendChild(handIcon) // Create ripple effects for (let i = 0; i < 3; i++) { const ripple = document.createElement("div") ripple.style.position = "absolute" ripple.style.left = "50%" ripple.style.top = "50%" ripple.style.width = "100%" ripple.style.height = "100%" ripple.style.borderRadius = "50%" ripple.style.border = "2px solid rgba(59, 130, 246, 0.8)" ripple.style.transform = "translate(-50%, -50%) scale(0)" ripple.style.opacity = "1" // Animate the ripple ripple.animate( [ { transform: "translate(-50%, -50%) scale(0)", opacity: 1 }, { transform: "translate(-50%, -50%) scale(1.5)", opacity: 0 }, ], { duration: 1000, delay: i * 200, easing: "cubic-bezier(0, 0.2, 0.8, 1)", fill: "forwards", }, ) handEffect.appendChild(ripple) } // Add success checkmark setTimeout(() => { const checkmark = document.createElement("div") checkmark.style.position = "absolute" checkmark.style.right = "-20px" checkmark.style.bottom = "-10px" checkmark.style.width = "40px" checkmark.style.height = "40px" checkmark.style.borderRadius = "50%" checkmark.style.backgroundColor = "rgba(34, 197, 94, 0.9)" checkmark.style.display = "flex" checkmark.style.alignItems = "center" checkmark.style.justifyContent = "center" checkmark.style.transform = "scale(0)" checkmark.innerHTML = ` ` handEffect.appendChild(checkmark) checkmark.animate( [ { transform: "scale(0)", opacity: 0 }, { transform: "scale(1.2)", opacity: 1 }, { transform: "scale(1)", opacity: 1 }, ], { duration: 500, easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)", fill: "forwards", }, ) }, 600) // Add to container container.appendChild(handEffect) // Remove after animation completes setTimeout(() => { handEffect.animate( [ { opacity: 1, transform: "translateY(0)" }, { opacity: 0, transform: "translateY(-20px)" }, ], { duration: 500, easing: "ease-out", fill: "forwards", }, ) setTimeout(() => { if (container.contains(handEffect)) { container.removeChild(handEffect) } }, 500) }, 2500) } [V0_FILE]typescriptreact:file="components/visionos/first-time-user-guide.tsx" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { ChevronRight } from "lucide-react" interface FirstTimeUserGuideProps { step: number onNext: () => void onSkip: () => void } export default function FirstTimeUserGuide({ step, onNext, onSkip }: FirstTimeUserGuideProps) { // Define tutorial steps with visionOS-style instructions const steps = [ { title: "Welcome to Health Scanner", description: "This app uses advanced AR technology to analyze and track your health metrics in real-time.", image: "/welcoming-health-scan.png", }, { title: "Scan Your Health", description: "Raise your hand clearly in front of the camera to start a scan, or tap the 'Scan Now' button. The system will recognize your gesture and begin the analysis automatically.", image: "/document-scan-process.png", }, { title: "View Your Results", description: "After scanning, your health metrics will appear directly on screen. Swipe up to see detailed analysis and trends.", image: "/phone-swipe-up.png", }, { title: "You're All Set!", description: "Scan regularly to track changes in your health metrics and discover trends over time.", image: "/personal-health-dashboard.png", }, ] const currentStep = steps[step] return ( {/* Progress indicator */}

{steps.map((_, index) => (

))}

{/* Header with skip button */}

{currentStep.title}

{/* Tutorial image */}

{/* Tutorial description */} {currentStep.description} {/* Navigation button */}

) } [V0_FILE]typescriptreact:file="components/gestures/hand-raise-detector.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { createHandDetectionEffect } from "@/utils/animation-effects" interface HandRaiseDetectorProps { active: boolean onHandRaised: () => void onConfidenceChange?: (confidence: number) => void videoRef: React.RefObject disabled?: boolean sensitivity?: number showDebug?: boolean requiredConfidence?: number } export default function HandRaiseDetector({ active, onHandRaised, onConfidenceChange, videoRef, disabled = false, sensitivity = 1.2, showDebug = false, requiredConfidence = 75, }: HandRaiseDetectorProps) { // Core refs and state const canvasRef = useRef(null) const debugCanvasRef = useRef(null) const particlesRef = useRef(null) // Detection state const [isDetecting, setIsDetecting] = useState(false) const [handRaised, setHandRaised] = useState(false) const [confidence, setConfidence] = useState(0) const [showInstructions, setShowInstructions] = useState(true) // Zone and multi-region tracking const [detectionZones, setDetectionZones] = useState<{ [zone: string]: number }>({}) const detectionIntervalRef = useRef(null) const consecutiveDetectionsRef = useRef(0) const requiredConsecutiveDetections = 6 // Stability threshold // Motion and zone tracking const previousFramesRef = useRef<{ [zone: string]: number[] }>({ upperLeft: [], upperRight: [], upperCenter: [], middle: [], lowerLeft: [], lowerRight: [], }) const maxPreviousFrames = 12 // Track more frames for better motion analysis // Adaptive thresholding const environmentalThresholdRef = useRef(18) // Dynamic threshold const detectionHistoryRef = useRef([]) // Store detection history for pattern recognition const maxHistoryLength = 20 // Time-based cooldown to prevent rapid repeated detection const lastDetectionTimeRef = useRef(0) const cooldownPeriodMs = 2000 // Longer cooldown period // Environment calibration const [environmentLearned, setEnvironmentLearned] = useState(false) const environmentBaselineRef = useRef<{ [zone: string]: number }>({}) const learningFramesRef = useRef<{ [zone: string]: number[] }>({}) const minLearningFrames = 15 // Hand position tracking for more natural detection const handPositionHistoryRef = useRef<{ x: number; y: number }[]>([]) const maxPositionHistory = 10 // Learn the environment when component mounts useEffect(() => { if (!active || disabled || !videoRef.current || !canvasRef.current) return // Initialize learning frames const zones = ["upperLeft", "upperRight", "upperCenter", "middle", "lowerLeft", "lowerRight"] zones.forEach((zone) => { learningFramesRef.current[zone] = [] }) const learnEnvironment = () => { if (environmentLearned) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d", { willReadFrequently: true }) if (!ctx || !videoRef.current) return // Ensure canvas dimensions match video canvas.width = videoRef.current.videoWidth || videoRef.current.clientWidth canvas.height = videoRef.current.videoHeight || videoRef.current.clientHeight // Draw current video frame to canvas for analysis ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height) // Analyze each zone const zoneData = getZoneData(ctx, canvas) // Add data to learning frames Object.keys(zoneData).forEach((zone) => { learningFramesRef.current[zone].push(zoneData[zone]) // If we have enough frames, calculate the baseline if (learningFramesRef.current[zone].length >= minLearningFrames) { const sum = learningFramesRef.current[zone].reduce((acc, val) => acc + val, 0) const avg = sum / learningFramesRef.current[zone].length environmentBaselineRef.current[zone] = avg } }) // Check if all zones have enough data const allZonesLearned = Object.keys(zoneData).every( (zone) => learningFramesRef.current[zone].length >= minLearningFrames, ) if (allZonesLearned) { // Calculate adaptive threshold based on baseline values const baselineValues = Object.values(environmentBaselineRef.current) const avgBaseline = baselineValues.reduce((acc, val) => acc + val, 0) / baselineValues.length // Higher baseline for higher sensitivity const adjustedThreshold = avgBaseline * 1.6 + 10 environmentalThresholdRef.current = Math.max(15, Math.min(30, adjustedThreshold)) setEnvironmentLearned(true) console.log("Environment calibrated. Threshold:", environmentalThresholdRef.current) } else { // Continue learning setTimeout(learnEnvironment, 100) } } // Start learning the environment learnEnvironment() return () => { // Reset learning if component unmounts during learning setEnvironmentLearned(false) } }, [active, disabled, videoRef.current]) // Main detection logic useEffect(() => { if (!active || disabled || !videoRef.current || !canvasRef.current || !environmentLearned) return const canvas = canvasRef.current const ctx = canvas.getContext("2d", { willReadFrequently: true }) if (!ctx) return // Debug visualization const debugCtx = debugCanvasRef.current?.getContext("2d") // Ensure canvas dimensions match video const updateCanvasDimensions = () => { if (videoRef.current && canvasRef.current) { canvasRef.current.width = videoRef.current.videoWidth || videoRef.current.clientWidth canvasRef.current.height = videoRef.current.videoHeight || videoRef.current.clientHeight if (debugCanvasRef.current) { debugCanvasRef.current.width = canvasRef.current.width debugCanvasRef.current.height = canvasRef.current.height } } } // Start detection process const startDetection = () => { setIsDetecting(true) updateCanvasDimensions() // Reset tracking data Object.keys(previousFramesRef.current).forEach((zone) => { previousFramesRef.current[zone] = [] }) handPositionHistoryRef.current = [] // Clear any existing interval if (detectionIntervalRef.current) { clearInterval(detectionIntervalRef.current) } // Set up detection interval - higher frequency for responsiveness detectionIntervalRef.current = setInterval(() => { if (!videoRef.current || !canvasRef.current || !ctx) return // Draw current video frame to canvas for analysis ctx.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height) // Get data from multiple zones const zoneData = getZoneData(ctx, canvasRef.current) setDetectionZones(zoneData) // Update debug visualization if enabled if (showDebug && debugCtx) { drawDebugOverlay(debugCtx, canvasRef.current, zoneData) } // Store zone data for motion detection Object.keys(zoneData).forEach((zone) => { if (!previousFramesRef.current[zone]) { previousFramesRef.current[zone] = [] } previousFramesRef.current[zone].push(zoneData[zone]) if (previousFramesRef.current[zone].length > maxPreviousFrames) { previousFramesRef.current[zone].shift() } }) // Calculate motion for each zone const zoneMotion: { [zone: string]: number } = {} Object.keys(previousFramesRef.current).forEach((zone) => { const frames = previousFramesRef.current[zone] zoneMotion[zone] = calculateZoneMotion(frames) }) // Analyze hand position - look for bright spots in upper regions const handPosition = detectHandPosition(ctx, canvasRef.current) if (handPosition) { handPositionHistoryRef.current.push(handPosition) if (handPositionHistoryRef.current.length > maxPositionHistory) { handPositionHistoryRef.current.shift() } } // Calculate hand raise score with multiple factors const handRaiseScore = calculateHandRaiseScore(zoneMotion, zoneData, handPositionHistoryRef.current) // Apply sensitivity adjustment const adjustedScore = handRaiseScore * sensitivity // Check if we've exceeded the threshold const handRaiseDetected = adjustedScore > environmentalThresholdRef.current // Current time for cooldown check const now = Date.now() // Calculate confidence - now with more nuanced scaling const confidenceScaling = 100 / (environmentalThresholdRef.current * 1.2) // Higher max possible score const newConfidence = Math.min(100, Math.max(0, adjustedScore * confidenceScaling)) setConfidence(newConfidence) // Call the confidence change callback if provided if (onConfidenceChange) { onConfidenceChange(newConfidence) } // Update detection history for pattern analysis detectionHistoryRef.current.push(handRaiseDetected) if (detectionHistoryRef.current.length > maxHistoryLength) { detectionHistoryRef.current.shift() } // Apply threshold and look for stable hand raise if (handRaiseDetected) { consecutiveDetectionsRef.current += 1 } else { // More sophisticated decay - faster when confidence is low if (newConfidence < 30) { consecutiveDetectionsRef.current = Math.max(0, consecutiveDetectionsRef.current - 1.5) } else if (newConfidence < 50) { consecutiveDetectionsRef.current = Math.max(0, consecutiveDetectionsRef.current - 0.8) } else { consecutiveDetectionsRef.current = Math.max(0, consecutiveDetectionsRef.current - 0.4) } } // If detection counts meet threshold and outside cooldown period, trigger hand raised if ( consecutiveDetectionsRef.current >= requiredConsecutiveDetections && !handRaised && now - lastDetectionTimeRef.current > cooldownPeriodMs && active && // Final safety check !disabled ) { setHandRaised(true) lastDetectionTimeRef.current = now // Log for debugging console.log(`Hand raise detected with confidence: ${newConfidence.toFixed(1)}%`) // Create visual feedback if (particlesRef.current) { createHandDetectionEffect(particlesRef.current) } // Trigger the callback onHandRaised() // Stop detection after successful trigger clearInterval(detectionIntervalRef.current) detectionIntervalRef.current = null // Hide instructions setShowInstructions(false) // Reset consecutive detections consecutiveDetectionsRef.current = 0 } }, 40) // 40ms for ~25fps processing } // Start detection with a brief delay const initTimer = setTimeout(() => { startDetection() }, 400) // Clean up return () => { clearTimeout(initTimer) if (detectionIntervalRef.current) { clearInterval(detectionIntervalRef.current) detectionIntervalRef.current = null } setIsDetecting(false) setHandRaised(false) consecutiveDetectionsRef.current = 0 detectionHistoryRef.current = [] handPositionHistoryRef.current = [] } }, [ active, disabled, videoRef, onHandRaised, environmentLearned, sensitivity, showDebug, onConfidenceChange, requiredConfidence, ]) // Reset state when component becomes inactive useEffect(() => { if (!active || disabled) { setIsDetecting(false) setHandRaised(false) setConfidence(0) consecutiveDetectionsRef.current = 0 detectionHistoryRef.current = [] handPositionHistoryRef.current = [] setShowInstructions(true) } }, [active, disabled]) // Get data from multiple zones in the frame for more reliable detection const getZoneData = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => { const width = canvas.width const height = canvas.height // Define more detailed zones for hand-raise specific detection const zones = { upperLeft: ctx.getImageData(0, 0, width / 3, height / 4), upperRight: ctx.getImageData((width * 2) / 3, 0, width / 3, height / 4), upperCenter: ctx.getImageData(width / 3, 0, width / 3, height / 4), middle: ctx.getImageData(width / 4, height / 4, width / 2, height / 2), lowerLeft: ctx.getImageData(0, height / 2, width / 3, height / 4), lowerRight: ctx.getImageData((width * 2) / 3, height / 2, width / 3, height / 4), } // Calculate brightness for each zone const zoneData: { [zone: string]: number } = {} Object.entries(zones).forEach(([name, imageData]) => { zoneData[name] = calculateAverageBrightness(imageData.data) }) return zoneData } // Faster brightness calculation - only sample enough pixels to be accurate const calculateAverageBrightness = (data: Uint8ClampedArray): number => { let sum = 0 let count = 0 // Sample every 64 pixels - focused on speed for (let i = 0; i < data.length; i += 64) { const r = data[i] const g = data[i + 1] const b = data[i + 2] // Perceived brightness using standard formula const brightness = 0.299 * r + 0.587 * g + 0.114 * b sum += brightness count++ } return sum / count } // Calculate motion with weighted recency bias const calculateZoneMotion = (frames: number[]): number => { if (frames.length < 2) return 0 let totalDifference = 0 const recentWeight = 1.6 // Higher weight for recent changes // Calculate the weighted difference between consecutive frames for (let i = 1; i < frames.length; i++) { // Apply higher weight to more recent frames const weight = 1 + recentWeight * (i / frames.length) totalDifference += Math.abs(frames[i] - frames[i - 1]) * weight } // Return weighted average difference return totalDifference / (frames.length - 1) } // Detect the actual hand position by looking for bright regions in the upper frame const detectHandPosition = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => { const width = canvas.width const height = canvas.height // Focus detection on the upper part of the frame const upperThird = ctx.getImageData(0, 0, width, height / 3) // Find the brightest spot in the upper third let maxBrightness = 0 let brightestX = 0 let brightestY = 0 // Sample a grid of points for efficiency const gridSize = 20 const stepX = width / gridSize const stepY = height / 3 / gridSize for (let y = 0; y < height / 3; y += stepY) { for (let x = 0; x < width; x += stepX) { const index = (Math.floor(y) * width + Math.floor(x)) * 4 if (index < upperThird.data.length) { const r = upperThird.data[index] const g = upperThird.data[index + 1] const b = upperThird.data[index + 2] const brightness = 0.299 * r + 0.587 * g + 0.114 * b if (brightness > maxBrightness) { maxBrightness = brightness brightestX = x brightestY = y } } } } // Only return a position if it's bright enough to be a hand return maxBrightness > 100 ? { x: brightestX, y: brightestY } : null } // Comprehensive hand raise score calculation based on multiple factors const calculateHandRaiseScore = ( zoneMotion: { [zone: string]: number }, zoneData: { [zone: string]: number }, handPositions: { x: number; y: number }[], ) => { // Hand raise typically shows more motion and brightness in upper zones // Calculate motion ratio between upper zones and middle/lower zones const upperMotion = (zoneMotion.upperLeft + zoneMotion.upperRight + zoneMotion.upperCenter) / 3 const lowerMotion = (zoneMotion.middle + (zoneMotion.lowerLeft || 0) + (zoneMotion.lowerRight || 0)) / 3 // This ratio is key - hand raising has high upper vs lower motion const upperVsLowerRatio = upperMotion / (lowerMotion || 0.1) // Check for brightness differences (raised hands are usually brighter than body) const upperAvgBrightness = (zoneData.upperLeft + zoneData.upperRight + zoneData.upperCenter) / 3 const lowerAvgBrightness = (zoneData.middle + (zoneData.lowerLeft || 0) + (zoneData.lowerRight || 0)) / 3 const brightnessRatio = upperAvgBrightness / (lowerAvgBrightness || 0.1) // Calculate motion pattern - quick upward movement followed by stability const motionVariance = calculateVariance(Object.values(zoneMotion)) // Analyze hand position history for upward movement let handMotionScore = 0 if (handPositions.length >= 3) { // Look for upward trend in the last few positions const recentPositions = handPositions.slice(-3) const yDiffs = [] for (let i = 1; i < recentPositions.length; i++) { yDiffs.push(recentPositions[i - 1].y - recentPositions[i].y) } // Positive values indicate upward movement const avgYDiff = yDiffs.reduce((sum, diff) => sum + diff, 0) / yDiffs.length handMotionScore = avgYDiff > 0 ? avgYDiff / 5 : 0 } // Detect peaks in motion (sudden movements then holding position) const hasPeak = detectMotionPeak(detectionHistoryRef.current) const peakBonus = hasPeak ? 6 : 0 // Look for "hand in upper zone" pattern through analysis of brightest zones const isUpperBrightest = zoneData.upperLeft > zoneData.middle && zoneData.upperRight > zoneData.middle && zoneData.upperCenter > zoneData.middle const upperBrightnessBonus = isUpperBrightest ? 3 : 0 // Combined weighted score for hand raise specific detection return ( upperMotion * 0.5 + upperVsLowerRatio * 3.5 + brightnessRatio * 0.8 + motionVariance * 0.3 + handMotionScore * 0.7 + peakBonus + upperBrightnessBonus ) } // Helper: Calculate variance for motion consistency checking const calculateVariance = (values: number[]): number => { if (values.length <= 1) return 0 const avg = values.reduce((sum, val) => sum + val, 0) / values.length const squaredDiffs = values.map((val) => Math.pow(val - avg, 2)) return squaredDiffs.reduce((sum, val) => sum + val, 0) / values.length } // Helper: Detect peaks in motion pattern that indicates hand raising const detectMotionPeak = (history: boolean[]): boolean => { if (history.length < 6) return false // Look for a pattern of false → true → true → true pattern // which indicates motion starting and then maintaining const recent = history.slice(-6) const patternStr = recent.map((v) => (v ? "1" : "0")).join("") return patternStr.includes("011110") || patternStr.includes("011111") || patternStr.includes("001111") } // Draw debug visualization overlay const drawDebugOverlay = ( debugCtx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, zoneData: { [zone: string]: number }, ) => { const width = canvas.width const height = canvas.height // Clear canvas debugCtx.clearRect(0, 0, width, height) // Draw zone boundaries debugCtx.strokeStyle = "rgba(255, 255, 255, 0.5)" debugCtx.lineWidth = 2 // Upper left zone debugCtx.strokeRect(0, 0, width / 3, height / 4) debugCtx.fillStyle = `rgba(255, 0, 0, ${zoneData.upperLeft / 255})` debugCtx.fillRect(0, 0, width / 3, height / 4) // Upper center zone debugCtx.strokeRect(width / 3, 0, width / 3, height / 4) debugCtx.fillStyle = `rgba(0, 255, 0, ${zoneData.upperCenter / 255})` debugCtx.fillRect(width / 3, 0, width / 3, height / 4) // Upper right zone debugCtx.strokeRect((width * 2) / 3, 0, width / 3, height / 4) debugCtx.fillStyle = `rgba(0, 0, 255, ${zoneData.upperRight / 255})` debugCtx.fillRect((width * 2) / 3, 0, width / 3, height / 4) // Middle zone debugCtx.strokeRect(width / 4, height / 4, width / 2, height / 2) debugCtx.fillStyle = `rgba(255, 255, 0, ${zoneData.middle / 255})` debugCtx.fillRect(width / 4, height / 4, width / 2, height / 2) // Lower zones if (zoneData.lowerLeft) { debugCtx.strokeRect(0, height / 2, width / 3, height / 4) debugCtx.fillStyle = `rgba(255, 0, 255, ${zoneData.lowerLeft / 255})` debugCtx.fillRect(0, height / 2, width / 3, height / 4) } if (zoneData.lowerRight) { debugCtx.strokeRect((width * 2) / 3, height / 2, width / 3, height / 4) debugCtx.fillStyle = `rgba(0, 255, 255, ${zoneData.lowerRight / 255})` debugCtx.fillRect((width * 2) / 3, height / 2, width / 3, height / 4) } // Draw hand position points if (handPositionHistoryRef.current.length > 0) { debugCtx.fillStyle = "white" handPositionHistoryRef.current.forEach((pos, i) => { const alpha = i / handPositionHistoryRef.current.length debugCtx.globalAlpha = alpha debugCtx.beginPath() debugCtx.arc(pos.x, pos.y, 5, 0, Math.PI * 2) debugCtx.fill() }) debugCtx.globalAlpha = 1 } // Draw confidence meter debugCtx.fillStyle = confidence > 70 ? "rgba(0, 255, 0, 0.7)" : confidence > 40 ? "rgba(255, 255, 0, 0.7)" : "rgba(255, 0, 0, 0.7)" debugCtx.fillRect(10, height - 30, (width - 20) * (confidence / 100), 20) debugCtx.strokeStyle = "white" debugCtx.strokeRect(10, height - 30, width - 20, 20) // Add text debugCtx.fillStyle = "white" debugCtx.font = "14px Arial" debugCtx.fillText(`Confidence: ${confidence.toFixed(1)}%`, 15, height - 15) debugCtx.fillText(`Threshold: ${environmentalThresholdRef.current.toFixed(1)}`, 15, height - 40) if (consecutiveDetectionsRef.current > 0) { debugCtx.fillText( `Detections: ${consecutiveDetectionsRef.current.toFixed(1)}/${requiredConsecutiveDetections}`, width - 150, height - 15, ) } } return ( <> {/* Processing canvas - hidden */}

Smart Mirror User Detection Demo

No Scan History

Scan History

{metricDetails.name} History

Detailed Metrics

Trend Analysis Ready

Trend Analysis

Trend Analysis

Health Score

Key Insights

Trend Analysis

Trend Analysis

Health Analysis

{metricInfo.label} Trend

Vision Scanner

Scanning...

Health Scanner

Scanning...

Scan Complete

What's Your Name?

Body Composition

No Health Data

Health Insights

Setup Complete!

Scan QR Code

Camera Access Required

Enter Height and Weight

Trend Analysis

Overall Health Score

{metricDetails.name} Trend

Key Insights

Recommendations

{info.title} Details

Description

Interpretation

Recommendations

Detailed Health Analysis

Not Enough Data

{label}

{metricDetails.name} Trend

Trend Insights

Health Analysis

Not Enough Data

{metricDetails.name} Trend

Scan Results

Health Analysis

{metricInfo.label} Trend

{currentContent.title}

Tips:

Your Body Metrics

Scan Complete

Choose Your Scan Type

{title}

Welcome to Health Scanner, {userData?.name}

Body Metrics Scan

Preparation Steps

{step === "height" ? "Height Measurement" : "Weight Analysis"}

{step === "height" ? "Height Detected" : "Weight Detected"}

Body Metrics Scan

Height

Weight

Body Mass Index (BMI)

Tell Us About Yourself

Health Habits

{step === "phone" ? "Enter Your Phone Number" : "Verify Your Phone"}

{mode === "login" ? "Login to Your Account" : "Create Your Account"}

Authentication

Scanning in Progress

Tell Us About Yourself

Health Habits

{getScanTitle()}

Scan Complete

Full Body Scan

Needs Attention

Detailed Health Analysis

Heart Rate

Recommendation

Face Recognition Setup

Quick and Secure

Personalized Experience