Spaces:

MNE-Zone
/

3d-model-magic-studio

Running

App Files Files Community

MNE-Zone commited on Nov 7, 2025

Commit

f7d9ab3

verified ·

1 Parent(s): d397f0b

Failed to generate 3D model

Browse files

Files changed (3) hide show

index.html +2 -2
script.js +110 -38
style.css +13 -3

index.html CHANGED Viewed

@@ -7,8 +7,7 @@
     <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 src="https://cdn.tailwindcss.com"></script>
-    <script>
         tailwind.config = {
             theme: {
                 extend: {
@@ -48,6 +47,7 @@
     <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>
 </head>
 <body class="bg-gradient-to-br from-primary-500 via-secondary-500 to-primary-600 min-h-screen">
     <custom-header></custom-header>

     <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: {
     <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>

script.js CHANGED Viewed

@@ -23,6 +23,22 @@ let scene, camera, renderer, controls, currentModel;
 let currentTaskId = null;
 let statusCheckInterval = null;
 // Initialize AWS S3
 AWS.config.update({
     accessKeyId: API_CONFIG.S3_ACCESS,
@@ -162,53 +178,64 @@ const progressBar = document.getElementById('progressBar');
 const progressFill = document.getElementById('progressFill');
 fileInput.addEventListener('change', handleFileSelect);
-generateBtn.addEventListener('generateBtn', generate3DModel);
 function handleFileSelect(event) {
     const file = event.target.files[0];
     if (file && file.type.startsWith('image/')) {
         const reader = new FileReader();
         reader.onload = function(e) {
-            previewImg.src = e.target.result;
-            imagePreview.classList.remove('hidden');
-            imagePreview.classList.add('animate-float');
         };
         reader.readAsDataURL(file);
     }
 }
 // Drag and drop
-const uploadArea = document.querySelector('label[for="fileInput"] > div');
-uploadArea.addEventListener('dragover', (e) => {
-    e.preventDefault();
-    uploadArea.classList.add('drag-active');
-});
-uploadArea.addEventListener('dragleave', () => {
-    uploadArea.classList.remove('drag-active');
-});
-uploadArea.addEventListener('drop', (e) => {
-    e.preventDefault();
-    uploadArea.classList.remove('drag-active');
-    const files = e.dataTransfer.files;
-    if (files.length > 0 && files[0].type.startsWith('image/')) {
-        fileInput.files = files;
-        handleFileSelect({ target: { files } });
     }
 });
 // 3D Model Generation
 async function generate3DModel() {
     const file = fileInput.files[0];
     if (!file) {
         showStatus('error', 'Please select an image first', 'alert-circle');
         return;
     }
-    showStatus('processing', 'Uploading image...', 'upload-cloud');
     progressBar.classList.remove('hidden');
     updateProgress(20);
@@ -234,8 +261,13 @@ async function generate3DModel() {
         progressBar.classList.add('hidden');
     }
 }
 async function uploadToS3(file) {
     const fileName = `uploads/${Date.now()}_${file.name}`;
     const params = {
         Bucket: API_CONFIG.BUCKET_NAME,
@@ -314,7 +346,9 @@ function pollTaskStatus(taskId) {
                     showStatus('success', '3D model generated successfully!', 'check-circle');
                     // Create a demo 3D model
-                    createDemoModel();
                     // Display mock model info
                     displayModelInfo({
@@ -332,8 +366,7 @@ function pollTaskStatus(taskId) {
         return;
     }
-    // Real API polling (uncomment when you have real API)
     /*
     statusCheckInterval = setInterval(async () => {
         try {
@@ -410,6 +443,19 @@ function load3DModel(modelUrl) {
 // Create a demo 3D model for demonstration purposes
 function createDemoModel() {
     // Remove existing model
     if (currentModel) {
         scene.remove(currentModel);
@@ -453,6 +499,11 @@ function displayModelInfo(data) {
     const modelInfo = document.getElementById('modelInfo');
     const modelDetails = document.getElementById('modelDetails');
     modelDetails.innerHTML = `
         <p><strong>Format:</strong> ${data.format || 'GLTF'}</p>
         <p><strong>Quality:</strong> ${data.quality || 'High'}</p>
@@ -463,9 +514,13 @@ function displayModelInfo(data) {
     modelInfo.classList.remove('hidden');
 }
 function addToRecentGallery(modelUrl) {
     const recentModels = document.getElementById('recentModels');
     const card = document.createElement('div');
     card.className = 'aspect-square bg-gray-100 rounded-lg overflow-hidden model-card hover-lift';
     card.innerHTML = `
@@ -480,8 +535,12 @@ function addToRecentGallery(modelUrl) {
         recentModels.removeChild(recentModels.lastChild);
     }
 }
 function showStatus(type, message, icon) {
     statusContainer.classList.remove('hidden');
     statusBox.className = `rounded-xl p-4 transition-all duration-300 status-${type}`;
@@ -492,19 +551,32 @@ function showStatus(type, message, icon) {
     statusIcon.innerHTML = iconHtml;
     statusText.textContent = message;
-    feather.replace();
 }
 function updateProgress(percent) {
-    progressFill.style.width = `${percent}%`;
 }
 // Initialize viewer on load
 window.addEventListener('load', () => {
     setTimeout(() => {
         initViewer();
     }, 100);
 });
-// Generate button click handler
-document.getElementById('generateBtn').addEventListener('click', generate3DModel);

 let currentTaskId = null;
 let statusCheckInterval = null;
+// DOM element references
+let fileInput, imagePreview, previewImg, generateBtn, statusContainer, statusBox, statusIcon, statusText, progressBar, progressFill;
+// Initialize DOM elements
+function initDOMElements() {
+    fileInput = document.getElementById('fileInput');
+    imagePreview = document.getElementById('imagePreview');
+    previewImg = document.getElementById('previewImg');
+    generateBtn = document.getElementById('generateBtn');
+    statusContainer = document.getElementById('statusContainer');
+    statusBox = document.getElementById('statusBox');
+    statusIcon = document.getElementById('statusIcon');
+    statusText = document.getElementById('statusText');
+    progressBar = document.getElementById('progressBar');
+    progressFill = document.getElementById('progressFill');
+}
 // Initialize AWS S3
 AWS.config.update({
     accessKeyId: API_CONFIG.S3_ACCESS,
 const progressFill = document.getElementById('progressFill');
 fileInput.addEventListener('change', handleFileSelect);
+generateBtn.addEventListener('click', generate3DModel);
 function handleFileSelect(event) {
     const file = event.target.files[0];
     if (file && file.type.startsWith('image/')) {
         const reader = new FileReader();
         reader.onload = function(e) {
+            if (previewImg) {
+                previewImg.src = e.target.result;
+            }
+            if (imagePreview) {
+                imagePreview.classList.remove('hidden');
+                imagePreview.classList.add('animate-float');
+            }
         };
         reader.readAsDataURL(file);
     }
 }
 // Drag and drop
+document.addEventListener('DOMContentLoaded', () => {
+    const uploadArea = document.querySelector('label[for="fileInput"] > div');
+    if (uploadArea) {
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('drag-active');
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('drag-active');
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('drag-active');
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].type.startsWith('image/')) {
+                if (fileInput) {
+                    fileInput.files = files;
+                    handleFileSelect({ target: { files } });
+                }
+            }
+        });
     }
 });
 // 3D Model Generation
 async function generate3DModel() {
+    if (!fileInput) {
+        console.error('File input not found');
+        return;
+    }
     const file = fileInput.files[0];
     if (!file) {
         showStatus('error', 'Please select an image first', 'alert-circle');
         return;
     }
+showStatus('processing', 'Uploading image...', 'upload-cloud');
     progressBar.classList.remove('hidden');
     updateProgress(20);
         progressBar.classList.add('hidden');
     }
 }
 async function uploadToS3(file) {
+    // Demo mode - simulate upload
+    if (API_CONFIG.DEMO_MODE) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        return `https://demo-server.com/uploads/${Date.now()}_${file.name}`;
+    }
     const fileName = `uploads/${Date.now()}_${file.name}`;
     const params = {
         Bucket: API_CONFIG.BUCKET_NAME,
                     showStatus('success', '3D model generated successfully!', 'check-circle');
                     // Create a demo 3D model
+                    setTimeout(() => {
+                        createDemoModel();
+                    }, 100);
                     // Display mock model info
                     displayModelInfo({
         return;
     }
+// Real API polling (uncomment when you have real API)
     /*
     statusCheckInterval = setInterval(async () => {
         try {
 // Create a demo 3D model for demonstration purposes
 function createDemoModel() {
+    // Check if Three.js is available
+    if (typeof THREE === 'undefined') {
+        console.error('Three.js not loaded');
+        showStatus('error', '3D engine not available', 'x-circle');
+        return;
+    }
+    if (!scene) {
+        console.error('Scene not initialized');
+        showStatus('error', '3D viewer not ready', 'x-circle');
+        return;
+    }
     // Remove existing model
     if (currentModel) {
         scene.remove(currentModel);
     const modelInfo = document.getElementById('modelInfo');
     const modelDetails = document.getElementById('modelDetails');
+    if (!modelInfo || !modelDetails) {
+        console.error('Model info elements not found');
+        return;
+    }
     modelDetails.innerHTML = `
         <p><strong>Format:</strong> ${data.format || 'GLTF'}</p>
         <p><strong>Quality:</strong> ${data.quality || 'High'}</p>
     modelInfo.classList.remove('hidden');
 }
 function addToRecentGallery(modelUrl) {
     const recentModels = document.getElementById('recentModels');
+    if (!recentModels) {
+        console.error('Recent models container not found');
+        return;
+    }
     const card = document.createElement('div');
     card.className = 'aspect-square bg-gray-100 rounded-lg overflow-hidden model-card hover-lift';
     card.innerHTML = `
         recentModels.removeChild(recentModels.lastChild);
     }
 }
 function showStatus(type, message, icon) {
+    if (!statusContainer || !statusBox || !statusIcon || !statusText) {
+        console.error('Status elements not found');
+        return;
+    }
     statusContainer.classList.remove('hidden');
     statusBox.className = `rounded-xl p-4 transition-all duration-300 status-${type}`;
     statusIcon.innerHTML = iconHtml;
     statusText.textContent = message;
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
 }
 function updateProgress(percent) {
+    if (progressFill) {
+        progressFill.style.width = `${percent}%`;
+    }
 }
 // Initialize viewer on load
 window.addEventListener('load', () => {
+    // Initialize Feather icons first
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+    // Initialize viewer after DOM is ready
     setTimeout(() => {
         initViewer();
     }, 100);
 });
+// Generate button click handler - wrap in DOMContentLoaded to ensure elements exist
+document.addEventListener('DOMContentLoaded', () => {
+    const generateBtnElement = document.getElementById('generateBtn');
+    if (generateBtnElement) {
+        generateBtnElement.addEventListener('click', generate3DModel);
+    }
+});

style.css CHANGED Viewed

@@ -47,14 +47,13 @@
 ::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #5a67d8 0%, #d946ef 100%);
 }
 /* Loading states */
 .loading-spinner {
     border: 3px solid #f3f3f3;
     border-top: 3px solid #667eea;
     border-radius: 50%;
-    width: 40px;
-    height: 40px;
     animation: spin 1s linear infinite;
 }
@@ -63,6 +62,17 @@
     100% { transform: rotate(360deg); }
 }
 /* Glassmorphism effect */
 .glass {
     background: rgba(255, 255, 255, 0.1);

 ::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #5a67d8 0%, #d946ef 100%);
 }
 /* Loading states */
 .loading-spinner {
     border: 3px solid #f3f3f3;
     border-top: 3px solid #667eea;
     border-radius: 50%;
+    width: 20px;
+    height: 20px;
     animation: spin 1s linear infinite;
 }
     100% { transform: rotate(360deg); }
 }
+/* Status container fixes */
+#statusContainer {
+    transition: all 0.3s ease;
+}
+#statusIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+}
 /* Glassmorphism effect */
 .glass {
     background: rgba(255, 255, 255, 0.1);