Spaces:

thelip
/

tosvg

Running

App Files Files Community

thelip commited on Apr 16

Commit

b8d8086

verified ·

1 Parent(s): 2ecd1bc

Update index.html

Browse files

Files changed (1) hide show

index.html +14 -6

index.html CHANGED Viewed

@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Advanced Photo to SVG Converter</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Use the Potrace library that supports color tracing directly -->
-    <!-- Added defer attribute -->
-    <script src="https://unpkg.com/[email protected]/dist/potrace-wasm.js" defer></script>
     <!-- Quantize is less critical now but kept for potential future use/reference -->
     <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quantize.min.js" defer></script> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .dropzone { border: 3px dashed rgba(59, 130, 246, 0.5); transition: all 0.3s ease; }
         .dropzone.active { border-color: rgba(59, 130, 246, 1); background-color: rgba(59, 130, 246, 0.1); }
         .canvas-container { position: relative; overflow: hidden; user-select: none; /* Prevent text selection during drag */ }
@@ -36,7 +36,7 @@
          /* Style for the SVG code preview */
          #svg-code-container { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.375rem; max-height: 200px; overflow: auto; padding: 0.5rem; }
-         #svg-code { font-family: monospace; font-size: 0.75rem; color: #1f2937; white-space: pre-wrap; word-break: break-all; }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -392,12 +392,17 @@
                 try {
                     // --- Check & Load Potrace WASM ---
                     if (typeof PotraceWasm === 'undefined') {
                         throw new Error("PotraceWasm library failed to load. Check browser console and network connection.");
                     }
                     updateProgress(5, "Loading converter module...");
-                    await PotraceWasm.load(); // Ensures WASM is ready
                     updateProgress(10, "Processing image data...");
                     // --- Prepare parameters for potrace-wasm ---
@@ -431,7 +436,7 @@
                     updateProgress(100, "Complete");
                 } catch (error) {
-                    console.error('SVG Conversion Error:', error);
                     const errorMsg = (error instanceof Error) ? error.message : String(error);
                     alert(`Conversion failed: ${errorMsg}`);
                     updateProgress(0, "Error");
@@ -439,6 +444,7 @@
                     loadingIndicator.classList.add('hidden');
                     progressContainer.classList.remove('hidden'); // Keep progress bar visible showing error state
                     previewPlaceholder.classList.remove('hidden'); // Show placeholder again on error
                 } finally {
                     // --- UI Updates: End Conversion ---
                     // Re-enable button only if an image is still loaded
@@ -449,6 +455,8 @@
                         setTimeout(() => {
                            progressContainer.classList.add('hidden');
                         }, 1500);
                     }
                 }
             }

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Advanced Photo to SVG Converter</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Switched to jsDelivr CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/potrace-wasm.js" defer></script>
     <!-- Quantize is less critical now but kept for potential future use/reference -->
     <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quantize.min.js" defer></script> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Styles remain the same as before - truncated for brevity */
         .dropzone { border: 3px dashed rgba(59, 130, 246, 0.5); transition: all 0.3s ease; }
         .dropzone.active { border-color: rgba(59, 130, 246, 1); background-color: rgba(59, 130, 246, 0.1); }
         .canvas-container { position: relative; overflow: hidden; user-select: none; /* Prevent text selection during drag */ }
          /* Style for the SVG code preview */
          #svg-code-container { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.375rem; max-height: 200px; overflow: auto; padding: 0.5rem; }
+         #svg-code-el { font-family: monospace; font-size: 0.75rem; color: #1f2937; white-space: pre-wrap; word-break: break-all; }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                 try {
                     // --- Check & Load Potrace WASM ---
+                    // THIS IS THE CRITICAL CHECK
                     if (typeof PotraceWasm === 'undefined') {
+                        // If this error happens, the script from the CDN likely failed to load or execute.
+                        console.error("PotraceWasm global object is not defined. Script load failed?");
                         throw new Error("PotraceWasm library failed to load. Check browser console and network connection.");
                     }
                     updateProgress(5, "Loading converter module...");
+                    // PotraceWasm.load() might return a promise, ensure it's awaited.
+                    // It handles loading the actual WASM binary.
+                    await PotraceWasm.load();
                     updateProgress(10, "Processing image data...");
                     // --- Prepare parameters for potrace-wasm ---
                     updateProgress(100, "Complete");
                 } catch (error) {
+                    console.error('SVG Conversion Error:', error); // Log the full error object
                     const errorMsg = (error instanceof Error) ? error.message : String(error);
                     alert(`Conversion failed: ${errorMsg}`);
                     updateProgress(0, "Error");
                     loadingIndicator.classList.add('hidden');
                     progressContainer.classList.remove('hidden'); // Keep progress bar visible showing error state
                     previewPlaceholder.classList.remove('hidden'); // Show placeholder again on error
+                    comparisonContainer.classList.add('hidden'); // Ensure comparison view is hidden on error
                 } finally {
                     // --- UI Updates: End Conversion ---
                     // Re-enable button only if an image is still loaded
                         setTimeout(() => {
                            progressContainer.classList.add('hidden');
                         }, 1500);
+                    } else {
+                        // Don't automatically hide progress bar on error
                     }
                 }
             }