Spaces:

thors1
/

deepsite-project-ibe2q

Running

App Files Files Community

deepsite-project-ibe2q / models.html

thors1

Initial DeepSite commit

1213bc6 verified 6 months ago

Raw

History Blame Contribute Delete

92.5 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Model - DeepSite AI Fashion Platform</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/lucide@latest"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	body { font-family: 'Inter', sans-serif; }
	.glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
	.sidebar-gradient { background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%); }
	.hover-lift { transition: transform 0.2s, box-shadow 0.2s; }
	.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1); }
	.animate-fade { animation: fadeIn 0.3s ease-in; }
	@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
	.custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
	.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
	.custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
	.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
	.range-slider { -webkit-appearance: none; appearance: none; height: 4px; background: #e5e7eb; border-radius: 2px; outline: none; }
	.range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #6366f1; border-radius: 50%; cursor: pointer; }
	.toggle-checkbox:checked { right: 0; border-color: #6366f1; }
	.toggle-checkbox:checked + .toggle-label { background-color: #6366f1; }
	.gradient-text { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	</style>
	</head>
	<body class="bg-gray-50 text-gray-900">
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<aside class="w-64 sidebar-gradient border-r border-gray-200 flex flex-col flex-shrink-0">
	<div class="p-6 border-b border-gray-200">
	<div class="flex items-center gap-3">
	<div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
	<i data-lucide="layers" class="w-5 h-5 text-white"></i>
	</div>
	<span class="font-bold text-xl tracking-tight">DeepSite</span>
	</div>
	</div>

	<nav class="flex-1 p-4 space-y-1 overflow-y-auto">
	<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">Platform</div>
	<a href="index.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
	Dashboard
	</a>
	<a href="models.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-700">
	<i data-lucide="user" class="w-5 h-5"></i>
	AI Models
	</a>
	<a href="garments.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="shirt" class="w-5 h-5"></i>
	Garments
	</a>

	<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-6 mb-2 px-2">Creation</div>
	<a href="lookbook.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="book-open" class="w-5 h-5"></i>
	Look Book
	</a>
	<a href="campaigns.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="megaphone" class="w-5 h-5"></i>
	Campaigns
	</a>

	<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-6 mb-2 px-2">Management</div>
	<a href="approvals.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="check-circle" class="w-5 h-5"></i>
	Approvals
	</a>
	<a href="exports.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="download" class="w-5 h-5"></i>
	Exports
	</a>
	<a href="analytics.html" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
	<i data-lucide="bar-chart-2" class="w-5 h-5"></i>
	Analytics
	</a>
	</nav>

	<div class="p-4 border-t border-gray-200">
	<div class="flex items-center gap-3 px-3 py-2">
	<img src="http://static.photos/people/200x200/42" alt="User" class="w-8 h-8 rounded-full object-cover">
	<div class="flex-1 min-w-0">
	<p class="text-sm font-medium text-gray-900 truncate">Sarah Chen</p>
	<p class="text-xs text-gray-500 truncate">Creative Director</p>
	</div>
	</div>
	</div>
	</aside>

	<!-- Main Content -->
	<div class="flex-1 flex flex-col overflow-hidden">
	<!-- Top Page Header -->
	<header class="glass-panel border-b border-gray-200 z-10 flex-shrink-0">
	<div class="px-8 py-4">
	<!-- Breadcrumb -->
	<div class="flex items-center gap-2 text-sm text-gray-600 mb-2">
	<span>Platform</span>
	<i data-lucide="chevron-right" class="w-4 h-4"></i>
	<span class="text-gray-900 font-medium">AI Model</span>
	</div>

	<div class="flex items-center justify-between">
	<div class="flex items-center gap-4">
	<div>
	<h1 class="text-2xl font-bold text-gray-900">AI Model</h1>
	<p class="text-sm text-gray-600 mt-1">Design production-ready synthetic fashion models for ecommerce, campaigns, and virtual try-on workflows.</p>
	</div>
	<span class="px-2 py-1 bg-indigo-100 text-indigo-700 text-xs font-medium rounded-full border border-indigo-200">Enterprise Studio</span>
	<div class="flex items-center gap-1 px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full border border-green-200">
	<div class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
	AI Model Assistant Active
	</div>
	</div>
	<div class="flex items-center gap-3">
	<button onclick="openSaveModal()" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2">
	<i data-lucide="bookmark" class="w-4 h-4"></i>
	Save Preset
	</button>
	<button onclick="openDuplicateModal()" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2">
	<i data-lucide="copy" class="w-4 h-4"></i>
	Duplicate
	</button>
	<button onclick="openCompareModal()" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2">
	<i data-lucide="git-compare" class="w-4 h-4"></i>
	Compare Variants
	</button>
	<button onclick="generateModel()" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2">
	<i data-lucide="sparkles" class="w-4 h-4"></i>
	Generate Model
	</button>
	<button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
	<i data-lucide="more-vertical" class="w-5 h-5"></i>
	</button>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content Area -->
	<main class="flex-1 overflow-y-auto bg-gray-50">
	<div class="max-w-[1600px] mx-auto p-8">

	<!-- Main Workspace -->
	<div class="mb-8 animate-fade">
	<div class="flex gap-6 h-[calc(100vh-240px)] min-h-[700px]">

	<!-- LEFT PANEL: Configuration Studio -->
	<div class="w-[420px] bg-white rounded-xl border border-gray-200 flex flex-col shadow-sm">
	<div class="p-4 border-b border-gray-200 flex items-center justify-between bg-gray-50 rounded-t-xl">
	<h3 class="font-semibold text-gray-900">Model Configuration</h3>
	<button onclick="resetConfiguration()" class="text-xs text-gray-500 hover:text-gray-700">Reset All</button>
	</div>
	<div class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">

	<!-- Identity Profile -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('identity')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="id-card" class="w-4 h-4 text-indigo-600"></i>
	<span class="font-medium text-gray-900 text-sm">Identity Profile</span>
	</div>
	<i data-lucide="chevron-down" id="icon-identity" class="w-4 h-4 text-gray-400 transition-transform"></i>
	</button>
	<div id="section-identity" class="p-4 space-y-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Model Name</label>
	<input type="text" id="modelName" value="Ava Studio Core V2" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Internal ID</label>
	<input type="text" value="MDL-2026-0847" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm bg-gray-100 text-gray-600" readonly>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Model Use Case</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500">
	<option>Ecommerce PDP</option>
	<option>Editorial Campaign</option>
	<option>Marketplace Listing</option>
	<option>Lookbook</option>
	<option>Social Ad Creative</option>
	<option>Catalog Studio</option>
	</select>
	</div>
	<div class="grid grid-cols-2 gap-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Target Region</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500">
	<option>North America</option>
	<option>Europe</option>
	<option>Asia Pacific</option>
	<option>Global</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Demographic</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500">
	<option>Primary (25-34)</option>
	<option>Gen Z (18-24)</option>
	<option>Mature (35-44)</option>
	<option>Luxury (35-55)</option>
	</select>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Brand Alignment</label>
	<div class="flex flex-wrap gap-2">
	<button class="px-2 py-1 bg-indigo-100 text-indigo-700 text-xs rounded-full border border-indigo-200">Premium Casual</button>
	<button class="px-2 py-1 border border-gray-300 text-gray-600 text-xs rounded-full hover:border-indigo-500">Luxury</button>
	<button class="px-2 py-1 border border-gray-300 text-gray-600 text-xs rounded-full hover:border-indigo-500">Street</button>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Profile Notes</label>
	<textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 resize-none" rows="2" placeholder="Add notes about this model...">Primary studio model for Spring 2026 denim campaign.</textarea>
	</div>
	</div>
	</div>

	<!-- Appearance -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('appearance')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="face" class="w-4 h-4 text-rose-600"></i>
	<span class="font-medium text-gray-900 text-sm">Appearance</span>
	</div>
	<i data-lucide="chevron-down" id="icon-appearance" class="w-4 h-4 text-gray-400"></i>
	</button>
	<div id="section-appearance" class="hidden p-4 space-y-3">
	<div class="grid grid-cols-2 gap-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Gender Presentation</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Female</option>
	<option>Male</option>
	<option>Non-Binary</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Age Range</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>25-30</option>
	<option>20-25</option>
	<option>30-35</option>
	<option>35-40</option>
	</select>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Ethnicity Look</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Mixed/European</option>
	<option>East Asian</option>
	<option>South Asian</option>
	<option>Afro-Caribbean</option>
	<option>Latin American</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Skin Tone</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Light-Medium</option>
	<option>Light</option>
	<option>Medium</option>
	<option>Medium-Dark</option>
	<option>Dark</option>
	</select>
	</div>
	</div>
	<div class="grid grid-cols-3 gap-2">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Hair Color</label>
	<select class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs">
	<option>Dark Brown</option>
	<option>Black</option>
	<option>Blonde</option>
	<option>Auburn</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Texture</label>
	<select class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs">
	<option>Straight</option>
	<option>Wavy</option>
	<option>Curly</option>
	<option>Coily</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Length</label>
	<select class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs">
	<option>Shoulder</option>
	<option>Long</option>
	<option>Short</option>
	<option>Bob</option>
	</select>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-2">Facial Symmetry</label>
	<div class="flex items-center gap-3">
	<input type="range" min="0" max="100" value="85" class="range-slider flex-1">
	<span class="text-xs text-gray-600 w-8">85%</span>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-2">Makeup Intensity</label>
	<div class="flex items-center gap-3">
	<span class="text-xs text-gray-500">Natural</span>
	<input type="range" min="0" max="100" value="40" class="range-slider flex-1">
	<span class="text-xs text-gray-500">Full</span>
	</div>
	</div>
	<div class="flex items-center justify-between">
	<span class="text-sm text-gray-700">Freckles</span>
	<button class="w-11 h-6 bg-indigo-600 rounded-full relative transition-colors" onclick="this.classList.toggle('bg-indigo-600'); this.classList.toggle('bg-gray-300')">
	<span class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full transition-all"></span>
	</button>
	</div>
	</div>
	</div>

	<!-- Body Configuration -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('body')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="ruler" class="w-4 h-4 text-amber-600"></i>
	<span class="font-medium text-gray-900 text-sm">Body Configuration</span>
	</div>
	<i data-lucide="chevron-down" id="icon-body" class="w-4 h-4 text-gray-400"></i>
	</button>
	<div id="section-body" class="hidden p-4 space-y-3">
	<div class="grid grid-cols-2 gap-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Height</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>5'9" (175cm)</option>
	<option>5'7" (170cm)</option>
	<option>5'11" (180cm)</option>
	<option>6'0" (183cm)</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Body Type</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Athletic-Slim</option>
	<option>Curvy</option>
	<option>Straight</option>
	<option>Petite</option>
	<option>Plus</option>
	</select>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-2">Body Realism</label>
	<div class="flex items-center gap-3">
	<span class="text-xs text-gray-500">Stylized</span>
	<input type="range" min="0" max="100" value="75" class="range-slider flex-1">
	<span class="text-xs text-gray-500">Photoreal</span>
	</div>
	</div>
	<div class="flex items-center justify-between">
	<span class="text-sm text-gray-700">Hand Visibility</span>
	<button class="w-11 h-6 bg-indigo-600 rounded-full relative transition-colors">
	<span class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></span>
	</button>
	</div>
	<div class="p-3 bg-indigo-50 rounded-lg border border-indigo-100">
	<div class="flex items-start gap-2">
	<i data-lucide="info" class="w-4 h-4 text-indigo-600 mt-0.5"></i>
	<p class="text-xs text-indigo-800">Body diversity preset: <span class="font-medium">Inclusive Standard</span></p>
	</div>
	</div>
	</div>
	</div>

	<!-- Expression & Pose -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('expression')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="smile" class="w-4 h-4 text-emerald-600"></i>
	<span class="font-medium text-gray-900 text-sm">Expression & Pose</span>
	</div>
	<i data-lucide="chevron-down" id="icon-expression" class="w-4 h-4 text-gray-400"></i>
	</button>
	<div id="section-expression" class="hidden p-4 space-y-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Expression</label>
	<div class="grid grid-cols-3 gap-2">
	<button class="px-2 py-1.5 bg-indigo-100 text-indigo-700 text-xs rounded-lg border border-indigo-200 font-medium">Soft Smile</button>
	<button class="px-2 py-1.5 border border-gray-300 text-gray-600 text-xs rounded-lg hover:border-indigo-500">Neutral</button>
	<button class="px-2 py-1.5 border border-gray-300 text-gray-600 text-xs rounded-lg hover:border-indigo-500">Confident</button>
	<button class="px-2 py-1.5 border border-gray-300 text-gray-600 text-xs rounded-lg hover:border-indigo-500">Editorial</button>
	<button class="px-2 py-1.5 border border-gray-300 text-gray-600 text-xs rounded-lg hover:border-indigo-500">Luxury</button>
	<button class="px-2 py-1.5 border border-gray-300 text-gray-600 text-xs rounded-lg hover:border-indigo-500">Energetic</button>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Crop Framing</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>3/4 Body</option>
	<option>Full Body</option>
	<option>Half Body</option>
	<option>Close-up</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Camera Angle</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Eye Level</option>
	<option>Slight Low</option>
	<option>Slight High</option>
	<option>Dutch</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Fashion Context -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('fashion')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="shirt" class="w-4 h-4 text-purple-600"></i>
	<span class="font-medium text-gray-900 text-sm">Fashion Context</span>
	</div>
	<i data-lucide="chevron-down" id="icon-fashion" class="w-4 h-4 text-gray-400"></i>
	</button>
	<div id="section-fashion" class="hidden p-4 space-y-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Styling Mode</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Model with Styling References</option>
	<option>Model Only</option>
	<option>Ecommerce Mannequin Replacement</option>
	</select>
	</div>
	<div class="grid grid-cols-2 gap-3">
	<div class="flex items-center justify-between p-2 border rounded-lg">
	<span class="text-xs text-gray-700">Accessories</span>
	<button class="w-8 h-4 bg-indigo-600 rounded-full relative">
	<span class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></span>
	</button>
	</div>
	<div class="flex items-center justify-between p-2 border rounded-lg">
	<span class="text-xs text-gray-700">Footwear</span>
	<button class="w-8 h-4 bg-gray-300 rounded-full relative">
	<span class="absolute left-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></span>
	</button>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Seasonal Preset</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Spring/Summer 2026</option>
	<option>Fall/Winter 2025</option>
	<option>Resort 2026</option>
	<option>Holiday 2025</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Output & Camera -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('output')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="camera" class="w-4 h-4 text-cyan-600"></i>
	<span class="font-medium text-gray-900 text-sm">Output & Camera</span>
	</div>
	<i data-lucide="chevron-down" id="icon-output" class="w-4 h-4 text-gray-400"></i>
	</button>
	<div id="section-output" class="hidden p-4 space-y-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Output Type</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Ecommerce Clean Studio</option>
	<option>Editorial Studio</option>
	<option>Campaign Lifestyle</option>
	<option>Luxury Brand</option>
	<option>Beauty Close-up</option>
	</select>
	</div>
	<div class="grid grid-cols-2 gap-3">
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Aspect Ratio</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>4:5</option>
	<option>1:1</option>
	<option>3:4</option>
	<option>9:16</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Image Count</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>4 variants</option>
	<option>1</option>
	<option>2</option>
	<option>8</option>
	</select>
	</div>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Lighting Preset</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Soft Studio</option>
	<option>High Fashion</option>
	<option>Natural Light</option>
	<option>Dramatic</option>
	</select>
	</div>
	<div class="flex items-center justify-between">
	<span class="text-sm text-gray-700">Background Removal</span>
	<button class="w-11 h-6 bg-indigo-600 rounded-full relative transition-colors">
	<span class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></span>
	</button>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-2">Realism Level</label>
	<div class="flex items-center gap-3">
	<input type="range" min="0" max="100" value="92" class="range-slider flex-1">
	<span class="text-xs text-gray-600 w-8">92%</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Enterprise Controls -->
	<div class="border border-gray-200 rounded-lg overflow-hidden">
	<button onclick="toggleSection('enterprise')" class="w-full px-4 py-3 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors">
	<div class="flex items-center gap-2">
	<i data-lucide="building" class="w-4 h-4 text-gray-600"></i>
	<span class="font-medium text-gray-900 text-sm">Enterprise Controls</span>
	</div>
	<i data-lucide="chevron-down" id="icon-enterprise" class="w-4 h-4 text-gray-400"></i>
	</button>
	<div id="section-enterprise" class="hidden p-4 space-y-3">
	<div class="flex items-center justify-between">
	<div>
	<span class="text-sm text-gray-700">Approval Required</span>
	<p class="text-xs text-gray-500">Route to approval workflow</p>
	</div>
	<button class="w-11 h-6 bg-indigo-600 rounded-full relative transition-colors">
	<span class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></span>
	</button>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-1">Save to Project</label>
	<select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
	<option>Spring 2026 Campaign</option>
	<option>Denim Refresh Project</option>
	<option>Marketplace Migration</option>
	</select>
	</div>
	<div>
	<label class="text-xs font-medium text-gray-700 block mb-2">Speed vs Quality</label>
	<div class="flex items-center gap-3">
	<span class="text-xs text-gray-500">Fast</span>
	<input type="range" min="0" max="100" value="65" class="range-slider flex-1">
	<span class="text-xs text-gray-500">Max</span>
	</div>
	</div>
	<div class="p-2 bg-green-50 rounded border border-green-200">
	<p class="text-xs text-green-800"><i data-lucide="check-circle" class="w-3 h-3 inline mr-1"></i> Legal Safe preset active</p>
	</div>
	</div>
	</div>

	</div>
	</div>

	<!-- CENTER/RIGHT: Live Preview Studio -->
	<div class="flex-1 flex flex-col gap-4">

	<!-- Preview Canvas -->
	<div class="flex-1 bg-gray-900 rounded-xl border border-gray-800 overflow-hidden relative">
	<div class="absolute top-4 left-4 z-10">
	<div class="px-3 py-1.5 bg-white/10 backdrop-blur text-white text-xs rounded-full border border-white/20">
	Generation Complete
	</div>
	</div>
	<div class="absolute top-4 right-4 z-10 flex gap-2">
	<button onclick="toggleFullscreen()" class="p-2 bg-white/10 backdrop-blur text-white rounded-lg hover:bg-white/20">
	<i data-lucide="maximize" class="w-4 h-4"></i>
	</button>
	<button class="p-2 bg-white/10 backdrop-blur text-white rounded-lg hover:bg-white/20">
	<i data-lucide="zoom-in" class="w-4 h-4"></i>
	</button>
	<button class="p-2 bg-white/10 backdrop-blur text-white rounded-lg hover:bg-white/20">
	<i data-lucide="share" class="w-4 h-4"></i>
	</button>
	</div>

	<div class="h-full flex items-center justify-center p-8">
	<div class="relative">
	<img id="mainPreview" src="http://static.photos/fashion/1024x1280/201" alt="AI Model Preview" class="max-h-[600px] w-auto rounded-lg shadow-2xl">
	<div class="absolute bottom-4 left-4 right-4">
	<div class="flex items-center justify-between">
	<div class="px-3 py-1.5 bg-white/90 backdrop-blur rounded-full flex items-center gap-2">
	<span class="w-2 h-2 bg-green-500 rounded-full"></span>
	<span class="text-xs font-medium text-gray-900">Quality Score: 96.4%</span>
	</div>
	<div class="flex gap-2">
	<button class="px-3 py-1.5 bg-white/90 backdrop-blur text-gray-900 text-xs font-medium rounded-full hover:bg-white">
	Regenerate
	</button>
	<button class="px-3 py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-full hover:bg-indigo-700">
	Refine Face
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Preview Controls & Tabs -->
	<div class="h-80 bg-white rounded-xl border border-gray-200 flex flex-col shadow-sm">
	<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
	<div class="flex items-center gap-6">
	<button onclick="switchPreviewTab('preview')" id="tab-btn-preview" class="text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 pb-3 -mb-3">Live Preview</button>
	<button onclick="switchPreviewTab('variants')" id="tab-btn-variants" class="text-sm font-medium text-gray-600 hover:text-gray-900 pb-3 -mb-3">Variants</button>
	<button onclick="switchPreviewTab('details')" id="tab-btn-details" class="text-sm font-medium text-gray-600 hover:text-gray-900 pb-3 -mb-3">Details</button>
	<button onclick="switchPreviewTab('usage')" id="tab-btn-usage" class="text-sm font-medium text-gray-600 hover:text-gray-900 pb-3 -mb-3">Usage</button>
	</div>
	<div class="flex items-center gap-2">
	<button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded">
	<i data-lucide="heart" class="w-4 h-4"></i>
	</button>
	<button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded">
	<i data-lucide="download" class="w-4 h-4"></i>
	</button>
	</div>
	</div>

	<div class="flex-1 overflow-y-auto custom-scrollbar p-4">

	<!-- Live Preview Tab -->
	<div id="tab-preview" class="tab-panel">
	<div class="flex gap-4 h-full">
	<div class="w-2/3">
	<p class="text-sm text-gray-600 mb-3">Quick adjustments</p>
	<div class="grid grid-cols-4 gap-2">
	<button class="p-3 border border-gray-200 rounded-lg text-center hover:border-indigo-500 hover:bg-indigo-50 transition-all">
	<i data-lucide="refresh-cw" class="w-4 h-4 mx-auto mb-1 text-indigo-600"></i>
	<span class="text-xs text-gray-700">Regenerate</span>
	</button>
	<button class="p-3 border border-gray-200 rounded-lg text-center hover:border-indigo-500 hover:bg-indigo-50 transition-all">
	<i data-lucide="user" class="w-4 h-4 mx-auto mb-1 text-indigo-600"></i>
	<span class="text-xs text-gray-700">Refine Face</span>
	</button>
	<button class="p-3 border border-gray-200 rounded-lg text-center hover:border-indigo-500 hover:bg-indigo-50 transition-all">
	<i data-lucide="move" class="w-4 h-4 mx-auto mb-1 text-indigo-600"></i>
	<span class="text-xs text-gray-700">Adjust Pose</span>
	</button>
	<button class="p-3 border border-gray-200 rounded-lg text-center hover:border-indigo-500 hover:bg-indigo-50 transition-all">
	<i data-lucide="sun" class="w-4 h-4 mx-auto mb-1 text-indigo-600"></i>
	<span class="text-xs text-gray-700">Change Light</span>
	</button>
	</div>
	<div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
	<div class="flex items-center justify-between mb-2">
	<span class="text-xs font-medium text-gray-700">Compare with Previous</span>
	<button class="w-8 h-4 bg-indigo-600 rounded-full relative">
	<span class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></span>
	</button>
	</div>
	<div class="flex gap-2">
	<div class="flex-1 h-20 bg-gray-200 rounded border-2 border-indigo-500">
	<img src="http://static.photos/fashion/200x250/201" class="w-full h-full object-cover rounded">
	</div>
	<div class="flex-1 h-20 bg-gray-200 rounded opacity-60">
	<img src="http://static.photos/fashion/200x250/202" class="w-full h-full object-cover rounded">
	</div>
	</div>
	</div>
	</div>
	<div class="w-1/3 border-l border-gray-200 pl-4">
	<p class="text-xs font-semibold text-gray-500 uppercase mb-3">Active Preset Summary</p>
	<div class="space-y-2 text-sm">
	<div class="flex justify-between">
	<span class="text-gray-600">Template</span>
	<span class="text-gray-900 font-medium">Premium Ecommerce</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">Output</span>
	<span class="text-gray-900 font-medium">4:5 Studio</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">Lighting</span>
	<span class="text-gray-900 font-medium">Soft</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">Realism</span>
	<span class="text-gray-900 font-medium">92%</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Variants Tab -->
	<div id="tab-variants" class="tab-panel hidden">
	<div class="flex items-center justify-between mb-3">
	<p class="text-sm text-gray-600">4 variants generated</p>
	<div class="flex gap-2">
	<button onclick="setVariantView('grid')" id="variant-grid" class="p-1.5 bg-indigo-50 text-indigo-600 rounded">
	<i data-lucide="grid" class="w-4 h-4"></i>
	</button>
	<button onclick="setVariantView('list')" id="variant-list" class="p-1.5 text-gray-600 hover:bg-gray-100 rounded">
	<i data-lucide="list" class="w-4 h-4"></i>
	</button>
	</div>
	</div>
	<div id="variants-grid-view" class="grid grid-cols-4 gap-3">
	<div class="cursor-pointer group" onclick="selectVariant(0)">
	<div class="aspect-[4/5] bg-gray-100 rounded-lg overflow-hidden border-2 border-indigo-500 mb-2">
	<img src="http://static.photos/fashion/300x375/201" class="w-full h-full object-cover">
	</div>
	<p class="text-xs font-medium text-gray-900">Variant A</p>
	<p class="text-xs text-gray-500">96.4% score</p>
	</div>
	<div class="cursor-pointer group" onclick="selectVariant(1)">
	<div class="aspect-[4/5] bg-gray-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-gray-300 mb-2">
	<img src="http://static.photos/fashion/300x375/202" class="w-full h-full object-cover">
	</div>
	<p class="text-xs font-medium text-gray-900">Variant B</p>
	<p class="text-xs text-gray-500">94.2% score</p>
	</div>
	<div class="cursor-pointer group" onclick="selectVariant(2)">
	<div class="aspect-[4/5] bg-gray-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-gray-300 mb-2">
	<img src="http://static.photos/fashion/300x375/203" class="w-full h-full object-cover">
	</div>
	<p class="text-xs font-medium text-gray-900">Variant C</p>
	<p class="text-xs text-gray-500">95.8% score</p>
	</div>
	<div class="cursor-pointer group" onclick="selectVariant(3)">
	<div class="aspect-[4/5] bg-gray-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-gray-300 mb-2">
	<img src="http://static.photos/fashion/300x375/204" class="w-full h-full object-cover">
	</div>
	<p class="text-xs font-medium text-gray-900">Variant D</p>
	<p class="text-xs text-gray-500">93.1% score</p>
	</div>
	</div>
	</div>

	<!-- Details Tab -->
	<div id="tab-details" class="tab-panel hidden">
	<div class="grid grid-cols-2 gap-6">
	<div>
	<p class="text-xs font-semibold text-gray-500 uppercase mb-3">Model Metadata</p>
	<div class="space-y-2 text-sm">
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Demographic Tags</span>
	<span class="text-gray-900">Female, 25-30, Mixed</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Resolution</span>
	<span class="text-gray-900">2048 x 2560</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Camera Preset</span>
	<span class="text-gray-900">85mm Studio</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Brand Preset</span>
	<span class="text-gray-900">Premium Casual</span>
	</div>
	</div>
	</div>
	<div>
	<p class="text-xs font-semibold text-gray-500 uppercase mb-3">Generation Info</p>
	<div class="space-y-2 text-sm">
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Engine</span>
	<span class="text-gray-900">DS-Studio V3.2</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Cost</span>
	<span class="text-gray-900">$2.40</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Approval State</span>
	<span class="text-green-600 font-medium">Approved</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Assigned Projects</span>
	<span class="text-gray-900">3 active</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Usage Tab -->
	<div id="tab-usage" class="tab-panel hidden">
	<p class="text-sm text-gray-600 mb-3">Active in 3 campaigns</p>
	<div class="space-y-2">
	<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
	<div class="flex items-center gap-3">
	<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
	<i data-lucide="shopping-bag" class="w-5 h-5 text-indigo-600"></i>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-900">Spring Denim PDP Refresh</p>
	<p class="text-xs text-gray-500">247 assets • Due Mar 15</p>
	</div>
	</div>
	<span class="text-xs text-green-600 font-medium">On Track</span>
	</div>
	<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
	<div class="flex items-center gap-3">
	<div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
	<i data-lucide="megaphone" class="w-5 h-5 text-amber-600"></i>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-900">Premium Activewear Launch</p>
	<p class="text-xs text-gray-500">48 assets • Due Mar 20</p>
	</div>
	</div>
	<span class="text-xs text-amber-600 font-medium">In Review</span>
	</div>
	<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
	<div class="flex items-center gap-3">
	<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
	<i data-lucide="book-open" class="w-5 h-5 text-purple-600"></i>
	</div>
	<div>
	<p class="text-sm font-medium text-gray-900">Marketplace Catalog</p>
	<p class="text-xs text-gray-500">156 assets • Due Apr 1</p>
	</div>
	</div>
	<span class="text-xs text-blue-600 font-medium">Planning</span>
	</div>
	</div>
	</div>

	</div>
	</div>
	</div>

	<!-- AI ASSISTANT PANEL -->
	<div class="w-72 flex flex-col gap-4">
	<div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl border border-indigo-100 p-4">
	<div class="flex items-center gap-2 mb-3">
	<div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
	<i data-lucide="sparkles" class="w-4 h-4 text-white"></i>
	</div>
	<div>
	<h3 class="text-sm font-bold text-gray-900">AI Assistant</h3>
	<p class="text-xs text-gray-500">Real-time insights</p>
	</div>
	</div>
	<div class="space-y-3">
	<div class="bg-white/80 rounded-lg p-3 border border-indigo-100">
	<p class="text-xs text-indigo-900 leading-relaxed">This model profile has a <span class="font-semibold">14% higher approval score</span> for denim ecommerce assets.</p>
	</div>
	<div class="bg-white/80 rounded-lg p-3 border border-indigo-100">
	<p class="text-xs text-indigo-900 leading-relaxed">Soft studio lighting improves skin realism for this preset. <button class="text-indigo-600 font-medium hover:underline">Apply</button></p>
	</div>
	<div class="bg-white/80 rounded-lg p-3 border border-indigo-100">
	<p class="text-xs text-indigo-900 leading-relaxed">For marketplace listings, full-body 4:5 outputs are your best-performing format.</p>
	</div>
	<div class="bg-white/80 rounded-lg p-3 border border-indigo-100">
	<p class="text-xs text-indigo-900 leading-relaxed">This model can be reused in <span class="font-semibold">3 active projects</span>.</p>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
	<h3 class="text-sm font-semibold text-gray-900 mb-3">Quick Stats</h3>
	<div class="space-y-3">
	<div>
	<div class="flex justify-between text-xs mb-1">
	<span class="text-gray-600">Generation Cost</span>
	<span class="font-medium text-gray-900">$2.40</span>
	</div>
	<div class="h-1.5 bg-gray-100 rounded-full">
	<div class="h-1.5 bg-indigo-500 rounded-full" style="width: 60%"></div>
	</div>
	</div>
	<div>
	<div class="flex justify-between text-xs mb-1">
	<span class="text-gray-600">Approval Probability</span>
	<span class="font-medium text-green-600">94%</span>
	</div>
	<div class="h-1.5 bg-gray-100 rounded-full">
	<div class="h-1.5 bg-green-500 rounded-full" style="width: 94%"></div>
	</div>
	</div>
	<div>
	<div class="flex justify-between text-xs mb-1">
	<span class="text-gray-600">Brand Alignment</span>
	<span class="font-medium text-indigo-600">96%</span>
	</div>
	<div class="h-1.5 bg-gray-100 rounded-full">
	<div class="h-1.5 bg-indigo-500 rounded-full" style="width: 96%"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Template Strip -->
	<div class="mb-8">
	<div class="flex items-center justify-between mb-4">
	<div>
	<h2 class="text-lg font-bold text-gray-900">Model Starting Templates</h2>
	<p class="text-sm text-gray-600 mt-1">Jumpstart your creation with proven presets</p>
	</div>
	<div class="flex items-center gap-3">
	<div class="flex gap-2">
	<button onclick="filterTemplates('all')" class="template-filter px-3 py-1.5 bg-indigo-100 text-indigo-700 text-xs font-medium rounded-full" data-filter="all">All</button>
	<button onclick="filterTemplates('recommended')" class="template-filter px-3 py-1.5 text-gray-600 text-xs font-medium rounded-full hover:bg-gray-100" data-filter="recommended">Recommended</button>
	<button onclick="filterTemplates('brand')" class="template-filter px-3 py-1.5 text-gray-600 text-xs font-medium rounded-full hover:bg-gray-100" data-filter="brand">Brand Presets</button>
	<button onclick="filterTemplates('new')" class="template-filter px-3 py-1.5 text-gray-600 text-xs font-medium rounded-full hover:bg-gray-100" data-filter="new">New</button>
	</div>
	<div class="relative">
	<i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
	<input type="text" placeholder="Search templates..." onkeyup="filterTemplateSearch(this.value)" class="pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 w-48">
	</div>
	</div>
	</div>

	<div class="overflow-x-auto custom-scrollbar pb-2">
	<div class="flex gap-4" id="templateContainer" style="min-width: max-content;">

	<div class="template-card w-64 bg-white rounded-xl border border-gray-200 overflow-hidden hover-lift cursor-pointer group" data-category="recommended">
	<div class="aspect-[4/3] bg-gray-100 relative">
	<img src="http://static.photos/fashion/400x300/301" class="w-full h-full object-cover">
	<div class="absolute top-2 right-2">
	<button class="p-1.5 bg-white/90 rounded-full text-gray-400 hover:text-rose-500">
	<i data-lucide="heart" class="w-3 h-3"></i>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div class="flex items-center justify-between mb-1">
	<h3 class="font-semibold text-gray-900 text-sm">Luxury Editorial Female</h3>
	<span class="text-xs text-gray-500">92%</span>
	</div>
	<p class="text-xs text-gray-600 mb-3">High-fashion editorial campaigns</p>
	<div class="flex flex-wrap gap-1 mb-3">
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">4:5</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Studio</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Female</span>
	</div>
	<button onclick="applyTemplate('Luxury Editorial Female')" class="w-full py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity">Apply Template</button>
	</div>
	</div>

	<div class="template-card w-64 bg-white rounded-xl border border-gray-200 overflow-hidden hover-lift cursor-pointer group" data-category="recommended">
	<div class="aspect-[4/3] bg-gray-100 relative">
	<img src="http://static.photos/fashion/400x300/302" class="w-full h-full object-cover">
	<div class="absolute top-2 right-2">
	<button class="p-1.5 bg-white/90 rounded-full text-gray-400 hover:text-rose-500">
	<i data-lucide="heart" class="w-3 h-3"></i>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div class="flex items-center justify-between mb-1">
	<h3 class="font-semibold text-gray-900 text-sm">Premium Ecommerce Female</h3>
	<span class="text-xs text-gray-500">96%</span>
	</div>
	<p class="text-xs text-gray-600 mb-3">PDP and marketplace listings</p>
	<div class="flex flex-wrap gap-1 mb-3">
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">1:1</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Clean</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Female</span>
	</div>
	<button onclick="applyTemplate('Premium Ecommerce Female')" class="w-full py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity">Apply Template</button>
	</div>
	</div>

	<div class="template-card w-64 bg-white rounded-xl border border-gray-200 overflow-hidden hover-lift cursor-pointer group" data-category="brand">
	<div class="aspect-[4/3] bg-gray-100 relative">
	<img src="http://static.photos/fashion/400x300/303" class="w-full h-full object-cover">
	<div class="absolute top-2 right-2">
	<button class="p-1.5 bg-white/90 rounded-full text-rose-500">
	<i data-lucide="heart" class="w-3 h-3 fill-current"></i>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div class="flex items-center justify-between mb-1">
	<h3 class="font-semibold text-gray-900 text-sm">Marketplace Clean Male</h3>
	<span class="text-xs text-gray-500">89%</span>
	</div>
	<p class="text-xs text-gray-600 mb-3">Amazon, Shopify, marketplace</p>
	<div class="flex flex-wrap gap-1 mb-3">
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">4:5</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">White BG</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Male</span>
	</div>
	<button onclick="applyTemplate('Marketplace Clean Male')" class="w-full py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity">Apply Template</button>
	</div>
	</div>

	<div class="template-card w-64 bg-white rounded-xl border border-gray-200 overflow-hidden hover-lift cursor-pointer group" data-category="recommended">
	<div class="aspect-[4/3] bg-gray-100 relative">
	<img src="http://static.photos/fashion/400x300/304" class="w-full h-full object-cover">
	<div class="absolute top-2 right-2">
	<button class="p-1.5 bg-white/90 rounded-full text-gray-400 hover:text-rose-500">
	<i data-lucide="heart" class="w-3 h-3"></i>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div class="flex items-center justify-between mb-1">
	<h3 class="font-semibold text-gray-900 text-sm">Streetwear Gen Z Male</h3>
	<span class="text-xs text-gray-500">91%</span>
	</div>
	<p class="text-xs text-gray-600 mb-3">Streetwear campaigns, social</p>
	<div class="flex flex-wrap gap-1 mb-3">
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">4:5</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Lifestyle</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Male</span>
	</div>
	<button onclick="applyTemplate('Streetwear Gen Z Male')" class="w-full py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity">Apply Template</button>
	</div>
	</div>

	<div class="template-card w-64 bg-white rounded-xl border border-gray-200 overflow-hidden hover-lift cursor-pointer group" data-category="new">
	<div class="aspect-[4/3] bg-gray-100 relative">
	<img src="http://static.photos/fashion/400x300/305" class="w-full h-full object-cover">
	<div class="absolute top-2 left-2">
	<span class="px-1.5 py-0.5 bg-green-500 text-white text-[10px] font-medium rounded-full">NEW</span>
	</div>
	<div class="absolute top-2 right-2">
	<button class="p-1.5 bg-white/90 rounded-full text-gray-400 hover:text-rose-500">
	<i data-lucide="heart" class="w-3 h-3"></i>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div class="flex items-center justify-between mb-1">
	<h3 class="font-semibold text-gray-900 text-sm">Plus Size Fashion</h3>
	<span class="text-xs text-gray-500">94%</span>
	</div>
	<p class="text-xs text-gray-600 mb-3">Inclusive fashion campaigns</p>
	<div class="flex flex-wrap gap-1 mb-3">
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">4:5</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Studio</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Female</span>
	</div>
	<button onclick="applyTemplate('Plus Size Fashion')" class="w-full py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity">Apply Template</button>
	</div>
	</div>

	<div class="template-card w-64 bg-white rounded-xl border border-gray-200 overflow-hidden hover-lift cursor-pointer group" data-category="brand">
	<div class="aspect-[4/3] bg-gray-100 relative">
	<img src="http://static.photos/fashion/400x300/306" class="w-full h-full object-cover">
	<div class="absolute top-2 right-2">
	<button class="p-1.5 bg-white/90 rounded-full text-gray-400 hover:text-rose-500">
	<i data-lucide="heart" class="w-3 h-3"></i>
	</button>
	</div>
	</div>
	<div class="p-4">
	<div class="flex items-center justify-between mb-1">
	<h3 class="font-semibold text-gray-900 text-sm">Activewear Athletic</h3>
	<span class="text-xs text-gray-500">93%</span>
	</div>
	<p class="text-xs text-gray-600 mb-3">Performance athletic wear</p>
	<div class="flex flex-wrap gap-1 mb-3">
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">4:5</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Action</span>
	<span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded">Diverse</span>
	</div>
	<button onclick="applyTemplate('Activewear Athletic')" class="w-full py-1.5