Update static/js/app.js

static/js/app.js

@@ -84,7 +84,7 @@ DOMElements.contexts = DOMElements.canvases.map(canvas =>
 function updateDateTime() {
     if (!DOMElements.datetime) return;
     
-    DOMElements.datetime.textContent = new Date().toLocaleString('id-ID', {
+    DOMElements.datetime.textContent = new Date().toLocaleString('en-US', {
         dateStyle: 'full',
         timeStyle: 'short'
     });
@@ -93,7 +93,7 @@ function updateDateTime() {
 function addLog(message, type = 'info') {
     if (!DOMElements.systemLog) return;
     
-    const timestamp = new Date().toLocaleTimeString('id-ID', { hour12: false });
+    const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
     const typeClass = {
         info: 'text-slate-500',
         warning: 'text-amber-600',
@@ -160,12 +160,12 @@ function displayAudioResults(data) {
     }
 
     if (data.status === "analyzing") {
-        DOMElements.vocalizationContent.innerHTML = `<p class="text-sm text-amber-600">Analisis vokalisasi sedang berlangsung...</p>`;
+        DOMElements.vocalizationContent.innerHTML = `<p class="text-sm text-amber-600">Vocalization analysis in progress...</p>`;
         return;
     }
 
     if (data.status === "no_data" || data.prediction === null) {
-        DOMElements.vocalizationContent.innerHTML = `<p class="text-sm text-slate-500">Menunggu analisis vokalisasi berlangsung...</p>`;
+        DOMElements.vocalizationContent.innerHTML = `<p class="text-sm text-slate-500">Waiting for vocalization analysis to run...</p>`;
         return;
     }
     
@@ -176,9 +176,9 @@ function displayAudioResults(data) {
     
     const probabilities = data.probabilities || {};
     const statusMap = {
-        'Healthy': { text: 'Sehat', color: 'green' },
-        'Unhealthy': { text: 'Tidak Sehat', color: 'red' },
-        'Noise': { text: 'Bising', color: 'amber' },
+        'Healthy': { text: 'Healthy', color: 'green' },
+        'Unhealthy': { text: 'Unhealthy', color: 'red' },
+        'Noise': { text: 'Noise', color: 'amber' },
     };
     
     const dominantStatus = statusMap[data.prediction] || { 
@@ -186,14 +186,10 @@ function displayAudioResults(data) {
         color: 'slate' 
     };
 
-    if(
-        (data.prediction === "Unhealthy" || dominantStatus.text === "Tidak Sehat") &&
-        state.lastVocalization !== "Unhealthy"
-    ){
-        addLog("Status Vokal: <strong>Tidak Sehat Terdeteksi</strong>", "danger");
+    if (data.prediction === "Unhealthy" && state.lastVocalization !== "Unhealthy") {
+        addLog("Vocalization Status: <strong>Unhealthy Detected</strong>", "danger");
         state.lastVocalization = "Unhealthy";
-    }
-    else if (data.prediction === "Healthy"){
+    } else if (data.prediction === "Healthy") {
         state.lastVocalization = "Healthy";
     }
     
@@ -217,13 +213,11 @@ function displayAudioResults(data) {
 
     DOMElements.vocalizationContent.innerHTML = `
         <div class="flex items-center justify-between mb-3">
-            <span class="text-slate-500 text-xs">Status Dominan:</span>
+            <span class="text-slate-500 text-xs">Dominant Status:</span>
             <span class="font-bold text-base text-${dominantStatus.color}-600">${dominantStatus.text}</span>
         </div>
         <div class="space-y-2">${barsHtml}</div>
     `;
-
-
 }
 
 // --- Modal function ---
@@ -265,7 +259,7 @@ function loadSettingsFromStorage() {
     if (savedAudioUrl) {
         state.audioUrl = savedAudioUrl;
     }
-    addLog('Settings dimuat dari penyimpanan browser', 'info');
+    addLog('Settings loaded from browser storage', 'info');
 }
 
 // --- Websocket Streaming functions ---
@@ -286,7 +280,7 @@ function connectWebSocket(cameraIndex) {
         state.cameraWebSockets[cameraIndex] = ws;
         
         ws.onopen = () => {
-            addLog(`Menghubungkan ke Kamera ${cameraIndex + 1}`, 'info');
+            addLog(`Connecting to Camera ${cameraIndex + 1}`, 'info');
             
             ws.send(JSON.stringify({
                 type: 'start_stream',
@@ -310,7 +304,7 @@ function connectWebSocket(cameraIndex) {
         };
         
         ws.onclose = () => {
-            addLog(`Kamera ${cameraIndex + 1} terputus.`, 'warning');
+            addLog(`Camera ${cameraIndex + 1} disconnected.`, 'warning');
             
             const ctx = DOMElements.contexts[cameraIndex];
             if (ctx) ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -321,17 +315,17 @@ function connectWebSocket(cameraIndex) {
             
             state.isStreaming = state.cameraWebSockets.some(ws => ws !== null);
             if (!state.isStreaming) {
-                addLog("Semua streams terputus.", 'danger');
+                addLog("All streams disconnected.", 'danger');
             }
         };
         
         ws.onerror = (error) => {
             console.error(`WebSocket Error for Camera ${cameraIndex + 1}:`, error);
-            addLog(`Koneksi gagal untuk Kamera ${cameraIndex + 1}.`, 'danger');
+            addLog(`Connection failed for Camera ${cameraIndex + 1}.`, 'danger');
         };
     } catch (error) {
         console.error(`Failed to create WebSocket for Camera ${cameraIndex + 1}:`, error);
-        addLog(`Gagal terhubung ke Kamera ${cameraIndex + 1}.`, 'danger');
+        addLog(`Failed to connect to Camera ${cameraIndex + 1}.`, 'danger');
     }
 }
 
@@ -380,8 +374,7 @@ function handleTextMessage(data, cameraIndex) {
                 const hasAlerted = state.lastInactiveAlert[cameraId];
 
                 if (isAboveThreshold && !hasAlerted){
-                    const message = `Camera ${cameraId}: <strong> Persentase ayam tidak aktif cukup tinggi (${percent}%) </strong>`;
-
+                    const message = `Camera ${cameraId}: <strong> Inactive chicken percentage is high (${percent}%) </strong>`;
                     addLog(message, "danger");
                     state.lastInactiveAlert[cameraId] = true;
                 }
@@ -403,7 +396,7 @@ function handleTextMessage(data, cameraIndex) {
 }
 
 function startAllStreams() {
-    addLog("Mencoba memulai semua stream yang terkonfigurasi...", 'info');
+    addLog("Attempting to start all configured streams...", 'info');
     
     for (let i = 0; i < 4; i++) {
         setTimeout(() => connectWebSocket(i), i * 100);
@@ -419,7 +412,7 @@ function startAllStreams() {
 }
 
 function stopAllStreams() {
-    addLog("Menghentikan semua stream...", 'warning');
+    addLog("Stopping all streams...", 'warning');
     
     state.cameraWebSockets.forEach((ws, index) => {
         if (ws) {
@@ -459,20 +452,19 @@ async function fetchLatestAudioResult() {
         state.lastAudioResultKey = resultKey;
 
         if (wasAnalyzing){
-            addLog("Hasil vokalisasi diperbarui", "info");
+            addLog("Vocalization results updated", "info");
             state.isAnalyzingAudio = false;
             state.lastAnalysisTimestamp = new Date();
         }else{
-            addLog("Hasil vokalisasi tersedia", "info");
+            addLog("Vocalization results available", "info");
         }
 
-
         displayAudioResults(audioData);
     } catch (error) {
         console.error("Error fetching audio result:", error);
         
         if (state.isAnalyzingAudio){
-            addLog("Analisis audio gagal", "danger");
+            addLog("Audio analysis failed", "danger");
             state.isAnalyzingAudio = false;
         }
     }
@@ -484,7 +476,7 @@ async function downloadCSV() {
     const cameraId = DOMElements.cameraSelect.value;
     
     if (!start || !end) {
-        addLog("Silakan pilih tanggal mulai dan tanggal selesai untuk ekspor.", 'warning');
+        addLog("Please select a start and end date for export.", 'warning');
         return;
     }
     
@@ -536,13 +528,14 @@ function handleToggleControlClick(e) {
     updateToggleButtons();
 
     const labelMap = {
-        show_detected: 'Deteksi',
-        show_density: 'Kepadatan',
-        show_inactive: 'Inaktivitas'
+        show_detected: 'Detection',
+        show_density: 'Density',
+        show_inactive: 'Inactivity'
     };
 
     const displayName = labelMap[control] || control;
-    addLog(`Tampilan diperbarui: ${displayName} ${state[control] ? 'dinyalakan' : 'dimatikan'}`, 'info');
+    const status = state[control] ? 'enabled' : 'disabled';
+    addLog(`View updated: ${displayName} ${status}`, 'info');
 
     const payload = JSON.stringify({
         type: 'display_settings_update',
@@ -559,7 +552,7 @@ function handleToggleControlClick(e) {
 }
 
 function handleSettingsButtonClick() {
-    addLog('Tip: Double-click pada ikon gear untuk membuka setting kamera.', 'info');
+    addLog('Tip: Double-click the gear icon to open camera settings.', 'info');
 }
 
 function handleSettingsButtonDoubleClick() {
@@ -577,13 +570,13 @@ function handleSaveSettingsClick() {
     try {
         localStorage.setItem('chickSenseCameraUrls', JSON.stringify(state.cameraUrls));
         localStorage.setItem('chickSenseAudioUrl', state.audioUrl);
-        addLog('Pengaturan disimpan ke penyimpanan peramban.', 'info');
+        addLog('Settings saved to browser storage.', 'info');
     } catch (e) {
         console.error("Failed to save settings to local storage:", e);
-        addLog('Tidak dapat menyimpan pengaturan.', 'danger');
+        addLog('Could not save settings.', 'danger');
     }
 
-    addLog('Pengaturan disimpan. Memulai ulang aliran...', 'info');
+    addLog('Settings saved. Restarting streams...', 'info');
     closeModal(DOMElements.settingsModal);
     
     stopAllStreams();
@@ -596,7 +589,7 @@ function handleStopStreamsClick() {
 }
 
 function handleExportButtonClick() {
-    addLog('Tip: Double-click pada "Export CSV" untuk mengekspor metric ke CSV.', 'info');
+    addLog('Tip: Double-click "Export CSV" to export metrics to a CSV file.', 'info');
 }
 
 function handleExportButtonDoubleClick() {
@@ -669,7 +662,7 @@ function initialize() {
     
     setInterval(updateDateTime, 30000); 
     
-    addLog('Sistem diinisialisasi. Selamat datang! IKGC', 'info');
+    addLog('System initialized. Welcome! IKGC', 'info');
     startAllStreams();
 }
 
@@ -677,6 +670,4 @@ if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initialize);
 } else {
     initialize();
-}
-
-
+}