2.7 KiB
2.7 KiB
<html lang="en-GB">
<head>
<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>
Upload
<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 = []; // 업로드된 데이터를 관리
// 파일 업로드 이벤트 처리
uploadForm.addEventListener('submit', (event) => {
event.preventDefault();
const audioFiles = Array.from(audioInput.files);
const jsonFiles = Array.from(jsonInput.files);
// 데이터 생성
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`
${transcripts.map(
transcript => html`
`
)}
`,
demoContainer
);
}
// 초기 렌더링
renderTranscripts();
</script>
</html>
Dynamic Whisper Transcript
Upload