3.4 KiB
3.4 KiB
<html lang="en-GB">
<head>
<style>
body {
background-color: black;
color: white;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
vertical-align: top;
border: 1px solid #666;
padding: 8px;
width: 50%;
}
</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'); // 최대 2개만 표시한다고 가정 let transcripts = []; uploadForm.addEventListener('submit', (event) => { event.preventDefault(); const audioFiles = Array.from(audioInput.files); const jsonFiles = Array.from(jsonInput.files); audioFiles.forEach(audioFile => { if (transcripts.length < 2) { const matchingJson = jsonFiles.length > 0 ? jsonFiles[0].name : 'No JSON provided'; transcripts.push({ audio: audioFile.name, url: matchingJson }); } }); renderTranscripts(); audioInput.value = ''; jsonInput.value = ''; }); function renderTranscripts() { render( html`
`,
demoContainer
);
}
renderTranscripts();
</script>
</html>
Dynamic Whisper Transcript
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'); // 최대 2개만 표시한다고 가정 let transcripts = []; uploadForm.addEventListener('submit', (event) => { event.preventDefault(); const audioFiles = Array.from(audioInput.files); const jsonFiles = Array.from(jsonInput.files); audioFiles.forEach(audioFile => { if (transcripts.length < 2) { const matchingJson = jsonFiles.length > 0 ? jsonFiles[0].name : 'No JSON provided'; transcripts.push({ audio: audioFile.name, url: matchingJson }); } }); renderTranscripts(); audioInput.value = ''; jsonInput.value = ''; }); function renderTranscripts() { render( html`
|
${transcripts[0]
? html`
Audio File: ${transcripts[0].audio}
JSON File: ${transcripts[0].url}
`
: ''
}
|
${transcripts[1]
? html`
Audio File: ${transcripts[1].audio}
JSON File: ${transcripts[1].url}
`
: ''
}
|
| ${transcripts[0] ? html` ` : '' } | ${transcripts[1] ? html` ` : '' } |