Deploy Typhoon Video Transcriber

README.md

@@ -0,0 +1,51 @@
+---
+title: Typhoon Video Transcriber
+emoji: 🌀
+colorFrom: indigo
+colorTo: purple
+sdk: static
+pinned: false
+---
+
+# Typhoon Video Transcriber
+
+แอปพลิเคชันถอดความวิดีโอ (Speech-to-Text) อัจฉริยะในเบราว์เซอร์ ทำงานร่วมกับโมเดลภาษาประมวลผลเสียงภาษาไทยประสิทธิภาพสูงของ **OpenTyphoon ASR API** (SCB 10X)
+
+## คุณสมบัติเด่น
+1. **แยกเสียงในบราว์เซอร์ (Client-side Extraction):** ถอดรหัสและแยกสัญญาณเสียงออกจากไฟล์วิดีโอโดยตรงด้วย Web Audio API โดยไม่ต้องอัปโหลดวิดีโอทั้งไฟล์ขึ้นเซิร์ฟเวอร์ส่วนกลาง
+2. **แปลงไฟล์เสียงแบบอะซิงโครนัส (Web Worker WAV Encoder):** แปลงเสียงเป็นรูปแบบ `16-bit Mono WAV 16kHz` ผ่าน Web Worker เบื้องหลัง เพื่อคงความลื่นไหลของหน้าจอ UI แม้ไฟล์วิดีโอมีขนาดใหญ่
+3. **อินเตอร์เฟสอินเตอร์แอคทีฟ (Interactive Timeline Sync):** ไฮไลต์ประโยคตามวิดีโอที่กำลังเล่นอยู่แบบ Real-time และสามารถคลิกที่ประโยคเพื่อสั่งการให้ตัวเล่นวิดีโอข้ามไปยังส่วนนั้น ๆ ได้ทันที
+4. **ค้นหาข้อความ (Text Search):** ระบบค้นหาคำและประโยคพร้อมไฮไลต์คำพ้องแบบทันที
+5. **ฟังก์ชันการ Export:** ดาวน์โหลดสคริปต์ที่ได้ออกมาเป็นไฟล์ Text (.txt), SRT Subtitles (.srt), VTT Subtitles (.vtt) และ JSON (.json)
+6. **API Key Security & Default:** บันทึกข้อมูลคีย์ใน `localStorage` ของเบราว์เซอร์ของคุณ และเชื่อมต่อโดยตรงกับ OpenTyphoon API เท่านั้น ปราศจากการดักจับหรือเก็บข้อมูลผ่านเซิร์ฟเวอร์ภายนอก
+
+---
+
+## ขั้นตอนการติดตั้งและรันโปรแกรม
+
+แอปพลิเคชันนี้ออกแบบมาให้ไม่มี Dependency ภายนอกใด ๆ สามารถเริ่มทำงานได้ทันทีด้วย Node.js:
+
+1. เปิด Terminal หรือ PowerShell ในโฟลเดอร์นี้
+2. รันคำสั่งเริ่มเซิร์ฟเวอร์:
+   ```bash
+   node server.js
+   ```
+3. เปิดเว็บเบราว์เซอร์แล้วเข้าใช้งานที่ลิงก์ด้านล่าง:
+   [http://localhost:3000](http://localhost:3000)
+
+---
+
+## การเตรียมคีย์ OpenTyphoon API
+- ระบบได้รับการตั้งค่าเริ่มต้นด้วย API Key ของคุณที่ให้มาเรียบร้อยแล้ว
+- หากต้องการเปลี่ยนหรืออัปเดต API Key:
+  1. คลิกปุ่ม **"ตั้งค่า API"** ที่แถบเมนูด้านขวาบน
+  2. ใส่ API Key ของคุณในช่องกรอกข้อมูลแล้วกดบันทึก
+
+---
+
+## ขั้นตอนการใช้งาน
+1. **อัปโหลดวิดีโอ:** ลากไฟล์วิดีโอของคุณมาวางที่กล่องอัปโหลด หรือกดเพื่อเลือกไฟล์จากเครื่อง
+2. **เริ่มต้นถอดสคริปต์:** 
+   - กดปุ่ม **"ถอดความด้วย Typhoon AI"** เพื่อทำการถอดเสียงจริง
+   - หรือกดปุ่ม **"ทดลองใช้ระบบพรีวิว (Demo Mode)"** หากต้องการทดสอบระบบนำทาง ข้อความไฮไลต์ และการ Export โดยไม่ตัดโควต้า API จริง
+3. **ดาวน์โหลดข้อมูล:** คลิกที่ปุ่ม **"ดาวน์โหลด (Export)"** และเลือกฟอร์แมตไฟล���ที่ต้องการบันทึกเก็บไว้ใช้งาน

app.js

@@ -0,0 +1,672 @@
+// App State Management
+const state = {
+  videoFile: null,
+  videoUrl: null,
+  audioBuffer: null,
+  wavBlob: null,
+  transcriptData: null,
+  isProcessing: false,
+  isDemoMode: false,
+  currentActiveIndex: -1,
+  apiKey: localStorage.getItem('typhoon_api_key') || 'sk-9gvN1OPfmjUnnBxWTrcLSe5viRBPyzOSdTuR6zaL5HuxRSS6',
+  model: localStorage.getItem('typhoon_model') || 'typhoon-asr-realtime',
+  language: localStorage.getItem('typhoon_language') || ''
+};
+
+// UI Elements
+const els = {
+  uploadZone: document.getElementById('uploadZone'),
+  fileInput: document.getElementById('fileInput'),
+  videoContainer: document.getElementById('videoContainer'),
+  videoPlayer: document.getElementById('videoPlayer'),
+  settingsBtn: document.getElementById('settingsBtn'),
+  settingsPanel: document.getElementById('settingsPanel'),
+  closeSettings: document.getElementById('closeSettings'),
+  apiKeyInput: document.getElementById('apiKey'),
+  modelSelect: document.getElementById('modelSelect'),
+  languageSelect: document.getElementById('languageSelect'),
+  saveSettings: document.getElementById('saveSettings'),
+  
+  transcribeBtn: document.getElementById('transcribeBtn'),
+  demoBtn: document.getElementById('demoBtn'),
+  loadingOverlay: document.getElementById('loadingOverlay'),
+  loadingStatus: document.getElementById('loadingStatus'),
+  loadingProgress: document.getElementById('loadingProgress'),
+  progressBarFill: document.getElementById('progressBarFill'),
+  
+  mainDashboard: document.getElementById('mainDashboard'),
+  transcriptPanel: document.getElementById('transcriptPanel'),
+  fullTextContent: document.getElementById('fullTextContent'),
+  segmentsList: document.getElementById('segmentsList'),
+  searchTranscript: document.getElementById('searchTranscript'),
+  
+  tabText: document.getElementById('tabText'),
+  tabSegments: document.getElementById('tabSegments'),
+  panelText: document.getElementById('panelText'),
+  panelSegments: document.getElementById('panelSegments'),
+  
+  exportBtn: document.getElementById('exportBtn'),
+  exportMenu: document.getElementById('exportMenu'),
+  exportTxt: document.getElementById('exportTxt'),
+  exportSrt: document.getElementById('exportSrt'),
+  exportVtt: document.getElementById('exportVtt'),
+  exportJson: document.getElementById('exportJson'),
+  
+  fileInfo: document.getElementById('fileInfo'),
+  fileName: document.getElementById('fileName'),
+  fileSize: document.getElementById('fileSize')
+};
+
+// Initialize Application
+function init() {
+  setupEventListeners();
+  loadSettings();
+  
+  // Set default api key if present
+  if (state.apiKey) {
+    els.apiKeyInput.value = state.apiKey;
+  }
+}
+
+// Load configurations from state
+function loadSettings() {
+  els.apiKeyInput.value = state.apiKey;
+  els.modelSelect.value = state.model;
+  els.languageSelect.value = state.language;
+}
+
+// Setup Event Listeners
+function setupEventListeners() {
+  // Drag and Drop
+  els.uploadZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    els.uploadZone.classList.add('dragover');
+  });
+
+  els.uploadZone.addEventListener('dragleave', () => {
+    els.uploadZone.classList.remove('dragover');
+  });
+
+  els.uploadZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    els.uploadZone.classList.remove('dragover');
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('video/')) {
+      handleVideoSelect(file);
+    } else {
+      showNotification('กรุณาเลือกไฟล์วิดีโอเท่านั้น', 'error');
+    }
+  });
+
+  els.uploadZone.addEventListener('click', () => {
+    els.fileInput.click();
+  });
+
+  els.fileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      handleVideoSelect(file);
+    }
+  });
+
+  // Settings Panel
+  els.settingsBtn.addEventListener('click', () => {
+    els.settingsPanel.classList.toggle('open');
+  });
+
+  els.closeSettings.addEventListener('click', () => {
+    els.settingsPanel.classList.remove('open');
+  });
+
+  els.saveSettings.addEventListener('click', () => {
+    state.apiKey = els.apiKeyInput.value.trim();
+    state.model = els.modelSelect.value;
+    state.language = els.languageSelect.value;
+    
+    localStorage.setItem('typhoon_api_key', state.apiKey);
+    localStorage.setItem('typhoon_model', state.model);
+    localStorage.setItem('typhoon_language', state.language);
+    
+    els.settingsPanel.classList.remove('open');
+    showNotification('บันทึกการตั้งค่าแล้ว', 'success');
+  });
+
+  // Transcription Controls
+  els.transcribeBtn.addEventListener('click', () => startTranscriptionFlow(false));
+  els.demoBtn.addEventListener('click', () => startTranscriptionFlow(true));
+
+  // Tab Navigation
+  els.tabText.addEventListener('click', () => switchTab('text'));
+  els.tabSegments.addEventListener('click', () => switchTab('segments'));
+
+  // Video Timeupdate for Interactive Transcript Sync
+  els.videoPlayer.addEventListener('timeupdate', syncTranscriptHighlight);
+
+  // Search Transcript
+  els.searchTranscript.addEventListener('input', handleSearch);
+
+  // Export Dropdown
+  els.exportBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    els.exportMenu.classList.toggle('show');
+  });
+
+  document.addEventListener('click', () => {
+    els.exportMenu.classList.remove('show');
+  });
+
+  els.exportTxt.addEventListener('click', () => exportTranscript('txt'));
+  els.exportSrt.addEventListener('click', () => exportTranscript('srt'));
+  els.exportVtt.addEventListener('click', () => exportTranscript('vtt'));
+  els.exportJson.addEventListener('click', () => exportTranscript('json'));
+}
+
+// Handle File Selection
+function handleVideoSelect(file) {
+  state.videoFile = file;
+  
+  // Format file size
+  const sizeMB = (file.size / (1024 * 1024)).toFixed(1);
+  els.fileName.textContent = file.name;
+  els.fileSize.textContent = `${sizeMB} MB`;
+  
+  if (file.size > 200 * 1024 * 1024) {
+    showNotification('ไฟล์มีขนาดใหญ่กว่า 200MB การประมวลผลเสียงในเบราว์เซอร์อาจใช้เวลานานขึ้น', 'warning');
+  }
+
+  // Create Video URL and load it
+  if (state.videoUrl) {
+    URL.revokeObjectURL(state.videoUrl);
+  }
+  state.videoUrl = URL.createObjectURL(file);
+  els.videoPlayer.src = state.videoUrl;
+  
+  // Reset previous data
+  state.transcriptData = null;
+  state.audioBuffer = null;
+  state.wavBlob = null;
+  els.mainDashboard.classList.add('hidden');
+  els.fileInfo.classList.remove('hidden');
+  els.videoContainer.classList.remove('hidden');
+  
+  showNotification('โหลดไฟล์วิดีโอสำเร็จ', 'success');
+}
+
+// Switch between full text and interactive segments tabs
+function switchTab(tabType) {
+  if (tabType === 'text') {
+    els.tabText.classList.add('active');
+    els.tabSegments.classList.remove('active');
+    els.panelText.classList.remove('hidden');
+    els.panelSegments.classList.add('hidden');
+  } else {
+    els.tabText.classList.remove('active');
+    els.tabSegments.classList.add('active');
+    els.panelText.classList.add('hidden');
+    els.panelSegments.classList.remove('hidden');
+  }
+}
+
+// Flow Manager: Audio Extraction -> Worker Encoding -> ASR API Call
+async function startTranscriptionFlow(isDemo = false) {
+  if (!state.videoFile) {
+    showNotification('กรุณาอัปโหลดไฟล์วิดีโอก่อน', 'error');
+    return;
+  }
+
+  if (!isDemo && !state.apiKey) {
+    els.settingsPanel.classList.add('open');
+    showNotification('กรุณากรอก Typhoon API Key ในหน้าการตั้งค่าก่อนเริ่มถอดความ', 'warning');
+    return;
+  }
+
+  state.isDemoMode = isDemo;
+  state.isProcessing = true;
+  updateLoadingUI('เริ่มกระบวนการ...', 0);
+  els.loadingOverlay.classList.remove('hidden');
+
+  try {
+    // 1. Extract audio
+    updateLoadingUI('กำลังสกัดสัญญาณเสียงจากไฟล์วิดีโอ...', 15);
+    const audioBuffer = await extractAudioFromVideo(state.videoFile);
+    state.audioBuffer = audioBuffer;
+
+    // 2. Encode to WAV
+    updateLoadingUI('กำลังแปลงสัญญาณเสียงเป็น 16kHz WAV...', 40);
+    const wavBlob = await encodeAudioToWav(audioBuffer);
+    state.wavBlob = wavBlob;
+
+    // 3. Call Typhoon API
+    if (isDemo) {
+      updateLoadingUI('จำลองการเรียกใช้งาน Typhoon AI (Demo Mode)...', 80);
+      await delay(1500); // Simulate API latency
+      state.transcriptData = generateDemoTranscript(els.videoPlayer.duration || 20);
+    } else {
+      updateLoadingUI('กำลังส่งไฟล์เสียงไปประมวลผลที่ Typhoon AI ASR...', 70);
+      const transcript = await callTyphoonASR(wavBlob);
+      state.transcriptData = transcript;
+    }
+
+    // 4. Render results
+    renderTranscript(state.transcriptData);
+    els.mainDashboard.classList.remove('hidden');
+    showNotification('ถอดความวิดีโอสำเร็จ!', 'success');
+  } catch (error) {
+    console.error(error);
+    showNotification(`เกิดข้อผิดพลาด: ${error.message}`, 'error');
+  } finally {
+    state.isProcessing = false;
+    els.loadingOverlay.classList.add('hidden');
+  }
+}
+
+// Update loader screen text and bar width
+function updateLoadingUI(statusText, progressPercent) {
+  els.loadingStatus.textContent = statusText;
+  els.progressBarFill.style.width = `${progressPercent}%`;
+  els.loadingProgress.textContent = `${progressPercent}%`;
+}
+
+// Web Audio API: Extract audio from video blob
+async function extractAudioFromVideo(file) {
+  const fileReader = new FileReader();
+  
+  const arrayBufferPromise = new Promise((resolve, reject) => {
+    fileReader.onload = () => resolve(fileReader.result);
+    fileReader.onerror = () => reject(new Error('ไม่สามารถอ่านไฟล์วิดีโอได้'));
+  });
+  
+  fileReader.readAsArrayBuffer(file);
+  const arrayBuffer = await arrayBufferPromise;
+
+  // Use AudioContext to decode
+  const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+  const audioCtx = new AudioContextClass();
+  
+  try {
+    return await audioCtx.decodeAudioData(arrayBuffer);
+  } catch (e) {
+    throw new Error('ไม่สามารถถอดรหัสเสียงจากวิดีโอนี้ได้ (บราวเซอร์ไม่รองรับ Codec นี้)');
+  } finally {
+    audioCtx.close();
+  }
+}
+
+// Web Worker Helper: Encode AudioBuffer to WAV
+function encodeAudioToWav(audioBuffer) {
+  return new Promise((resolve, reject) => {
+    const channelData = audioBuffer.getChannelData(0); // Mono channel
+    const sampleRate = audioBuffer.sampleRate;
+
+    // Load web worker
+    const worker = new Worker('wav-worker.js');
+    
+    worker.postMessage({
+      channelData: channelData,
+      sampleRate: sampleRate
+    });
+
+    worker.onmessage = function(e) {
+      const data = e.data;
+      if (data.type === 'progress') {
+        // Map progress from worker into loader progress (40% to 70% range)
+        const mappedProgress = Math.round(40 + (data.progress * 0.3));
+        updateLoadingUI(`แปลงสัญญาณเสียงเป็น 16kHz WAV (${data.status === 'downsampling' ? 'Downsampling' : 'Encoding'})...`, mappedProgress);
+      } else if (data.type === 'done') {
+        const blob = new Blob([data.buffer], { type: 'audio/wav' });
+        worker.terminate();
+        resolve(blob);
+      } else if (data.type === 'error') {
+        worker.terminate();
+        reject(new Error(data.message));
+      }
+    };
+
+    worker.onerror = function(err) {
+      worker.terminate();
+      reject(new Error('เกิดความล้มเหลวในการทำงานของ Web Worker'));
+    };
+  });
+}
+
+// Call OpenTyphoon Speech-To-Text API
+async function callTyphoonASR(wavBlob) {
+  const formData = new FormData();
+  formData.append('file', wavBlob, 'audio.wav');
+  formData.append('model', state.model);
+  formData.append('response_format', 'verbose_json');
+  
+  if (state.language) {
+    formData.append('language', state.language);
+  }
+
+  const url = 'https://api.opentyphoon.ai/v1/audio/transcriptions';
+  const headers = {
+    'Authorization': `Bearer ${state.apiKey}`
+  };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: headers,
+    body: formData
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    let errorJson;
+    try {
+      errorJson = JSON.parse(errorText);
+    } catch(e) {}
+    const msg = errorJson?.error?.message || errorText || `HTTP ${response.status}`;
+    throw new Error(`การสื่อสารกับ API ล้มเหลว: ${msg}`);
+  }
+
+  return await response.json();
+}
+
+// Generate high-quality mock data for demo mode
+function generateDemoTranscript(duration) {
+  const baseSegments = [
+    { text: "สวัสดีครับ ยินดีต้อนรับสู่แอปพลิเคชันถอดสคริปต์วิดีโอด้วยเทคโนโลยี AI จาก Typhoon" },
+    { text: "โดยแอปพลิเคชันนี้ทำงานบนเว็บบราวเซอร์ของคุณโดยตรง มีความปลอดภัยสูง และทำงานได้รวดเร็ว" },
+    { text: "คุณสามารถสกัดเสียงจากวิดีโอ แปลงฟอร์แมต และส่งให้โมเดล Typhoon ASR ถอดความออกมา" },
+    { text: "ระบบอินเตอร์แอคทีฟของเราจะไฮไลต์ข้อความประโยคต่างๆ ตามที่กำลังเล่นอยู่ในวิดีโอแบบสดๆ" },
+    { text: "หากคุณต้องการย้อนกลับไปฟังเฉพาะบางคำหรือบางประโยค ก็เพียงแค่คลิกเลือกประโยคนั้นเพื่อรับชมได้ทันที" },
+    { text: "และสุดท้าย คุณยังสามารถดาวน์โหลดเอกสารเก็บไว้ใช้งานต่อได้ ไม่ว่าจะเป็นรูปแบบไฟล์ Text ธรรมดา หรือ ซับไตเติล SRT และ VTT" }
+  ];
+
+  const count = baseSegments.length;
+  const segmentDuration = duration / count;
+  
+  const segments = baseSegments.map((seg, index) => {
+    return {
+      id: index,
+      start: index * segmentDuration,
+      end: (index + 1) * segmentDuration,
+      text: seg.text
+    };
+  });
+
+  const fullText = segments.map(s => s.text).join(' ');
+
+  return {
+    text: fullText,
+    segments: segments
+  };
+}
+
+// Render Transcript results into UI
+function renderTranscript(data) {
+  // Render Full Text
+  els.fullTextContent.innerHTML = `<p>${data.text}</p>`;
+
+  // Render Interactive Segments
+  els.segmentsList.innerHTML = '';
+  
+  if (data.segments && data.segments.length > 0) {
+    data.segments.forEach((seg, index) => {
+      const segmentEl = document.createElement('div');
+      segmentEl.className = 'segment-item';
+      segmentEl.dataset.index = index;
+      segmentEl.dataset.start = seg.start;
+      segmentEl.dataset.end = seg.end;
+      
+      const timeStr = formatTimeShort(seg.start);
+      
+      segmentEl.innerHTML = `
+        <span class="segment-time" title="คลิกเพื่อข้ามวิดีโอไปช่วงเวลานี้">${timeStr}</span>
+        <span class="segment-text" contenteditable="true" spellcheck="false" title="คลิกเพื่อแก้ไขข้อความ">${seg.text}</span>
+      `;
+      
+      // Jump video when clicking on a segment (but not if editing text)
+      segmentEl.addEventListener('click', (e) => {
+        if (e.target.classList.contains('segment-text')) {
+          return; // Avoid jumping video when trying to edit text
+        }
+        els.videoPlayer.currentTime = seg.start;
+        els.videoPlayer.play();
+      });
+
+      const textEl = segmentEl.querySelector('.segment-text');
+
+      // Save changes on blur
+      textEl.addEventListener('blur', () => {
+        const newText = textEl.textContent.trim();
+        if (newText !== seg.text) {
+          seg.text = newText;
+          // Sync with state.transcriptData
+          state.transcriptData.text = state.transcriptData.segments.map(s => s.text).join(' ');
+          els.fullTextContent.innerHTML = `<p>${state.transcriptData.text}</p>`;
+          showNotification('บันทึกการแก้ไขคำถอดความแล้ว', 'success');
+        }
+      });
+
+      // Pressing enter blurs input (saves changes)
+      textEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          textEl.blur();
+        }
+      });
+      
+      els.segmentsList.appendChild(segmentEl);
+    });
+  } else {
+    // If API response doesn't contain segments array, construct single segment
+    els.segmentsList.innerHTML = `
+      <div class="segment-item" data-index="0" data-start="0" data-end="${els.videoPlayer.duration || 10}">
+        <span class="segment-time">00:00</span>
+        <span class="segment-text" contenteditable="true" spellcheck="false" title="คลิกเพื่อแก้ไขข้อความ">${data.text}</span>
+      </div>
+    `;
+
+    const segmentEl = els.segmentsList.querySelector('.segment-item');
+    const textEl = segmentEl.querySelector('.segment-text');
+
+    segmentEl.addEventListener('click', (e) => {
+      if (e.target.classList.contains('segment-text')) return;
+      els.videoPlayer.currentTime = 0;
+      els.videoPlayer.play();
+    });
+
+    textEl.addEventListener('blur', () => {
+      const newText = textEl.textContent.trim();
+      if (newText !== data.text) {
+        data.text = newText;
+        els.fullTextContent.innerHTML = `<p>${newText}</p>`;
+        showNotification('บันทึกการแก้ไขคำถอดความแล้ว', 'success');
+      }
+    });
+
+    textEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        textEl.blur();
+      }
+    });
+  }
+}
+
+// Sync video timeline with highlighted transcript segment
+function syncTranscriptHighlight() {
+  if (!state.transcriptData || !state.transcriptData.segments) return;
+  
+  const currentTime = els.videoPlayer.currentTime;
+  const segments = state.transcriptData.segments;
+  
+  // Find current segment index
+  let activeIndex = -1;
+  for (let i = 0; i < segments.length; i++) {
+    if (currentTime >= segments[i].start && currentTime <= segments[i].end) {
+      activeIndex = i;
+      break;
+    }
+  }
+  
+  // If active segment changed, update classes and scroll
+  if (activeIndex !== state.currentActiveIndex) {
+    state.currentActiveIndex = activeIndex;
+    
+    // Remove active state from all
+    const items = els.segmentsList.querySelectorAll('.segment-item');
+    items.forEach(item => item.classList.remove('active'));
+    
+    if (activeIndex !== -1) {
+      const activeItem = els.segmentsList.querySelector(`.segment-item[data-index="${activeIndex}"]`);
+      if (activeItem) {
+        activeItem.classList.add('active');
+        
+        // Auto scroll segment list to center the active item
+        const containerHeight = els.segmentsList.clientHeight;
+        const itemTop = activeItem.offsetTop;
+        const itemHeight = activeItem.clientHeight;
+        
+        els.segmentsList.scrollTo({
+          top: itemTop - (containerHeight / 2) + (itemHeight / 2),
+          behavior: 'smooth'
+        });
+      }
+    }
+  }
+}
+
+// Handle search functionality inside segments
+function handleSearch(e) {
+  const query = e.target.value.toLowerCase().trim();
+  const items = els.segmentsList.querySelectorAll('.segment-item');
+  
+  items.forEach(item => {
+    const text = item.querySelector('.segment-text').textContent.toLowerCase();
+    if (text.includes(query)) {
+      item.classList.remove('hidden-search');
+      // Highlight matching search term in text
+      if (query !== '') {
+        const originalText = state.transcriptData.segments[item.dataset.index].text;
+        const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
+        item.querySelector('.segment-text').innerHTML = originalText.replace(regex, '<mark class="highlight-mark">$1</mark>');
+      } else {
+        item.querySelector('.segment-text').innerHTML = state.transcriptData.segments[item.dataset.index].text;
+      }
+    } else {
+      item.classList.add('hidden-search');
+    }
+  });
+}
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// Helpers: Time Formatting
+function formatTimeShort(seconds) {
+  const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+  return `${m}:${s}`;
+}
+
+function formatTimeSRT(seconds) {
+  const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
+  const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
+  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+  const ms = Math.floor((seconds % 1) * 1000).toString().padStart(3, '0');
+  return `${h}:${m}:${s},${ms}`;
+}
+
+function formatTimeVTT(seconds) {
+  const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
+  const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
+  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+  const ms = Math.floor((seconds % 1) * 1000).toString().padStart(3, '0');
+  return `${h}:${m}:${s}.${ms}`;
+}
+
+// Export Transcript in diverse formats
+function exportTranscript(format) {
+  if (!state.transcriptData) {
+    showNotification('ไม่มีข้อมูลทรานสคริปต์ให้ดาวน์โหลด', 'error');
+    return;
+  }
+
+  let content = '';
+  let filename = `${state.videoFile ? state.videoFile.name.replace(/\.[^/.]+$/, "") : "transcript"}`;
+  let mimeType = 'text/plain';
+
+  const segments = state.transcriptData.segments || [];
+
+  if (format === 'txt') {
+    content = state.transcriptData.text;
+    filename += '.txt';
+  } else if (format === 'srt') {
+    filename += '.srt';
+    content = segments.map((seg, index) => {
+      return `${index + 1}\n${formatTimeSRT(seg.start)} --> ${formatTimeSRT(seg.end)}\n${seg.text}\n`;
+    }).join('\n');
+  } else if (format === 'vtt') {
+    filename += '.vtt';
+    content = 'WEBVTT\n\n' + segments.map((seg, index) => {
+      return `${index + 1}\n${formatTimeVTT(seg.start)} --> ${formatTimeVTT(seg.end)}\n${seg.text}\n`;
+    }).join('\n');
+  } else if (format === 'json') {
+    filename += '.json';
+    content = JSON.stringify(state.transcriptData, null, 2);
+    mimeType = 'application/json';
+  }
+
+  // Trigger browser download
+  const blob = new Blob([content], { type: `${mimeType};charset=utf-8` });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  
+  showNotification(`ดาวน์โหลดไฟล์ ${format.toUpperCase()} สำเร็จ`, 'success');
+}
+
+// Utility: Show Toast Notifications
+function showNotification(message, type = 'info') {
+  // Check if notification container exists, if not create it
+  let container = document.getElementById('notificationContainer');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'notificationContainer';
+    document.body.appendChild(container);
+  }
+
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  
+  let icon = '🔔';
+  if (type === 'success') icon = '✅';
+  if (type === 'error') icon = '❌';
+  if (type === 'warning') icon = '⚠️';
+
+  toast.innerHTML = `
+    <span class="toast-icon">${icon}</span>
+    <span class="toast-message">${message}</span>
+  `;
+
+  container.appendChild(toast);
+  
+  // Triggers smooth slide in
+  setTimeout(() => toast.classList.add('show'), 10);
+
+  // Remove toast after 4s
+  setTimeout(() => {
+    toast.classList.remove('show');
+    setTimeout(() => {
+      toast.remove();
+    }, 300);
+  }, 4000);
+}
+
+// Delay helper
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// Start the app when content is loaded
+document.addEventListener('DOMContentLoaded', init);

