API tools faq
paste
Guest User

Untitled

a guest
Apr 11th, 2026
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 232.04 KB | None | 0 0
raw download clone embed print report
  1. // ==UserScript==
  2. // @name xAI Overkill UI (v0.01.24.9)
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.01.24.9
  5. // @description PromptAndPray
  6. // @match https://console.x.ai/*
  7. // @grant GM_cookie
  8. // @grant GM_xmlhttpRequest
  9. // @grant GM_download
  10. // @run-at document-start
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. const APP_CONFIG = {
  17. USER_DEFAULTS: {
  18. action: 'gen_image', currentAr: 'Auto', batchSize: '2', duration: '8', loops: '0', resImg: '2k', resVid: '720p',
  19. refMode: 'multi', concurrentSessions: 1, rateLimitDelay: 60, retryMinMs: 2000, retryMaxMs: 4000,
  20. autoRetryVideo: true, referenceARTrick: true, ecoMode: false, autoDownload: false,
  21. leftCollapsed: false, rightCollapsed: false, leftWidth: 320, rightWidth: 320, imgBaseMs: 3000
  22. },
  23. LIMITS: { MAX_CONCURRENT_SESSIONS: 2, MAX_REFS_IMG: 5, MAX_REFS_VID: 7, MAX_REFS_EDIT: 1, MAX_REFS_QUEUE: 100, MAX_HISTORY: 2000 },
  24. TIMINGS: { API_POLL_INTERVAL: 5000, MAX_POLL_ATTEMPTS: 60, MAX_RETRY_ATTEMPTS: 60, PROMPT_COMMIT_DELAY_MS: 10000 },
  25. STORAGE: {
  26. CONFIG_KEY: 'xai_overkill_ui_config_2026',
  27. DB_NAME: 'XAI_OVERKILL_UI_2026',
  28. DB_VERSION: 1,
  29. STORE_META: 'history_meta_v1',
  30. STORE_DATA: 'app_state_v1',
  31. OPFS_DIR: 'xai_overkill_ui_media_2026'
  32. },
  33. ASPECT_RATIOS:[
  34. { label: 'Auto', w: 1, h: 1, isAuto: true }, { label: 'Ref', w: 1, h: 1, isAuto: true, isRef: true },
  35. { label: '1:1', w: 1, h: 1 }, { label: '1:1', w: 1, h: 1 }, { label: '3:4', w: 3, h: 4 }, { label: '4:3', w: 4, h: 3 },
  36. { label: '9:16', w: 9, h: 16 }, { label: '16:9', w: 16, h: 9 }, { label: '2:3', w: 2, h: 3 },
  37. { label: '3:2', w: 3, h: 2 }, { label: '9:19.5', w: 9, h: 19.5, imageOnly: true }, { label: '19.5:9', w: 19.5, h: 9, imageOnly: true },
  38. { label: '9:20', w: 9, h: 20, imageOnly: true }, { label: '20:9', w: 20, h: 9, imageOnly: true },
  39. { label: '1:2', w: 1, h: 2, imageOnly: true }, { label: '2:1', w: 2, h: 1, imageOnly: true }
  40. ],
  41. PLACEHOLDER_SWATCHES: [
  42. { name: 'Arctic Slate', spot: '#223140', mid: '#17222D', bg: '#070809' },
  43. { name: 'Dusty Indigo', spot: '#2A2D43', mid: '#1D2030', bg: '#070809' },
  44. { name: 'Storm Blue', spot: '#263247', mid: '#1B2433', bg: '#070809' },
  45. { name: 'Quiet Plum', spot: '#2D2833', mid: '#201B25', bg: '#070809' },
  46. { name: 'Pine Smoke', spot: '#1F2F2A', mid: '#16221E', bg: '#070809' },
  47. { name: 'Coal Mocha', spot: '#2F2926', mid: '#221D1A', bg: '#070809' },
  48. { name: 'Midnight Alloy', spot: '#242A31', mid: '#191E24', bg: '#070809' },
  49. { name: 'Deep Petrol', spot: '#1C3135', mid: '#142328', bg: '#070809' },
  50. { name: 'Smoked Sage', spot: '#24302C', mid: '#19221F', bg: '#070809' },
  51. { name: 'Blue Ash', spot: '#243544', mid: '#192734', bg: '#070809' }
  52. ],
  53. ICONS: {
  54. refresh: '↻', settings: '⚙', star: '★', play: '▶', edit: '✄', extend: '◷', video: '🎞\uFE0E', close: '✕', check: '✔', editPrompt: '✎', imageRef: '🖼️', collapseLeft: '\\00AB', collapseRight: '\\00BB',
  55. download: `<svg viewBox="0 0 24 24" width="100%" height="100%" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`
  56. }
  57. };
  58. const DEFAULT_PROMPTS = Object.freeze({ gen_image: '', gen_video: '', edit_video: '', extend_video: '' });
  59. const DEFAULT_FAV_PROMPTS = Object.freeze({ gen_image: [], gen_video: [], edit_video: [], extend_video: [] });
  60. const ACTION_META = Object.freeze({
  61. gen_image: { label: '▨ Image', title: 'Image Generation', model: 'grok-imagine-image', refType: 'image' },
  62. gen_video: { label: '🎞\uFE0E Video', title: 'Video Generation', model: 'grok-imagine-video', refType: 'image' },
  63. edit_video: { label: '✄ Edit', title: 'Edit Video Ref', model: 'grok-imagine-video', refType: 'video' },
  64. extend_video: { label: '◷ Extend', title: 'Extend Video Ref', model: 'grok-imagine-video', refType: 'video' }
  65. });
  66. const ALLOWED_VIDEO_ARS = new Set(['1:1', '16:9', '9:16', '4:3', '3:4', '3:2', '2:3']);
  67. const DOM_IDS = {
  68. app: 'xai-pro-app',
  69. prompt: 'xai-api-prompt',
  70. textareaWrapper: 'textarea-wrapper',
  71. promptContainer: 'prompt-container-main',
  72. actionDropdown: 'btn-master-action',
  73. resImgToggle: 'xai-api-res-img',
  74. resVidToggle: 'xai-api-res-vid',
  75. settingBatch: 'btn-setting-batch',
  76. settingDuration: 'btn-setting-duration',
  77. settingAr: 'btn-setting-ar',
  78. settingLoops: 'setting-loops',
  79. fileInput: 'xai-api-file',
  80. dropzone: 'col-right-dropzone',
  81. uploadPlaceholder: 'xai-upload-placeholder',
  82. refCounter: 'xai-ref-counter',
  83. refList: 'xai-ref-list',
  84. generateBtn: 'xai-api-generate',
  85. saveRefBtn: 'xai-api-save-ref',
  86. refEditLabel: 'ref-edit-label',
  87. settingsBtn: 'xai-settings-btn',
  88. favBtn: 'xai-fav-btn',
  89. settingsPopover: 'popover-settings',
  90. status: 'xai-api-status',
  91. history: 'xai-history',
  92. currentImages: 'xai-current-images',
  93. reset: 'xai-reset-btn',
  94. lightbox: 'xai-lightbox',
  95. lightboxInner: 'xai-lightbox-inner',
  96. lightboxStage: 'xai-lightbox-stage',
  97. lightboxDl: 'xai-lightbox-dl',
  98. refModeToggle: 'xai-ref-mode-toggle',
  99. favDialog: 'xai-fav-dialog',
  100. favList: 'fav-list-container',
  101. rateDelayInput: 'setting-rate-delay',
  102. sessionsInput: 'setting-sessions',
  103. delayMinInput: 'setting-delay-min',
  104. delayMaxInput: 'setting-delay-max',
  105. autoRetryVideoCheckbox: 'setting-auto-retry-video',
  106. arTrickCheckbox: 'setting-ar-trick',
  107. colLeft: 'col-left',
  108. colRight: 'col-right-dropzone',
  109. autoDownloadCheckbox: 'setting-auto-download',
  110. labelMasterAction: 'label-master-action',
  111. labelSettingDuration: 'label-setting-duration',
  112. popoverDuration: 'popover-duration',
  113. popoverAr: 'popover-ar',
  114. arSelectedIcon: 'ar-selected-icon',
  115. arSelectedText: 'ar-selected-text',
  116. metricSaved: 'metric-saved',
  117. metricDisk: 'metric-disk',
  118. metricLoad: 'metric-load',
  119. confirmDialog: 'xai-confirm-dialog',
  120. confirmMsg: 'xai-confirm-msg',
  121. labelSettingBatch: 'label-setting-batch',
  122. ecoModeCheckbox: 'setting-eco-mode'
  123. };
  124. const SETTINGS_TOGGLE_META = Object.freeze([
  125. { rowId: 'settings-auto-download-toggle', inputId: 'setting-auto-download', domKey: 'autoDownloadCheckbox', stateKey: 'autoDownload', label: 'Auto-Download Media', title: 'Save completed media to disk automatically' },
  126. { rowId: 'settings-auto-retry-video-toggle', inputId: 'setting-auto-retry-video', domKey: 'autoRetryVideoCheckbox', stateKey: 'autoRetryVideo', label: 'Auto-Retry Stuck Videos', title: 'Automatically restart generation if a video gets stuck' },
  127. { rowId: 'settings-ar-trick-toggle', inputId: 'setting-ar-trick', domKey: 'arTrickCheckbox', stateKey: 'referenceARTrick', label: 'Single Ref AR Trick', title: 'Send the single reference image twice to bypass API crop issues' },
  128. { rowId: 'settings-eco-mode-toggle', inputId: 'setting-eco-mode', domKey: 'ecoModeCheckbox', stateKey: 'ecoMode', label: 'Eco Mode (Low Mem)', title: 'Unload invisible images from RAM to prevent browser crashes' }
  129. ]);
  130. const SETTINGS_NUMBER_META = Object.freeze([
  131. { inputId: 'setting-sessions', domKey: 'sessionsInput', stateKey: 'concurrentSessions', label: 'Concurrent Sessions', title: 'Number of simultaneous API requests (higher = faster, but hits rate limits sooner)', min: 1, max: APP_CONFIG.LIMITS.MAX_CONCURRENT_SESSIONS },
  132. { inputId: 'setting-rate-delay', domKey: 'rateDelayInput', stateKey: 'rateLimitDelay', label: 'Rate Limit Delay (s)', title: 'Pause duration when strict rate limit (429) is hit', min: 0, max: 300 },
  133. { inputId: 'setting-delay-min', domKey: 'delayMinInput', stateKey: 'retryMinMs', label: 'Delay Min (ms)', title: 'Minimum random delay range between API retries to avoid spamming', min: 500, step: 500, wide: true },
  134. { inputId: 'setting-delay-max', domKey: 'delayMaxInput', stateKey: 'retryMaxMs', label: 'Delay Max (ms)', title: 'Maximum random delay range between API retries', min: 1000, step: 500, wide: true }
  135. ]);
  136. const EXPORT_STATE_KEYS = Object.freeze([
  137. 'action', 'currentAr', 'batchSize', 'duration', 'loops', 'resImg', 'resVid',
  138. 'concurrentSessions', 'rateLimitDelay', 'retryMinMs', 'retryMaxMs',
  139. 'autoRetryVideo', 'referenceARTrick', 'refMode', 'ecoMode', 'autoDownload',
  140. 'leftCollapsed', 'rightCollapsed', 'prompts', 'promptDrafts', 'refPrompts', 'favPrompts'
  141. ]);
  142. const ActionUtils = {
  143. get(action = STATE.action) { return ACTION_META[action] || ACTION_META.gen_image; },
  144. getLabel(action = STATE.action) { return this.get(action).label; },
  145. getTitle(action = STATE.action) { return this.get(action).title; },
  146. getModel(action = STATE.action) { return this.get(action).model; },
  147. isImage(action = STATE.action) { return action === 'gen_image'; },
  148. isVideo(action = STATE.action) { return action !== 'gen_image'; },
  149. isVideoGeneration(action = STATE.action) { return action === 'gen_video'; },
  150. isVideoEdit(action = STATE.action) { return action === 'edit_video' || action === 'extend_video'; },
  151. usesImageRefs(action = STATE.action) { return !this.isVideoEdit(action); },
  152. getRefType(action = STATE.action) { return this.get(action).refType; },
  153. getMaxRefs(action = STATE.action, refMode = STATE.refMode) {
  154. if (this.isVideoEdit(action)) return APP_CONFIG.LIMITS.MAX_REFS_EDIT;
  155. if (refMode === 'queue') return APP_CONFIG.LIMITS.MAX_REFS_QUEUE;
  156. return this.isVideoGeneration(action) ? APP_CONFIG.LIMITS.MAX_REFS_VID : APP_CONFIG.LIMITS.MAX_REFS_IMG;
  157. },
  158. getDurationOptions(action = STATE.action) {
  159. const max = action === 'extend_video' ? 10 : 15;
  160. return Array.from({ length: max }, (_, idx) => {
  161. const value = String(idx + 1);
  162. return { val: value, text: action === 'extend_video' ? `${value}s Ext` : `${value}s` };
  163. });
  164. },
  165. getUploadAction(currentAction, mimeType) {
  166. const isVideo = mimeType.startsWith('video/');
  167. if (isVideo && this.usesImageRefs(currentAction)) return 'edit_video';
  168. if (!isVideo && this.isVideoEdit(currentAction)) return 'gen_image';
  169. return currentAction;
  170. },
  171. getCardAction(itemType, mode = 'edit') {
  172. if (mode === 'extend') return 'extend_video';
  173. if (mode === 'video') return 'gen_video';
  174. return itemType === 'video' ? 'edit_video' : 'gen_image';
  175. },
  176. getEndpoint(action = STATE.action, refCount = 0) {
  177. if (action === 'gen_image') return refCount ? '/v1/images/edits' : '/v1/images/generations';
  178. if (action === 'gen_video') return '/v1/videos/generations';
  179. if (action === 'edit_video') return '/v1/videos/edits';
  180. return '/v1/videos/extensions';
  181. },
  182. getGenerationWarnings(action = STATE.action, refs = [], duration = parseInt(STATE.duration) || 5, aspectRatio = STATE.currentAr) {
  183. if (!this.isVideoGeneration(action)) return [];
  184. const warnings = [];
  185. if (refs.length > 0 && duration > 10) {
  186. if (aspectRatio !== 'Auto' && aspectRatio !== 'Ref') warnings.push(">10s video might stretch refs instead of resizing. Auto AR is recommended.");
  187. if (refs.length > 1) warnings.push(">10s video uses only the first reference.");
  188. }
  189. if (duration > 8) warnings.push("Videos >8s cannot be used for edits later.");
  190. return warnings;
  191. }
  192. };
  193.  
  194. const LOG_HISTORY =[];
  195. const LOG_HISTORY_LIMIT = 2000;
  196. const RETRYABLE_GATEWAY_STATUSES = new Set([500, 502, 503]);
  197. const AUTH_FAILURE_STATUSES = new Set([401, 403]);
  198. const RATE_LIMIT_FAILURE_STATUSES = new Set([422, 429]);
  199. const VIDEO_SUCCESS_STATES = new Set(['done', 'completed']);
  200. const VIDEO_FLAGGED_STATES = new Set(['failed', 'expired', 'rejected', 'blocked', 'moderated', 'nsfw']);
  201. const CURRENT_PANEL_STATUS_STYLE = "white-space:normal; font-size:13px; text-align:center; padding:8px;";
  202. const STUCK_VIDEO_RETRY_TOKENS = ['timeout: video', 'generation halted.', 'video rejected'];
  203. const REQUEST_MODERATION_RE = /moderation|blocked|nsfw|is_sensitive|sensitive|policy/i;
  204. const REQUEST_INVALID_RE = /invalid argument|invalid request|unsupported/i;
  205. const stripHeavyData = (val) => { if (val === null || val === undefined) return val; if (typeof val === 'string') return (val.startsWith('data:') || val.length > 2000) ? `[TRUNCATED_LEN_${val.length}]` : val; if (typeof val !== 'object') return val; if (Array.isArray(val)) return val.map(stripHeavyData); const copy = {}; for (let k in val) copy[k] = stripHeavyData(val[k]); return copy; };
  206. const addLog = (lvl, msg, data = null) => {
  207. try {
  208. const outData = data ? stripHeavyData(data) : '';
  209. const normalizedLevel = String(lvl || '').toUpperCase();
  210. const consoleMethod = normalizedLevel.includes('ERROR') ? 'error' : normalizedLevel.includes('WARN') ? 'warn' : 'log';
  211. console[consoleMethod](`[xAI][${lvl}] ${msg}`, outData);
  212. LOG_HISTORY.push({ lvl, msg, timestamp: Date.now(), data: outData });
  213. if (LOG_HISTORY.length > LOG_HISTORY_LIMIT) LOG_HISTORY.shift();
  214. } catch(e) { console.error('[xAI][LOGGER_PANIC]', e); }
  215. };
  216. const HISTORY_MEASURE_EPSILON = 4;
  217. const createMarkupFragment = (markup = '') => {
  218. const template = document.createElement('template');
  219. template.innerHTML = markup;
  220. return template.content.cloneNode(true);
  221. };
  222. const scheduleObjectUrlRevoke = (url, delayMs = 10000) => {
  223. if (typeof url !== 'string' || !url.startsWith('blob:')) return;
  224. setTimeout(() => {
  225. try { URL.revokeObjectURL(url); }
  226. catch (e) { addLog('WARN', 'revokeObjectURL failed', { url, error: e?.message || e }); }
  227. }, delayMs);
  228. };
  229. const parseResponseJsonSafe = async (response) => {
  230. try { return await response.json(); } catch (e) { return null; }
  231. };
  232. const addErrorDetail = (parts, value, label = '') => {
  233. if (value === null || value === undefined || value === '') return;
  234. let text = '';
  235. if (typeof value === 'string') text = value.trim();
  236. else {
  237. try { text = JSON.stringify(value); } catch (e) { text = String(value); }
  238. }
  239. if (!text) return;
  240. const line = label ? `${label}: ${text}` : text;
  241. if (!parts.includes(line)) parts.push(line);
  242. };
  243. const buildHttpErrorMessage = (status, errData = null) => {
  244. const parts = [`HTTP ${status}`];
  245. const err = errData?.error;
  246. if (typeof err === 'string') addErrorDetail(parts, err);
  247. else if (err && typeof err === 'object') {
  248. addErrorDetail(parts, err.message);
  249. addErrorDetail(parts, err.code, 'Code');
  250. addErrorDetail(parts, err.detail, 'Detail');
  251. addErrorDetail(parts, err.type, 'Type');
  252. }
  253. addErrorDetail(parts, errData?.message);
  254. addErrorDetail(parts, errData?.code, 'Code');
  255. addErrorDetail(parts, errData?.detail, 'Detail');
  256. return parts.join('\n');
  257. };
  258. const buildCurrentStatusLines = (status) => [{ text: status.longStatus, color: status.color, style: CURRENT_PANEL_STATUS_STYLE }];
  259. const getTaskSummaryText = (task) => task?.shortStatus || task?.longStatus || '...';
  260. const isRequestModeratedError = (message = '') => REQUEST_MODERATION_RE.test(message);
  261. const isInvalidRequestError = (message = '') => REQUEST_INVALID_RE.test(message);
  262. const shouldAutoRetryStuckVideo = (message = '', autoRetryEnabled = STATE.autoRetryVideo) => message.includes('video lost') || (autoRetryEnabled && STUCK_VIDEO_RETRY_TOKENS.some(token => message.includes(token)));
  263.  
  264. const sleep = (ms, signal) => new Promise(res => { if (signal?.aborted) return res(); const t = setTimeout(res, ms); signal?.addEventListener('abort', () => { clearTimeout(t); res(); }, { once: true }); });
  265. const postTaskSafe = (fn, opts = {}) => {
  266. if (typeof scheduler !== 'undefined' && typeof scheduler.postTask === 'function') return scheduler.postTask(fn, opts);
  267. return new Promise((resolve, reject) => {
  268. const run = () => { try { Promise.resolve(fn()).then(resolve, reject); } catch (e) { reject(e); } };
  269. if (opts?.priority === 'user-blocking' && typeof queueMicrotask === 'function') queueMicrotask(run);
  270. else setTimeout(run, 0);
  271. });
  272. };
  273. const runBg = (fn, opts = { priority: 'background' }) => postTaskSafe(async () => { try { return await fn(); } catch (e) { addLog('WARN', 'runBg err', e); } }, opts);
  274. const yieldToMain = () => (typeof scheduler !== 'undefined' && scheduler.yield) ? scheduler.yield() : new Promise(r => setTimeout(r, 0));
  275. const runTransition = (fn) => { fn(); return null; };
  276. const isAutoEcoEnabled = () => !!document.body?.classList.contains('auto-eco');
  277. const isMemoryConstrainedMode = () => STATE.ecoMode || isAutoEcoEnabled();
  278. const getVisibleCurrentCardCount = () => {
  279. const map = typeof CardRegistry !== 'undefined' ? CardRegistry.maps?.current : null;
  280. if (!map || map.size === 0) return 0;
  281. let count = 0;
  282. map.forEach(card => { if (card?._isActuallyVisible) count++; });
  283. return count;
  284. };
  285. const getThumbCacheLimit = () => isMemoryConstrainedMode() ? 36 : 120;
  286. const getFullCacheLimit = () => {
  287. if (isMemoryConstrainedMode()) return 2;
  288. const visibleCount = getVisibleCurrentCardCount();
  289. return Math.min(18, Math.max(6, (visibleCount * 3) + 4));
  290. };
  291. const getThumbMaxDim = () => isMemoryConstrainedMode() ? 420 : 600;
  292. const getThumbQuality = () => isMemoryConstrainedMode() ? 0.68 : 0.75;
  293. const getHistoryOverscanPx = () => isMemoryConstrainedMode() ? 640 : 1400;
  294. const getHistoryPrerenderBudget = () => isMemoryConstrainedMode() ? 12 : 20;
  295. const applyMemoryPressureProfile = (reason = 'manual') => {
  296. MediaWarmPool.releaseAll();
  297. RefPayloadCache.clear();
  298. CardRegistry.maps.current.forEach(card => card.setLoadLevel(isMemoryConstrainedMode() ? (card._isActuallyVisible ? 'thumb' : 'none') : (card._isActuallyVisible ? 'full' : 'thumb')));
  299. CardRegistry.maps.history.forEach(card => card.setLoadLevel(isMemoryConstrainedMode() ? (card._isActuallyVisible ? 'thumb' : 'none') : 'thumb'));
  300. CardRegistry.maps.reference.forEach(card => card.setLoadLevel('thumb'));
  301. BlobCache.trim({ thumb: getThumbCacheLimit(), full: getFullCacheLimit() });
  302. DOM.historyScroller?.refreshMemoryPressure?.(reason);
  303. };
  304.  
  305. const dateFormatter = new Intl.DateTimeFormat('sv-SE', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
  306. const makeTimestamp = () => dateFormatter.format(new Date()).replace(/:/g, '-');
  307. const sanitizeUrl = (url) => {
  308. if (typeof url !== 'string' || !url) return '';
  309. if (url.startsWith('data:') || url.startsWith('blob:') || url.startsWith('/')) return url;
  310. try { return ['http:', 'https:'].includes(new URL(url).protocol) ? url : ''; } catch(e) { return ''; }
  311. };
  312.  
  313. const fetchBlobCSP = (url, range = null) => new Promise((resolve, reject) => {
  314. if (typeof GM_xmlhttpRequest === 'undefined') return reject(new Error('GM_xmlhttpRequest not granted'));
  315. GM_xmlhttpRequest({ method: 'GET', url, headers: range ? { 'Range': `bytes=${range}` } : {}, responseType: 'blob',
  316. onload: (res) => (res.status >= 200 && res.status < 300) ? resolve(res.response) : reject(new Error(`HTTP ${res.status}`)), onerror: reject, ontimeout: () => reject(new Error('Timeout'))
  317. });
  318. });
  319.  
  320. const DomUtils = {
  321. insertTextAtCursor(inputEl, text, replaceAll = false) {
  322. inputEl.focus();
  323. if (replaceAll) { inputEl.select(); document.execCommand('insertText', false, text); } else document.execCommand('insertText', false, text);
  324. inputEl.dispatchEvent(new Event('input', { bubbles: true }));
  325. },
  326. base64ToBlob(b64, mimeType) {
  327. const byteChars = atob(b64); const byteArrays =[];
  328. for (let offset = 0; offset < byteChars.length; offset += 512) {
  329. const slice = byteChars.slice(offset, offset + 512), byteNums = new Array(slice.length);
  330. for (let i = 0; i < slice.length; i++) byteNums[i] = slice.charCodeAt(i);
  331. byteArrays.push(new Uint8Array(byteNums));
  332. }
  333. return new Blob(byteArrays, { type: mimeType });
  334. }
  335. };
  336.  
  337. const MediaUtils = {
  338. _queue: {
  339. active: { video: 0, image: 0 }, limits: { video: 2, image: 4 }, tasks:[],
  340. enqueue(type, taskFn) { const { promise, resolve, reject } = Promise.withResolvers(); this.tasks.push({ type, taskFn, resolve, reject }); this._next(); return promise; },
  341. _next() {
  342. const idx = this.tasks.findIndex(t => this.active[t.type] < this.limits[t.type]); if (idx === -1) return;
  343. const { type, taskFn, resolve, reject } = this.tasks.splice(idx, 1)[0]; this.active[type]++;
  344. Promise.resolve().then(taskFn).then(resolve).catch(reject).finally(() => { this.active[type]--; this._next(); });
  345. }
  346. },
  347. _lqip: new OffscreenCanvas(2, 2),
  348. _getCtx() { return this._lqip.getContext('2d', { alpha: false, willReadFrequently: true }); },
  349.  
  350. async fileToBase64(file, mimeType = 'image/jpeg') {
  351. if (!file) return null;
  352. const targetBlob = file.type === mimeType ? file : new Blob([file], { type: mimeType }), { promise, resolve } = Promise.withResolvers(), r = new FileReader();
  353. r.onload = () => resolve(r.result); r.onerror = () => resolve(null); r.readAsDataURL(targetBlob); return promise;
  354. },
  355.  
  356. async processSource(source, type, maxDim = 600, qual = 0.75) {
  357. return this._queue.enqueue(type, async () => {
  358. const isVid = type === 'video', isLocal = isVid && source instanceof Blob, url = isVid ? (isLocal ? URL.createObjectURL(source) : source) : null;
  359. let bmp = null, v = null, cleanup = () => { if (isLocal && url) URL.revokeObjectURL(url); if (v) { v.removeAttribute('src'); v.load(); v = null; } if (bmp) bmp.close(); };
  360. try {
  361. if (isVid) {
  362. v = document.createElement('video'); v.muted = v.playsInline = true; if (!isLocal) v.crossOrigin = 'anonymous';
  363. const { promise, resolve, reject } = Promise.withResolvers();
  364. v.onloadeddata = () => { v.currentTime = 0.1; };
  365. v.onseeked = async () => { try { resolve(await createImageBitmap(v, { resizeWidth: maxDim, resizeQuality: 'medium' })); } catch (e) { reject(e); } };
  366. v.onerror = () => reject(new Error('Decode err')); v.src = url; v.load(); bmp = await promise;
  367. } else bmp = await createImageBitmap(source, { resizeWidth: maxDim, resizeQuality: 'medium' });
  368.  
  369. if (!bmp) throw new Error("Bitmap err");
  370. const ratio = bmp.width / bmp.height, ctx = this._getCtx(); ctx.drawImage(bmp, 0, 0, 2, 2);
  371. const d = ctx.getImageData(0, 0, 2, 2).data, rgb = (i) => `${d[i]},${d[i+1]},${d[i+2]}`;
  372. const avg = [
  373. Math.round((d[0] + d[4] + d[8] + d[12]) / 4),
  374. Math.round((d[1] + d[5] + d[9] + d[13]) / 4),
  375. Math.round((d[2] + d[6] + d[10] + d[14]) / 4)
  376. ];
  377. const dark = avg.map(v => Math.max(0, Math.round(v * 0.32))).join(',');
  378. const base = avg.map(v => Math.max(0, Math.round(v * 0.55))).join(',');
  379. const lqip = `radial-gradient(circle at 22% 20%, rgb(${rgb(0)}) 0, transparent 52%), radial-gradient(circle at 78% 28%, rgb(${rgb(4)}) 0, transparent 58%), linear-gradient(180deg, rgb(${base}) 0%, rgb(${dark}) 100%)`;
  380. const exportCanvas = new OffscreenCanvas(bmp.width, bmp.height); exportCanvas.getContext('2d', { alpha: false }).drawImage(bmp, 0, 0);
  381. const thumbBlob = await exportCanvas.convertToBlob({ type: 'image/webp', quality: qual });
  382. cleanup(); return { thumbBlob, lqip, ratio };
  383. } catch (err) { addLog('WARN', 'processSource err', err); cleanup(); return { thumbBlob: null, lqip: null, ratio: 16/9 }; }
  384. });
  385. },
  386.  
  387. async downloadItem(item, silent = false, card = null) {
  388. if (!silent) document.body.style.cursor = 'wait';
  389. try {
  390. let blobUrl = item.originalUrl, isBlobUrl = item.type === 'image' || (item.originalUrl?.startsWith('blob:') ?? false);
  391. if (item.type === 'image') { const blob = await OPFS.read(item.id, 'full'); if (blob) { blobUrl = URL.createObjectURL(blob); isBlobUrl = true; } }
  392. if (!blobUrl) throw new Error('No URL');
  393. const markDl = () => {
  394. if (item.downloaded) return;
  395. item.downloaded = true;
  396. DBQueue.add(item);
  397. card?.classList.add('downloaded');
  398. CardRegistry.setDownloaded(item.id, true);
  399. };
  400. const fallbackDl = async () => { let fetchUrl = blobUrl, needRevoke = false; if (!isBlobUrl && item.originalUrl) { fetchUrl = URL.createObjectURL(await fetchBlobCSP(item.originalUrl)); needRevoke = true; }
  401. const a = document.createElement('a'); a.href = fetchUrl; a.download = item.filename || `dl.${item.type === 'video' ? 'mp4' : 'png'}`; document.body.appendChild(a); a.click(); a.remove(); markDl();
  402. if (isBlobUrl || needRevoke) scheduleObjectUrlRevoke(fetchUrl);
  403. };
  404. if (isBlobUrl || typeof GM_download === 'undefined') await fallbackDl(); else GM_download({ url: blobUrl, name: item.filename || `dl.${item.type === 'video' ? 'mp4' : 'png'}`, onload: markDl, onerror: fallbackDl });
  405. } catch (err) { addLog('WARN', 'Download failed', err); if (!silent && item.originalUrl) { const a = document.createElement('a'); a.href = item.originalUrl; a.download = item.filename || 'dl'; a.target = '_blank'; document.body.appendChild(a); a.click(); a.remove(); } }
  406. if (!silent) document.body.style.cursor = '';
  407. }
  408. };
  409.  
  410. const UIUtils = {
  411. getIcon: (char, size = 16, cls = '') => `<span class="icon-inline ${cls}" style="font-size:${size}px;">${char}</span>`,
  412. getDlIcon: (size = 18) => `<div class="icon-dl flex-center" style="width:${size}px; height:${size}px;">${APP_CONFIG.ICONS.download}</div>`,
  413. createArIcon: (w, h, isAuto, isRef) => {
  414. if (isAuto || isRef) return `<div class="ar-icon-shell"><div class="ar-icon-letter">${isRef ? 'R' : 'A'}</div></div>`;
  415. const scale = 14 / Math.max(w, h);
  416. const inner = `<div class="ar-icon-frame" style="width:${w * scale}px; height:${h * scale}px;"></div>`;
  417. return `<div class="ar-icon-shell">${inner}</div>`;
  418. }
  419. };
  420. const TemplateUtils = {
  421. separator: () => `<div style="border-top: 1px solid var(--border); margin: 4px 0;"></div>`,
  422. settingsToggle: ({ rowId, inputId, label, title }) => `<div class="popover-item flex-between" id="${rowId}" title="${title}"><span title="${title}">${label}</span><input type="checkbox" id="${inputId}" style="pointer-events:none; margin:0;"></div>`,
  423. settingsNumber: ({ inputId, label, title, min, max, step, wide }) => `<div class="popover-item flex-between" style="cursor:default;" title="${title}"><span title="${title}">${label}</span><input type="number" id="${inputId}" min="${min}"${max != null ? ` max="${max}"` : ''}${step != null ? ` step="${step}"` : ''} class="input-popover${wide ? ' input-popover-lg' : ''}"></div>`
  424. };
  425.  
  426. const buildSettingsPopoverHtml = () => [
  427. ...SETTINGS_TOGGLE_META.slice(0, 3).map(TemplateUtils.settingsToggle),
  428. TemplateUtils.separator(),
  429. ...SETTINGS_NUMBER_META.slice(0, 2).map(TemplateUtils.settingsNumber),
  430. TemplateUtils.separator(),
  431. ...SETTINGS_NUMBER_META.slice(2).map(TemplateUtils.settingsNumber),
  432. TemplateUtils.separator(),
  433. TemplateUtils.settingsToggle(SETTINGS_TOGGLE_META[3]),
  434. TemplateUtils.separator(),
  435. `<div class="gap-2 d-flex" style="padding:4px 8px;"><button id="btn-export-state" class="xai-btn" style="flex:1; font-size:12px; height:28px;" title="Export all settings and prompts to a file">Export</button><button id="btn-import-state" class="xai-btn" style="flex:1; font-size:12px; height:28px;" title="Import settings and prompts from a file">Import</button><input type="file" id="file-import-state" accept=".json" class="d-none"></div>`
  436. ].join('');
  437.  
  438. const buildConfirmDialogHtml = () => `<dialog id="xai-confirm-dialog" class="modal-box"><div class="dialog-inner text-center" style="min-width:250px;"><div id="xai-confirm-msg" style="white-space:pre-wrap; margin-bottom:15px; text-align:left;"></div><form method="dialog" style="display:flex; gap:10px; justify-content:center;"><button value="cancel" class="xai-btn">Cancel</button><button value="cookie" class="xai-btn xai-btn--warning">Cookie</button><button value="data" class="xai-btn xai-btn--orange">Data</button><button value="full" class="xai-btn xai-btn--danger">Full</button></form></div></dialog>`;
  439.  
  440. const buildCardTemplateHtml = () => `<div class="top-bar"><div class="ref-header drag-handle" title="Drag to reorder"><input class="ref-active-toggle" type="checkbox" title="Toggle reference"><div class="ref-label-text-wrapper"><span class="ref-label-text">IMAGE_0</span></div><button class="xai-btn xai-btn--square xai-btn--glass xai-btn--xs hover-danger ref-del" title="Delete">${APP_CONFIG.ICONS.close}</button></div></div><div class="media-wrapper"><div class="bg-layer" id="bg-base"></div><div class="play-icon" id="play">${APP_CONFIG.ICONS.play}</div><img id="img" decoding="async"><video id="vid" preload="none" muted loop playsinline disablePictureInPicture disableRemotePlayback></video><div class="overlay"><button class="xai-btn xai-btn--square xai-btn--glass xai-btn--sm-square hover-danger overlay-del-btn" title="Delete Media / Cancel Task">${APP_CONFIG.ICONS.close}</button><div class="overlay-actions"><button class="xai-btn xai-btn--square xai-btn--glass xai-btn--sm-square overlay-edit-btn" title="Edit Media">${APP_CONFIG.ICONS.edit}</button><button class="xai-btn xai-btn--square xai-btn--glass xai-btn--sm-square overlay-extend-btn" title="Extend Video">${APP_CONFIG.ICONS.extend}</button><button class="xai-btn xai-btn--square xai-btn--glass xai-btn--sm-square overlay-video-btn" title="Make Video">${APP_CONFIG.ICONS.video}</button><a class="xai-btn xai-btn--square xai-btn--glass xai-btn--dl-square overlay-dl-btn ml-auto" title="Download">${UIUtils.getDlIcon(18)}</a></div></div></div><button class="xai-btn xai-btn--square xai-btn--glass ref-side-prompt-btn" title="Edit Prompt">${APP_CONFIG.ICONS.editPrompt}</button><div class="ref-status-overlay" id="status-overlay"></div><div class="bottom-bar"><p class="card-prompt" title=""></p></div>`;
  441.  
  442. const buildAppHtml = () => `<div id="xai-pro-app" data-active-action="gen_image"><div class="col-left" id="col-left"><div class="panel"><div class="panel-header"><div id="history-metrics" class="metrics-container" title="History Stats"><span id="metric-saved" class="metric-pill" title="History Items Saved">--</span><span id="metric-load" class="metric-pill d-none" title="System CPU/RAM Load">--</span><button id="xai-reset-btn" class="xai-btn xai-btn--icon-sm xai-btn--danger" title="Wipe Session Cache & Reload">${UIUtils.getIcon(APP_CONFIG.ICONS.refresh, 14)}</button><span id="metric-disk" class="metric-pill" title="History Storage Used">--</span></div><button id="btn-collapse-left" class="btn-collapse" aria-expanded="true" title="Toggle Left Panel"></button></div><div id="xai-history"></div></div></div><div class="col-center" id="col-center"><div id="xai-current-images"></div><div class="prompt-panel-wrapper" id="prompt-panel-wrapper"><div id="xai-toast-container"></div><div id="ref-edit-label" class="floating-edit-label">Editing Prompt</div><div class="prompt-container" id="prompt-container-main"><div class="textarea-wrapper" id="textarea-wrapper"><textarea id="xai-api-prompt" placeholder="Shift+Enter: line break&#10;Dynamic nesting: {cat|dog|{red|blue} car}"></textarea></div><div class="prompt-actions"><div id="action-row-global-left" class="action-row-left"><button id="xai-settings-btn" class="xai-btn" title="Open Settings Menu">${UIUtils.getIcon(APP_CONFIG.ICONS.settings, 18)}</button><button id="xai-fav-btn" class="xai-btn" title="Favorite Prompts (Saved per selected mode)">${UIUtils.getIcon(APP_CONFIG.ICONS.star, 18)}</button><button class="xai-btn" id="btn-master-action" data-value="gen_image" title="Select Generation Action"><span id="label-master-action">▨ Image</span><span class="ar-dropdown-icon">▼</span></button><button id="btn-setting-ar" class="xai-btn" title="Select Aspect Ratio"><div id="ar-selected-icon"></div><span id="ar-selected-text">Auto</span><span class="ar-dropdown-icon">▼</span></button><button id="xai-api-res-img" class="xai-btn" data-value="2k" title="Toggle Image Resolution">2K Pro</button><button id="xai-api-res-vid" class="xai-btn" data-value="720p" title="Toggle Video Resolution">720p</button><button class="xai-btn" id="btn-setting-batch" data-value="2" title="Images per batch"><span id="label-setting-batch">2</span><span class="ar-dropdown-icon">▼</span></button><button class="xai-btn" id="btn-setting-duration" data-value="5" title="Video duration"><span id="label-setting-duration">5s</span><span class="ar-dropdown-icon">▼</span></button><div class="xai-btn" id="btn-setting-loops" title="Auto repeat loops"><span style="opacity:0.7;margin-right:4px;">↻</span><input type="number" id="setting-loops" value="0" min="0" max="999" class="input-loop"></div></div><div class="action-row-right"><div id="xai-api-status" class="w-100 d-flex justify-end" style="font-size:14px; font-weight:500; padding-right:8px;" title="Current API Status"><span class="text-muted">Ready</span></div><button id="xai-api-generate" class="xai-btn xai-btn--circle-lg xai-btn--run" title="Start Generation"><div class="btn-content flex-center">↑</div></button><button id="xai-api-save-ref" class="xai-btn xai-btn--success d-none" title="Save Ref Prompt and Exit">Save & Exit</button></div></div></div></div></div><div class="col-right" id="col-right-dropzone"><div class="col-right-inner"><div class="panel"><div class="panel-header"><button id="btn-collapse-right" class="btn-collapse" aria-expanded="true" title="Toggle Right Panel"></button><button id="xai-upload-placeholder" class="xai-btn" title="Click to upload media or Drag & Drop"><span class="upload-label-main">Add Media</span></button><span id="xai-ref-counter" class="metric-pill" title="Active reference count">0</span><button id="xai-ref-mode-toggle" class="xai-btn" style="width:70px; padding:0;" title="Toggle Queue/Multi mode">Multi</button></div><input type="file" id="xai-api-file" accept="image/*, video/mp4, video/webm" multiple class="d-none"><div id="xai-ref-list"></div></div></div></div><dialog id="xai-lightbox" class="xai-lightbox-dialog"><div id="xai-lightbox-inner" class="lightbox-frame"><div id="xai-lightbox-stage" class="lightbox-stage"><a id="xai-lightbox-dl" href="#" download="" target="_blank" class="dl-abs-btn" title="Download Lightbox Image/Video">${UIUtils.getDlIcon(20)}</a></div></div></dialog><dialog id="xai-fav-dialog" class="xai-custom-dialog"><div class="dialog-inner" style="max-width:1600px; width:95vw; border-radius:24px; padding:4px;"><div id="fav-list-container" class="dialog-content"></div></div></dialog><div id="popover-action" popover="auto" class="xai-custom-popover"></div><div id="popover-ar" popover="auto" class="xai-custom-popover"></div><div id="popover-batch" popover="auto" class="xai-custom-popover"></div><div id="popover-duration" popover="auto" class="xai-custom-popover"></div><div id="popover-settings" popover="auto" class="xai-custom-popover">${buildSettingsPopoverHtml()}</div>${buildConfirmDialogHtml()}</div>`;
  443.  
  444. const originalTitle = document.title || "xAI Advanced UI";
  445. const shuffleInPlace = (list) => {
  446. for (let i = list.length - 1; i > 0; i--) {
  447. const j = Math.floor(Math.random() * (i + 1));
  448. [list[i], list[j]] = [list[j], list[i]];
  449. }
  450. return list;
  451. };
  452. const PlaceholderPalette = {
  453. deck: [],
  454. lastName: '',
  455. _gradient({ spot, mid, bg }) {
  456. return `radial-gradient(circle at 30% 22%, ${spot} 0%, ${mid} 46%, ${bg} 100%)`;
  457. },
  458. next() {
  459. if (this.deck.length === 0) {
  460. this.deck = shuffleInPlace(APP_CONFIG.PLACEHOLDER_SWATCHES.map(swatch => ({ ...swatch })));
  461. if (this.deck[0]?.name === this.lastName && this.deck.length > 1) [this.deck[0], this.deck[1]] = [this.deck[1], this.deck[0]];
  462. }
  463. const swatch = this.deck.shift() || APP_CONFIG.PLACEHOLDER_SWATCHES[0];
  464. this.lastName = swatch.name;
  465. return { ...swatch, gradient: this._gradient(swatch) };
  466. }
  467. };
  468. const TitleState = {
  469. markDone() {
  470. STATE.pendingDoneNotice = document.hidden || !document.hasFocus();
  471. this.sync();
  472. },
  473. clearDone() {
  474. if (!STATE.pendingDoneNotice) return;
  475. STATE.pendingDoneNotice = false;
  476. this.sync();
  477. },
  478. sync(progressText = '') {
  479. if (STATE.isGenerating) {
  480. setDocumentTitle(progressText ? `[${progressText}] ${originalTitle}` : originalTitle);
  481. return;
  482. }
  483. if (STATE.pendingDoneNotice && (document.hidden || !document.hasFocus())) {
  484. setDocumentTitle(`[Done] ${originalTitle}`);
  485. return;
  486. }
  487. setDocumentTitle(originalTitle);
  488. },
  489. handleTabActive() {
  490. if (document.hidden || !document.hasFocus()) return;
  491. this.clearDone();
  492. }
  493. };
  494.  
  495. const createQueueWakeSignal = () => {
  496. let version = 0;
  497. let deferred = Promise.withResolvers();
  498. return {
  499. get version() { return version; },
  500. wait(seenVersion = version) {
  501. return seenVersion === version ? deferred.promise : Promise.resolve(version);
  502. },
  503. notify() {
  504. version++;
  505. deferred.resolve(version);
  506. deferred = Promise.withResolvers();
  507. }
  508. };
  509. };
  510. let queueWake = createQueueWakeSignal(), _configSaveTimer = null, _queueWakeTimer = null, DOM = {};
  511. const wakeUpQueue = () => queueWake.notify();
  512. const configKeys = new Set(Object.keys(APP_CONFIG.USER_DEFAULTS));
  513. const getConfigSnapshot = () => Object.fromEntries([...configKeys].map(key => [key, STATE[key]]));
  514. const IMPORT_PROMPT_KEYS = Object.keys(DEFAULT_PROMPTS);
  515. const IMPORT_ACTIONS = new Set(IMPORT_PROMPT_KEYS);
  516. const IMPORT_REF_MODES = new Set(['multi', 'queue']);
  517. const IMPORT_RES_IMG = new Set(['1k', '2k']);
  518. const IMPORT_RES_VID = new Set(['480p', '720p']);
  519. const IMPORT_ARS = new Set(APP_CONFIG.ASPECT_RATIOS.map(a => a.label.trim()));
  520. const RETRY_PROMPT_PAD_RE = /[\u200B-\u200D\uFEFF]/g;
  521. const clampInt = (value, min, max, fallback) => {
  522. const parsed = Number.parseInt(value, 10);
  523. return Number.isFinite(parsed) ? Math.min(max, Math.max(min, parsed)) : fallback;
  524. };
  525. const pickAllowed = (value, allowed, fallback) => allowed.has(value) ? value : fallback;
  526. const parseJsonSafe = (raw, fallback = null) => {
  527. if (typeof raw !== 'string' || raw === '') return fallback;
  528. try { return JSON.parse(raw); } catch (e) { return fallback; }
  529. };
  530. const cloneSerializable = (value, fallback = null) => {
  531. if (value === undefined) return fallback;
  532. if (typeof structuredClone === 'function') {
  533. try { return structuredClone(value); } catch (e) {}
  534. }
  535. try { return JSON.parse(JSON.stringify(value)); } catch (e) { return fallback; }
  536. };
  537. const normalizePromptDraft = (value, fallback = '') => typeof value === 'string' ? value : fallback;
  538. const sanitizePromptText = (value, fallback = '') => {
  539. const clean = typeof value === 'string' ? value.replace(RETRY_PROMPT_PAD_RE, '').trim() : '';
  540. if (clean) return clean;
  541. return typeof fallback === 'string' ? fallback.replace(RETRY_PROMPT_PAD_RE, '').trim() : '';
  542. };
  543. const sanitizePromptStore = (raw, fallback = DEFAULT_PROMPTS) => {
  544. const base = raw && typeof raw === 'object' && !Array.isArray(raw) ? raw : {};
  545. return Object.fromEntries(IMPORT_PROMPT_KEYS.map(key => [key, normalizePromptDraft(base[key], fallback[key] || '')]));
  546. };
  547. const sanitizeFavPromptStore = (raw, fallback = DEFAULT_FAV_PROMPTS) => {
  548. const base = raw && typeof raw === 'object' && !Array.isArray(raw) ? raw : {};
  549. return Object.fromEntries(IMPORT_PROMPT_KEYS.map(key => [key, Array.isArray(base[key]) ? base[key].filter(v => typeof v === 'string') : [...(fallback[key] || [])]]));
  550. };
  551. const sanitizeRefPromptStore = (raw, fallback = {}) => {
  552. if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return { ...fallback };
  553. return Object.fromEntries(Object.entries(raw).filter(([, prompt]) => typeof prompt === 'string').map(([id, prompt]) => [String(id), prompt]));
  554. };
  555. const sanitizeIdListStore = (raw) => Array.isArray(raw) ? [...new Set(raw.map(id => String(id)).filter(Boolean))] : [];
  556. const sanitizeRefDataStore = (raw) => Array.isArray(raw)
  557. ? raw.filter(entry => entry && typeof entry === 'object').map(entry => ({ id: String(entry.id), active: entry.active !== false }))
  558. : null;
  559. const sanitizePendingVideosStore = (raw) => {
  560. if (!Array.isArray(raw)) return [];
  561. const deduped = new Map();
  562. raw.filter(entry => entry && typeof entry === 'object' && typeof entry.reqId === 'string').forEach(entry => {
  563. deduped.set(entry.reqId, {
  564. reqId: entry.reqId,
  565. prompt: sanitizePromptText(entry.prompt),
  566. timestamp: clampInt(entry.timestamp, 0, Number.MAX_SAFE_INTEGER, Date.now())
  567. });
  568. });
  569. return [...deduped.values()];
  570. };
  571. const sanitizeStoredConfig = (raw) => {
  572. const defaults = APP_CONFIG.USER_DEFAULTS;
  573. const stored = raw && typeof raw === 'object' && !Array.isArray(raw) ? raw : {};
  574. const retryMinMs = clampInt(stored.retryMinMs, 500, 60000, defaults.retryMinMs);
  575. const retryMaxMs = clampInt(stored.retryMaxMs, retryMinMs, 60000, Math.max(defaults.retryMaxMs, retryMinMs));
  576. return {
  577. action: pickAllowed(stored.action, IMPORT_ACTIONS, defaults.action),
  578. currentAr: pickAllowed(typeof stored.currentAr === 'string' ? stored.currentAr.trim() : '', IMPORT_ARS, defaults.currentAr),
  579. batchSize: String(clampInt(stored.batchSize, 1, 10, clampInt(defaults.batchSize, 1, 10, 2))),
  580. duration: String(clampInt(stored.duration, 1, 15, clampInt(defaults.duration, 1, 15, 5))),
  581. loops: String(clampInt(stored.loops, 0, 999, clampInt(defaults.loops, 0, 999, 0))),
  582. resImg: pickAllowed(stored.resImg, IMPORT_RES_IMG, defaults.resImg),
  583. resVid: pickAllowed(stored.resVid, IMPORT_RES_VID, defaults.resVid),
  584. refMode: pickAllowed(stored.refMode, IMPORT_REF_MODES, defaults.refMode),
  585. concurrentSessions: clampInt(stored.concurrentSessions, 1, APP_CONFIG.LIMITS.MAX_CONCURRENT_SESSIONS, defaults.concurrentSessions),
  586. rateLimitDelay: clampInt(stored.rateLimitDelay, 0, 300, defaults.rateLimitDelay),
  587. retryMinMs,
  588. retryMaxMs,
  589. autoRetryVideo: typeof stored.autoRetryVideo === 'boolean' ? stored.autoRetryVideo : defaults.autoRetryVideo,
  590. referenceARTrick: typeof stored.referenceARTrick === 'boolean' ? stored.referenceARTrick : defaults.referenceARTrick,
  591. ecoMode: typeof stored.ecoMode === 'boolean' ? stored.ecoMode : defaults.ecoMode,
  592. autoDownload: typeof stored.autoDownload === 'boolean' ? stored.autoDownload : defaults.autoDownload,
  593. leftCollapsed: typeof stored.leftCollapsed === 'boolean' ? stored.leftCollapsed : defaults.leftCollapsed,
  594. rightCollapsed: typeof stored.rightCollapsed === 'boolean' ? stored.rightCollapsed : defaults.rightCollapsed,
  595. leftWidth: clampInt(stored.leftWidth, 320, 2000, defaults.leftWidth),
  596. rightWidth: clampInt(stored.rightWidth, 240, 2000, defaults.rightWidth),
  597. imgBaseMs: clampInt(stored.imgBaseMs, 1500, 10000, defaults.imgBaseMs)
  598. };
  599. };
  600.  
  601. const STATE_EFFECTS = {
  602. action: () => { if (STATE.isMounted) updateActionUI(); },
  603. isGenerating: (val) => {
  604. if (!STATE.isMounted) return;
  605. toggleGenerateButton(val);
  606. updateStatusUI();
  607. if (val) STATE.pendingDoneNotice = false;
  608. if (!val) {
  609. RefPayloadCache.clear();
  610. BlobCache.trim({ thumb: getThumbCacheLimit(), full: getFullCacheLimit() });
  611. DOM.historyScroller?.scheduleRender?.();
  612. }
  613. },
  614. refMode: () => { if (STATE.isMounted) renderRefMode(); },
  615. currentOrder: () => {
  616. if (!STATE.isMounted) return;
  617. NativeGridManager.update(STATE.currentOrder, STATE.items, 'current');
  618. DBQueue.addAppWrite('currentOrder', sanitizeIdListStore(STATE.currentOrder.filter(id => {
  619. const item = STATE.items.get(String(id));
  620. return item && !Pipeline.isTransientItem(item);
  621. })));
  622. },
  623. historyOrder: () => {
  624. if (!STATE.isMounted) return;
  625. DOM.historyScroller?.update(STATE.historyOrder, STATE.items);
  626. runBg(updateHistoryMetrics);
  627. },
  628. currentAr: () => { if (STATE.isMounted) NativeGridManager.update(STATE.currentOrder, STATE.items, 'current'); },
  629. ecoMode: (val) => {
  630. if (!STATE.isMounted) return;
  631. document.body.classList.toggle('eco-mode', val);
  632. applyMemoryPressureProfile(val ? 'eco-on' : 'eco-off');
  633. },
  634. loops: () => {
  635. if (!STATE.isMounted || !STATE.isGenerating) return;
  636. clearTimeout(_queueWakeTimer);
  637. _queueWakeTimer = setTimeout(wakeUpQueue, 300);
  638. updateStatusUI();
  639. },
  640. concurrentSessions: () => STATE_EFFECTS.loops(),
  641. leftCollapsed: (val) => { if (STATE.isMounted) { DOM.colLeft.classList.toggle('is-collapsed', val); document.getElementById('btn-collapse-left').setAttribute('aria-expanded', !val); requestAnimationFrame(() => { syncLayoutWidths(); NativeGridManager.syncCurrentLayoutMetrics?.(); }); } },
  642. rightCollapsed: (val) => { if (STATE.isMounted) { DOM.colRight.classList.toggle('is-collapsed', val); document.getElementById('btn-collapse-right').setAttribute('aria-expanded', !val); requestAnimationFrame(() => { syncLayoutWidths(); NativeGridManager.syncCurrentLayoutMetrics?.(); }); } }
  643. };
  644.  
  645. const STATE = new Proxy({}, {
  646. set(target, prop, value) {
  647. if (target[prop] === value) return true; target[prop] = value; STATE_EFFECTS[prop]?.(value);
  648. if (configKeys.has(prop)) { clearTimeout(_configSaveTimer); _configSaveTimer = setTimeout(() => localStorage.setItem(APP_CONFIG.STORAGE.CONFIG_KEY, JSON.stringify(getConfigSnapshot())), 250); }
  649. return true;
  650. }
  651. });
  652.  
  653. const JobManager = { tasks: new Map(), taskPromises: new Set(), progress: new Map() };
  654.  
  655. const createInitialState = () => ({
  656. isMounted: false,
  657. items: new Map(),
  658. refOrder: [],
  659. currentOrder: [],
  660. historyOrder: [],
  661. isGenerating: false,
  662. activeLightboxId: null,
  663. generationToken: 0,
  664. activeRefPromptId: null,
  665. activeRefPromptAction: null,
  666. activeRefPromptDraft: '',
  667. successCount: 0,
  668. prompts: sanitizePromptStore(DEFAULT_PROMPTS),
  669. promptDrafts: sanitizePromptStore(DEFAULT_PROMPTS),
  670. favPrompts: sanitizeFavPromptStore(DEFAULT_FAV_PROMPTS),
  671. refPrompts: {},
  672. pendingVideos: [],
  673. pendingDoneNotice: false
  674. });
  675.  
  676. function resetState() {
  677. const initialState = createInitialState();
  678. Object.assign(initialState, sanitizeStoredConfig(parseJsonSafe(localStorage.getItem(APP_CONFIG.STORAGE.CONFIG_KEY), {})));
  679. Object.assign(STATE, initialState); Object.keys(DOM).forEach(k => delete DOM[k]); JobManager.tasks.clear(); JobManager.taskPromises.clear(); JobManager.progress.clear();
  680. queueWake = createQueueWakeSignal();
  681. }
  682. resetState();
  683. function sanitizeImportedState(raw) {
  684. if (!raw || typeof raw !== 'object' || Array.isArray(raw)) throw new Error('Invalid import payload');
  685.  
  686. const prompts = { ...STATE.prompts };
  687. const promptDrafts = { ...STATE.promptDrafts };
  688. if (raw.prompts && typeof raw.prompts === 'object') IMPORT_PROMPT_KEYS.forEach(key => {
  689. if (typeof raw.prompts[key] === 'string') {
  690. prompts[key] = raw.prompts[key];
  691. promptDrafts[key] = raw.prompts[key];
  692. }
  693. });
  694.  
  695. const refPrompts = raw.refPrompts && typeof raw.refPrompts === 'object' ? {} : { ...STATE.refPrompts };
  696. if (raw.refPrompts && typeof raw.refPrompts === 'object') Object.entries(raw.refPrompts).forEach(([id, prompt]) => { if (typeof prompt === 'string') refPrompts[String(id)] = prompt; });
  697.  
  698. const favPrompts = Object.fromEntries(IMPORT_PROMPT_KEYS.map(key => [key, Array.isArray(STATE.favPrompts[key]) ? [...STATE.favPrompts[key]] : []]));
  699. if (raw.favPrompts && typeof raw.favPrompts === 'object') {
  700. IMPORT_PROMPT_KEYS.forEach(key => {
  701. if (Array.isArray(raw.favPrompts[key])) favPrompts[key] = raw.favPrompts[key].filter(v => typeof v === 'string');
  702. });
  703. }
  704.  
  705. const retryMinMs = clampInt(raw.retryMinMs, 500, 60000, STATE.retryMinMs);
  706. const retryMaxMs = clampInt(raw.retryMaxMs, retryMinMs, 60000, Math.max(STATE.retryMaxMs, retryMinMs));
  707.  
  708. return {
  709. action: pickAllowed(raw.action, IMPORT_ACTIONS, STATE.action),
  710. currentAr: pickAllowed(typeof raw.currentAr === 'string' ? raw.currentAr.trim() : '', IMPORT_ARS, STATE.currentAr),
  711. batchSize: String(clampInt(raw.batchSize, 1, 10, clampInt(STATE.batchSize, 1, 10, 2))),
  712. duration: String(clampInt(raw.duration, 1, 15, clampInt(STATE.duration, 1, 15, 5))),
  713. loops: String(clampInt(raw.loops, 0, 999, clampInt(STATE.loops, 0, 999, 0))),
  714. resImg: pickAllowed(raw.resImg, IMPORT_RES_IMG, STATE.resImg),
  715. resVid: pickAllowed(raw.resVid, IMPORT_RES_VID, STATE.resVid),
  716. concurrentSessions: clampInt(raw.concurrentSessions, 1, APP_CONFIG.LIMITS.MAX_CONCURRENT_SESSIONS, STATE.concurrentSessions),
  717. rateLimitDelay: clampInt(raw.rateLimitDelay, 0, 300, STATE.rateLimitDelay),
  718. retryMinMs,
  719. retryMaxMs,
  720. autoRetryVideo: typeof raw.autoRetryVideo === 'boolean' ? raw.autoRetryVideo : STATE.autoRetryVideo,
  721. referenceARTrick: typeof raw.referenceARTrick === 'boolean' ? raw.referenceARTrick : STATE.referenceARTrick,
  722. refMode: pickAllowed(raw.refMode, IMPORT_REF_MODES, STATE.refMode),
  723. ecoMode: typeof raw.ecoMode === 'boolean' ? raw.ecoMode : STATE.ecoMode,
  724. autoDownload: typeof raw.autoDownload === 'boolean' ? raw.autoDownload : STATE.autoDownload,
  725. leftCollapsed: typeof raw.leftCollapsed === 'boolean' ? raw.leftCollapsed : STATE.leftCollapsed,
  726. rightCollapsed: typeof raw.rightCollapsed === 'boolean' ? raw.rightCollapsed : STATE.rightCollapsed,
  727. leftWidth: clampInt(raw.leftWidth, 320, 2000, STATE.leftWidth),
  728. rightWidth: clampInt(raw.rightWidth, 240, 2000, STATE.rightWidth),
  729. prompts,
  730. promptDrafts,
  731. refPrompts,
  732. favPrompts
  733. };
  734. }
  735.  
  736. class BlobLRUCache {
  737. constructor(maxFn) { this.getMax = maxFn; this.cache = new Map(); this.inFlight = new Map(); }
  738. _touch(key) {
  739. const entry = this.cache.get(key);
  740. if (!entry) return null;
  741. this.cache.delete(key);
  742. this.cache.set(key, entry);
  743. return entry;
  744. }
  745. async getUrl(id, type) {
  746. const key = `${id}_${type}`;
  747. const cached = this._touch(key);
  748. if (cached) return cached.url;
  749. if (this.inFlight.has(key)) return this.inFlight.get(key);
  750. const { promise, resolve } = Promise.withResolvers();
  751. this.inFlight.set(key, promise);
  752. (async () => {
  753. try {
  754. const blob = await OPFS.read(id, type);
  755. if (blob) { const url = URL.createObjectURL(blob); this.cache.set(key, { url, pins: 0 }); this.trim(); resolve(url); }
  756. else resolve(null);
  757. } catch(e) { resolve(null); } finally { this.inFlight.delete(key); }
  758. })();
  759. return promise;
  760. }
  761. async retain(id, type) {
  762. const key = `${id}_${type}`;
  763. const url = await this.getUrl(id, type);
  764. const entry = this._touch(key);
  765. if (entry) entry.pins = (entry.pins || 0) + 1;
  766. return url;
  767. }
  768. release(id, type) {
  769. const entry = this.cache.get(`${id}_${type}`);
  770. if (entry) entry.pins = Math.max(0, (entry.pins || 0) - 1);
  771. }
  772. delete(id) {
  773. [`${id}_thumb`, `${id}_full`].forEach(k => {
  774. if (this.cache.has(k)) { URL.revokeObjectURL(this.cache.get(k).url); this.cache.delete(k); }
  775. });
  776. }
  777. trim(forceLimit = null) {
  778. const limit = forceLimit !== null ? forceLimit : this.getMax();
  779. while (this.cache.size > limit) {
  780. const firstKey = [...this.cache.entries()].find(([, entry]) => !(entry.pins > 0))?.[0];
  781. if (!firstKey) break;
  782. URL.revokeObjectURL(this.cache.get(firstKey).url);
  783. this.cache.delete(firstKey);
  784. }
  785. }
  786. clear() { this.cache.forEach(v => URL.revokeObjectURL(v.url)); this.cache.clear(); this.inFlight.clear(); }
  787. }
  788.  
  789. const BlobCache = {
  790. thumb: new BlobLRUCache(() => getThumbCacheLimit()),
  791. full: new BlobLRUCache(() => getFullCacheLimit()),
  792. delete(id) { this.thumb.delete(id); this.full.delete(id); },
  793. retain(id, type) { return this[type]?.retain(id, type); },
  794. release(id, type) { this[type]?.release(id, type); },
  795. trim(limit = null) {
  796. if (typeof limit === 'number') {
  797. this.thumb.trim(limit);
  798. this.full.trim(limit);
  799. return;
  800. }
  801. this.thumb.trim(limit?.thumb ?? null);
  802. this.full.trim(limit?.full ?? null);
  803. },
  804. clear() { this.thumb.clear(); this.full.clear(); }
  805. };
  806. const MediaWarmPool = {
  807. limit: 2,
  808. order: [],
  809. pending: new Map(),
  810. _splitKey(key) {
  811. const idx = key.lastIndexOf('_');
  812. return idx === -1 ? [key, 'full'] : [key.slice(0, idx), key.slice(idx + 1)];
  813. },
  814. _touch(key) {
  815. const idx = this.order.indexOf(key);
  816. if (idx !== -1) this.order.splice(idx, 1);
  817. this.order.push(key);
  818. },
  819. _trim() {
  820. while (this.order.length > this.limit) {
  821. const key = this.order.shift();
  822. if (!key) continue;
  823. const [id, type] = this._splitKey(key);
  824. BlobCache.release(id, type);
  825. }
  826. },
  827. async warm(item) {
  828. if (!item || item.type !== 'image' || item.isPending || STATE.ecoMode || document.body.classList.contains('auto-eco')) return null;
  829. const id = String(item.refSourceId || item.id);
  830. const key = `${id}_full`;
  831. if (this.pending.has(key)) return this.pending.get(key);
  832. if (this.order.includes(key)) {
  833. this._touch(key);
  834. return BlobCache.full.getUrl(id, 'full');
  835. }
  836. const promise = BlobCache.full.retain(id, 'full').then(url => {
  837. if (url) { this._touch(key); this._trim(); }
  838. return url;
  839. }).finally(() => this.pending.delete(key));
  840. this.pending.set(key, promise);
  841. return promise;
  842. },
  843. releaseAll() {
  844. while (this.order.length > 0) {
  845. const key = this.order.pop();
  846. if (!key) continue;
  847. const [id, type] = this._splitKey(key);
  848. BlobCache.release(id, type);
  849. }
  850. this.pending.clear();
  851. }
  852. };
  853.  
  854. const RefPayloadCache = {
  855. dataUrls: new Map(),
  856. maxEntries() { return isMemoryConstrainedMode() ? 2 : 8; },
  857. _touch(key) {
  858. const entry = this.dataUrls.get(key);
  859. if (!entry) return null;
  860. this.dataUrls.delete(key);
  861. this.dataUrls.set(key, entry);
  862. return entry;
  863. },
  864. trim() {
  865. const limit = this.maxEntries();
  866. while (this.dataUrls.size > limit) {
  867. const firstKey = [...this.dataUrls.entries()].find(([, entry]) => !entry?.pending)?.[0] || this.dataUrls.keys().next().value;
  868. if (!firstKey) break;
  869. this.dataUrls.delete(firstKey);
  870. }
  871. },
  872. async get(item) {
  873. if (!item) return null;
  874. if (!item.isUploadedRef && item.originalUrl) return item.originalUrl;
  875. const key = String(item.id);
  876. const cached = this._touch(key);
  877. if (cached) return cached.promise;
  878. const entry = {
  879. pending: true,
  880. promise: (async () => {
  881. const blob = await OPFS.read(item.id, 'full');
  882. if (!blob) return item.originalUrl || null;
  883. return MediaUtils.fileToBase64(blob, item.mimeType || (item.type === 'video' ? 'video/mp4' : 'image/jpeg'));
  884. })()
  885. };
  886. this.dataUrls.set(key, entry);
  887. const result = await entry.promise;
  888. entry.pending = false;
  889. if (!result) this.dataUrls.delete(key);
  890. else this.trim();
  891. return result;
  892. },
  893. delete(id) { this.dataUrls.delete(String(id)); },
  894. clear() { this.dataUrls.clear(); }
  895. };
  896.  
  897. const Pipeline = {
  898. normalizePrompt(value, fallback = '') { return sanitizePromptText(value, fallback); },
  899. isTransientItem(item) { return !!(item?.persist === false || item?.isPending || String(item?.id || '').startsWith('pending-') || item?.filename === 'Pending...'); },
  900. isPhantomMeta(meta) { return String(meta?.id || '').startsWith('pending-') || meta?.filename === 'Pending...'; },
  901. makeBatchTimestamp(base, index, total) { return base + (total - index); }
  902. };
  903.  
  904. const Store = {
  905. commitNewItem(itemData, targetOrOptions = null, replacePlaceholderId = null) {
  906. const options = targetOrOptions && typeof targetOrOptions === 'object' && !Array.isArray(targetOrOptions)
  907. ? targetOrOptions
  908. : { targetArrayName: targetOrOptions, replacePlaceholderId };
  909. const item = { ...itemData, id: String(itemData.id), timestamp: itemData.timestamp || Date.now(), persist: options.persist ?? itemData.persist ?? !itemData.isPending };
  910. STATE.items.set(String(item.id), item);
  911. if (options.targetArrayName && STATE[options.targetArrayName]) {
  912. const arr = STATE[options.targetArrayName];
  913. const idx = options.replacePlaceholderId ? arr.indexOf(options.replacePlaceholderId) : -1;
  914. if (idx !== -1) { arr[idx] = item.id; this.removeItem(options.replacePlaceholderId); } else arr.push(item.id);
  915. STATE[options.targetArrayName] =[...arr];
  916. }
  917. if (item.persist !== false) DBQueue.add(item);
  918. return item;
  919. },
  920. addItem(item) { STATE.items.set(String(item.id), item); },
  921. removeItem(id) {
  922. const key = String(id);
  923. STATE.items.delete(key);
  924. DOM.historyScroller?.measurements?.delete?.(key);
  925. },
  926. prependHistory(ids) {
  927. if (!ids?.length) return;
  928. const orderedIds = ids.map(String), seen = new Set(orderedIds);
  929. STATE.historyOrder = [...orderedIds, ...STATE.historyOrder.filter(id => !seen.has(String(id)))];
  930. },
  931. clearCurrentTransient(ids) {
  932. if (!ids?.length) return;
  933. const staleIds = ids.map(String), staleSet = new Set(staleIds);
  934. STATE.currentOrder = STATE.currentOrder.filter(id => !staleSet.has(String(id)));
  935. staleIds.forEach(id => this.removeItem(id));
  936. },
  937. getRefItems() { return STATE.refOrder.map(id => STATE.items.get(id)).filter(Boolean); }
  938. };
  939.  
  940. let wipePromise = null, lastWipeTime = 0;
  941. async function nuclearWipe() {
  942. if (wipePromise) return wipePromise;
  943. if (Date.now() - lastWipeTime < 3000) { await sleep(3000 - (Date.now() - lastWipeTime)); return; }
  944. lastWipeTime = Date.now();
  945. addLog('INFO', 'Executing nuclear cookie wipe...');
  946. wipePromise = (async () => {
  947. const clearCookies = (url) => new Promise(res => { GM_cookie.list({ url }, (cookies, err) => { if (err || !cookies?.length) return res(); Promise.allSettled(cookies.map(c => new Promise(r => GM_cookie.delete({ url, name: c.name }, r)))).then(res); }); });
  948. await Promise.allSettled([clearCookies(window.location.href), clearCookies('https://x.ai')]);
  949. document.cookie.split(';').forEach(c => { const n = c.split('=')[0].trim();['.x.ai', 'console.x.ai', ''].forEach(d => {['/', '/playground/imagine', ''].forEach(p => { document.cookie = `${n}=;max-age=0;path=${p}${d ? ';domain=' + d : ''}`; }); }); });
  950. try { await fetch('https://console.x.ai/playground/imagine', { credentials: 'include', cache: 'no-store' }); } catch(e) {}
  951. })();
  952. await wipePromise; wipePromise = null;
  953. }
  954.  
  955. const OPFS = {
  956. _dirHandle: null,
  957. _fileHandles: new Map(),
  958. async initDir() {
  959. if (!this._dirHandle) {
  960. const root = await navigator.storage.getDirectory();
  961. this._dirHandle = await root.getDirectoryHandle(APP_CONFIG.STORAGE.OPFS_DIR, { create: true });
  962. }
  963. return this._dirHandle;
  964. },
  965. async getFileHandle(name, create = false) {
  966. if (this._fileHandles.has(name)) return this._fileHandles.get(name);
  967. const handle = await (await this.initDir()).getFileHandle(name, { create });
  968. this._fileHandles.set(name, handle);
  969. return handle;
  970. },
  971. async write(id, type, blob) {
  972. let w;
  973. try {
  974. const fileHandle = await this.getFileHandle(`${id}_${type}`, true);
  975. w = await fileHandle.createWritable({ keepExistingData: false });
  976. await w.write(blob);
  977. } catch (e) { addLog('ERROR', 'OPFS Write', e); } finally { if (w) await w.close().catch(()=>{}); }
  978. },
  979. async read(id, type) { try { return await (await this.getFileHandle(`${id}_${type}`)).getFile(); } catch (e) { return null; } },
  980. async del(id) {
  981. try {
  982. const dir = await this.initDir();
  983. await Promise.allSettled(['full', 'thumb'].map(async type => {
  984. const name = `${id}_${type}`;
  985. this._fileHandles.delete(name);
  986. await dir.removeEntry(name).catch(()=>{});
  987. }));
  988. } catch (e) { addLog('WARN', 'OPFS Delete', { id, error: e?.message || e }); }
  989. },
  990. async clear() {
  991. try {
  992. this._fileHandles.clear();
  993. await (await navigator.storage.getDirectory()).removeEntry(APP_CONFIG.STORAGE.OPFS_DIR, { recursive: true }).catch(()=>{});
  994. this._dirHandle = null;
  995. } catch (e) { addLog('WARN', 'OPFS Clear', { error: e?.message || e }); }
  996. }
  997. };
  998.  
  999. const StorageDB = {
  1000. db: null,
  1001. async init() {
  1002. if (this.db) return this.db;
  1003. return new Promise((resolve, reject) => {
  1004. const req = indexedDB.open(APP_CONFIG.STORAGE.DB_NAME, APP_CONFIG.STORAGE.DB_VERSION);
  1005. req.onupgradeneeded = e => {
  1006. const db = e.target.result;
  1007. if (!db.objectStoreNames.contains(APP_CONFIG.STORAGE.STORE_META)) db.createObjectStore(APP_CONFIG.STORAGE.STORE_META, { keyPath: 'id' });
  1008. if (!db.objectStoreNames.contains(APP_CONFIG.STORAGE.STORE_DATA)) db.createObjectStore(APP_CONFIG.STORAGE.STORE_DATA);
  1009. };
  1010. req.onsuccess = () => { this.db = req.result; resolve(this.db); }; req.onerror = () => reject(req.error);
  1011. });
  1012. },
  1013. async _tx(stores, mode, cb) { const db = await this.init(); return new Promise((resolve, reject) => { const tx = db.transaction(stores, mode); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); cb(tx); }); },
  1014. async loadData(key) {
  1015. const db = await this.init();
  1016. return new Promise(r => {
  1017. const req = db.transaction(APP_CONFIG.STORAGE.STORE_DATA).objectStore(APP_CONFIG.STORAGE.STORE_DATA).get(key);
  1018. req.onsuccess = () => r(req.result ?? null);
  1019. req.onerror = () => r(null);
  1020. });
  1021. },
  1022. async saveHistoryItemsBulk(items) { return this._tx([APP_CONFIG.STORAGE.STORE_META], 'readwrite', tx => { const store = tx.objectStore(APP_CONFIG.STORAGE.STORE_META); items.forEach(i => store.put(i)); }); },
  1023. async loadAllMeta() {
  1024. const metas = await new Promise(async r => { const db = await this.init(); const req = db.transaction(APP_CONFIG.STORAGE.STORE_META).objectStore(APP_CONFIG.STORAGE.STORE_META).getAll(); req.onsuccess = () => r(req.result ||[]); });
  1025. return metas.map(m => ({ ...m, downloaded: Boolean(m.downloaded), lqip: m.lqip || null, isUploadedRef: Boolean(m.isUploadedRef), prompt: Pipeline.normalizePrompt(m.prompt) })).sort((a, b) => b.timestamp - a.timestamp);
  1026. },
  1027. async deleteItem(id) { BlobCache.delete(id); RefPayloadCache.delete(id); await OPFS.del(id); return this._tx([APP_CONFIG.STORAGE.STORE_META], 'readwrite', tx => tx.objectStore(APP_CONFIG.STORAGE.STORE_META).delete(id)); },
  1028. async deleteItemsBulk(ids) { if (!ids?.length) return; await Promise.allSettled(ids.map(id => { BlobCache.delete(id); RefPayloadCache.delete(id); return OPFS.del(id); })); return this._tx([APP_CONFIG.STORAGE.STORE_META], 'readwrite', tx => { const store = tx.objectStore(APP_CONFIG.STORAGE.STORE_META); ids.forEach(id => store.delete(id)); }); },
  1029. async clear() {
  1030. BlobCache.clear();
  1031. RefPayloadCache.clear();
  1032. await OPFS.clear();
  1033. await this._tx([APP_CONFIG.STORAGE.STORE_META, APP_CONFIG.STORAGE.STORE_DATA], 'readwrite', tx => {
  1034. tx.objectStore(APP_CONFIG.STORAGE.STORE_META).clear();
  1035. tx.objectStore(APP_CONFIG.STORAGE.STORE_DATA).clear();
  1036. });
  1037. this.db?.close?.();
  1038. this.db = null;
  1039. }
  1040. };
  1041.  
  1042. const DBQueue = {
  1043. _appWrites: new Map(), _appWriteVersions: new Map(), _pendingItems: new Map(), _deletedIds: new Set(), _isFlushing: false, _flushGeneration: 0,
  1044. _serializeItem(item) {
  1045. if (!item || Pipeline.isTransientItem(item)) return null;
  1046. return {
  1047. id: String(item.id),
  1048. timestamp: item.timestamp,
  1049. type: item.type,
  1050. mimeType: item.mimeType,
  1051. ratio: item.ratio || 1,
  1052. originalUrl: item.type === 'video' ? item.originalUrl : null,
  1053. filename: item.filename,
  1054. downloaded: item.downloaded || false,
  1055. prompt: Pipeline.normalizePrompt(item.prompt),
  1056. lqip: item.lqip,
  1057. isUploadedRef: item.isUploadedRef || false
  1058. };
  1059. },
  1060. add(item) {
  1061. const serialized = this._serializeItem(item);
  1062. if (!serialized) return;
  1063. this._deletedIds.delete(serialized.id);
  1064. this._pendingItems.set(serialized.id, serialized);
  1065. this._queueFlush();
  1066. },
  1067. forgetItem(id) {
  1068. const key = String(id);
  1069. this._pendingItems.delete(key);
  1070. this._deletedIds.add(key);
  1071. },
  1072. forgetItems(ids = []) {
  1073. ids.forEach(id => this.forgetItem(id));
  1074. },
  1075. async _queueFlush() {
  1076. if (this._isFlushing || this._pendingItems.size === 0) return;
  1077. this._isFlushing = true;
  1078. const flushGeneration = this._flushGeneration;
  1079. await yieldToMain();
  1080. try {
  1081. if (flushGeneration !== this._flushGeneration) return;
  1082. const itemsToSave =[];
  1083. for (const item of this._pendingItems.values()) {
  1084. if (this._deletedIds.has(item.id)) continue;
  1085. if (!STATE.items.has(item.id)) continue;
  1086. if (Pipeline.isPhantomMeta(item)) continue;
  1087. itemsToSave.push(item);
  1088. }
  1089. this._pendingItems.clear();
  1090. if (flushGeneration !== this._flushGeneration) return;
  1091. if (itemsToSave.length > 0) { await StorageDB.saveHistoryItemsBulk(itemsToSave); runBg(updateHistoryMetrics); }
  1092. } catch(e) { addLog('ERROR', 'DBQueue flush', e); } finally { this._isFlushing = false; if (this._pendingItems.size > 0) this._queueFlush(); }
  1093. },
  1094. addAppWrite(key, dataObj, delay = 500) {
  1095. const snapshot = cloneSerializable(dataObj, dataObj);
  1096. const nextVersion = (this._appWriteVersions.get(key) || 0) + 1;
  1097. this._appWriteVersions.set(key, nextVersion);
  1098. const prev = this._appWrites.get(key);
  1099. if (prev?.timer) clearTimeout(prev.timer);
  1100. const timer = setTimeout(async () => {
  1101. if (this._appWriteVersions.get(key) !== nextVersion) return;
  1102. this._appWrites.delete(key);
  1103. try { await StorageDB._tx([APP_CONFIG.STORAGE.STORE_DATA], 'readwrite', tx => tx.objectStore(APP_CONFIG.STORAGE.STORE_DATA).put(snapshot, key)); }
  1104. catch (e) { addLog('WARN', 'DBQueue app write failed', { key, error: e?.message || e }); }
  1105. }, delay);
  1106. this._appWrites.set(key, { timer, version: nextVersion });
  1107. },
  1108. clearPending() {
  1109. this._flushGeneration++;
  1110. this._pendingItems.clear();
  1111. this._deletedIds.clear();
  1112. this._appWrites.forEach(entry => clearTimeout(entry?.timer));
  1113. this._appWrites.clear();
  1114. this._appWriteVersions.clear();
  1115. this._isFlushing = false;
  1116. }
  1117. };
  1118.  
  1119. const persistEffectivePrompts = () => DBQueue.addAppWrite('prompts', sanitizePromptStore(STATE.prompts));
  1120. const persistPromptDrafts = () => DBQueue.addAppWrite('promptDrafts', sanitizePromptStore(STATE.promptDrafts));
  1121. const persistRefPrompts = () => DBQueue.addAppWrite('refPrompts', sanitizeRefPromptStore(STATE.refPrompts));
  1122. const persistFavPrompts = () => DBQueue.addAppWrite('favPrompts', sanitizeFavPromptStore(STATE.favPrompts));
  1123. const persistPendingVideos = () => DBQueue.addAppWrite('pendingVideos', sanitizePendingVideosStore(STATE.pendingVideos));
  1124. const getStoredActionPrompt = (action = STATE.action) => normalizePromptDraft(STATE.prompts[action], '');
  1125. const getDraftActionPrompt = (action = STATE.action) => normalizePromptDraft(STATE.promptDrafts[action], getStoredActionPrompt(action));
  1126. const getEditorPromptValue = () => normalizePromptDraft(DOM.prompt?.value, '');
  1127. const setEditorPromptValue = (value = '') => {
  1128. if (DOM.prompt) DOM.prompt.value = normalizePromptDraft(value);
  1129. };
  1130. const getActiveRefPromptBaseline = () => getStoredActionPrompt(STATE.activeRefPromptAction || STATE.action);
  1131. const hasCustomRefPromptDraft = (value = STATE.activeRefPromptDraft, baseline = getActiveRefPromptBaseline()) => {
  1132. const draft = sanitizePromptText(value);
  1133. return !!draft && draft !== sanitizePromptText(baseline);
  1134. };
  1135. const setActionPromptDraft = (action = STATE.action, value = getEditorPromptValue()) => {
  1136. const nextValue = normalizePromptDraft(value);
  1137. if (STATE.promptDrafts[action] === nextValue) return nextValue;
  1138. STATE.promptDrafts = { ...STATE.promptDrafts, [action]: nextValue };
  1139. persistPromptDrafts();
  1140. return nextValue;
  1141. };
  1142. const commitActionPrompt = (action = STATE.action, value = getDraftActionPrompt(action)) => {
  1143. const nextValue = normalizePromptDraft(value);
  1144. if (STATE.prompts[action] === nextValue) return nextValue;
  1145. STATE.prompts = { ...STATE.prompts, [action]: nextValue };
  1146. persistEffectivePrompts();
  1147. return nextValue;
  1148. };
  1149. const getTaskPrompt = (action = STATE.action) => {
  1150. const stored = sanitizePromptText(getStoredActionPrompt(action));
  1151. if (stored || STATE.isGenerating) return stored;
  1152. return sanitizePromptText(getDraftActionPrompt(action));
  1153. };
  1154. const PromptSync = {
  1155. timers: new Map(),
  1156. captureEditor(action = STATE.action, { scheduleCommit = true } = {}) {
  1157. const draft = setActionPromptDraft(action, getEditorPromptValue());
  1158. if (scheduleCommit) this.scheduleCommit(action, draft);
  1159. return draft;
  1160. },
  1161. scheduleCommit(action = STATE.action, value = getDraftActionPrompt(action), delay = APP_CONFIG.TIMINGS.PROMPT_COMMIT_DELAY_MS) {
  1162. this.cancel(action);
  1163. const normalized = normalizePromptDraft(value);
  1164. const timer = setTimeout(() => {
  1165. this.timers.delete(action);
  1166. commitActionPrompt(action, normalized);
  1167. }, delay);
  1168. this.timers.set(action, timer);
  1169. return normalized;
  1170. },
  1171. commitNow(action = STATE.action) {
  1172. this.cancel(action);
  1173. return commitActionPrompt(action, getDraftActionPrompt(action));
  1174. },
  1175. cancel(action = STATE.action) {
  1176. const timer = this.timers.get(action);
  1177. if (timer) clearTimeout(timer);
  1178. this.timers.delete(action);
  1179. },
  1180. clear() {
  1181. this.timers.forEach(timer => clearTimeout(timer));
  1182. this.timers.clear();
  1183. }
  1184. };
  1185. const deleteRefPrompt = (id) => {
  1186. const next = { ...STATE.refPrompts };
  1187. delete next[id];
  1188. STATE.refPrompts = next;
  1189. persistRefPrompts();
  1190. };
  1191. const setRefPrompt = (id, prompt) => {
  1192. STATE.refPrompts = { ...STATE.refPrompts, [id]: prompt };
  1193. persistRefPrompts();
  1194. };
  1195. const getAspectRatioOption = (label = STATE.currentAr) => APP_CONFIG.ASPECT_RATIOS.find(option => option.label.trim() === label) || APP_CONFIG.ASPECT_RATIOS[0];
  1196. const syncActionLabel = (action = STATE.action) => {
  1197. if (DOM.actionDropdown) DOM.actionDropdown.dataset.value = action;
  1198. if (DOM.labelMasterAction) DOM.labelMasterAction.innerText = ActionUtils.getLabel(action);
  1199. };
  1200. const syncAspectRatioUI = (label = STATE.currentAr) => {
  1201. const option = getAspectRatioOption(label);
  1202. if (DOM.settingAr) DOM.settingAr.dataset.value = option.label.trim();
  1203. if (DOM.arSelectedIcon) {
  1204. const iconMarkup = UIUtils.createArIcon(option.w, option.h, option.isAuto, option.isRef);
  1205. DOM.arSelectedIcon.replaceChildren(...(iconMarkup ? [createMarkupFragment(iconMarkup)] : []));
  1206. DOM.arSelectedIcon.style.display = iconMarkup ? 'flex' : 'none';
  1207. }
  1208. if (DOM.arSelectedText) DOM.arSelectedText.innerText = option.label.trim();
  1209. };
  1210. const syncResolutionButtons = () => {
  1211. if (DOM.resImgToggle) {
  1212. DOM.resImgToggle.dataset.value = STATE.resImg;
  1213. DOM.resImgToggle.innerText = STATE.resImg === '2k' ? '2K Pro' : '1K Std';
  1214. }
  1215. if (DOM.resVidToggle) {
  1216. DOM.resVidToggle.dataset.value = STATE.resVid;
  1217. DOM.resVidToggle.innerText = STATE.resVid === '720p' ? '720p' : '480p';
  1218. }
  1219. };
  1220. const syncSettingsInputs = () => {
  1221. SETTINGS_NUMBER_META.forEach(({ domKey, stateKey }) => {
  1222. if (DOM[domKey]) DOM[domKey].value = STATE[stateKey];
  1223. });
  1224. SETTINGS_TOGGLE_META.forEach(({ domKey, stateKey }) => {
  1225. if (DOM[domKey]) DOM[domKey].checked = !!STATE[stateKey];
  1226. });
  1227. if (DOM.settingLoops) DOM.settingLoops.value = STATE.loops;
  1228. if (DOM.settingBatch) DOM.settingBatch.dataset.value = STATE.batchSize;
  1229. if (DOM.labelSettingBatch) DOM.labelSettingBatch.innerText = STATE.batchSize;
  1230. };
  1231. const syncLayoutWidths = () => {
  1232. if (DOM.colLeft) DOM.colLeft.style.width = Math.max(320, STATE.leftWidth) + 'px';
  1233. if (DOM.colRight) DOM.colRight.style.width = STATE.rightWidth + 'px';
  1234. };
  1235. const escapeSelectorValue = (value) => (globalThis.CSS && typeof CSS.escape === 'function') ? CSS.escape(String(value)) : String(value).replace(/["\\]/g, '\\$&');
  1236. const setActivePopoverItem = (popover, value) => {
  1237. if (!popover) return;
  1238. const stringValue = String(value);
  1239. const current = popover.querySelector('.popover-item.active');
  1240. if (current?.dataset.val === stringValue) return;
  1241. current?.classList.remove('active');
  1242. popover.querySelector(`.popover-item[data-val="${escapeSelectorValue(stringValue)}"]`)?.classList.add('active');
  1243. };
  1244. const buildPopoverOptionItem = (selectedValue, opt) => {
  1245. const optionValue = String(opt.val);
  1246. const item = document.createElement('div');
  1247. const classNames = ['popover-item', String(selectedValue) === optionValue ? 'active' : '', opt.disabled ? 'disabled' : '', opt.icon ? 'has-icon' : 'no-icon'].filter(Boolean);
  1248. item.className = classNames.join(' ');
  1249. item.dataset.val = optionValue;
  1250. item.title = opt.title || '';
  1251. if (opt.icon) {
  1252. const icon = document.createElement('div');
  1253. icon.className = 'popover-icon';
  1254. icon.append(createMarkupFragment(opt.icon));
  1255. item.appendChild(icon);
  1256. }
  1257. const text = document.createElement('span');
  1258. text.textContent = opt.text;
  1259. item.appendChild(text);
  1260. return item;
  1261. };
  1262. const renderPopoverOptions = (popover, selectedValue, opts = []) => {
  1263. const fragment = document.createDocumentFragment();
  1264. opts.forEach(opt => fragment.appendChild(buildPopoverOptionItem(selectedValue, opt)));
  1265. popover.replaceChildren(fragment);
  1266. };
  1267. const buildExportState = () => Object.fromEntries(EXPORT_STATE_KEYS.map(key => [key, STATE[key]]));
  1268. const activateReferenceItem = (item) => {
  1269. if (!item) return false;
  1270. const wasInactive = item.active !== true;
  1271. item.active = true;
  1272. if (STATE.isGenerating && wasInactive) item.readyAt = Date.now() + 10000;
  1273. else if (!Number.isFinite(item.readyAt)) item.readyAt = 0;
  1274. return wasInactive;
  1275. };
  1276.  
  1277. const moveReferenceToFront = (id, { exclusiveActive = false, enforceLimit = false, forceRebuild = true } = {}) => {
  1278. const key = String(id);
  1279. const item = STATE.items.get(key);
  1280. if (!item) return false;
  1281. if (enforceLimit && !STATE.refOrder.includes(key) && STATE.refOrder.length >= APP_CONFIG.LIMITS.MAX_REFS_QUEUE) return false;
  1282. if (exclusiveActive) {
  1283. STATE.refOrder.forEach(rid => {
  1284. const refItem = STATE.items.get(String(rid));
  1285. if (refItem) refItem.active = false;
  1286. });
  1287. }
  1288. activateReferenceItem(item);
  1289. const wasFirst = STATE.refOrder[0] === key;
  1290. STATE.refOrder = [key, ...STATE.refOrder.filter(rid => String(rid) !== key)];
  1291. updateRefState({ forceRebuild: forceRebuild && !wasFirst });
  1292. if (DOM.refList) DOM.refList.scrollTop = 0;
  1293. return true;
  1294. };
  1295.  
  1296. function updateRefState({ forceRebuild = false } = {}) {
  1297. DBQueue.addAppWrite('refData', STATE.refOrder.map(id => ({ id, active: STATE.items.get(id)?.active ?? true })));
  1298. if (forceRebuild && DOM.refList) NativeGridManager.clear(DOM.refList, 'reference');
  1299. renderRefList();
  1300. updateUploadPlaceholderState();
  1301. }
  1302.  
  1303. const CardRegistry = {
  1304. maps: {
  1305. current: new Map(),
  1306. history: new Map(),
  1307. reference: new Map()
  1308. },
  1309. register(card, context, id) {
  1310. const store = this.maps[context];
  1311. if (store) store.set(String(id), card);
  1312. },
  1313. unregister(card, context, id) {
  1314. const store = this.maps[context];
  1315. if (store && store.get(String(id)) === card) store.delete(String(id));
  1316. },
  1317. move(card, prevContext, prevId, nextContext, nextId) {
  1318. if (prevContext && prevId !== undefined) this.unregister(card, prevContext, prevId);
  1319. this.register(card, nextContext, nextId);
  1320. },
  1321. get(context, id) { return this.maps[context]?.get(String(id)) || null; },
  1322. forEachById(id, visitor) {
  1323. const key = String(id);
  1324. Object.values(this.maps).forEach(store => {
  1325. const card = store.get(key);
  1326. if (card) visitor(card);
  1327. });
  1328. },
  1329. setDownloaded(id, downloaded = true) {
  1330. this.forEachById(id, card => card.classList.toggle('downloaded', !!downloaded));
  1331. },
  1332. find(id) {
  1333. const targetId = String(id);
  1334. return this.maps.current.get(targetId) || this.maps.history.get(targetId) || this.maps.reference.get(targetId) || null;
  1335. },
  1336. clear(context = null) {
  1337. if (context) this.maps[context]?.clear();
  1338. else Object.values(this.maps).forEach(map => map.clear());
  1339. }
  1340. };
  1341.  
  1342. const ViewportObserver = new IntersectionObserver((entries) => {
  1343. entries.forEach(e => {
  1344. const card = e.target; card._isActuallyVisible = e.isIntersecting;
  1345. if (e.isIntersecting) {
  1346. if (card._context === 'current') card.setLoadLevel(isMemoryConstrainedMode() ? 'thumb' : 'full');
  1347. else card.setLoadLevel('thumb');
  1348. } else {
  1349. if (typeof card.forcePause === 'function') card.forcePause();
  1350. card.setLoadLevel(card._context === 'current' ? (isMemoryConstrainedMode() ? 'none' : 'thumb') : 'none');
  1351. if (card._context === 'current') BlobCache.trim({ full: getFullCacheLimit() });
  1352. }
  1353. });
  1354. }, { rootMargin: '320px 0px 320px 0px' });
  1355.  
  1356. const cardSheet = new CSSStyleSheet();
  1357. cardSheet.replaceSync(`
  1358. :host{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;contain:strict;flex-shrink:0;user-select:none;will-change:transform;transition:box-shadow .2s,border-color .2s;content-visibility:auto;contain-intrinsic-size:auto 300px;container-type:inline-size;}
  1359. :host(.downloaded){outline:2px solid var(--success);outline-offset:-2px;}
  1360. :host(.is-history){contain:layout paint style;width:100%;aspect-ratio:var(--ratio)/1;margin-bottom:6px;}
  1361. :host(.is-current){contain:layout paint style;--target-h:var(--gallery-target-h, 40vh);height:var(--target-h);aspect-ratio:var(--ratio)/1;flex:0 0 auto;max-width:100%;border:none;background:0 0;margin:0;border-radius:0;transition:height .4s cubic-bezier(0.2,0.8,0.2,1);}
  1362. :host(.is-current:not(.is-pending)) .media-wrapper{border-radius:0;inset:0;border:none;}
  1363. :host(.is-reference){flex:0 0 auto;width:100%;height:calc(100cqw / var(--ratio,1));min-height:100px;max-height:100cqh;transition:opacity .15s;}
  1364. :host(.is-reference.inactive){opacity:.4;filter:grayscale(1);}
  1365. :host(.is-editing){outline:2px solid var(--success);outline-offset:-2px;border-color:var(--success);}
  1366. :host(.is-editing) .ref-header{background:rgb(from var(--success) r g b/80%);border-bottom-color:transparent;}
  1367. :host(.is-editing) .ref-side-prompt-btn{opacity:1;visibility:visible;background:var(--success)!important;border-color:var(--success)!important;color:#000!important;scale:1.05;}
  1368. .media-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#000;border-radius:6px;overflow:hidden;transition:transform .2s;}
  1369. .media-wrapper::before{content:'';position:absolute;inset:0;background:rgb(8 10 14 / 0);opacity:var(--media-dim-opacity,0);transition:opacity .15s;z-index:4;pointer-events:none;}
  1370. .bg-layer{position:absolute;inset:0;background-size:100% 100%;z-index:0;}
  1371. :host(.is-pending) .media-wrapper{inset:8px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.4);transform:translateZ(0);overflow:hidden;}
  1372. :host(.is-pending) .bg-layer::after,:host(.is-processing) .bg-layer::after{content:'';position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-20deg);animation:xai-shimmer 2s infinite;z-index:1;pointer-events:none;}
  1373. :host(.is-pending) .media-wrapper::after,:host(.is-processing) .media-wrapper::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.62);transform-origin:right;transform:scaleX(calc(1 - (var(--p-raw,0) / 100)));transition:transform .24s linear;z-index:5;pointer-events:none;border-left:2px solid rgba(255,255,255,.2);}
  1374. @keyframes xai-shimmer{100%{transform:translateX(250%) skewX(-20deg);}}
  1375. #img, #vid { position:absolute; inset:0; width:100%; height:100%; border-radius:0; z-index:3; transition:opacity .2s ease-out; object-fit:contain; opacity:0; display:none; will-change:transform; }
  1376. #vid { z-index:2; }
  1377. :host(.is-loaded) #img, :host(.is-loaded) #vid { opacity:1; }
  1378. :host(.is-playing) #img { opacity:0; pointer-events:none; }
  1379. :host(.is-pending) #img, :host(.is-pending) #vid { inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); border-radius:6px; }
  1380. :host(.is-reference:not(.is-highlighted)){--media-dim-opacity:.38;}
  1381. :host(.is-reference.inactive){--media-dim-opacity:.58;}
  1382. .ref-header,.ref-side-prompt-btn,.bottom-bar{display:none;}
  1383. :host(.is-reference) .ref-header{display:flex;}
  1384. :host(.is-reference) .ref-side-prompt-btn{display:inline-flex;}
  1385. :host(.is-history) .bottom-bar{display:block;}
  1386. :host(.is-history) .media-wrapper{border-bottom:1px solid var(--border);}
  1387. :host(.is-history) .media-wrapper,:host(.is-reference) .media-wrapper{position:relative;flex:1 1 auto;min-height:0;background:var(--bg);}
  1388. .overlay{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-start;padding:8px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;}
  1389. :host(:hover) .overlay{opacity:1;}
  1390. @media (hover:none){.overlay{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.6) 0,transparent 60px);}}
  1391. :host(.is-reference) .overlay{display:none!important;}
  1392. :host(.is-pending) .overlay{pointer-events:none;}
  1393. :host(.is-pending) .overlay>*:not(.overlay-del-btn){display:none!important;}
  1394. .overlay>*{pointer-events:auto;}
  1395. :host(.type-image) .overlay-extend-btn{display:none!important;}
  1396. :host(.type-video) .overlay-video-btn{display:none!important;}
  1397. .play-icon{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:48px;height:48px;background:rgb(8 10 14 / 72%);border-radius:50%;color:#fff;font-size:24px;padding-left:4px;border:1px solid rgb(from var(--accent) r g b/20%);z-index:6;display:none;align-items:center;justify-content:center;transition:opacity .15s;pointer-events:none;}
  1398. .top-bar,.bottom-bar{position:relative;z-index:15;}
  1399. .ref-status-overlay{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;align-items:center;z-index:20;pointer-events:none;padding:0 10px;gap:4px;}
  1400. .ref-status-line{background:rgb(0 0 0/80%); padding:clamp(4px,2cqi,8px) clamp(10px,3cqi,16px); border-radius:6px; font-size:clamp(11px,4cqi,14px); font-weight:600; color:#fff; border:1px solid rgb(from var(--accent) r g b/15%); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 2px 8px rgb(0 0 0/70%); line-height:1.3;}
  1401. :host(.is-reference) .ref-status-line{font-size:11px;padding:4px 8px;}
  1402. .xai-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;white-space:nowrap;flex-shrink:0;border-radius:20px;border:none;outline:none;text-decoration:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;background:rgb(from var(--accent) r g b/12%);color:var(--text-main);transition:.15s ease;}
  1403. .xai-btn:hover{background:rgb(from var(--accent) r g b/20%);box-shadow:inset 0 0 0 1px rgb(from var(--accent) r g b/25%);}
  1404. .xai-btn--square{width:32px;height:32px;padding:0;border-radius:8px;font-size:16px;}
  1405. .xai-btn--xs{width:24px;height:24px;font-size:12px;}
  1406. .xai-btn--sm-square{width:28px;height:28px;font-size:12px;}
  1407. .xai-btn--dl-square{width:32px;height:32px;}
  1408. .xai-btn--glass{background:rgb(0 0 0/50%)!important;border:1px solid rgb(from var(--accent) r g b/20%)!important;color:#fff!important;}
  1409. .xai-btn--glass:hover{background:rgb(0 0 0/80%)!important;}
  1410. .hover-danger:hover{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important;}
  1411. .overlay-actions{display:flex;gap:4px;align-items:center;}
  1412. .overlay-dl-btn{margin-left:8px;}
  1413. .card-prompt{padding:6px 8px;margin:0;font-size:11px;line-height:1.3;color:var(--text-main);cursor:pointer;display:-webkit-box;line-clamp:2;box-orient:vertical;overflow:hidden;height:34px;box-sizing:border-box;background:rgb(from var(--accent) r g b/2%);}
  1414. .card-prompt:hover{background:rgb(from var(--accent) r g b/10%);}
  1415. .ref-header{position:absolute;inset:0 0 auto 0;justify-content:space-between;align-items:center;padding:6px 10px;background:rgb(0 0 0/58%);border-bottom:1px solid rgb(from var(--accent) r g b/10%);z-index:var(--z-local-header);gap:6px;pointer-events:auto;cursor:grab;transition:background-color .15s;}
  1416. .ref-active-toggle{cursor:pointer;margin:0;pointer-events:auto;width:14px;height:14px;flex-shrink:0;}
  1417. .ref-label-text-wrapper{flex:1;display:flex;align-items:center;pointer-events:none;overflow:hidden;}
  1418. .ref-label-text{font-family:monospace;font-size:13px;font-weight:600;color:var(--text-main);pointer-events:none;transition:color .15s;}
  1419. .ref-label-text.insertable-tag{pointer-events:auto;cursor:pointer;text-decoration:underline;color:var(--success);}
  1420. .ref-side-prompt-btn{position:absolute;left:8px;top:50%;translate:0 -50%;z-index:25;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;margin:0;}
  1421. .ref-side-prompt-btn.has-prompt{opacity:1;visibility:visible;color:var(--success)!important;border-color:var(--success)!important;background:rgb(from var(--success) r g b/15%)!important;}
  1422. :host(:not(.is-reference)) .ref-side-prompt-btn{display:none!important;}
  1423. :host(:hover) .ref-side-prompt-btn{opacity:1;visibility:visible;}
  1424. .drag-handle{cursor:grab;} .ml-auto{margin-left:auto;} .mr-auto{margin-right:auto;} .dragging{opacity:.5;box-shadow:0 0 0 2px var(--success);}
  1425. `);
  1426.  
  1427. const xaiCardTemplate = document.createElement('template');
  1428. xaiCardTemplate.innerHTML = buildCardTemplateHtml();
  1429.  
  1430. class XaiCard extends HTMLElement {
  1431. constructor() {
  1432. super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.adoptedStyleSheets =[cardSheet];
  1433. this._bound = false; this._mediaState = 'none';
  1434. this._loadController = null; this._hoverTimer = null; this._warmTimer = null; this._isActuallyVisible = false; this._statusSig = ''; this._progressValue = null;
  1435. this.shadowRoot.appendChild(xaiCardTemplate.content.cloneNode(true));
  1436. this.mediaWrapper = this.shadowRoot.querySelector('.media-wrapper'); this.overlay = this.shadowRoot.querySelector('.overlay');
  1437. this.bgBase = this.shadowRoot.getElementById('bg-base'); this.playIcon = this.shadowRoot.getElementById('play');
  1438. this.imgEl = this.shadowRoot.getElementById('img'); this.vidEl = this.shadowRoot.getElementById('vid');
  1439. this.statusOverlay = this.shadowRoot.getElementById('status-overlay'); this.refToggle = this.shadowRoot.querySelector('.ref-active-toggle');
  1440. this.refSideBtn = this.shadowRoot.querySelector('.ref-side-prompt-btn'); this.promptText = this.shadowRoot.querySelector('.card-prompt'); this.refLabelText = this.shadowRoot.querySelector('.ref-label-text');
  1441. }
  1442. setProgress(p) {
  1443. const next = p == null ? null : Number(p);
  1444. if (this._progressValue === next) return;
  1445. this._progressValue = next;
  1446. if (next == null) { this.removeAttribute('data-progress'); this.style.setProperty('--p-raw', '0'); }
  1447. else { this.dataset.progress = String(next); this.style.setProperty('--p-raw', String(next)); }
  1448. }
  1449. setStatus(lines) {
  1450. const normalized = Array.isArray(lines) ? lines : [];
  1451. const sig = normalized.length ? normalized.map(l => `${l.text || ''}|${l.color || ''}|${l.style || ''}`).join('\n') : '';
  1452. if (this._statusSig === sig) return;
  1453. this._statusSig = sig;
  1454. if (normalized.length === 0) {
  1455. this.statusOverlay.style.display = 'none';
  1456. this.statusOverlay.replaceChildren();
  1457. return;
  1458. }
  1459. const fragment = document.createDocumentFragment();
  1460. normalized.forEach(l => {
  1461. const d = document.createElement('div');
  1462. d.className = 'ref-status-line';
  1463. if (l.color) d.style.color = l.color;
  1464. if (l.style) d.style.cssText += l.style;
  1465. d.textContent = l.text;
  1466. fragment.appendChild(d);
  1467. });
  1468. this.statusOverlay.style.display = 'flex';
  1469. this.statusOverlay.replaceChildren(fragment);
  1470. }
  1471. setLabel(text, title = '', onClick = null) {
  1472. if (!this.refLabelText) return;
  1473. if (this.refLabelText.textContent !== text) this.refLabelText.textContent = text;
  1474. this.refLabelText.classList.toggle('insertable-tag', typeof onClick === 'function');
  1475. this.refLabelText.title = title;
  1476. this.refLabelText.onclick = onClick;
  1477. }
  1478. setHistoryPrompt(prompt) {
  1479. if (!this.promptText) return;
  1480. const safePrompt = Pipeline.normalizePrompt(prompt);
  1481. const preview = safePrompt ? (safePrompt.length > 120 ? safePrompt.substring(0, 120) + '...' : safePrompt) : 'No prompt';
  1482. if (this.promptText.title !== safePrompt) this.promptText.title = safePrompt;
  1483. if (this.promptText.textContent !== preview) this.promptText.textContent = preview;
  1484. }
  1485. setReferenceActive(active) {
  1486. if (this.refToggle) this.refToggle.checked = !!active;
  1487. this.classList.toggle('inactive', !active);
  1488. }
  1489. setReferencePromptFlag(hasPrompt) {
  1490. if (this.refSideBtn) this.refSideBtn.classList.toggle('has-prompt', !!hasPrompt);
  1491. }
  1492. refresh(item, context = this._context) {
  1493. if (!this._bound || this.dataset.id !== String(item.id) || this._context !== context) {
  1494. this.bind(item, context);
  1495. return;
  1496. }
  1497. this._item = item;
  1498. this.classList.toggle('downloaded', !!item.downloaded);
  1499. this.classList.toggle('inactive', context === 'reference' && !item.active);
  1500. this.classList.toggle('is-pending', !!item.isPending);
  1501. this.classList.toggle('type-image', item.type === 'image');
  1502. this.classList.toggle('type-video', item.type === 'video');
  1503. if (item.ratio) {
  1504. const ratioValue = String(item.ratio);
  1505. if (this.style.getPropertyValue('--ratio') !== ratioValue) this.style.setProperty('--ratio', ratioValue);
  1506. const vertical = item.ratio <= 1.05 ? 'true' : 'false';
  1507. if (this.dataset.vertical !== vertical) this.dataset.vertical = vertical;
  1508. }
  1509. const bg = item.lqip || '';
  1510. if (this.bgBase.style.background !== bg) this.bgBase.style.background = bg;
  1511. const playDisplay = item.type === 'video' && context !== 'reference' && !item.isPending ? 'flex' : 'none';
  1512. if (this.playIcon.style.display !== playDisplay) this.playIcon.style.display = playDisplay;
  1513. if (item.isPending) this.setStatus(item._statusData || [{ text: 'Queued...', color: '#fff' }]);
  1514. else if (context === 'reference') {
  1515. this.setReferenceActive(item.active);
  1516. this.setReferencePromptFlag(!!STATE.refPrompts[item.id]);
  1517. } else if (context === 'history') this.setHistoryPrompt(item.prompt);
  1518. }
  1519. connectedCallback() { if (this._bound) ViewportObserver.observe(this); }
  1520. disconnectedCallback() {
  1521. ViewportObserver.unobserve(this);
  1522. queueMicrotask(() => { if (!this.isConnected) this.unbind(); });
  1523. }
  1524. forcePause() { if (this._item?.type === 'video') { this.playIcon.style.opacity = '1'; this.vidEl.pause(); this.classList.remove('is-playing'); } }
  1525.  
  1526. async _handleHover(isHover) {
  1527. if (!this._bound || this._item?.type !== 'video' || this._context !== 'current') return;
  1528. const eco = STATE.ecoMode || document.body.classList.contains('auto-eco');
  1529. if (eco) {
  1530. this.forcePause();
  1531. return;
  1532. }
  1533. if (isHover && this._isActuallyVisible) {
  1534. if (this._mediaState !== 'full') { this._hoverUpgraded = true; await this.setLoadLevel('full'); }
  1535. if (!this.vidEl || !this.vidEl.getAttribute('src')) return;
  1536. this.playIcon.style.opacity = '0'; this.classList.add('is-playing');
  1537. try { await this.vidEl.play(); } catch(e) { this.classList.remove('is-playing'); this.playIcon.style.opacity = '1'; }
  1538. } else {
  1539. this.forcePause();
  1540. if (this._hoverUpgraded) { this._hoverUpgraded = false; this.setLoadLevel('thumb'); }
  1541. }
  1542. }
  1543. _abortLoad() { if (this._loadController) { this._loadController.abort(); this._loadController = null; } }
  1544.  
  1545. async setLoadLevel(level) {
  1546. if (this._mediaState === level || !this._bound) return;
  1547. if (this._item.isPending && !this._item.refSourceId) return;
  1548. if (level === 'full' && (this._item.isPending || (this._item.type === 'image' && (this._context === 'history' || this._context === 'reference' || STATE.ecoMode)))) { level = 'thumb'; if (this._mediaState === level) return; }
  1549.  
  1550. this._abortLoad(); this._loadController = new AbortController(); const signal = this._loadController.signal;
  1551. if (level === 'none') return this._clearSrc();
  1552.  
  1553. try {
  1554. const { thumbUrl, fullUrl } = await this._resolveUrls(level, signal);
  1555. if (signal.aborted) return;
  1556. this._applySrc(level, thumbUrl, fullUrl);
  1557. } catch(e) { if (e.name !== 'AbortError') addLog('WARN', 'setLoadLevel error', e); }
  1558. }
  1559.  
  1560. async _resolveUrls(level, signal) {
  1561. const fetchId = this._item.refSourceId || this._item.id;
  1562. const needsThumb = this._item.type === 'video' || level !== 'full' || this._context !== 'current' || isMemoryConstrainedMode();
  1563. const thumbPromise = needsThumb ? BlobCache.thumb.getUrl(fetchId, 'thumb') : Promise.resolve(null);
  1564. const fullPromise = level === 'full'
  1565. ? (this._item.type === 'video' && this._item.originalUrl ? Promise.resolve(this._item.originalUrl) : BlobCache.full.getUrl(fetchId, 'full'))
  1566. : Promise.resolve(null);
  1567. let [thumbUrl, fullUrl] = await Promise.all([thumbPromise, fullPromise]);
  1568. if (!thumbUrl && !fullUrl && level === 'full' && this._item.type === 'image') thumbUrl = await BlobCache.thumb.getUrl(fetchId, 'thumb');
  1569. if (signal.aborted) return {};
  1570. return { thumbUrl, fullUrl };
  1571. }
  1572.  
  1573. _applySrc(level, thumbUrl, fullUrl) {
  1574. if (!this._bound) return;
  1575. this._mediaState = level;
  1576.  
  1577. if (this._item.type === 'image') {
  1578. this.vidEl.style.display = 'none'; this.imgEl.style.display = 'block';
  1579. const targetUrl = fullUrl || thumbUrl;
  1580. if (targetUrl && this.imgEl.src !== targetUrl) {
  1581. this.imgEl.src = targetUrl;
  1582. this._decodeVisibleImage();
  1583. } else if (!targetUrl) {
  1584. this.imgEl.removeAttribute('src');
  1585. this.classList.remove('is-loaded');
  1586. }
  1587. } else {
  1588. if (thumbUrl && this.imgEl.src !== thumbUrl) {
  1589. this.imgEl.src = thumbUrl; this.imgEl.style.display = 'block';
  1590. this._decodeVisibleImage();
  1591. } else if (!thumbUrl) this.imgEl.style.display = 'none';
  1592.  
  1593. this.vidEl.style.display = 'block'; this.vidEl.removeAttribute('crossorigin');
  1594. if (level === 'full' && fullUrl) {
  1595. if (this.vidEl.src !== fullUrl) {
  1596. this.vidEl.src = fullUrl;
  1597. const onLoaded = () => { if (this._bound) { this.classList.add('is-loaded'); if (this.vidEl.paused && this.vidEl.currentTime === 0) this.vidEl.currentTime = 0.1; } };
  1598. if (this.vidEl.readyState >= 2) onLoaded(); else this.vidEl.addEventListener('loadeddata', onLoaded, { once: true });
  1599. }
  1600. } else { this.vidEl.removeAttribute('src'); this.vidEl.load(); }
  1601. }
  1602. }
  1603.  
  1604. _clearSrc() {
  1605. this.forcePause();
  1606. this.imgEl.removeAttribute('src'); this.imgEl.style.display = 'none';
  1607. this.vidEl.removeAttribute('src'); this.vidEl.load(); this.vidEl.style.display = 'none';
  1608. this.classList.remove('is-loaded', 'is-playing');
  1609. this._mediaState = 'none';
  1610. }
  1611. _decodeVisibleImage() {
  1612. this.imgEl.decode().then(() => { if (this._bound) this.classList.add('is-loaded'); }).catch(() => {});
  1613. }
  1614.  
  1615. bind(item, context) {
  1616. const prevContext = this._context, prevId = this.dataset.id;
  1617. this.unbind(); this._item = item; this._context = context; this.dataset.id = item.id;
  1618. this.className = '';
  1619. this.classList.add('xai-card', `is-${context}`, `type-${item.type}`);
  1620. this.draggable =['history', 'current', 'reference'].includes(context);
  1621. CardRegistry.move(this, prevContext, prevId, context, item.id);
  1622. this.vidEl.style.display = 'none'; this.imgEl.style.display = 'none';
  1623. this.classList.remove('is-loaded', 'is-playing', 'is-processing');
  1624. this._statusSig = '';
  1625. this._progressValue = null;
  1626. this._bound = true;
  1627. this.refresh(item, context);
  1628. ViewportObserver.observe(this);
  1629. }
  1630. unbind() {
  1631. CardRegistry.unregister(this, this._context, this.dataset.id);
  1632. clearTimeout(this._hoverTimer); this._hoverTimer = null;
  1633. clearTimeout(this._warmTimer); this._warmTimer = null;
  1634. this._abortLoad();
  1635. ViewportObserver.unobserve(this); this.setLoadLevel('none'); this.setStatus([]); this.setProgress(null); this.removeAttribute('data-id'); this.classList.remove('is-pending', 'is-processing', 'inactive', 'downloaded'); this._item = null; this._bound = false;
  1636. }
  1637. }
  1638. if (!customElements.get('xai-card')) customElements.define('xai-card', XaiCard);
  1639.  
  1640. const NativeGridManager = {
  1641. container: null, _renderVersions: new Map(),
  1642. init() {
  1643. this.container = DOM.currentImages;
  1644. if (this.container) this.container.dataset.renderContext = 'current';
  1645. if (DOM.refList) DOM.refList.dataset.renderContext = 'reference';
  1646. if (DOM.history) DOM.history.dataset.renderContext = 'history';
  1647. },
  1648. syncCurrentLayoutMetrics(container = this.container, order = STATE.currentOrder, map = STATE.items) {
  1649. if (!container) return;
  1650. if (!order || order.length === 0) {
  1651. container.style.removeProperty('--gallery-target-h');
  1652. return;
  1653. }
  1654. let W = container.clientWidth || window.innerWidth * 0.5, H = (container.clientHeight || window.innerHeight) - 130, W_u = W * 0.98, cAR = 0, tH = H;
  1655. for (let i = 0; i < order.length; i++) {
  1656. let ar = map.get(order[i])?.ratio || 1;
  1657. cAR += ar;
  1658. let pW = cAR * H;
  1659. if (pW > W_u) {
  1660. let perfH = W_u / cAR, prevH = (cAR - ar) > 0 ? (W_u / (cAR - ar)) : H * 2;
  1661. tH = prevH > H ? perfH : prevH;
  1662. break;
  1663. }
  1664. }
  1665. if (tH < 200) tH = 200;
  1666. container.style.setProperty('--gallery-target-h', `${tH}px`);
  1667. },
  1668. update(order, itemDataMap = STATE.items, context = 'current', containerOverride = null) {
  1669. const container = containerOverride || (context === 'history' ? DOM.history : context === 'reference' ? DOM.refList : this.container); if (!container) return;
  1670. const version = Symbol(); this._renderVersions.set(container, version);
  1671. this._processQueue(context, order, itemDataMap, container, version);
  1672. },
  1673. async _processQueue(context, order, map, container, version) {
  1674. if (!order || order.length === 0) return this.clear(container);
  1675.  
  1676. if (context === 'current') this.syncCurrentLayoutMetrics(container, order, map);
  1677.  
  1678. const existingNodes = Array.from(container.children), nodeMap = new Map(existingNodes.map(n =>[n.dataset.id, n])), orderSet = new Set(order);
  1679. existingNodes.forEach(n => { if (!orderSet.has(n.dataset.id)) { n.unbind(); n.remove(); } });
  1680.  
  1681. let t = performance.now(), fragment = document.createDocumentFragment();
  1682. for (let i = 0; i < order.length; i++) {
  1683. if (this._renderVersions.get(container) !== version) return;
  1684. if (performance.now() - t > 12) {
  1685. if (fragment.children.length > 0) container.insertBefore(fragment, container.children[i] || null);
  1686. await yieldToMain();
  1687. if (this._renderVersions.get(container) !== version) return;
  1688. t = performance.now();
  1689. }
  1690. const id = order[i], meta = map.get(id); if (!meta) continue;
  1691. let node = nodeMap.get(id);
  1692. if (!node) { node = document.createElement('xai-card'); node.bind(meta, context); fragment.appendChild(node); }
  1693. else {
  1694. node.refresh(meta, context);
  1695. if (fragment.children.length > 0) container.insertBefore(fragment, container.children[i] || null);
  1696. if (container.children[i] !== node) container.insertBefore(node, container.children[i] || null);
  1697. }
  1698. }
  1699. if (fragment.children.length > 0) container.appendChild(fragment);
  1700. },
  1701. clear(container = this.container, contextOverride = null) {
  1702. if (!container) return;
  1703. const context = contextOverride || container.dataset.renderContext || (container === DOM.history ? 'history' : container === DOM.refList ? 'reference' : 'current');
  1704. Array.from(container.children).forEach(n => n.unbind());
  1705. container.replaceChildren();
  1706. if (container === DOM.history || container === DOM.refList || container === this.container) container.scrollTop = 0;
  1707. CardRegistry.clear(context);
  1708. if (container === this.container) container.style.removeProperty('--gallery-target-h');
  1709. }
  1710. };
  1711. const HistoryManager = {
  1712. container: null,
  1713. topSpacer: null,
  1714. bottomSpacer: null,
  1715. windowEl: null,
  1716. itemMap: STATE.items,
  1717. order: [],
  1718. measurements: new Map(),
  1719. renderRaf: 0,
  1720. measureRaf: 0,
  1721. resizeObserver: null,
  1722. init(container) {
  1723. this.container = container;
  1724. this.order = [];
  1725. this.measurements.clear();
  1726. this.topSpacer = document.createElement('div');
  1727. this.bottomSpacer = document.createElement('div');
  1728. this.windowEl = document.createElement('div');
  1729. this.topSpacer.className = 'history-spacer';
  1730. this.bottomSpacer.className = 'history-spacer';
  1731. this.windowEl.className = 'history-window';
  1732. this.windowEl.dataset.renderContext = 'history';
  1733. this.container.classList.add('history-virtualized');
  1734. this.container.replaceChildren(this.topSpacer, this.windowEl, this.bottomSpacer);
  1735. App.on(this.container, 'scroll', () => this.scheduleRender(), { passive: true });
  1736. this.resizeObserver = new ResizeObserver(() => {
  1737. this.measurements.clear();
  1738. this.scheduleRender();
  1739. });
  1740. this.resizeObserver.observe(this.container);
  1741. App.ac.signal.addEventListener('abort', () => this.clear());
  1742. },
  1743. _getContentWidth() {
  1744. return Math.max(120, (this.container?.clientWidth || 0) - 8);
  1745. },
  1746. _estimateHeight(id) {
  1747. const key = String(id);
  1748. if (this.measurements.has(key)) return this.measurements.get(key);
  1749. const item = this.itemMap?.get(key);
  1750. const ratio = Math.max(0.2, Number(item?.ratio) || 1);
  1751. return Math.ceil(this._getContentWidth() / ratio) + 6;
  1752. },
  1753. _measureVisible() {
  1754. if (!this.windowEl) return;
  1755. let changed = false;
  1756. Array.from(this.windowEl.children).forEach(node => {
  1757. if (node.tagName !== 'XAI-CARD') return;
  1758. const id = String(node.dataset.id);
  1759. const nextHeight = Math.ceil(node.getBoundingClientRect().height + 6);
  1760. if (!Number.isFinite(nextHeight) || nextHeight <= 0) return;
  1761. if (Math.abs((this.measurements.get(id) || 0) - nextHeight) >= HISTORY_MEASURE_EPSILON) {
  1762. this.measurements.set(id, nextHeight);
  1763. changed = true;
  1764. }
  1765. });
  1766. if (changed) this.scheduleRender();
  1767. },
  1768. _computeWindow() {
  1769. const viewportHeight = Math.max(1, this.container?.clientHeight || 0);
  1770. const scrollTop = Math.max(0, this.container?.scrollTop || 0);
  1771. const overscan = getHistoryOverscanPx();
  1772. const targetStart = Math.max(0, scrollTop - overscan);
  1773. const targetEnd = scrollTop + viewportHeight + overscan;
  1774. let top = 0, bottom = 0, start = 0, end = this.order.length, offset = 0;
  1775. let foundStart = false;
  1776. for (let i = 0; i < this.order.length; i++) {
  1777. const id = this.order[i];
  1778. const itemHeight = this._estimateHeight(id);
  1779. const nextOffset = offset + itemHeight;
  1780. if (!foundStart && nextOffset >= targetStart) {
  1781. start = Math.max(0, i - getHistoryPrerenderBudget());
  1782. foundStart = true;
  1783. }
  1784. if (foundStart && nextOffset >= targetEnd) {
  1785. end = Math.min(this.order.length, i + 1 + getHistoryPrerenderBudget());
  1786. break;
  1787. }
  1788. offset = nextOffset;
  1789. }
  1790. for (let i = 0; i < start; i++) top += this._estimateHeight(this.order[i]);
  1791. for (let i = end; i < this.order.length; i++) bottom += this._estimateHeight(this.order[i]);
  1792. return { start, end, top, bottom };
  1793. },
  1794. render() {
  1795. if (!this.container || !this.windowEl) return;
  1796. if (!this.order.length) {
  1797. if (this.topSpacer) this.topSpacer.style.height = '0px';
  1798. if (this.bottomSpacer) this.bottomSpacer.style.height = '0px';
  1799. NativeGridManager.clear(this.windowEl, 'history');
  1800. return;
  1801. }
  1802. const { start, end, top, bottom } = this._computeWindow();
  1803. if (this.topSpacer) this.topSpacer.style.height = `${top}px`;
  1804. if (this.bottomSpacer) this.bottomSpacer.style.height = `${bottom}px`;
  1805. NativeGridManager.update(this.order.slice(start, end), this.itemMap, 'history', this.windowEl);
  1806. if (this.measureRaf) cancelAnimationFrame(this.measureRaf);
  1807. this.measureRaf = requestAnimationFrame(() => {
  1808. this.measureRaf = 0;
  1809. this._measureVisible();
  1810. });
  1811. },
  1812. scheduleRender() {
  1813. if (this.renderRaf) cancelAnimationFrame(this.renderRaf);
  1814. this.renderRaf = requestAnimationFrame(() => {
  1815. this.renderRaf = 0;
  1816. this.render();
  1817. });
  1818. },
  1819. refreshMemoryPressure() {
  1820. this.scheduleRender();
  1821. },
  1822. update(order, itemMap) {
  1823. this.order = Array.isArray(order) ? order.map(String) : [];
  1824. this.itemMap = itemMap || STATE.items;
  1825. this.scheduleRender();
  1826. },
  1827. clear() {
  1828. if (this.renderRaf) cancelAnimationFrame(this.renderRaf);
  1829. if (this.measureRaf) cancelAnimationFrame(this.measureRaf);
  1830. this.renderRaf = 0;
  1831. this.measureRaf = 0;
  1832. this.resizeObserver?.disconnect();
  1833. this.resizeObserver = null;
  1834. this.measurements.clear();
  1835. if (this.windowEl) NativeGridManager.clear(this.windowEl, 'history');
  1836. if (this.container) {
  1837. this.container.replaceChildren();
  1838. this.container.classList.remove('history-virtualized');
  1839. }
  1840. this.topSpacer = null;
  1841. this.bottomSpacer = null;
  1842. this.windowEl = null;
  1843. this.container = null;
  1844. this.order = [];
  1845. }
  1846. };
  1847.  
  1848. const App = {
  1849. ac: new AbortController(), perfObserver: null, recentLongTaskMs: 0, smoothedLoad: 0,
  1850. on(target, event, handler, opts = false) { target.addEventListener(event, handler, { ...(typeof opts === 'boolean' ? { capture: opts } : opts), signal: this.ac.signal }); },
  1851. async mount() {
  1852. if (STATE.isMounted) return; resetState(); STATE.isMounted = true; this.ac = new AbortController();
  1853. _statusViewCacheKey = '';
  1854. document.documentElement.style.overflow = document.body.style.overflow = 'hidden'; document.body.classList.toggle('eco-mode', STATE.ecoMode);
  1855. this.ac.signal.addEventListener('abort', () => document.documentElement.style.overflow = document.body.style.overflow = '');
  1856. this.on(window, 'dragover', e => e.preventDefault()); this.on(window, 'drop', e => e.preventDefault());
  1857. this.on(window, 'focus', () => TitleState.handleTabActive());
  1858. this.on(document, 'visibilitychange', () => document.hidden ? TitleState.sync() : TitleState.handleTabActive());
  1859. if ('PerformanceObserver' in window) { this.perfObserver = new PerformanceObserver((list) => { for (const e of list.getEntries()) this.recentLongTaskMs += e.duration; }); this.perfObserver.observe({ entryTypes:['longtask'] }); this.ac.signal.addEventListener('abort', () => this.perfObserver.disconnect()); }
  1860. const metInterval = setInterval(() => runBg(updateHistoryMetrics), 5000); this.ac.signal.addEventListener('abort', () => clearInterval(metInterval));
  1861. const sheet = new CSSStyleSheet(); sheet.replaceSync(UI_CSS); document.adoptedStyleSheets =[...document.adoptedStyleSheets, sheet];
  1862. const appDiv = document.createElement('div'); appDiv.id = 'xai-pro-app-wrapper'; appDiv.append(createMarkupFragment(UI_HTML)); document.body.appendChild(appDiv);
  1863. this.ac.signal.addEventListener('abort', () => { document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== sheet); appDiv.remove(); });
  1864. await StorageDB.init(); await loadDataFromDB(); bindLogic(); await loadHistoryFromDB();
  1865. },
  1866. unmount() { if (!STATE.isMounted) return; JobManager.tasks.forEach(t => t.controller.abort()); this.ac.abort(); PromptSync.clear(); DBQueue.clearPending(); MediaWarmPool.releaseAll(); STATE.items.forEach((_, id) => Store.removeItem(id)); NativeGridManager.clear(); DOM.historyScroller?.clear(); CardRegistry.clear(); RefPayloadCache.clear(); _statusViewCacheKey = ''; setDocumentTitle(originalTitle); resetState(); }
  1867. };
  1868.  
  1869. const checkRoute = (path) => { const p = typeof path === 'string' ? path : location.pathname; const ok = p.startsWith('/playground/imagine') || p.match(/^\/team\/[^\/]+\/imagine/); ok && !STATE.isMounted ? App.mount() : !ok && STATE.isMounted ? App.unmount() : null; };
  1870. navigation.addEventListener('navigate', (e) => { if (e.downloadRequest !== undefined) return; const url = new URL(e.destination.url); if (['blob:', 'data:', 'javascript:'].includes(url.protocol)) return; if (url.pathname !== location.pathname) checkRoute(url.pathname); });
  1871.  
  1872. const UI = {
  1873. showToast(msg, type = 'info') {
  1874. const c = document.getElementById('xai-toast-container'); if(!c) return;
  1875. const icon = type === 'error' ? '❌' : type === 'warn' ? '⚠️' : type === 'success' ? '✅' : 'ℹ️';
  1876. const toast = document.createElement('div'); toast.className = `xai-toast ${type}`;
  1877. const iconEl = document.createElement('span'); iconEl.textContent = icon;
  1878. const msgEl = document.createElement('span'); msgEl.textContent = msg;
  1879. toast.append(iconEl, msgEl);
  1880. c.appendChild(toast); requestAnimationFrame(() => toast.classList.add('show')); setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 400); }, 4000);
  1881. },
  1882. confirm(msg) { return new Promise(resolve => { let dialog = DOM.confirmDialog; DOM.confirmMsg.replaceChildren(createMarkupFragment(msg)); const handler = () => { dialog.removeEventListener('close', handler); resolve(dialog.returnValue); }; dialog.addEventListener('close', handler); dialog.returnValue = ''; dialog.showModal(); }); }
  1883. };
  1884.  
  1885. async function updateHistoryMetrics() {
  1886. let disk = '--'; try { disk = ((await navigator.storage.estimate()).usage / 1048576).toFixed(0) + 'M'; } catch(e){}
  1887. App.smoothedLoad = (App.smoothedLoad * 0.4) + (Math.max(Math.min(App.recentLongTaskMs / 1500, 1), performance.memory ? Math.max(0, Math.min((performance.memory.usedJSHeapSize / (performance.memory.jsHeapSizeLimit || 1) - 0.6) / 0.3, 1)) : 0) * 0.6);
  1888. App.recentLongTaskMs = 0; const loadPercent = Math.round(App.smoothedLoad * 100), isAutoEco = isAutoEcoEnabled();
  1889. if (!isAutoEco && loadPercent > 80) {
  1890. document.body.classList.add('auto-eco');
  1891. applyMemoryPressureProfile('auto-eco-on');
  1892. } else if (isAutoEco && loadPercent < 45) {
  1893. document.body.classList.remove('auto-eco');
  1894. applyMemoryPressureProfile('auto-eco-off');
  1895. }
  1896. if (DOM.metricSaved) DOM.metricSaved.innerText = STATE.historyOrder.length; if (DOM.metricDisk) DOM.metricDisk.innerText = '⛁\uFE0E ' + disk;
  1897. if (DOM.metricLoad) { DOM.metricLoad.innerText = loadPercent + '%'; DOM.metricLoad.classList.remove('d-none'); }
  1898. }
  1899.  
  1900. function getEligibleRefs() {
  1901. const acceptedType = ActionUtils.getRefType(), maxRefs = ActionUtils.getMaxRefs();
  1902. const eligible = [];
  1903. for (const id of STATE.refOrder) {
  1904. const item = STATE.items.get(id);
  1905. if (item && item.active && item.type === acceptedType && eligible.length < maxRefs) eligible.push(item);
  1906. }
  1907. return { eligible, acceptedType, maxRefs };
  1908. }
  1909.  
  1910. function updateUploadPlaceholderState() {
  1911. if (!DOM.uploadPlaceholder) return; const count = STATE.refOrder.length, max = APP_CONFIG.LIMITS.MAX_REFS_QUEUE;
  1912. DOM.uploadPlaceholder.style.opacity = count >= max ? '0.4' : '1'; DOM.uploadPlaceholder.style.pointerEvents = count >= max ? 'none' : 'auto';
  1913. DOM.uploadPlaceholder.querySelector('.upload-label-main').innerText = count >= max ? 'Limit' : 'Add Media'; if (DOM.refCounter) DOM.refCounter.innerText = count;
  1914. }
  1915.  
  1916. function updateActionUI() { runTransition(_updateActionUIDom); }
  1917. function _updateActionUIDom() {
  1918. const action = STATE.action; DOM.app.dataset.activeAction = action;
  1919. const dOpts = ActionUtils.getDurationOptions(action);
  1920. if (!dOpts.some(o => o.val === STATE.duration)) STATE.duration = dOpts[0].val;
  1921. if (DOM.labelSettingDuration) DOM.labelSettingDuration.innerText = dOpts.find(o => o.val === STATE.duration).text; DOM.settingDuration.dataset.value = STATE.duration; DOM.popoverDuration?._updateOptions?.(dOpts);
  1922. if (DOM.labelSettingBatch) DOM.labelSettingBatch.innerText = STATE.batchSize; if (DOM.settingBatch) DOM.settingBatch.dataset.value = STATE.batchSize;
  1923. const isVideo = ActionUtils.isVideoGeneration(action);
  1924. DOM.popoverAr?._updateOptions?.(APP_CONFIG.ASPECT_RATIOS.map(ar => ({ val: ar.label, text: ar.label, icon: UIUtils.createArIcon(ar.w, ar.h, ar.isAuto, ar.isRef), disabled: isVideo && !ar.isAuto && (ar.imageOnly || !ALLOWED_VIDEO_ARS.has(ar.label.trim())) })));
  1925. if (isVideo && !getAspectRatioOption().isAuto && !ALLOWED_VIDEO_ARS.has(STATE.currentAr)) STATE.currentAr = 'Auto';
  1926. syncAspectRatioUI();
  1927. updateStatusUI(); updateUploadPlaceholderState();
  1928. }
  1929. const renderRefMode = () => { if (DOM.refModeToggle) DOM.refModeToggle.innerText = STATE.refMode === 'multi' ? 'Multi' : 'Queue'; updateActionUI(); };
  1930.  
  1931. const UI_CSS = `
  1932. :root {
  1933. --bg:#2b2d31;
  1934. --bg-center:#1a1b1e;
  1935. --panel:#313338;
  1936. --text-main:#f3f3f3;
  1937. --text-muted:#9e9e9e;
  1938. --danger:#ef4444;
  1939. --warning:#eab308;
  1940. --success:#10b981;
  1941. --accent:#ffffff;
  1942. --border:rgb(from var(--accent) r g b / 8%);
  1943. --border-hover:rgb(from var(--accent) r g b / 20%);
  1944. --bg-hover:rgb(from var(--accent) r g b / 15%);
  1945. --bg-active:rgb(from var(--accent) r g b / 25%);
  1946. --z-app:9999999;
  1947. --z-local-header:20;
  1948. --z-prompt:100;
  1949. }
  1950. #xai-pro-app {
  1951. position:fixed;
  1952. inset:0;
  1953. z-index:var(--z-app);
  1954. background:var(--bg);
  1955. color:var(--text-main);
  1956. font-family:ui-sans-serif,system-ui,sans-serif;
  1957. display:flex;
  1958. gap:4px;
  1959. padding:4px;
  1960. box-sizing:border-box;
  1961. overflow:hidden;
  1962. }
  1963. #xai-pro-app * {
  1964. box-sizing:border-box;
  1965. scrollbar-color:var(--bg-hover) transparent;
  1966. }
  1967. .col-left,
  1968. .col-right {
  1969. overflow:hidden;
  1970. display:flex;
  1971. flex-direction:column;
  1972. gap:4px;
  1973. flex-shrink:0;
  1974. }
  1975. .col-left {
  1976. width:clamp(24px,var(--left-panel-width,320px),50vw);
  1977. min-width:200px;
  1978. max-width:50vw;
  1979. resize:horizontal;
  1980. }
  1981. .col-right {
  1982. width:clamp(24px,var(--right-panel-width,320px),50vw);
  1983. min-width:240px;
  1984. max-width:50vw;
  1985. direction:rtl;
  1986. resize:horizontal;
  1987. }
  1988. .col-right-inner {
  1989. direction:ltr;
  1990. display:flex;
  1991. flex-direction:column;
  1992. gap:4px;
  1993. height:100%;
  1994. width:100%;
  1995. flex:1;
  1996. }
  1997. .col-left::-webkit-scrollbar,
  1998. .col-right::-webkit-scrollbar {
  1999. display:none;
  2000. }
  2001. ::-webkit-resizer {
  2002. background:transparent;
  2003. border-width:8px;
  2004. border-style:solid;
  2005. border-color:transparent rgb(from var(--accent) r g b/25%) rgb(from var(--accent) r g b/25%) transparent;
  2006. }
  2007. .col-right::-webkit-resizer {
  2008. border-color:transparent transparent rgb(from var(--accent) r g b/25%) rgb(from var(--accent) r g b/25%);
  2009. }
  2010. .col-center {
  2011. flex:1;
  2012. display:flex;
  2013. flex-direction:column;
  2014. min-width:300px;
  2015. position:relative;
  2016. overflow:hidden;
  2017. background:var(--bg-center);
  2018. border-radius:12px;
  2019. box-shadow:inset 0 0 0 1px var(--border);
  2020. }
  2021. #xai-current-images {
  2022. position:absolute;
  2023. inset:0;
  2024. z-index:1;
  2025. container-type:size;
  2026. overflow-y:auto;
  2027. overflow-x:hidden;
  2028. display:flex;
  2029. flex-wrap:wrap;
  2030. align-content:flex-start;
  2031. justify-content:center;
  2032. gap:0;
  2033. padding:0 0 300px 0;
  2034. scroll-behavior:smooth;
  2035. overscroll-behavior:contain;
  2036. -webkit-overflow-scrolling:touch;
  2037. }
  2038. .prompt-panel-wrapper {
  2039. position:absolute;
  2040. bottom:0;
  2041. left:0;
  2042. right:0;
  2043. width:100%;
  2044. max-width:none;
  2045. padding:0 16px 16px;
  2046. z-index:var(--z-prompt);
  2047. display:flex;
  2048. flex-direction:column;
  2049. pointer-events:none;
  2050. }
  2051. .panel {
  2052. background:var(--panel);
  2053. border:1px solid var(--border);
  2054. border-radius:12px;
  2055. display:flex;
  2056. flex-direction:column;
  2057. overflow:hidden;
  2058. height:100%;
  2059. }
  2060. .panel-header {
  2061. padding:4px 6px;
  2062. display:flex;
  2063. align-items:center;
  2064. border-bottom:1px solid var(--border);
  2065. height:42px;
  2066. flex-shrink:0;
  2067. gap:6px;
  2068. justify-content:space-between;
  2069. }
  2070. #xai-history,
  2071. #xai-ref-list {
  2072. position:relative;
  2073. overflow-y:auto;
  2074. overflow-x:hidden;
  2075. padding:4px;
  2076. flex:1;
  2077. min-height:0;
  2078. container-type:size;
  2079. display:flex;
  2080. flex-direction:column;
  2081. gap:4px;
  2082. }
  2083. #xai-history.history-virtualized {
  2084. display:block;
  2085. }
  2086. .history-spacer,
  2087. .history-window {
  2088. width:100%;
  2089. }
  2090. .history-spacer {
  2091. flex:0 0 auto;
  2092. pointer-events:none;
  2093. }
  2094. .history-window {
  2095. display:block;
  2096. }
  2097. .history-window > xai-card.is-history:last-child {
  2098. margin-bottom:0;
  2099. }
  2100. #xai-ref-list {
  2101. padding-right:2px;
  2102. }
  2103. .flex-center { display:flex; align-items:center; justify-content:center; }
  2104. .d-none { display:none !important; }
  2105. .d-flex { display:flex !important; }
  2106. .text-muted { color:var(--text-muted); }
  2107. .text-success { color:var(--success); }
  2108. .text-center { text-align:center; }
  2109. .w-100 { width:100%; }
  2110. .justify-end { justify-content:flex-end; }
  2111. .gap-2 { gap:8px; }
  2112. #xai-ref-list:has(> xai-card:nth-child(2)) xai-card.is-reference { max-height:calc(100cqh / 2 - 4px); }
  2113. #xai-ref-list:has(> xai-card:nth-child(3)) xai-card.is-reference { max-height:calc(100cqh / 3 - 4px); }
  2114. #xai-ref-list:has(> xai-card:nth-child(4)) xai-card.is-reference { max-height:calc(100cqh / 4 - 4px); }
  2115. #xai-ref-list:has(> xai-card:nth-child(5)) xai-card.is-reference { max-height:calc(100cqh / 5 - 4px); }
  2116. .xai-btn {
  2117. display:inline-flex;
  2118. align-items:center;
  2119. justify-content:center;
  2120. gap:6px;
  2121. height:36px;
  2122. padding:0 16px;
  2123. white-space:nowrap;
  2124. flex-shrink:0;
  2125. border-radius:20px;
  2126. border:none;
  2127. outline:none;
  2128. text-decoration:none;
  2129. font-family:inherit;
  2130. font-size:13px;
  2131. font-weight:600;
  2132. cursor:pointer;
  2133. background:rgb(from var(--accent) r g b/12%);
  2134. color:var(--text-main);
  2135. transition:.15s ease;
  2136. box-shadow:inset 0 0 0 1px transparent;
  2137. }
  2138. .xai-btn:hover:not(:disabled) { background:rgb(from var(--accent) r g b/20%); box-shadow:inset 0 0 0 1px rgb(from var(--accent) r g b/25%); }
  2139. .xai-btn:active { scale:.96; }
  2140. .xai-btn--square { width:32px; height:32px; padding:0; border-radius:8px; font-size:16px; }
  2141. .xai-btn--icon-sm { width:28px; height:28px; padding:0; border-radius:6px; font-size:14px; }
  2142. .xai-btn--danger { background:rgb(from var(--danger) r g b/15%); color:var(--danger); box-shadow:inset 0 0 0 1px rgb(from var(--danger) r g b/20%); }
  2143. .xai-btn--danger:hover:not(:disabled) { background:var(--danger); color:#fff; box-shadow:inset 0 0 0 1px var(--danger); }
  2144. .xai-btn--warning { background:rgb(from var(--warning) r g b/15%); color:var(--warning); box-shadow:inset 0 0 0 1px rgb(from var(--warning) r g b/20%); }
  2145. .xai-btn--warning:hover:not(:disabled) { background:var(--warning); color:#fff; box-shadow:inset 0 0 0 1px var(--warning); }
  2146. .xai-btn--orange { background:rgb(249 115 22 / 15%); color:#f97316; box-shadow:inset 0 0 0 1px rgb(249 115 22 / 20%); }
  2147. .xai-btn--orange:hover:not(:disabled) { background:#f97316; color:#fff; box-shadow:inset 0 0 0 1px #f97316; }
  2148. .xai-btn--success { background:var(--success); color:#fff; box-shadow:0 2px 10px rgb(0 0 0/20%); }
  2149. .xai-btn--run { background:#ffffff; color:#0f1419; box-shadow:none; }
  2150. .xai-btn--run:hover:not(:disabled) { background:#d7dbdc; box-shadow:none; }
  2151. .xai-btn--stop { background:var(--danger); color:#fff; }
  2152. .xai-btn--circle-lg {
  2153. width:42px;
  2154. height:42px;
  2155. padding:0;
  2156. border-radius:50%;
  2157. font-size:22px;
  2158. margin:0 -4px -6px 0;
  2159. box-shadow:0 4px 12px rgb(0 0 0/20%);
  2160. }
  2161. .xai-btn--circle-lg:hover:not(:disabled) { scale:1.05; box-shadow:0 6px 16px rgb(0 0 0/30%); }
  2162. .xai-btn--circle-lg.is-running { animation:xai-pulse-stop 2s infinite; }
  2163. @keyframes xai-pulse-stop {
  2164. 0% { box-shadow:0 0 0 0 rgb(from var(--danger) r g b/40%); }
  2165. 70% { box-shadow:0 0 0 8px rgb(from var(--danger) r g b/0%); }
  2166. 100% { box-shadow:0 0 0 0 rgb(from var(--danger) r g b/0%); }
  2167. }
  2168. .metrics-container {
  2169. display:flex;
  2170. gap:6px;
  2171. align-items:center;
  2172. overflow:hidden;
  2173. flex:1;
  2174. }
  2175. .metric-pill {
  2176. display:inline-flex;
  2177. justify-content:center;
  2178. align-items:center;
  2179. background:rgb(0 0 0/45%);
  2180. height:36px;
  2181. box-sizing:border-box;
  2182. border-radius:20px;
  2183. font-family:monospace;
  2184. font-size:13px;
  2185. font-variant-numeric:tabular-nums;
  2186. box-shadow:inset 0 1px 4px rgb(0 0 0/50%),0 1px 0 rgb(255 255 255/4%);
  2187. color:#a1a1aa;
  2188. border:1px solid transparent;
  2189. white-space:nowrap;
  2190. flex-shrink:1;
  2191. overflow:hidden;
  2192. text-overflow:ellipsis;
  2193. transition:color .3s;
  2194. }
  2195. #xai-ref-counter { width:40px; min-width:40px; padding:0; justify-content:center; }
  2196. #metric-saved { width:50px; min-width:50px; padding:0; justify-content:center; }
  2197. #metric-load { width:48px; min-width:48px; padding:0; justify-content:center; }
  2198. #metric-disk { width:56px; min-width:56px; padding:0; justify-content:center; }
  2199. .prompt-container {
  2200. pointer-events:auto;
  2201. max-width:1600px;
  2202. width:100%;
  2203. margin:0 auto;
  2204. padding:12px 16px;
  2205. display:flex;
  2206. flex-direction:column;
  2207. border-radius:24px;
  2208. position:relative;
  2209. background:rgb(28 28 28 / 75%);
  2210. border:1px solid rgb(255 255 255/8%);
  2211. box-shadow:0 4px 32px rgb(0 0 0/40%);
  2212. transition:background .4s ease .5s,border-color .4s ease .5s;
  2213. }
  2214. .prompt-container:hover,
  2215. .prompt-container:focus-within {
  2216. background:rgba(43,45,49,1);
  2217. border-color:rgb(255 255 255/15%);
  2218. transition:background .15s ease 0s,border-color .15s ease 0s;
  2219. }
  2220. .prompt-container.drag-over {
  2221. background:color-mix(in srgb,var(--success) 40%,rgba(43,45,49,1));
  2222. border-color:var(--success);
  2223. }
  2224. .prompt-container.editing-ref {
  2225. background:rgb(17 40 28) !important;
  2226. border-color:var(--success) !important;
  2227. box-shadow:none !important;
  2228. transition:none !important;
  2229. }
  2230. .textarea-wrapper {
  2231. margin-bottom:8px;
  2232. display:flex;
  2233. flex-direction:column;
  2234. transition:mask-image .2s,-webkit-mask-image .2s;
  2235. }
  2236. .textarea-wrapper.can-scroll {
  2237. -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  2238. mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  2239. }
  2240. #xai-api-prompt {
  2241. width:100%;
  2242. background:transparent;
  2243. border:none;
  2244. color:var(--text-main);
  2245. font-size:16px;
  2246. outline:none;
  2247. resize:none;
  2248. overflow-y:auto;
  2249. line-height:1.5;
  2250. field-sizing:content;
  2251. min-height:50px;
  2252. max-height:50px;
  2253. padding:0 4px;
  2254. scrollbar-width:thin;
  2255. transition:max-height .4s cubic-bezier(0.4,0,0.2,1) .5s;
  2256. }
  2257. .prompt-container:hover #xai-api-prompt,
  2258. .prompt-container:focus-within #xai-api-prompt { max-height:270px; transition:max-height .2s cubic-bezier(0.4,0,0.2,1) 0s; }
  2259. .prompt-actions {
  2260. display:flex;
  2261. flex-wrap:wrap-reverse;
  2262. min-height:36px;
  2263. gap:12px;
  2264. justify-content:space-between;
  2265. align-items:center;
  2266. }
  2267. .action-row-left {
  2268. display:flex;
  2269. gap:8px;
  2270. align-items:center;
  2271. flex-wrap:wrap;
  2272. flex:1 1 50%;
  2273. min-width:260px;
  2274. }
  2275. .action-row-right {
  2276. display:flex;
  2277. gap:12px;
  2278. align-items:center;
  2279. flex:1 1 auto;
  2280. justify-content:flex-end;
  2281. min-width:220px;
  2282. }
  2283. #xai-upload-placeholder {
  2284. flex:1;
  2285. margin:0;
  2286. gap:4px;
  2287. font-weight:500;
  2288. padding:0 8px;
  2289. font-size:13px;
  2290. }
  2291. body.is-dragging #xai-upload-placeholder {
  2292. background:rgb(from var(--success) r g b/10%);
  2293. box-shadow:inset 0 0 0 1px rgb(from var(--success) r g b/50%);
  2294. color:var(--success);
  2295. }
  2296. #xai-upload-placeholder.drag-over {
  2297. background:rgb(from var(--success) r g b/20%) !important;
  2298. box-shadow:inset 0 0 0 2px var(--success) !important;
  2299. color:#fff;
  2300. }
  2301. #xai-api-res-img,
  2302. #xai-api-res-vid,
  2303. #btn-setting-batch,
  2304. #btn-setting-duration,
  2305. #btn-setting-ar,
  2306. #btn-setting-loops { display:none; }
  2307. [data-active-action="gen_image"] #xai-api-res-img,
  2308. [data-active-action="gen_image"] #btn-setting-batch,
  2309. [data-active-action="gen_image"] #btn-setting-ar,
  2310. [data-active-action="gen_image"] #btn-setting-loops { display:inline-flex; }
  2311. [data-active-action="gen_video"] #xai-api-res-vid,
  2312. [data-active-action="gen_video"] #btn-setting-duration,
  2313. [data-active-action="gen_video"] #btn-setting-ar,
  2314. [data-active-action="gen_video"] #btn-setting-loops { display:inline-flex; }
  2315. [data-active-action="extend_video"] #btn-setting-duration,
  2316. [data-active-action="extend_video"] #btn-setting-loops { display:inline-flex; }
  2317. [data-active-action="edit_video"] #btn-setting-loops { display:inline-flex; }
  2318. :is(.xai-custom-dialog,.modal-box) {
  2319. margin:auto;
  2320. padding:0;
  2321. outline:none;
  2322. border:none;
  2323. background:transparent;
  2324. transition:display .12s allow-discrete,overlay .12s allow-discrete;
  2325. align-items:center;
  2326. justify-content:center;
  2327. }
  2328. :is(.xai-custom-dialog,.modal-box)::backdrop {
  2329. background:rgba(0,0,0,.5);
  2330. transition:display .12s allow-discrete,overlay .12s allow-discrete,background-color .12s;
  2331. }
  2332. :is(.xai-custom-dialog,.modal-box)[open] { display:flex; }
  2333. .dialog-inner {
  2334. background:var(--panel);
  2335. border:1px solid var(--border);
  2336. border-radius:20px;
  2337. color:var(--text-main);
  2338. padding:16px;
  2339. contain:layout paint style;
  2340. transition:opacity .12s;
  2341. opacity:0;
  2342. }
  2343. :is(.xai-custom-dialog,.modal-box)[open] .dialog-inner { opacity:1; }
  2344. @starting-style {
  2345. :is(.xai-custom-dialog,.modal-box)[open] .dialog-inner { opacity:0; }
  2346. :is(.xai-custom-dialog,.modal-box)[open]::backdrop { background-color:rgba(0,0,0,0); }
  2347. }
  2348. .xai-lightbox-dialog {
  2349. margin:auto;
  2350. outline:none;
  2351. border:none;
  2352. padding:0;
  2353. background:transparent;
  2354. max-width:100vw;
  2355. max-height:100dvh;
  2356. width:100vw;
  2357. height:100dvh;
  2358. overflow:hidden;
  2359. }
  2360. .xai-lightbox-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }
  2361. .xai-lightbox-dialog[open] {
  2362. display:flex;
  2363. align-items:center;
  2364. justify-content:center;
  2365. }
  2366. .lightbox-frame {
  2367. position:relative;
  2368. display:grid;
  2369. place-items:center;
  2370. width:100%;
  2371. height:100%;
  2372. padding:24px;
  2373. max-width:100%;
  2374. max-height:100%;
  2375. contain:layout paint style;
  2376. isolation:isolate;
  2377. }
  2378. .lightbox-stage {
  2379. position:relative;
  2380. display:grid;
  2381. place-items:center;
  2382. width:min(calc(100vw - 48px), calc((100dvh - 48px) * var(--lightbox-ratio, 16 / 9)));
  2383. max-width:calc(100vw - 48px);
  2384. max-height:calc(100dvh - 48px);
  2385. aspect-ratio:var(--lightbox-ratio, 16 / 9);
  2386. min-width:160px;
  2387. min-height:160px;
  2388. isolation:isolate;
  2389. }
  2390. .lightbox-frame::before {
  2391. content:'';
  2392. position:absolute;
  2393. inset:24px;
  2394. border-radius:28px;
  2395. background:radial-gradient(circle at 50% 20%, rgb(255 255 255 / 10%), transparent 55%), linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%));
  2396. opacity:.9;
  2397. pointer-events:none;
  2398. z-index:0;
  2399. }
  2400. .lightbox-frame.is-loaded .lightbox-media--preview {
  2401. opacity:0;
  2402. filter:blur(14px);
  2403. transform:scale(1.02);
  2404. }
  2405. .xai-custom-popover {
  2406. position:fixed;
  2407. inset:auto;
  2408. margin:0;
  2409. padding:6px;
  2410. border:1px solid rgb(from var(--accent) r g b/15%);
  2411. background:rgb(35 35 35/98%);
  2412. border-radius:20px;
  2413. max-height:90dvh;
  2414. overflow-y:auto;
  2415. scrollbar-gutter:stable;
  2416. contain:layout paint style;
  2417. color:var(--text-main);
  2418. transition:display .1s allow-discrete,overlay .1s allow-discrete,opacity .1s;
  2419. opacity:0;
  2420. flex-direction:column;
  2421. gap:2px;
  2422. }
  2423. .xai-custom-popover:popover-open {
  2424. display:flex;
  2425. opacity:1;
  2426. }
  2427. @starting-style {
  2428. .xai-custom-popover:popover-open { opacity:0; }
  2429. }
  2430. .popover-item {
  2431. padding:8px 14px;
  2432. font-size:14px;
  2433. font-weight:500;
  2434. border-radius:12px;
  2435. cursor:pointer;
  2436. display:flex;
  2437. align-items:center;
  2438. gap:10px;
  2439. transition:background-color .1s,color .1s,opacity .1s;
  2440. }
  2441. .popover-item:hover { background:var(--bg-hover); }
  2442. .popover-item.active { background:var(--bg-active); color:#fff; }
  2443. .popover-item.disabled { opacity:.4; pointer-events:none; }
  2444. .ar-icon-shell { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; }
  2445. .ar-icon-frame { border:1.5px solid currentColor; border-radius:2px; opacity:.72; }
  2446. .ar-icon-letter { width:12px; height:12px; display:flex; align-items:center; justify-content:center; border:1px dashed currentColor; border-radius:2px; font-size:8px; line-height:1; font-weight:700; opacity:.82; }
  2447. #btn-master-action { anchor-name:--a-act; }
  2448. #popover-action { position-anchor:--a-act; bottom:anchor(top); left:anchor(left); margin-bottom:8px; min-width:max(130px,anchor-size(width)); position-try-fallbacks:flip-block; }
  2449. #btn-setting-ar { anchor-name:--a-ar; gap:3px; padding:0 10px 0 8px; align-items:center; }
  2450. #ar-selected-icon { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 18px; }
  2451. #ar-selected-text { display:inline-flex; align-items:center; line-height:1; }
  2452. #popover-ar { position-anchor:--a-ar; bottom:anchor(top); left:anchor(left); margin-bottom:8px; min-width:max-content; position-try-fallbacks:flip-block; grid-template-columns:1fr 1fr; grid-auto-flow:row; gap:4px; padding:6px; justify-items:stretch; align-items:stretch; }
  2453. #popover-ar:popover-open { display:grid; }
  2454. #popover-ar .popover-item { padding:5px 8px; display:flex; align-items:center; justify-content:flex-start; gap:6px; min-width:85px; }
  2455. #popover-ar .popover-item span { text-align:left; line-height:1; }
  2456. #popover-ar .popover-item.no-icon { gap:0; }
  2457. #popover-ar .popover-icon { display:flex; align-items:center; justify-content:center; width:18px; height:18px; margin:0; flex:0 0 18px; }
  2458. #btn-setting-batch { anchor-name:--a-b; }
  2459. #popover-batch { position-anchor:--a-b; bottom:anchor(top); left:anchor(left); margin-bottom:8px; position-try-fallbacks:flip-block; min-width:60px; padding:4px; max-height:450px; overflow-y:auto; }
  2460. #popover-batch .popover-item { padding:6px 12px; justify-content:center; }
  2461. #btn-setting-duration { anchor-name:--a-d; }
  2462. #popover-duration { position-anchor:--a-d; bottom:anchor(top); left:anchor(left); margin-bottom:8px; min-width:max(130px,anchor-size(width)); position-try-fallbacks:flip-block; }
  2463. #xai-settings-btn { anchor-name:--a-set; }
  2464. #popover-settings { position-anchor:--a-set; bottom:anchor(top); left:anchor(left); margin-bottom:8px; position-try-fallbacks:flip-block; min-width:240px; }
  2465. .ar-dropdown-icon { font-size:10px; opacity:.6; pointer-events:none; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
  2466. .fav-item {
  2467. display:flex;
  2468. align-items:center;
  2469. justify-content:space-between;
  2470. padding:6px 10px;
  2471. border-radius:8px;
  2472. gap:10px;
  2473. cursor:pointer;
  2474. }
  2475. .fav-item:hover { background:var(--bg-hover); }
  2476. .fav-item.pending {
  2477. outline:1px dashed var(--success);
  2478. outline-offset:-1px;
  2479. background:rgb(from var(--success) r g b/10%);
  2480. }
  2481. .fav-text {
  2482. flex:1;
  2483. font-size:14px;
  2484. overflow:hidden;
  2485. text-overflow:ellipsis;
  2486. white-space:nowrap;
  2487. }
  2488. #xai-toast-container {
  2489. position:absolute;
  2490. inset:auto 0 100% 0;
  2491. display:flex;
  2492. flex-direction:column;
  2493. justify-content:flex-end;
  2494. align-items:center;
  2495. gap:8px;
  2496. pointer-events:none;
  2497. width:100%;
  2498. z-index:var(--z-prompt);
  2499. margin-bottom:12px;
  2500. }
  2501. .xai-toast {
  2502. background:rgb(30 30 30/95%);
  2503. border:1px solid var(--border);
  2504. border-radius:12px;
  2505. padding:8px 16px;
  2506. color:var(--text-main);
  2507. font-size:13px;
  2508. font-weight:500;
  2509. pointer-events:auto;
  2510. display:flex;
  2511. align-items:center;
  2512. gap:8px;
  2513. opacity:0;
  2514. transition:opacity .18s ease;
  2515. }
  2516. .xai-toast.show { opacity:1; }
  2517. .floating-edit-label {
  2518. position:absolute;
  2519. top:-36px;
  2520. left:50%;
  2521. translate:-50% 0;
  2522. background:rgb(16 185 129);
  2523. color:#fff;
  2524. padding:6px 16px;
  2525. border-radius:20px;
  2526. font-size:14px;
  2527. font-weight:700;
  2528. pointer-events:none;
  2529. opacity:0;
  2530. transition:opacity .12s ease,top .12s ease;
  2531. z-index:var(--z-prompt);
  2532. border:1px solid rgb(from var(--accent) r g b/20%);
  2533. }
  2534. .floating-edit-label.show {
  2535. opacity:1;
  2536. top:-44px;
  2537. }
  2538. .btn-collapse {
  2539. width:18px;
  2540. min-width:18px;
  2541. height:32px;
  2542. padding:0;
  2543. display:flex;
  2544. align-items:center;
  2545. justify-content:center;
  2546. font-size:16px;
  2547. color:var(--text-muted);
  2548. background:transparent;
  2549. border-radius:4px;
  2550. transition:background-color .15s,color .15s;
  2551. cursor:pointer;
  2552. border:none;
  2553. outline:none;
  2554. }
  2555. .btn-collapse:hover {
  2556. background:var(--bg-hover);
  2557. color:var(--text-main);
  2558. }
  2559. .col-left .btn-collapse { margin-right:-4px; }
  2560. .col-right .btn-collapse { margin-left:-4px; }
  2561. #btn-collapse-left::before { content:"${APP_CONFIG.ICONS.collapseLeft}"; }
  2562. #btn-collapse-left[aria-expanded="false"]::before { content:"${APP_CONFIG.ICONS.collapseRight}"; }
  2563. #btn-collapse-right::before { content:"${APP_CONFIG.ICONS.collapseRight}"; }
  2564. #btn-collapse-right[aria-expanded="false"]::before { content:"${APP_CONFIG.ICONS.collapseLeft}"; }
  2565. :is(.col-left,.col-right).is-collapsed {
  2566. width:20px !important;
  2567. min-width:20px !important;
  2568. resize:none;
  2569. }
  2570. :is(.col-left,.col-right).is-collapsed :is(#history-metrics,#xai-history,#xai-upload-placeholder,#xai-ref-counter,#xai-ref-mode-toggle,#xai-ref-list,#xai-api-file) {
  2571. display:none !important;
  2572. }
  2573. :is(.col-left,.col-right).is-collapsed .panel-header {
  2574. padding:0;
  2575. height:100%;
  2576. border-bottom:none;
  2577. flex-direction:column;
  2578. align-items:stretch;
  2579. justify-content:stretch;
  2580. }
  2581. :is(.col-left,.col-right).is-collapsed .btn-collapse {
  2582. width:100%;
  2583. min-width:100%;
  2584. height:100%;
  2585. margin:0;
  2586. border-radius:0;
  2587. font-size:20px;
  2588. }
  2589. .input-loop {
  2590. width:44px;
  2591. background:transparent;
  2592. border:none;
  2593. color:#fff;
  2594. font-size:14px;
  2595. font-weight:600;
  2596. text-align:center;
  2597. outline:none;
  2598. padding:0;
  2599. }
  2600. .input-popover {
  2601. width:45px;
  2602. height:24px;
  2603. background:rgb(0 0 0/30%);
  2604. border:1px solid var(--border);
  2605. color:#fff;
  2606. font-size:13px;
  2607. border-radius:4px;
  2608. text-align:center;
  2609. outline:none;
  2610. }
  2611. .input-popover-lg { width:55px; }
  2612. .flex-between { display:flex; justify-content:space-between; }
  2613. .dialog-content {
  2614. display:flex;
  2615. flex-direction:column;
  2616. gap:2px;
  2617. max-height:85vh;
  2618. overflow-y:auto;
  2619. padding:8px;
  2620. scrollbar-width:thin;
  2621. scrollbar-gutter:stable;
  2622. }
  2623. .lightbox-media {
  2624. grid-area:1 / 1;
  2625. width:100%;
  2626. height:100%;
  2627. max-width:100%;
  2628. max-height:100%;
  2629. object-fit:contain;
  2630. display:block;
  2631. user-select:none;
  2632. outline:none;
  2633. border-radius:12px;
  2634. box-shadow:0 24px 64px rgb(0 0 0 / 45%);
  2635. transition:opacity .18s ease,filter .28s ease,transform .28s ease;
  2636. opacity:0;
  2637. position:relative;
  2638. z-index:1;
  2639. background:rgb(0 0 0 / 12%);
  2640. }
  2641. .lightbox-media.is-visible { opacity:1; }
  2642. .lightbox-media--preview { filter:blur(10px); transform:scale(1.015); }
  2643. .lightbox-media--full { z-index:2; }
  2644. .lightbox-media--video { background:rgb(0 0 0 / 35%); }
  2645. .dl-abs-btn {
  2646. position:absolute;
  2647. top:12px;
  2648. right:12px;
  2649. pointer-events:auto;
  2650. background:var(--panel) !important;
  2651. color:var(--text-main) !important;
  2652. border:1px solid var(--border) !important;
  2653. border-radius:8px;
  2654. width:36px;
  2655. height:36px;
  2656. display:flex;
  2657. align-items:center;
  2658. justify-content:center;
  2659. z-index:1000;
  2660. box-shadow:0 4px 16px rgba(0,0,0,.8) !important;
  2661. transition:background-color .15s,transform .15s;
  2662. }
  2663. .dl-abs-btn:hover {
  2664. background:var(--bg-hover) !important;
  2665. scale:1.05;
  2666. }
  2667. :is(.eco-mode,.auto-eco) * {
  2668. backdrop-filter:none !important;
  2669. box-shadow:none !important;
  2670. }
  2671. @media (prefers-reduced-motion: reduce) {
  2672. .xai-btn,
  2673. .xai-toast,
  2674. .floating-edit-label,
  2675. .dialog-inner,
  2676. .xai-custom-popover,
  2677. #xai-api-prompt,
  2678. .textarea-wrapper {
  2679. transition:none !important;
  2680. animation:none !important;
  2681. }
  2682. }
  2683. `;
  2684. const UI_HTML = buildAppHtml();
  2685.  
  2686. async function enforceHistoryLimit() {
  2687. if (STATE.historyOrder.length > APP_CONFIG.LIMITS.MAX_HISTORY) {
  2688. const ids = STATE.historyOrder.slice(APP_CONFIG.LIMITS.MAX_HISTORY);
  2689. const removed = new Set(ids.map(String));
  2690. DBQueue.forgetItems(ids);
  2691. STATE.historyOrder = STATE.historyOrder.slice(0, APP_CONFIG.LIMITS.MAX_HISTORY);
  2692. STATE.currentOrder = STATE.currentOrder.filter(id => !removed.has(String(id)));
  2693. if (STATE.refOrder.some(id => removed.has(String(id)))) {
  2694. STATE.refOrder = STATE.refOrder.filter(id => !removed.has(String(id)));
  2695. ids.forEach(id => deleteRefPrompt(String(id)));
  2696. updateRefState();
  2697. }
  2698. await StorageDB.deleteItemsBulk(ids);
  2699. ids.forEach(id => Store.removeItem(id));
  2700. }
  2701. }
  2702.  
  2703. async function loadDataFromDB() {
  2704. STATE.prompts = sanitizePromptStore(await StorageDB.loadData('prompts'), STATE.prompts);
  2705. STATE.promptDrafts = sanitizePromptStore(await StorageDB.loadData('promptDrafts'), STATE.prompts);
  2706. STATE.favPrompts = sanitizeFavPromptStore(await StorageDB.loadData('favPrompts'), STATE.favPrompts);
  2707. STATE.refPrompts = sanitizeRefPromptStore(await StorageDB.loadData('refPrompts'), STATE.refPrompts);
  2708. const refData = sanitizeRefDataStore(await StorageDB.loadData('refData')); if (refData) STATE.refDataTmp = refData;
  2709. STATE.currentOrderTmp = sanitizeIdListStore(await StorageDB.loadData('currentOrder'));
  2710. STATE.pendingVideos = sanitizePendingVideosStore(await StorageDB.loadData('pendingVideos'));
  2711. }
  2712.  
  2713. function recoverPendingVideos() {
  2714. if (!STATE.pendingVideos || !STATE.pendingVideos.length) return; const now = Date.now();
  2715. STATE.pendingVideos.forEach(v => {
  2716. if (now - v.timestamp > 1000 * 60 * 60 * 2) return;
  2717. const ac = new AbortController();
  2718. pollVideoTask(v.reqId, ac.signal, -1, () => {}).then(async videoUrl => {
  2719. if (videoUrl) {
  2720. let posterData = null;
  2721. try { posterData = await MediaUtils.processSource(await fetchBlobCSP(videoUrl, '0-500000'), 'video', getThumbMaxDim(), getThumbQuality()); if (!posterData.thumbBlob) throw new Error('Partial failed'); }
  2722. catch (e) { try { posterData = await MediaUtils.processSource(await fetchBlobCSP(videoUrl, null), 'video', getThumbMaxDim(), getThumbQuality()); } catch (err) {} }
  2723. const id = crypto.randomUUID();
  2724. Store.commitNewItem({ id, type: 'video', mimeType: 'video/mp4', prompt: Pipeline.normalizePrompt(v.prompt), filename: `Grok Video (Recovered) - ${makeTimestamp()}.mp4`, ratio: posterData?.ratio || 16/9, originalUrl: videoUrl, downloaded: false, lqip: posterData?.lqip || null, isUploadedRef: false }, 'currentOrder');
  2725. Store.prependHistory([id]); await enforceHistoryLimit();
  2726. UI.showToast("Recovered a background video generation!", "success");
  2727. }
  2728. }).catch(e => {}).finally(() => { STATE.pendingVideos = STATE.pendingVideos.filter(pv => pv.reqId !== v.reqId); persistPendingVideos(); });
  2729. });
  2730. }
  2731. async function cleanupOrphanMediaFiles() {
  2732. try {
  2733. const validIds = new Set(STATE.items.keys()), dir = await OPFS.initDir(); let deletedCount = 0;
  2734. for await (const [name] of dir.entries()) {
  2735. if (!validIds.has(name.split('_')[0])) {
  2736. await dir.removeEntry(name).catch(()=>{});
  2737. deletedCount++;
  2738. }
  2739. }
  2740. if (deletedCount > 0) addLog('INFO', `GC removed ${deletedCount} orphan OPFS files`);
  2741. } catch(e) {}
  2742. }
  2743.  
  2744. async function loadHistoryFromDB() {
  2745. const allMeta = await StorageDB.loadAllMeta();
  2746. const historyIds = [];
  2747. const phantomIds = [];
  2748. for (let i = 0; i < allMeta.length; i++) {
  2749. const m = allMeta[i];
  2750. m.id = String(m.id);
  2751. if (Pipeline.isPhantomMeta(m)) { phantomIds.push(m.id); continue; }
  2752. Store.addItem(m);
  2753. if (!m.isUploadedRef) historyIds.push(m.id);
  2754. if (i > 0 && i % 200 === 0) await yieldToMain();
  2755. }
  2756. if (phantomIds.length > 0) await StorageDB.deleteItemsBulk(phantomIds);
  2757. STATE.historyOrder = historyIds;
  2758.  
  2759. if (STATE.refDataTmp) { STATE.refOrder = STATE.refDataTmp.map(r => String(r.id)).filter(id => STATE.items.has(id)); STATE.refDataTmp.forEach(r => { const item = STATE.items.get(String(r.id)); if (item) item.active = r.active; }); delete STATE.refDataTmp; updateRefState(); }
  2760. STATE.currentOrder = sanitizeIdListStore(STATE.currentOrderTmp).filter(id => {
  2761. const item = STATE.items.get(String(id));
  2762. return item && !Pipeline.isTransientItem(item);
  2763. });
  2764. delete STATE.currentOrderTmp;
  2765. await enforceHistoryLimit();
  2766. recoverPendingVideos();
  2767. runBg(cleanupOrphanMediaFiles);
  2768. }
  2769.  
  2770. function renderRefList() {
  2771. STATE.refOrder.forEach(id => {
  2772. const item = STATE.items.get(id);
  2773. if (item && item.active === undefined) item.active = true;
  2774. });
  2775. NativeGridManager.update(STATE.refOrder, STATE.items, 'reference');
  2776. updateStatusUI();
  2777. }
  2778.  
  2779. function toggleRefPrompt(id) {
  2780. if (STATE.activeRefPromptId === id) return saveAndCloseRefPrompt(true);
  2781. if (STATE.activeRefPromptId) saveAndCloseRefPrompt(true);
  2782. else if (DOM.prompt) setActionPromptDraft(STATE.action, getEditorPromptValue());
  2783. STATE.activeRefPromptId = id; CardRegistry.maps.reference.forEach(card => card.classList.remove('is-editing'));
  2784. STATE.activeRefPromptAction = STATE.action;
  2785. STATE.activeRefPromptDraft = STATE.refPrompts[id] ?? getStoredActionPrompt(STATE.action);
  2786. const activeCard = CardRegistry.get('reference', id); if (activeCard) activeCard.classList.add('is-editing');
  2787. DOM.promptContainer.classList.add('editing-ref'); DOM.refEditLabel.innerText = `Editing Individual Prompt: IMAGE_${STATE.refOrder.indexOf(id)}`; DOM.refEditLabel.classList.add('show');
  2788. DOM.generateBtn.classList.add('d-none'); DOM.saveRefBtn.classList.remove('d-none'); setEditorPromptValue(STATE.activeRefPromptDraft); DOM.prompt.focus();
  2789. }
  2790.  
  2791. function saveAndCloseRefPrompt(cancel = false) {
  2792. if (!STATE.activeRefPromptId) return; const id = STATE.activeRefPromptId;
  2793. STATE.activeRefPromptDraft = getEditorPromptValue();
  2794. if (!cancel) {
  2795. const val = sanitizePromptText(STATE.activeRefPromptDraft);
  2796. if (val && val !== sanitizePromptText(getActiveRefPromptBaseline())) setRefPrompt(id, val);
  2797. else deleteRefPrompt(id);
  2798. }
  2799. const card = CardRegistry.get('reference', id); if (card) { card.classList.remove('is-editing'); card.setReferencePromptFlag(!!STATE.refPrompts[id]); }
  2800. STATE.activeRefPromptId = null;
  2801. STATE.activeRefPromptAction = null;
  2802. STATE.activeRefPromptDraft = '';
  2803. DOM.promptContainer.classList.remove('editing-ref'); DOM.refEditLabel.classList.remove('show'); DOM.generateBtn.classList.remove('d-none'); DOM.saveRefBtn.classList.add('d-none'); setEditorPromptValue(getDraftActionPrompt());
  2804. }
  2805.  
  2806. const TRANSPARENT_1X1 = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
  2807. const decodeImageElement = (img) => {
  2808. if (!img) return Promise.resolve();
  2809. if (typeof img.decode === 'function') return img.decode().catch(()=>{});
  2810. return new Promise(resolve => {
  2811. if (img.complete) return resolve();
  2812. img.onload = img.onerror = () => resolve();
  2813. });
  2814. };
  2815. const getLightboxSourceMedia = (sourceCard) => {
  2816. if (!sourceCard?.shadowRoot) return null;
  2817. const sourceVid = sourceCard.shadowRoot.querySelector('#vid');
  2818. const sourceImg = sourceCard.shadowRoot.querySelector('#img');
  2819. if (sourceVid?.getAttribute('src')) return sourceVid;
  2820. if (sourceImg?.getAttribute('src')) return sourceImg;
  2821. return null;
  2822. };
  2823. const createLightboxImageLayer = (item, className, src = TRANSPARENT_1X1, fallbackBg = 'transparent') => {
  2824. const img = document.createElement('img');
  2825. img.className = className;
  2826. img.decoding = 'async';
  2827. img.fetchPriority = 'high';
  2828. img.src = src || TRANSPARENT_1X1;
  2829. img.style.background = fallbackBg;
  2830. if (item?.ratio) img.style.aspectRatio = String(item.ratio);
  2831. return img;
  2832. };
  2833. const createLightboxVideoElement = (item, src = TRANSPARENT_1X1, poster = '', fallbackBg = 'transparent') => {
  2834. const video = document.createElement('video');
  2835. video.className = 'lightbox-media lightbox-media--video';
  2836. video.controls = true;
  2837. video.autoplay = true;
  2838. video.loop = true;
  2839. video.playsInline = true;
  2840. video.preload = 'metadata';
  2841. video.volume = 0.05;
  2842. video.style.background = fallbackBg;
  2843. if (item?.ratio) video.style.aspectRatio = String(item.ratio);
  2844. if (poster) video.poster = poster;
  2845. video.src = src || TRANSPARENT_1X1;
  2846. return video;
  2847. };
  2848. const clearLightboxStage = () => {
  2849. DOM.lightboxInner?.classList.remove('is-loaded');
  2850. DOM.lightboxStage?.querySelectorAll('.lightbox-media').forEach(node => {
  2851. if (node.tagName === 'VIDEO') node.pause();
  2852. node.remove();
  2853. });
  2854. if (DOM.lightboxStage) DOM.lightboxStage.style.removeProperty('--lightbox-ratio');
  2855. };
  2856. const releaseLightboxPinnedMedia = () => {
  2857. const pin = DOM.lightbox?._cachePin;
  2858. if (pin) BlobCache.release(pin.id, pin.type);
  2859. if (DOM.lightbox) DOM.lightbox._cachePin = null;
  2860. };
  2861.  
  2862. function openLightbox(item, sourceCard) {
  2863. const inner = DOM.lightboxInner;
  2864. clearLightboxStage();
  2865. releaseLightboxPinnedMedia();
  2866. const openToken = (DOM.lightbox._openToken = (DOM.lightbox._openToken || 0) + 1);
  2867. const sourceMedia = getLightboxSourceMedia(sourceCard);
  2868. const previewSrc = sourceMedia ? (sourceMedia.tagName === 'VIDEO' ? (sourceMedia.poster || sourceMedia.currentSrc || sourceMedia.src) : (sourceMedia.currentSrc || sourceMedia.src)) : null;
  2869. const fallbackBg = (item.lqip && item.lqip.includes('gradient')) ? item.lqip : 'transparent';
  2870. const fetchId = String(item.refSourceId || item.id);
  2871. const isStale = () => STATE.activeLightboxId !== item.id || DOM.lightbox?._openToken !== openToken;
  2872.  
  2873. if (DOM.lightboxStage) DOM.lightboxStage.style.setProperty('--lightbox-ratio', String(item.ratio || (item.type === 'video' ? (16 / 9) : 1)));
  2874. DOM.lightboxDl.href = item.originalUrl || '#';
  2875. DOM.lightboxDl.download = item.filename || 'download';
  2876. STATE.activeLightboxId = item.id;
  2877.  
  2878. if (item.type === 'image') {
  2879. const previewEl = createLightboxImageLayer(item, 'lightbox-media lightbox-media--preview', previewSrc || TRANSPARENT_1X1, fallbackBg);
  2880. const fullEl = createLightboxImageLayer(item, 'lightbox-media lightbox-media--full', previewSrc || TRANSPARENT_1X1, fallbackBg);
  2881. DOM.lightboxStage.insertBefore(previewEl, DOM.lightboxDl);
  2882. DOM.lightboxStage.insertBefore(fullEl, DOM.lightboxDl);
  2883. requestAnimationFrame(() => previewEl.classList.add('is-visible'));
  2884. } else {
  2885. const videoEl = createLightboxVideoElement(item, item.originalUrl || TRANSPARENT_1X1, previewSrc || '', fallbackBg);
  2886. DOM.lightboxStage.insertBefore(videoEl, DOM.lightboxDl);
  2887. requestAnimationFrame(() => videoEl.classList.add('is-visible'));
  2888. }
  2889.  
  2890. if (!DOM.lightbox.open) DOM.lightbox.showModal();
  2891. if (item.type === 'image') MediaWarmPool.warm(item).catch(()=>{});
  2892.  
  2893. const fullUrlPromise = item.type === 'video' && item.originalUrl ? Promise.resolve(item.originalUrl) : BlobCache.full.retain(fetchId, 'full');
  2894. fullUrlPromise.then(async targetUrl => {
  2895. if (isStale()) {
  2896. if (!(item.type === 'video' && item.originalUrl)) BlobCache.release(fetchId, 'full');
  2897. return;
  2898. }
  2899. const safeUrl = sanitizeUrl(targetUrl);
  2900. if (!safeUrl) {
  2901. if (!(item.type === 'video' && item.originalUrl)) BlobCache.release(fetchId, 'full');
  2902. return;
  2903. }
  2904. if (!(item.type === 'video' && item.originalUrl)) DOM.lightbox._cachePin = { id: fetchId, type: 'full' };
  2905.  
  2906. if (item.type === 'image') {
  2907. const fullEl = DOM.lightboxStage.querySelector('.lightbox-media--full');
  2908. if (!fullEl) return;
  2909. fullEl.src = safeUrl;
  2910. await decodeImageElement(fullEl);
  2911. if (isStale()) return;
  2912. DOM.lightboxDl.href = safeUrl;
  2913. fullEl.classList.add('is-visible');
  2914. requestAnimationFrame(() => inner.classList.add('is-loaded'));
  2915. setTimeout(() => { if (!isStale()) DOM.lightboxStage.querySelector('.lightbox-media--preview')?.remove(); }, 260);
  2916. } else {
  2917. const videoEl = DOM.lightboxStage.querySelector('.lightbox-media--video');
  2918. if (!videoEl) return;
  2919. if (!item.originalUrl) {
  2920. const currentTime = videoEl.currentTime || 0;
  2921. videoEl.src = safeUrl;
  2922. if (currentTime > 0) videoEl.currentTime = currentTime;
  2923. }
  2924. DOM.lightboxDl.href = safeUrl;
  2925. videoEl.play().catch(()=>{});
  2926. }
  2927. }).catch(err => addLog('WARN', 'Failed to load full blob for lightbox', err));
  2928. }
  2929.  
  2930. const closeLightbox = () => {
  2931. DOM.lightbox._openToken = (DOM.lightbox._openToken || 0) + 1;
  2932. DOM.lightbox.close();
  2933. clearLightboxStage();
  2934. releaseLightboxPinnedMedia();
  2935. STATE.activeLightboxId = null;
  2936. }
  2937.  
  2938. function initMediaInteractions() {
  2939. const handleRefDelete = (id) => {
  2940. if (STATE.historyOrder.includes(id) || STATE.currentOrder.includes(id)) {
  2941. STATE.refOrder = STATE.refOrder.filter(i => i !== id);
  2942. deleteRefPrompt(id);
  2943. updateRefState();
  2944. if (STATE.activeRefPromptId === id) saveAndCloseRefPrompt(true);
  2945. } else void handleGlobalDelete(id, true);
  2946. };
  2947. const handleGlobalDelete = async (id, isRefDel = false) => {
  2948. const key = String(id);
  2949. DBQueue.forgetItem(key);
  2950. STATE.historyOrder = STATE.historyOrder.filter(i => i !== key);
  2951. STATE.currentOrder = STATE.currentOrder.filter(i => i !== key);
  2952. if (STATE.refOrder.includes(id)) {
  2953. STATE.refOrder = STATE.refOrder.filter(i => i !== key);
  2954. deleteRefPrompt(key);
  2955. updateRefState();
  2956. if (STATE.activeRefPromptId === key) saveAndCloseRefPrompt(true);
  2957. }
  2958. Store.removeItem(key);
  2959. await StorageDB.deleteItem(key).catch(e => addLog('WARN', 'Delete item failed', { id: key, error: e?.message || e }));
  2960. if (!isRefDel) runBg(updateHistoryMetrics);
  2961. };
  2962.  
  2963. const handleCardHover = (e, isHover) => {
  2964. const card = e.composedPath ? e.composedPath().find(el => el.tagName === 'XAI-CARD') : e.target.closest('xai-card'); if (!card) return; if (e.relatedTarget && card.contains(e.relatedTarget)) return;
  2965. if (isHover) { clearTimeout(card._hoverTimer); card._hoverTimer = setTimeout(() => card._handleHover(true), 150); } else { clearTimeout(card._hoverTimer); card._handleHover(false); }
  2966. };
  2967. const warmLightboxCandidate = (card, delay = 90) => {
  2968. if (!card || card.classList.contains('is-reference')) return;
  2969. clearTimeout(card._warmTimer);
  2970. card._warmTimer = setTimeout(() => {
  2971. const item = STATE.items.get(String(card.dataset.id));
  2972. MediaWarmPool.warm(item).catch(()=>{});
  2973. }, delay);
  2974. };
  2975. const clearWarmLightboxCandidate = (card) => {
  2976. if (!card) return;
  2977. clearTimeout(card._warmTimer);
  2978. card._warmTimer = null;
  2979. };
  2980. [DOM.currentImages].forEach(container => {
  2981. if (!container) return;
  2982. App.on(container, 'mouseover', e => {
  2983. handleCardHover(e, true);
  2984. const card = e.composedPath ? e.composedPath().find(el => el.tagName === 'XAI-CARD') : e.target.closest('xai-card');
  2985. if (card) warmLightboxCandidate(card);
  2986. });
  2987. App.on(container, 'mouseout', e => {
  2988. handleCardHover(e, false);
  2989. const card = e.composedPath ? e.composedPath().find(el => el.tagName === 'XAI-CARD') : e.target.closest('xai-card');
  2990. if (card) clearWarmLightboxCandidate(card);
  2991. });
  2992. App.on(container, 'pointerdown', e => {
  2993. const card = e.composedPath ? e.composedPath().find(el => el.tagName === 'XAI-CARD') : e.target.closest('xai-card');
  2994. if (card) warmLightboxCandidate(card, 0);
  2995. }, { passive: true });
  2996. });
  2997.  
  2998. const handleClick = async (e) => {
  2999. let targetEl = e.composedPath ? e.composedPath()[0] : e.target; const card = targetEl.closest('xai-card') || targetEl.getRootNode().host; if (!card) return;
  3000. const id = String(card.dataset.id), item = STATE.items.get(id); if (!item) return;
  3001. if (targetEl.closest('.ref-side-prompt-btn')) return e.preventDefault() & e.stopPropagation() & toggleRefPrompt(id);
  3002. const isRefDel = targetEl.closest('.ref-del'), isGlobalDel = targetEl.closest('.overlay-del-btn'), isEdit = targetEl.closest('.overlay-edit-btn'), isExtend = targetEl.closest('.overlay-extend-btn'), isVideoBtn = targetEl.closest('.overlay-video-btn');
  3003.  
  3004. if (isRefDel) { e.preventDefault(); e.stopPropagation(); return handleRefDelete(id); }
  3005. if (isGlobalDel) { e.preventDefault(); e.stopPropagation(); if (item.isPending && item.taskId) { const task = JobManager.tasks.get(item.taskId); if (task && task.controller) task.controller.abort(); } return void handleGlobalDelete(id); }
  3006. if (isEdit || isExtend || isVideoBtn) {
  3007. e.preventDefault(); e.stopPropagation();
  3008. const newAction = ActionUtils.getCardAction(item.type, isExtend ? 'extend' : (isVideoBtn ? 'video' : 'edit'));
  3009. moveReferenceToFront(id, { exclusiveActive: true, forceRebuild: true });
  3010. changeActionState(newAction);
  3011. return;
  3012. }
  3013. if (targetEl.closest('.card-prompt')) { e.preventDefault(); e.stopPropagation(); if (STATE.activeRefPromptId) saveAndCloseRefPrompt(true); DomUtils.insertTextAtCursor(DOM.prompt, item.prompt, true); PromptSync.captureEditor(); return; }
  3014. const isDlBtn = targetEl.closest('.overlay-dl-btn'); if (isDlBtn) { e.preventDefault(); e.stopPropagation(); return MediaUtils.downloadItem(item, false, card); }
  3015. if (!item.isPending && !isDlBtn && !isGlobalDel && !isRefDel && !targetEl.closest('.ref-header') && !targetEl.closest('.ref-side-prompt-btn')) openLightbox(item, card);
  3016. };[DOM.history, DOM.currentImages].forEach(el => App.on(el, 'click', handleClick));
  3017.  
  3018. App.on(DOM.refList, 'click', (e) => {
  3019. let targetEl = e.composedPath ? e.composedPath()[0] : e.target, t = targetEl.closest('.ref-active-toggle');
  3020. if (t) { const c = targetEl.getRootNode().host || targetEl.closest('xai-card'), i = STATE.items.get(String(c.dataset.id)); if (i) { i.active = t.checked; c.classList.toggle('inactive', !i.active); if (i.active && STATE.isGenerating) i.readyAt = Date.now() + 10000; else if (!i.active)[...JobManager.tasks.values()].filter(ts => ts.refIds.includes(i.id)).forEach(ts => ts.controller.abort()); updateRefState(); } return; }
  3021. handleClick(e);
  3022. });
  3023. App.on(DOM.saveRefBtn, 'click', () => saveAndCloseRefPrompt(false));
  3024. }
  3025.  
  3026. function initHotkeys() {
  3027. let tgt = DOM.currentImages; const setTgt = el => () => tgt = el;
  3028. App.on(DOM.history, 'mouseenter', setTgt(DOM.history)); App.on(DOM.currentImages, 'mouseenter', setTgt(DOM.currentImages)); App.on(DOM.refList, 'mouseenter', setTgt(DOM.refList));
  3029. App.on(document, 'keydown', e => {
  3030. const isInput = document.activeElement &&['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName);
  3031. if (isInput && document.activeElement === DOM.prompt &&['Home', 'End', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(e.key)) return;
  3032. if (isInput && document.activeElement !== DOM.prompt) return;
  3033. if (['PageUp', 'PageDown', 'Home', 'End'].includes(e.key)) {
  3034. if (!tgt) return;
  3035. e.preventDefault();
  3036. if (e.key === 'PageUp') tgt.scrollBy({ top: -tgt.clientHeight * 0.8, behavior: 'smooth' });
  3037. else if (e.key === 'PageDown') tgt.scrollBy({ top: tgt.clientHeight * 0.8, behavior: 'smooth' });
  3038. else if (e.key === 'Home') tgt.scrollTo({ top: 0, behavior: 'smooth' });
  3039. else if (e.key === 'End') tgt.scrollTo({ top: tgt.scrollHeight, behavior: 'smooth' });
  3040. }
  3041. });
  3042. }
  3043.  
  3044. function changeActionState(actionValue) {
  3045. if (STATE.action === actionValue) return;
  3046. runTransition(() => {
  3047. if (STATE.activeRefPromptId) saveAndCloseRefPrompt(true);
  3048. else if (DOM.prompt) PromptSync.captureEditor(STATE.action, { scheduleCommit: false });
  3049. STATE.action = actionValue; syncActionLabel(actionValue);
  3050. setActivePopoverItem(document.getElementById('popover-action'), actionValue);
  3051. setEditorPromptValue(getDraftActionPrompt());
  3052. });
  3053. }
  3054.  
  3055. function bindLogic() {
  3056. Object.entries(DOM_IDS).forEach(([k, id]) => DOM[k] = document.getElementById(id));
  3057. NativeGridManager.init(); DOM.historyScroller = HistoryManager; DOM.historyScroller.init(DOM.history);
  3058.  
  3059. if (STATE.leftCollapsed) { DOM.colLeft.classList.add('is-collapsed'); document.getElementById('btn-collapse-left').setAttribute('aria-expanded', 'false'); }
  3060. if (STATE.rightCollapsed) { DOM.colRight.classList.add('is-collapsed'); document.getElementById('btn-collapse-right').setAttribute('aria-expanded', 'false'); }
  3061.  
  3062. initUIControls(); initLayoutManager(); initMediaManager(); initPromptManager(); initModals(); initMediaInteractions(); initAPIAndGeneration(); initHotkeys();
  3063. }
  3064.  
  3065. function initUIControls() {
  3066. const setupDropdown = (btnId, popoverId, labelId, options, onChange) => {
  3067. const btn = document.getElementById(btnId), popover = document.getElementById(popoverId), label = document.getElementById(labelId);
  3068. if (!btn || !popover) return; btn.setAttribute('popovertarget', popoverId);
  3069. const _renderOpts = (opts) => renderPopoverOptions(popover, btn.dataset.value, opts);
  3070. _renderOpts(options);
  3071. App.on(popover, 'click', e => {
  3072. const item = e.target.closest('.popover-item');
  3073. if (!item || item.classList.contains('disabled')) return;
  3074. setActivePopoverItem(popover, item.dataset.val);
  3075. btn.dataset.value = item.dataset.val;
  3076. const text = item.querySelector('span')?.textContent || '';
  3077. if (label) label.textContent = text;
  3078. popover.hidePopover();
  3079. onChange?.(item.dataset.val, text);
  3080. });
  3081. popover._updateOptions = _renderOpts;
  3082. };
  3083. const setupToggle = (elId, valA, valB, textA, textB, onChange) => { const el = document.getElementById(elId); if (!el) return; App.on(el, 'click', () => { const isA = el.dataset.value === valA; el.dataset.value = isA ? valB : valA; el.innerText = isA ? textB : textA; onChange?.(el.dataset.value); }); };
  3084. const bindNum = (id, key, max) => { const el = document.getElementById(id); if (!el) return; el.value = STATE[key]; App.on(el, 'input', e => STATE[key] = max ? Math.min(max, parseInt(e.target.value) || 0) : (parseInt(e.target.value) || 0)); App.on(el, 'click', e => e.stopPropagation()); };
  3085. const findToggleMeta = (target) => SETTINGS_TOGGLE_META.find(meta => target.closest(`#${meta.rowId}`));
  3086.  
  3087. syncActionLabel();
  3088. setupDropdown('btn-master-action', 'popover-action', 'label-master-action', Object.entries(ACTION_META).map(([val, meta]) => ({ val, text: meta.label, title: meta.title })), (v) => changeActionState(v));
  3089. DOM.settingBatch.dataset.value = STATE.batchSize; if (DOM.labelSettingBatch) DOM.labelSettingBatch.innerText = STATE.batchSize;
  3090. setupDropdown('btn-setting-batch', 'popover-batch', 'label-setting-batch', Array.from({ length: 10 }, (_, i) => ({ val: String(i + 1), text: String(i + 1) })), v => STATE.batchSize = v);
  3091. setupDropdown('btn-setting-ar', 'popover-ar', null,[], v => { STATE.currentAr = getAspectRatioOption(v).label.trim(); syncAspectRatioUI(); });
  3092. syncAspectRatioUI();
  3093. setupDropdown('btn-setting-duration', 'popover-duration', 'label-setting-duration',[], v => STATE.duration = v);
  3094.  
  3095. DOM.settingLoops.value = STATE.loops; App.on(DOM.settingLoops, 'input', () => STATE.loops = DOM.settingLoops.value);
  3096. setupToggle('xai-api-res-img', '2k', '1k', '2K Pro', '1K Std', v => STATE.resImg = v); setupToggle('xai-api-res-vid', '720p', '480p', '720p', '480p', v => STATE.resVid = v);
  3097. syncResolutionButtons();
  3098. SETTINGS_NUMBER_META.forEach(({ inputId, stateKey, max }) => bindNum(inputId, stateKey, max));
  3099. syncSettingsInputs();
  3100.  
  3101. DOM.settingsBtn.setAttribute('popovertarget', 'popover-settings');
  3102. App.on(DOM.settingsPopover, 'click', e => {
  3103. const meta = findToggleMeta(e.target);
  3104. if (!meta) return;
  3105. STATE[meta.stateKey] = !STATE[meta.stateKey];
  3106. if (DOM[meta.domKey]) DOM[meta.domKey].checked = !!STATE[meta.stateKey];
  3107. e.stopPropagation();
  3108. });
  3109.  
  3110. App.on(document.getElementById('btn-export-state'), 'click', () => {
  3111. if (!STATE.activeRefPromptId && DOM.prompt) PromptSync.captureEditor(STATE.action, { scheduleCommit: false });
  3112. const stateToExport = buildExportState();
  3113. const u = URL.createObjectURL(new Blob([JSON.stringify(stateToExport)], {type: 'application/json'})), a = document.createElement('a'); a.href = u; a.download = `xAI_Pro_Settings_${makeTimestamp()}.json`; a.click(); scheduleObjectUrlRevoke(u, 5000);
  3114. });
  3115.  
  3116. const importInput = document.getElementById('file-import-state');
  3117. App.on(document.getElementById('btn-import-state'), 'click', () => importInput.click());
  3118. App.on(importInput, 'change', e => {
  3119. const file = e.target.files[0]; if (!file) return;
  3120. const reader = new FileReader();
  3121. reader.onload = evt => {
  3122. try {
  3123. const p = sanitizeImportedState(JSON.parse(evt.target.result));
  3124. const { prompts, promptDrafts, refPrompts, favPrompts, ...nextState } = p;
  3125. Object.entries(nextState).forEach(([key, value]) => STATE[key] = value);
  3126. STATE.prompts = sanitizePromptStore(prompts, STATE.prompts);
  3127. STATE.promptDrafts = sanitizePromptStore(promptDrafts, STATE.prompts);
  3128. STATE.refPrompts = sanitizeRefPromptStore(refPrompts, STATE.refPrompts);
  3129. STATE.favPrompts = sanitizeFavPromptStore(favPrompts, STATE.favPrompts);
  3130. persistEffectivePrompts(); persistPromptDrafts(); persistRefPrompts(); persistFavPrompts();
  3131. syncActionLabel(); _updateActionUIDom();
  3132. syncSettingsInputs(); syncResolutionButtons(); syncAspectRatioUI(); syncLayoutWidths();
  3133. if (!STATE.activeRefPromptId) setEditorPromptValue(getDraftActionPrompt());
  3134. renderRefMode(); UI.showToast("Settings & Prompts imported successfully!", "success");
  3135. } catch(err) { UI.showToast("Failed to parse JSON", "error"); }
  3136. }; reader.readAsText(file); e.target.value = '';
  3137. });
  3138.  
  3139. renderRefMode(); App.on(DOM.refModeToggle, 'click', () => STATE.refMode = STATE.refMode === 'multi' ? 'queue' : 'multi'); updateUploadPlaceholderState(); _updateActionUIDom();
  3140. }
  3141.  
  3142. function initLayoutManager() {
  3143. let layoutRaf = 0;
  3144. const scheduleCurrentLayout = () => {
  3145. if (layoutRaf) cancelAnimationFrame(layoutRaf);
  3146. layoutRaf = requestAnimationFrame(() => {
  3147. layoutRaf = 0;
  3148. NativeGridManager.syncCurrentLayoutMetrics?.();
  3149. });
  3150. };
  3151. const syncObservedWidth = (target, width) => {
  3152. const next = Math.round(width || 0);
  3153. if (!Number.isFinite(next) || next <= 0) return;
  3154. if (target === DOM.colLeft && !STATE.leftCollapsed && Math.abs(next - STATE.leftWidth) >= 2) STATE.leftWidth = Math.max(320, next);
  3155. if (target === DOM.colRight && !STATE.rightCollapsed && Math.abs(next - STATE.rightWidth) >= 2) STATE.rightWidth = Math.max(240, next);
  3156. };
  3157. App.on(window, 'resize', scheduleCurrentLayout);
  3158. const ro = new ResizeObserver(entries => {
  3159. for (let e of entries) {
  3160. const borderBox = Array.isArray(e.borderBoxSize) ? e.borderBoxSize[0] : e.borderBoxSize;
  3161. syncObservedWidth(e.target, borderBox?.inlineSize || e.contentRect?.width || 0);
  3162. }
  3163. scheduleCurrentLayout();
  3164. });
  3165. syncLayoutWidths();
  3166. scheduleCurrentLayout();
  3167. if (DOM.colLeft) ro.observe(DOM.colLeft); if (DOM.colRight) ro.observe(DOM.colRight);
  3168. App.ac.signal.addEventListener('abort', () => {
  3169. if (layoutRaf) cancelAnimationFrame(layoutRaf);
  3170. ro.disconnect();
  3171. });
  3172. App.on(document.getElementById('btn-collapse-left'), 'click', () => STATE.leftCollapsed = !STATE.leftCollapsed); App.on(document.getElementById('btn-collapse-right'), 'click', () => STATE.rightCollapsed = !STATE.rightCollapsed);
  3173. }
  3174.  
  3175. let processMediaFileLocal = null;
  3176. function initMediaManager() {
  3177. let dragged = null, pendingRefTarget = null, pendingRefAfter = false, refReorderRaf = 0;
  3178. const flushRefReorder = () => {
  3179. refReorderRaf = 0;
  3180. if (!dragged || !pendingRefTarget || pendingRefTarget === dragged) return;
  3181. DOM.refList.insertBefore(dragged, pendingRefAfter ? pendingRefTarget.nextSibling : pendingRefTarget);
  3182. };
  3183. const finishRefDrag = () => {
  3184. if (refReorderRaf) {
  3185. cancelAnimationFrame(refReorderRaf);
  3186. flushRefReorder();
  3187. }
  3188. if (!dragged) return;
  3189. dragged.classList.remove('dragging');
  3190. dragged = null;
  3191. pendingRefTarget = null;
  3192. pendingRefAfter = false;
  3193. STATE.refOrder = Array.from(DOM.refList.querySelectorAll('xai-card.is-reference')).map(c => String(c.dataset.id));
  3194. updateRefState();
  3195. };
  3196. App.on(DOM.refList, 'dragstart', e => {
  3197. const card = e.target.closest('xai-card.is-reference');
  3198. if (!card) return;
  3199. dragged = card;
  3200. pendingRefTarget = null;
  3201. pendingRefAfter = false;
  3202. e.dataTransfer.effectAllowed = 'move';
  3203. e.dataTransfer.setData('text/plain', card.dataset.id);
  3204. requestAnimationFrame(() => card.classList.add('dragging'));
  3205. });
  3206. App.on(DOM.refList, 'dragover', e => {
  3207. if (!dragged) return;
  3208. e.preventDefault();
  3209. e.dataTransfer.dropEffect = 'move';
  3210. const targetCard = e.target.closest('xai-card.is-reference:not(.dragging)');
  3211. if (!targetCard || targetCard === dragged) return;
  3212. const rect = targetCard.getBoundingClientRect(), next = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
  3213. if (targetCard === pendingRefTarget && next === pendingRefAfter) return;
  3214. pendingRefTarget = targetCard;
  3215. pendingRefAfter = next;
  3216. if (refReorderRaf) cancelAnimationFrame(refReorderRaf);
  3217. refReorderRaf = requestAnimationFrame(flushRefReorder);
  3218. });
  3219. App.on(DOM.refList, 'drop', e => { if (!dragged) return; e.preventDefault(); finishRefDrag(); });
  3220. App.on(DOM.refList, 'dragend', finishRefDrag);
  3221. App.ac.signal.addEventListener('abort', () => {
  3222. if (refReorderRaf) cancelAnimationFrame(refReorderRaf);
  3223. document.body.classList.remove('is-dragging');
  3224. dragged = null;
  3225. pendingRefTarget = null;
  3226. pendingRefAfter = false;
  3227. refReorderRaf = 0;
  3228. });
  3229.  
  3230. const handleMediaDragStart = (e) => {
  3231. const card = e.target.closest('xai-card');
  3232. if (!card || (!card.classList.contains('is-history') && !card.classList.contains('is-current'))) return;
  3233. document.body.classList.add('is-dragging');
  3234. e.dataTransfer.effectAllowed = 'copy';
  3235. e.dataTransfer.setData('application/x-xai-media-id', card.dataset.id);
  3236. };
  3237. [DOM.history, DOM.currentImages].forEach(el => {
  3238. if (!el) return;
  3239. App.on(el, 'dragstart', handleMediaDragStart);
  3240. App.on(el, 'dragend', () => document.body.classList.remove('is-dragging'));
  3241. });
  3242.  
  3243. processMediaFileLocal = async (file) => {
  3244. const isVid = file.type.startsWith('video/'), isImg = file.type.startsWith('image/'); if (!isVid && !isImg) return;
  3245. const nextAction = ActionUtils.getUploadAction(STATE.action, file.type);
  3246. if (nextAction !== STATE.action) changeActionState(nextAction);
  3247. const maxRefs = ActionUtils.getMaxRefs(STATE.action, 'queue'); if (STATE.refOrder.length >= maxRefs) return;
  3248. const mediaData = await MediaUtils.processSource(file, isVid ? 'video' : 'image', getThumbMaxDim(), getThumbQuality()), id = crypto.randomUUID();
  3249. await OPFS.write(id, 'full', file); if (mediaData.thumbBlob) await OPFS.write(id, 'thumb', mediaData.thumbBlob);
  3250. Store.commitNewItem({ id, type: isVid ? 'video' : 'image', mimeType: file.type, active: true, filename: file.name, ratio: mediaData.ratio, lqip: mediaData.lqip, readyAt: STATE.isGenerating ? Date.now() + 10000 : 0, isUploadedRef: true });
  3251. moveReferenceToFront(id, { enforceLimit: true, forceRebuild: true });
  3252. };
  3253. let mediaImportQueue = Promise.resolve();
  3254. const queueMediaFileLocal = (file) => {
  3255. mediaImportQueue = mediaImportQueue.then(() => processMediaFileLocal(file)).catch(err => addLog('WARN', 'Local media import failed', err));
  3256. return mediaImportQueue;
  3257. };
  3258.  
  3259. const supportsDropPayload = (dataTransfer) => !!dataTransfer && Array.from(dataTransfer.types || []).some(type => type === 'Files' || type === 'application/x-xai-media-id');
  3260. const createHoverTracker = (onHover) => {
  3261. let depth = 0;
  3262. return {
  3263. enter() { depth++; onHover?.(true); },
  3264. leave() { depth = Math.max(0, depth - 1); if (depth === 0) onHover?.(false); },
  3265. reset() { depth = 0; onHover?.(false); }
  3266. };
  3267. };
  3268. const setupDrop = (el, onHover) => {
  3269. if (!el) return;
  3270. const hoverTracker = createHoverTracker(onHover);
  3271. App.on(el, 'dragenter', e => {
  3272. if (!supportsDropPayload(e.dataTransfer)) return;
  3273. e.preventDefault();
  3274. e.stopPropagation();
  3275. hoverTracker.enter();
  3276. });
  3277. App.on(el, 'dragover', e => {
  3278. if (!supportsDropPayload(e.dataTransfer)) return;
  3279. e.preventDefault();
  3280. e.stopPropagation();
  3281. e.dataTransfer.dropEffect = 'copy';
  3282. });
  3283. App.on(el, 'dragleave', e => {
  3284. if (!supportsDropPayload(e.dataTransfer)) return;
  3285. e.preventDefault();
  3286. e.stopPropagation();
  3287. hoverTracker.leave();
  3288. });
  3289. App.on(el, 'drop', async e => {
  3290. if (!supportsDropPayload(e.dataTransfer)) return;
  3291. e.preventDefault();
  3292. e.stopPropagation();
  3293. hoverTracker.reset();
  3294. const mediaId = e.dataTransfer.getData('application/x-xai-media-id');
  3295. if (mediaId && STATE.items.has(mediaId)) {
  3296. const item = STATE.items.get(mediaId);
  3297. const mimeType = item?.mimeType || `${item?.type || 'image'}/`;
  3298. const nextAction = ActionUtils.getUploadAction(STATE.action, mimeType);
  3299. if (nextAction !== STATE.action) changeActionState(nextAction);
  3300. moveReferenceToFront(mediaId, { enforceLimit: true, forceRebuild: true });
  3301. } else if (e.dataTransfer.files?.length) {
  3302. Array.from(e.dataTransfer.files).forEach(queueMediaFileLocal);
  3303. }
  3304. });
  3305. };
  3306. App.on(DOM.uploadPlaceholder, 'click', () => { if (STATE.refOrder.length < APP_CONFIG.LIMITS.MAX_REFS_QUEUE) DOM.fileInput.click(); });
  3307. App.on(DOM.fileInput, 'change', e => { Array.from(e.target.files).forEach(queueMediaFileLocal); DOM.fileInput.value = ''; });
  3308. setupDrop(DOM.dropzone, hover => DOM.uploadPlaceholder.classList.toggle('drag-over', hover)); setupDrop(DOM.prompt, hover => DOM.promptContainer.classList.toggle('drag-over', hover));
  3309.  
  3310. App.on(document, 'paste', e => {
  3311. const tag = document.activeElement?.tagName; if (tag &&['INPUT', 'TEXTAREA'].includes(tag) && document.activeElement !== DOM.prompt) return;
  3312. let hasMedia = false;
  3313. if (e.clipboardData?.items) {
  3314. for (let i = 0; i < e.clipboardData.items.length; i++) {
  3315. const item = e.clipboardData.items[i];
  3316. if (item.type.startsWith('image/') || item.type.startsWith('video/')) { if (!hasMedia && document.activeElement === DOM.prompt) e.preventDefault(); hasMedia = true; const file = item.getAsFile(); if (file) queueMediaFileLocal(file); }
  3317. }
  3318. }
  3319. });
  3320. }
  3321.  
  3322. function initPromptManager() {
  3323. setEditorPromptValue(getDraftActionPrompt());
  3324. App.on(DOM.promptContainer, 'pointerdown', e => {
  3325. if (e.target === DOM.promptContainer || e.target === DOM.textareaWrapper) DOM.prompt.focus();
  3326. });
  3327. App.on(DOM.prompt, 'input', () => {
  3328. if (STATE.activeRefPromptId) {
  3329. STATE.activeRefPromptDraft = getEditorPromptValue();
  3330. CardRegistry.get('reference', STATE.activeRefPromptId)?.setReferencePromptFlag(hasCustomRefPromptDraft(STATE.activeRefPromptDraft));
  3331. return;
  3332. }
  3333. PromptSync.captureEditor();
  3334. });
  3335. App.on(DOM.prompt, 'keydown', e => {
  3336. if (STATE.activeRefPromptId) {
  3337. if (e.key === 'Escape') { e.preventDefault(); saveAndCloseRefPrompt(true); }
  3338. if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveAndCloseRefPrompt(false); }
  3339. return;
  3340. }
  3341. if (e.key === 'Enter' && !e.shiftKey) {
  3342. e.preventDefault();
  3343. if (!DOM.generateBtn.disabled && !STATE.isGenerating) DOM.generateBtn.click();
  3344. }
  3345. });
  3346.  
  3347. const updateScrollIndicator = () => {
  3348. if (!DOM.prompt || !DOM.textareaWrapper) return;
  3349. const isScrollable = DOM.prompt.scrollHeight > DOM.prompt.clientHeight;
  3350. const isNotAtBottom = Math.ceil(DOM.prompt.scrollTop + DOM.prompt.clientHeight) < DOM.prompt.scrollHeight - 4;
  3351. DOM.textareaWrapper.classList.toggle('can-scroll', isScrollable && isNotAtBottom);
  3352. };
  3353. App.on(DOM.prompt, 'scroll', updateScrollIndicator, { passive: true });
  3354. App.on(DOM.prompt, 'input', updateScrollIndicator);
  3355. if (window.ResizeObserver) {
  3356. const ro = new ResizeObserver(updateScrollIndicator);
  3357. ro.observe(DOM.prompt);
  3358. App.ac.signal.addEventListener('abort', () => ro.disconnect());
  3359. }
  3360. updateScrollIndicator();
  3361. }
  3362.  
  3363. const renderFavs = () => {
  3364. const favs = STATE.favPrompts[STATE.action] ||[], pv = DOM.prompt.value.trim(), hasPending = pv && !favs.includes(pv);
  3365. const fragment = document.createDocumentFragment();
  3366. const buildFavItem = (text, pending = false) => {
  3367. const row = document.createElement('div'); row.className = `fav-item${pending ? ' pending' : ''}`; row.dataset.text = text;
  3368. const textEl = document.createElement('div'); textEl.className = 'fav-text'; textEl.title = text; textEl.textContent = text;
  3369. const btn = document.createElement('button'); btn.type = 'button'; btn.className = `xai-btn xai-btn--icon-sm ${pending ? 'xai-btn--success fav-add-btn' : 'xai-btn--danger fav-del-btn'}`; btn.title = pending ? 'Confirm Save Favorite' : 'Delete Favorite'; btn.textContent = pending ? APP_CONFIG.ICONS.check : APP_CONFIG.ICONS.close;
  3370. row.append(textEl, btn);
  3371. return row;
  3372. };
  3373.  
  3374. if (favs.length === 0 && !hasPending) {
  3375. const empty = document.createElement('div');
  3376. empty.className = 'empty-favs text-muted text-center';
  3377. empty.style.cssText = 'padding:16px;font-size:14px;';
  3378. empty.textContent = 'No favorites yet.';
  3379. fragment.appendChild(empty);
  3380. } else {
  3381. favs.forEach(f => fragment.appendChild(buildFavItem(f)));
  3382. if (hasPending) fragment.appendChild(buildFavItem(pv, true));
  3383. }
  3384.  
  3385. DOM.favList.replaceChildren(fragment);
  3386. };
  3387.  
  3388. function initModals() {
  3389. App.on(DOM.favBtn, 'click', () => { renderFavs(); DOM.favDialog.showModal(); });
  3390. App.on(DOM.favDialog, 'click', e => {
  3391. if (e.target === DOM.favDialog) return DOM.favDialog.close();
  3392. const itemEl = e.target.closest('.fav-item'); if (!itemEl) return;
  3393. const text = itemEl.dataset.text;
  3394. if (e.target.closest('.fav-text')) { if (!itemEl.classList.contains('pending')) { DOM.favDialog.close(); requestAnimationFrame(() => DomUtils.insertTextAtCursor(DOM.prompt, text, true)); } }
  3395. else if (e.target.closest('.fav-add-btn')) {
  3396. const currentFavs = [...(STATE.favPrompts[STATE.action] || [])];
  3397. currentFavs.push(text);
  3398. STATE.favPrompts = { ...STATE.favPrompts, [STATE.action]: currentFavs };
  3399. persistFavPrompts();
  3400. renderFavs();
  3401. }
  3402. else if (e.target.closest('.fav-del-btn')) {
  3403. const currentFavs = [...(STATE.favPrompts[STATE.action] || [])], idx = currentFavs.indexOf(text);
  3404. if (idx > -1) {
  3405. currentFavs.splice(idx, 1);
  3406. STATE.favPrompts = { ...STATE.favPrompts, [STATE.action]: currentFavs };
  3407. persistFavPrompts();
  3408. }
  3409. renderFavs();
  3410. }
  3411. });
  3412. App.on(DOM.lightbox, 'click', e => { const dlBtn = e.target.closest('.dl-abs-btn'); if (dlBtn && STATE.activeLightboxId) { e.preventDefault(); e.stopPropagation(); const item = STATE.items.get(STATE.activeLightboxId); if (item) MediaUtils.downloadItem(item, true); return; } closeLightbox(); });
  3413. App.on(DOM.lightbox, 'cancel', e => { e.preventDefault(); closeLightbox(); });
  3414. }
  3415.  
  3416. function parseDynamicPrompt(text) { if (!text) return text; let p = text, pr; do { pr = p; p = p.replace(/\{([^{}]+)\}/g, (_, contents) => { const opts = contents.split('|'); return opts[Math.floor(Math.random() * opts.length)]; }); } while (p !== pr); return p.trim(); }
  3417. function resolveAspectRatio(currentRefs = null) {
  3418. let ar = STATE.currentAr;
  3419. if (ar !== 'Ref') return ar.toLowerCase().trim();
  3420. if (!currentRefs?.length || !currentRefs[0]?.ratio) return 'auto';
  3421.  
  3422. let bestMatch = '1:1', minDiff = Infinity;
  3423. APP_CONFIG.ASPECT_RATIOS.forEach(option => {
  3424. if (option.isAuto || option.isRef) return;
  3425. const ratio = option.w / option.h, diff = Math.abs(ratio - currentRefs[0].ratio);
  3426. if (diff < minDiff) {
  3427. minDiff = diff;
  3428. bestMatch = option.label;
  3429. }
  3430. });
  3431. return bestMatch.toLowerCase().trim();
  3432. }
  3433. function applySingleRefTrick(targetKey, singleRefUrl) {
  3434. return [
  3435. { type: 'image_url', url: singleRefUrl },
  3436. { type: 'image_url', url: singleRefUrl }
  3437. ];
  3438. }
  3439. function buildImagePayload(payload, currentRefs, refBase64s, ar) {
  3440. payload.resolution = STATE.resImg;
  3441. payload.response_format = 'b64_json';
  3442. if (ar !== 'auto') payload.aspect_ratio = ar;
  3443. if (!currentRefs?.length || !refBase64s[0]) return;
  3444. if (currentRefs.length === 1) {
  3445. if (STATE.referenceARTrick && ar !== 'auto') payload.images = applySingleRefTrick('images', refBase64s[0]);
  3446. else payload.image = { url: refBase64s[0] };
  3447. return;
  3448. }
  3449. payload.images = refBase64s.filter(Boolean).map(url => ({ type: 'image_url', url }));
  3450. }
  3451. function buildVideoPayload(payload, currentRefs, refBase64s, ar) {
  3452. payload.duration = parseInt(STATE.duration);
  3453. payload.resolution = STATE.resVid;
  3454. const canUseVideoAr = ar !== 'auto' && ALLOWED_VIDEO_ARS.has(ar.toUpperCase?.() ? ar.toUpperCase() : ar);
  3455. if (canUseVideoAr) payload.aspect_ratio = ar;
  3456. if (!currentRefs?.length || !refBase64s[0]) return;
  3457. if (payload.duration > 10) {
  3458. payload.image = { url: refBase64s[0] };
  3459. return;
  3460. }
  3461. if (currentRefs.length === 1) {
  3462. if (STATE.referenceARTrick && ar !== 'auto') payload.reference_images = applySingleRefTrick('reference_images', refBase64s[0]);
  3463. else payload.image = { url: refBase64s[0] };
  3464. return;
  3465. }
  3466. payload.reference_images = refBase64s.filter(Boolean).map(url => ({ url }));
  3467. }
  3468. function buildVideoEditPayload(actionType, payload, currentRefs, refBase64s) {
  3469. if (actionType === 'extend_video') payload.duration = parseInt(STATE.duration);
  3470. if (currentRefs?.length && refBase64s[0]) payload.video = { url: refBase64s[0] };
  3471. }
  3472.  
  3473. async function getApiPayload(currentRefs = null, refPromptOverride = null) {
  3474. const actionType = STATE.action;
  3475. const livePrompt = STATE.activeRefPromptId ? getStoredActionPrompt(actionType) : getTaskPrompt(actionType);
  3476. const endpoint = ActionUtils.getEndpoint(actionType, currentRefs?.length || 0);
  3477. const payload = { model: ActionUtils.getModel(actionType), prompt: sanitizePromptText(refPromptOverride ?? livePrompt) };
  3478. const ar = resolveAspectRatio(currentRefs);
  3479. const refBase64s = currentRefs ? await Promise.all(currentRefs.map(m => RefPayloadCache.get(m))) :[];
  3480.  
  3481. if (actionType === 'gen_image') buildImagePayload(payload, currentRefs, refBase64s, ar);
  3482. else if (actionType === 'gen_video') buildVideoPayload(payload, currentRefs, refBase64s, ar);
  3483. else buildVideoEditPayload(actionType, payload, currentRefs, refBase64s);
  3484. addLog('INFO', 'Built payload', { endpoint, payload });
  3485. return { endpoint, payload };
  3486. }
  3487.  
  3488. async function fetchWithRetries(endpoint, payload, signal, token, taskId, onProgress) {
  3489. let attempts = 0, rateLimitFails = 0, authRetries = 0; const getDelay = () => Math.floor(Math.random() * (STATE.retryMaxMs - STATE.retryMinMs + 1)) + STATE.retryMinMs, isImage = payload.model === "grok-imagine-image";
  3490. while (attempts < APP_CONFIG.TIMINGS.MAX_RETRY_ATTEMPTS && STATE.generationToken === token) {
  3491. try {
  3492. const attemptNo = attempts + 1;
  3493. const requestStartedAt = performance.now();
  3494. addLog('NETWORK_REQ', `POST ${endpoint}`, { taskId, attempt: attemptNo, payload });
  3495. const res = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Parallel-Task': taskId }, body: JSON.stringify(payload), signal });
  3496. const elapsedMs = Math.max(0, Math.round(performance.now() - requestStartedAt));
  3497. if (RETRYABLE_GATEWAY_STATUSES.has(res.status)) {
  3498. attempts++;
  3499. addLog('NETWORK_WARN', `Gateway error ${res.status}`, { taskId, attempt: attemptNo, elapsedMs });
  3500. onProgress({ shortStatus: `Busy(${res.status}). Rty[${attempts}]`, longStatus: `Server Busy (${res.status}). Retrying (Attempt ${attempts})...`, color: '#eab308' });
  3501. await sleep(getDelay(), signal);
  3502. continue;
  3503. }
  3504. if (AUTH_FAILURE_STATUSES.has(res.status)) {
  3505. attempts++; authRetries++;
  3506. addLog('NETWORK_WARN', `Authentication error ${res.status}`, { taskId, attempt: attemptNo, elapsedMs, authRetries });
  3507. if (attempts >= APP_CONFIG.TIMINGS.MAX_RETRY_ATTEMPTS || authRetries >= 3) throw Object.assign(new Error(`Auth retry limit reached (${res.status})`), { status: res.status, noRetry: true });
  3508. onProgress({ shortStatus: `Auth(${res.status}). Wiping...[${attempts}]`, longStatus: `Session Expired (${res.status}). Resetting (Attempt ${attempts})...`, color: 'orange' });
  3509. await nuclearWipe(); await sleep(Math.max(getDelay(), authRetries * 2000), signal); continue;
  3510. }
  3511. authRetries = 0;
  3512. if (!res.ok) {
  3513. const errData = await parseResponseJsonSafe(res);
  3514. addLog('NETWORK_ERR', 'Response error JSON', { taskId, attempt: attemptNo, status: res.status, elapsedMs, data: errData });
  3515. const errMsg = buildHttpErrorMessage(res.status, errData);
  3516. if (isRequestModeratedError(errMsg)) {
  3517. addLog('NETWORK_WARN', 'Moderation or policy failure', { taskId, attempt: attemptNo, status: res.status, elapsedMs, data: errData });
  3518. onProgress({ shortStatus: `Blocked(${res.status})`, longStatus: `Request blocked by moderation (${res.status}).`, color: '#a1a1aa' });
  3519. throw Object.assign(new Error(errMsg), { status: res.status, data: errData, noRetry: true, moderation: true });
  3520. }
  3521. if (isInvalidRequestError(errMsg)) {
  3522. addLog('NETWORK_WARN', 'Invalid request payload', { taskId, attempt: attemptNo, status: res.status, elapsedMs, data: errData });
  3523. onProgress({ shortStatus: `Invalid(${res.status})`, longStatus: `Server rejected the payload (${res.status}).`, color: '#f59e0b' });
  3524. throw Object.assign(new Error(errMsg), { status: res.status, data: errData, noRetry: true, invalidRequest: true });
  3525. }
  3526. throw Object.assign(new Error(errMsg), { status: res.status, data: errData });
  3527. }
  3528. const data = await res.json();
  3529. addLog('NETWORK_RES', 'Successful response', { taskId, attempt: attemptNo, status: res.status, elapsedMs, data });
  3530. return data;
  3531. } catch(err) {
  3532. if (err.name === 'AbortError' || err.noRetry) throw err;
  3533. const errStr = err.message.toLowerCase(), isShortRateLimit = errStr.match(/requests per second \(actual\/limit\):\s*(\d+)\s*\/\s*\1/), isLongRateLimit = RATE_LIMIT_FAILURE_STATUSES.has(err.status) || /rate limit|exhausted/.test(errStr) || errStr.match(/requests per minute \(actual\/limit\):\s*(\d+)\s*\/\s*\1/);
  3534. if (isShortRateLimit || isLongRateLimit) {
  3535. const nextAttempt = attempts + 1;
  3536. addLog('NETWORK_WARN', 'Rate limit encountered', { taskId, attempt: attempts + 1, status: err.status || 429, message: err.message });
  3537. onProgress({ shortStatus: `Lmt(${err.status || 429}). Wiping...[${nextAttempt}]`, longStatus: `Rate Limit Hit (${err.status || 429}). Resetting (Attempt ${nextAttempt})...`, color: 'orange' }); await nuclearWipe(); attempts++;
  3538. if (attempts >= APP_CONFIG.TIMINGS.MAX_RETRY_ATTEMPTS) throw new Error("Max retries on rate limits");
  3539. if (isShortRateLimit) await sleep(getDelay(), signal); else { if (++rateLimitFails <= 1) await sleep(1000, signal); else { rateLimitFails = 0; let cd = parseInt(STATE.rateLimitDelay) || 60; while (cd > 0 && STATE.generationToken === token && !signal.aborted) { onProgress({ shortStatus: `Limit(${cd}s)...`, longStatus: `Rate Limit Active. Waiting ${cd} seconds...`, color: 'orange' }); await sleep(1000, signal); cd--; } } } continue;
  3540. }
  3541. if (shouldAutoRetryStuckVideo(errStr)) {
  3542. attempts++;
  3543. addLog('POLL_WARN', 'Video task stalled or rejected', { taskId, attempt: attempts, message: err.message });
  3544. if (attempts >= APP_CONFIG.TIMINGS.MAX_RETRY_ATTEMPTS) throw new Error("Max retries for stuck video");
  3545. onProgress({ shortStatus: `Stuck Vid. Rty[${attempts}]`, longStatus: `Video Generation Stuck. Auto-retrying (Attempt ${attempts})...`, color: 'orange' });
  3546. await sleep(getDelay(), signal);
  3547. if (payload.prompt) payload.prompt += '\u200B';
  3548. continue;
  3549. }
  3550. attempts++; if (attempts >= APP_CONFIG.TIMINGS.MAX_RETRY_ATTEMPTS) throw new Error(`Err: ${err.message.split('\n')[0].substring(0, 15)}`);
  3551. onProgress({ shortStatus: `Wait 10s[${attempts}]`, longStatus: `Generation Failed. Waiting 10s to retry (Attempt ${attempts})...`, color: '#ef4444' }); if (payload.prompt) payload.prompt += '\u200B'; await sleep(10000, signal);
  3552. }
  3553. } throw new Error("Max retry reached");
  3554. }
  3555.  
  3556. async function pollVideoTask(reqId, signal, token, onProgress) {
  3557. let pollCount = 0;
  3558. while (token === -1 || STATE.generationToken === token) {
  3559. if (++pollCount > APP_CONFIG.TIMINGS.MAX_POLL_ATTEMPTS) throw new Error("Timeout: Video likely dropped or stuck."); await sleep(APP_CONFIG.TIMINGS.API_POLL_INTERVAL, signal);
  3560. if (token !== -1 && STATE.generationToken !== token) break;
  3561. try {
  3562. const pollStartedAt = performance.now();
  3563. addLog('POLL_REQ', `Polling video ${reqId}`, { reqId, pollCount, maxPolls: APP_CONFIG.TIMINGS.MAX_POLL_ATTEMPTS });
  3564. const res = await fetch(`/v1/videos/${reqId}`, { signal });
  3565. const elapsedMs = Math.max(0, Math.round(performance.now() - pollStartedAt));
  3566. if (AUTH_FAILURE_STATUSES.has(res.status)) { addLog('POLL_WARN', 'Polling auth failure', { reqId, pollCount, status: res.status, elapsedMs }); onProgress({ shortStatus: 'Poll 401. Wiping...!', longStatus: 'Authentication Error during poll. Resetting...', color: 'orange' }); await nuclearWipe(); await sleep(3000, signal); continue; }
  3567. if (!res.ok) {
  3568. const errData = await parseResponseJsonSafe(res);
  3569. addLog('POLL_ERR', `Poll failed HTTP ${res.status}`, { reqId, pollCount, status: res.status, elapsedMs, data: errData });
  3570. if (res.status === 404) throw new Error("video lost (404). Session wiped.");
  3571. if (errData?.error) throw Object.assign(new Error(typeof errData.error.message === 'string' ? errData.error.message : JSON.stringify(errData.error)), { status: res.status, data: errData });
  3572. continue;
  3573. }
  3574. const data = await res.json();
  3575. addLog('POLL_RES', 'Poll result', { reqId, pollCount, status: res.status, elapsedMs, data });
  3576. if (data?.error) throw Object.assign(new Error(data.error.message || JSON.stringify(data.error)), { data });
  3577. const st = (data?.status || data?.state || 'processing').toLowerCase(), pNum = typeof data?.progress === 'number' ? data.progress : null, progStr = pNum !== null ? ` ${pNum}%` : '';
  3578. onProgress({ shortStatus: `[${pollCount}/${APP_CONFIG.TIMINGS.MAX_POLL_ATTEMPTS}] ${st.charAt(0).toUpperCase() + st.slice(1)}${progStr}...`, longStatus: `Rendering Video: ${st.charAt(0).toUpperCase() + st.slice(1)}${progStr} (Attempt ${pollCount}/${APP_CONFIG.TIMINGS.MAX_POLL_ATTEMPTS})`, color: '#fff', progress: pNum });
  3579. if (VIDEO_SUCCESS_STATES.has(st)) return data.video.url;
  3580. else if (VIDEO_FLAGGED_STATES.has(st) || data.is_sensitive) {
  3581. if (data?.video?.url) {
  3582. addLog('POLL_WARN', 'Video flagged but recovered', { reqId, pollCount, state: st, elapsedMs, data });
  3583. onProgress({ shortStatus: `Flagged(${st})`, longStatus: `Video flagged as ${st}, but media was recovered. Saving...`, color: '#d97706', progress: pNum });
  3584. return data.video.url;
  3585. }
  3586. throw new Error(`Generation halted. Reason: ${st}`);
  3587. }
  3588. } catch (e) { throw e; }
  3589. }
  3590. }
  3591.  
  3592. function createPlaceholders(taskId, batchCount, actionType, currentRefs) {
  3593. let targetRatio = actionType.includes('video') ? (16 / 9) : 1; const ar = STATE.currentAr.trim();
  3594. if (ar !== 'Auto' && ar !== 'Ref') { const parts = ar.split(':'); if (parts.length === 2) targetRatio = parseFloat(parts[0]) / parseFloat(parts[1]); } else if (currentRefs.length > 0 && currentRefs[0]) targetRatio = currentRefs[0].ratio || targetRatio;
  3595. const refItem = currentRefs.length > 0 ? currentRefs[0] : null, theme = refItem ? null : PlaceholderPalette.next(), bgPreview = refItem?.lqip || theme?.gradient || '#070809', placeholderIds =[];
  3596. const initialStatus = refItem
  3597. ? [{ text: `${ActionUtils.getTitle(actionType)} • ${refItem.filename || 'Reference'}`, color: '#fff', style: CURRENT_PANEL_STATUS_STYLE }]
  3598. : [
  3599. { text: ActionUtils.getTitle(actionType), color: '#fff', style: CURRENT_PANEL_STATUS_STYLE },
  3600. { text: 'Queued...', color: '#d4d4d8' }
  3601. ];
  3602. for (let i = 0; i < batchCount; i++) {
  3603. const pid = `pending-${taskId}-${i}`; placeholderIds.push(pid);
  3604. Store.commitNewItem({ id: pid, type: refItem ? refItem.type : (actionType === 'gen_image' ? 'image' : 'video'), ratio: targetRatio, lqip: bgPreview, isPending: true, persist: false, taskId: taskId, filename: 'Pending...', downloaded: false, refSourceId: refItem?.id, originalUrl: refItem?.originalUrl, _statusData: initialStatus }, { targetArrayName: 'currentOrder', persist: false });
  3605. }
  3606. return placeholderIds;
  3607. }
  3608.  
  3609. async function executeSingleTask(taskId, refIds, isMulti, token) {
  3610. const taskMeta = JobManager.tasks.get(taskId); if (!taskMeta) return;
  3611. const currentRefs = refIds.map(id => STATE.items.get(id)).filter(r => r && r.active);
  3612. if (currentRefs.length === 0 && !['MULTI', 'NO_REF'].includes(refIds[0])) { taskMeta.longStatus = 'Skipped'; return; }
  3613. const actionType = STATE.action, isImage = actionType === 'gen_image', batchCount = isImage ? parseInt(STATE.batchSize || "1") : 1, placeholderIds = createPlaceholders(taskId, batchCount, actionType, currentRefs);
  3614. let attempts = 0, success = false, reqStartTime = Date.now(), fakeProgressTimer = null;
  3615.  
  3616. const updateTask = (val) => {
  3617. taskMeta.shortStatus = val.shortStatus; taskMeta.longStatus = val.longStatus; taskMeta.color = val.color;
  3618. taskMeta.progress = val.progress !== undefined ? val.progress : null;
  3619. updateStatusUI();
  3620. const statusLines = buildCurrentStatusLines(val);
  3621. placeholderIds.forEach(pid => {
  3622. const pItem = STATE.items.get(pid), card = CardRegistry.get('current', pid);
  3623. if (pItem) pItem._statusData = statusLines;
  3624. if (card && card.setStatus) card.setStatus(statusLines);
  3625. if (card && card.setProgress) card.setProgress(taskMeta.progress);
  3626. });
  3627. refIds.forEach(rid => {
  3628. const refCard = CardRegistry.get('reference', rid);
  3629. if (refCard && refCard.setProgress) {
  3630. const tasksForRef =[...JobManager.tasks.values()].filter(t => t.refIds.includes(rid));
  3631. if (tasksForRef.length > 0) refCard.setProgress(tasksForRef.reduce((s, t) => s + (t.progress || 0), 0) / tasksForRef.length);
  3632. else refCard.setProgress(taskMeta.progress);
  3633. }
  3634. });
  3635. };
  3636.  
  3637. if (isImage) {
  3638. const timeMultiplier = STATE.resImg === '2k' ? 1.5 : 1.0;
  3639. const expectedMs = Math.max(3000, STATE.imgBaseMs * batchCount * timeMultiplier);
  3640. fakeProgressTimer = setInterval(() => {
  3641. if (taskMeta.longStatus && /Req|Render|Busy/.test(taskMeta.longStatus)) {
  3642. let elapsed = Date.now() - reqStartTime;
  3643. updateTask({ shortStatus: taskMeta.shortStatus, longStatus: taskMeta.longStatus, color: taskMeta.color, progress: Math.min(95, Math.max(0, (elapsed / expectedMs) * 100)) });
  3644. }
  3645. }, 300);
  3646. updateTask({ shortStatus: 'Req...', longStatus: 'Requesting...', color: '#fff', progress: 0 });
  3647. }
  3648.  
  3649. try {
  3650. while (attempts < APP_CONFIG.TIMINGS.MAX_RETRY_ATTEMPTS && !success && STATE.generationToken === token) {
  3651. try {
  3652. const liveRefPrompt = (!isMulti && currentRefs.length === 1) ? (STATE.refPrompts[currentRefs[0].id] ?? null) : null, config = await getApiPayload(currentRefs.length > 0 ? currentRefs : null, liveRefPrompt), payload = config.payload;
  3653. if (STATE.action === 'gen_image') payload.n = parseInt(STATE.batchSize || "1"); payload.prompt = parseDynamicPrompt(payload.prompt);
  3654. reqStartTime = Date.now();
  3655.  
  3656. const resultData = await fetchWithRetries(config.endpoint, payload, taskMeta.controller.signal, token, taskId, updateTask);
  3657. if (STATE.generationToken !== token || !resultData) break;
  3658.  
  3659. if (isImage) {
  3660. if (resultData?.data && Array.isArray(resultData.data)) {
  3661. updateTask({ shortStatus: 'Saving...', longStatus: 'Rendering Complete. Saving...', color: '#10b981', progress: 100 });
  3662. const committedIds =[], committedItems =[], batchTimestampBase = Date.now();
  3663. for (let i = 0; i < resultData.data.length; i++) {
  3664. if (STATE.generationToken !== token) break;
  3665. const imgObj = resultData.data[i], id = crypto.randomUUID(), blob = DomUtils.base64ToBlob(imgObj.b64_json.replace(/\s/g, ''), imgObj.mime_type || 'image/png');
  3666. await OPFS.write(id, 'full', blob);
  3667. const mediaData = await MediaUtils.processSource(blob, 'image', getThumbMaxDim(), getThumbQuality());
  3668. if (mediaData.thumbBlob) await OPFS.write(id, 'thumb', mediaData.thumbBlob);
  3669.  
  3670. const item = Store.commitNewItem({
  3671. id, type: 'image', mimeType: blob.type, timestamp: Pipeline.makeBatchTimestamp(batchTimestampBase, i, resultData.data.length), prompt: Pipeline.normalizePrompt(imgObj.revised_prompt, Pipeline.normalizePrompt(payload.prompt)),
  3672. filename: `Grok Img - ${makeTimestamp()} - ${i + 1}of${resultData.data.length}.png`,
  3673. ratio: mediaData.ratio, originalUrl: null, downloaded: false, lqip: mediaData.lqip, isUploadedRef: false
  3674. }, 'currentOrder', placeholderIds[i]);
  3675. committedIds.push(id); committedItems.push(item);
  3676. }
  3677. if (committedIds.length > 0) { Store.prependHistory(committedIds); await enforceHistoryLimit(); if (STATE.autoDownload) committedItems.forEach((item, idx) => setTimeout(() => MediaUtils.downloadItem(item, true), 500 + (idx * 50))); }
  3678. const unused = placeholderIds.slice(resultData.data.length); if (unused.length > 0) Store.clearCurrentTransient(unused);
  3679. success = committedIds.length > 0;
  3680. if (attempts === 0) {
  3681. const timeMultiplier = STATE.resImg === '2k' ? 1.5 : 1.0;
  3682. const actualBaseMs = (Date.now() - reqStartTime) / (batchCount * timeMultiplier);
  3683. STATE.imgBaseMs = Math.max(1500, Math.min(10000, (STATE.imgBaseMs * 0.7) + (actualBaseMs * 0.3)));
  3684. }
  3685. } else throw new Error("Invalid response format");
  3686. } else {
  3687. const reqId = resultData.request_id; if (!reqId) throw new Error("No Request ID returned");
  3688. STATE.pendingVideos = [...(STATE.pendingVideos || []).filter(v => v.reqId !== reqId), { reqId, prompt: Pipeline.normalizePrompt(payload.prompt), timestamp: Date.now() }]; persistPendingVideos();
  3689. const videoUrl = await pollVideoTask(reqId, taskMeta.controller.signal, token, updateTask);
  3690. STATE.pendingVideos = STATE.pendingVideos.filter(v => v.reqId !== reqId); persistPendingVideos();
  3691. if (videoUrl && STATE.generationToken === token) {
  3692. updateTask({ shortStatus: `Extracting poster...`, longStatus: `Extracting poster image...`, color: '#3b82f6', progress: 100 });
  3693. let posterData = null; try { posterData = await MediaUtils.processSource(await fetchBlobCSP(videoUrl, '0-500000'), 'video', getThumbMaxDim(), getThumbQuality()); if (!posterData.thumbBlob) throw new Error('Partial extraction failed'); } catch (e) { try { posterData = await MediaUtils.processSource(await fetchBlobCSP(videoUrl, null), 'video', getThumbMaxDim(), getThumbQuality()); } catch (err) {} }
  3694. const id = crypto.randomUUID(); if (posterData && posterData.thumbBlob) await OPFS.write(id, 'thumb', posterData.thumbBlob);
  3695.  
  3696. const item = Store.commitNewItem({
  3697. id, type: 'video', mimeType: 'video/mp4', prompt: Pipeline.normalizePrompt(payload.prompt), filename: `Grok Video - ${makeTimestamp()}.mp4`, ratio: posterData?.ratio || 16/9, originalUrl: videoUrl, downloaded: false, lqip: posterData?.lqip || null, isUploadedRef: false
  3698. }, 'currentOrder', placeholderIds[0]);
  3699.  
  3700. Store.prependHistory([id]); await enforceHistoryLimit(); if (STATE.autoDownload) setTimeout(() => MediaUtils.downloadItem(item, true), 500);
  3701. success = true;
  3702. }
  3703. }
  3704. if (success) { STATE.successCount++; if (STATE.successCount >= 3) { STATE.successCount = 0; nuclearWipe(); } }
  3705. } catch (err) {
  3706. if (err.name === 'AbortError' || STATE.generationToken !== token) {
  3707. taskMeta.shortStatus = "Cancelled"; taskMeta.longStatus = "Cancelled";
  3708. updateTask({ shortStatus: "Cancelled", longStatus: "Cancelled", color: 'var(--danger)' });
  3709. } else {
  3710. let errMsg = err.message || "Unknown error";
  3711. if (err.moderation) {
  3712. taskMeta.shortStatus = 'Blocked';
  3713. taskMeta.longStatus = `Moderation Blocked (${errMsg})`;
  3714. updateTask({ shortStatus: taskMeta.shortStatus, longStatus: taskMeta.longStatus, color: '#a1a1aa' });
  3715. addLog('WARN', `Task Blocked: ${errMsg}`, err);
  3716. } else if (err.invalidRequest) {
  3717. taskMeta.shortStatus = 'Invalid';
  3718. taskMeta.longStatus = `Invalid Request (${errMsg})`;
  3719. updateTask({ shortStatus: taskMeta.shortStatus, longStatus: taskMeta.longStatus, color: '#f59e0b' });
  3720. addLog('WARN', `Task Invalid: ${errMsg}`, err);
  3721. } else {
  3722. taskMeta.shortStatus = `Failed (${errMsg.substring(0, 12)})`;
  3723. taskMeta.longStatus = `Failed (${errMsg})`;
  3724. updateTask({ shortStatus: taskMeta.shortStatus, longStatus: taskMeta.longStatus, color: 'var(--danger)' });
  3725. addLog('ERROR', `Task Failed: ${errMsg}`, err);
  3726. }
  3727. }
  3728. break;
  3729. }
  3730. }
  3731. } finally {
  3732. if (fakeProgressTimer) clearInterval(fakeProgressTimer);
  3733. if (!success) {
  3734. setTimeout(() => {
  3735. Store.clearCurrentTransient(placeholderIds);
  3736. }, 5000);
  3737. }
  3738. }
  3739. }
  3740.  
  3741. function spawnTask(jobKey, refIds, isMulti, token) {
  3742. let pObj = JobManager.progress.get(jobKey); if (pObj) pObj.active++; let tId = `task-${Date.now()}-${Math.random()}`;
  3743. JobManager.tasks.set(tId, { controller: new AbortController(), refIds, shortStatus: 'Starting...', longStatus: 'Starting...', color: '#fff', isMulti, progress: 0 });
  3744. updateStatusUI();
  3745. let tProm = executeSingleTask(tId, refIds, isMulti, token).finally(() => { if (pObj) { pObj.active--; pObj.done++; } JobManager.tasks.delete(tId); JobManager.taskPromises.delete(tProm); updateStatusUI(); });
  3746. JobManager.taskPromises.add(tProm);
  3747. }
  3748.  
  3749. async function processQueue(token) {
  3750. STATE.successCount = 0; const getActiveCount = () => JobManager.tasks.size; let endedNaturally = false;
  3751. while (STATE.isGenerating && STATE.generationToken === token) {
  3752. const limit = parseInt(STATE.concurrentSessions) || 1, liveLoops = (parseInt(STATE.loops) || 0) + 1, refs = getEligibleRefs().eligible.filter(m => m.active), now = Date.now(); let spawned = false;
  3753. const spawnTaskIfAllowed = (jobKey, refIds, isMulti) => { if (getActiveCount() >= limit) return false; let p = JobManager.progress.get(jobKey); if (!p) { p = { done: 0, active: 0, needed: liveLoops }; JobManager.progress.set(jobKey, p); } else p.needed = liveLoops; if (p.done + p.active < p.needed) { spawnTask(jobKey, refIds, isMulti, token); return true; } return false; };
  3754. if (refs.length === 0) { while (spawnTaskIfAllowed('NO_REF',['NO_REF'], false)) spawned = true; }
  3755. else if (STATE.refMode === 'queue') {
  3756. const pendingRefs = refs.filter(r => (r.readyAt || 0) <= now).sort((a, b) => { const pA = JobManager.progress.get(a.id) || {done:0, active:0}, pB = JobManager.progress.get(b.id) || {done:0, active:0}; return (pA.done + pA.active) - (pB.done + pB.active); });
  3757. for (let r of pendingRefs) { if (!spawnTaskIfAllowed(r.id,[r.id], false)) break; spawned = true; }
  3758. } else { if (!refs.some(r => (r.readyAt || 0) > now)) while (spawnTaskIfAllowed('MULTI', refs.map(r => r.id), true)) spawned = true; }
  3759. const isDone =[...JobManager.progress.entries()].every(([k, p]) => { if (k === 'MULTI' || k === 'NO_REF' || refs.some(r => r.id === k)) return p.done >= p.needed; return true; });
  3760. if (isDone && !refs.some(r => (r.readyAt || 0) > now) && getActiveCount() === 0) { endedNaturally = true; break; }
  3761. if (!spawned) {
  3762. const wakeVersion = queueWake.version;
  3763. const promises = [...JobManager.taskPromises, queueWake.wait(wakeVersion)];
  3764. if (promises.length === 1) promises.push(sleep(1000));
  3765. await Promise.race(promises);
  3766. } else await yieldToMain();
  3767. }
  3768. if (STATE.generationToken === token) {
  3769. if (endedNaturally) TitleState.markDone();
  3770. STATE.isGenerating = false;
  3771. }
  3772. }
  3773.  
  3774. let _statusRenderHandle = 0;
  3775. let _statusViewCacheKey = '';
  3776. const createStatusShell = () => {
  3777. const row = document.createElement('div');
  3778. row.className = 'w-100 d-flex justify-end';
  3779. return row;
  3780. };
  3781. const createStatusSummaryText = ({ doneT, totalT, activeT }) => `Tasks: ${Math.max(0, totalT - doneT)} (${activeT})`;
  3782. const createStatusSummaryKey = ({ taskList, doneT, totalT, activeT, showTaskList }) =>[
  3783. doneT,
  3784. totalT,
  3785. activeT,
  3786. showTaskList ? 1 : 0,
  3787. ...(showTaskList ? taskList.map(task => `${task.color || ''}|${getTaskSummaryText(task)}`) : [])
  3788. ].join('\n');
  3789. const createTaskSummaryChip = (task, index) => {
  3790. const chip = document.createElement('span');
  3791. chip.style.padding = '0 4px';
  3792. chip.style.borderLeft = '1px solid rgba(255,255,255,0.1)';
  3793. chip.style.whiteSpace = 'nowrap';
  3794. if (task.color) chip.style.color = task.color;
  3795. chip.textContent = `T${index + 1}: ${getTaskSummaryText(task)}`;
  3796. return chip;
  3797. };
  3798. const buildStatusReadyView = () => {
  3799. const row = createStatusShell();
  3800. const text = document.createElement('span');
  3801. text.className = 'text-muted';
  3802. text.textContent = 'Ready';
  3803. row.appendChild(text);
  3804. return { key: 'ready', node: row };
  3805. };
  3806. const buildStatusSummaryView = ({ taskList, doneT, totalT, activeT, showTaskList }) => {
  3807. const summaryTitle = 'Tasks: remaining (active)';
  3808. const summaryText = createStatusSummaryText({ doneT, totalT, activeT });
  3809. const row = createStatusShell();
  3810. if (showTaskList) {
  3811. row.classList.add('gap-2');
  3812. const list = document.createElement('div');
  3813. list.className = 'd-flex justify-end';
  3814. list.style.cssText = 'flex:1; overflow:hidden; mask-image:linear-gradient(to right, transparent, black 15px);';
  3815. taskList.forEach((task, index) => list.appendChild(createTaskSummaryChip(task, index)));
  3816. row.appendChild(list);
  3817. }
  3818. const summary = document.createElement('span');
  3819. summary.className = 'text-success';
  3820. summary.style.cssText = 'font-weight:600; white-space:nowrap; flex-shrink:0;';
  3821. summary.title = summaryTitle;
  3822. summary.textContent = summaryText;
  3823. row.appendChild(summary);
  3824. return { key: createStatusSummaryKey({ taskList, doneT, totalT, activeT, showTaskList }), node: row };
  3825. };
  3826. const setStatusView = (view) => {
  3827. if (!DOM.status || !view || _statusViewCacheKey === view.key) return;
  3828. _statusViewCacheKey = view.key;
  3829. DOM.status.replaceChildren(view.node);
  3830. };
  3831. const setDocumentTitle = (title) => {
  3832. if (document.title !== title) document.title = title;
  3833. };
  3834. const getQueuePlanState = () => {
  3835. const refs = Store.getRefItems(), now = Date.now(), { eligible, acceptedType } = getEligibleRefs(), eligibleIds = new Set(eligible.map(e => e.id)), liveLoops = (parseInt(STATE.loops) || 0) + 1;
  3836. const plannedJobs = eligible.length === 0 ? liveLoops : (STATE.refMode === 'queue' ? eligible.length * liveLoops : liveLoops);
  3837. return { refs, now, eligible, eligibleIds, acceptedType, liveLoops, plannedJobs };
  3838. };
  3839. const pruneJobProgress = (eligibleIds, taskList = []) => {
  3840. const valid = new Set(['MULTI', 'NO_REF', ...eligibleIds]);
  3841. taskList.forEach(task => {
  3842. if (task.isMulti) valid.add('MULTI');
  3843. else if (task.refIds[0] === 'NO_REF') valid.add('NO_REF');
  3844. task.refIds.forEach(refId => valid.add(String(refId)));
  3845. });
  3846. [...JobManager.progress.keys()].forEach(key => {
  3847. if (!valid.has(String(key))) JobManager.progress.delete(key);
  3848. });
  3849. };
  3850. const getProgressKey = (refId) => STATE.refMode === 'queue' ? refId : 'MULTI';
  3851. const clearReferenceCardRuntime = (card) => {
  3852. card?.setStatus?.([]);
  3853. card?.setProgress?.(null);
  3854. };
  3855. const getReferenceLabelState = (ref, idx, acceptedType, eligibleIds, progress, now) => {
  3856. const baseLabel = `IMAGE_${idx}`;
  3857. if (STATE.isGenerating && ref.active && eligibleIds.has(ref.id)) {
  3858. if ((ref.readyAt || 0) > now) return { text: `${baseLabel} (Wait)` };
  3859. if (progress) return { text: `${baseLabel} (${progress.done}/${progress.needed})` };
  3860. return { text: baseLabel };
  3861. }
  3862. if (eligibleIds.has(ref.id) && ref.active) {
  3863. if (STATE.refMode === 'multi') {
  3864. return {
  3865. text: `<IMAGE_${idx}>`,
  3866. title: 'Insert tag',
  3867. onClick: (e) => {
  3868. e.preventDefault();
  3869. e.stopPropagation();
  3870. DomUtils.insertTextAtCursor(DOM.prompt, ` <IMAGE_${idx}> `);
  3871. }
  3872. };
  3873. }
  3874. return { text: baseLabel, title: 'Active Reference' };
  3875. }
  3876. return { text: baseLabel, title: ref.type !== acceptedType ? `Need ${acceptedType}` : 'Limit Reached' };
  3877. };
  3878. const getReferenceStatusLines = (ref, tasks, progress, now) => {
  3879. if (!ref.active) return [];
  3880. const isWait = (ref.readyAt || 0) > now;
  3881. if (!progress && !isWait && tasks.length === 0) return [];
  3882. const lines = [];
  3883. if (isWait) lines.push({ text: 'Waiting...', color: '#9e9e9e' });
  3884. tasks.forEach((task, index) => lines.push({ text: `[T${index + 1}] ${task.shortStatus}`, color: task.color }));
  3885. return lines;
  3886. };
  3887. function seedQueueProgress() {
  3888. const { eligible, liveLoops } = getQueuePlanState();
  3889. JobManager.progress.clear();
  3890. if (eligible.length === 0) JobManager.progress.set('NO_REF', { done: 0, active: 0, needed: liveLoops });
  3891. else if (STATE.refMode === 'queue') eligible.forEach(ref => JobManager.progress.set(ref.id, { done: 0, active: 0, needed: liveLoops }));
  3892. else JobManager.progress.set('MULTI', { done: 0, active: 0, needed: liveLoops });
  3893. }
  3894. function updateStatusUI() {
  3895. if (!DOM.status) return;
  3896. if (_statusRenderHandle) return;
  3897. _statusRenderHandle = requestAnimationFrame(() => {
  3898. _statusRenderHandle = 0;
  3899. if (!DOM.status) return;
  3900.  
  3901. const { refs, now, eligibleIds, acceptedType, plannedJobs } = getQueuePlanState();
  3902. const refIndexMap = new Map(STATE.refOrder.map((id, index) => [id, index]));
  3903. const activeT = JobManager.tasks.size, taskList = [...JobManager.tasks.values()], tasksByRef = new Map();
  3904. pruneJobProgress([...eligibleIds], taskList);
  3905. taskList.forEach(task => task.refIds.forEach(rid => {
  3906. if (!tasksByRef.has(rid)) tasksByRef.set(rid, []);
  3907. tasksByRef.get(rid).push(task);
  3908. }));
  3909.  
  3910. let queuedT = 0, done = 0, totalPlanned = 0;
  3911. for (const [key, p] of JobManager.progress.entries()) {
  3912. if (!(key === 'MULTI' || key === 'NO_REF' || eligibleIds.has(key))) continue;
  3913. const activeForKey = Math.max(0, p.active || 0);
  3914. const totalForKey = Math.max(p.needed || 0, (p.done || 0) + activeForKey);
  3915. const doneForKey = Math.min(Math.max(0, p.done || 0), totalForKey);
  3916. queuedT += Math.max(totalForKey - doneForKey - activeForKey, 0);
  3917. done += doneForKey;
  3918. totalPlanned += totalForKey;
  3919. }
  3920. totalPlanned = Math.max(totalPlanned, STATE.isGenerating ? plannedJobs : 0, done + activeT + queuedT);
  3921. const doneT = Math.min(done, totalPlanned);
  3922. const totalT = Math.max(totalPlanned, doneT + activeT);
  3923. let activeRefCount = 0;
  3924.  
  3925. refs.forEach(r => {
  3926. const card = CardRegistry.get('reference', r.id); if (!card) return;
  3927. if (r.active) activeRefCount++;
  3928. const refTasks = tasksByRef.get(r.id) || [];
  3929. const progress = JobManager.progress.get(getProgressKey(r.id));
  3930. const idx = refIndexMap.get(r.id) ?? -1;
  3931. const label = getReferenceLabelState(r, idx, acceptedType, eligibleIds, progress, now);
  3932. const statusLines = getReferenceStatusLines(r, refTasks, progress, now);
  3933. const isProcessing = refTasks.length > 0 || (STATE.isGenerating && r.active && eligibleIds.has(r.id) && (r.readyAt || 0) > now);
  3934.  
  3935. card.classList.toggle('is-processing', isProcessing);
  3936. card.setLabel(label.text, label.title || '', label.onClick || null);
  3937.  
  3938. if (statusLines.length > 0) card.setStatus(statusLines);
  3939. else clearReferenceCardRuntime(card);
  3940. });
  3941.  
  3942. if (!STATE.isGenerating) {
  3943. setStatusView(buildStatusReadyView());
  3944. TitleState.sync();
  3945. return;
  3946. }
  3947.  
  3948. setStatusView(buildStatusSummaryView({ taskList, doneT, totalT, activeT, showTaskList: activeRefCount === 0 }));
  3949. TitleState.sync(`${totalPlanned > 0 ? Math.floor((done / totalPlanned) * 100) : 0}%`);
  3950. });
  3951. }
  3952.  
  3953. function toggleGenerateButton(isRunning) {
  3954. const c = document.createElement('div');
  3955. c.className = 'btn-content flex-center';
  3956. if (isRunning) {
  3957. DOM.generateBtn.classList.replace('xai-btn--run', 'xai-btn--stop');
  3958. DOM.generateBtn.classList.add('is-running');
  3959. c.textContent = '■';
  3960. c.style.fontSize = '16px';
  3961. } else {
  3962. DOM.generateBtn.classList.replace('xai-btn--stop', 'xai-btn--run');
  3963. if (!DOM.generateBtn.classList.contains('xai-btn--run')) DOM.generateBtn.classList.add('xai-btn--run');
  3964. DOM.generateBtn.classList.remove('is-running');
  3965. c.textContent = '↑';
  3966. c.style.fontSize = '22px';
  3967. }
  3968. DOM.generateBtn.replaceChildren(c);
  3969. }
  3970.  
  3971. function handleGeneration() {
  3972. if (STATE.activeRefPromptId) saveAndCloseRefPrompt(true);
  3973. if (STATE.isGenerating) { STATE.generationToken++; JobManager.tasks.forEach(t => t.controller.abort()); JobManager.tasks.clear(); JobManager.taskPromises.clear(); JobManager.progress.clear(); STATE.isGenerating = false; return; }
  3974. if (!sanitizePromptText(getStoredActionPrompt()) && sanitizePromptText(getDraftActionPrompt())) commitActionPrompt(STATE.action, getDraftActionPrompt());
  3975. if (!sanitizePromptText(getTaskPrompt()) && Object.keys(STATE.refPrompts).length === 0 && Store.getRefItems().length === 0) return UI.showToast("Empty prompt", "error");
  3976. const aRefs = Store.getRefItems().filter(m => m.active), dur = parseInt(STATE.duration) || 5;
  3977. ActionUtils.getGenerationWarnings(STATE.action, aRefs, dur, STATE.currentAr).forEach(message => UI.showToast(message, "warn"));
  3978. const staleTransientIds = STATE.currentOrder.filter(id => Pipeline.isTransientItem(STATE.items.get(id)));
  3979. staleTransientIds.forEach(id => Store.removeItem(id));
  3980. STATE.generationToken++;
  3981. seedQueueProgress();
  3982. NativeGridManager.clear();
  3983. STATE.currentOrder =[];
  3984. STATE.isGenerating = true;
  3985. processQueue(STATE.generationToken).catch(err => { addLog('ERROR', 'Queue Error', err); STATE.isGenerating = false; });
  3986. }
  3987.  
  3988. function initAPIAndGeneration() {
  3989. App.on(DOM.generateBtn, 'click', handleGeneration);
  3990. App.on(DOM.reset, 'click', async () => {
  3991. if (STATE.isGenerating) return UI.showToast("Stop generation first", "error");
  3992. const choice = await UI.confirm("<div style='text-align:center; font-weight:bold; margin-bottom:8px; font-size:15px;'>Wipe Options:</div><div style='font-size:13px; line-height:1.5;'><b>[Cookie]</b> - Clears tokens/rate limits.<br><b>[Data]</b> - Clears history, keeps references.<br><b>[Full]</b> - Completely wipes all cache and DB.</div>");
  3993. if (!choice || choice === 'cancel') return;
  3994. if (choice === 'data') {
  3995. const keepIds = new Set(STATE.refOrder), idsToDelete =[];
  3996. STATE.items.forEach((_, id) => { if (!keepIds.has(id)) idsToDelete.push(id); });
  3997. await StorageDB.deleteItemsBulk(idsToDelete); idsToDelete.forEach(id => Store.removeItem(id));
  3998. STATE.historyOrder =[]; STATE.currentOrder = STATE.currentOrder.filter(id => keepIds.has(id));
  3999. NativeGridManager.update(STATE.currentOrder, STATE.items, 'current'); DOM.historyScroller.update(STATE.historyOrder, STATE.items);
  4000. runBg(updateHistoryMetrics); return UI.showToast("History data cleared (Refs kept)", "success");
  4001. }
  4002. if (choice === 'full') {
  4003. STATE.items.forEach((_, id) => Store.removeItem(id));
  4004. PromptSync.clear();
  4005. STATE.refPrompts = {};
  4006. persistRefPrompts();
  4007. DBQueue.clearPending();
  4008. clearTimeout(_configSaveTimer);
  4009. await StorageDB.clear();
  4010. localStorage.removeItem(APP_CONFIG.STORAGE.CONFIG_KEY);
  4011. }
  4012. lastWipeTime = 0; wipePromise = null; await nuclearWipe(); location.reload();
  4013. });
  4014. }
  4015.  
  4016. if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', checkRoute); else checkRoute();
  4017. })();
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!