[V0_FILE]typescript:file="lib/image-helpers.ts" isMerged="true" export const fileToBase64 = (file: File): Promise<{ base64: string; mimeType: string }> => { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const result = reader.result as string const { base64, mimeType } = dataUrlToParts(result) resolve({ base64, mimeType }) } reader.onerror = (error) => reject(error) }) } export const dataUrlToParts = (dataUrl: string): { base64: string; mimeType: string } => { const [header, data] = dataUrl.split(",") if (!header || !data) { throw new Error("Invalid data URL") } const mimeType = header.split(":")[1].split(";")[0] return { base64: data, mimeType } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "@google/genai": "1.30.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/clothing-selection.tsx" isMerged="true" "use client" import { useMemo } from "react" import type { ClothingItem, SelectedOutfit } from "@/lib/types" const SparklesIcon = ({ className = "h-6 w-6 mr-2" }: { className?: string }) => ( ) interface ClothingSelectionProps { onGenerate: (outfit: SelectedOutfit) => void onBack: () => void clothingItems: ClothingItem[] selectedOutfit: SelectedOutfit onSelectClothing: (item: ClothingItem) => void onOpenCreateModal: (type: ClothingItem["type"]) => void previewImage: string isPreviewLoading: boolean } export function ClothingSelection({ onGenerate, onBack, clothingItems, selectedOutfit, onSelectClothing, onOpenCreateModal, previewImage, isPreviewLoading, }: ClothingSelectionProps) { const clothingByType = useMemo(() => { return clothingItems.reduce( (acc, item) => { if (!acc[item.type]) { acc[item.type] = [] } acc[item.type].push(item) return acc }, {} as Record, ) }, [clothingItems]) const hasSelection = Object.values(selectedOutfit).some((item) => item !== null) return (

Step 3: Curate Your Look

Your Preview

{isPreviewLoading && (

)}

{(["Top", "Pants", "Shoes", "Accessory"] as const).map((type) => (

{type}s

{!clothingByType[type] || clothingByType[type].length === 0 ? (

No items available in this category.

) : (

{clothingByType[type]?.map((item) => { const isSelected = selectedOutfit[item.type]?.id === item.id return ( ) })}

)}

))}

) } [V0_FILE]typescriptreact:file="components/home-page.tsx" isMerged="true" "use client" import type { Page } from "@/lib/types" interface HomePageProps { onNavigate: (page: Page) => void } export function HomePage({ onNavigate }: HomePageProps) { return (

1 of One

Where Style Meets Singularity.

Upload your photo, design unique pieces with AI, and experience a virtual try-on like never before.

) } [V0_FILE]typescriptreact:file="components/try-on-studio-wrapper.tsx" isMerged="true" "use client" import { useState, useCallback } from "react" import type { AppStep, ClothingItem, UserImage, SelectedOutfit, FitAnalysis, SavedLook, SavedMeasurement, } from "@/lib/types" import { CLOTHING_ITEMS } from "@/lib/constants" import { fileToBase64 } from "@/lib/image-helpers" const CollectionIcon = () => ( ) const RulerIcon = () => ( ) interface TryOnStudioWrapperProps { savedLooks: SavedLook[] savedMeasurements: SavedMeasurement[] onSaveLook: (look: SavedLook) => void onDeleteLook: (id: number) => void onSaveMeasurement: (measurement: SavedMeasurement) => void onDeleteMeasurement: (id: number) => void } export function TryOnStudioWrapper({ savedLooks, savedMeasurements, onSaveLook, onDeleteLook, onSaveMeasurement, onDeleteMeasurement, }: TryOnStudioWrapperProps) { const [step, setStep] = useState("capture") const [userImage, setUserImage] = useState(null) const [userHeight, setUserHeight] = useState(null) const [selectedOutfit, setSelectedOutfit] = useState({ Top: null, Pants: null, Shoes: null, Accessory: null, }) const [clothingItems] = useState(CLOTHING_ITEMS) const [generatedImage, setGeneratedImage] = useState(null) const [fitAnalysis, setFitAnalysis] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [isLooksModalOpen, setIsLooksModalOpen] = useState(false) const [isMeasurementsModalOpen, setIsMeasurementsModalOpen] = useState(false) const handleImageCaptured = useCallback((img: UserImage) => { setUserImage(img) setStep("height") }, []) const handleImageUploaded = useCallback( async (file: File) => { try { const { base64, mimeType } = await fileToBase64(file) const url = URL.createObjectURL(file) handleImageCaptured({ base64, mimeType, url }) } catch (err) { setError("Failed to process the uploaded image.") console.error(err) } }, [handleImageCaptured], ) const handleStartOver = useCallback(() => { setStep("capture") setUserImage(null) setUserHeight(null) setSelectedOutfit({ Top: null, Pants: null, Shoes: null, Accessory: null }) setGeneratedImage(null) setFitAnalysis(null) setError(null) }, []) return (

{error && (

Error: {error}

)}

Try-On Studio - Step: {step}

This is a simplified placeholder. Full implementation pending.

) } [V0_FILE]jpg:file="public/white-oversized-t-shirt-with-black-1-of-1-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/white-oversized-t-shirt-with-black-1-of-1-logo-oEx6mV7BeYsz3uCcjgj9OZYe69V4lQ.jpg" isMerged="true" [V0_FILE]jpg:file="public/white-long-sleeve-shirt-with-black-1-of-1-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/white-long-sleeve-shirt-with-black-1-of-1-logo-XJmOwHk2CCbH4ZdwPAxzzZmnsHfjDb.jpg" isMerged="true" [V0_FILE]jpg:file="public/black-fitted-jeans.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/black-fitted-jeans-UBc5yKwEeSveCwnWj06j2HbtZupLmQ.jpg" isMerged="true" [V0_FILE]jpg:file="public/dark-blue-denim-jeans.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dark-blue-denim-jeans-jn41NPeLHzWe0PoU49vh191WrQL4ch.jpg" isMerged="true" [V0_FILE]png:file="public/white-minimalist-sneakers.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/white-minimalist-sneakers-7dVCFvY1UeLkadjXjYM8bMpicXTH1K.png" isMerged="true" [V0_FILE]jpg:file="public/black-leather-chelsea-boots.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/black-leather-chelsea-boots-9RCxpLCvPEK6UO0gDoDy019qBhB0MN.jpg" isMerged="true" [V0_FILE]png:file="public/silver-chain-necklace.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/silver-chain-necklace-SW33W0FEOR2xclcciHi4MxDcJglN6N.png" isMerged="true" [V0_FILE]jpg:file="public/black-baseball-cap.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/black-baseball-cap-cHD4BC8ZDRMQ791RMpcjSVjmAUbEb4.jpg" isMerged="true" [V0_FILE]png:file="public/1ofonelongsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1ofonelongsleeve-3VUTWRtRaz4pmHZZNhHZYur1tVzobu.png" isMerged="true" [V0_FILE]png:file="public/1ofonetanktop.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1ofonetanktop-xHaoR4lw3Xr9B1JqgtLOvRrXYoq4Go.png" isMerged="true" [V0_FILE]png:file="public/1ofonesleeveless.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1ofonesleeveles-kdbgCXbg9lTjXph0TAfA5RRgHYMDtn.png" isMerged="true" [V0_FILE]png:file="public/1ofoneteeshirt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1ofoneteeshirt-j0JlC4vrE3fUlQr5xB9ooFEpGbmpnF.png" isMerged="true" [V0_FILE]typescriptreact:file="components/try-on-studio.tsx" isMerged="true" "use client" import { useState, useCallback, useMemo, useEffect } from "react" import type { ClothingItem, AppStep, UserImage, SelectedOutfit, SavedLook, FitAnalysis, SavedMeasurement, } from "@/lib/types" import { CLOTHING_ITEMS } from "@/lib/constants" import { fileToBase64 } from "@/lib/image-helpers" import { generateOutfit, generateMeasurements, customizeOutfit } from "@/app/actions/gemini" import { WebcamCapture } from "./webcam-capture" import { HeightInputView } from "./height-input-view" import { ImageWithLoader } from "./image-with-loader" const SparklesIcon = ({ className = "h-6 w-6 mr-2" }: { className?: string }) => ( ) const DownloadIcon = () => ( ) const BookmarkIcon = () => ( ) const CollectionIcon = () => ( ) const RulerIcon = () => ( ) const TrashIcon = () => ( ) const ShoppingBagIcon = () => ( ) const CameraIcon = () => ( ) const formatMeasurement = (value: string): string => { const v = value.trim() if (/^[\d.-]+$/.test(v)) return `${v} inches` return v } const INITIAL_OUTFIT: SelectedOutfit = { Top: null, Pants: null, Shoes: null, Accessory: null } const LOOKS_STORAGE_KEY = "1ofone_saved_looks" const MEASUREMENTS_STORAGE_KEY = "1ofone_saved_measurements" interface TryOnStudioProps { onSaveLook: (look: SavedLook) => void onSaveMeasurement: (measurement: SavedMeasurement) => void savedLooks: SavedLook[] onDeleteLook: (id: number) => void savedMeasurements: SavedMeasurement[] onDeleteMeasurement: (id: number) => void } export function TryOnStudio({ onSaveLook, onSaveMeasurement, savedLooks: initialSavedLooks, onDeleteLook, savedMeasurements: initialSavedMeasurements, onDeleteMeasurement, }: TryOnStudioProps) { const [step, setStep] = useState("shop") const [userImage, setUserImage] = useState(null) const [userHeight, setUserHeight] = useState(null) const [generatedImage, setGeneratedImage] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [clothingItems] = useState(CLOTHING_ITEMS) const [selectedOutfit, setSelectedOutfit] = useState(INITIAL_OUTFIT) const [savedLooks, setSavedLooks] = useState(initialSavedLooks) const [savedMeasurements, setSavedMeasurements] = useState(initialSavedMeasurements) const [isLooksModalOpen, setIsLooksModalOpen] = useState(false) const [isMeasurementsModalOpen, setIsMeasurementsModalOpen] = useState(false) const [fitAnalysis, setFitAnalysis] = useState(null) const [activeCategory, setActiveCategory] = useState("All") useEffect(() => { try { const storedLooks = localStorage.getItem(LOOKS_STORAGE_KEY) if (storedLooks) setSavedLooks(JSON.parse(storedLooks)) const storedMeasurements = localStorage.getItem(MEASUREMENTS_STORAGE_KEY) if (storedMeasurements) setSavedMeasurements(JSON.parse(storedMeasurements)) } catch (e) { console.error("Failed to load saved data from localStorage", e) } }, []) const selectedItemsCount = Object.values(selectedOutfit).filter(Boolean).length const totalPrice = Object.values(selectedOutfit) .filter((item): item is ClothingItem => item !== null) .reduce((sum, item) => sum + item.price, 0) const handleImageCaptured = useCallback((capturedImage: UserImage) => { setUserImage(capturedImage) setStep("height") }, []) const handleImageUploaded = useCallback(async (file: File) => { try { setIsLoading(true) setError(null) const { base64, mimeType } = await fileToBase64(file) const url = URL.createObjectURL(file) setUserImage({ base64, mimeType, url }) setStep("height") } catch (err) { setError("Failed to process the uploaded image.") console.error(err) } finally { setIsLoading(false) } }, []) const handleHeightSubmitted = (height: string) => { setUserHeight(height) handleProceedToMeasure() } const handleSelectClothing = (item: ClothingItem) => { setSelectedOutfit((prev) => ({ ...prev, [item.type]: prev[item.type]?.id === item.id ? null : item, })) } const handleProceedToTryOn = () => { const hasSelection = Object.values(selectedOutfit).some((item) => item !== null) if (!hasSelection) { setError("Please select at least one item to try on.") return } setStep("capture") } const handleProceedToMeasure = useCallback(async () => { if (!userImage) { setError("No user image available.") return } const selectedItems = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) if (selectedItems.length === 0) { setError("Please select at least one clothing item.") return } setStep("measure") setIsLoading(true) setError(null) try { const result = await generateMeasurements(userImage, selectedItems, userHeight) setFitAnalysis(result) } catch (err) { setError(err instanceof Error ? err.message : "An unknown error occurred.") setStep("capture") } finally { setIsLoading(false) } }, [userImage, userHeight, selectedOutfit]) const handleProceedToGenerate = useCallback(async () => { if (!userImage) return const selectedItems = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) setStep("generate") setIsLoading(true) setError(null) try { const resultBase64 = await generateOutfit(userImage, selectedItems) setGeneratedImage(resultBase64) setStep("customize") } catch (err) { const errorMessage = err instanceof Error ? err.message : "An unknown error occurred." if (errorMessage.includes("quota") || errorMessage.includes("429")) { setError("API quota exceeded. Please wait and try again, or upgrade your Gemini API plan.") } else { setError(errorMessage) } setStep("measure") } finally { setIsLoading(false) } }, [userImage, selectedOutfit]) const handleFinalize = (finalImage: string) => { setGeneratedImage(finalImage) setStep("result") } const handleStartOver = () => { setUserImage(null) setGeneratedImage(null) setError(null) setIsLoading(false) setStep("shop") setSelectedOutfit(INITIAL_OUTFIT) setFitAnalysis(null) setUserHeight(null) } const handleBackToShop = () => { setStep("shop") } const handleSaveLook = useCallback(() => { if (!generatedImage || !userImage) return const newLook: SavedLook = { id: Date.now(), finalImage: generatedImage, originalImage: userImage, selectedOutfit: selectedOutfit, } const updatedLooks = [newLook, ...savedLooks] setSavedLooks(updatedLooks) localStorage.setItem(LOOKS_STORAGE_KEY, JSON.stringify(updatedLooks)) onSaveLook(newLook) }, [generatedImage, userImage, selectedOutfit, savedLooks, onSaveLook]) const handleDeleteLook = (id: number) => { const updatedLooks = savedLooks.filter((look) => look.id !== id) setSavedLooks(updatedLooks) localStorage.setItem(LOOKS_STORAGE_KEY, JSON.stringify(updatedLooks)) onDeleteLook(id) } const handleSaveMeasurements = useCallback(() => { if (!fitAnalysis || !userImage) return const newMeasurement: SavedMeasurement = { id: Date.now(), fitAnalysis, userImage, selectedOutfit, } const updatedMeasurements = [newMeasurement, ...savedMeasurements] setSavedMeasurements(updatedMeasurements) localStorage.setItem(MEASUREMENTS_STORAGE_KEY, JSON.stringify(updatedMeasurements)) onSaveMeasurement(newMeasurement) }, [fitAnalysis, userImage, selectedOutfit, savedMeasurements, onSaveMeasurement]) const handleDeleteMeasurement = (id: number) => { const updatedMeasurements = savedMeasurements.filter((m) => m.id !== id) setSavedMeasurements(updatedMeasurements) localStorage.setItem(MEASUREMENTS_STORAGE_KEY, JSON.stringify(updatedMeasurements)) onDeleteMeasurement(id) } const renderContent = () => { if (isLoading && (step === "generate" || step === "measure")) { return step === "generate" ? : } switch (step) { case "shop": return ( ) case "capture": return (

Take Your Photo

Stand in front of the camera to try on your selected items

) case "height": if (userImage) { return ( setStep("capture")} /> ) } break case "measure": if (userImage && fitAnalysis) { return ( setStep("height")} onSave={handleSaveMeasurements} /> ) } break case "generate": return case "customize": if (generatedImage) { return ( setStep("measure")} /> ) } break case "result": if (userImage && generatedImage) { return ( ) } break } return null } return (

{error && !isLoading && (

Error: {error}

)} {renderContent()} setIsLooksModalOpen(false)} looks={savedLooks} onDelete={handleDeleteLook} /> setIsMeasurementsModalOpen(false)} measurements={savedMeasurements} onDelete={handleDeleteMeasurement} />

) } // Shopping View Component const ShopView = ({ clothingItems, selectedOutfit, onSelectClothing, onProceedToTryOn, activeCategory, setActiveCategory, totalPrice, selectedItemsCount, }: { clothingItems: ClothingItem[] selectedOutfit: SelectedOutfit onSelectClothing: (item: ClothingItem) => void onProceedToTryOn: () => void activeCategory: ClothingItem["type"] | "All" setActiveCategory: (cat: ClothingItem["type"] | "All") => void totalPrice: number selectedItemsCount: number }) => { const categories: (ClothingItem["type"] | "All")[] = ["All", "Top", "Pants", "Shoes", "Accessory"] const filteredItems = activeCategory === "All" ? clothingItems : clothingItems.filter(item => item.type === activeCategory) return (

