Spaces:
Running
Running
File size: 10,333 Bytes
8b885e3 f7d9ab3 8b885e3 f7d9ab3 8b885e3 d397f0b 8b885e3 d397f0b 8b885e3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Model Magic Studio ✨</title>
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎨</text></svg>">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f4ff',
100: '#e0e9ff',
200: '#c7d9ff',
300: '#a4c4ff',
400: '#818fff',
500: '#667eea',
600: '#5a67d8',
700: '#4c51bf',
800: '#434190',
900: '#3c366b',
},
secondary: {
50: '#fdf4ff',
100: '#fae8ff',
200: '#f5d0fe',
300: '#f0abfc',
400: '#e879f9',
500: '#764ba2',
600: '#d946ef',
700: '#c026d3',
800: '#a21caf',
900: '#86198f',
}
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1000.0.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1000.0.min.js"></script>
</head>
<body class="bg-gradient-to-br from-primary-500 via-secondary-500 to-primary-600 min-h-screen">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-8 max-w-7xl">
<div class="bg-white/95 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-8">
<div class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent mb-4">
3D Model Magic Studio ✨
</h1>
<p class="text-gray-600 text-lg">Transform your images into stunning 3D models with AI</p>
</div>
<div class="grid lg:grid-cols-2 gap-8">
<!-- Upload Section -->
<div class="space-y-6">
<div class="bg-gradient-to-r from-primary-50 to-secondary-50 rounded-2xl p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
<i data-feather="upload-cloud" class="w-6 h-6 mr-2 text-primary-600"></i>
Upload Image
</h2>
<div class="relative">
<input type="file" id="fileInput" accept="image/*" class="hidden">
<label for="fileInput" class="block w-full cursor-pointer">
<div class="border-2 border-dashed border-primary-300 rounded-xl p-8 text-center hover:border-primary-500 hover:bg-primary-50 transition-all duration-300">
<i data-feather="image" class="w-12 h-12 mx-auto mb-3 text-primary-400"></i>
<p class="text-gray-600 mb-2">Click to upload or drag and drop</p>
<p class="text-sm text-gray-400">PNG, JPG, GIF up to 10MB</p>
</div>
</label>
</div>
<div id="imagePreview" class="mt-4 hidden">
<img id="previewImg" class="w-full rounded-lg shadow-lg">
</div>
</div>
<div class="bg-gradient-to-r from-secondary-50 to-primary-50 rounded-2xl p-6">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
<p class="text-sm text-blue-800 flex items-center">
<i data-feather="info" class="w-4 h-4 mr-2"></i>
Demo Mode: Creating example 3D models for demonstration
</p>
</div>
<h3 class="text-lg font-semibold text-gray-800 mb-3">Generation Settings</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Model Quality</label>
<select id="quality" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
<option value="standard">Standard</option>
<option value="high" selected>High Quality</option>
<option value="ultra">Ultra HD</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
<select id="format" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
<option value="gltf">GLTF</option>
<option value="obj">OBJ</option>
<option value="fbx">FBX</option>
</select>
</div>
<button id="generateBtn" class="w-full bg-gradient-to-r from-primary-600 to-secondary-600 text-white font-semibold py-3 px-6 rounded-xl hover:from-primary-700 hover:to-secondary-700 transform hover:scale-105 transition-all duration-200 shadow-lg">
<i data-feather="zap" class="inline w-4 h-4 mr-2"></i>
Generate 3D Model
</button>
</div>
</div>
</div>
<!-- Viewer Section -->
<div class="space-y-6">
<div class="bg-gray-900 rounded-2xl p-4 shadow-xl">
<h2 class="text-2xl font-semibold text-white mb-4 flex items-center">
<i data-feather="box" class="w-6 h-6 mr-2 text-secondary-400"></i>
3D Preview
</h2>
<div id="viewer" class="w-full h-96 lg:h-[450px] rounded-lg bg-gray-800 relative overflow-hidden">
<div id="viewerPlaceholder" class="absolute inset-0 flex items-center justify-center text-gray-400">
<div class="text-center">
<i data-feather="package" class="w-16 h-16 mx-auto mb-3"></i>
<p>Your 3D model will appear here</p>
</div>
</div>
</div>
</div>
<!-- Status Display -->
<div id="statusContainer" class="hidden">
<div id="statusBox" class="rounded-xl p-4 transition-all duration-300">
<div class="flex items-center">
<div id="statusIcon" class="mr-3"></div>
<div class="flex-1">
<p id="statusText" class="font-medium"></p>
<div id="progressBar" class="w-full bg-gray-200 rounded-full h-2 mt-2 hidden">
<div id="progressFill" class="bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full transition-all duration-500" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Model Info -->
<div id="modelInfo" class="hidden bg-gray-50 rounded-xl p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Model Information</h3>
<div id="modelDetails" class="text-sm text-gray-600 space-y-1"></div>
</div>
</div>
</div>
</div>
<!-- Recent Models Gallery -->
<div class="bg-white/95 backdrop-blur-lg rounded-3xl shadow-2xl p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i data-feather="clock" class="w-6 h-6 mr-2 text-primary-600"></i>
Recent Models
</h2>
<div id="recentModels" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
<i data-feather="plus-circle" class="w-8 h-8"></i>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<!-- Components -->
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<!-- Main Script -->
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |