Hugging Face's logo

Spaces:
CuriousCreator
/
remesher
Running

App Files Community
CuriousCreator commited on
Commit
4dd230c
·
verified ·
1 Parent(s): c0abd44

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +617 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Remesher
3
- emoji: 🏆
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: remesher
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,617 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Object Remesher | 3D Mesh Optimization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropzone {
11
+ border: 2px dashed #94a3b8;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #6366f1;
16
+ background-color: #e0e7ff;
17
+ }
18
+ .mesh-preview {
19
+ background: linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
20
+ linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
21
+ linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
22
+ linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
23
+ background-size: 20px 20px;
24
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
25
+ }
26
+ .progress-bar {
27
+ transition: width 0.3s ease;
28
+ }
29
+ canvas {
30
+ touch-action: none;
31
+ }
32
+ .tooltip {
33
+ position: relative;
34
+ }
35
+ .tooltip-text {
36
+ visibility: hidden;
37
+ width: 200px;
38
+ background-color: #1e293b;
39
+ color: #fff;
40
+ text-align: center;
41
+ border-radius: 6px;
42
+ padding: 5px;
43
+ position: absolute;
44
+ z-index: 1;
45
+ bottom: 125%;
46
+ left: 50%;
47
+ transform: translateX(-50%);
48
+ opacity: 0;
49
+ transition: opacity 0.3s;
50
+ }
51
+ .tooltip:hover .tooltip-text {
52
+ visibility: visible;
53
+ opacity: 1;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-50 text-gray-800">
58
+ <div class="min-h-screen flex flex-col">
59
+ <!-- Header -->
60
+ <header class="bg-indigo-600 text-white shadow-md">
61
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
62
+ <div class="flex items-center space-x-2">
63
+ <i class="fas fa-cube text-2xl"></i>
64
+ <h1 class="text-2xl font-bold">Object Remesher</h1>
65
+ </div>
66
+ <nav>
67
+ <ul class="flex space-x-6">
68
+ <li><a href="#" class="hover:text-indigo-200 transition">Home</a></li>
69
+ <li><a href="#" class="hover:text-indigo-200 transition">Features</a></li>
70
+ <li><a href="#" class="hover:text-indigo-200 transition">Documentation</a></li>
71
+ <li><a href="#" class="hover:text-indigo-200 transition">Contact</a></li>
72
+ </ul>
73
+ </nav>
74
+ </div>
75
+ </header>
76
+
77
+ <!-- Main Content -->
78
+ <main class="flex-grow container mx-auto px-4 py-8">
79
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
80
+ <!-- Left Panel - Upload and Controls -->
81
+ <div class="lg:col-span-1 space-y-6">
82
+ <div class="bg-white rounded-xl shadow-md p-6">
83
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
84
+ <i class="fas fa-upload mr-2 text-indigo-500"></i>
85
+ Upload 3D Model
86
+ </h2>
87
+
88
+ <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4">
89
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-400 mb-2"></i>
90
+ <p class="text-gray-500">Drag & drop your 3D model file here</p>
91
+ <p class="text-sm text-gray-400 mt-1">Supported formats: .obj, .stl, .fbx, .gltf</p>
92
+ <input type="file" id="fileInput" class="hidden" accept=".obj,.stl,.fbx,.gltf">
93
+ <button id="browseBtn" class="mt-4 bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md transition">
94
+ Browse Files
95
+ </button>
96
+ </div>
97
+
98
+ <div id="fileInfo" class="hidden bg-gray-100 p-3 rounded-md mb-4">
99
+ <div class="flex justify-between items-center">
100
+ <div>
101
+ <p class="font-medium" id="fileName">model.obj</p>
102
+ <p class="text-sm text-gray-500" id="fileSize">12.4 MB</p>
103
+ </div>
104
+ <button id="removeFile" class="text-red-500 hover:text-red-700">
105
+ <i class="fas fa-times"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="bg-white rounded-xl shadow-md p-6">
112
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
113
+ <i class="fas fa-sliders-h mr-2 text-indigo-500"></i>
114
+ Remeshing Settings
115
+ </h2>
116
+
117
+ <div class="space-y-4">
118
+ <div>
119
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Density</label>
120
+ <div class="flex items-center space-x-2">
121
+ <input type="range" min="0.1" max="2" step="0.1" value="1" class="w-full" id="densitySlider">
122
+ <span class="text-sm w-10 text-center" id="densityValue">1.0</span>
123
+ </div>
124
+ </div>
125
+
126
+ <div>
127
+ <label class="block text-sm font-medium text-gray-700 mb-1">Preserve Features</label>
128
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
129
+ <option>Sharp Edges</option>
130
+ <option selected>All Features</option>
131
+ <option>None</option>
132
+ </select>
133
+ </div>
134
+
135
+ <div>
136
+ <label class="block text-sm font-medium text-gray-700 mb-1">Remeshing Method</label>
137
+ <div class="grid grid-cols-2 gap-2">
138
+ <button class="bg-indigo-100 text-indigo-700 border border-indigo-300 rounded-md px-3 py-2 text-sm font-medium">Isotropic</button>
139
+ <button class="bg-white text-gray-700 border border-gray-300 rounded-md px-3 py-2 text-sm font-medium">Anisotropic</button>
140
+ <button class="bg-white text-gray-700 border border-gray-300 rounded-md px-3 py-2 text-sm font-medium">Quad Dominant</button>
141
+ <button class="bg-white text-gray-700 border border-gray-300 rounded-md px-3 py-2 text-sm font-medium">Adaptive</button>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="pt-2">
146
+ <button id="remeshBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center justify-center">
147
+ <i class="fas fa-magic mr-2"></i>
148
+ Remesh Model
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="bg-white rounded-xl shadow-md p-6">
155
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
156
+ <i class="fas fa-chart-bar mr-2 text-indigo-500"></i>
157
+ Mesh Statistics
158
+ </h2>
159
+
160
+ <div class="space-y-3">
161
+ <div class="flex justify-between">
162
+ <span class="text-gray-600">Original Faces:</span>
163
+ <span class="font-medium" id="originalFaces">0</span>
164
+ </div>
165
+ <div class="flex justify-between">
166
+ <span class="text-gray-600">Remeshed Faces:</span>
167
+ <span class="font-medium" id="remeshedFaces">0</span>
168
+ </div>
169
+ <div class="flex justify-between">
170
+ <span class="text-gray-600">Reduction:</span>
171
+ <span class="font-medium" id="reduction">0%</span>
172
+ </div>
173
+ <div class="flex justify-between">
174
+ <span class="text-gray-600">File Size:</span>
175
+ <span class="font-medium" id="fileSizeStat">0 MB</span>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Right Panel - 3D Viewer and Results -->
182
+ <div class="lg:col-span-2 space-y-6">
183
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
184
+ <div class="flex justify-between items-center border-b border-gray-200 px-6 py-4">
185
+ <h2 class="text-xl font-semibold flex items-center">
186
+ <i class="fas fa-cube mr-2 text-indigo-500"></i>
187
+ 3D Model Viewer
188
+ </h2>
189
+ <div class="flex space-x-2">
190
+ <button class="tooltip p-2 text-gray-500 hover:text-indigo-500 rounded-full hover:bg-gray-100 transition">
191
+ <i class="fas fa-rotate"></i>
192
+ <span class="tooltip-text">Rotate Model</span>
193
+ </button>
194
+ <button class="tooltip p-2 text-gray-500 hover:text-indigo-500 rounded-full hover:bg-gray-100 transition">
195
+ <i class="fas fa-arrows-up-down-left-right"></i>
196
+ <span class="tooltip-text">Pan Model</span>
197
+ </button>
198
+ <button class="tooltip p-2 text-gray-500 hover:text-indigo-500 rounded-full hover:bg-gray-100 transition">
199
+ <i class="fas fa-search-plus"></i>
200
+ <span class="tooltip-text">Zoom In/Out</span>
201
+ </button>
202
+ <button class="tooltip p-2 text-gray-500 hover:text-indigo-500 rounded-full hover:bg-gray-100 transition">
203
+ <i class="fas fa-border-all"></i>
204
+ <span class="tooltip-text">Toggle Wireframe</span>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ <div class="mesh-preview h-96 relative">
209
+ <canvas id="modelCanvas" class="w-full h-full"></canvas>
210
+ <div id="loadingOverlay" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
211
+ <div class="text-center text-white">
212
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mx-auto mb-4"></div>
213
+ <p>Processing model...</p>
214
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4 mx-auto max-w-md">
215
+ <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
223
+ <div class="border-b border-gray-200">
224
+ <nav class="flex -mb-px">
225
+ <button class="tab-button active py-4 px-6 text-center border-b-2 font-medium text-sm border-indigo-500 text-indigo-600">
226
+ <i class="fas fa-list mr-2"></i>
227
+ Comparison
228
+ </button>
229
+ <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
230
+ <i class="fas fa-download mr-2"></i>
231
+ Export
232
+ </button>
233
+ <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
234
+ <i class="fas fa-history mr-2"></i>
235
+ History
236
+ </button>
237
+ </nav>
238
+ </div>
239
+ <div class="p-6">
240
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
241
+ <div>
242
+ <h3 class="font-medium text-gray-700 mb-3">Original Model</h3>
243
+ <div class="bg-gray-100 rounded-lg p-4 h-48 flex items-center justify-center">
244
+ <p class="text-gray-500">Original mesh will appear here</p>
245
+ </div>
246
+ <div class="mt-3 text-sm text-gray-600">
247
+ <p><span class="font-medium">Vertices:</span> <span id="originalVertices">0</span></p>
248
+ <p><span class="font-medium">Faces:</span> <span id="originalFaces2">0</span></p>
249
+ </div>
250
+ </div>
251
+ <div>
252
+ <h3 class="font-medium text-gray-700 mb-3">Remeshed Model</h3>
253
+ <div class="bg-gray-100 rounded-lg p-4 h-48 flex items-center justify-center">
254
+ <p class="text-gray-500">Optimized mesh will appear here</p>
255
+ </div>
256
+ <div class="mt-3 text-sm text-gray-600">
257
+ <p><span class="font-medium">Vertices:</span> <span id="remeshedVertices">0</span></p>
258
+ <p><span class="font-medium">Faces:</span> <span id="remeshedFaces2">0</span></p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="mt-6">
264
+ <button class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-md font-medium transition flex items-center">
265
+ <i class="fas fa-download mr-2"></i>
266
+ Download Remeshed Model
267
+ </button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </main>
274
+
275
+ <!-- Footer -->
276
+ <footer class="bg-gray-800 text-white py-8">
277
+ <div class="container mx-auto px-4">
278
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
279
+ <div>
280
+ <h3 class="text-lg font-semibold mb-4">Object Remesher</h3>
281
+ <p class="text-gray-400">Advanced 3D mesh optimization tool for professionals and enthusiasts.</p>
282
+ </div>
283
+ <div>
284
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
285
+ <ul class="space-y-2">
286
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
287
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
288
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
289
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
290
+ </ul>
291
+ </div>
292
+ <div>
293
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
294
+ <ul class="space-y-2">
295
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
296
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
297
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li>
298
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
299
+ </ul>
300
+ </div>
301
+ <div>
302
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
303
+ <div class="flex space-x-4">
304
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
305
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
306
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a>
307
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
312
+ <p>&copy; 2023 Object Remesher. All rights reserved.</p>
313
+ </div>
314
+ </div>
315
+ </footer>
316
+ </div>
317
+
318
+ <script>
319
+ // DOM Elements
320
+ const dropzone = document.getElementById('dropzone');
321
+ const fileInput = document.getElementById('fileInput');
322
+ const browseBtn = document.getElementById('browseBtn');
323
+ const fileInfo = document.getElementById('fileInfo');
324
+ const fileName = document.getElementById('fileName');
325
+ const fileSize = document.getElementById('fileSize');
326
+ const removeFile = document.getElementById('removeFile');
327
+ const remeshBtn = document.getElementById('remeshBtn');
328
+ const densitySlider = document.getElementById('densitySlider');
329
+ const densityValue = document.getElementById('densityValue');
330
+ const loadingOverlay = document.getElementById('loadingOverlay');
331
+ const progressBar = document.getElementById('progressBar');
332
+ const tabButtons = document.querySelectorAll('.tab-button');
333
+
334
+ // Event Listeners
335
+ browseBtn.addEventListener('click', () => fileInput.click());
336
+
337
+ fileInput.addEventListener('change', handleFileSelect);
338
+
339
+ dropzone.addEventListener('dragover', (e) => {
340
+ e.preventDefault();
341
+ dropzone.classList.add('active');
342
+ });
343
+
344
+ dropzone.addEventListener('dragleave', () => {
345
+ dropzone.classList.remove('active');
346
+ });
347
+
348
+ dropzone.addEventListener('drop', (e) => {
349
+ e.preventDefault();
350
+ dropzone.classList.remove('active');
351
+
352
+ if (e.dataTransfer.files.length) {
353
+ fileInput.files = e.dataTransfer.files;
354
+ handleFileSelect({ target: fileInput });
355
+ }
356
+ });
357
+
358
+ removeFile.addEventListener('click', () => {
359
+ fileInfo.classList.add('hidden');
360
+ fileInput.value = '';
361
+ });
362
+
363
+ densitySlider.addEventListener('input', () => {
364
+ densityValue.textContent = densitySlider.value;
365
+ });
366
+
367
+ remeshBtn.addEventListener('click', () => {
368
+ if (!fileInput.files.length) {
369
+ alert('Please upload a 3D model first');
370
+ return;
371
+ }
372
+
373
+ loadingOverlay.classList.remove('hidden');
374
+ simulateProcessing();
375
+ });
376
+
377
+ tabButtons.forEach(button => {
378
+ button.addEventListener('click', () => {
379
+ tabButtons.forEach(btn => btn.classList.remove('active', 'text-indigo-600', 'border-indigo-500'));
380
+ tabButtons.forEach(btn => btn.classList.add('text-gray-500', 'border-transparent'));
381
+
382
+ button.classList.add('active', 'text-indigo-600', 'border-indigo-500');
383
+ button.classList.remove('text-gray-500', 'border-transparent');
384
+ });
385
+ });
386
+
387
+ // Functions
388
+ function handleFileSelect(e) {
389
+ const file = e.target.files[0];
390
+ if (!file) return;
391
+
392
+ fileName.textContent = file.name;
393
+ fileSize.textContent = formatFileSize(file.size);
394
+ fileInfo.classList.remove('hidden');
395
+
396
+ // Update stats
397
+ document.getElementById('originalFaces').textContent = Math.floor(Math.random() * 50000) + 10000;
398
+ document.getElementById('originalFaces2').textContent = document.getElementById('originalFaces').textContent;
399
+ document.getElementById('originalVertices').textContent = Math.floor(Math.random() * 25000) + 5000;
400
+ document.getElementById('fileSizeStat').textContent = fileSize.textContent;
401
+
402
+ // Simulate loading a model
403
+ simulateModelLoad();
404
+ }
405
+
406
+ function formatFileSize(bytes) {
407
+ if (bytes === 0) return '0 Bytes';
408
+ const k = 1024;
409
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
410
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
411
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
412
+ }
413
+
414
+ function simulateModelLoad() {
415
+ loadingOverlay.classList.remove('hidden');
416
+ let progress = 0;
417
+
418
+ const interval = setInterval(() => {
419
+ progress += Math.random() * 10;
420
+ if (progress > 100) progress = 100;
421
+ progressBar.style.width = `${progress}%`;
422
+
423
+ if (progress === 100) {
424
+ clearInterval(interval);
425
+ setTimeout(() => {
426
+ loadingOverlay.classList.add('hidden');
427
+ progressBar.style.width = '0%';
428
+
429
+ // Initialize a simple 3D viewer (placeholder)
430
+ init3DViewer();
431
+ }, 500);
432
+ }
433
+ }, 100);
434
+ }
435
+
436
+ function simulateProcessing() {
437
+ let progress = 0;
438
+
439
+ const interval = setInterval(() => {
440
+ progress += Math.random() * 5;
441
+ if (progress > 100) progress = 100;
442
+ progressBar.style.width = `${progress}%`;
443
+
444
+ if (progress === 100) {
445
+ clearInterval(interval);
446
+ setTimeout(() => {
447
+ loadingOverlay.classList.add('hidden');
448
+ progressBar.style.width = '0%';
449
+
450
+ // Update stats with "remeshed" values
451
+ const originalFaces = parseInt(document.getElementById('originalFaces').textContent);
452
+ const reduction = Math.floor(Math.random() * 70) + 10; // 10-80% reduction
453
+ const remeshedFaces = Math.floor(originalFaces * (100 - reduction) / 100);
454
+
455
+ document.getElementById('remeshedFaces').textContent = remeshedFaces;
456
+ document.getElementById('remeshedFaces2').textContent = remeshedFaces;
457
+ document.getElementById('remeshedVertices').textContent = Math.floor(remeshedFaces * 0.6);
458
+ document.getElementById('reduction').textContent = `${reduction}%`;
459
+
460
+ // Update the 3D viewer with "remeshed" model
461
+ update3DViewer();
462
+ }, 500);
463
+ }
464
+ }, 200);
465
+ }
466
+
467
+ function init3DViewer() {
468
+ const canvas = document.getElementById('modelCanvas');
469
+ const ctx = canvas.getContext('2d');
470
+
471
+ // Set canvas dimensions
472
+ canvas.width = canvas.offsetWidth;
473
+ canvas.height = canvas.offsetHeight;
474
+
475
+ // Draw a placeholder "3D" cube
476
+ drawPlaceholderModel(ctx, canvas.width, canvas.height);
477
+
478
+ // Add some basic interactivity
479
+ let isDragging = false;
480
+ let lastX = 0;
481
+ let lastY = 0;
482
+ let rotationX = 20;
483
+ let rotationY = 30;
484
+
485
+ canvas.addEventListener('mousedown', (e) => {
486
+ isDragging = true;
487
+ lastX = e.clientX;
488
+ lastY = e.clientY;
489
+ });
490
+
491
+ canvas.addEventListener('mousemove', (e) => {
492
+ if (!isDragging) return;
493
+
494
+ const deltaX = e.clientX - lastX;
495
+ const deltaY = e.clientY - lastY;
496
+
497
+ rotationY += deltaX * 0.5;
498
+ rotationX += deltaY * 0.5;
499
+
500
+ lastX = e.clientX;
501
+ lastY = e.clientY;
502
+
503
+ drawPlaceholderModel(ctx, canvas.width, canvas.height, rotationX, rotationY);
504
+ });
505
+
506
+ canvas.addEventListener('mouseup', () => {
507
+ isDragging = false;
508
+ });
509
+
510
+ canvas.addEventListener('mouseleave', () => {
511
+ isDragging = false;
512
+ });
513
+ }
514
+
515
+ function update3DViewer() {
516
+ const canvas = document.getElementById('modelCanvas');
517
+ const ctx = canvas.getContext('2d');
518
+
519
+ // Draw a different "remeshed" version
520
+ drawPlaceholderModel(ctx, canvas.width, canvas.height, 20, 30, true);
521
+ }
522
+
523
+ function drawPlaceholderModel(ctx, width, height, rotX = 20, rotY = 30, isRemeshed = false) {
524
+ ctx.clearRect(0, 0, width, height);
525
+
526
+ // Simple 3D cube projection
527
+ const size = Math.min(width, height) * 0.3;
528
+ const centerX = width / 2;
529
+ const centerY = height / 2;
530
+
531
+ // Convert angles to radians
532
+ const radX = rotX * Math.PI / 180;
533
+ const radY = rotY * Math.PI / 180;
534
+
535
+ // Cube vertices
536
+ const vertices = [
537
+ { x: -1, y: -1, z: -1 },
538
+ { x: 1, y: -1, z: -1 },
539
+ { x: 1, y: 1, z: -1 },
540
+ { x: -1, y: 1, z: -1 },
541
+ { x: -1, y: -1, z: 1 },
542
+ { x: 1, y: -1, z: 1 },
543
+ { x: 1, y: 1, z: 1 },
544
+ { x: -1, y: 1, z: 1 }
545
+ ];
546
+
547
+ // Project 3D to 2D
548
+ const projected = vertices.map(v => {
549
+ // Rotate around X and Y axes
550
+ let x = v.x;
551
+ let y = v.y * Math.cos(radX) - v.z * Math.sin(radX);
552
+ let z = v.y * Math.sin(radX) + v.z * Math.cos(radX);
553
+
554
+ let x2 = x * Math.cos(radY) - z * Math.sin(radY);
555
+ let z2 = x * Math.sin(radY) + z * Math.cos(radY);
556
+
557
+ // Perspective projection
558
+ const distance = 4;
559
+ const factor = distance / (distance + z2);
560
+ return {
561
+ x: centerX + x2 * factor * size,
562
+ y: centerY + y * factor * size
563
+ };
564
+ });
565
+
566
+ // Draw edges
567
+ const edges = [
568
+ [0, 1], [1, 2], [2, 3], [3, 0], // back face
569
+ [4, 5], [5, 6], [6, 7], [7, 4], // front face
570
+ [0, 4], [1, 5], [2, 6], [3, 7] // connecting edges
571
+ ];
572
+
573
+ ctx.strokeStyle = isRemeshed ? '#10b981' : '#6366f1';
574
+ ctx.lineWidth = isRemeshed ? 1 : 2;
575
+
576
+ edges.forEach(edge => {
577
+ const [a, b] = edge;
578
+ ctx.beginPath();
579
+ ctx.moveTo(projected[a].x, projected[a].y);
580
+ ctx.lineTo(projected[b].x, projected[b].y);
581
+ ctx.stroke();
582
+ });
583
+
584
+ if (isRemeshed) {
585
+ // Add some "remeshed" details
586
+ const faceCenters = [
587
+ { x: 0, y: 0, z: -1.2 }, // back
588
+ { x: 0, y: 0, z: 1.2 }, // front
589
+ { x: -1.2, y: 0, z: 0 }, // left
590
+ { x: 1.2, y: 0, z: 0 }, // right
591
+ { x: 0, y: -1.2, z: 0 }, // bottom
592
+ { x: 0, y: 1.2, z: 0 } // top
593
+ ];
594
+
595
+ faceCenters.forEach(center => {
596
+ // Project this point
597
+ let x = center.x;
598
+ let y = center.y * Math.cos(radX) - center.z * Math.sin(radX);
599
+ let z = center.y * Math.sin(radX) + center.z * Math.cos(radX);
600
+
601
+ let x2 = x * Math.cos(radY) - z * Math.sin(radY);
602
+ let z2 = x * Math.sin(radY) + z * Math.cos(radY);
603
+
604
+ const distance = 4;
605
+ const factor = distance / (distance + z2);
606
+ const px = centerX + x2 * factor * size;
607
+ const py = centerY + y * factor * size;
608
+
609
+ // Draw a small quad to represent remeshed faces
610
+ ctx.fillStyle = '#a7f3d0';
611
+ ctx.fillRect(px - 5, py - 5, 10, 10);
612
+ });
613
+ }
614
+ }
615
+ </script>
616
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CuriousCreator/remesher" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
617
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ remesher for objects