chan/whisper-transcript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

컬럼뷰 수정

Browse Source
This commit is contained in:
Chan
2025-01-09 11:16:52 +09:00
parent 382cd1fa57
commit f98166d4c9
3 changed files with 99 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
demo/index.html
View File

@@ -2,34 +2,33 @@
<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;
table {
border-collapse: collapse;
width: 100%;
}
td {
vertical-align: top;
border: 1px solid #666;
padding: 8px;
width: 50%;
}
</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>
<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">
@@ -40,47 +39,83 @@
const uploadForm = document.getElementById('uploadForm');
const audioInput = document.getElementById('audioInput');
const jsonInput = document.getElementById('jsonInput');
let transcripts = []; // 업로드된 <whisper-transcript> 데이터를 관리
// 파일 업로드 이벤트 처리
// 최대 2개만 표시한다고 가정
let transcripts = [];
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',
});
if (transcripts.length < 2) {
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>
`
)}
<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
);