{/* Header */}

Shop the Collection

Select items to build your outfit, then try them on virtually

{/* Category Filter */}

{categories.map((cat) => ( ))}

{/* Product Grid */}

{filteredItems.map((item) => { const isSelected = selectedOutfit[item.type]?.id === item.id return (

onSelectClothing(item)} className={`group cursor-pointer rounded-2xl overflow-hidden transition-all duration-300 glass-panel ${ isSelected ? "ring-2 ring-white shadow-[0_0_30px_rgba(255,255,255,0.3)]" : "hover:shadow-[0_0_20px_rgba(255,255,255,0.1)]" }`} > {/* Image */}

{isSelected && (

)}

{item.type}

{/* Details */}

{item.name}

{item.description}

${item.price}

) })}

{/* Fixed Bottom Cart Bar */}

{selectedItemsCount} items

${totalPrice}

{selectedItemsCount > 0 && (

{Object.values(selectedOutfit) .filter((item): item is ClothingItem => item !== null) .map((item) => (

))}

)}

) } // Outfit Summary Bar for capture step const OutfitSummaryBar = ({ selectedOutfit, totalPrice }: { selectedOutfit: SelectedOutfit; totalPrice: number }) => { const items = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) return (

{items.map((item) => (

))}

${totalPrice}

) } // Loading Views const MeasurementsLoadingView = () => (

