Update Grok Imagine Pro UI v2.5-2.5.user.js

Grok Imagine Pro UI v2.5-2.5.user.js

@@ -69,6 +69,32 @@
         #modal-next { right: 20px; }
         #modal-download { position:absolute;top:40px; left:auto;width:auto; padding:0 25px; background:var(--color-green-500); color:#000; text-decoration:none; line-height:44px; font-weight:bold; border-radius:6px; box-shadow:black 0px 0px 10px 2px }
         .status { color: #888; font-size: 13px; font-family: monospace; }
+
+        /* Превью референсов */
+        #reference-previews {
+            display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;
+            min-height: 20px; padding: 10px; border: 2px dashed transparent;
+            border-radius: 8px; transition: 0.2s;
+        }
+        #reference-previews.drag-over { border-color: #0f0; background: rgba(0,255,0,0.05); }
+
+        .ref-item {
+            width: 80px; height: 80px; position: relative; cursor: grab;
+            border: 2px solid #333; border-radius: 6px; overflow: hidden;
+            background: #000; transition: transform 0.2s;
+        }
+        .ref-item:active { cursor: grabbing; }
+        .ref-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
+        .ref-item .remove-ref {
+            position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7);
+            color: #ff4444; border: none; border-radius: 4px; padding: 0 4px;
+            font-size: 12px; cursor: pointer; z-index: 2;
+        }
+        .ref-item .ref-index {
+            position: absolute; bottom: 2px; left: 2px; background: rgba(0,0,0,0.7);
+            color: #fff; font-size: 10px; padding: 0 4px; border-radius: 4px;
+        }
+        .ref-item.dragging { opacity: 0.5; transform: scale(0.9); }
     `;
     document.head.appendChild(style);
 
@@ -117,6 +143,7 @@
                         </select>
                         <button id="gen-btn">GENERATE</button>
                         <button class="btn-danger" id="clear-gallery">Clear Gallery</button>
+                        <div id="reference-previews"></div>
                         <span id="global-status" class="status"></span>
                     </div>
                 </div>
@@ -152,18 +179,72 @@
             }
         });
 
+        const refContainer = document.getElementById('reference-previews');
         const fileInput = document.getElementById('file-input');
         const uploadBtn = document.getElementById('upload-btn');
-        const clearFilesBtn = document.getElementById('clear-files');
         const ratioSelect = document.getElementById('ratio-select');
+        const genBtn = document.getElementById('gen-btn');
+
+        // Функция обновления UI референсов
+        function renderRefPreviews() {
+            refContainer.innerHTML = '';
+            selectedImages.forEach((imgObj, index) => {
+                const item = document.createElement('div');
+                item.className = 'ref-item';
+                item.draggable = true;
+                item.dataset.index = index;
+                item.innerHTML = `
+                <img src="${imgObj.url}">
+                <button class="remove-ref">✕</button>
+                <span class="ref-index">${index + 1}</span>
+            `;
 
-        uploadBtn.onclick = () => fileInput.click();
+                // Удаление одного референса
+                item.querySelector('.remove-ref').onclick = (e) => {
+                    e.stopPropagation();
+                    selectedImages.splice(index, 1);
+                    updateEditState();
+                };
+
+                // Логика сортировки (Drag & Drop элементов)
+                item.ondragstart = (e) => {
+                    e.dataTransfer.setData('text/plain', index);
+                    item.classList.add('dragging');
+                };
+                item.ondragend = () => item.classList.remove('dragging');
+
+                item.ondragover = (e) => e.preventDefault();
+                item.ondrop = (e) => {
+                    e.preventDefault();
+                    const fromIdx = parseInt(e.dataTransfer.getData('text/plain'));
+                    const toIdx = index;
+                    if (fromIdx === toIdx) return;
+
+                    const movedItem = selectedImages.splice(fromIdx, 1)[0];
+                    selectedImages.splice(toIdx, 0, movedItem);
+                    updateEditState();
+                };
+
+                refContainer.appendChild(item);
+            });
+        }
+
+        function updateEditState() {
+            const count = selectedImages.length;
+            uploadBtn.innerText = `📎 Edit (${count}/10)`;
+            uploadBtn.style.color = count > 0 ? "#0f0" : "#fff";
+            ratioSelect.disabled = count > 0;
+            if (count > 0) ratioSelect.value = "auto";
+            genBtn.innerText = count > 0 ? "EDIT IMAGES" : "GENERATE";
+            renderRefPreviews();
+        }
 
-        fileInput.onchange = async (e) => {
-            const files = Array.from(e.target.files).slice(0, 10);
-            selectedImages = [];
+        // Обработка добавления файлов
+        async function handleFiles(files) {
+            const remainingSlots = 10 - selectedImages.length;
+            const filesToAdd = Array.from(files).slice(0, remainingSlots);
 
-            for (const file of files) {
+            for (const file of filesToAdd) {
                 const base64 = await new Promise(resolve => {
                     const reader = new FileReader();
                     reader.onload = () => resolve(reader.result);
@@ -171,26 +252,28 @@
                 });
                 selectedImages.push({ url: base64 });
             }
+            updateEditState();
+        }
 
-            if (selectedImages.length > 0) {
-                uploadBtn.innerText = `📎 Edit (${selectedImages.length}/10)`;
-                uploadBtn.style.color = "#0f0";
-                clearFilesBtn.style.display = "inline-block";
-                ratioSelect.disabled = true;
-                ratioSelect.value = "auto";
-                document.getElementById('gen-btn').innerText = "EDIT IMAGES";
-            }
-        };
+        // События для кнопки и инпута
+        uploadBtn.onclick = () => fileInput.click();
+        fileInput.onchange = (e) => handleFiles(e.target.files);
 
-        clearFilesBtn.onclick = () => {
-            selectedImages = [];
-            fileInput.value = "";
-            uploadBtn.innerText = "📎 Edit (0/10)";
-            uploadBtn.style.color = "#fff";
-            clearFilesBtn.style.display = "none";
-            ratioSelect.disabled = false;
-            document.getElementById('gen-btn').innerText = "GENERATE";
-        };
+        // Drag-and-drop файлов на контейнер или кнопку
+        [uploadBtn, refContainer].forEach(el => {
+            el.ondragover = (e) => {
+                e.preventDefault();
+                refContainer.classList.add('drag-over');
+            };
+            el.ondragleave = () => refContainer.classList.remove('drag-over');
+            el.ondrop = (e) => {
+                e.preventDefault();
+                refContainer.classList.remove('drag-over');
+                if (e.dataTransfer.files.length > 0) {
+                    handleFiles(e.dataTransfer.files);
+                }
+            };
+        });
 
         renderHistory();
     }