index.css

@@ -0,0 +1,823 @@
+/* Import premium fonts: Outfit for English & Sarabun for Thai */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --bg-primary: #080B11;
+  --bg-secondary: rgba(17, 24, 39, 0.7);
+  --bg-panel: rgba(30, 41, 59, 0.45);
+  --border-color: rgba(255, 255, 255, 0.08);
+  
+  --primary: #6366f1;
+  --primary-glow: rgba(99, 102, 241, 0.35);
+  --primary-hover: #4f46e5;
+  --accent: #8b5cf6;
+  --accent-glow: rgba(139, 92, 246, 0.3);
+  
+  --text-main: #f8fafc;
+  --text-muted: #94a3b8;
+  --text-dark: #64748b;
+  
+  --success: #10b981;
+  --error: #ef4444;
+  --warning: #f59e0b;
+  
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  --font-family: 'Outfit', 'Sarabun', system-ui, -apple-system, sans-serif;
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-primary);
+  background-image: 
+    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%);
+  background-attachment: fixed;
+  color: var(--text-main);
+  font-family: var(--font-family);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+
+/* Header */
+header {
+  backdrop-filter: blur(12px);
+  background: rgba(8, 11, 17, 0.85);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1.25rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.logo-icon {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1.2rem;
+  box-shadow: 0 0 15px var(--primary-glow);
+}
+
+h1 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  background: linear-gradient(to right, #ffffff, #cbd5e1);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Controls & Settings Trigger */
+.header-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  transition: var(--transition-smooth);
+}
+
+.btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  border: none;
+  box-shadow: 0 4px 14px var(--primary-glow);
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px var(--primary-glow);
+  filter: brightness(1.1);
+}
+
+/* Main Container */
+main {
+  flex: 1;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Upload Container */
+.upload-container {
+  background: var(--bg-secondary);
+  border: 2px dashed rgba(99, 102, 241, 0.3);
+  border-radius: 16px;
+  padding: 4rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  backdrop-filter: blur(16px);
+  box-shadow: var(--glass-shadow);
+  transition: var(--transition-smooth);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.upload-container:hover, .upload-container.dragover {
+  border-color: var(--primary);
+  background: rgba(99, 102, 241, 0.05);
+  box-shadow: 0 0 30px rgba(99, 102, 241, 0.15);
+}
+
+.upload-icon {
+  width: 80px;
+  height: 80px;
+  background: rgba(99, 102, 241, 0.1);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary);
+  font-size: 2.2rem;
+  transition: var(--transition-smooth);
+}
+
+.upload-container:hover .upload-icon {
+  transform: scale(1.1);
+  background: rgba(99, 102, 241, 0.2);
+  color: var(--accent);
+}
+
+.upload-text h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.upload-text p {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+/* File Info Bar */
+.file-info-bar {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  animation: fadeIn 0.3s ease;
+}
+
+.file-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.file-icon {
+  font-size: 1.5rem;
+  color: var(--primary);
+}
+
+.file-details h4 {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.file-details span {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* Grid Dashboard */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 2rem;
+  min-height: 550px;
+}
+
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  box-shadow: var(--glass-shadow);
+  backdrop-filter: blur(16px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Video Player Panel */
+.video-panel {
+  padding: 1.25rem;
+}
+
+.video-wrapper {
+  background: #000;
+  border-radius: 10px;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.video-wrapper video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-info {
+  margin-top: 1rem;
+}
+
+.video-info h3 {
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+/* Transcript Panel */
+.transcript-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.transcript-header {
+  padding: 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.search-box {
+  position: relative;
+}
+
+.search-box input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  padding: 0.65rem 1rem 0.65rem 2.2rem;
+  border-radius: 8px;
+  outline: none;
+  transition: var(--transition-smooth);
+}
+
+.search-box input:focus {
+  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.8rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.tab-export-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tabs {
+  display: flex;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  padding: 3px;
+  border: 1px solid var(--border-color);
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 0.85rem;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: var(--transition-smooth);
+}
+
+.tab-btn:hover {
+  color: var(--text-main);
+}
+
+.tab-btn.active {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-main);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Export Dropdown Menu */
+.export-dropdown {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  right: 0;
+  top: 105%;
+  background: #111827;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+  min-width: 160px;
+  z-index: 100;
+  display: none;
+  flex-direction: column;
+  padding: 0.4rem;
+  backdrop-filter: blur(20px);
+  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropdown-menu.show {
+  display: flex;
+}
+
+.dropdown-item {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  padding: 0.6rem 1rem;
+  text-align: left;
+  font-family: var(--font-family);
+  font-size: 0.85rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: var(--transition-smooth);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-main);
+}
+
+/* Transcript Body */
+.transcript-body {
+  flex: 1;
+  padding: 1.25rem;
+  max-height: 480px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Full Text Style */
+#panelText p {
+  line-height: 1.7;
+  font-size: 0.95rem;
+  color: #cbd5e1;
+}
+
+/* Interactive Segments List */
+.segments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.segment-item {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  padding: 0.8rem 2.2rem 0.8rem 1rem;
+  cursor: pointer;
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  transition: var(--transition-smooth);
+  position: relative;
+  overflow: hidden;
+}
+
+.segment-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(99, 102, 241, 0.25);
+  transform: translateX(3px);
+}
+
+.segment-item::after {
+  content: '✏️';
+  position: absolute;
+  right: 0.8rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.8rem;
+  opacity: 0;
+  pointer-events: none;
+  transition: var(--transition-smooth);
+}
+
+.segment-item:hover::after {
+  opacity: 0.4;
+}
+
+.segment-time {
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--primary);
+  font-weight: 600;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-family: 'Outfit', monospace;
+  margin-top: 0.1rem;
+}
+
+.segment-text {
+  flex: 1;
+  line-height: 1.5;
+  font-size: 0.92rem;
+  color: #e2e8f0;
+  outline: none;
+  cursor: text;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: var(--transition-smooth);
+}
+
+.segment-text:focus {
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 0 0 1px var(--primary);
+  color: white;
+}
+
+/* Segment highlighting when playing */
+.segment-item.active {
+  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.04) 100%);
+  border-color: rgba(99, 102, 241, 0.5);
+  box-shadow: inset 3px 0 0 var(--primary);
+}
+
+.segment-item.active .segment-time {
+  background: var(--primary);
+  color: white;
+}
+
+.segment-item.active .segment-text {
+  color: white;
+  font-weight: 500;
+}
+
+/* Highlight Search Mark */
+.highlight-mark {
+  background: rgba(245, 158, 11, 0.25);
+  border-bottom: 2px solid var(--warning);
+  color: #fff;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.hidden-search {
+  display: none !important;
+}
+
+/* Settings Slide Panel */
+.settings-panel {
+  position: fixed;
+  top: 0;
+  right: -380px;
+  width: 380px;
+  height: 100vh;
+  background: #0f172a;
+  border-left: 1px solid var(--border-color);
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-panel.open {
+  right: 0;
+}
+
+.settings-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.settings-header h3 {
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: var(--transition-smooth);
+}
+
+.close-btn:hover {
+  color: white;
+}
+
+.settings-body {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.form-group label {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.form-group input, .form-group select {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  border-radius: 8px;
+  padding: 0.65rem 0.85rem;
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  outline: none;
+  transition: var(--transition-smooth);
+}
+
+.form-group input:focus, .form-group select:focus {
+  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.help-text {
+  font-size: 0.78rem;
+  color: var(--text-dark);
+  line-height: 1.4;
+}
+
+.settings-footer {
+  padding: 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.settings-footer .btn {
+  width: 100%;
+  justify-content: center;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(8, 11, 17, 0.85);
+  backdrop-filter: blur(10px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-card {
+  background: #0f172a;
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  padding: 3rem;
+  width: 90%;
+  max-width: 460px;
+  text-align: center;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.75rem;
+}
+
+/* Sound Wave Animation */
+.sound-wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 60px;
+}
+
+.sound-wave span {
+  width: 5px;
+  height: 15px;
+  background: linear-gradient(to top, var(--primary), var(--accent));
+  border-radius: 4px;
+  animation: wave 1.2s ease-in-out infinite;
+}
+
+.sound-wave span:nth-child(1) { animation-delay: 0.1s; }
+.sound-wave span:nth-child(2) { animation-delay: 0.3s; }
+.sound-wave span:nth-child(3) { animation-delay: 0.5s; }
+.sound-wave span:nth-child(4) { animation-delay: 0.2s; }
+.sound-wave span:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes wave {
+  0%, 100% { height: 12px; }
+  50% { height: 50px; }
+}
+
+.loader-text h3 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.loader-text p {
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  min-height: 1.3rem;
+}
+
+.progress-container {
+  width: 100%;
+}
+
+.progress-bar {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+  height: 6px;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+  position: relative;
+}
+
+.progress-bar-fill {
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  height: 100%;
+  width: 0%;
+  border-radius: 10px;
+  transition: width 0.3s ease;
+  box-shadow: 0 0 10px var(--primary-glow);
+}
+
+.progress-text {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+/* Toast Notifications Container */
+#notificationContainer {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  z-index: 3000;
+  max-width: 380px;
+}
+
+.toast {
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid var(--border-color);
+  backdrop-filter: blur(10px);
+  padding: 0.9rem 1.25rem;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: white;
+  font-size: 0.88rem;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
+  transform: translateX(120%);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toast.show {
+  transform: translateX(0);
+}
+
+.toast-success { border-left: 4px solid var(--success); }
+.toast-error { border-left: 4px solid var(--error); }
+.toast-warning { border-left: 4px solid var(--warning); }
+.toast-info { border-left: 4px solid var(--primary); }
+
+/* Utility Classes */
+.hidden {
+  display: none !important;
+}
+
+/* Keyframes */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Footer */
+footer {
+  text-align: center;
+  padding: 2rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-dark);
+  font-size: 0.8rem;
+  margin-top: auto;
+}

index.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="th">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Typhoon Video Transcriber - ระบบถอดความวิดีโออัจฉริยะ</title>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+
+  <!-- Header -->
+  <header>
+    <div class="logo-container">
+      <div class="logo-icon">🌀</div>
+      <div>
+        <h1>Typhoon Video Transcriber</h1>
+      </div>
+    </div>
+    <div class="header-actions">
+      <button class="btn" id="settingsBtn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+        ตั้งค่า API
+      </button>
+    </div>
+  </header>
+
+  <!-- Main Content -->
+  <main>
+    <!-- Dropzone Upload Area -->
+    <div class="upload-container" id="uploadZone">
+      <div class="upload-icon">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+      </div>
+      <div class="upload-text">
+        <h3>ลากไฟล์วิดีโอมาวางที่นี่</h3>
+        <p>หรือคลิกเพื่อเลือกไฟล์วิดีโอจากคอมพิวเตอร์ของคุณ (รองรับ MP4, WebM)</p>
+      </div>
+      <input type="file" id="fileInput" accept="video/*" class="hidden">
+    </div>
+
+    <!-- Loaded File Info & Run Controls -->
+    <div class="file-info-bar hidden" id="fileInfo">
+      <div class="file-meta">
+        <span class="file-icon">🎬</span>
+        <div class="file-details">
+          <h4 id="fileName">video.mp4</h4>
+          <span id="fileSize">0 MB</span>
+        </div>
+      </div>
+      <div class="action-buttons">
+        <button class="btn btn-primary" id="transcribeBtn">
+          ถอดความด้วย Typhoon AI
+        </button>
+        <button class="btn" id="demoBtn">
+          ทดลองใช้ระบบพรีวิว (Demo Mode)
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Dashboard Grid -->
+    <div class="dashboard-grid hidden" id="mainDashboard">
+      
+      <!-- Video Preview Card -->
+      <div class="card video-panel" id="videoContainer">
+        <div class="video-wrapper">
+          <video id="videoPlayer" controls></video>
+        </div>
+        <div class="video-info">
+          <h3>พรีวิวมัลติมีเดีย</h3>
+          <p class="help-text">คลิกประโยคในทรานสคริปต์ทางขวาเพื่อข้ามเวลาในวิดีโอ</p>
+        </div>
+      </div>
+
+      <!-- Transcript Card -->
+      <div class="card transcript-panel" id="transcriptPanel">
+        <!-- Panel Header -->
+        <div class="transcript-header">
+          <div class="search-box">
+            <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+            <input type="text" id="searchTranscript" placeholder="ค้นหาคำในสคริปต์...">
+          </div>
+          
+          <div class="tab-export-row">
+            <div class="tabs">
+              <button class="tab-btn" id="tabText">ข้อความทั้งหมด</button>
+              <button class="tab-btn active" id="tabSegments">สคริปต์ตามเวลา</button>
+            </div>
+            
+            <div class="export-dropdown">
+              <button class="btn" id="exportBtn">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                ดาวน์โหลด (Export)
+              </button>
+              <div class="dropdown-menu" id="exportMenu">
+                <button class="dropdown-item" id="exportTxt">💾 ข้อความ (.txt)</button>
+                <button class="dropdown-item" id="exportSrt">💾 ซับไตเติล (.srt)</button>
+                <button class="dropdown-item" id="exportVtt">💾 ซับไตเติล (.vtt)</button>
+                <button class="dropdown-item" id="exportJson">💾 โครงสร้าง (.json)</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Panel Body -->
+        <div class="transcript-body">
+          <div id="panelText" class="panel-content hidden">
+            <div id="fullTextContent"></div>
+          </div>
+          
+          <div id="panelSegments" class="panel-content">
+            <div class="segments-list" id="segmentsList"></div>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </main>
+
+  <!-- Slide Settings Panel -->
+  <div class="settings-panel" id="settingsPanel">
+    <div class="settings-header">
+      <h3>ตั้งค่าระบบประมวลผล</h3>
+      <button class="close-btn" id="closeSettings">&times;</button>
+    </div>
+    <div class="settings-body">
+      <div class="form-group">
+        <label for="apiKey">OpenTyphoon API Key</label>
+        <input type="password" id="apiKey" placeholder="sk-...">
+        <p class="help-text">สามารถหาได้จากเว็บบอร์ด OpenTyphoon API Key นี้จะจัดเก็บภายในบราวเซอร์ของคุณเท่านั้น</p>
+      </div>
+
+      <div class="form-group">
+        <label for="modelSelect">โมเดลถอดรหัสเสียง (ASR Model)</label>
+        <select id="modelSelect">
+          <option value="typhoon-asr-realtime">typhoon-asr-realtime (แนะนำ)</option>
+        </select>
+        <p class="help-text">typhoon-asr-realtime เป็นโมเดล ASR ที่เร็วและมีประสิทธิภาพสูงสำหรับภาษาไทย</p>
+      </div>
+
+      <div class="form-group">
+        <label for="languageSelect">บังคับภาษา (Language Input)</label>
+        <select id="languageSelect">
+          <option value="">ตรวจหาอัตโนมัติ (Auto Detect)</option>
+          <option value="th">ภาษาไทย (Thai)</option>
+          <option value="en">ภาษาอังกฤษ (English)</option>
+        </select>
+      </div>
+    </div>
+    <div class="settings-footer">
+      <button class="btn btn-primary" id="saveSettings">บันทึกการตั้งค่า</button>
+    </div>
+  </div>
+
+  <!-- Loading Overlay -->
+  <div class="loading-overlay hidden" id="loadingOverlay">
+    <div class="loader-card">
+      <div class="sound-wave">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div class="loader-text">
+        <h3 id="loadingStatus">กำลังประมวลผล...</h3>
+        <p>กรุณาเปิดหน้านี้ทิ้งไว้ ระบบกำลังถอดความวิดีโอของคุณ</p>
+      </div>
+      <div class="progress-container">
+        <div class="progress-bar">
+          <div class="progress-bar-fill" id="progressBarFill"></div>
+        </div>
+        <div class="progress-text">
+          <span>ความคืบหน้า</span>
+          <span id="loadingProgress">0%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <footer>
+    <p>พัฒนาด้วยความใส่ใจ ร่วมกับโมเดลภาษาและการถอดความเสียงจาก SCB 10X Typhoon AI</p>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>

server.js

@@ -0,0 +1,48 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = 3000;
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'text/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.wav': 'audio/wav',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm'
+};
+
+const server = http.createServer((req, res) => {
+  // Decode URL in case of encoded characters
+  const decodedUrl = decodeURIComponent(req.url);
+  let filePath = path.join(__dirname, decodedUrl === '/' ? 'index.html' : decodedUrl);
+  
+  const ext = path.extname(filePath).toLowerCase();
+  const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+  
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      if (err.code === 'ENOENT') {
+        res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+        res.end('ไม่พบไฟล์ที่ต้องการ (404 Not Found)');
+      } else {
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+        res.end(`ข้อผิดพลาดภายในเซิร์ฟเวอร์: ${err.code}`);
+      }
+    } else {
+      res.writeHead(200, { 'Content-Type': contentType });
+      res.end(data);
+    }
+  });
+});
+
+server.listen(PORT, () => {
+  console.log(`=========================================`);
+  console.log(`🌀 Typhoon Video Transcriber Server Started`);
+  console.log(`👉 Open in browser: http://localhost:${PORT}`);
+  console.log(`=========================================`);
+});

wav-worker.js

@@ -0,0 +1,96 @@
+self.onmessage = function(e) {
+  const { channelData, sampleRate } = e.data;
+  const targetSampleRate = 16000;
+
+  try {
+    // 1. Progress: Downsampling
+    self.postMessage({ type: 'progress', status: 'downsampling', progress: 20 });
+    const downsampled = downsample(channelData, sampleRate, targetSampleRate);
+
+    // 2. Progress: Encoding
+    self.postMessage({ type: 'progress', status: 'encoding', progress: 50 });
+    const wavBuffer = encodeWAV(downsampled, targetSampleRate);
+
+    // 3. Progress: Completed
+    self.postMessage({ type: 'progress', status: 'completed', progress: 100 });
+    self.postMessage({ type: 'done', buffer: wavBuffer }, [wavBuffer]);
+  } catch (error) {
+    self.postMessage({ type: 'error', message: error.message });
+  }
+};
+
+// Simple average-based downsampler for speech recognition
+function downsample(buffer, inputSampleRate, outputSampleRate) {
+  if (inputSampleRate === outputSampleRate) {
+    return buffer;
+  }
+  const sampleRateRatio = inputSampleRate / outputSampleRate;
+  const newLength = Math.round(buffer.length / sampleRateRatio);
+  const result = new Float32Array(newLength);
+  
+  let offsetResult = 0;
+  let offsetBuffer = 0;
+  
+  while (offsetResult < result.length) {
+    const nextOffsetBuffer = Math.round((offsetResult + 1) * sampleRateRatio);
+    let accum = 0;
+    let count = 0;
+    for (let i = offsetBuffer; i < nextOffsetBuffer && i < buffer.length; i++) {
+      accum += buffer[i];
+      count++;
+    }
+    result[offsetResult] = count > 0 ? accum / count : 0;
+    offsetResult++;
+    offsetBuffer = nextOffsetBuffer;
+  }
+  return result;
+}
+
+// Write standard 16-bit PCM WAV file
+function encodeWAV(samples, sampleRate) {
+  const buffer = new ArrayBuffer(44 + samples.length * 2);
+  const view = new DataView(buffer);
+
+  /* RIFF identifier */
+  writeString(view, 0, 'RIFF');
+  /* file length */
+  view.setUint32(4, 36 + samples.length * 2, true);
+  /* RIFF type */
+  writeString(view, 8, 'WAVE');
+  /* format chunk identifier */
+  writeString(view, 12, 'fmt ');
+  /* format chunk length */
+  view.setUint32(16, 16, true);
+  /* sample format (raw PCM) */
+  view.setUint16(20, 1, true);
+  /* channel count */
+  view.setUint16(22, 1, true); // Mono
+  /* sample rate */
+  view.setUint32(24, sampleRate, true);
+  /* byte rate (sample rate * block align) */
+  view.setUint32(28, sampleRate * 2, true);
+  /* block align (channel count * bytes per sample) */
+  view.setUint16(32, 2, true);
+  /* bits per sample */
+  view.setUint16(34, 16, true);
+  /* data chunk identifier */
+  writeString(view, 36, 'data');
+  /* data chunk length */
+  view.setUint32(40, samples.length * 2, true);
+
+  // Write samples
+  const volume = 1.0;
+  let offset = 44;
+  for (let i = 0; i < samples.length; i++, offset += 2) {
+    const s = Math.max(-1, Math.min(1, samples[i]));
+    view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+  }
+
+  return buffer;
+}
+
+function writeString(view, offset, string) {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}