Spaces:

jasvir-singh1021
/

Image_Editor

Running

App Files Files Community

jasvir-singh1021 commited on Aug 17, 2025

Commit

68a8ac1

verified ·

1 Parent(s): 903108a

what did you do to this project - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +87 -14

index.html CHANGED Viewed

@@ -9,36 +9,109 @@
     href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.css"
   />
   <style>
-    body { margin: 0; padding: 20px; }
-    #tui-image-editor { width: 700px; height: 500px; }
   </style>
 </head>
 <body>
-  <input type="file" id="load-image" />
   <div id="tui-image-editor"></div>
   <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.js"></script>
   <script>
-    const imageEditor = new tui.ImageEditor('#tui-image-editor', {
-      includeUI: {
-        menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
-        initMenu: '',
-        uiSize: { width: '700px', height: '500px' },
-        menuBarPosition: 'bottom'
       }
-    });
     document.getElementById('load-image').addEventListener('change', function(event) {
       const file = event.target.files[0];
-      if (file) {
         imageEditor.loadImageFromFile(file)
-          .then(() => console.log('Image loaded!'))
-          .catch(err => console.error('Failed to load image:', err));
       }
     });
   </script>
-</body>
 </html>

     href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.css"
   />
   <style>
+    body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
+    #tui-image-editor { width: 100%; max-width: 700px; height: 500px; }
+    #status { margin: 10px 0; color: #666; }
+    .error { color: #d32f2f; }
+    .success { color: #388e3c; }
   </style>
 </head>
 <body>
+  <input type="file" id="load-image" accept="image/*" />
+  <div id="status">Select an image to edit</div>
   <div id="tui-image-editor"></div>
   <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.js"></script>
   <script>
+    let imageEditor;
+    let editorReady = false;
+    function initEditor() {
+      try {
+        if (typeof tui === 'undefined' || !tui.ImageEditor) {
+          throw new Error('Toast UI library failed to load');
+        }
+        imageEditor = new tui.ImageEditor('#tui-image-editor', {
+          includeUI: {
+            menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
+            initMenu: '',
+            uiSize: { width: '700px', height: '500px' },
+            menuBarPosition: 'bottom'
+          }
+        });
+        editorReady = true;
+      } catch (err) {
+        document.getElementById('status').textContent = `Failed to initialize editor: ${err.message}`;
+        document.getElementById('status').className = 'error';
+        console.error('Editor initialization error:', err);
+        document.getElementById('load-image').disabled = true;
       }
+    }
+    // Initialize editor when library is loaded
+    if (document.readyState === 'complete') {
+      initEditor();
+    } else {
+      window.addEventListener('load', initEditor);
+    }
+    } catch (err) {
+      document.getElementById('status').textContent = `Failed to initialize editor: ${err.message}`;
+      document.getElementById('status').className = 'error';
+      console.error('Editor initialization error:', err);
+    }
     document.getElementById('load-image').addEventListener('change', function(event) {
+      const statusEl = document.getElementById('status');
       const file = event.target.files[0];
+      if (!file) {
+        statusEl.textContent = 'No file selected';
+        statusEl.className = 'error';
+        return;
+      }
+      // More robust file type checking
+      if (!file.type.startsWith('image/')) {
+        statusEl.textContent = 'Please select an image file (JPEG, PNG, etc.)';
+        statusEl.className = 'error';
+        return;
+      }
+      if (!editorReady) {
+        statusEl.textContent = 'Editor is not ready yet. Please try again.';
+        statusEl.className = 'error';
+        return;
+      }
+      statusEl.textContent = 'Loading image...';
+      statusEl.className = '';
+      event.target.disabled = true;
+      try {
         imageEditor.loadImageFromFile(file)
+          .then(() => {
+            statusEl.textContent = 'Image loaded successfully!';
+            statusEl.className = 'success';
+          })
+          .catch(err => {
+            statusEl.textContent = `Error: ${err.message || 'Failed to load image'}`;
+            statusEl.className = 'error';
+            console.error('Image loading error:', err);
+          })
+          .finally(() => {
+            event.target.disabled = false;
+            event.target.value = ''; // Reset input to allow selecting same file again
+          });
+      } catch (err) {
+        statusEl.textContent = `Error: ${err.message || 'Unexpected error occurred'}`;
+        statusEl.className = 'error';
+        console.error('Unexpected error:', err);
       }
     });
   </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=jasvir-singh1021/Image_Editor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>