Update templates/index.html

templates/index.html

@@ -1,22 +1,41 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>OpArt Dither</title>
+    <title>OpArt Dither Engine</title>
     <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
     <style>
         :root { --border: #999; --pixel-font: 'Press Start 2P', cursive; --mono-font: 'VT323', monospace; --bg: #f0f0f0; }
         body { margin: 0; padding: 0; font-family: var(--mono-font); display: flex; height: 100vh; background: var(--bg); overflow: hidden; }
-        .sidebar { width: 320px; border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 20px; background: #fff; overflow-y: auto; }
-        .group-title { font-family: var(--pixel-font); font-size: 8px; margin-bottom: 10px; color: #555; text-transform: uppercase; }
-        .btn-upload { border: 2px dashed var(--border); padding: 15px; text-align: center; cursor: pointer; position: relative; background: #f9f9f9; }
+        
+        /* Sidebar */
+        .sidebar { width: 320px; border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 15px; background: #fff; overflow-y: auto; z-index: 10; }
+        .group-title { font-family: var(--pixel-font); font-size: 8px; margin-bottom: 5px; color: #555; text-transform: uppercase; }
+        
+        .btn-upload { border: 2px dashed var(--border); padding: 12px; text-align: center; cursor: pointer; position: relative; background: #f9f9f9; transition: 0.2s; }
+        .btn-upload:hover { background: #eee; border-color: #000; }
         .btn-upload input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
-        .label-val { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 2px; margin-top: 10px; }
+        .file-status { font-size: 12px; color: #28a745; display: none; margin-top: 5px; }
+
+        .label-val { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 2px; }
         input[type="range"] { width: 100%; cursor: pointer; accent-color: #000; }
-        .main { flex: 1; display: flex; align-items: center; justify-content: center; background: #ddd; position: relative; }
-        #canvas-view { max-width: 95%; max-height: 95%; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; }
-        #canvas-view svg { max-width: 100%; max-height: 100%; }
+        
+        /* Main Viewport */
+        .main { flex: 1; display: flex; align-items: center; justify-content: center; background: #ddd; position: relative; padding: 20px; }
+        #canvas-view { 
+            max-width: 100%; 
+            max-height: 100%; 
+            background: #fff; 
+            box-shadow: 0 0 30px rgba(0,0,0,0.1); 
+            display: flex; 
+            align-items: center; 
+            justify-content: center;
+            overflow: hidden;
+        }
+        #canvas-view img, #canvas-view svg { max-width: 100%; max-height: 100%; object-fit: contain; }
+
+        /* UI Elements */
         .export-btn { background: #000; color: #fff; border: none; padding: 15px; font-family: var(--pixel-font); font-size: 10px; cursor: pointer; margin-top: auto; }
-        #status { position: absolute; top: 10px; right: 10px; background: #CFFF22; padding: 5px 10px; font-size: 10px; font-family: var(--pixel-font); display: none; z-index: 10; border: 1px solid #000; }
+        #status { position: absolute; top: 10px; right: 10px; background: #CFFF22; padding: 5px 10px; font-size: 10px; font-family: var(--pixel-font); display: none; z-index: 100; border: 1px solid #000; }
         hr { border: 0; border-top: 1px dotted #999; width: 100%; margin: 5px 0; }
     </style>
 </head>
@@ -24,27 +43,36 @@
     <div id="status">PROCESSING...</div>
     <div class="sidebar">
         <div>
-            <div class="group-title">1. Source</div>
-            <div class="btn-upload">Image <input type="file" id="imgInp" accept="image/*"></div>
-            <div style="margin-top:5px" class="btn-upload">Pattern (SVG) <input type="file" id="patInp" accept=".svg"></div>
+            <div class="group-title">1. Source Image</div>
+            <div class="btn-upload">
+                <span id="img-label">SELECT IMAGE</span>
+                <input type="file" id="imgInp" accept="image/*">
+            </div>
+        </div>
+        
+        <div>
+            <div class="group-title">2. Pattern (SVG)</div>
+            <div class="btn-upload">
+                <span id="pat-label">SELECT SVG PATTERN</span>
+                <input type="file" id="patInp" accept=".svg">
+            </div>
         </div>
         
         <hr>
 
         <div>
-            <div class="group-title">2. Dither</div>
+            <div class="group-title">3. Dither Settings</div>
             <div class="label-val"><span>Contrast</span><span id="v_black_point">0</span></div>
             <input type="range" id="black_point" min="0" max="200" value="0">
             
-            <div class="label-val"><span>Density</span><span id="v_density">60</span></div>
+            <div class="label-val"><span>Density (Resolution)</span><span id="v_density">60</span></div>
             <input type="range" id="density" min="10" max="200" value="60">
         </div>
 
         <hr>
 
         <div>
-            <div class="group-title">3. Deformation (Op Art)</div>
-            
+            <div class="group-title">4. Warp Deformation</div>
             <div class="label-val"><span>Warp Amount</span><span id="v_warp_amp">0.0</span></div>
             <input type="range" id="warp_amp" min="0" max="0.8" step="0.05" value="0.0">
             
@@ -54,51 +82,87 @@
 
         <button class="export-btn" onclick="saveSvg()">DOWNLOAD SVG</button>
     </div>
+
     <div class="main">
-        <div id="canvas-view"></div>
+        <div id="canvas-view">
+            <div style="color: #888; font-family: var(--pixel-font); font-size: 12px;">AWAITING MEDIA...</div>
+        </div>
     </div>
 
     <script>
         let lastSvg = "";
         const inputs = ['black_point', 'density', 'warp_amp', 'warp_freq'];
+        const canvas = document.getElementById('canvas-view');
+
+        // Превью изображения сразу после выбора
+        document.getElementById('imgInp').onchange = function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                document.getElementById('img-label').innerText = "✓ IMAGE LOADED";
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    canvas.innerHTML = `<img src="${event.target.result}" id="preview-img">`;
+                    process(); // Пытаемся запустить генерацию
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+
+        // Подтверждение выбора паттерна
+        document.getElementById('patInp').onchange = function(e) {
+            if (e.target.files[0]) {
+                document.getElementById('pat-label').innerText = "✓ PATTERN LOADED";
+                process();
+            }
+        };
 
         function process() {
             const img = document.getElementById('imgInp').files[0];
             const pat = document.getElementById('patInp').files[0];
             
+            // Обновляем цифры в интерфейсе
             inputs.forEach(id => {
                 document.getElementById('v_'+id).innerText = document.getElementById(id).value;
             });
 
+            // Если паттерна еще нет, просто выходим (превью картинки уже на экране)
             if(!img || !pat) return;
 
             document.getElementById('status').style.display = 'block';
+            
             const fd = new FormData();
             fd.append('image', img);
             fd.append('patterns', pat);
-            inputs.forEach(id => {
-                fd.append(id, document.getElementById(id).value);
-            });
+            inputs.forEach(id => fd.append(id, document.getElementById(id).value));
 
             fetch('/generate', { method: 'POST', body: fd })
                 .then(r => r.text())
                 .then(svg => {
-                    lastSvg = svg;
-                    document.getElementById('canvas-view').innerHTML = svg;
+                    if (svg.startsWith('<svg')) {
+                        lastSvg = svg;
+                        canvas.innerHTML = svg;
+                    } else {
+                        console.error("Server error:", svg);
+                    }
+                    document.getElementById('status').style.display = 'none';
+                })
+                .catch(err => {
+                    console.error("Fetch error:", err);
                     document.getElementById('status').style.display = 'none';
                 });
         }
 
-        document.getElementById('imgInp').onchange = process;
-        document.getElementById('patInp').onchange = process;
-        inputs.forEach(id => document.getElementById(id).oninput = process);
+        // Слушатели для ползунков
+        inputs.forEach(id => {
+            document.getElementById(id).oninput = process;
+        });
 
         function saveSvg() {
             if(!lastSvg) return;
             const blob = new Blob([lastSvg], {type: 'image/svg+xml'});
             const link = document.createElement('a');
             link.href = URL.createObjectURL(blob);
-            link.download = 'op_art_dither.svg';
+            link.download = 'opart_result.svg';
             link.click();
         }
     </script>