File size: 4,319 Bytes
28b723d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | document.addEventListener('DOMContentLoaded', () => {
// Auto-fill form if parameters exist in URL (from Home page)
const urlParams = new URLSearchParams(window.location.search);
const temaParam = urlParams.get('tema');
if (temaParam) {
document.getElementById('tema-input').value = temaParam;
}
const form = document.getElementById('generate-form');
const generateBtn = document.getElementById('generate-btn');
const btnText = document.getElementById('btn-text');
const btnSpinner = document.getElementById('btn-spinner');
const emptyState = document.getElementById('empty-state');
const resultContainer = document.getElementById('result-container');
const resultBadge = document.getElementById('result-badge');
const resultText = document.getElementById('result-text');
const analyticsContainer = document.getElementById('analytics-container');
const visualizationContainer = document.getElementById('visualization-container');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const tema = document.getElementById('tema-input').value.trim();
const gaya = document.getElementById('gaya-input').value;
if (!tema) {
window.showToast('Tema tidak boleh kosong!', 'error');
return;
}
// Set Loading State
setLoadingState(true);
try {
const response = await fetch('/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ tema, gaya })
});
if (!response.ok) {
throw new Error('Terjadi kesalahan pada server');
}
const data = await response.json();
// Display Results
displayResults(data);
} catch (error) {
console.error('Generation error:', error);
window.showToast(error.message || 'Gagal terhubung ke server', 'error');
} finally {
// Remove Loading State
setLoadingState(false);
}
});
function setLoadingState(isLoading) {
if (isLoading) {
generateBtn.disabled = true;
btnText.textContent = 'Memproses...';
btnSpinner.classList.remove('hidden');
// Hide previous results if any
resultContainer.classList.add('hidden');
analyticsContainer.classList.add('hidden');
visualizationContainer.classList.add('hidden');
// Show empty state briefly with loading indication if desired
// Or leave it hidden during loading
emptyState.classList.add('hidden');
} else {
generateBtn.disabled = false;
btnText.textContent = 'Generate Now';
btnSpinner.classList.add('hidden');
}
}
function displayResults(data) {
// Update DOM elements with data
resultBadge.textContent = `Tema: ${data.tema} | Gaya: ${data.gaya}`;
resultText.textContent = data.pantun;
document.getElementById('stat-rima').textContent = data.pola_rima;
document.getElementById('stat-suku').textContent = data.suku_kata;
document.getElementById('stat-conf').textContent = `${(data.confidence * 100).toFixed(0)}%`;
document.getElementById('stat-sent').textContent = data.sentiment;
// Apply animations
resultContainer.classList.remove('hidden');
resultContainer.classList.add('fade-in');
analyticsContainer.classList.remove('hidden');
analyticsContainer.classList.add('fade-in');
visualizationContainer.classList.remove('hidden');
visualizationContainer.classList.add('fade-in');
// Ensure empty state is hidden
emptyState.classList.add('hidden');
// Remove animation class after it completes to allow re-triggering
setTimeout(() => {
resultContainer.classList.remove('fade-in');
analyticsContainer.classList.remove('fade-in');
visualizationContainer.classList.remove('fade-in');
}, 500);
}
});
|