vibegif.lol/ui.js

const $ = (s) => document.querySelector(s);

export const el = {
  setupScreen: $('#setup-screen'),
  mainScreen: $('#main-screen'),
  setupKey: $('#setup-key'),
  setupSave: $('#setup-save'),
  btnSettings: $('#btn-settings'),
  modal: $('#modal-settings'),
  modalKey: $('#modal-key'),
  modalSave: $('#modal-save'),
  btnCloseModal: $('#btn-close-modal'),
  selModel: $('#sel-model'),
  inpPrompt: $('#inp-prompt'),
  inpFrames: $('#inp-frames'),
  inpFps: $('#inp-fps'),
  selSize: $('#sel-size'),
  selRatio: $('#sel-ratio'),
  btnGenerate: $('#btn-generate'),
  progressArea: $('#progress-area'),
  progressBar: $('#progress-bar'),
  progressText: $('#progress-text'),
  framesPreview: $('#frames-preview'),
  resultArea: $('#result-area'),
  resultGif: $('#result-gif'),
  btnDownload: $('#btn-download'),
};

export function showSetup() {
  el.setupScreen.classList.remove('hidden');
  el.mainScreen.classList.add('hidden');
}

export function showMain() {
  el.setupScreen.classList.add('hidden');
  el.mainScreen.classList.remove('hidden');
}

export function showModal(currentKey) {
  el.modalKey.value = currentKey;
  el.modal.classList.remove('hidden');
}

export function hideModal() {
  el.modal.classList.add('hidden');
}

export function setProgress(pct, text) {
  el.progressArea.classList.remove('hidden');
  el.progressArea.classList.add('flex-col');
  el.progressBar.style.width = `${pct}%`;
  el.progressText.textContent = text;
}

export function addFramePreview(base64, index) {
  const img = document.createElement('img');
  img.src = base64;
  img.className = 'w-16 h-16 rounded-lg border border-neutral-200 object-cover';
  img.title = `frame ${index + 1}`;
  el.framesPreview.appendChild(img);
}

export function resetProgress() {
  el.progressArea.classList.add('hidden');
  el.progressArea.classList.remove('flex-col');
  el.progressBar.style.width = '0%';
  el.progressText.textContent = '';
  el.framesPreview.innerHTML = '';
}

export function showResult(blobUrl) {
  el.resultArea.classList.remove('hidden');
  el.resultArea.classList.add('flex-col');
  el.resultGif.src = blobUrl;
  el.btnDownload.href = blobUrl;
}

export function hideResult() {
  el.resultArea.classList.add('hidden');
  el.resultArea.classList.remove('flex-col');
}

export function setGenerating(active) {
  el.btnGenerate.disabled = active;
  el.btnGenerate.classList.toggle('opacity-50', active);
  el.btnGenerate.classList.toggle('cursor-not-allowed', active);
}