mirror of
https://github.com/vibegif/vibegif.lol.git
synced 2026-04-07 10:12:13 +00:00
Delete: Merged into app.js
This commit is contained in:
87
ui.js
87
ui.js
@@ -1,87 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user