mirror of
https://github.com/vibegif/vibegif.lol.git
synced 2026-04-07 10:12:13 +00:00
86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
export const ELEMENT_IDS = [
|
|
'setup-screen', 'main-screen', 'setup-key', 'setup-save',
|
|
'btn-settings', 'modal-settings', 'modal-key', 'modal-save', 'btn-close-modal',
|
|
'sel-model', 'inp-prompt', 'inp-frames', 'inp-fps', 'sel-ratio', 'inp-max-size',
|
|
'chk-semi-transparent',
|
|
'btn-generate', 'progress-area', 'progress-bar', 'progress-text', 'frames-preview',
|
|
'result-area', 'result-gif', 'btn-download'
|
|
];
|
|
|
|
const camelize = (id) => id.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
|
|
|
|
export function grabElements(ids = ELEMENT_IDS) {
|
|
const el = {};
|
|
for (const id of ids) {
|
|
const key = camelize(id);
|
|
el[key] = document.getElementById(id);
|
|
if (!el[key]) console.warn(`vibegif: missing element #${id}`);
|
|
}
|
|
return el;
|
|
}
|
|
|
|
export function show(node) {
|
|
if (!node) return;
|
|
node.classList.remove('hidden');
|
|
if (node.classList.contains('flex')) {
|
|
node.style.display = 'flex';
|
|
} else {
|
|
node.style.display = '';
|
|
}
|
|
}
|
|
|
|
export function hide(node) {
|
|
if (!node) return;
|
|
node.classList.add('hidden');
|
|
node.style.display = 'none';
|
|
}
|
|
|
|
export function setProgress(el, pct, text) {
|
|
show(el.progressArea);
|
|
if (el.progressBar) el.progressBar.style.width = `${Math.max(0, Math.min(100, pct))}%`;
|
|
if (el.progressText) el.progressText.textContent = text || '';
|
|
}
|
|
|
|
export function resetProgress(el) {
|
|
hide(el.progressArea);
|
|
if (el.progressBar) el.progressBar.style.width = '0%';
|
|
if (el.progressText) el.progressText.textContent = '';
|
|
if (el.framesPreview) el.framesPreview.innerHTML = '';
|
|
}
|
|
|
|
export function addFramePreview(el, src, index, aspectRatio = '1:1') {
|
|
if (!el.framesPreview) return;
|
|
const img = document.createElement('img');
|
|
img.src = src;
|
|
img.className = 'h-16 rounded-lg border border-neutral-200 object-cover bg-white';
|
|
img.style.aspectRatio = aspectRatio;
|
|
img.style.width = 'auto';
|
|
img.title = `frame ${index + 1}`;
|
|
el.framesPreview.appendChild(img);
|
|
}
|
|
|
|
export function showResult(el, blobUrl, filename = 'vibegif.gif') {
|
|
if (el.resultArea) {
|
|
el.resultArea.classList.remove('hidden');
|
|
el.resultArea.style.display = 'flex';
|
|
}
|
|
if (el.resultGif) el.resultGif.src = blobUrl;
|
|
if (el.btnDownload) {
|
|
el.btnDownload.href = blobUrl;
|
|
el.btnDownload.download = filename;
|
|
}
|
|
}
|
|
|
|
export function hideResult(el) {
|
|
if (!el.resultArea) return;
|
|
el.resultArea.classList.add('hidden');
|
|
el.resultArea.style.display = 'none';
|
|
}
|
|
|
|
export function setGenerating(el, active) {
|
|
if (!el.btnGenerate) return;
|
|
el.btnGenerate.disabled = !!active;
|
|
el.btnGenerate.style.opacity = active ? '0.5' : '1';
|
|
el.btnGenerate.style.cursor = active ? 'not-allowed' : 'pointer';
|
|
}
|