Analyzing Your Fit

Our AI is calculating your measurements and fit analysis...

) const GenerationView = () => (

Forging Your Look

Creating your virtual try-on experience...

) // Measurements View const MeasurementsView = ({ fitAnalysis, onProceed, onBack, onSave, }: { fitAnalysis: FitAnalysis onProceed: () => void onBack: () => void onSave: () => void }) => (

Fit Analysis

Your Measurements

{fitAnalysis.personMeasurements.measurements.map((m, i) => (

{m.name}

{formatMeasurement(m.value)}

))}

{fitAnalysis.personMeasurements.notes && (

{fitAnalysis.personMeasurements.notes}

)}

Clothing Fit

{fitAnalysis.clothingFit.map((fit, i) => (

{fit.itemName}

{fit.itemType}

{fit.fitDescription}

{fit.garmentMeasurements.map((gm, j) => ( {gm.name}: {formatMeasurement(gm.value)} ))}

))}

) // Customize View const CustomizeView = ({ generatedImage, selectedOutfit, onFinalize, onBack, }: { generatedImage: string selectedOutfit: SelectedOutfit onFinalize: (image: string) => void onBack: () => void }) => { const [isCustomizing, setIsCustomizing] = useState(false) const [currentImage, setCurrentImage] = useState(generatedImage) const handleCustomize = async (modification: string) => { setIsCustomizing(true) try { const items = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) const result = await customizeOutfit(currentImage, items, modification) setCurrentImage(result) } catch (error) { console.error("Customization failed:", error) } finally { setIsCustomizing(false) } } return (

Customize Your Style

{isCustomizing ? (

Applying customization...

) : (

{["Adjust lighting", "Add shadows", "Improve fit", "Enhance details"].map((mod) => ( ))}

)}

) } // Result View const ResultView = ({ originalImage, finalImage, onStartOver, onSaveLook, selectedOutfit, totalPrice, }: { originalImage: UserImage finalImage: string onStartOver: () => void onSaveLook: () => void selectedOutfit: SelectedOutfit totalPrice: number }) => { const items = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) const handleDownload = () => { const link = document.createElement("a") link.href = `data:image/png;base64,${finalImage}` link.download = "1ofone-look.png" link.click() } return (

Your Look

{/* Before/After Images */}

Before

After

{/* Order Summary */}

Your Outfit

{items.map((item) => (

{item.name}

{item.type}

${item.price}

))}

Total ${totalPrice}

) } // Modals const SavedLooksModal = ({ isOpen, onClose, looks, onDelete, }: { isOpen: boolean onClose: () => void looks: SavedLook[] onDelete: (id: number) => void }) => { if (!isOpen) return null return (

e.stopPropagation()}>

My Saved Looks

