Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI 3D Model Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #6366f1; | |
| border-radius: 0.75rem; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #4f46e5; | |
| background-color: rgba(99, 102, 241, 0.1); | |
| } | |
| .result-container { | |
| transition: all 0.5s ease; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .result-container.show { | |
| max-height: 1000px; | |
| } | |
| .model-card { | |
| transition: all 0.3s ease; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .model-card.selected { | |
| border-color: #6366f1; | |
| background-color: rgba(99, 102, 241, 0.05); | |
| } | |
| .spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| canvas { | |
| max-width: 100%; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .model-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| } | |
| .progress-text { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: white; | |
| font-weight: bold; | |
| text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-600 mb-3">AI 3D Model Generator</h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Transform your 2D images into high-quality 3D models using cutting-edge AI models</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto"> | |
| <!-- Upload Section --> | |
| <div id="upload-section" class="mb-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Upload Your Image</h2> | |
| <div id="dropzone" class="dropzone p-12 text-center cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4"></i> | |
| <p class="text-lg text-gray-600 mb-2">Drag & drop your image here</p> | |
| <p class="text-sm text-gray-500 mb-4">or</p> | |
| <label for="file-upload" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition cursor-pointer"> | |
| Browse Files | |
| </label> | |
| <input id="file-upload" type="file" accept="image/*" class="hidden"> | |
| </div> | |
| </div> | |
| <div id="preview-container" class="mt-6 hidden"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Image Preview</h3> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <img id="image-preview" src="" alt="Preview" class="max-w-xs rounded-lg shadow"> | |
| <div id="model-badge" class="model-badge hidden"> | |
| <span id="selected-model-name">TripoSR</span> | |
| </div> | |
| </div> | |
| <button id="change-image" class="ml-4 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-redo mr-2"></i>Change Image | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Selection --> | |
| <div id="model-selection" class="mb-8 hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Select AI Model</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="model-card p-4 border-2 border-gray-200 rounded-xl cursor-pointer" data-model="triposr"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-cube text-2xl text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">TripoSR</h3> | |
| <p class="text-sm text-gray-500 mb-2">Fast feed-forward 3D object reconstruction</p> | |
| <div class="text-xs text-indigo-600 bg-indigo-50 px-2 py-1 rounded"> | |
| <i class="fas fa-bolt mr-1"></i> Fast processing | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card p-4 border-2 border-gray-200 rounded-xl cursor-pointer" data-model="real3d"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-user text-2xl text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-1">Real3D</h3> | |
| <p class="text-sm text-gray-500 mb-2">High-quality 3D face reconstruction</p> | |
| <div class="text-xs text-indigo-600 bg-indigo-50 px-2 py-1 rounded"> | |
| <i class="fas fa-star mr-1"></i> High quality | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="generate-btn" class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium hidden"> | |
| <i class="fas fa-magic mr-2"></i> Generate 3D Model | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Processing Section --> | |
| <div id="processing-section" class="hidden"> | |
| <div class="flex flex-col items-center justify-center py-8"> | |
| <div class="relative w-24 h-24 mb-4"> | |
| <div class="w-full h-full border-4 border-indigo-500 border-t-transparent rounded-full spinner"></div> | |
| <div id="progress-text" class="progress-text">0%</div> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-800 mb-2">Processing Your Image</h3> | |
| <p class="text-gray-600 text-center max-w-md" id="processing-message">Initializing the AI model...</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4 max-w-md"> | |
| <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="result-section" class="result-container"> | |
| <div class="border-t border-gray-200 pt-6 mt-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Your 3D Model</h2> | |
| <span id="model-used" class="text-sm bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full"></span> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <div class="bg-gray-100 p-4 rounded-lg relative"> | |
| <canvas id="3d-viewer"></canvas> | |
| <div id="viewer-controls" class="absolute bottom-4 left-4 flex gap-2"> | |
| <button id="rotate-toggle" class="bg-white p-2 rounded-full shadow-md"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| <button id="reset-view" class="bg-white p-2 rounded-full shadow-md"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-2"> | |
| <button id="view-front" class="bg-gray-200 p-2 rounded text-sm"> | |
| <i class="fas fa-arrow-up mr-1"></i> Front | |
| </button> | |
| <button id="view-side" class="bg-gray-200 p-2 rounded text-sm"> | |
| <i class="fas fa-arrow-right mr-1"></i> Side | |
| </button> | |
| <button id="view-top" class="bg-gray-200 p-2 rounded text-sm"> | |
| <i class="fas fa-arrow-down mr-1"></i> Top | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Model Information</h3> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Model:</span> | |
| <span id="model-type" class="font-medium">TripoSR</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Vertices:</span> | |
| <span id="vertex-count" class="font-medium">12,456</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Faces:</span> | |
| <span id="face-count" class="font-medium">6,228</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Processing Time:</span> | |
| <span id="processing-time" class="font-medium">4.2s</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-3"> | |
| <button id="download-obj" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download OBJ | |
| </button> | |
| <button id="download-stl" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download STL | |
| </button> | |
| <button id="download-gltf" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download GLTF | |
| </button> | |
| <button id="new-conversion" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> New Conversion | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>Powered by <a href="https://huggingface.co./stabilityai/TripoSR" class="text-indigo-600 hover:underline" target="_blank">TripoSR</a> and <a href="https://huggingface.co./spaces/hwjiang/Real3D" class="text-indigo-600 hover:underline" target="_blank">Real3D</a> AI models</p> | |
| </div> | |
| </div> | |
| <!-- Three.js for 3D preview --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.min.js"></script> | |
| <script> | |
| // DOM Elements | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileUpload = document.getElementById('file-upload'); | |
| const previewContainer = document.getElementById('preview-container'); | |
| const imagePreview = document.getElementById('image-preview'); | |
| const changeImageBtn = document.getElementById('change-image'); | |
| const modelSelection = document.getElementById('model-selection'); | |
| const modelCards = document.querySelectorAll('.model-card'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const processingSection = document.getElementById('processing-section'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressText = document.getElementById('progress-text'); | |
| const processingMessage = document.getElementById('processing-message'); | |
| const resultSection = document.getElementById('result-section'); | |
| const newConversionBtn = document.getElementById('new-conversion'); | |
| const modelBadge = document.getElementById('model-badge'); | |
| const modelUsed = document.getElementById('model-used'); | |
| // Variables | |
| let selectedFile = null; | |
| let selectedModel = null; | |
| let threeScene = null; | |
| let threeControls = null; | |
| let threeCamera = null; | |
| let threeRenderer = null; | |
| let threeModel = null; | |
| let autoRotate = true; | |
| // Event Listeners | |
| dropzone.addEventListener('click', () => fileUpload.click()); | |
| fileUpload.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| handleFileUpload(e.target.files[0]); | |
| } | |
| }); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| if (e.dataTransfer.files.length) { | |
| handleFileUpload(e.dataTransfer.files[0]); | |
| } | |
| }); | |
| changeImageBtn.addEventListener('click', () => { | |
| selectedFile = null; | |
| previewContainer.classList.add('hidden'); | |
| modelSelection.classList.add('hidden'); | |
| generateBtn.classList.add('hidden'); | |
| fileUpload.value = ''; | |
| modelBadge.classList.add('hidden'); | |
| }); | |
| modelCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| modelCards.forEach(c => c.classList.remove('selected')); | |
| card.classList.add('selected'); | |
| selectedModel = card.getAttribute('data-model'); | |
| // Update model badge | |
| const modelName = card.querySelector('h3').textContent; | |
| document.getElementById('selected-model-name').textContent = modelName; | |
| modelBadge.classList.remove('hidden'); | |
| // Show generate button | |
| generateBtn.classList.remove('hidden'); | |
| }); | |
| }); | |
| generateBtn.addEventListener('click', () => { | |
| if (!selectedFile || !selectedModel) return; | |
| // Show processing section | |
| processingSection.classList.remove('hidden'); | |
| // Set appropriate processing message | |
| processingMessage.textContent = selectedModel === 'triposr' | |
| ? "Processing with TripoSR model (this may take 20-30 seconds)..." | |
| : "Processing with Real3D model (this may take 1-2 minutes)..."; | |
| // Start processing | |
| processImageWithModel(selectedModel, selectedFile); | |
| }); | |
| newConversionBtn.addEventListener('click', resetForm); | |
| // 3D Viewer Controls | |
| document.getElementById('rotate-toggle').addEventListener('click', () => { | |
| autoRotate = !autoRotate; | |
| if (threeControls) threeControls.autoRotate = autoRotate; | |
| }); | |
| document.getElementById('reset-view').addEventListener('click', () => { | |
| if (threeControls && threeCamera) { | |
| threeControls.reset(); | |
| threeCamera.position.z = 5; | |
| } | |
| }); | |
| document.getElementById('view-front').addEventListener('click', () => { | |
| if (threeControls && threeCamera) { | |
| threeControls.reset(); | |
| threeCamera.position.set(0, 0, 5); | |
| } | |
| }); | |
| document.getElementById('view-side').addEventListener('click', () => { | |
| if (threeControls && threeCamera) { | |
| threeControls.reset(); | |
| threeCamera.position.set(5, 0, 0); | |
| } | |
| }); | |
| document.getElementById('view-top').addEventListener('click', () => { | |
| if (threeControls && threeCamera) { | |
| threeControls.reset(); | |
| threeCamera.position.set(0, 5, 0); | |
| } | |
| }); | |
| // Functions | |
| function handleFileUpload(file) { | |
| if (!file.type.match('image.*')) { | |
| alert('Please upload an image file'); | |
| return; | |
| } | |
| selectedFile = file; | |
| // Show preview | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| imagePreview.src = e.target.result; | |
| previewContainer.classList.remove('hidden'); | |
| modelSelection.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| async function processImageWithModel(modelType, file) { | |
| // Simulate progress for demo purposes | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressText.textContent = `${Math.floor(progress)}%`; | |
| // Update messages based on progress | |
| if (progress < 30) { | |
| processingMessage.textContent = modelType === 'triposr' | |
| ? "Uploading image to TripoSR model..." | |
| : "Uploading image to Real3D model..."; | |
| } else if (progress < 70) { | |
| processingMessage.textContent = modelType === 'triposr' | |
| ? "Generating 3D reconstruction..." | |
| : "Creating high-quality 3D face model..."; | |
| } else { | |
| processingMessage.textContent = "Finalizing and preparing your 3D model..."; | |
| } | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| processingSection.classList.add('hidden'); | |
| showResults(modelType); | |
| }, 1000); | |
| } | |
| }, 500); | |
| // In a real implementation, you would call the Hugging Face API here | |
| // For example: | |
| /* | |
| try { | |
| const formData = new FormData(); | |
| formData.append('image', file); | |
| const endpoint = modelType === 'triposr' | |
| ? 'https://api-inference.huggingface.co/models/stabilityai/TripoSR' | |
| : 'https://api-inference.huggingface.co/models/hwjiang/Real3D'; | |
| const response = await fetch(endpoint, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': 'Bearer YOUR_HUGGINGFACE_TOKEN', | |
| }, | |
| body: formData | |
| }); | |
| const result = await response.json(); | |
| return result; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| throw error; | |
| } | |
| */ | |
| } | |
| function showResults(modelType) { | |
| // Update model info | |
| const modelName = modelType === 'triposr' ? 'TripoSR' : 'Real3D'; | |
| document.getElementById('model-type').textContent = modelName; | |
| modelUsed.textContent = modelName; | |
| // Generate random stats for demo | |
| const vertices = modelType === 'triposr' | |
| ? Math.floor(Math.random() * 15000 + 5000) | |
| : Math.floor(Math.random() * 25000 + 10000); | |
| const faces = modelType === 'triposr' | |
| ? Math.floor(Math.random() * 7500 + 2500) | |
| : Math.floor(Math.random() * 12500 + 5000); | |
| const time = modelType === 'triposr' | |
| ? (Math.random() * 10 + 20).toFixed(1) | |
| : (Math.random() * 30 + 60).toFixed(1); | |
| document.getElementById('vertex-count').textContent = vertices.toLocaleString(); | |
| document.getElementById('face-count').textContent = faces.toLocaleString(); | |
| document.getElementById('processing-time').textContent = `${time}s`; | |
| // Initialize 3D viewer with appropriate model | |
| init3DViewer(modelType); | |
| // Show results | |
| resultSection.classList.add('show'); | |
| } | |
| function init3DViewer(modelType) { | |
| const canvas = document.getElementById('3d-viewer'); | |
| // Clear previous renderer if exists | |
| if (threeRenderer) { | |
| threeRenderer.dispose(); | |
| } | |
| threeRenderer = new THREE.WebGLRenderer({ | |
| canvas, | |
| antialias: true, | |
| alpha: true | |
| }); | |
| threeRenderer.setSize(canvas.clientWidth, canvas.clientHeight); | |
| threeRenderer.setClearColor(0xf0f0f0, 1); | |
| threeScene = new THREE.Scene(); | |
| threeCamera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); | |
| threeCamera.position.z = 5; | |
| threeControls = new THREE.OrbitControls(threeCamera, canvas); | |
| threeControls.enableDamping = true; | |
| threeControls.dampingFactor = 0.25; | |
| threeControls.autoRotate = autoRotate; | |
| // Add lights | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| threeScene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); | |
| directionalLight.position.set(1, 1, 1); | |
| threeScene.add(directionalLight); | |
| // Create different models based on selected type | |
| if (modelType === 'real3d') { | |
| // Create a face-like geometry for Real3D | |
| const geometry = new THREE.SphereGeometry(1, 64, 64); | |
| // Create texture from uploaded image | |
| const texture = new THREE.Texture(imagePreview); | |
| texture.needsUpdate = true; | |
| const material = new THREE.MeshPhongMaterial({ | |
| map: texture, | |
| specular: 0x111111, | |
| shininess: 30, | |
| side: THREE.DoubleSide | |
| }); | |
| threeModel = new THREE.Mesh(geometry, material); | |
| } else { | |
| // Create a more complex object for TripoSR | |
| const geometry = new THREE.TorusKnotGeometry(0.7, 0.2, 100, 16); | |
| // Create texture from uploaded image | |
| const texture = new THREE.Texture(imagePreview); | |
| texture.needsUpdate = true; | |
| const material = new THREE.MeshPhongMaterial({ | |
| map: texture, | |
| specular: 0x111111, | |
| shininess: 30 | |
| }); | |
| threeModel = new THREE.Mesh(geometry, material); | |
| } | |
| threeScene.add(threeModel); | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| if (threeControls) { | |
| threeControls.update(); | |
| } | |
| threeRenderer.render(threeScene, threeCamera); | |
| } | |
| animate(); | |
| // Handle resize | |
| window.addEventListener('resize', () => { | |
| threeCamera.aspect = canvas.clientWidth / canvas.clientHeight; | |
| threeCamera.updateProjectionMatrix(); | |
| threeRenderer.setSize(canvas.clientWidth, canvas.clientHeight); | |
| }); | |
| } | |
| function resetForm() { | |
| selectedFile = null; | |
| selectedModel = null; | |
| previewContainer.classList.add('hidden'); | |
| modelSelection.classList.add('hidden'); | |
| generateBtn.classList.add('hidden'); | |
| processingSection.classList.add('hidden'); | |
| resultSection.classList.remove('show'); | |
| modelBadge.classList.add('hidden'); | |
| fileUpload.value = ''; | |
| modelCards.forEach(c => c.classList.remove('selected')); | |
| // Reset progress bar | |
| progressBar.style.width = '0%'; | |
| progressText.textContent = '0%'; | |
| // Clear 3D viewer if exists | |
| if (threeScene && threeModel) { | |
| threeScene.remove(threeModel); | |
| threeModel = null; | |
| } | |
| } | |
| // Download buttons functionality (simulated) | |
| document.getElementById('download-obj').addEventListener('click', () => { | |
| alert('In a real implementation, this would download the OBJ file generated by the model'); | |
| }); | |
| document.getElementById('download-stl').addEventListener('click', () => { | |
| alert('In a real implementation, this would download the STL file generated by the model'); | |
| }); | |
| document.getElementById('download-gltf').addEventListener('click', () => { | |
| alert('In a real implementation, this would download the GLTF file generated by the model'); | |
| }); | |
| </script> | |
| <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=vishnumeher/vhn-3d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |