Hugging Face's logo

Spaces:
Janiusx
/
transcript_ai
Running

App Files Community
transcript_ai
File size: 9,049 Bytes
ff7ed83
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!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>