Update templates/index.html

templates/index.html

@@ -1,143 +1,218 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CELL CLIPPER PRO / MULTI-PATTERN</title>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono&display=swap');
+import os
+import math
+import re
+import tempfile
+from flask import Flask, render_template, request, send_file, Response
+from PIL import Image, ImageOps, ImageDraw
+import numpy as np
+
+# Проверка наличия MoviePy
+try:
+    from moviepy.editor import VideoFileClip
+    MOVIEPY_AVAILABLE = True
+except ImportError:
+    MOVIEPY_AVAILABLE = False
+
+app = Flask(__name__)
+
+# --- Вспомогательные функции ---
+
+def prepare_svg_content(file_storage):
+    """Читает SVG и готовит его для вставки"""
+    try:
+        raw_data = file_storage.read().decode('utf-8')
+        vb_match = re.search(r'viewBox=["\']([^"\']+)["\']', raw_data, re.I)
+        vbox = vb_match.group(1) if vb_match else "0 0 100 100"
+        
+        inner = re.sub(r'<svg[^>]*>', '', raw_data, flags=re.I)
+        inner = re.sub(r'</svg>', '', inner, flags=re.I)
+        inner = re.sub(r'<\?xml[^>]*\?>|<!DOCTYPE[^>]*>', '', inner, flags=re.I)
+        
+        if 'fill=' not in inner:
+            inner = f'<g fill="black">{inner}</g>'
+        return inner, vbox
+    except:
+        return '<rect width="100" height="100" fill="black"/>', "0 0 100 100"
+
+def calculate_grid_items(width, height, density, gap_x, gap_y, shift, base_scale, growth, growth_type, invert, pixel_data=None):
+    """Математическое ядро расчета сетки"""
+    step = width / density
+    rows = math.ceil(height / step)
+    
+    cell_w_max = step * (1.0 - gap_x)
+    cell_h_max = step * (1.0 - gap_y)
+    
+    items = []
+    
+    for r in range(rows):
+        row_shift = (r * shift * step)
+        # Оптимизация цикла по колонкам
+        start_c = -int(density * 0.5)
+        end_c = int(density * 1.5)
+        
+        for c in range(start_c, end_c):
+            grid_x = c * step + row_shift
+            grid_y = r * step
+            
+            if grid_x < -step or grid_x > width:
+                continue
+
+            # Логика яркости
+            is_visible = True
+            
+            if pixel_data is not None:
+                # pixel_data должен быть PIL Image (Grayscale)
+                sx = max(0, min(int(grid_x + step/2), width - 1))
+                sy = max(0, min(int(grid_y + step/2), height - 1))
+                try:
+                    val = pixel_data.getpixel((sx, sy))
+                    brightness = val / 255.0
+                    limit = 0.5
+                    is_visible = brightness > limit if invert else brightness < limit
+                except:
+                    pass
+
+            if not is_visible:
+                continue
+
+            # Логика искажения (Growth)
+            wave = 0
+            if growth_type == 'sine':
+                wave = (math.sin(c * 0.3 + r * 0.3) + 1) / 2 
+            elif growth_type == 'linear':
+                wave = (c % density) / density
+            elif growth_type == 'steps':
+                wave = (r % 5) / 5.0
+            
+            mod_w = 1.0 - (wave * growth)
+            mod_w = max(0.01, min(1.0, mod_w))
+
+            content_w = cell_w_max * base_scale * mod_w
+            content_h = cell_h_max * base_scale
+            
+            cx = grid_x + step / 2
+            cy = grid_y + step / 2
+            
+            items.append({
+                'cx': cx, 'cy': cy, 
+                'w': content_w, 'h': content_h
+            })
+            
+    return items, step
+
+# --- Роуты ---
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/download_svg', methods=['POST'])
+def download_svg():
+    try:
+        # Параметры
+        density = int(request.form.get('density', 40))
+        gap_x = float(request.form.get('gap_x', 0))
+        gap_y = float(request.form.get('gap_y', 0))
+        shift = float(request.form.get('shift_stagger', 0))
+        base_scale = float(request.form.get('base_scale', 1.0))
+        growth = float(request.form.get('growth', 0))
+        growth_type = request.form.get('growth_type', 'sine')
+        invert = request.form.get('invert') == 'true'
+        
+        canvas_w, canvas_h = 1400, 900
+        
+        # SVG Symbol
+        svg_file = request.files.get('shape_svg')
+        if svg_file and svg_file.filename != '':
+            symbol_content, v_box = prepare_svg_content(svg_file)
+        else:
+            symbol_content, v_box = ('<rect width="100" height="100" fill="black"/>', "0 0 100 100")
+            
+        vb_parts = [float(x) for x in v_box.split()]
+        vb_w, vb_h = vb_parts[2], vb_parts[3]
+
+        # Raster Image для маски
+        raster_file = request.files.get('raster_image')
+        pixel_img = None
+        if raster_file and raster_file.filename != '':
+            img = Image.open(raster_file)
+            img = ImageOps.fit(img, (canvas_w, canvas_h), method=Image.Resampling.LANCZOS)
+            img = ImageOps.grayscale(img)
+            pixel_img = img
+
+        items, _ = calculate_grid_items(canvas_w, canvas_h, density, gap_x, gap_y, shift, base_scale, growth, growth_type, invert, pixel_img)
+        
+        body = []
+        for item in items:
+            sx = item['w'] / vb_w
+            sy = item['h'] / vb_h
+            transform = f'translate({item["cx"]:.2f} {item["cy"]:.2f}) scale({sx:.4f} {sy:.4f}) translate({-vb_w/2:.2f} {-vb_h/2:.2f})'
+            body.append(f'<g transform="{transform}">{symbol_content}</g>')
+            
+        svg_str = f'<svg xmlns="http://www.w3.org/2000/svg" width="{canvas_w}" height="{canvas_h}" viewBox="0 0 {canvas_w} {canvas_h}" style="background:white;">{"".join(body)}</svg>'
+        
+        return Response(svg_str, mimetype="image/svg+xml", headers={"Content-disposition": "attachment; filename=pattern.svg"})
+
+    except Exception as e:
+        return str(e), 500
+
+@app.route('/process_video', methods=['POST'])
+def process_video():
+    if not MOVIEPY_AVAILABLE:
+        return "MoviePy not installed on server", 500
+
+    temp_dir = tempfile.mkdtemp()
+    try:
+        density = int(request.form.get('density', 40))
+        gap_x = float(request.form.get('gap_x', 0))
+        gap_y = float(request.form.get('gap_y', 0))
+        shift = float(request.form.get('shift_stagger', 0))
+        base_scale = float(request.form.get('base_scale', 1.0))
+        growth = float(request.form.get('growth', 0))
+        growth_type = request.form.get('growth_type', 'sine')
+        invert = request.form.get('invert') == 'true'
+
+        video_file = request.files.get('video_file')
+        if not video_file:
+            return "No video uploaded", 400
         
