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

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

@@ -12,6 +12,7 @@
     'use strict';
 
     let historyImages = []; // Сгенерированные картинки
+    let selectedImages = []; // Хранилище Base64 выбранных файлов
     let promptHistory = JSON.parse(localStorage.getItem('grok_prompt_history') || '[]');
     let currentIndex = -1;
 
@@ -90,9 +91,23 @@
                     <textarea id="prompt-input" placeholder="What should I imagine?"></textarea>
                     <div class="row">
                         <button class="btn-secondary" id="toggle-sidebar">📜 History</button>
+                        <input type="file" id="file-input" multiple accept="image/*" style="display:none">
+                        <button class="btn-secondary" id="upload-btn">📎 Edit (0/10)</button>
+                        <button class="btn-danger" id="clear-files" style="display:none; padding: 2px 8px;">✕</button>
                         <select id="ratio-select">
-                            <option value="auto">Auto Ratio</option><option value="1:1">1:1</option><option value="16:9">16:9</option>
-                            <option value="9:16">9:16</option><option value="4:3">4:3</option><option value="3:2">3:2</option>
+                            <option value="auto">Auto Ratio</option>
+                            <option value="1:1">1:1</option>
+                            <option value="16:9">16:9</option>
+                            <option value="9:16">9:16</option>
+                            <option value="19.5:9">19.5:9</option>
+                            <option value="9:19.5">9:19.5</option>
+                            <option value="20:9">20:9</option>
+                            <option value="9:20">9:20</option>
+                            <option value="4:3">4:3</option>
+                            <option value="3:2">3:2</option>
+                            <option value="2:3">2:3</option>
+                            <option value="2:1">2:1</option>
+                            <option value="1:2">1:2</option>
                         </select>
                         <input type="number" id="count-input" value="1" min="1" max="20" style="width: 45px;">
                         <select id="mode-select">
@@ -137,6 +152,46 @@
             }
         });
 
+        const fileInput = document.getElementById('file-input');
+        const uploadBtn = document.getElementById('upload-btn');
+        const clearFilesBtn = document.getElementById('clear-files');
+        const ratioSelect = document.getElementById('ratio-select');
+
+        uploadBtn.onclick = () => fileInput.click();
+
+        fileInput.onchange = async (e) => {
+            const files = Array.from(e.target.files).slice(0, 10);
+            selectedImages = [];
+
+            for (const file of files) {
+                const base64 = await new Promise(resolve => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result);
+                    reader.readAsDataURL(file);
+                });
+                selectedImages.push({ url: base64 });
+            }
+
+            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";
+            }
+        };
+
+        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";
+        };
+
         renderHistory();
     }
 
@@ -188,15 +243,27 @@
 
     // --- REQUEST LOGIC ---
     async function sendRequest(prompt, ratio, n = 1) {
-        const response = await fetch('https://console.x.ai/v1/images/generations', {
+        const isEdit = selectedImages.length > 0;
+        const url = isEdit ? 'https://console.x.ai/v1/images/edits' : 'https://console.x.ai/v1/images/generations';
+
+        const body = {
+            model: 'grok-imagine-image',
+            prompt, n,
+            aspect_ratio: isEdit ? 'auto' : ratio,
+            resolution: '2k',
+            response_format: 'b64_json'
+        };
+
+        if (isEdit) {
+            body.images = selectedImages; // Добавляем массив картинок
+        }
+
+        const response = await fetch(url, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                model: 'grok-imagine-image',
-                prompt, n, aspect_ratio: ratio,
-                resolution: '2k', response_format: 'b64_json'
-            })
+            body: JSON.stringify(body)
         });
+
         if (!response.ok) {
             const err = await response.json();
             throw new Error(err.error || `HTTP ${response.status}`);