// MLBB Collage Maker - export + spacing + groups + robust selection
const STARTUP_TEMPLATE_KEY = 'mlbb_startup_template_json';
const ENDPOINT_ZIP_URL = 'https://huggingface.co/rththr/collage/resolve/main/mlbb%20stuffs.zip';
const ENDPOINT_TEMPLATE_URL = 'https://huggingface.co/rththr/collage/resolve/main/template.json';
const CACHE_DB_NAME = 'mlbb_cache_db';
const CACHE_STORE_NAME = 'assets';
const CACHE_ZIP_KEY = 'endpoint_zip_blob';
const CACHE_TEMPLATE_KEY = 'endpoint_template_json';
const CACHE_META_KEY = 'mlbb_endpoint_cache_meta';
const CACHE_PROCESSED_FILES_KEY = 'endpoint_processed_files_v1';
const CACHE_PROCESSED_VERSION = 2;
const GEMINI_API_KEY_KEY = 'mlbb_gemini_api_key';
const GEMINI_MODEL_KEY = 'mlbb_gemini_model';
const GEMINI_AUTO_APPLY_KEY = 'mlbb_gemini_auto_apply';
const GEMINI_DEFAULT_MODEL = 'gemini-3-flash-preview';
const GEMINI_UPLOAD_JPEG_QUALITY = 0.85;
const GEMINI_UPLOAD_MAX_DIM = 1400;
const COLLAGE_JPEG_QUALITY = 0.93;
const STITCH_JPEG_QUALITY = 0.95;
const STITCH_TILE_BORDER_WIDTH = 2;
const EMBED_MARKER = 'MLBB_PROJECT_V1::';
const UI_SIDEBAR_COLLAPSED_KEY = 'mlbb_sidebar_collapsed';
const UI_COMPACT_KEY = 'mlbb_ui_compact';
const UI_CONTRAST_KEY = 'mlbb_ui_contrast';
const UI_MARKDOWN_PREVIEW_KEY = 'mlbb_markdown_preview';
const state = {
appData: {
files: {},
skinWidth: 335,
skinHeight: 300,
cols: 5,
rows: 1,
gap: 0,
bgColor: '#ffffff'
},
uploadedImages: [],
selected: new Set(),
pendingPlacement: [],
multiMode: false,
history: [],
historyIndex: -1,
cropper: null,
cropMode: 'batch',
pendingImages: [],
previewUrl: null,
stitchedBlob: null,
stitchedPreviewUrl: null,
stitchedFilename: '',
panning: false,
panX: 0,
panY: 0,
startPanX: 0,
startPanY: 0,
panDownClientX: 0,
panDownClientY: 0,
panMoved: false,
panStartedOnSkin: false,
suppressSkinClickUntil: 0,
activePointers: new Map(),
pinchStartDistance: 0,
pinchStartScale: 0,
scale: 0.5,
theme: 'light',
viewIndices: [],
groupOrder: [],
templateSlots: [],
autoSuggestions: [],
selectedGroup: '',
groupDrag: null,
multiPlacementOrder: 'asc',
activeTab: 'collage',
ocrInputFiles: [],
ocrStackResults: [],
ocrProcessedBatchFiles: [],
ocrZipBlob: null,
ocrZipName: '',
ocrAllImageBlob: null,
ocrAllImageName: '',
geminiZipFile: null,
geminiResponseText: '',
geminiModelsMeta: [],
binItems: [],
binSelected: new Set(),
pendingBinPlacement: [],
searchQuery: '',
drawerOpen: false,
loadingProgress: 0,
sidebarCollapsed: false,
uiCompact: false,
uiContrast: false,
markdownPreview: false,
elements: {}
};
function el(id) {
return state.elements[id] || null;
}
async function init() {
disableBrowserDialogs();
cacheElements();
initTheme();
initUiPreferences();
bindEvents();
initGeminiSettings();
setActiveTab('collage');
const loadedCache = await loadFromCachedAssets({
reset: false,
silent: true,
showOverlay: true,
persistAndRender: false
});
if (!loadedCache) {
const loadedExternal = loadStartupTemplateFromStorage();
if (!loadedExternal) {
loadEmbeddedTemplate();
}
}
syncInputsFromState();
refreshGroupFilter();
saveState();
render();
if (window.matchMedia('(max-width: 980px)').matches) {
fitCollageToViewport();
}
}
function normalizeTemplateData(data) {
if (!data || typeof data !== 'object') throw new Error('Invalid template data');
const items = [];
if (data.files && typeof data.files === 'object') {
const list = Array.isArray(data.files) ? data.files : Object.values(data.files);
list.forEach((f) => {
if (!f) return;
const name = typeof f === 'string' ? f : (f.name || '');
if (!name) return;
items.push({
name,
group: (typeof f === 'object' && f.group) ? f.group : 'Uncategorized'
});
});
}
if (items.length === 0 && data.groups && typeof data.groups === 'object') {
Object.entries(data.groups).forEach(([groupName, groupItems]) => {
const list = Array.isArray(groupItems) ? groupItems : [];
list.forEach((item) => {
const name = typeof item === 'string' ? item : (item?.name || '');
if (!name) return;
items.push({
name,
group: (typeof item === 'object' && item.group) ? item.group : groupName
});
});
});
}
if (items.length === 0 && data.filesByGroup && typeof data.filesByGroup === 'object') {
Object.entries(data.filesByGroup).forEach(([groupName, groupItems]) => {
const list = Array.isArray(groupItems) ? groupItems : [];
list.forEach((item) => {
const name = typeof item === 'string' ? item : (item?.name || '');
if (!name) return;
items.push({
name,
group: (typeof item === 'object' && item.group) ? item.group : groupName
});
});
});
}
if (items.length === 0) throw new Error('Template contains no files');
const skinWidth = clampNum(parseInt(data.skinWidth, 10), 20, 3000, state.appData.skinWidth);
const skinHeight = clampNum(parseInt(data.skinHeight, 10), 20, 3000, state.appData.skinHeight);
const colsRaw = parseInt(data.cols, 10);
const rowsRaw = parseInt(data.rows, 10);
const gap = clampNum(parseInt(data.gap, 10), 0, 100, state.appData.gap);
const bgColor = normalizeHex(data.bgColor || state.appData.bgColor);
const groupOrder = Array.isArray(data.groupOrder) ? data.groupOrder.map((g) => String(g || '').trim()).filter(Boolean) : [];
return {
skinWidth,
skinHeight,
cols: Number.isFinite(colsRaw) && colsRaw > 0 ? colsRaw : null,
rows: Number.isFinite(rowsRaw) && rowsRaw > 0 ? rowsRaw : null,
gap,
bgColor,
groupOrder,
files: items
};
}
function applyNormalizedTemplate(template) {
state.uploadedImages.forEach((x) => {
if (x.url && x.url.startsWith('blob:')) URL.revokeObjectURL(x.url);
});
state.appData.skinWidth = template.skinWidth;
state.appData.skinHeight = template.skinHeight;
state.appData.gap = template.gap;
state.appData.bgColor = template.bgColor;
state.uploadedImages = template.files.map((f) => ({
name: f.name,
group: f.group || 'Uncategorized',
url: null,
file: null
}));
state.templateSlots = template.files.map((f) => ({
name: f.name,
group: f.group || 'Uncategorized'
}));
autoArrangeGrid(template.files.length);
state.groupOrder = Array.isArray(template.groupOrder) ? template.groupOrder.slice() : [];
state.selectedGroup = '';
state.groupDrag = null;
ensureGroupOrder();
state.selected.clear();
state.pendingPlacement = [];
state.pendingBinPlacement = [];
refreshGroupFilter();
}
function loadStartupTemplateFromStorage() {
try {
const raw = localStorage.getItem(STARTUP_TEMPLATE_KEY);
if (!raw) return false;
const data = JSON.parse(raw);
const normalized = normalizeTemplateData(data);
applyNormalizedTemplate(normalized);
return true;
} catch (err) {
console.error('Startup template load failed:', err);
return false;
}
}
function cacheElements() {
const ids = [
'collage-area', 'viewport', 'empty-state', 'ocr-workspace', 'ocrResults', 'profile-workspace', 'profileFrame',
'btnLoadImages', 'btnLoadZip', 'btnLoadProjectImage', 'btnSaveTemplate', 'btnLoadTemplate', 'btnDownload', 'btnStitchProfile', 'btnSetStartup', 'btnClearStartup', 'btnFetchEndpoint', 'btnResetFromCache',
'btnInsertImage',
'btnTabCollage', 'btnTabOcr', 'btnTabProfile', 'tabCollage', 'tabOcr', 'tabProfile',
'btnUndo', 'btnRedo', 'btnMulti', 'btnDelete', 'btnSwap', 'btnClearAll',
'btnFloatDelete', 'btnFloatDeselect', 'floating-panel', 'selection-status', 'activeSkinsBadge',
'imgLoader', 'zipLoader', 'insertImageLoader', 'projectImageLoader', 'templateLoader', 'startupLoader', 'ocrLoader', 'ocrBatchLoader',
'gridCols', 'gridRows', 'skinW', 'skinH', 'gapSize', 'gapValue',
'zoomLevel', 'zoomValue', 'bgColor',
'themeSelect', 'groupFilter', 'groupOrderList', 'groupPosSlider', 'groupPosLabel', 'btnGroupUp', 'btnGroupDown', 'multiOrder', 'autoOrderInput', 'btnApplyAutoOrder', 'btnImportOcr', 'btnClearAutoOrder', 'autoOrderMissing', 'autoSuggestionList',
'insertNameInput', 'insertPositionInput', 'insertGroupInput', 'btnInsertNameAtPos',
'image-processor-modal', 'image-processor-preview',
'cropW', 'cropH', 'btnApplyCrop', 'btnCancelCrop', 'btnConfirmCrop', 'btnCloseCrop', 'cropModalTitle', 'cropModalHint',
'stitchPreviewModal', 'stitchPreviewImage', 'btnCloseStitchPreview', 'btnCloseStitchPreviewSecondary', 'btnDownloadStitchPreview',
'insertMetaPanel', 'insertCropName', 'insertCropPosition', 'insertCropGroupSelect', 'insertCropNewGroupWrap', 'insertCropNewGroup',
'loading-overlay', 'loading-progress-bar', 'loading-progress-label', 'loading-progress-detail', 'btnQuickLoad', 'btnOcrLoadImages', 'ocrBatchSize', 'btnProcessOcrStack', 'btnDownloadOcrZip', 'ocrStatus',
'geminiApiKey', 'geminiModel', 'geminiPrompt', 'geminiAutoApplyCollage', 'btnFetchGeminiModels', 'geminiModelList', 'geminiModelInfo', 'geminiModelLimits', 'btnChooseGeminiZip', 'btnSendGemini', 'geminiZipLoader', 'geminiZipInfo', 'geminiResult', 'btnDownloadGeminiResult', 'btnToggleMarkdownPreview', 'geminiMarkdownPreview',
'btnFillEmpty', 'btnOpenDrawer', 'btnCloseDrawer', 'utilityDrawer', 'utilityScrim', 'drawerSearch', 'drawerSearchStatus', 'btnClearSearch',
'binCount', 'binList', 'btnPlaceBinSelected', 'btnRestoreBinAll', 'btnEmptyBin',
'btnToggleSidebar', 'btnToggleSidebarFab', 'toggleCompactUi', 'toggleStrongContrast',
'sidebarScrim', 'mobileQuickBar', 'btnMobileControls', 'btnMobileZoomOut', 'btnMobileZoomIn', 'btnMobileFit', 'btnMobileBin',
'btnOpenProfileStandalone'
];
ids.forEach((id) => {
state.elements[id] = document.getElementById(id);
});
}
function initTheme() {
const saved = localStorage.getItem('mlbb_theme');
if (saved) state.theme = saved;
applyTheme(state.theme);
}
function initUiPreferences() {
const savedSidebar = localStorage.getItem(UI_SIDEBAR_COLLAPSED_KEY);
state.sidebarCollapsed = savedSidebar === '1';
if (savedSidebar === null && window.matchMedia('(max-width: 980px)').matches) {
state.sidebarCollapsed = true;
}
state.uiCompact = localStorage.getItem(UI_COMPACT_KEY) === '1';
state.uiContrast = localStorage.getItem(UI_CONTRAST_KEY) === '1';
state.markdownPreview = localStorage.getItem(UI_MARKDOWN_PREVIEW_KEY) === '1';
applyUiPreferences();
}
function applyTheme(theme) {
state.theme = theme;
document.body.dataset.theme = theme;
localStorage.setItem('mlbb_theme', theme);
}
function applyUiPreferences() {
document.body.classList.toggle('sidebar-collapsed', !!state.sidebarCollapsed);
document.body.classList.toggle('ui-compact', !!state.uiCompact);
document.body.classList.toggle('ui-contrast', !!state.uiContrast);
if (el('toggleCompactUi')) el('toggleCompactUi').checked = !!state.uiCompact;
if (el('toggleStrongContrast')) el('toggleStrongContrast').checked = !!state.uiContrast;
const mdPreview = el('geminiMarkdownPreview');
const mdToggle = el('btnToggleMarkdownPreview');
if (mdPreview) mdPreview.classList.toggle('hidden', !state.markdownPreview);
if (mdToggle) mdToggle.classList.toggle('active', !!state.markdownPreview);
renderGeminiMarkdownPreview();
}
function setSidebarCollapsed(collapsed) {
state.sidebarCollapsed = !!collapsed;
localStorage.setItem(UI_SIDEBAR_COLLAPSED_KEY, state.sidebarCollapsed ? '1' : '0');
applyUiPreferences();
}
function bindEvents() {
el('btnLoadImages')?.addEventListener('click', () => el('imgLoader')?.click());
el('btnLoadZip')?.addEventListener('click', () => el('zipLoader')?.click());
el('btnLoadProjectImage')?.addEventListener('click', () => el('projectImageLoader')?.click());
el('btnInsertImage')?.addEventListener('click', () => el('insertImageLoader')?.click());
el('btnSaveTemplate')?.addEventListener('click', saveTemplate);
el('btnLoadTemplate')?.addEventListener('click', () => el('templateLoader')?.click());
el('btnDownload')?.addEventListener('click', downloadCollageJpeg);
el('btnStitchProfile')?.addEventListener('click', stitchProfileAndCollage);
el('btnDownloadStitchPreview')?.addEventListener('click', downloadStitchedPreviewImage);
el('btnCloseStitchPreview')?.addEventListener('click', closeStitchPreviewModal);
el('btnCloseStitchPreviewSecondary')?.addEventListener('click', closeStitchPreviewModal);
el('stitchPreviewModal')?.addEventListener('click', (event) => {
if (event.target === el('stitchPreviewModal')) closeStitchPreviewModal();
});
el('btnSetStartup')?.addEventListener('click', () => el('startupLoader')?.click());
el('btnClearStartup')?.addEventListener('click', clearStartupTemplate);
el('btnFetchEndpoint')?.addEventListener('click', fetchAndCacheEndpointAssets);
el('btnResetFromCache')?.addEventListener('click', () => loadFromCachedAssets({ reset: true }));
el('btnUndo')?.addEventListener('click', undo);
el('btnRedo')?.addEventListener('click', redo);
el('btnMulti')?.addEventListener('click', toggleMulti);
el('btnDelete')?.addEventListener('click', deleteSelected);
el('btnSwap')?.addEventListener('click', swapSelected);
el('btnFloatDelete')?.addEventListener('click', deleteSelected);
el('btnFloatDeselect')?.addEventListener('click', clearSelection);
el('btnClearAll')?.addEventListener('click', clearAll);
el('btnFillEmpty')?.addEventListener('click', fillSelectedIntoEmptySlots);
el('btnOpenDrawer')?.addEventListener('click', () => toggleUtilityDrawer(true));
el('btnCloseDrawer')?.addEventListener('click', () => toggleUtilityDrawer(false));
el('utilityScrim')?.addEventListener('click', () => toggleUtilityDrawer(false));
el('btnToggleSidebar')?.addEventListener('click', () => setSidebarCollapsed(!state.sidebarCollapsed));
el('btnToggleSidebarFab')?.addEventListener('click', () => setSidebarCollapsed(false));
el('sidebarScrim')?.addEventListener('click', () => setSidebarCollapsed(true));
el('btnMobileControls')?.addEventListener('click', () => setSidebarCollapsed(!state.sidebarCollapsed));
el('btnMobileZoomOut')?.addEventListener('click', () => adjustZoom(-0.1));
el('btnMobileZoomIn')?.addEventListener('click', () => adjustZoom(0.1));
el('btnMobileFit')?.addEventListener('click', fitCollageToViewport);
el('btnMobileBin')?.addEventListener('click', () => toggleUtilityDrawer(true));
el('toggleCompactUi')?.addEventListener('change', (e) => {
state.uiCompact = !!e.target.checked;
localStorage.setItem(UI_COMPACT_KEY, state.uiCompact ? '1' : '0');
applyUiPreferences();
});
el('toggleStrongContrast')?.addEventListener('change', (e) => {
state.uiContrast = !!e.target.checked;
localStorage.setItem(UI_CONTRAST_KEY, state.uiContrast ? '1' : '0');
applyUiPreferences();
});
el('btnToggleMarkdownPreview')?.addEventListener('click', () => {
state.markdownPreview = !state.markdownPreview;
localStorage.setItem(UI_MARKDOWN_PREVIEW_KEY, state.markdownPreview ? '1' : '0');
applyUiPreferences();
});
el('btnQuickLoad')?.addEventListener('click', loadSampleData);
el('btnTabCollage')?.addEventListener('click', () => setActiveTab('collage'));
el('btnTabOcr')?.addEventListener('click', () => setActiveTab('ocr'));
el('btnTabProfile')?.addEventListener('click', () => setActiveTab('profile'));
el('btnOpenProfileStandalone')?.addEventListener('click', () => {
const src = el('profileFrame')?.getAttribute('src') || '../profile/try.html';
window.open(src, '_blank', 'noopener');
});
el('btnOcrLoadImages')?.addEventListener('click', () => el('ocrBatchLoader')?.click());
el('ocrBatchLoader')?.addEventListener('change', handleOcrBatchSelect);
el('btnProcessOcrStack')?.addEventListener('click', processOcrStackBatches);
el('btnDownloadOcrZip')?.addEventListener('click', downloadOcrZip);
el('btnChooseGeminiZip')?.addEventListener('click', () => el('geminiZipLoader')?.click());
el('geminiZipLoader')?.addEventListener('change', handleGeminiZipSelect);
el('btnSendGemini')?.addEventListener('click', sendZipToGemini);
el('btnDownloadGeminiResult')?.addEventListener('click', downloadGeminiResult);
el('btnFetchGeminiModels')?.addEventListener('click', fetchGeminiModels);
el('geminiApiKey')?.addEventListener('input', persistGeminiSettings);
el('geminiModel')?.addEventListener('input', () => {
persistGeminiSettings();
updateSelectedGeminiModelInfo();
});
el('geminiAutoApplyCollage')?.addEventListener('change', persistGeminiSettings);
el('themeSelect')?.addEventListener('change', (e) => applyTheme(e.target.value));
el('groupFilter')?.addEventListener('change', () => {
state.selected.clear();
state.pendingPlacement = [];
render();
});
el('multiOrder')?.addEventListener('change', (e) => {
state.multiPlacementOrder = e.target.value === 'desc' ? 'desc' : 'asc';
updateSelectionUi();
});
el('btnApplyAutoOrder')?.addEventListener('click', applyAutoCollageOrder);
el('btnInsertNameAtPos')?.addEventListener('click', insertNameAtPosition);
['insertNameInput', 'insertPositionInput', 'insertGroupInput'].forEach((id) => {
el(id)?.addEventListener('keydown', (e) => {
if (e.key !== 'Enter') return;
e.preventDefault();
insertNameAtPosition();
});
});
el('btnImportOcr')?.addEventListener('click', () => el('ocrLoader')?.click());
el('ocrLoader')?.addEventListener('change', handleOcrImport);
el('btnClearAutoOrder')?.addEventListener('click', () => {
if (el('autoOrderInput')) el('autoOrderInput').value = '';
if (el('autoOrderMissing')) el('autoOrderMissing').value = '';
state.autoSuggestions = [];
renderAutoSuggestions();
});
el('drawerSearch')?.addEventListener('input', (e) => setSearchQuery(e.target.value));
el('btnClearSearch')?.addEventListener('click', () => {
if (el('drawerSearch')) el('drawerSearch').value = '';
setSearchQuery('');
});
el('btnRestoreBinAll')?.addEventListener('click', restoreAllFromBin);
el('btnPlaceBinSelected')?.addEventListener('click', placeSelectedBinItemsToGrid);
el('btnEmptyBin')?.addEventListener('click', emptyBin);
el('binList')?.addEventListener('click', (e) => {
const btn = e.target.closest('[data-bin-restore]');
if (btn) {
const idx = parseInt(btn.dataset.binRestore, 10);
if (!Number.isFinite(idx)) return;
restoreBinItem(idx);
return;
}
const row = e.target.closest('[data-bin-index]');
if (!row) return;
const idx = parseInt(row.dataset.binIndex, 10);
if (!Number.isFinite(idx)) return;
toggleBinSelection(idx);
});
el('groupOrderList')?.addEventListener('click', (e) => {
const item = e.target.closest('.group-order-item');
if (!item) return;
selectGroupForOrder(item.dataset.group || '');
});
el('autoSuggestionList')?.addEventListener('click', (e) => {
const btn = e.target.closest('.suggest-chip');
if (!btn) return;
const req = btn.dataset.req || '';
const suggestion = btn.dataset.suggestion || '';
applySuggestedReplacement(req, suggestion);
});
el('groupOrderList')?.addEventListener('pointerdown', startGroupDrag);
document.addEventListener('pointermove', onGroupDragMove);
document.addEventListener('pointerup', endGroupDrag);
el('groupPosSlider')?.addEventListener('input', (e) => {
const next = clampNum(parseInt(e.target.value, 10) - 1, 0, Math.max(0, state.groupOrder.length - 1), 0);
moveSelectedGroupTo(next);
});
el('btnGroupUp')?.addEventListener('click', () => {
const idx = state.groupOrder.indexOf(state.selectedGroup);
if (idx < 0) return;
moveSelectedGroupTo(idx - 1);
});
el('btnGroupDown')?.addEventListener('click', () => {
const idx = state.groupOrder.indexOf(state.selectedGroup);
if (idx < 0) return;
moveSelectedGroupTo(idx + 1);
});
el('imgLoader')?.addEventListener('change', handleFiles);
el('zipLoader')?.addEventListener('change', handleFiles);
el('insertImageLoader')?.addEventListener('change', handleInsertImageFile);
el('projectImageLoader')?.addEventListener('change', handleProjectImageLoad);
el('templateLoader')?.addEventListener('change', loadTemplate);
el('startupLoader')?.addEventListener('change', setStartupTemplate);
el('insertCropGroupSelect')?.addEventListener('change', onInsertCropGroupChange);
el('btnApplyCrop')?.addEventListener('click', applyCustomCropSize);
el('btnCancelCrop')?.addEventListener('click', closeCropModal);
el('btnCloseCrop')?.addEventListener('click', closeCropModal);
el('btnConfirmCrop')?.addEventListener('click', cropAndMapImages);
el('image-processor-modal')?.addEventListener('click', (e) => {
if (e.target === e.currentTarget) closeCropModal();
});
['gridCols', 'gridRows', 'skinW', 'skinH', 'zoomLevel', 'gapSize', 'bgColor'].forEach((id) => {
el(id)?.addEventListener('input', debounce(() => {
syncStateFromInputs();
saveState();
render();
}, 90));
});
const viewport = el('viewport');
viewport?.addEventListener('pointerdown', onViewportPointerDown);
viewport?.addEventListener('pointermove', onViewportPointerMove);
viewport?.addEventListener('pointerup', onViewportPointerUp);
viewport?.addEventListener('pointercancel', onViewportPointerUp);
viewport?.addEventListener('wheel', onWheelZoom, { passive: false });
document.addEventListener('keydown', handleKeydown);
window.addEventListener('resize', debounce(() => {
if (window.matchMedia('(max-width: 980px)').matches) fitCollageToViewport();
}, 140));
}
function loadEmbeddedTemplate() {
const raw = document.getElementById('embedded-collage-data')?.textContent;
if (!raw) return;
try {
const parsed = JSON.parse(raw);
const normalized = normalizeTemplateData(parsed);
applyNormalizedTemplate(normalized);
} catch (err) {
console.error('Embedded template parse failed:', err);
}
}
function syncInputsFromState() {
if (el('gridCols')) el('gridCols').value = state.appData.cols;
if (el('gridRows')) el('gridRows').value = state.appData.rows;
if (el('skinW')) el('skinW').value = state.appData.skinWidth;
if (el('skinH')) el('skinH').value = state.appData.skinHeight;
if (el('gapSize')) el('gapSize').value = state.appData.gap;
if (el('bgColor')) el('bgColor').value = state.appData.bgColor;
if (el('zoomLevel')) el('zoomLevel').value = state.scale;
if (el('themeSelect')) el('themeSelect').value = state.theme;
if (el('multiOrder')) el('multiOrder').value = state.multiPlacementOrder;
updateZoomText();
updateGapText();
updateInsertPositionBounds();
}
function syncStateFromInputs() {
state.appData.cols = clampNum(parseInt(el('gridCols')?.value, 10), 1, 200, state.appData.cols || 5);
state.appData.rows = clampNum(parseInt(el('gridRows')?.value, 10), 1, 5000, state.appData.rows || 1);
state.appData.skinWidth = clampNum(parseInt(el('skinW')?.value, 10), 20, 3000, 335);
state.appData.skinHeight = clampNum(parseInt(el('skinH')?.value, 10), 20, 3000, 300);
state.appData.gap = clampNum(parseInt(el('gapSize')?.value, 10), 0, 100, state.appData.gap || 0);
state.appData.bgColor = normalizeHex(el('bgColor')?.value || '#ffffff');
state.scale = clampNum(parseFloat(el('zoomLevel')?.value), 0.1, 2, 0.5);
updateZoomText();
updateGapText();
}
function updateInsertPositionBounds() {
const posInput = el('insertPositionInput');
const maxPos = Math.max(1, state.uploadedImages.length + 1);
if (posInput) {
const currentRaw = parseInt(posInput.value, 10);
posInput.min = '1';
posInput.max = String(maxPos);
posInput.value = String(clampNum(currentRaw, 1, maxPos, maxPos));
}
const cropPos = el('insertCropPosition');
if (cropPos) {
const currentRaw = parseInt(cropPos.value, 10);
cropPos.min = '1';
cropPos.max = String(maxPos);
cropPos.value = String(clampNum(currentRaw, 1, maxPos, maxPos));
}
}
function updateZoomText() {
const text = `${Math.round(state.scale * 100)}%`;
if (el('zoomValue')) el('zoomValue').textContent = text;
}
function updateGapText() {
if (el('gapValue')) el('gapValue').textContent = `${state.appData.gap}px`;
}
function getVisibleCount() {
return Math.max(1, state.appData.cols) * Math.max(1, state.appData.rows);
}
function getFilteredIndices() {
const group = el('groupFilter')?.value || 'all';
const all = [];
state.uploadedImages.forEach((item, i) => {
if (group === 'all' || (item.group || 'Uncategorized') === group) all.push(i);
});
return all;
}
function autoArrangeGrid(totalItems = state.uploadedImages.length) {
const total = clampNum(parseInt(totalItems, 10), 0, 999999, 0);
if (total <= 0) {
state.appData.cols = 1;
state.appData.rows = 1;
syncInputsFromState();
return;
}
const suggestedCols = Math.ceil(Math.sqrt(total));
state.appData.cols = clampNum(suggestedCols, 1, 200, 5);
state.appData.rows = Math.ceil(total / state.appData.cols);
syncInputsFromState();
}
function autoFitGridToAllItems() {
autoArrangeGrid(state.uploadedImages.length);
}
function ensureTemplateSlotsMatchUploaded() {
if (!Array.isArray(state.templateSlots)) state.templateSlots = [];
for (let i = state.templateSlots.length; i < state.uploadedImages.length; i += 1) {
const source = state.uploadedImages[i] || {};
state.templateSlots.push({
name: source.name || `Slot ${i + 1}`,
group: source.group || 'Uncategorized'
});
}
for (let i = state.uploadedImages.length; i < state.templateSlots.length; i += 1) {
state.uploadedImages.push(makePlaceholderAtIndex(i, state.templateSlots[i]));
}
}
function insertItemAtPosition(payload = {}) {
const name = String(payload.name || '').trim();
if (!name) throw new Error('Missing name');
ensureTemplateSlotsMatchUploaded();
const maxPos = Math.max(1, state.uploadedImages.length + 1);
const requested = parseInt(payload.position, 10);
const position = clampNum(requested, 1, maxPos, maxPos);
const index = position - 1;
let group = String(payload.group || '').trim();
if (!group) {
group = state.templateSlots[index]?.group
|| state.uploadedImages[index]?.group
|| state.selectedGroup
|| 'Uncategorized';
}
const url = payload.url || null;
const file = payload.file || null;
const slot = { name, group };
const item = { name, group, url, file };
state.templateSlots.splice(index, 0, slot);
state.uploadedImages.splice(index, 0, item);
const minRows = Math.ceil(state.uploadedImages.length / Math.max(1, state.appData.cols));
state.appData.rows = Math.max(state.appData.rows || 1, minRows);
state.selected.clear();
state.pendingPlacement = [];
state.pendingBinPlacement = [];
state.groupDrag = null;
ensureGroupOrder();
refreshGroupFilter();
syncInputsFromState();
saveState();
render();
return { position, index, group };
}
function insertNameAtPosition() {
const name = String(el('insertNameInput')?.value || '').trim();
if (!name) {
alert('Enter the new image name first.');
return;
}
const rawPos = parseInt(el('insertPositionInput')?.value, 10);
const group = String(el('insertGroupInput')?.value || '').trim();
const inserted = insertItemAtPosition({ name, position: rawPos, group });
if (el('insertNameInput')) el('insertNameInput').value = '';
if (el('insertPositionInput')) {
const nextPos = Math.min(inserted.position + 1, state.uploadedImages.length + 1);
el('insertPositionInput').value = String(nextPos);
}
notify(`Inserted "${name}" at position ${inserted.position}.`);
}
function ensureGroupOrder() {
const groups = Array.from(new Set(state.uploadedImages.map((x) => x.group || 'Uncategorized')));
state.groupOrder = state.groupOrder.filter((g) => groups.includes(g));
groups.forEach((g) => {
if (!state.groupOrder.includes(g)) state.groupOrder.push(g);
});
return state.groupOrder.slice();
}
function selectGroupForOrder(group) {
if (!group) return;
state.selectedGroup = group;
refreshGroupOrderControls();
}
function refreshGroupOrderControls() {
const list = el('groupOrderList');
const slider = el('groupPosSlider');
const label = el('groupPosLabel');
if (!list || !slider || !label) return;
const groups = ensureGroupOrder();
if (!groups.includes(state.selectedGroup)) state.selectedGroup = groups[0] || '';
list.innerHTML = '';
groups.forEach((g, i) => {
const item = document.createElement('div');
item.className = 'group-order-item';
if (g === state.selectedGroup) item.classList.add('selected');
if (state.groupDrag?.group === g) item.classList.add('dragging');
item.dataset.group = g;
item.dataset.index = String(i);
item.innerHTML = `::${i + 1}${g}`;
list.appendChild(item);
});
const selectedIndex = groups.indexOf(state.selectedGroup);
const hasSelection = selectedIndex >= 0;
slider.disabled = !hasSelection;
slider.min = '1';
slider.max = String(Math.max(1, groups.length));
slider.value = hasSelection ? String(selectedIndex + 1) : '1';
if (!hasSelection) {
label.textContent = 'Position: -';
} else {
label.textContent = `Position: ${selectedIndex + 1}/${groups.length}`;
}
}
function reorderImagesByGroupOrder() {
const order = ensureGroupOrder();
const rank = new Map(order.map((g, i) => [g, i]));
state.uploadedImages = state.uploadedImages
.map((item, idx) => ({ item, idx }))
.sort((a, b) => {
const ga = a.item.group || 'Uncategorized';
const gb = b.item.group || 'Uncategorized';
const ra = rank.has(ga) ? rank.get(ga) : Number.MAX_SAFE_INTEGER;
const rb = rank.has(gb) ? rank.get(gb) : Number.MAX_SAFE_INTEGER;
if (ra !== rb) return ra - rb;
return a.idx - b.idx;
})
.map((x) => x.item);
}
function moveGroupTo(group, positionIndex) {
if (!group) return false;
const currentIndex = state.groupOrder.indexOf(group);
if (currentIndex < 0) return false;
const maxIndex = state.groupOrder.length - 1;
const nextIndex = clampNum(positionIndex, 0, Math.max(0, maxIndex), currentIndex);
if (nextIndex === currentIndex) return false;
state.groupOrder.splice(currentIndex, 1);
state.groupOrder.splice(nextIndex, 0, group);
state.selectedGroup = group;
return true;
}
function moveSelectedGroupTo(positionIndex) {
const group = state.selectedGroup;
if (!group) return;
if (!moveGroupTo(group, positionIndex)) {
refreshGroupOrderControls();
return;
}
reorderImagesByGroupOrder();
state.selected.clear();
state.pendingPlacement = [];
saveState();
render();
}
function startGroupDrag(e) {
const list = el('groupOrderList');
const item = e.target.closest('.group-order-item');
if (!list || !item || !list.contains(item)) return;
if (!e.target.closest('.group-order-handle')) return;
if (e.pointerType === 'mouse' && e.button !== 0) return;
const group = item.dataset.group || '';
const index = parseInt(item.dataset.index, 10);
if (!group || !Number.isFinite(index)) return;
list.setPointerCapture?.(e.pointerId);
state.selectedGroup = group;
state.groupDrag = {
pointerId: e.pointerId,
group,
lastIndex: index
};
item.classList.add('dragging');
refreshGroupOrderControls();
e.preventDefault();
}
function onGroupDragMove(e) {
const drag = state.groupDrag;
if (!drag || e.pointerId !== drag.pointerId) return;
const list = el('groupOrderList');
if (!list) return;
const items = Array.from(list.querySelectorAll('.group-order-item'));
if (!items.length) return;
let next = drag.lastIndex;
for (let i = 0; i < items.length; i += 1) {
const rect = items[i].getBoundingClientRect();
if (e.clientY < rect.top + (rect.height / 2)) {
next = i;
break;
}
next = i;
}
if (next !== drag.lastIndex && moveGroupTo(drag.group, next)) {
drag.lastIndex = next;
reorderImagesByGroupOrder();
state.selected.clear();
state.pendingPlacement = [];
render();
}
}
function endGroupDrag(e) {
const drag = state.groupDrag;
if (!drag || e.pointerId !== drag.pointerId) return;
el('groupOrderList')?.releasePointerCapture?.(e.pointerId);
state.groupDrag = null;
saveState();
render();
}
function normalizeNameKey(name) {
return String(name || '')
.trim()
.replace(/^\-\s*/, '')
.replace(/\s+/g, ' ')
.toLowerCase();
}
function normalizeGroupKey(group) {
return String(group || '').trim().toLowerCase();
}
function getNameTokens(name) {
const key = normalizeNameKey(name)
.replace(/[^a-z0-9\s]+/g, ' ');
return key.split(' ').map((t) => t.trim()).filter(Boolean);
}
function getNameVariants(name) {
const raw = String(name || '').trim();
if (!raw) return [];
const set = new Set();
const add = (v) => {
const k = normalizeNameKey(v);
if (k) set.add(k);
};
add(raw);
const noDash = raw.replace(/^\-\s*/, '');
add(noDash);
const noExt = noDash.replace(/\.[^.]+$/, '');
add(noExt);
return [...set];
}
function parseAutoOrderInput(text) {
const rawLines = String(text || '').split(/\r?\n/);
const entries = [];
let currentGroup = '';
const parseRankedName = (value) => {
const textValue = String(value || '').trim();
if (!textValue) return null;
const match = textValue.match(/^#?\s*(\d{1,6})\s*[\])}.:_\-]+\s*(.+)$/) || textValue.match(/^#?\s*(\d{1,6})\s+(.+)$/);
if (!match) return null;
const rank = parseInt(match[1], 10);
const cleanName = String(match[2] || '').trim();
if (!Number.isFinite(rank) || !cleanName) return null;
return { rank, cleanName };
};
rawLines.forEach((raw) => {
const line = String(raw || '').trim();
if (!line) return;
const bracketHeader = line.match(/^\[(.+?)\]$/);
if (bracketHeader) {
currentGroup = bracketHeader[1].trim();
return;
}
const groupHeader = line.match(/^group\s*[:\-]\s*(.+)$/i);
if (groupHeader) {
currentGroup = groupHeader[1].trim();
return;
}
if (/^[^|]{2,40}:$/.test(line)) {
currentGroup = line.slice(0, -1).trim();
return;
}
let name = line;
let explicitGroup = '';
let rank = null;
const pipeSplit = line.split('|');
if (pipeSplit.length >= 2) {
const left = pipeSplit[0].trim();
const right = pipeSplit.slice(1).join('|').trim();
if (/^\d{1,6}$/.test(left)) {
rank = parseInt(left, 10);
name = right;
} else {
explicitGroup = left;
name = right;
}
}
if (!rank) {
const ranked = parseRankedName(name);
if (ranked) {
rank = ranked.rank;
name = ranked.cleanName;
}
}
name = String(name || '').trim();
if (!name) return;
entries.push({
raw: line,
name,
rank: Number.isFinite(rank) ? rank : null,
group: explicitGroup || currentGroup || '',
groupKey: normalizeGroupKey(explicitGroup || currentGroup || '')
});
});
return entries;
}
function normalizeCompactName(name) {
return String(name || '').toLowerCase().replace(/[^a-z0-9]/g, '');
}
function levenshtein(a, b) {
const matrix = [];
for (let i = 0; i <= b.length; i += 1) matrix[i] = [i];
for (let j = 0; j <= a.length; j += 1) matrix[0][j] = j;
for (let i = 1; i <= b.length; i += 1) {
for (let j = 1; j <= a.length; j += 1) {
if (b.charAt(i - 1) === a.charAt(j - 1)) matrix[i][j] = matrix[i - 1][j - 1];
else matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, Math.min(matrix[i][j - 1] + 1, matrix[i - 1][j] + 1));
}
}
return matrix[b.length][a.length];
}
function buildCandidateMap(pool, req) {
const map = new Map();
pool.forEach((entry) => {
if (entry.used) return;
if (req.groupKey && req.groupKey !== entry.groupKey) return;
const key = normalizeCompactName(entry.item.name);
if (!key) return;
if (!map.has(key)) map.set(key, entry);
});
return map;
}
function findBestFuzzyMatch(pool, req) {
const cleanTarget = normalizeCompactName(req.name);
if (!cleanTarget) return null;
const candidateMap = buildCandidateMap(pool, req);
if (candidateMap.has(cleanTarget)) return candidateMap.get(cleanTarget);
for (const [key, entry] of candidateMap.entries()) {
if ((key.includes(cleanTarget) || cleanTarget.includes(key)) && Math.min(key.length, cleanTarget.length) > 3) {
return entry;
}
}
let bestEntry = null;
let bestDist = Infinity;
for (const [key, entry] of candidateMap.entries()) {
const dist = levenshtein(cleanTarget, key);
if (dist < bestDist && dist <= 5) {
bestDist = dist;
bestEntry = entry;
}
}
return bestEntry;
}
function getTopSuggestions(pool, req, limit = 3) {
const cleanTarget = normalizeCompactName(req.name);
if (!cleanTarget) return [];
const candidateMap = buildCandidateMap(pool, req);
const results = [];
if (candidateMap.has(cleanTarget)) {
results.push(candidateMap.get(cleanTarget).item.name);
}
for (const [key, entry] of candidateMap.entries()) {
if (results.includes(entry.item.name)) continue;
if ((key.includes(cleanTarget) || cleanTarget.includes(key)) && Math.min(key.length, cleanTarget.length) > 3) {
results.push(entry.item.name);
if (results.length >= limit) return results.slice(0, limit);
}
}
const byDist = [];
for (const [key, entry] of candidateMap.entries()) {
if (results.includes(entry.item.name)) continue;
const dist = levenshtein(cleanTarget, key);
if (dist <= 5) byDist.push({ name: entry.item.name, dist });
}
byDist.sort((a, b) => a.dist - b.dist);
byDist.forEach((x) => {
if (!results.includes(x.name)) results.push(x.name);
});
return results.slice(0, limit);
}
function escapeHtml(value) {
return String(value || '')
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
function renderAutoSuggestions() {
const host = el('autoSuggestionList');
if (!host) return;
host.innerHTML = '';
const rows = Array.isArray(state.autoSuggestions) ? state.autoSuggestions : [];
if (!rows.length) return;
rows.forEach((row) => {
const wrap = document.createElement('div');
wrap.className = 'suggest-row';
const title = document.createElement('div');
title.className = 'suggest-title';
title.textContent = row.req;
wrap.appendChild(title);
const chips = document.createElement('div');
chips.className = 'suggest-chips';
if (row.suggestions && row.suggestions.length) {
row.suggestions.slice(0, 3).forEach((s) => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'suggest-chip';
btn.dataset.req = row.req;
btn.dataset.suggestion = s;
btn.textContent = s;
chips.appendChild(btn);
});
} else {
const none = document.createElement('span');
none.className = 'suggest-title';
none.textContent = 'No close suggestion';
chips.appendChild(none);
}
wrap.appendChild(chips);
host.appendChild(wrap);
});
}
function applySuggestedReplacement(req, suggestion) {
const input = el('autoOrderInput');
if (!input || !req || !suggestion) return;
const lines = String(input.value || '').split(/\r?\n/);
const idx = lines.findIndex((line) => String(line || '').trim() === req.trim());
if (idx >= 0) lines[idx] = suggestion;
else lines.push(suggestion);
input.value = lines.join('\n');
applyAutoCollageOrder();
}
function findBestSlotIndex(templateSlots, usedSlots, item, req) {
if (req && Number.isFinite(req.rank)) {
const rankedIndex = req.rank - 1;
if (rankedIndex >= 0 && rankedIndex < templateSlots.length && !usedSlots.has(rankedIndex)) {
return rankedIndex;
}
}
const reqGroupKey = req ? normalizeGroupKey(req.group || '') : '';
const itemGroupKey = normalizeGroupKey(item?.group || '');
const preferredGroups = [reqGroupKey, itemGroupKey].filter(Boolean);
const itemVariants = new Set(getNameVariants(item?.name || ''));
const reqVariants = new Set(getNameVariants(req?.name || ''));
const itemCompact = normalizeCompactName(item?.name || '');
const reqCompact = normalizeCompactName(req?.name || '');
const findVariantMatch = (variants, enforceGroup) => {
if (!variants || variants.size === 0) return -1;
for (let i = 0; i < templateSlots.length; i += 1) {
if (usedSlots.has(i)) continue;
const slot = templateSlots[i];
if (enforceGroup && preferredGroups.length > 0) {
const slotGroupKey = normalizeGroupKey(slot.group || '');
if (!preferredGroups.includes(slotGroupKey)) continue;
}
const slotVariants = getNameVariants(slot.name);
if (slotVariants.some((v) => variants.has(v))) return i;
}
return -1;
};
const findCompactMatch = (compactValue, enforceGroup) => {
if (!compactValue) return -1;
for (let i = 0; i < templateSlots.length; i += 1) {
if (usedSlots.has(i)) continue;
const slot = templateSlots[i];
if (enforceGroup && preferredGroups.length > 0) {
const slotGroupKey = normalizeGroupKey(slot.group || '');
if (!preferredGroups.includes(slotGroupKey)) continue;
}
const slotCompact = normalizeCompactName(slot.name);
if ((slotCompact.includes(compactValue) || compactValue.includes(slotCompact)) && Math.min(slotCompact.length, compactValue.length) > 3) {
return i;
}
}
return -1;
};
let idx = findVariantMatch(itemVariants, true);
if (idx >= 0) return idx;
idx = findVariantMatch(reqVariants, true);
if (idx >= 0) return idx;
idx = findVariantMatch(itemVariants, false);
if (idx >= 0) return idx;
idx = findVariantMatch(reqVariants, false);
if (idx >= 0) return idx;
idx = findCompactMatch(itemCompact, true);
if (idx >= 0) return idx;
idx = findCompactMatch(reqCompact, true);
if (idx >= 0) return idx;
idx = findCompactMatch(itemCompact, false);
if (idx >= 0) return idx;
idx = findCompactMatch(reqCompact, false);
if (idx >= 0) return idx;
return -1;
}
function applyAutoCollageOrder() {
const input = el('autoOrderInput');
const missingOut = el('autoOrderMissing');
if (!input) return;
if (missingOut) missingOut.value = '';
state.autoSuggestions = [];
renderAutoSuggestions();
const requests = parseAutoOrderInput(input.value);
if (!requests.length) {
alert('Paste at least one image name (one per line).');
return;
}
const sourceItems = state.uploadedImages.filter((item) => item && (item.url || item.file));
if (!sourceItems.length) {
alert('No mapped images found. Load/map images first.');
return;
}
const pool = sourceItems.map((item, idx) => ({
idx,
item,
used: false,
groupKey: normalizeGroupKey(item.group || ''),
variants: new Set(getNameVariants(item.name)),
compact: normalizeCompactName(item.name)
}));
const templateSlots = Array.isArray(state.templateSlots) && state.templateSlots.length
? state.templateSlots.map((s) => ({ name: s.name, group: s.group || 'Uncategorized' }))
: sourceItems.map((s) => ({ name: s.name, group: s.group || 'Uncategorized' }));
const missingDetails = [];
const matched = [];
let fuzzyPlaced = 0;
requests.forEach((req) => {
const wanted = getNameVariants(req.name);
let found = null;
for (const entry of pool) {
if (entry.used) continue;
if (req.groupKey && req.groupKey !== entry.groupKey) continue;
if (wanted.some((w) => entry.variants.has(w))) {
found = entry;
break;
}
}
if (!found) {
found = findBestFuzzyMatch(pool, req);
if (found) fuzzyPlaced += 1;
}
if (!found) {
missingDetails.push({ req: req.raw, suggestions: getTopSuggestions(pool, req, 3) });
return;
}
found.used = true;
matched.push({
item: found.item,
req,
targetGroupKey: req.groupKey || found.groupKey || normalizeGroupKey(found.item.group || '')
});
});
if (!matched.length) {
if (missingOut) {
missingOut.value = missingDetails
.map((m) => m.suggestions.length ? `${m.req} -> ${m.suggestions.join(' | ')}` : `${m.req} -> (no close match)`)
.join('\n');
}
state.autoSuggestions = missingDetails;
renderAutoSuggestions();
alert('No matching image names found in loaded images.');
return;
}
const usedSlots = new Set();
const orderedMatches = matched
.map((m, inputIndex) => {
const slotIndex = findBestSlotIndex(templateSlots, usedSlots, m.item, m.req);
if (slotIndex >= 0) usedSlots.add(slotIndex);
return { ...m, slotIndex, inputIndex };
})
.sort((a, b) => {
const ar = a.slotIndex >= 0 ? a.slotIndex : Number.MAX_SAFE_INTEGER;
const br = b.slotIndex >= 0 ? b.slotIndex : Number.MAX_SAFE_INTEGER;
if (ar !== br) return ar - br;
return a.inputIndex - b.inputIndex;
});
const finalImages = orderedMatches.map((m) => {
if (m.slotIndex >= 0) {
const slot = templateSlots[m.slotIndex];
return {
...m.item,
group: slot.group || m.item.group || 'Uncategorized'
};
}
return {
...m.item,
group: m.item.group || 'Uncategorized'
};
});
const removed = pool.filter((x) => !x.used).map((x) => x.item);
if (removed.length) pushItemsToBin(removed, 'auto-collage-unmatched', true);
state.uploadedImages = finalImages;
const duplicateRemoved = removeDuplicateMappedImages('duplicate-auto-order');
state.groupDrag = null;
state.selected.clear();
state.pendingPlacement = [];
autoArrangeGrid(state.uploadedImages.length);
saveState();
render();
state.autoSuggestions = missingDetails;
renderAutoSuggestions();
if (missingOut) {
missingOut.value = missingDetails
.map((m) => m.suggestions.length ? `${m.req} -> ${m.suggestions.join(' | ')}` : `${m.req} -> (no close match)`)
.join('\n');
}
alert(`Auto collage aligned by template order (slot auto-detected from template JSON). Placed: ${finalImages.length}, Fuzzy: ${fuzzyPlaced}, Removed: ${removed.length}, Duplicates: ${duplicateRemoved}, Missing: ${missingDetails.length}.`);
}
function refreshGroupFilter() {
const select = el('groupFilter');
if (!select) return;
const current = select.value || 'all';
const groups = ensureGroupOrder();
select.innerHTML = '';
const allOpt = document.createElement('option');
allOpt.value = 'all';
allOpt.textContent = 'All Groups';
select.appendChild(allOpt);
groups.forEach((g) => {
const opt = document.createElement('option');
opt.value = g;
opt.textContent = g;
select.appendChild(opt);
});
if ([...select.options].some((o) => o.value === current)) select.value = current;
else select.value = 'all';
refreshGroupOrderControls();
}
function render() {
const area = el('collage-area');
if (!area) return;
syncStateFromInputs();
updateInsertPositionBounds();
area.innerHTML = '';
area.style.gridTemplateColumns = `repeat(${state.appData.cols}, ${state.appData.skinWidth}px)`;
area.style.gridAutoRows = `${state.appData.skinHeight}px`;
const isTight = state.appData.gap === 0;
area.style.gap = `${state.appData.gap}px`;
area.style.background = isTight ? 'transparent' : state.appData.bgColor;
area.style.padding = isTight ? '0px' : `${state.appData.gap}px`;
area.classList.toggle('tight', isTight);
applyCollageTransform();
if (state.uploadedImages.length === 0) el('empty-state')?.classList.remove('hidden');
else el('empty-state')?.classList.add('hidden');
refreshGroupFilter();
const filtered = getFilteredIndices();
const visible = filtered.slice(0, getVisibleCount());
state.viewIndices = visible;
state.selected.forEach((idx) => {
if (!visible.includes(idx)) state.selected.delete(idx);
});
const searchKey = normalizeCompactName(state.searchQuery || '');
let matchCount = 0;
visible.forEach((sourceIndex, visiblePos) => {
const img = state.uploadedImages[sourceIndex];
const card = document.createElement('div');
card.className = 'skin-item';
if (state.selected.has(sourceIndex)) card.classList.add('selected');
const isHit = searchKey && normalizeCompactName(img?.name || '').includes(searchKey);
if (isHit) {
card.classList.add('search-hit');
matchCount += 1;
const badge = document.createElement('span');
badge.className = 'search-badge';
badge.textContent = 'MATCH';
card.appendChild(badge);
}
if (img?.url) {
card.style.backgroundImage = `url("${img.url}")`;
} else {
card.classList.add('placeholder');
card.textContent = String(sourceIndex + 1);
}
card.dataset.gridPos = String(visiblePos + 1);
card.title = `Pos ${visiblePos + 1} - ${img?.name || 'Empty Slot'}${img?.group ? ` (${img.group})` : ''}`;
let hoverTimer = null;
const hidePosHint = () => {
card.classList.remove('show-pos-hint');
};
card.addEventListener('pointerenter', () => {
if (hoverTimer) clearTimeout(hoverTimer);
hoverTimer = setTimeout(() => {
card.classList.add('show-pos-hint');
}, 2000);
});
card.addEventListener('pointerleave', () => {
if (hoverTimer) clearTimeout(hoverTimer);
hoverTimer = null;
hidePosHint();
});
card.addEventListener('pointerdown', () => {
if (hoverTimer) clearTimeout(hoverTimer);
hoverTimer = null;
hidePosHint();
});
card.addEventListener('click', (e) => onSkinClick(e, sourceIndex));
area.appendChild(card);
});
updateSearchStatus(matchCount, searchKey);
renderBinList();
updateSelectionUi();
updateButtonStates();
updateActiveSkinsBadge();
}
function swapItems(a, b) {
if (a === b) return;
if (a < 0 || b < 0) return;
if (a >= state.uploadedImages.length || b >= state.uploadedImages.length) return;
[state.uploadedImages[a], state.uploadedImages[b]] = [state.uploadedImages[b], state.uploadedImages[a]];
}
function buildPlacementTargetIndices(targetSourceIndex, count) {
const visible = state.viewIndices && state.viewIndices.length
? state.viewIndices
: getFilteredIndices().slice(0, getVisibleCount());
if (!visible.length || count <= 0) return [];
const maxCount = Math.min(count, visible.length);
let startPos = visible.indexOf(targetSourceIndex);
if (startPos < 0) startPos = 0;
const maxStart = Math.max(0, visible.length - maxCount);
startPos = Math.min(startPos, maxStart);
return visible.slice(startPos, startPos + maxCount);
}
function applyPendingPlacement(targetSourceIndex) {
const visible = state.viewIndices && state.viewIndices.length
? state.viewIndices
: getFilteredIndices().slice(0, getVisibleCount());
if (!visible.length) return false;
const sourceSet = new Set(state.pendingPlacement);
const sourceIndices = visible.filter((idx) => sourceSet.has(idx));
if (state.multiPlacementOrder === 'desc') sourceIndices.reverse();
if (!sourceIndices.length) return false;
const targetIndices = buildPlacementTargetIndices(targetSourceIndex, sourceIndices.length);
if (!targetIndices.length || targetIndices.length !== sourceIndices.length) return false;
const overlap = targetIndices.some((idx) => sourceSet.has(idx));
if (overlap) return false;
const old = state.uploadedImages.slice();
const next = old.slice();
const count = sourceIndices.length;
for (let i = 0; i < count; i += 1) {
const s = sourceIndices[i];
const t = targetIndices[i];
next[t] = old[s];
}
for (let i = 0; i < count; i += 1) {
const s = sourceIndices[i];
const t = targetIndices[i];
next[s] = old[t];
}
state.uploadedImages = next;
state.pendingPlacement = [];
state.selected.clear();
return true;
}
function onSkinClick(event, sourceIndex) {
event.stopPropagation();
if (Date.now() < (state.suppressSkinClickUntil || 0)) return;
if (state.pendingBinPlacement.length > 0) {
if (applyPendingBinPlacementToSlot(sourceIndex)) {
saveState();
render();
}
return;
}
if (!state.multiMode && state.pendingPlacement.length > 0) {
if (applyPendingPlacement(sourceIndex)) {
saveState();
render();
return;
}
}
if (state.multiMode) {
if (state.selected.has(sourceIndex)) state.selected.delete(sourceIndex);
else state.selected.add(sourceIndex);
render();
return;
}
if (state.selected.size === 0) {
state.selected.add(sourceIndex);
render();
return;
}
if (state.selected.has(sourceIndex)) {
state.selected.clear();
state.pendingPlacement = [];
render();
return;
}
const first = Array.from(state.selected)[0];
swapItems(first, sourceIndex);
state.selected.clear();
state.pendingPlacement = [];
saveState();
render();
}
function swapSelected() {
const count = state.selected.size;
if (count <= 0) return;
if (count === 2) {
const [a, b] = Array.from(state.selected);
swapItems(a, b);
state.selected.clear();
state.pendingPlacement = [];
saveState();
render();
return;
}
const visible = state.viewIndices && state.viewIndices.length
? state.viewIndices
: getFilteredIndices().slice(0, getVisibleCount());
state.pendingPlacement = visible.filter((idx) => state.selected.has(idx));
state.multiMode = false;
render();
}
function updateSelectionUi() {
const count = state.selected.size;
const panel = el('floating-panel');
if (!panel) return;
if (state.pendingBinPlacement.length > 0) {
panel.classList.add('visible');
el('selection-status').textContent = `${state.pendingBinPlacement.length} bin item(s) queued, click target slot(s)`;
return;
}
if (!state.multiMode && state.pendingPlacement.length > 0) {
panel.classList.add('visible');
const mode = state.multiPlacementOrder === 'desc' ? 'DESC' : 'ASC';
el('selection-status').textContent = `${state.pendingPlacement.length} queued (${mode}), click target slot`;
return;
}
if (count > 0) {
panel.classList.add('visible');
const visible = state.viewIndices && state.viewIndices.length
? state.viewIndices
: getFilteredIndices().slice(0, getVisibleCount());
const positions = Array.from(state.selected)
.map((idx) => visible.indexOf(idx))
.filter((idx) => idx >= 0)
.map((idx) => idx + 1)
.sort((a, b) => a - b);
const posText = positions.length ? ` (Pos ${positions.join(', ')})` : '';
el('selection-status').textContent = `${count} selected${posText}`;
} else {
panel.classList.remove('visible');
el('selection-status').textContent = '';
}
}
function updateButtonStates() {
const hasSel = state.selected.size > 0;
const canSwap = state.selected.size > 0;
const hasEmpty = state.uploadedImages.some((x) => !hasImageData(x));
const hasSelectedMapped = Array.from(state.selected).some((idx) => hasImageData(state.uploadedImages[idx]));
if (el('btnDelete')) el('btnDelete').disabled = !hasSel;
if (el('btnFloatDelete')) el('btnFloatDelete').disabled = !hasSel;
if (el('btnSwap')) el('btnSwap').disabled = !canSwap;
if (el('btnFillEmpty')) el('btnFillEmpty').disabled = !(hasEmpty && hasSelectedMapped);
if (el('btnUndo')) el('btnUndo').disabled = state.historyIndex <= 0;
if (el('btnRedo')) el('btnRedo').disabled = state.historyIndex >= state.history.length - 1;
el('btnMulti')?.classList.toggle('active', state.multiMode);
}
function updateActiveSkinsBadge() {
const badge = el('activeSkinsBadge');
if (!badge) return;
if (state.activeTab !== 'collage') {
badge.classList.add('hidden');
return;
}
badge.classList.remove('hidden');
const visible = state.viewIndices && state.viewIndices.length
? state.viewIndices
: getFilteredIndices().slice(0, getVisibleCount());
const activeCount = visible.reduce((sum, idx) => sum + (hasImageData(state.uploadedImages[idx]) ? 1 : 0), 0);
badge.textContent = `Active Skins: ${activeCount}`;
}
function hasImageData(item) {
return Boolean(item && (item.url || item.file));
}
function getItemKey(item) {
if (!item) return '';
const base = String(item.name || '').replace(/^\-\s*/, '').replace(/\.[^.]+$/, '');
return normalizeCompactName(base);
}
function makePlaceholderAtIndex(index, fallbackItem) {
const slot = state.templateSlots[index] || {};
return {
name: slot.name || fallbackItem?.name || `Empty Slot ${index + 1}`,
group: slot.group || fallbackItem?.group || 'Uncategorized',
url: null,
file: null
};
}
function setSearchQuery(value) {
state.searchQuery = String(value || '').trim();
render();
}
function updateSearchStatus(matchCount, searchKey) {
const status = el('drawerSearchStatus');
if (!status) return;
const binMatches = getFilteredBinEntries(searchKey).length;
if (!searchKey) {
status.textContent = 'Search is hidden here. Matches are highlighted in blue.';
return;
}
status.textContent = `Grid matches: ${matchCount}. Bin matches: ${binMatches}.`;
}
function toggleUtilityDrawer(forceOpen) {
const drawer = el('utilityDrawer');
const scrim = el('utilityScrim');
if (!drawer || !scrim) return;
const shouldOpen = typeof forceOpen === 'boolean' ? forceOpen : !state.drawerOpen;
state.drawerOpen = shouldOpen;
drawer.classList.toggle('open', shouldOpen);
scrim.classList.toggle('open', shouldOpen);
if (shouldOpen) {
const input = el('drawerSearch');
if (input) {
input.value = state.searchQuery || '';
input.focus();
input.select();
}
}
}
function pushItemsToBin(items, reason = 'deleted', skipRender = false) {
const list = Array.isArray(items) ? items : [];
const stamped = [];
list.forEach((item) => {
if (!hasImageData(item)) return;
stamped.push({
...item,
deletedAt: Date.now(),
reason
});
});
if (!stamped.length) return;
state.binItems.unshift(...stamped);
state.binSelected.clear();
if (state.binItems.length > 800) {
const overflow = state.binItems.splice(800);
overflow.forEach((x) => {
if (x?.url && x.url.startsWith('blob:')) URL.revokeObjectURL(x.url);
});
}
if (!skipRender) renderBinList();
}
function toggleBinSelection(index) {
if (!Number.isFinite(index) || index < 0 || index >= state.binItems.length) return;
if (state.binSelected.has(index)) state.binSelected.delete(index);
else state.binSelected.add(index);
renderBinList();
}
function findTemplateSlotIndexForItem(item) {
if (!Array.isArray(state.templateSlots) || !state.templateSlots.length) return -1;
const target = normalizeCompactName(item?.name || '');
if (!target) return -1;
let idx = state.templateSlots.findIndex((slot) => normalizeCompactName(slot?.name || '') === target);
if (idx >= 0) return idx;
idx = state.templateSlots.findIndex((slot) => {
const key = normalizeCompactName(slot?.name || '');
return key && (key.includes(target) || target.includes(key));
});
return idx;
}
function reindexBinSelectionAfterRemove(removedIndex) {
const next = new Set();
state.binSelected.forEach((idx) => {
if (idx === removedIndex) return;
next.add(idx > removedIndex ? idx - 1 : idx);
});
state.binSelected = next;
}
function getFilteredBinEntries(searchKey) {
const key = normalizeCompactName(searchKey || '');
const entries = state.binItems.map((item, idx) => ({ item, idx }));
if (!key) return entries;
return entries.filter(({ item }) => {
const name = normalizeCompactName(item?.name || '');
const group = normalizeCompactName(item?.group || '');
const reason = normalizeCompactName(item?.reason || '');
return name.includes(key) || group.includes(key) || reason.includes(key);
});
}
function renderBinList() {
const host = el('binList');
const countEl = el('binCount');
if (countEl) countEl.textContent = String(state.binItems.length);
if (!host) return;
if (!state.binItems.length) {
host.innerHTML = 'Bin is empty
';
return;
}
const filtered = getFilteredBinEntries(state.searchQuery || '');
if (!filtered.length) {
host.innerHTML = 'No bin match for current search
';
return;
}
host.innerHTML = filtered
.map(({ item, idx }) => {
const name = escapeHtml(item?.name || 'Unknown');
const group = escapeHtml(item?.group || 'Uncategorized');
const reason = escapeHtml(item?.reason || 'deleted');
const preview = item?.url
? `})
`
: `N/A
`;
const selectedClass = state.binSelected.has(idx) ? ' selected' : '';
return `${preview}
${name}
${group} - ${reason}
No response yet.
';
const blocks = source.split(/\n{2,}/);
return blocks.map((block) => {
const lines = block.split('\n');
const first = lines[0] || '';
if (/^###\s+/.test(first)) return `${escapeHtml(first.replace(/^###\s+/, ''))}
`;
if (/^##\s+/.test(first)) return `${escapeHtml(first.replace(/^##\s+/, ''))}
`;
if (/^#\s+/.test(first)) return `${escapeHtml(first.replace(/^#\s+/, ''))}
`;
if (lines.every((x) => /^\s*[-*]\s+/.test(x))) {
const items = lines.map((x) => `${escapeHtml(x.replace(/^\s*[-*]\s+/, ''))}`).join('');
return ``;
}
if (/^```/.test(first) || /^ {4,}/.test(first)) return `${escapeHtml(block.replace(/^```[a-z]*\s*/i, '').replace(/```$/, ''))}
`;
return `${escapeHtml(block).replace(/\n/g, '
')}
`;
}).join('');
}
function renderGeminiMarkdownPreview() {
const box = el('geminiMarkdownPreview');
if (!box) return;
box.innerHTML = formatGeminiMarkdownLite(state.geminiResponseText);
}
function normalizeGeminiUploadMime(file) {
const name = String(file?.name || '').toLowerCase();
const type = String(file?.type || '').toLowerCase();
if (name.endsWith('.png') || type.includes('image/png')) return 'image/png';
if (name.endsWith('.jpg') || name.endsWith('.jpeg') || type.includes('image/jpeg')) return 'image/jpeg';
if (name.endsWith('.webp') || type.includes('image/webp')) return 'image/webp';
if (name.endsWith('.gif') || type.includes('image/gif')) return 'image/gif';
if (name.endsWith('.zip')) return 'application/zip';
if (type.includes('zip')) return 'application/zip';
return 'application/octet-stream';
}
function isZipFile(file) {
const name = String(file?.name || '').toLowerCase();
const mime = normalizeGeminiUploadMime(file);
return name.endsWith('.zip') || mime === 'application/zip';
}
async function extractImagesFromZipFile(file) {
if (typeof JSZip === 'undefined') throw new Error('JSZip is not available');
const zip = await JSZip.loadAsync(file);
const out = [];
for (const [name, entry] of Object.entries(zip.files)) {
if (entry.dir) continue;
if (!/\.(png|jpg|jpeg|webp|gif)$/i.test(name)) continue;
const blob = await entry.async('blob');
const clean = name.split('/').pop() || name;
const mime = normalizeGeminiUploadMime(new File([blob], clean, { type: blob.type || 'application/octet-stream' }));
out.push(new File([blob], clean, { type: mime }));
if (out.length >= 80) break;
}
return out;
}
async function makeActiveGeminiInputFiles() {
if (state.geminiZipFile) {
if (isZipFile(state.geminiZipFile)) {
return extractImagesFromZipFile(state.geminiZipFile);
}
const mime = normalizeGeminiUploadMime(state.geminiZipFile);
return [new File([state.geminiZipFile], state.geminiZipFile.name || ('upload-' + Date.now()), { type: mime })];
}
if (Array.isArray(state.ocrProcessedBatchFiles) && state.ocrProcessedBatchFiles.length) {
return state.ocrProcessedBatchFiles.slice();
}
if (state.ocrInputFiles.length) {
return state.ocrInputFiles
.map((f) => new File([f], f.name || ('ocr-' + Date.now() + '.png'), { type: normalizeGeminiUploadMime(f) }))
.filter((f) => String(f.type || '').startsWith('image/'))
.slice(0, 80);
}
if (state.ocrAllImageBlob) {
return [new File([state.ocrAllImageBlob], state.ocrAllImageName || ('ocr-stack-all-' + Date.now() + '.png'), { type: 'image/png' })];
}
return [];
}
function isImageMime(mime) {
return String(mime || '').toLowerCase().startsWith('image/');
}
async function optimizeImageForGemini(file, options = {}) {
const mime = normalizeGeminiUploadMime(file);
if (!isImageMime(mime)) return file;
const maxDim = clampNum(parseInt(options.maxDim, 10), 256, 5000, GEMINI_UPLOAD_MAX_DIM);
const quality = clampNum(parseFloat(options.quality), 0.5, 0.98, GEMINI_UPLOAD_JPEG_QUALITY);
const img = await loadImageFromFile(file);
const sw = Math.max(1, img.naturalWidth || img.width || 1);
const sh = Math.max(1, img.naturalHeight || img.height || 1);
const scale = Math.min(1, maxDim / Math.max(sw, sh));
const tw = Math.max(1, Math.round(sw * scale));
const th = Math.max(1, Math.round(sh * scale));
const canvas = document.createElement('canvas');
canvas.width = tw;
canvas.height = th;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(img, 0, 0, tw, th);
const outBlob = await canvasToBlob(canvas, 'image/jpeg', quality);
const base = String(file.name || ('img-' + Date.now())).replace(/\.[^.]+$/, '');
return new File([outBlob], `${base}.jpg`, { type: 'image/jpeg' });
}
async function optimizeImageForGrid(file) {
const img = await loadImageFromFile(file);
const sw = Math.max(1, img.naturalWidth || img.width || 1);
const sh = Math.max(1, img.naturalHeight || img.height || 1);
const tw = clampNum(parseInt(state.appData.skinWidth, 10), 20, 3000, 335);
const th = clampNum(parseInt(state.appData.skinHeight, 10), 20, 3000, 300);
const scale = Math.max(tw / sw, th / sh);
const dw = Math.max(1, Math.round(sw * scale));
const dh = Math.max(1, Math.round(sh * scale));
const dx = Math.floor((tw - dw) / 2);
const dy = 0;
const canvas = document.createElement('canvas');
canvas.width = tw;
canvas.height = th;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(img, dx, dy, dw, dh);
const blob = await canvasToBlob(canvas, 'image/jpeg', COLLAGE_JPEG_QUALITY);
const base = String(file?.name || ('grid-' + Date.now())).replace(/\.[^.]+$/, '');
return new File([blob], `${base}.jpg`, { type: 'image/jpeg' });
}
async function optimizeGeminiInputFiles(files) {
const list = Array.isArray(files) ? files : [];
const out = [];
for (let i = 0; i < list.length; i += 1) {
const file = list[i];
const optimized = await optimizeImageForGemini(file, {
maxDim: GEMINI_UPLOAD_MAX_DIM,
quality: GEMINI_UPLOAD_JPEG_QUALITY
});
out.push(optimized);
if ((i + 1) % 8 === 0) await yieldToUi();
}
return out;
}
async function uploadFileToGemini(apiKey, file) {
const mime = normalizeGeminiUploadMime(file);
const startRes = await fetch(`https://generativelanguage.googleapis.com/upload/v1beta/files?key=${encodeURIComponent(apiKey)}`, {
method: 'POST',
headers: {
'X-Goog-Upload-Protocol': 'resumable',
'X-Goog-Upload-Command': 'start',
'X-Goog-Upload-Header-Content-Length': String(file.size),
'X-Goog-Upload-Header-Content-Type': mime,
'Content-Type': 'application/json'
},
body: JSON.stringify({
file: {
display_name: file.name || ('ocr-zip-' + Date.now() + '.zip')
}
})
});
if (!startRes.ok) {
throw new Error(`Gemini upload start failed (${startRes.status})`);
}
const uploadUrl = startRes.headers.get('x-goog-upload-url');
if (!uploadUrl) throw new Error('Gemini upload URL missing');
const uploadRes = await fetch(uploadUrl, {
method: 'POST',
headers: {
'X-Goog-Upload-Offset': '0',
'X-Goog-Upload-Command': 'upload, finalize',
'Content-Type': mime
},
body: file
});
if (!uploadRes.ok) {
throw new Error(`Gemini upload finalize failed (${uploadRes.status})`);
}
const uploaded = await uploadRes.json();
const meta = uploaded?.file || uploaded;
if (!meta?.uri) throw new Error('Gemini file URI missing');
return {
uri: meta.uri,
mimeType: mime,
name: meta.name || file.name
};
}
async function uploadFilesToGemini(apiKey, files, options = {}) {
const all = Array.isArray(files) ? files : [];
const maxConcurrency = clampNum(parseInt(options.maxConcurrency, 10), 1, 8, 4);
const uploaded = new Array(all.length);
let nextIndex = 0;
let done = 0;
const worker = async () => {
while (true) {
const idx = nextIndex;
nextIndex += 1;
if (idx >= all.length) break;
uploaded[idx] = await uploadFileToGemini(apiKey, all[idx]);
done += 1;
if (typeof options.onProgress === 'function') {
options.onProgress(done, all.length, all[idx]);
}
}
};
const workers = [];
const count = Math.min(maxConcurrency, all.length || 1);
for (let i = 0; i < count; i += 1) workers.push(worker());
await Promise.all(workers);
return uploaded.filter(Boolean);
}
function extractGeminiText(payload) {
const candidates = Array.isArray(payload?.candidates) ? payload.candidates : [];
const parts = candidates[0]?.content?.parts || [];
const text = parts.map((p) => p?.text || '').join('\n').trim();
if (text) return text;
return JSON.stringify(payload || {}, null, 2);
}
function buildGeminiStrictPrompt(userPrompt) {
const base = String(userPrompt || '').trim();
const schema = [
'Return STRICT JSON only. No markdown, no code fences, no explanation.',
'Use this schema:',
'{',
' "names": ["skin name 1", "skin name 2"],',
' "template": { optional template json },',
' "notes": "optional short note"',
'}'
].join('\n');
return `${base}\n\n${schema}`.trim();
}
function tryParseGeminiJson(text) {
const raw = String(text || '').trim();
if (!raw) return null;
try {
return JSON.parse(raw);
} catch (_) {}
const fenceMatch = raw.match(/```(?:json)?\s*([\s\S]*?)\s*```/i);
if (fenceMatch?.[1]) {
try {
return JSON.parse(fenceMatch[1].trim());
} catch (_) {}
}
const first = raw.indexOf('{');
const last = raw.lastIndexOf('}');
if (first >= 0 && last > first) {
const slice = raw.slice(first, last + 1);
try {
return JSON.parse(slice);
} catch (_) {}
}
return null;
}
function extractNamesFromGeminiJson(data) {
if (!data || typeof data !== 'object') return [];
const direct = Array.isArray(data.names) ? data.names : [];
const autoOrder = Array.isArray(data.autoOrder) ? data.autoOrder : [];
const skins = Array.isArray(data.skins) ? data.skins : [];
const nested = Array.isArray(data?.collage?.names) ? data.collage.names : [];
const merged = [...direct, ...autoOrder, ...nested, ...skins];
const out = [];
const seen = new Set();
merged.forEach((row) => {
const name = typeof row === 'string' ? row.trim() : String(row?.name || '').trim();
if (!name) return;
const key = name.toLowerCase();
if (seen.has(key)) return;
seen.add(key);
out.push(name);
});
return out;
}
function tryExtractTemplateFromGeminiJson(data) {
if (!data || typeof data !== 'object') return null;
if (data.template && typeof data.template === 'object') return data.template;
if (data.files && typeof data.files === 'object') return data;
return null;
}
function autoApplyGeminiJson(data, options = {}) {
const autoApplyCollage = options.autoApplyCollage !== false;
let appliedTemplate = false;
let appliedNames = false;
const templateRaw = tryExtractTemplateFromGeminiJson(data);
if (templateRaw) {
try {
const normalized = normalizeTemplateData(templateRaw);
applyNormalizedTemplate(normalized);
appliedTemplate = true;
} catch (err) {
console.warn('Gemini template ignored:', err);
}
}
const names = extractNamesFromGeminiJson(data);
if (names.length) {
const input = el('autoOrderInput');
if (input) {
input.value = names.join('\n');
appliedNames = true;
if (autoApplyCollage) applyAutoCollageOrder();
}
}
if ((appliedNames && !autoApplyCollage) || (!appliedNames && appliedTemplate)) {
saveState();
render();
}
return { appliedTemplate, appliedNames, namesCount: names.length, autoAppliedCollage: appliedNames && autoApplyCollage };
}
async function sendZipToGemini() {
const apiKey = String(el('geminiApiKey')?.value || '').trim();
const prompt = String(el('geminiPrompt')?.value || '').trim();
const model = String(el('geminiModel')?.value || GEMINI_DEFAULT_MODEL).trim() || GEMINI_DEFAULT_MODEL;
const inputFilesRaw = await makeActiveGeminiInputFiles();
const status = el('ocrStatus');
persistGeminiSettings();
if (!apiKey || !prompt || !inputFilesRaw.length) {
if (status) status.textContent = 'Gemini requires API key, prompt, and images (from selected ZIP or OCR input).';
setGeminiResultText('Missing required fields: API key, prompt, or images.');
return;
}
showLoading('Sending images to Gemini...');
setGeminiResultText('');
try {
setLoadingProgress(3, 'Preparing images', `Optimizing ${inputFilesRaw.length} image(s)...`);
const optimized = await optimizeGeminiInputFiles(inputFilesRaw);
if (status) status.textContent = `Uploading ${optimized.length} optimized image(s) to Gemini...`;
const uploadedFiles = await uploadFilesToGemini(apiKey, optimized, {
maxConcurrency: 6,
onProgress: (done, total, file) => {
setLoadingProgress(10 + Math.round((done / Math.max(1, total)) * 45), 'Gemini upload', file?.name || `Image ${done}`);
}
});
setLoadingProgress(55, 'Gemini processing', `${model} with ${uploadedFiles.length} image(s)`);
const fileParts = uploadedFiles.map((uploaded) => ({
file_data: {
mime_type: uploaded.mimeType,
file_uri: uploaded.uri
}
}));
const body = {
contents: [{
role: 'user',
parts: [
{ text: buildGeminiStrictPrompt(prompt) },
...fileParts
]
}]
};
const genRes = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${encodeURIComponent(model)}:generateContent?key=${encodeURIComponent(apiKey)}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
const payload = await genRes.json();
if (!genRes.ok) {
setGeminiResultText(JSON.stringify(payload || {}, null, 2));
throw new Error(payload?.error?.message || `Gemini generate failed (${genRes.status})`);
}
const text = extractGeminiText(payload);
setGeminiResultText(text);
const parsed = tryParseGeminiJson(text);
if (!parsed) {
if (status) status.textContent = 'Gemini response ready (not valid JSON, auto-apply skipped).';
setLoadingProgress(100, 'Gemini done', 'Response received');
return;
}
const autoApplyCollage = el('geminiAutoApplyCollage') ? !!el('geminiAutoApplyCollage').checked : true;
const applied = autoApplyGeminiJson(parsed, { autoApplyCollage });
if (status) {
status.textContent = applied.appliedNames || applied.appliedTemplate
? `Gemini parsed. Names: ${applied.namesCount}, Template: ${applied.appliedTemplate ? 'yes' : 'no'}, Auto collage: ${applied.autoAppliedCollage ? 'yes' : 'no'}.`
: 'Gemini JSON parsed, but nothing applicable found.';
}
setLoadingProgress(100, 'Gemini done', 'Response received');
} catch (err) {
console.error(err);
if (status) status.textContent = `Gemini failed: ${err.message || 'Unknown error'}`;
if (!String(state.geminiResponseText || '').trim()) {
setGeminiResultText(`Gemini failed:\n${err.message || 'Unknown error'}`);
}
} finally {
hideLoading();
}
}
function downloadGeminiResult() {
const text = String(state.geminiResponseText || '').trim();
if (!text) return;
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'gemini-response-' + Date.now() + '.txt';
a.click();
URL.revokeObjectURL(url);
}
function startPan(e) {
if (e.button !== 0) return;
state.panning = true;
state.panMoved = false;
state.panStartedOnSkin = !!e.target.closest('.skin-item');
state.panDownClientX = e.clientX;
state.panDownClientY = e.clientY;
state.startPanX = e.clientX - state.panX;
state.startPanY = e.clientY - state.panY;
}
function onPan(e) {
if (!state.panning) return;
const movedX = e.clientX - state.panDownClientX;
const movedY = e.clientY - state.panDownClientY;
const movedDist = Math.hypot(movedX, movedY);
if (!state.panMoved && movedDist >= 4) {
state.panMoved = true;
if (state.panStartedOnSkin) state.suppressSkinClickUntil = Date.now() + 260;
}
if (!state.panMoved) return;
state.panX = e.clientX - state.startPanX;
state.panY = e.clientY - state.startPanY;
applyCollageTransform();
}
function endPan() {
if (state.panMoved && state.panStartedOnSkin) {
state.suppressSkinClickUntil = Date.now() + 160;
}
state.panning = false;
state.panMoved = false;
state.panStartedOnSkin = false;
}
function onWheelZoom(e) {
e.preventDefault();
adjustZoom(-e.deltaY * 0.001);
}
function adjustZoom(delta) {
state.scale = clampNum(state.scale + delta, 0.1, 2, 0.5);
if (el('zoomLevel')) el('zoomLevel').value = state.scale;
updateZoomText();
applyCollageTransform();
}
function fitCollageToViewport() {
const viewport = el('viewport');
if (!viewport) return;
const totalCols = Math.max(1, state.appData.cols);
const totalRows = Math.max(1, state.appData.rows);
const gap = Math.max(0, state.appData.gap);
const collageWidth = (totalCols * state.appData.skinWidth) + ((totalCols + 1) * gap);
const collageHeight = (totalRows * state.appData.skinHeight) + ((totalRows + 1) * gap);
const vw = Math.max(1, viewport.clientWidth - 18);
const vh = Math.max(1, viewport.clientHeight - 18);
const nextScale = Math.min(2, Math.max(0.1, Math.min(vw / collageWidth, vh / collageHeight)));
state.scale = clampNum(nextScale, 0.1, 2, 0.5);
state.panX = 0;
state.panY = 0;
if (el('zoomLevel')) el('zoomLevel').value = state.scale;
updateZoomText();
applyCollageTransform();
}
function getPointerDistance(a, b) {
if (!a || !b) return 0;
return Math.hypot((a.x - b.x), (a.y - b.y));
}
function startPanFromPoint(clientX, clientY, startedOnSkin) {
state.panning = true;
state.panMoved = false;
state.panStartedOnSkin = !!startedOnSkin;
state.panDownClientX = clientX;
state.panDownClientY = clientY;
state.startPanX = clientX - state.panX;
state.startPanY = clientY - state.panY;
}
function onPanFromPoint(clientX, clientY) {
if (!state.panning) return false;
const movedX = clientX - state.panDownClientX;
const movedY = clientY - state.panDownClientY;
const movedDist = Math.hypot(movedX, movedY);
if (!state.panMoved && movedDist >= 4) {
state.panMoved = true;
if (state.panStartedOnSkin) state.suppressSkinClickUntil = Date.now() + 260;
}
if (!state.panMoved) return false;
state.panX = clientX - state.startPanX;
state.panY = clientY - state.startPanY;
applyCollageTransform();
return true;
}
function onViewportPointerDown(e) {
if (e.pointerType === 'mouse' && e.button !== 0) return;
const viewport = el('viewport');
const startedOnSkin = !!e.target.closest('.skin-item');
// Do not capture immediately when pressing a skin tile; it can swallow tile clicks.
if (!startedOnSkin) viewport?.setPointerCapture?.(e.pointerId);
state.activePointers.set(e.pointerId, {
x: e.clientX,
y: e.clientY,
startedOnSkin
});
if (state.activePointers.size === 1) {
const p = state.activePointers.get(e.pointerId);
startPanFromPoint(p.x, p.y, p.startedOnSkin);
} else if (state.activePointers.size >= 2) {
const [a, b] = [...state.activePointers.values()];
state.panning = false;
state.panMoved = false;
state.pinchStartDistance = Math.max(1, getPointerDistance(a, b));
state.pinchStartScale = state.scale;
}
}
function onViewportPointerMove(e) {
if (!state.activePointers.has(e.pointerId)) return;
const prev = state.activePointers.get(e.pointerId);
state.activePointers.set(e.pointerId, { ...prev, x: e.clientX, y: e.clientY });
if (state.activePointers.size >= 2) {
const [a, b] = [...state.activePointers.values()];
const dist = Math.max(1, getPointerDistance(a, b));
const factor = dist / Math.max(1, state.pinchStartDistance);
state.scale = clampNum(state.pinchStartScale * factor, 0.1, 2, state.scale);
if (el('zoomLevel')) el('zoomLevel').value = state.scale;
updateZoomText();
applyCollageTransform();
state.suppressSkinClickUntil = Date.now() + 250;
if (e.pointerType === 'touch') e.preventDefault();
return;
}
const moved = onPanFromPoint(e.clientX, e.clientY);
if (moved) {
const viewport = el('viewport');
viewport?.setPointerCapture?.(e.pointerId);
}
if (moved && e.pointerType === 'touch') e.preventDefault();
}
function onViewportPointerUp(e) {
if (state.activePointers.has(e.pointerId)) state.activePointers.delete(e.pointerId);
const viewport = el('viewport');
try {
viewport?.releasePointerCapture?.(e.pointerId);
} catch (_) {}
if (state.activePointers.size === 0) {
endPan();
return;
}
if (state.activePointers.size === 1) {
const p = [...state.activePointers.values()][0];
startPanFromPoint(p.x, p.y, p.startedOnSkin);
} else if (state.activePointers.size >= 2) {
const [a, b] = [...state.activePointers.values()];
state.panning = false;
state.pinchStartDistance = Math.max(1, getPointerDistance(a, b));
state.pinchStartScale = state.scale;
}
}
function applyCollageTransform() {
const area = el('collage-area');
if (!area) return;
area.style.transform = `translate(calc(-50% + ${state.panX}px), calc(-50% + ${state.panY}px)) scale(${state.scale})`;
}
function handleKeydown(e) {
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f') {
e.preventDefault();
toggleUtilityDrawer(true);
return;
}
if (e.ctrlKey && e.key.toLowerCase() === 'z') {
e.preventDefault();
undo();
}
if ((e.ctrlKey && e.key.toLowerCase() === 'y') || (e.ctrlKey && e.shiftKey && e.key === 'Z')) {
e.preventDefault();
redo();
}
if ((e.key === 'Delete' || e.key === 'Backspace') && state.selected.size) {
e.preventDefault();
deleteSelected();
}
if (e.key === 'Escape') {
if (state.drawerOpen) {
toggleUtilityDrawer(false);
return;
}
if (el('image-processor-modal')?.classList.contains('active')) closeCropModal();
else clearSelection();
}
if (!e.ctrlKey && !e.metaKey && e.key.toLowerCase() === 'm') {
toggleMulti();
}
}
function showLoading(msg) {
const overlay = el('loading-overlay');
if (!overlay) return;
state.loadingProgress = 0;
const text = overlay.querySelector('.loading-text');
if (text) text.textContent = msg || 'PROCESSING...';
const label = el('loading-progress-label');
if (label) label.textContent = msg || 'Starting...';
const detail = el('loading-progress-detail');
if (detail) detail.textContent = '';
const bar = el('loading-progress-bar');
if (bar) bar.style.width = '0%';
overlay.classList.add('active');
}
function hideLoading() {
el('loading-overlay')?.classList.remove('active');
}
function setLoadingProgress(percent, message, detail) {
const pct = clampNum(parseInt(percent, 10), 0, 100, 0);
state.loadingProgress = pct;
const bar = el('loading-progress-bar');
const label = el('loading-progress-label');
const detailEl = el('loading-progress-detail');
if (bar) bar.style.width = `${pct}%`;
if (label && message) label.textContent = `${message} (${pct}%)`;
if (detailEl) detailEl.textContent = detail || '';
}
async function yieldToUi() {
await new Promise((resolve) => setTimeout(resolve, 0));
}
function openCacheDb() {
return new Promise((resolve, reject) => {
const req = indexedDB.open(CACHE_DB_NAME, 1);
req.onupgradeneeded = () => {
const db = req.result;
if (!db.objectStoreNames.contains(CACHE_STORE_NAME)) {
db.createObjectStore(CACHE_STORE_NAME);
}
};
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error || new Error('IndexedDB open failed'));
});
}
async function cacheSetValue(key, value) {
const db = await openCacheDb();
await new Promise((resolve, reject) => {
const tx = db.transaction(CACHE_STORE_NAME, 'readwrite');
tx.objectStore(CACHE_STORE_NAME).put(value, key);
tx.oncomplete = () => resolve();
tx.onerror = () => reject(tx.error || new Error('Cache write failed'));
});
db.close();
}
async function cacheGetValue(key) {
const db = await openCacheDb();
const value = await new Promise((resolve, reject) => {
const tx = db.transaction(CACHE_STORE_NAME, 'readonly');
const req = tx.objectStore(CACHE_STORE_NAME).get(key);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error || new Error('Cache read failed'));
});
db.close();
return value;
}
function cacheSetBlob(key, blob) {
return cacheSetValue(key, blob);
}
function cacheGetBlob(key) {
return cacheGetValue(key);
}
function cacheSetJson(key, data) {
return cacheSetValue(key, data);
}
function cacheGetJson(key) {
return cacheGetValue(key);
}
async function fetchBlobWithProgress(url, onProgress) {
const res = await fetch(url, { cache: 'no-store' });
if (!res.ok) throw new Error(`Download failed (${res.status})`);
const total = Number(res.headers.get('content-length')) || 0;
if (!res.body || !total) {
const blob = await res.blob();
if (onProgress) onProgress(100, 'Downloaded');
return blob;
}
const reader = res.body.getReader();
const chunks = [];
let received = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
received += value.byteLength;
const pct = Math.round((received / total) * 100);
if (onProgress) onProgress(pct, `${Math.round(received / 1024 / 1024)}MB / ${Math.round(total / 1024 / 1024)}MB`);
if (received % (1024 * 1024 * 4) < value.byteLength) await yieldToUi();
}
return new Blob(chunks);
}
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.decoding = 'async';
const src = String(url || '');
if (src && !src.startsWith('blob:') && !src.startsWith('data:')) {
img.crossOrigin = 'anonymous';
img.referrerPolicy = 'no-referrer';
}
img.onload = () => resolve(img);
img.onerror = () => reject(new Error('Image load failed'));
img.src = src;
});
}
function normalizeHex(hex) {
const v = String(hex || '').trim();
return /^#[0-9a-fA-F]{6}$/.test(v) ? v : '#ffffff';
}
function clampNum(value, min, max, fallback) {
if (!Number.isFinite(value)) return fallback;
return Math.max(min, Math.min(max, value));
}
function debounce(fn, wait) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), wait);
};
}
function notify(message) {
const msg = String(message || '').trim();
if (!msg) return;
const status = el('ocrStatus');
if (status) status.textContent = msg;
console.info(msg);
}
function disableBrowserDialogs() {
try {
window.alert = (msg) => notify(msg);
window.confirm = (msg) => {
notify(msg);
return true;
};
} catch (_) {}
}
function buildProjectPayload() {
return {
version: 1,
savedAt: Date.now(),
appData: { ...state.appData },
groupOrder: state.groupOrder.slice(),
templateSlots: state.templateSlots.map((x) => ({ name: x.name, group: x.group || 'Uncategorized' })),
uploadedImages: state.uploadedImages.map((x) => ({ name: x.name, group: x.group || 'Uncategorized' }))
};
}
function applyProjectPayload(payload) {
if (!payload || typeof payload !== 'object') throw new Error('Invalid project payload');
if (!Array.isArray(payload.uploadedImages)) throw new Error('Missing uploaded images');
if (payload.appData && typeof payload.appData === 'object') {
state.appData = { ...state.appData, ...payload.appData };
}
state.groupOrder = Array.isArray(payload.groupOrder) ? payload.groupOrder.slice() : [];
state.templateSlots = Array.isArray(payload.templateSlots)
? payload.templateSlots.map((x) => ({ name: x?.name || '', group: x?.group || 'Uncategorized' }))
: [];
state.uploadedImages = payload.uploadedImages.map((x) => ({
name: x?.name || 'Imported',
group: x?.group || 'Uncategorized',
url: null,
file: null
}));
state.selected.clear();
state.pendingPlacement = [];
state.pendingBinPlacement = [];
state.groupDrag = null;
state.panX = 0;
state.panY = 0;
ensureGroupOrder();
syncInputsFromState();
}
async function embedProjectIntoImageBlob(imageBlob) {
const payload = buildProjectPayload();
const json = JSON.stringify(payload);
const imgBytes = new Uint8Array(await imageBlob.arrayBuffer());
if (!(imgBytes[0] === 0xFF && imgBytes[1] === 0xD8)) {
return imageBlob;
}
const encoded = btoa(unescape(encodeURIComponent(json)));
const encoder = new TextEncoder();
const maxChunkChars = 54000;
const totalChunks = Math.ceil(encoded.length / maxChunkChars);
const segments = [];
for (let i = 0; i < totalChunks; i += 1) {
const chunk = encoded.slice(i * maxChunkChars, (i + 1) * maxChunkChars);
const tag = `MLBBP1:${i + 1}/${totalChunks}:${chunk}`;
const payloadBytes = encoder.encode(tag);
const segLen = payloadBytes.length + 2;
if (segLen > 65535) throw new Error('Project payload chunk too large');
const seg = new Uint8Array(4 + payloadBytes.length);
seg[0] = 0xFF;
seg[1] = 0xFE; // COM marker
seg[2] = (segLen >> 8) & 0xFF;
seg[3] = segLen & 0xFF;
seg.set(payloadBytes, 4);
segments.push(seg);
}
const extra = segments.reduce((sum, seg) => sum + seg.length, 0);
const out = new Uint8Array(imgBytes.length + extra);
let offset = 0;
out.set(imgBytes.slice(0, 2), offset);
offset += 2;
segments.forEach((seg) => {
out.set(seg, offset);
offset += seg.length;
});
out.set(imgBytes.slice(2), offset);
return new Blob([out], { type: 'image/jpeg' });
}
async function extractEmbeddedProjectFromImage(file) {
const bytes = new Uint8Array(await file.arrayBuffer());
// Preferred path: parse JPEG COM segments injected by this app.
if (bytes[0] === 0xFF && bytes[1] === 0xD8) {
const decoder = new TextDecoder();
const parts = [];
let pos = 2;
while (pos + 4 <= bytes.length) {
if (bytes[pos] !== 0xFF) {
pos += 1;
continue;
}
const marker = bytes[pos + 1];
if (marker === 0xD9 || marker === 0xDA) break;
if (marker === 0x00 || marker === 0xFF) {
pos += 1;
continue;
}
const segLen = (bytes[pos + 2] << 8) | bytes[pos + 3];
if (segLen < 2 || pos + 2 + segLen > bytes.length) break;
if (marker === 0xFE) {
const data = bytes.slice(pos + 4, pos + 2 + segLen);
const txt = decoder.decode(data);
if (txt.startsWith('MLBBP1:')) {
const first = txt.indexOf(':');
const second = txt.indexOf(':', first + 1);
if (first > -1 && second > first) {
const idxRaw = txt.slice(first + 1, second);
const split = idxRaw.split('/');
const idx = parseInt(split[0], 10);
const total = parseInt(split[1], 10);
const chunk = txt.slice(second + 1);
if (Number.isFinite(idx) && Number.isFinite(total) && chunk) {
parts.push({ idx, total, chunk });
}
}
}
}
pos += 2 + segLen;
}
if (parts.length) {
parts.sort((a, b) => a.idx - b.idx);
const expected = parts[0].total;
if (expected > 0 && parts.length === expected) {
const raw = parts.map((p) => p.chunk).join('');
try {
const json = decodeURIComponent(escape(atob(raw)));
return JSON.parse(json);
} catch (_) {
return null;
}
}
}
}
// Backward compatibility: trailing marker from older versions.
const text = new TextDecoder().decode(bytes);
const idx = text.lastIndexOf(EMBED_MARKER);
if (idx < 0) return null;
const raw = text.slice(idx + EMBED_MARKER.length).trim();
if (!raw) return null;
try {
const json = decodeURIComponent(escape(atob(raw)));
return JSON.parse(json);
} catch (_) {
return null;
}
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else init();