125 lines
3.4 KiB
HTML
125 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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>
|
|
<body>
|
|
<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 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');
|
|
|
|
// 최대 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`
|
|
<tooltip-color-guide></tooltip-color-guide>
|
|
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
${transcripts[0]
|
|
? html`
|
|
<div>Audio File: ${transcripts[0].audio}</div>
|
|
<div>JSON File: ${transcripts[0].url}</div>
|
|
`
|
|
: ''
|
|
}
|
|
</td>
|
|
<td>
|
|
${transcripts[1]
|
|
? html`
|
|
<div>Audio File: ${transcripts[1].audio}</div>
|
|
<div>JSON File: ${transcripts[1].url}</div>
|
|
`
|
|
: ''
|
|
}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
${transcripts[0]
|
|
? html`
|
|
<whisper-transcript
|
|
audio="${transcripts[0].audio}"
|
|
url="${transcripts[0].url}">
|
|
</whisper-transcript>
|
|
`
|
|
: ''
|
|
}
|
|
</td>
|
|
<td>
|
|
${transcripts[1]
|
|
? html`
|
|
<whisper-transcript
|
|
audio="${transcripts[1].audio}"
|
|
url="${transcripts[1].url}">
|
|
</whisper-transcript>
|
|
`
|
|
: ''
|
|
}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
`,
|
|
demoContainer
|
|
);
|
|
}
|
|
renderTranscripts();
|
|
</script>
|
|
</body>
|
|
</html>
|