{looks.length === 0 ? (

No saved looks yet

) : (

{looks.map((look) => (

))}

)}

) } const SavedMeasurementsModal = ({ isOpen, onClose, measurements, onDelete, }: { isOpen: boolean onClose: () => void measurements: SavedMeasurement[] onDelete: (id: number) => void }) => { if (!isOpen) return null return (

e.stopPropagation()}>

My Saved Measurements

{!measurements || measurements.length === 0 ? (

No saved measurements yet

) : (

{measurements.map((m) => (

{m.fitAnalysis.personMeasurements.measurements.slice(0, 4).map((measurement, i) => (

{measurement.name}

{formatMeasurement(measurement.value)}

))}

)}

) } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export interface ClothingItem { id: number name: string type: "Top" | "Pants" imageUrl: string description: string price: number } export type AppStep = "shop" | "capture" | "height" | "measure" | "generate" | "customize" | "result" export type Page = "home" | "try-on" | "message" | "contact" export interface UserImage { base64: string mimeType: string url: string } export interface SelectedOutfit { Top: ClothingItem | null Pants: ClothingItem | null } export interface SavedLook { id: number finalImage: string originalImage: UserImage selectedOutfit: SelectedOutfit } export interface Measurement { name: string value: string } export interface PersonMeasurements { measurements: Measurement[] notes: string } export interface GarmentFit { itemName: string itemType: ClothingItem["type"] fitDescription: string garmentMeasurements: Measurement[] } export interface FitAnalysis { personMeasurements: PersonMeasurements clothingFit: GarmentFit[] } export interface SavedMeasurement { id: number fitAnalysis: FitAnalysis userImage: UserImage selectedOutfit: SelectedOutfit } export interface CartItem { id: number generatedImage: string originalImage: UserImage selectedOutfit: SelectedOutfit totalPrice: number createdAt: Date } [V0_FILE]png:file="public/1ofone-wide-leg-jeans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts-XgL5Rgq007FzyvL9yMGxcNB8yeTr50.png" isMerged="true" [V0_FILE]png:file="public/1ofone-neon-black-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4-DS7kY7Vr6pRzF7w7kbYOhI3si94ZfO.png" isMerged="true" [V0_FILE]png:file="public/1ofone-neon-crop-long.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-8EiRPQH4Ja3RSBQi6jTm63uf5RTTwU.png" isMerged="true" [V0_FILE]png:file="public/1ofone-gothic-black-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5-aykeG02s5uQP0xs8P9XD3Dwokz0jSA.png" isMerged="true" [V0_FILE]png:file="public/1ofone-neon-white-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-nLHv5A1EsdZW2KHQDXslVhzRAz622Q.png" isMerged="true" [V0_FILE]png:file="public/1ofone-neon-gothic-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/15-ZqpvfEo9kaG00rJvVLRBPsbQJCSvyb.png" isMerged="true" [V0_FILE]png:file="public/1ofone-white-gothic-longsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/13-BD1oZgykmohJNdlY1N3uKBSIVzGs0c.png" isMerged="true" [V0_FILE]png:file="public/1ofone-orange-gothic-longsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/14-o2BCtRmLBljjXNhJK2AnVBl9F7khli.png" isMerged="true" [V0_FILE]png:file="public/1ofone-black-wash-jeans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/16-QfPF7bVxtlobRq25p6PRH6ggnWW42L.png" isMerged="true" [V0_FILE]png:file="public/1ofone-neon-gothic-longsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%281%29-NICQlSwcv9KQef4vRVHv6CbzmI2iiV.png" isMerged="true" [V0_FILE]png:file="public/1ofone-cyan-crop-longsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%283%29-i1VLKuV454LEMc1g6eHQCxeOvL6J9h.png" isMerged="true" [V0_FILE]png:file="public/1ofone-cyan-gothic-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%282%29-XsIrwf0UJbr7urh88G1RnBhtq7lLIj.png" isMerged="true" [V0_FILE]png:file="public/1ofone-pink-crop-longsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%284%29-4QhTvYNd82BQyM47Eaa1GgzOXFWZEi.png" isMerged="true" [V0_FILE]png:file="public/1ofone-pink-white-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%285%29-WcZocw3AB28r9Y5opJogpIQB4JPfI9.png" isMerged="true" [V0_FILE]png:file="public/1ofone-pink-wide-leg-jeans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5-xzCw0NRHq0YjK8Hn8ilmw7oWJfyqca.png" isMerged="true" [V0_FILE]png:file="public/1ofone-neon-wide-leg-jeans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-RmGNKKxdyGOucALcuLa04ejXI7075e.png" isMerged="true" [V0_FILE]png:file="public/1ofone-cyan-wide-leg-jeans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-I3W7txx38DWCljlx1BwX1bbuj0OdPV.png" isMerged="true" [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-inter, "Inter"), sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback"; --font-heading: var(--font-anybody, "Anybody"), sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @keyframes waterfall { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } .animated-gradient-background { background: linear-gradient(180deg, #000000, #0a0a0a, #111111, #0a0a0a, #000000); background-size: 100% 400%; animation: waterfall 20s linear infinite; } /* Brand Colors */ .text-brand-green { color: #05e0e9; } .text-brand-orange { color: #daf000; } .bg-brand-green { background-color: #05e0e9; } .bg-brand-orange { background-color: #daf000; } .border-brand-green { border-color: #05e0e9; } .border-brand-orange { border-color: #daf000; } .glass-panel { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .glitch { position: relative; color: white; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; } .glitch::before { left: 2px; text-shadow: -1px 0 #05e0e9; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-1 5s infinite linear alternate-reverse; } .glitch::after { left: -2px; text-shadow: -1px 0 #daf000; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-2 5s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0% { clip: rect(30px, 9999px, 10px, 0); } 20% { clip: rect(80px, 9999px, 90px, 0); } 40% { clip: rect(10px, 9999px, 50px, 0); } 60% { clip: rect(60px, 9999px, 20px, 0); } 80% { clip: rect(20px, 9999px, 70px, 0); } 100% { clip: rect(90px, 9999px, 30px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(15px, 9999px, 60px, 0); } 20% { clip: rect(60px, 9999px, 10px, 0); } 40% { clip: rect(30px, 9999px, 70px, 0); } 60% { clip: rect(90px, 9999px, 20px, 0); } 80% { clip: rect(10px, 9999px, 80px, 0); } 100% { clip: rect(50px, 9999px, 40px, 0); } } .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.3s ease-in forwards; } .font-heading { font-family: var(--font-heading), sans-serif; } } [V0_FILE]typescriptreact:file="components/webcam-capture.tsx" isMerged="true" "use client" import { useState, useRef, useCallback, useEffect } from "react" import type { UserImage } from "@/lib/types" import { dataUrlToParts } from "@/lib/image-helpers" interface WebcamCaptureProps { onImageCaptured: (userImage: UserImage) => void onImageUploaded: (file: File) => void } const CameraIcon = () => ( ) const UploadIcon = () => ( ) export function WebcamCapture({ onImageCaptured, onImageUploaded }: WebcamCaptureProps) { const videoRef = useRef(null) const canvasRef = useRef(null) const fileInputRef = useRef(null) const [stream, setStream] = useState(null) const [error, setError] = useState(null) const [isCountingDown, setIsCountingDown] = useState(false) const [countdown, setCountdown] = useState(5) const countdownIntervalRef = useRef | null>(null) const [videoDevices, setVideoDevices] = useState([]) const [selectedDeviceId, setSelectedDeviceId] = useState("") const [cameraStarted, setCameraStarted] = useState(false) const [cameraUnavailable, setCameraUnavailable] = useState(false) const startCamera = useCallback(async (deviceId?: string) => { if (stream) { stream.getTracks().forEach((track) => track.stop()) } try { const constraints: MediaStreamConstraints = { video: deviceId ? { deviceId: { exact: deviceId } } : { facingMode: "user" }, } const newStream = await navigator.mediaDevices.getUserMedia(constraints) if (videoRef.current) { videoRef.current.srcObject = newStream } setStream(newStream) setError(null) setCameraStarted(true) setCameraUnavailable(false) const devices = await navigator.mediaDevices.enumerateDevices() const videoInputs = devices.filter((device) => device.kind === "videoinput") setVideoDevices(videoInputs) if (!deviceId && videoInputs.length > 0) { setSelectedDeviceId(videoInputs[0].deviceId) } } catch { setCameraUnavailable(true) setError("Camera access was denied. You can still upload a photo below.") } }, [stream]) // Auto-start camera on mount useEffect(() => { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { startCamera() } else { setCameraUnavailable(true) } return () => { if (stream) { stream.getTracks().forEach((track) => track.stop()) } } }, []) // Switch camera when device selection changes useEffect(() => { if (cameraStarted && selectedDeviceId) { startCamera(selectedDeviceId) } }, [selectedDeviceId]) const handleCapture = useCallback(() => { if (videoRef.current && canvasRef.current) { const video = videoRef.current const canvas = canvasRef.current canvas.width = video.videoWidth canvas.height = video.videoHeight const context = canvas.getContext("2d") context?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight) const dataUrl = canvas.toDataURL("image/jpeg") const { base64, mimeType } = dataUrlToParts(dataUrl) onImageCaptured({ base64, mimeType, url: dataUrl }) } }, [onImageCaptured]) const startCountdown = () => { if (!stream || isCountingDown) return setIsCountingDown(true) setCountdown(5) countdownIntervalRef.current = setInterval(() => { setCountdown((prev) => { if (prev <= 1) { if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current) setIsCountingDown(false) setTimeout(() => handleCapture(), 100) return 5 } return prev - 1 }) }, 1000) } useEffect(() => { return () => { if (countdownIntervalRef.current) { clearInterval(countdownIntervalRef.current) } } }, []) return (

Step 1: Capture Your Canvas

Frame yourself in good light. A clear photo works best.

{/* Camera Preview */}

{cameraStarted ? (

) } [V0_FILE]typescriptreact:file="components/image-with-loader.tsx" isMerged="true" "use client" interface ImageWithLoaderProps { src: string alt: string className: string } export function ImageWithLoader({ src, alt, className }: ImageWithLoaderProps) { return ( {alt}

) } [V0_FILE]typescript:file="app/actions/gemini.ts" isMerged="true" "use server" import { GoogleGenAI, Modality, Type } from "@google/genai" import type { ClothingItem, UserImage, FitAnalysis } from "@/lib/types" import { dataUrlToParts } from "@/lib/image-helpers" const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY as string }) function handleGeminiError(error: any, context: string): Error { if (error?.message?.includes("429") || error?.message?.includes("quota")) { return new Error("API quota exceeded. Please wait a few moments and try again, or upgrade your Gemini API plan.") } if (error?.message?.includes("401") || error?.message?.includes("authentication")) { return new Error("Invalid API key. Please check your GEMINI_API_KEY environment variable.") } console.error(`Error in ${context}:`, error) return new Error(`Failed to ${context}. Please try again.`) } export async function generateClothingItem(prompt: string): Promise { try { const fullPrompt = `Photorealistic product photo of ${prompt}. Studio lighting, white background, centered, high detail.` const response = await ai.models.generateContent({ model: "gemini-2.5-flash-image", contents: { parts: [{ text: fullPrompt }], }, config: { responseModalities: [Modality.IMAGE], }, }) if (response.candidates?.[0]?.content?.parts) { for (const part of response.candidates[0].content.parts) { if (part.inlineData) { return part.inlineData.data } } } throw new Error("No image was generated by the API for the clothing item.") } catch (error) { throw handleGeminiError(error, "generate clothing item") } } export async function generateMeasurements( userImage: UserImage, clothingItems: ClothingItem[], height: string | null, ): Promise { try { const userImagePart = { inlineData: { data: userImage.base64, mimeType: userImage.mimeType, }, } const clothingDescription = clothingItems.map((item) => `- ${item.type}: ${item.description}`).join("\n") const heightInfo = height ? `The person has provided their height as ${height}. Use this information to accurately scale the pixel dimensions to real-world inches.` : `Assume they are of average height for their apparent gender and build, but prioritize visual proportions.` const textPrompt = `You are an expert AI virtual tailor. Analyze the person in the provided image. ${heightInfo} 1. COMPREHENSIVE BODY MEASUREMENTS: Based on their visible proportions and provided height, estimate the following specific body measurements in inches: - Chest / Bust - Waist - Hips - Shoulder Width (seam to seam) - Sleeve Length (shoulder to wrist) - Inseam (crotch to floor) - Neck Circumference - Thigh Circumference Add a brief note regarding body type and sizing advice based on these observations. 2. GARMENT FIT ANALYSIS: Analyze the following selected clothing items: ${clothingDescription} For each item: - Provide a detailed "fitDescription". Go beyond simple labels. Explain how it will interact with the user's specific measurements (e.g., "The shoulders will drape slightly past your natural shoulder line," "The waist is high-rise and will sit comfortably above the hips," "The pant legs will stack at the ankle due to the estimated inseam"). - Estimate specific garment measurements in inches for a standard size Medium (M), adjusting for any specific style descriptors (like "oversized", "cropped", "baggy", "slim"). - For Tops: Chest width, Body Length, Sleeve Length, Shoulder width. - For Pants: Waist width, Inseam length, Rise, Leg Opening. - For Shoes/Accessories: General dimensions if applicable. Provide the output as a JSON object complying with the specified schema. Do not include any markdown formatting.` const textPart = { text: textPrompt } const response = await ai.models.generateContent({ model: "gemini-2.5-flash", contents: { parts: [userImagePart, textPart], }, config: { responseMimeType: "application/json", responseSchema: { type: Type.OBJECT, properties: { personMeasurements: { type: Type.OBJECT, properties: { measurements: { type: Type.ARRAY, items: { type: Type.OBJECT, properties: { name: { type: Type.STRING }, value: { type: Type.STRING }, }, required: ["name", "value"], }, }, notes: { type: Type.STRING }, }, required: ["measurements", "notes"], }, clothingFit: { type: Type.ARRAY, items: { type: Type.OBJECT, properties: { itemName: { type: Type.STRING }, itemType: { type: Type.STRING }, fitDescription: { type: Type.STRING }, garmentMeasurements: { type: Type.ARRAY, items: { type: Type.OBJECT, properties: { name: { type: Type.STRING }, value: { type: Type.STRING }, }, required: ["name", "value"], }, }, }, required: ["itemName", "itemType", "fitDescription", "garmentMeasurements"], }, }, }, required: ["personMeasurements", "clothingFit"], }, }, }) const jsonResponse = JSON.parse(response.text) return jsonResponse as FitAnalysis } catch (error) { throw handleGeminiError(error, "generate fit analysis") } } async function fetchImageAsBase64(url: string): Promise<{ base64: string; mimeType: string } | null> { try { const response = await fetch(url) if (!response.ok) return null const buffer = await response.arrayBuffer() const base64 = Buffer.from(buffer).toString("base64") const mimeType = response.headers.get("content-type") || "image/png" return { base64, mimeType } } catch { return null } } export async function generateOutfit(userImage: UserImage, clothingItems: ClothingItem[]): Promise { try { const userImagePart = { inlineData: { data: userImage.base64, mimeType: userImage.mimeType, }, } const parts: ({ inlineData: { data: string; mimeType: string } } | { text: string })[] = [userImagePart] // Fetch clothing images - handle both data URLs and public file paths const clothingImagePromises = clothingItems.map(async (item) => { if (item.imageUrl.startsWith("data:")) { const { base64, mimeType } = dataUrlToParts(item.imageUrl) return { inlineData: { data: base64, mimeType } } } // For public paths like "/1ofone-classic-tee.png", fetch from the deployed URL if (item.imageUrl.startsWith("/")) { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000" const result = await fetchImageAsBase64(`${baseUrl}${item.imageUrl}`) if (result) { return { inlineData: result } } } return null }) const clothingImageResults = await Promise.all(clothingImagePromises) const clothingImageParts = clothingImageResults.filter( (part): part is { inlineData: { data: string; mimeType: string } } => part !== null ) parts.push(...clothingImageParts) const clothingDescription = clothingItems.map((item) => item.description).join(", ") console.log("[v0] generateOutfit: clothing images fetched:", clothingImageParts.length, "of", clothingItems.length) let textPrompt: string if (clothingImageParts.length > 0) { textPrompt = `Put the exact clothing from the reference image(s) onto the person. Match the logo, colors, and fit exactly. Keep the person's face, pose, and background unchanged. Items: ${clothingDescription}` } else { textPrompt = `Generate a realistic photo of this person wearing ${clothingDescription}. Keep their face, pose, and background unchanged. Only change the clothing.` } const textPart = { text: textPrompt } parts.push(textPart) const response = await ai.models.generateContent({ model: "gemini-2.5-flash-image", contents: { parts: parts, }, config: { responseModalities: [Modality.IMAGE], }, }) for (const part of response.candidates[0].content.parts) { if (part.inlineData) { return part.inlineData.data } } throw new Error("No image was generated by the API.") } catch (error) { throw handleGeminiError(error, "generate outfit image") } } export async function customizeOutfit(generatedImage: UserImage, instruction: string): Promise { try { const imagePart = { inlineData: { data: generatedImage.base64, mimeType: generatedImage.mimeType, }, } const textPart = { text: `Based on the provided image, perform the following modification: "${instruction}". Only alter the specified clothing item. The person, background, and any other clothing must remain completely unchanged. The result should be a realistic, non-edited photo.`, } const response = await ai.models.generateContent({ model: "gemini-2.5-flash-image", contents: { parts: [imagePart, textPart], }, config: { responseModalities: [Modality.IMAGE], }, }) for (const part of response.candidates[0].content.parts) { if (part.inlineData) { return part.inlineData.data } } throw new Error("No image was generated by the API for customization.") } catch (error) { throw handleGeminiError(error, "customize outfit") } } [V0_FILE]jpeg:file="public/bts-bleach-tee.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1B2AAEB9-5C7F-44B6-A21E-B9D7BAA71411_1_105_c-47QE7fd7WlyHP6KwtYsq7XYxr3m1RC.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/bts-vinyl-press.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/33A640A4-1020-4891-8B40-37568395D607_1_105_c-9ywL64BOE5c6FXV8K5jw6njQozcati.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/bts-neon-bleach-tee.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_9745%202-jxfMEnUz0LNM7YGmi79Egkw8Gdj31G.jpeg" isMerged="true" [V0_FILE]png:file="public/1ofone-graffiti-white-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts-11oKbn1FwP5EBPqjeO9kV0PqglEzLn.png" isMerged="true" [V0_FILE]png:file="public/1ofone-graffiti-wide-leg-jeans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%281%29-HkbUBsbMiUXlQlhpmdgulWFit1x3Lx.png" isMerged="true" [V0_FILE]png:file="public/1ofone-graffiti-neon-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capstone_1ofOne_Shirts%20%282%29-TAJv0Gzca4tgb5kqZddvaYga387V4Z.png" isMerged="true" [V0_FILE]jpeg:file="public/community-tee-railing.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0938%202-N2ZVWUkOV6IJHdS8cl8JRa7zjd31mz.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/community-streetwear-fit.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0942-lJlntpjoXlarwZi1SAuIts6nJaB8g3.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/community-photoshoot.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0935-nGDyyMfag7ne4ORRNQxp5VAw8ygNim.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/bts-recording-process.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0923%202-Ump3LbdM7yioupWa7noxTiGmYzX7Q1.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/bts-tee-collection.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0930-sRtdq51s0LOmxp4WXjl01ibeQbYlAH.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/message-page.tsx" isMerged="true" "use client" export function MessagePage() { return (

OUR MESSAGE

One of One is a speculative retail platform that integrates AI-powered digital try-on technology to reduce uncertainty in online apparel shopping. By allowing users to visualize garments proportionately rendered onto their own bodies, the platform restores embodiment to digital retail environments.

The project explores how personalization, accessibility, and interactive technology can reshape consumer confidence and reduce inefficiencies in fashion e-commerce.

{/* Behind the Scenes */}

Behind the Scenes

Recording behind the scenes video of the bleach splatter process on iPhone

Collection of 1OF1 t-shirts on photography backdrop - bleach splatter and graffiti designs

) } [V0_FILE]jpeg:file="public/1ofone-bleach-splatter-tee.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0929-YcMtPcJSdYWLfLRRZZTmLrlUaDUK49.jpeg" isMerged="true" [V0_FILE]png:file="public/1ofone-sunset-bleach-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0010.png-N38gZMHcXpePdKqgLHJzirpJ6BsYk0.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/1ofone-bleach-splatter-tee-v2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0010.png-N38gZMHcXpePdKqgLHJzirpJ6BsYk0.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/community-neon-leather.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0059-Vozf50VRPNXZf7JR9vlIkOEpZhBraj.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/hero-background.mov" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/copy_57ECDA08-5147-4515-8D30-412E4423CC9D-M33tjWGIOMScGIw8A2AKUQvKaLpHWo.mov" isMerged="true" Non-image binary files cannot be read directly. It is available at the following URL: https://blobs.vusercontent.net/blob/copy_57ECDA08-5147-4515-8D30-412E4423CC9D-M33tjWGIOMScGIw8A2AKUQvKaLpHWo.mov [V0_FILE]typescriptreact:file="components/try-on-flow.tsx" isMerged="true" "use client" import { useState, useCallback } from "react" import type { ClothingItem, UserImage, SelectedOutfit, FitAnalysis, } from "@/lib/types" import { fileToBase64 } from "@/lib/image-helpers" import { generateOutfit, generateMeasurements } from "@/app/actions/gemini" import { WebcamCapture } from "./webcam-capture" import { HeightInputView } from "./height-input-view" import { ImageWithLoader } from "./image-with-loader" type FlowStep = "capture" | "height" | "measure" | "generate" | "result" interface TryOnFlowProps { selectedOutfit: SelectedOutfit totalPrice: number onClose: () => void onStartOver: () => void onAddToCart: (generatedImage: string, originalImage: UserImage, outfit: SelectedOutfit, price: number) => void } const DownloadIcon = () => ( ) const ShareIcon = () => ( ) const TwitterIcon = () => ( ) const InstagramIcon = () => ( ) const CopyIcon = () => ( ) const formatMeasurement = (value: string): string => { const v = value.trim() if (/^[\d.-]+$/.test(v)) return `${v} inches` return v } export function TryOnFlow({ selectedOutfit, totalPrice, onClose, onStartOver, onAddToCart }: TryOnFlowProps) { const [step, setStep] = useState("capture") const [userImage, setUserImage] = useState(null) const [userHeight, setUserHeight] = useState(null) const [generatedImage, setGeneratedImage] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [fitAnalysis, setFitAnalysis] = useState(null) const selectedItems = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) const handleImageCaptured = useCallback((capturedImage: UserImage) => { setUserImage(capturedImage) setStep("height") }, []) const handleImageUploaded = useCallback(async (file: File) => { try { setIsLoading(true) setError(null) const { base64, mimeType } = await fileToBase64(file) const url = URL.createObjectURL(file) setUserImage({ base64, mimeType, url }) setStep("height") } catch (err) { setError("Failed to process the uploaded image.") console.error(err) } finally { setIsLoading(false) } }, []) const handleHeightSubmitted = (height: string) => { setUserHeight(height) handleProceedToMeasure(height) } const handleProceedToMeasure = useCallback(async (height?: string) => { if (!userImage) { setError("No user image available.") return } setStep("measure") setIsLoading(true) setError(null) try { const result = await generateMeasurements(userImage, selectedItems, height || userHeight) setFitAnalysis(result) } catch (err) { setError(err instanceof Error ? err.message : "An unknown error occurred.") setStep("capture") } finally { setIsLoading(false) } }, [userImage, userHeight, selectedItems]) const handleProceedToGenerate = useCallback(async () => { if (!userImage) return setStep("generate") setIsLoading(true) setError(null) try { const resultBase64 = await generateOutfit(userImage, selectedItems) setGeneratedImage(resultBase64) setStep("result") } catch (err) { const errorMessage = err instanceof Error ? err.message : "An unknown error occurred." if (errorMessage.includes("quota") || errorMessage.includes("429")) { setError("API quota exceeded. Please wait and try again, or upgrade your Gemini API plan.") } else { setError(errorMessage) } setStep("measure") } finally { setIsLoading(false) } }, [userImage, selectedItems]) const [showShareMenu, setShowShareMenu] = useState(false) const [copied, setCopied] = useState(false) const handleDownload = () => { if (!generatedImage) return const link = document.createElement("a") link.href = generatedImage.startsWith("data:") ? generatedImage : `data:image/png;base64,${generatedImage}` link.download = `1ofone-look-${Date.now()}.png` link.click() } const handleShare = async (platform: "twitter" | "instagram" | "copy") => { const shareText = "Check out my new look from 1 of One! #1ofOne #VirtualTryOn" const shareUrl = "https://1ofonecapstone.vercel.app" if (platform === "twitter") { window.open( `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`, "_blank" ) } else if (platform === "instagram") { // Download image first for Instagram (can't directly share) handleDownload() alert("Image downloaded! Open Instagram and share from your camera roll.") } else if (platform === "copy") { try { await navigator.clipboard.writeText(`${shareText} ${shareUrl}`) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch { alert("Failed to copy link") } } setShowShareMenu(false) } return (