-        :root {
-            --bg-page: #ffffff;
-            --text-main: #000000;
-            --text-muted: #aaaaaa;
-            --border: #000000;
-            --font-sans: 'Inter', sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
+        input_path = os.path.join(temp_dir, 'input.mp4')
+        video_file.save(input_path)
+
+        def process_frame(get_frame, t):
+            frame = get_frame(t)
+            img_pil = Image.fromarray(frame).convert("L")
+            w, h = img_pil.size
+            
+            # Рендеринг кадра
+            canvas = Image.new("RGB", (w, h), "white")
+            draw = ImageDraw.Draw(canvas)
             
-            --color-pink: #FF0066;
-            --color-lime: #CCFF00;
-            --color-hover: #F0F0F0;
-            --color-btn-gray: #E5E5E5;
-        }
-
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-
-        body {
-            display: flex;
-            height: 100vh;
-            font-family: var(--font-sans);
-            background-color: var(--bg-page);
-            color: var(--text-main);
-            overflow: hidden;
-        }
-
-        /* --- Sidebar --- */
-        .sidebar {
-            width: 380px;
-            background: #ffffff;
-            border-right: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            padding: 20px; 
-            gap: 30px;
-            z-index: 10;
-            overflow-y: auto;
-            flex-shrink: 0;
-        }
-
-        .section { display: flex; flex-direction: column; gap: 15px; }
+            # Используем ту же логику расчета
+            items, _ = calculate_grid_items(w, h, density, gap_x, gap_y, shift, base_scale, growth, growth_type, invert, img_pil)
+            
+            for item in items:
+                # Рисуем прямоугольники (быстро для видео)
+                # Если нужно SVG в видео, это сильно замедлит процесс
+                x0 = item['cx'] - item['w']/2
+                y0 = item['cy'] - item['h']/2
+                draw.rectangle([x0, y0, x0 + item['w'], y0 + item['h']], fill="black")
+
+            return np.array(canvas)
+
+        clip = VideoFileClip(input_path)
+        # Ограничение FPS для ускорения, если видео большое
+        # clip = clip.set_fps(24) 
         
-        .section-title {
-            font-family: var(--font-mono);
-            font-size: 10px;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-        }
-
-        /* --- Buttons --- */
-        input[type="file"] { display: none; }
+        new_clip = clip.fl(process_frame)
         
-        .btn-upload {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            padding: 16px 20px;
-            border: 1px solid var(--border);
-            background: transparent;
-            color: var(--text-main);
-            font-family: var(--font-mono);
-            font-size: 12px;
-            cursor: pointer;
-            transition: background 0.2s, border-color 0.2s;
-            text-align: center;
-        }
-        .btn-upload:hover { background: var(--color-hover); }
-
-        .btn-upload.active-pink { background: var(--color-pink); border-color: var(--color-pink); color: #000; }
-        .btn-upload.active-lime { background: var(--color-lime); border-color: var(--color-lime); color: #000; }
-
-        /* --- Pattern List --- */
-        .patterns-list { display: flex; flex-direction: column; gap: 10px; }
-        .pattern-item { display: flex; align-items: center; border: 1px solid var(--border); padding: 10px 15px; gap: 15px; background: #fff; }
-        .pattern-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; }
-        .pattern-icon img { max-width: 100%; max-height: 100%; }
-        .pattern-name { flex: 1; font-family: var(--font-mono); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-        .btn-remove { color: #FF0000; background: none; border: none; font-family: var(--font-mono); font-size: 10px; cursor: pointer; text-transform: uppercase; }
-        .btn-remove:hover { text-decoration: underline; }
-
-        /* --- Controls --- */
-        .control-group { display: flex; flex-direction: column; gap: 10px; }
-        .label-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; }
-        .val-display { font-family: var(--font-mono); font-size: 11px; }
-
-        input[type="range"] { width: 100%; -webkit-appearance: none; background: transparent; cursor: pointer; }
-        input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; background: #000000; border: none; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 4px; background: #000000; border-radius: 0; margin-top: -7px; border: none; }
-        input[type="range"]:focus { outline: none; }
-
-        /* --- Footer Controls --- */
-        .footer-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
-        .checkbox-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
-        input[type="checkbox"] { accent-color: #000; width: 14px; height: 14px; cursor: pointer; }
-
-        .color-pickers { display: flex; gap: 10px; }
-        input[type="color"] { -webkit-appearance: none; appearance: none; border: none; width: 20px; height: 20px; padding: 0; background: none; cursor: pointer; }
-        input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
-        input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,0.2); border-radius: 0; }
-
-        /* --- Action Buttons --- */
-        .action-buttons { display: flex; gap: 15px; margin-top: auto; }
-        .btn-action { flex: 1; padding: 16px 0; font-family: var(--font-mono); font-size: 12px; border: none; cursor: pointer; transition: opacity 0.2s; text-align: center; }
-        .btn-action:hover { opacity: 0.8; }
-        .btn-download-svg { background: #000000; color: #ffffff; }
-        .btn-download-mp4 { background: var(--color-btn-gray); color: #ffffff; }
-        .btn-action:disabled { opacity: 0.4; cursor: not-allowed; }
-
-        /* --- Preview Area --- */
-        .preview-area {
-            flex: 1;
-            background-color: #ffffff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-            height: 100vh;
-            overflow: hidden; /* Запрет скролла */
-        }
+        output_path = os.path.join(temp_dir, 'output.mp4')
+        new_clip.write_videofile(output_path, codec='libx264', audio_codec='aac', fps=clip.fps)
         
-        #main-canvas {
-            box-shadow: 0 10px 40px rgba(0,0,0,0.05); 
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain; /* Пропорциональное вписывание */
-            background: #fff;
-        }
-
-        #source-video, #source-image { display: none; }
-    </style>
-</head>
-<body>
+        return send_file(output_path, as_attachment=True, download_name="processed_video.mp4")
+
+    except Exception as e:
+        return f"Error processing video: {str(e)}", 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)