Spaces:
Running
Running
| <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">×</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> | |