Spaces:

sterepando
/

SwagIconCreator

Paused

App Files Files Community

sterepando commited on Nov 22, 2025

Commit

00d530e

verified ·

1 Parent(s): e8b10b3

Create app.py

Browse files

Files changed (1) hide show

app.py +303 -0

app.py ADDED Viewed

	@@ -0,0 +1,303 @@

+import gradio as gr
+import numpy as np
+from PIL import Image
+import io
+import base64
+# Встроенный HTML+JS+CSS (твой код, но чуть доработанный под Gradio)
+html_content = """
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Swaga Icon Maker</title>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
+    <style>
+        * { font-family: 'Nunito', sans-serif; box-sizing: border-box; }
+        body { background:#1e1e1e; color:white; margin:0; padding:20px; display:flex; flex-direction:column; align-items:center; user-select:none; }
+        h1 { font-weight:900; margin-bottom:10px; }
+        .container { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; max-width:100%; }
+        canvas { border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,0.5); background:#E13839; }
+        .controls { background:#2d2d2d; padding:20px; border-radius:15px; width:300px; display:flex; flex-direction:column; gap:15px; }
+        .section-title { font-size:12px; text-transform:uppercase; color:#777; letter-spacing:1px; border-bottom:1px solid #444; padding-bottom:5px; margin-top:10px; font-weight:900; }
+        .drop-zone { border:3px dashed #555; border-radius:10px; padding:20px; text-align:center; cursor:pointer; transition:0.3s; }
+        .drop-zone:hover, .drop-zone.dragover { border-color:#E13839; background:rgba(225,56,57,0.1); }
+        input[type="range"] { width:100%; accent-color:#E13839; }
+        button { border:none; padding:15px; border-radius:8px; font-weight:900; font-size:16px; cursor:pointer; transition:transform 0.1s; }
+        .btn-primary { background:linear-gradient(225deg,#FFF 0%,#FFACC7 100%); color:#E13839; }
+        .btn-secondary { background:#444; color:white; padding:10px; font-size:14px; }
+        button:active { transform:scale(0.98); }
+        .hint { font-size:12px; color:#666; text-align:center; margin-top:5px; }
+    </style>
+</head>
+<body>
+    <h1>MandreIcon Creator</h1>
+    <div class="container">
+        <div style="display:flex; flex-direction:column; align-items:center;">
+            <canvas id="canvas" width="512" height="512"></canvas>
+            <p class="hint">Клик → выделить • Drag → двигать • Колесо/два пальца → вращать • Уголок → масштабировать • Delete → удалить</p>
+        </div>
+        <div class="controls">
+            <div class="section-title">Фон (Base Icon)</div>
+            <div class="drop-zone" id="dropBase">
+                <p><b>SVG</b> (Градиентный фон)<br>Клик или Drop</p>
+                <input type="file" id="svgInput" accept=".svg" style="display:none">
+            </div>
+            <input type="text" id="textInput" placeholder="Или текст (A, ★, B и т.д.)" style="padding:10px; background:#444; border:none; border-radius:5px; color:white; font-weight:900; font-size:16px;">
+            <div>
+                <label>Масштаб: <span id="scaleVal">100%</span></label>
+                <input type="range" id="scale" min="10" max="200" value="100">
+            </div>
+            <div style="display:flex; gap:10px;">
+                <div style="flex:1"><label>X:</label><input type="range" id="offX" min="-256" max="256" value="0"></div>
+                <div style="flex:1"><label>Y:</label><input type="range" id="offY" min="-256" max="256" value="0"></div>
+            </div>
+            <div class="section-title">Стикеры (PNG/JPG)</div>
+            <button class="btn-secondary" id="addSticker">+ Добавить стикер</button>
+            <input type="file" id="stickerInput" accept="image/png,image/jpeg" multiple style="display:none">
+            <button class="btn-primary" id="download">СКАЧАТЬ PNG</button>
+        </div>
+    </div>
+<script>
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const BG = '#E13839';
+let base = {type:'none', obj:null, scale:1, x:0, y:0};
+let stickers = [];
+let selected = -1;
+let dragging = false, rotating = false, resizing = false;
+let startX, startY, startRot, startDist, startScale;
+function draw() {
+    ctx.fillStyle = BG;
+    ctx.fillRect(0,0,512,512);
+    if (base.type !== 'none') drawBase();
+    stickers.forEach((s,i) => {
+        ctx.save();
+        ctx.translate(s.x, s.y);
+        ctx.rotate(s.rot);
+        ctx.drawImage(s.img, -s.w/2, -s.h/2, s.w, s.h);
+        if (i===selected) drawHandles(s);
+        ctx.restore();
+    });
+}
+function drawBase() {
+    const tmp = document.createElement('canvas');
+    tmp.width = tmp.height = 512;
+    const t = tmp.getContext('2d');
+    t.translate(256 + base.x, 256 + base.y);
+    t.scale(base.scale, base.scale);
+    if (base.type==='image') {
+        const ratio = base.obj.height / base.obj.width;
+        t.drawImage(base.obj, -150, -150*ratio, 300, 300*ratio);
+    } else if (base.type==='text') {
+        t.font = "900 300px 'Nunito'";
+        t.textAlign = "center";
+        t.textBaseline = "middle";
+        t.fillStyle = "#000";
+        t.fillText(base.obj, 0, 20);
+    }
+    t.globalCompositeOperation = 'source-in';
+    const grad = t.createLinearGradient(512,0,0,512);
+    grad.addColorStop(0,"#FFFFFF");
+    grad.addColorStop(1,"#FFACC7");
+    t.fillStyle = grad;
+    t.setTransform(1,0,0,1,0,0);
+    t.fillRect(0,0,512,512);
+    ctx.drawImage(tmp,0,0);
+}
+function drawHandles(s) {
+    ctx.strokeStyle = "#FFF";
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5,5]);
+    ctx.strokeRect(-s.w/2, -s.h/2, s.w, s.h);
+    ctx.setLineDash([]);
+    ctx.fillStyle = "#E13839";
+    ctx.beginPath();
+    ctx.arc(0, -s.h/2 - 25, 8, 0, 6.28);
+    ctx.fill();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(s.w/2, s.h/2, 8, 0, 6.28);
+    ctx.fill();
+    ctx.stroke();
+}
+function hitTest(x,y) {
+    for (let i=stickers.length-1; i>=0; i--) {
+        const s = stickers[i];
+        const dx = x - s.x;
+        const dy = y - s.y;
+        const rx = dx * Math.cos(-s.rot) - dy * Math.sin(-s.rot);
+        const ry = dx * Math.sin(-s.rot) + dy * Math.cos(-s.rot);
+        if (Math.abs(rx) <= s.w/2 && Math.abs(ry) <= s.h/2) return i;
+    }
+    return -1;
+}
+function getHandle(x,y,s) {
+    const dx = x - s.x;
+    const dy = y - s.y;
+    const rx = dx * Math.cos(-s.rot) - dy * Math.sin(-s.rot);
+    const ry = dx * Math.sin(-s.rot) + dy * Math.cos(-s.rot);
+    if (Math.hypot(rx, ry + s.h/2 + 25) < 20) return 'rot';
+    if (Math.hypot(rx - s.w/2, ry - s.h/2) < 20) return 'resize';
+    return 'move';
+}
+// === Обработчики ===
+document.getElementById('dropBase').onclick = () => document.getElementById('svgInput').click();
+document.getElementById('svgInput').onchange = e => {
+    const f = e.target.files[0];
+    if (!f) return;
+    const r = new FileReader();
+    r.onload = ev => {
+        const img = new Image();
+        img.onload = () => {
+            base = {type:'image', obj:img, scale:1, x:0, y:0};
+            document.getElementById('textInput').value = '';
+            draw();
+        };
+        img.src = ev.target.result;
+    };
+    r.readAsDataURL(f);
+};
+document.getElementById('textInput').oninput = e => {
+    if (e.target.value.trim()) {
+        base = {type:'text', obj:e.target.value.trim(), scale:1, x:0, y:0};
+        draw();
+    } else if (!document.getElementById('svgInput').files.length) {
+        base = {type:'none', obj:null};
+        draw();
+    }
+};
+document.getElementById('scale').oninput = e => {
+    base.scale = e.target.value / 100;
+    document.getElementById('scaleVal').textContent = e.target.value + '%';
+    draw();
+};
+document.getElementById('offX').oninput = e => { base.x = +e.target.value; draw(); };
+document.getElementById('offY').oninput = e => { base.y = +e.target.value; draw(); };
+document.getElementById('addSticker').onclick = () => document.getElementById('stickerInput').click();
+document.getElementById('stickerInput').onchange = e => {
+    [...e.target.files].forEach(f => {
+        const r = new FileReader();
+        r.onload = ev => {
+            const img = new Image();
+            img.onload = () => {
+                let w = img.width, h = img.height;
+                if (w > h && w > 200) { h = 200 * h/w; w = 200; }
+                if (h > w && h > 200) { w = 200 * w/h; h = 200; }
+                stickers.push({img, x:256, y:256, w, h, rot:0});
+                selected = stickers.length-1;
+                draw();
+            };
+            img.src = ev.target.result;
+        };
+        r.readAsDataURL(f);
+    });
+};
+document.getElementById('download').onclick = () => {
+    selected = -1; draw();
+    canvas.toBlob(blob => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = 'SWAGA_ICON.png';
+        a.click();
+    });
+};
+// Mouse / Touch
+let touches = [];
+canvas.onmousedown = canvas.ontouchstart = e => {
+    e.preventDefault();
+    const pos = e.touches ? e.touches[0] : e;
+    const rect = canvas.getBoundingClientRect();
+    const x = (pos.clientX - rect.left) * 512 / rect.width;
+    const y = (pos.clientY - rect.top) * 512 / rect.height;
+    if (selected !== -1) {
+        const handle = getHandle(x,y,stickers[selected]);
+        if (handle === 'rot') { rotating = true; startRot = Math.atan2(y - stickers[selected].y, x - stickers[selected].x) - stickers[selected].rot; }
+        else if (handle === 'resize') { resizing = true; startDist = Math.hypot(x - stickers[selected].x, y - stickers[selected].y); startScale = stickers[selected].w; }
+        else { dragging = true; }
+    }
+    if (!dragging && !rotating && !resizing) {
+        const hit = hitTest(x,y);
+        if (hit !== -1) { selected = hit; dragging = true; }
+        else selected = -1;
+    }
+    startX = x; startY = y;
+    draw();
+};
+canvas.onmousemove = canvas.ontouchmove = e => {
+    e.preventDefault();
+    const pos = e.touches ? e.touches[0] : e;
+    const rect = canvas.getBoundingClientRect();
+    const x = (pos.clientX - rect.left) * 512 / rect.width;
+    const y = (pos.clientY - rect.top) * 512 / rect.height;
+    if (selected === -1) return;
+    const s = stickers[selected];
+    if (dragging) {
+        s.x += x - startX;
+        s.y += y - startY;
+        startX = x; startY = y;
+    } else if (rotating) {
+        s.rot = Math.atan2(y - s.y, x - s.x) - startRot;
+    } else if (resizing) {
+        const dist = Math.hypot(x - s.x, y - s.y);
+        let scale = (dist / startDist);
+        let newW = startScale * scale;
+        if (newW < 20) newW = 20;
+        s.w = newW;
+        s.h = newW * (s.img.height / s.img.width);
+    }
+    draw();
+};
+canvas.onmouseup = canvas.ontouchend = () => {
+    dragging = rotating = resizing = false;
+};
+window.onkeydown = e => {
+    if ((e.key === 'Delete' || e.key === 'Backspace') && selected !== -1) {
+        stickers.splice(selected, 1);
+        selected = -1;
+        draw();
+    }
+};
+draw();
+</script>
+</body>
+</html>
+"""
+def create_app():
+    with gr.Blocks() as demo:
+        gr.HTML(html_content)
+    return demo
+if __name__ == "__main__":
+    create_app().launch()