Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Toast UI Image Editor</title> | |
| <link | |
| rel="stylesheet" | |
| 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> | |