Added vid. tut. on home page, improved img. splitting

src/App.vue

@@ -30,6 +30,10 @@
           <div class="mt-2 leading-relaxed space-y-2">
             <p>Create spritesheets for your game development and animation projects with our completely free, open-source spritesheet generator.</p>
             <p>This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.</p>
+            <p class="font-bold text-2xl pb-3 pt-2">How it works:</p>
+            <video controls playsinline class="w-full h-full object-contain rounded-lg shadow-md" title="Spritesheet generator tutorial" aria-label="Spritesheet generator tutorial">
+              <source src="@/assets/tut2.mp4" type="video/mp4" />
+            </video>
           </div>
         </div>
 

src/components/SpritesheetSplitter.vue

@@ -610,15 +610,23 @@
 
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-    // Initialize worker lazily
+    // Initialize worker lazily using Vite worker syntax
     if (!irregularWorker.value) {
-      irregularWorker.value = new Worker('/src/workers/irregularSpriteDetection.worker.ts', { type: 'module' });
+      try {
+        irregularWorker.value = new Worker(new URL('../workers/irregularSpriteDetection.worker.ts', import.meta.url), { type: 'module' });
+      } catch (error) {
+        console.error('Failed to create worker:', error);
+        // Fallback to auto detection if worker fails
+        await autoDetectSprites(img);
+        return;
+      }
     }
 
     return new Promise<void>((resolve, reject) => {
       const worker = irregularWorker.value!;
 
       const handleMessage = async (e: MessageEvent) => {
+        clearTimeout(timeout);
         worker.removeEventListener('message', handleMessage);
         worker.removeEventListener('error', handleError);
 
@@ -632,21 +640,40 @@
         }
       };
 
-      const handleError = (error: ErrorEvent) => {
+      // Set timeout for worker processing
+      const timeout = setTimeout(() => {
         worker.removeEventListener('message', handleMessage);
         worker.removeEventListener('error', handleError);
-        reject(error);
+        console.warn('Worker timeout, falling back to auto detection');
+        // Fallback to auto detection
+        autoDetectSprites(img).then(resolve).catch(reject);
+      }, 30000); // 30 second timeout
+
+      const handleError = (error: ErrorEvent) => {
+        clearTimeout(timeout);
+        worker.removeEventListener('message', handleMessage);
+        worker.removeEventListener('error', handleError);
+        console.error('Worker error, falling back to auto detection:', error);
+        // Fallback to auto detection
+        autoDetectSprites(img).then(resolve).catch(reject);
       };
 
       worker.addEventListener('message', handleMessage);
       worker.addEventListener('error', handleError);
 
-      worker.postMessage({
+      try {
-        type: 'detectIrregularSprites',
+        worker.postMessage({
-        imageData,
+          type: 'detectIrregularSprites',
-        sensitivity: sensitivity.value,
+          imageData,
-        maxSize: 2048, // Limit processing size for performance
+          sensitivity: sensitivity.value,
-      });
+          maxSize: 2048, // Limit processing size for performance
+        });
+      } catch (error) {
+        clearTimeout(timeout);
+        console.error('Failed to post message to worker:', error);
+        // Fallback to auto detection
+        autoDetectSprites(img).then(resolve).catch(reject);
+      }
     });
   }