{/* Header */}

1 of One

{error && !isLoading && (

Error: {error}

)} {/* Capture Step */} {step === "capture" && (

Take Your Photo

Stand in front of the camera to try on your selected items

)} {/* Height Step */} {step === "height" && userImage && ( setStep("capture")} /> )} {/* Measure Step */} {step === "measure" && ( isLoading ? (

Analyzing Your Fit

Our AI is calculating your measurements...

) : fitAnalysis && ( setStep("height")} /> ) )} {/* Generate Step */} {step === "generate" && (

Forging Your Look

Creating your virtual try-on...

)} {/* Result Step */} {step === "result" && userImage && generatedImage && (

Your New Look

Before and after comparison

Before

After

{/* Order Summary */}

Order Summary

{selectedItems.map((item) => (

{item.name}

{item.type}

${item.price}

))}

Total ${totalPrice}

{/* Actions */}

{/* Share Button with Dropdown */}

{showShareMenu && (

)}

) } // Outfit Summary Component function OutfitSummary({ selectedOutfit, totalPrice }: { selectedOutfit: SelectedOutfit; totalPrice: number }) { const selectedItems = Object.values(selectedOutfit).filter((item): item is ClothingItem => item !== null) return (

{selectedItems.map((item) => (

))}

{selectedItems.length} items ${totalPrice}

) } // Editable Measurement Card function EditableMeasurement({ name, value, onChange, }: { name: string value: string onChange: (newValue: string) => void }) { const [isEditing, setIsEditing] = useState(false) const [editValue, setEditValue] = useState("") const numericValue = value.replace(/[^0-9.]/g, "") const handleStartEdit = () => { setEditValue(numericValue) setIsEditing(true) } const handleSave = () => { if (editValue.trim()) { onChange(editValue.trim()) } setIsEditing(false) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") handleSave() if (e.key === "Escape") setIsEditing(false) } if (isEditing) { return (

