update UI./

index.html

@@ -152,6 +152,16 @@ body{
         repeating-conic-gradient(#0c0c0c 0% 25%, #050505 0% 50%) 0 0/24px 24px;
     padding: 24px;
 }
+
+.canvas-container {
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 #draw-canvas {
     background: #ffffff;
     border: 1px solid var(--border2);
@@ -181,6 +191,60 @@ body{
     display: none;
 }
 
+/* Sticker Layer */
+#sticker-layer {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    pointer-events: none; /* Container itself doesn't block canvas clicks */
+}
+.sticker-wrapper {
+    position: absolute;
+    pointer-events: auto;
+    cursor: move;
+    border: 1px dashed transparent;
+    user-select: none;
+}
+.sticker-wrapper:hover, .sticker-wrapper.selected {
+    border-color: var(--accent);
+}
+.sticker-wrapper img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    pointer-events: none;
+}
+.sticker-del-btn {
+    position: absolute;
+    top: -10px; right: -10px;
+    width: 20px; height: 20px;
+    background: #ef4444;
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    z-index: 10;
+}
+.sticker-wrapper:hover .sticker-del-btn, .sticker-wrapper.selected .sticker-del-btn {
+    display: flex;
+}
+.resize-handle {
+    position: absolute;
+    width: 12px; height: 12px;
+    background: #fff;
+    border: 1px solid #000;
+    bottom: -6px; right: -6px;
+    cursor: nwse-resize;
+    pointer-events: auto;
+    display: none;
+}
+.sticker-wrapper:hover .resize-handle, .sticker-wrapper.selected .resize-handle {
+    display: block;
+}
+
 /* Loader */
 .modern-loader{
     display:none;position:absolute;inset:0;background:rgba(0,0,0,.92);
@@ -429,6 +493,13 @@ body{
       <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
     </button>
 
+    <div class="rail-sep"></div>
+    <div class="rail-label">Assets</div>
+    <button class="rail-btn" id="btn-sticker" title="Add Sticker / Image">
+      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+    </button>
+    <input type="file" id="sticker-input" accept="image/*" style="display:none;">
+
     <div class="rail-sep"></div>
     <div class="rail-label">Result</div>
     <button class="rail-btn" id="btn-download" title="Download Result" disabled>
@@ -454,7 +525,11 @@ body{
         <div class="loader-bar-track"><div class="loader-bar-fill" id="loader-bar-fill"></div></div>
       </div>
 
-      <canvas id="draw-canvas" width="1024" height="576" class="cursor-brush" style="aspect-ratio: 16 / 9;"></canvas>
+      <div class="canvas-container" id="canvas-container">
+        <canvas id="draw-canvas" width="1024" height="576" class="cursor-brush" style="aspect-ratio: 16 / 9;"></canvas>
+        <div id="sticker-layer"></div>
+      </div>
+      
       <img id="result-img" alt="Result Image" style="display:none; aspect-ratio: 16 / 9;">
     </div>
   </div>
@@ -544,6 +619,8 @@ const canvas = document.getElementById('draw-canvas');
 const ctx = canvas.getContext('2d');
 const resultImg = document.getElementById('result-img');
 const btnDownload = document.getElementById('btn-download');
+const stickerLayer = document.getElementById('sticker-layer');
+const canvasContainer = document.getElementById('canvas-container');
 
 const btnBrush = document.getElementById('btn-brush');
 const btnEraser = document.getElementById('btn-eraser');
@@ -632,6 +709,7 @@ function updateCanvasRatio(ratio) {
     setupCanvas(); // Clear and reset canvas on ratio change
     undoStack = []; // Clear history on ratio change
     redoStack = [];
+    stickerLayer.innerHTML = ''; // Clear stickers on ratio change
     saveState(); // Save initial blank state
 }
 
@@ -659,6 +737,8 @@ function getPos(e) {
 }
 
 function startDrawing(e) {
+    // Only draw if clicking directly on canvas, not a sticker
+    if (e.target !== canvas) return;
     e.preventDefault();
     isDrawing = true;
     const pos = getPos(e);
@@ -739,6 +819,7 @@ sizeSlider.addEventListener('input', (e) => {
 btnClear.addEventListener('click', () => {
     setupCanvas();
     saveState();
+    stickerLayer.innerHTML = ''; // Clear stickers too
     showToast('Canvas cleared', 'info');
 });
 
@@ -767,16 +848,141 @@ btnDownload.addEventListener('click', () => {
     }
 });
 
+/* ── Sticker / Asset Logic ── */
+const btnSticker = document.getElementById('btn-sticker');
+const stickerInput = document.getElementById('sticker-input');
+let stickers = [];
+
+btnSticker.addEventListener('click', () => stickerInput.click());
+
+stickerInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => addSticker(ev.target.result);
+    reader.readAsDataURL(file);
+    e.target.value = ''; // reset input
+});
+
+function addSticker(src) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'sticker-wrapper';
+    
+    const img = document.createElement('img');
+    img.src = src;
+    img.draggable = false; // prevent native drag
+    wrapper.appendChild(img);
+
+    const delBtn = document.createElement('button');
+    delBtn.className = 'sticker-del-btn';
+    delBtn.innerHTML = '✕';
+    delBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        wrapper.remove();
+        stickers = stickers.filter(s => s.element !== wrapper);
+    });
+    wrapper.appendChild(delBtn);
+
+    const resizeHandle = document.createElement('div');
+    resizeHandle.className = 'resize-handle';
+    wrapper.appendChild(resizeHandle);
+
+    // Initial size and position (center)
+    wrapper.style.width = '150px';
+    wrapper.style.height = '150px'; // Will be overwritten by aspect ratio on load
+    wrapper.style.left = '40%';
+    wrapper.style.top = '40%';
+
+    stickerLayer.appendChild(wrapper);
+    
+    const stickerObj = { element: wrapper, img: img };
+    stickers.push(stickerObj);
+
+    // Adjust initial height based on image aspect ratio
+    img.onload = () => {
+        const aspect = img.naturalWidth / img.naturalHeight;
+        const w = wrapper.offsetWidth;
+        wrapper.style.height = `${w / aspect}px`;
+    };
+
+    // Make draggable
+    wrapper.addEventListener('pointerdown', (e) => startDrag(e, stickerObj));
+    // Make resizable
+    resizeHandle.addEventListener('pointerdown', (e) => startResize(e, stickerObj));
+}
+
+function startDrag(e, sticker) {
+    e.stopPropagation();
+    e.preventDefault();
+    sticker.element.classList.add('selected');
+    
+    const rect = sticker.element.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+
+    function onMove(ev) {
+        const layerRect = stickerLayer.getBoundingClientRect();
+        let x = ev.clientX - layerRect.left - offsetX;
+        let y = ev.clientY - layerRect.top - offsetY;
+        
+        // Keep within bounds roughly
+        x = Math.max(-rect.width/2, Math.min(x, layerRect.width - rect.width/2));
+        y = Math.max(-rect.height/2, Math.min(y, layerRect.height - rect.height/2));
+        
+        sticker.element.style.left = `${x}px`;
+        sticker.element.style.top = `${y}px`;
+    }
+    function onUp() {
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', onUp);
+        sticker.element.classList.remove('selected');
+    }
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+}
+
+function startResize(e, sticker) {
+    e.stopPropagation();
+    e.preventDefault();
+    sticker.element.classList.add('selected');
+    
+    const rect = sticker.element.getBoundingClientRect();
+    const startW = rect.width;
+    const startH = rect.height;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const aspect = startW / startH;
+
+    function onMove(ev) {
+        let newW = startW + (ev.clientX - startX);
+        // Maintain aspect ratio
+        let newH = newW / aspect; 
+        
+        if (newW < 30) newW = 30;
+        if (newH < 30) newH = 30;
+        
+        sticker.element.style.width = `${newW}px`;
+        sticker.element.style.height = `${newH}px`;
+    }
+    function onUp() {
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', onUp);
+        sticker.element.classList.remove('selected');
+    }
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+}
+
 /* ── UI Toggles ── */
 function setViewMode(mode) {
     if (mode === 'result') {
-        canvas.style.display = 'none';
+        canvasContainer.style.display = 'none';
         resultImg.style.display = 'block';
         segResult.classList.add('active');
         segInput.classList.remove('active');
         canvasMeta.textContent = 'Generated Result';
     } else {
-        canvas.style.display = 'block';
+        canvasContainer.style.display = 'flex';
         resultImg.style.display = 'none';
         segResult.classList.remove('active');
         segInput.classList.add('active');
@@ -891,7 +1097,33 @@ try {
     showToast('Could not connect to the backend API', 'error');
 }
 
-/* ── Run Generation ── */
+/* ── Composition & Generation ── */
+function getCompositedImage() {
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = canvas.width;
+    tempCanvas.height = canvas.height;
+    const tempCtx = tempCanvas.getContext('2d');
+    
+    // Draw the sketch
+    tempCtx.drawImage(canvas, 0, 0);
+    
+    // Draw stickers
+    const scaleX = canvas.width / canvas.clientWidth;
+    const scaleY = canvas.height / canvas.clientHeight;
+    
+    stickers.forEach(s => {
+        const wrapperRect = s.element.getBoundingClientRect();
+        const layerRect = stickerLayer.getBoundingClientRect();
+        const x = (wrapperRect.left - layerRect.left) * scaleX;
+        const y = (wrapperRect.top - layerRect.top) * scaleY;
+        const w = wrapperRect.width * scaleX;
+        const h = wrapperRect.height * scaleY;
+        tempCtx.drawImage(s.img, x, y, w, h);
+    });
+    
+    return tempCanvas.toDataURL('image/png');
+}
+
 let running = false;
 let currentJob = null;
 
@@ -913,7 +1145,7 @@ async function runEdit() {
     showLoader('Submitting to queue…');
     btnDownload.disabled = true;
 
-    const sketch_b64 = canvas.toDataURL('image/png');
+    const sketch_b64 = getCompositedImage(); // Use composited image
     const selectedRatio = ratioSelect.value;
     const [targetW, targetH] = dims[selectedRatio];