94 lines
2.7 KiB
HTML
94 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<style>
|
|
body {
|
|
background: #fafafa;
|
|
font-size: 1.5em;
|
|
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
|
|
margin: 5% 10% 5% 10%;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
input[type="file"] {
|
|
margin: 1em 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<h1>Dynamic Whisper Transcript</h1>
|
|
<!-- 파일 업로드 폼 -->
|
|
<form id="uploadForm">
|
|
<label for="audioInput">Upload Audio (.mp3):</label>
|
|
<input type="file" id="audioInput" accept=".mp3" multiple><br>
|
|
<label for="jsonInput">Upload JSON (.json):</label>
|
|
<input type="file" id="jsonInput" accept=".json" multiple><br>
|
|
<button type="submit">Upload</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="demo"></div>
|
|
|
|
<script type="module">
|
|
import { html, render } from 'lit';
|
|
import '../whisper-transcript.js';
|
|
|
|
const demoContainer = document.querySelector('#demo');
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
const audioInput = document.getElementById('audioInput');
|
|
const jsonInput = document.getElementById('jsonInput');
|
|
let transcripts = []; // 업로드된 <whisper-transcript> 데이터를 관리
|
|
|
|
// 파일 업로드 이벤트 처리
|
|
uploadForm.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
const audioFiles = Array.from(audioInput.files);
|
|
const jsonFiles = Array.from(jsonInput.files);
|
|
|
|
// <whisper-transcript> 데이터 생성
|
|
audioFiles.forEach(audioFile => {
|
|
const matchingJson = jsonFiles.find(jsonFile =>
|
|
jsonFile.name.replace('.json', '') === audioFile.name.replace('.mp3', '')
|
|
);
|
|
|
|
transcripts.push({
|
|
audio: audioFile.name,
|
|
url: matchingJson ? matchingJson.name : 'No JSON provided',
|
|
});
|
|
});
|
|
|
|
// 렌더링 업데이트
|
|
renderTranscripts();
|
|
|
|
// 입력 초기화
|
|
audioInput.value = '';
|
|
jsonInput.value = '';
|
|
});
|
|
|
|
// Lit으로 동적 렌더링
|
|
function renderTranscripts() {
|
|
render(
|
|
html`
|
|
<tooltip-color-guide></tooltip-color-guide>
|
|
${transcripts.map(
|
|
transcript => html`
|
|
<whisper-transcript
|
|
audio="${transcript.audio}"
|
|
url="${transcript.url}">
|
|
</whisper-transcript>
|
|
`
|
|
)}
|
|
`,
|
|
demoContainer
|
|
);
|
|
}
|
|
|
|
// 초기 렌더링
|
|
renderTranscripts();
|
|
</script>
|
|
</body>
|
|
</html>
|