hiep200311
adc1934e9c
- Disable Flask default /static/ folder (static_folder=None in app.py) - Add headerRoute blueprint to serve views/header/ at /assets/header/ - Configure transcription and scraper blueprints with static_folder pointing to their respective views/ subfolders - Inline header HTML directly in headerLoader.js (remove fetch call) - Update all HTML templates to use new /assets/... URLs
112 lines
4.1 KiB
HTML
112 lines
4.1 KiB
HTML
<!-- views/transcriptionPages/transcriptionMain.html -->
|
|
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Phiên Âm</title>
|
|
<link rel="stylesheet" href="https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium" />
|
|
<link rel="stylesheet" href="https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg" />
|
|
<link rel="stylesheet" href="/assets/transcription/transcriptionMain.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="upload-view">
|
|
<h1>Phiên Âm Whisper</h1>
|
|
<p class="subtitle">
|
|
Tải lên tệp video hoặc âm thanh để nhận bản phiên âm bằng AI (không
|
|
giới hạn kích thước)
|
|
</p>
|
|
|
|
<div class="upload-area" id="uploadArea">
|
|
<span class="upload-icon">↑</span>
|
|
<h3>Nhấp hoặc kéo & thả tệp vào đây</h3>
|
|
<p>
|
|
Hỗ trợ MP4, AVI, MOV, MKV, MP3, WAV, M4A (không giới hạn kích thước)
|
|
</p>
|
|
<input
|
|
type="file"
|
|
id="fileInput"
|
|
class="file-input"
|
|
accept=".mp4,.avi,.mov,.mkv,.mp3,.wav,.m4a"
|
|
/>
|
|
</div>
|
|
|
|
<div class="language-select">
|
|
<label
|
|
><input type="radio" name="language" value="en" checked /> Tiếng
|
|
Anh</label
|
|
>
|
|
<label
|
|
><input type="radio" name="language" value="vi" /> Tiếng Việt</label
|
|
>
|
|
<label
|
|
><input type="radio" name="language" value="auto" /> Tự động nhận
|
|
diện</label
|
|
>
|
|
</div>
|
|
|
|
<div class="model-select">
|
|
<label
|
|
>Model Whisper:
|
|
<select id="modelSelect">
|
|
<option value="tiny">Tiny (nhanh nhất, độ chính xác thấp)</option>
|
|
<option value="base">
|
|
Base (nhanh, độ chính xác trung bình)
|
|
</option>
|
|
<option value="small">Small (cân bằng)</option>
|
|
<option value="medium" selected>
|
|
Medium (độ chính xác cao, chậm hơn)
|
|
</option>
|
|
<option value="large">
|
|
Large (độ chính xác cao nhất, chậm nhất)
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="fileInfo" class="file-info"></div>
|
|
<button class="btn" id="uploadBtn" style="display: none">
|
|
Bắt Đầu Phiên Âm
|
|
</button>
|
|
|
|
<div class="progress-container" id="progressContainer">
|
|
<h3>Đang tải lên và xử lý...</h3>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<div class="upload-progress-bar">
|
|
<div class="upload-progress-fill" id="uploadProgressFill"></div>
|
|
</div>
|
|
<div class="progress-text" id="progressText">Đang khởi động...</div>
|
|
</div>
|
|
|
|
<div class="result-area" id="resultArea">
|
|
<div class="result-label">Phiên âm hoàn tất</div>
|
|
<div class="result-preview" id="transcriptPreview"></div>
|
|
<button class="btn" id="viewFullBtn">Xem Toàn Bộ</button>
|
|
<button class="btn btn-outline" id="downloadBtn">
|
|
Tải Xuống TXT
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transcript-view">
|
|
<h1>Kết Quả Phiên Âm</h1>
|
|
<div class="meta">
|
|
<strong>Tệp:</strong> {{ filename }}<br />
|
|
<strong>Mã công việc:</strong> {{ job_id }}
|
|
</div>
|
|
<div class="nav-buttons">
|
|
<a href="/" class="btn btn-outline">← Quay lại</a>
|
|
<a href="/transcript/{{ job_id }}" class="btn">Tải Xuống TXT</a>
|
|
</div>
|
|
<div class="transcript-content">{{ content }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/transcription/transcriptionMain.js"></script>
|
|
<script src="/assets/header/headerLoader.js?v=1.1"></script>
|
|
</body>
|
|
</html>
|