{name}

setEditValue(e.target.value)} onKeyDown={handleKeyDown} onBlur={handleSave} autoFocus className="w-20 bg-transparent text-white text-xl font-bold text-center border-b-2 border-[#05e0e9] outline-none appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" /> in

) } return ( ) } // Measurements View Component function MeasurementsView({ fitAnalysis, onProceed, onBack, }: { fitAnalysis: FitAnalysis onProceed: () => void onBack: () => void }) { const [measurements, setMeasurements] = useState( () => fitAnalysis.personMeasurements?.measurements?.map((m) => ({ ...m })) || [] ) const handleMeasurementChange = (index: number, newValue: string) => { setMeasurements((prev) => { const updated = [...prev] updated[index] = { ...updated[index], value: newValue } return updated }) } return (

Your Body Measurements

AI-powered body analysis and garment fit estimates

{/* Body Measurements Section */}

Estimated Body Measurements

Tap any value to edit

{measurements.map((m, i) => ( handleMeasurementChange(i, newValue)} /> ))}

{fitAnalysis.personMeasurements?.notes && (

{fitAnalysis.personMeasurements.notes}

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Anybody, Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const anybody = Anybody({ weight: ["400", "700", "800"], subsets: ["latin"], variable: "--font-anybody", display: "swap", }) export const metadata: Metadata = { title: "1 of One - Virtual Fashion Try-On", description: "Where Style Meets Singularity. AI-powered virtual fashion try-on experience.", generator: "v0.app", openGraph: { title: "1 of One - Virtual Fashion Try-On", description: "Where Style Meets Singularity. AI-powered virtual fashion try-on experience.", siteName: "1 of One", type: "website", }, twitter: { card: "summary_large_image", title: "1 of One - Virtual Fashion Try-On", description: "Where Style Meets Singularity. AI-powered virtual fashion try-on experience.", }, icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]png:file="public/1ofone-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/1ofone-logo-IDNFYasFCLx9alcVu1bdvZxzkdDq3J.png" isMerged="true" [V0_FILE]png:file="public/1ofone-hero-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Asset%205-Mbc9IQYgXSONlad3KIfNzoov24vBGh.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import type { Page, ClothingItem, SelectedOutfit, CartItem, UserImage } from "@/lib/types" import { CLOTHING_ITEMS } from "@/lib/constants" import { TryOnFlow } from "@/components/try-on-flow" import { MessagePage } from "@/components/message-page" import { ContactPage } from "@/components/contact-page" import { ImageWithLoader } from "@/components/image-with-loader" const INITIAL_OUTFIT: SelectedOutfit = { Top: null, Pants: null } export default function App() { const [currentPage, setCurrentPage] = useState("home") const [selectedOutfit, setSelectedOutfit] = useState(INITIAL_OUTFIT) const [activeCategory, setActiveCategory] = useState("All") const [showTryOnFlow, setShowTryOnFlow] = useState(false) const [cart, setCart] = useState([]) const [showCart, setShowCart] = useState(false) const [favorites, setFavorites] = useState([]) // Load favorites from localStorage on mount useEffect(() => { const saved = localStorage.getItem("1ofone-favorites") if (saved) { setFavorites(JSON.parse(saved)) } }, []) // Save favorites to localStorage when changed useEffect(() => { localStorage.setItem("1ofone-favorites", JSON.stringify(favorites)) }, [favorites]) const toggleFavorite = (itemId: number) => { setFavorites((prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId] ) } const shopSectionRef = useRef(null) const heroRef = useRef(null) const [scrollProgress, setScrollProgress] = useState(0) const [videoOpacity, setVideoOpacity] = useState(1) useEffect(() => { const handleScroll = () => { if (!heroRef.current) return const heroHeight = heroRef.current.offsetHeight const scrollY = window.scrollY // Video fades out as you scroll down through the hero const videoFade = Math.max(0, 1 - (scrollY / (heroHeight * 0.5))) setVideoOpacity(videoFade) // Shop unblurs based on scroll position const heroBottom = heroRef.current.offsetTop + heroHeight const viewportBottom = scrollY + window.innerHeight const triggerStart = heroBottom * 0.6 const triggerEnd = heroBottom const progress = Math.min(1, Math.max(0, (viewportBottom - triggerStart) / (triggerEnd - triggerStart))) setScrollProgress(progress) } window.addEventListener("scroll", handleScroll, { passive: true }) handleScroll() return () => window.removeEventListener("scroll", handleScroll) }, [currentPage]) const navItems: { page: Page; label: string }[] = [ { page: "home", label: "Home" }, { page: "message", label: "Our Message" }, { page: "contact", label: "Contact" }, ] const categories: (ClothingItem["type"] | "All" | "Favorites")[] = ["All", "Top", "Pants", "Favorites"] const filteredItems = activeCategory === "All" ? CLOTHING_ITEMS : activeCategory === "Favorites" ? CLOTHING_ITEMS.filter(item => favorites.includes(item.id)) : CLOTHING_ITEMS.filter(item => item.type === activeCategory) const selectedItemsCount = Object.values(selectedOutfit).filter(Boolean).length const totalPrice = Object.values(selectedOutfit) .filter((item): item is ClothingItem => item !== null) .reduce((sum, item) => sum + item.price, 0) const handleSelectClothing = (item: ClothingItem) => { setSelectedOutfit((prev) => ({ ...prev, [item.type]: prev[item.type]?.id === item.id ? null : item, })) } const handleTryOn = () => { if (selectedItemsCount === 0) return setShowTryOnFlow(true) } const handleCloseTryOn = () => { setShowTryOnFlow(false) } const handleStartOver = () => { setShowTryOnFlow(false) setSelectedOutfit(INITIAL_OUTFIT) } const handleAddToCart = (generatedImage: string, originalImage: UserImage, outfit: SelectedOutfit, price: number) => { const newCartItem: CartItem = { id: Date.now(), generatedImage, originalImage, selectedOutfit: outfit, totalPrice: price, createdAt: new Date(), } setCart((prev) => [...prev, newCartItem]) setShowTryOnFlow(false) setSelectedOutfit(INITIAL_OUTFIT) setShowCart(true) } const handleRemoveFromCart = (id: number) => { setCart((prev) => prev.filter((item) => item.id !== id)) } const cartTotal = cart.reduce((sum, item) => sum + item.totalPrice, 0) // Show Try-On Flow overlay when active if (showTryOnFlow) { return ( ) } return (

{ setCurrentPage("home") window.scrollTo({ top: 0, behavior: "smooth" }) }} > 1 of One

{navItems.map((item) => ( ))} {/* Cart Button */}

{currentPage === "home" ? ( <> {/* Hero Section - Full viewport height */}

{/* Video Background */}

{/* Shop Section - unblurs on scroll */}

{/* Section Header */}

The Collection

Select items to build your outfit

{/* Category Filter */}

{categories.map((cat) => ( ))}

{/* Product Grid */}

{filteredItems.map((item) => { const isSelected = selectedOutfit[item.type]?.id === item.id const isFavorite = favorites.includes(item.id) return (

handleSelectClothing(item)} className={`group cursor-pointer rounded-2xl overflow-hidden transition-all duration-300 glass-panel ${ isSelected ? "ring-2 ring-[#05e0e9] shadow-[0_0_30px_rgba(5,224,233,0.3)]" : "hover:shadow-[0_0_20px_rgba(5,224,233,0.1)]" }`} >

{/* Favorite Heart Button */} {isSelected && (

)}

{item.type}

{item.name}

{item.description}

${item.price}

) })}

{/* Sticky Cart Bar */} {selectedItemsCount > 0 && (

{Object.values(selectedOutfit) .filter((item): item is ClothingItem => item !== null) .map((item) => (

))}

{selectedItemsCount} item{selectedItemsCount > 1 ? "s" : ""} selected

Total: ${totalPrice}

)} {/* Community Section */}

1 of 1 Community

Real people rocking their 1 of One fits

1OF1 white graffiti tee hanging on metal railing

Person styling 1OF1 bleach tee with streetwear fit

Behind the scenes photoshoot with 1OF1 neon graffiti tee

Person wearing 1OF1 neon graffiti tee with leather jacket against concrete wall

{/* Instagram Links */}

@aidenwitthus @tonygranata_

) : (

{currentPage === "message" && } {currentPage === "contact" && }

)} {/* Cart Drawer */} {showCart && (

{/* Backdrop */}

setShowCart(false)} /> {/* Drawer */}

Your Cart

{cart.length === 0 ? (

Your cart is empty

Try on some outfits and add them to your cart!

) : ( <>

{cart.map((item) => { const items = Object.values(item.selectedOutfit).filter((i): i is ClothingItem => i !== null) return (

Custom Look

{items.map(i => i.name).join(", ")}

${item.totalPrice}

) })}

{/* Cart Total */}

Subtotal ({cart.length} look{cart.length > 1 ? "s" : ""}) ${cartTotal}

)}

) } [V0_FILE]png:file="public/1ofone-gothic-neon-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3-xxR12552mp4RLcbqznkIO1QoHcGLsH.png" isMerged="true" [V0_FILE]png:file="public/1ofone-gothic-cyan-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4-nTETOmnTJJEYrrwQ6WpMQDicgg0dSe.png" isMerged="true" [V0_FILE]png:file="public/1ofone-gothic-white-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-mMHAQRfYruT4KO4S6Dm9KItTlDLl1u.png" isMerged="true" [V0_FILE]png:file="public/1ofone-gothic-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-AcmnydAy8kLnRK7EKtSesD5nqfOPhZ.png" isMerged="true" [V0_FILE]png:file="public/1ofone-gothic-cyan-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Copy%20of%20Untitled%20Design%20%28Magnets%20%28Square%29%29%20%281%29-ZNNet15ylT6Qq7sAp2egooXo0RXH5a.png" isMerged="true" [V0_FILE]png:file="public/1ofone-gothic-neon-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Copy%20of%20Untitled%20Design%20%28Magnets%20%28Square%29%29%20%282%29-GNjvlwSpLloy1AioMh0d9ClgeqECqK.png" isMerged="true" [V0_FILE]typescript:file="lib/constants.ts" isMerged="true" import type { ClothingItem } from "./types" export const CLOTHING_ITEMS: ClothingItem[] = [ { id: 101, name: "1OF1 Classic Tee", type: "Top", imageUrl: "/1ofoneteeshirt.png", description: 'white oversized t-shirt with black gothic "1OF1" logo on chest', price: 25, }, { id: 102, name: "1OF1 Long Sleeve", type: "Top", imageUrl: "/1ofonelongsleeve.png", description: 'white long-sleeve crewneck with black gothic "1OF1" logo on chest', price: 25, }, { id: 103, name: "1OF1 Sleeveless Tee", type: "Top", imageUrl: "/1ofonesleeveless.png", description: 'white sleeveless muscle tee with black gothic "1OF1" logo on chest', price: 25, }, { id: 104, name: "1OF1 Sports Bra", type: "Top", imageUrl: "/1ofonetanktop.png", description: 'white racerback sports bra with black gothic "1OF1" logo on chest', price: 25, }, { id: 105, name: "1OF1 Wide Leg Jeans", type: "Pants", imageUrl: "/1ofone-wide-leg-jeans.png", description: 'vintage medium blue wash wide-leg jeans with white "1OF1" logo print', price: 55, }, { id: 108, name: "1OF1 Neon Black Tee", type: "Top", imageUrl: "/1ofone-neon-black-tee.png", description: 'black oversized t-shirt with "1 OF ONE" neon yellow accent logo', price: 25, }, { id: 109, name: "1OF1 Neon Crop Long Sleeve", type: "Top", imageUrl: "/1ofone-neon-crop-long.png", description: 'black fitted crop top long sleeve with "1 OF ONE" neon yellow accent logo', price: 25, }, { id: 110, name: "1OF1 Gothic Black Tee", type: "Top", imageUrl: "/1ofone-gothic-black-tee.png", description: 'black oversized t-shirt with large white gothic "1OF1" logo', price: 25, }, { id: 111, name: "1OF1 Neon White Hoodie", type: "Top", imageUrl: "/1ofone-neon-white-hoodie.png", description: 'white oversized hoodie with "1 OF ONE" neon yellow accent logo', price: 25, }, { id: 112, name: "1OF1 Neon Gothic Tee", type: "Top", imageUrl: "/1ofone-neon-gothic-tee.png", description: 'black oversized t-shirt with large neon green gothic "1OF1" logo', price: 25, }, { id: 113, name: "1OF1 White Gothic Long Sleeve", type: "Top", imageUrl: "/1ofone-white-gothic-longsleeve.png", description: 'black fitted long sleeve with white gothic "1OF1" logo', price: 25, }, { id: 114, name: "1OF1 Orange Gothic Long Sleeve", type: "Top", imageUrl: "/1ofone-orange-gothic-longsleeve.png", description: 'black fitted long sleeve with orange gothic "1OF1" logo', price: 25, }, { id: 115, name: "1OF1 Black Wash Jeans", type: "Pants", imageUrl: "/1ofone-black-wash-jeans.png", description: 'black/gray acid wash wide-leg jeans with white gothic "1OF1" logo', price: 55, }, { id: 116, name: "1OF1 Neon Gothic Long Sleeve", type: "Top", imageUrl: "/1ofone-neon-gothic-longsleeve.png", description: 'black fitted long sleeve with neon green gothic "1OF1" logo', price: 25, }, { id: 117, name: "1OF1 Cyan Crop Long Sleeve", type: "Top", imageUrl: "/1ofone-cyan-crop-longsleeve.png", description: 'black fitted crop top long sleeve with cyan gothic "1OF1" logo', price: 25, }, { id: 118, name: "1OF1 Cyan Gothic Tee", type: "Top", imageUrl: "/1ofone-cyan-gothic-tee.png", description: 'black oversized t-shirt with large cyan gothic "1OF1" logo', price: 25, }, { id: 119, name: "1OF1 Pink Crop Long Sleeve", type: "Top", imageUrl: "/1ofone-pink-crop-longsleeve.png", description: 'black fitted crop top long sleeve with hot pink gothic "1OF1" logo', price: 25, }, { id: 120, name: "1OF1 Pink White Tee", type: "Top", imageUrl: "/1ofone-pink-white-tee.png", description: 'white oversized t-shirt with hot pink gothic "1OF1" logo', price: 25, }, { id: 121, name: "1OF1 Pink Wide Leg Jeans", type: "Pants", imageUrl: "/1ofone-pink-wide-leg-jeans.png", description: 'medium blue wash wide-leg jeans with hot pink gothic "1OF1" logo', price: 55, }, { id: 122, name: "1OF1 Neon Wide Leg Jeans", type: "Pants", imageUrl: "/1ofone-neon-wide-leg-jeans.png", description: 'medium blue wash wide-leg jeans with neon yellow-green gothic "1OF1" logo', price: 55, }, { id: 123, name: "1OF1 Cyan Wide Leg Jeans", type: "Pants", imageUrl: "/1ofone-cyan-wide-leg-jeans.png", description: 'medium blue wash wide-leg jeans with cyan gothic "1OF1" logo', price: 55, }, { id: 124, name: "1OF1 Graffiti White Tee", type: "Top", imageUrl: "/1ofone-graffiti-white-tee.png", description: 'white oversized t-shirt with large black graffiti-style "1OF1." brush script logo', price: 25, }, { id: 125, name: "1OF1 Graffiti Wide Leg Jeans", type: "Pants", imageUrl: "/1ofone-graffiti-wide-leg-jeans.png", description: 'medium blue wash wide-leg jeans with large black graffiti-style "1OF1." brush script logo', price: 55, }, { id: 126, name: "1OF1 Graffiti Neon Tee", type: "Top", imageUrl: "/1ofone-graffiti-neon-tee.png", description: 'neon yellow oversized t-shirt with large black graffiti-style "1OF1." brush script logo', price: 25, }, { id: 127, name: "1OF1 Bleach Splatter Tee", type: "Top", imageUrl: "/1ofone-bleach-splatter-tee.jpeg", description: 'black oversized t-shirt with orange bleach splatter effect and graffiti-style "1OF1" logo silhouette', price: 25, }, { id: 128, name: "1OF1 Sunset Bleach Tee", type: "Top", imageUrl: "/1ofone-sunset-bleach-tee.png", description: 'black oversized t-shirt with copper/orange bleach glow effect behind graffiti-style "1OF1." brush script logo', price: 25, }, { id: 129, name: "1OF1 Gothic White Tee", type: "Top", imageUrl: "/1ofone-gothic-white-tee.png", description: 'charcoal gray oversized t-shirt with white gothic "1OF1" logo', price: 25, }, { id: 130, name: "1OF1 Gothic Cyan Tee", type: "Top", imageUrl: "/1ofone-gothic-cyan-tee.png", description: 'charcoal gray oversized t-shirt with cyan/turquoise gothic "1OF1" logo', price: 25, }, { id: 131, name: "1OF1 Gothic Neon Tee", type: "Top", imageUrl: "/1ofone-gothic-neon-tee.png", description: 'charcoal gray oversized t-shirt with neon yellow gothic "1OF1" logo', price: 25, }, { id: 132, name: "1OF1 Gothic Zip Hoodie", type: "Top", imageUrl: "/1ofone-gothic-hoodie.png", description: 'washed charcoal gray zip-up hoodie with white gothic "1OF1" logo', price: 45, }, { id: 133, name: "1OF1 Gothic Cyan Hoodie", type: "Top", imageUrl: "/1ofone-gothic-cyan-hoodie.png", description: 'washed charcoal gray zip-up hoodie with cyan gothic "1OF1" logo', price: 45, }, { id: 134, name: "1OF1 Gothic Neon Hoodie", type: "Top", imageUrl: "/1ofone-gothic-neon-hoodie.png", description: 'washed charcoal gray zip-up hoodie with neon yellow gothic "1OF1" logo', price: 45, }, ] [V0_FILE]typescriptreact:file="components/contact-page.tsx" isMerged="true" export function ContactPage() { return (

Get in Touch

Have a question or want to collaborate? Reach out to us.

Email Us

1ofone.cs@gmail.com

@1ofone.cs

) } [V0_FILE]typescriptreact:file="components/height-input-view.tsx" "use client" import { useState } from "react" import type { UserImage } from "@/lib/types" interface HeightInputViewProps { userImage: UserImage onHeightSubmit: (height: string) => void onBack: () => void } export function HeightInputView({ userImage, onHeightSubmit, onBack }: HeightInputViewProps) { const [feet, setFeet] = useState("5") const [inches, setInches] = useState("9") const handleSubmit = () => { if (feet && inches && !isNaN(Number.parseInt(feet)) && !isNaN(Number.parseFloat(inches))) { onHeightSubmit(`${feet}'${inches}"`) } } const isFormValid = feet.trim() !== "" && inches.trim() !== "" && Number.parseInt(feet) >= 3 && Number.parseFloat(inches) >= 0 && Number.parseFloat(inches) < 12 return (

Step 2: Provide Your Height

This helps our AI tailor create more accurate measurements for you.

Your Height

setFeet(e.target.value)} className="w-full p-4 bg-gray-800/80 border border-gray-600 rounded-xl text-white text-3xl text-center focus:outline-none focus:ring-2 focus:ring-[#05e0e9] focus:bg-gray-700 transition-all" min="3" max="8" /> ft

setInches(e.target.value)} className="w-full p-4 bg-gray-800/80 border border-gray-600 rounded-xl text-white text-3xl text-center focus:outline-none focus:ring-2 focus:ring-[#05e0e9] focus:bg-gray-700 transition-all" min="0" max="11.9" step="0.5" /> in

) }

Step 3: Curate Your Look

Your Preview

{type}s

1 of One

Take Your Photo

Shop the Collection

{item.name}

Analyzing Your Fit

Forging Your Look

Fit Analysis

Your Measurements

Clothing Fit

{fit.itemName}

Customize Your Style

Your Look

Before

After

Your Outfit

My Saved Looks

My Saved Measurements

Step 1: Capture Your Canvas

OUR MESSAGE

Behind the Scenes

Take Your Photo

Analyzing Your Fit

Forging Your Look

Your New Look

Before

After

Order Summary

Your Body Measurements

Estimated Body Measurements

The Collection

{item.name}

1 of 1 Community

Your Cart

Custom Look

Get in Touch

Email Us

Follow Us

Step 2: Provide Your Height