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-08 17:55:58 +09:00
parent e387382951
commit 382cd1fa57
4 changed files with 95 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
demo/index.html
View File

@@ -10,24 +10,84 @@
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
margin: 5% 10% 5% 10%; margin: 5% 10% 5% 10%;
background-color: black; background-color: black;
color: white;
}
input[type="file"] {
margin: 1em 0;
} }
</style> </style>
</head> </head>
<body> <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> <div id="demo"></div>
<script type="module"> <script type="module">
import { html, render } from 'lit'; import { html, render } from 'lit';
import '../whisper-transcript.js'; 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( render(
html` html`
<tooltip-color-guide></tooltip-color-guide> <tooltip-color-guide></tooltip-color-guide>
${transcripts.map(
<whisper-transcript audio="audio.mp3" url="audio.json"></whisper-transcript> transcript => html`
<whisper-transcript
audio="${transcript.audio}"
url="${transcript.url}">
</whisper-transcript>
`
)}
`, `,
document.querySelector('#demo') demoContainer
); );
}
// 초기 렌더링
renderTranscripts();
</script> </script>
</body> </body>
</html> </html>

2
docs/whisper-transcript.min.js vendored
View File

@@ -153,7 +153,7 @@ class WhisperSegment extends r {
<div class="times">${hms(this.start)} - ${hms(this.end)}</div> <div class="times">${hms(this.start)} - ${hms(this.end)}</div>
<div class="words"> <div class="words">
${this.words.map(w => ${this.words.map(w =>
x`<whisper-word title="${w.confidence}" word="${w.word}" start="${w.start}" end="${w.end}" probability="${w.probability}" />` x`<whisper-word title="${w.confidence || w.probability}" word="${w.word}" start="${w.start}" end="${w.end}" probability="${w.probability}" />`
)} )}
</div> </div>
</li> </li>

2
src/WhisperSegment.js
View File

@@ -60,7 +60,7 @@ export class WhisperSegment extends LitElement {
<div class="times">${hms(this.start)} - ${hms(this.end)}</div> <div class="times">${hms(this.start)} - ${hms(this.end)}</div>
<div class="words"> <div class="words">
${this.words.map(w => ${this.words.map(w =>
html`<whisper-word title="${w.confidence || w.probability}" word="${w.text || w.word}" start="${w.start}" end="${w.end}" probability="${w.confidence}" />` html`<whisper-word title="${w.confidence || w.probability}" word="${w.text || w.word}" start="${w.start}" end="${w.end}" probability="${w.confidence || w.probability}" />`
)} )}
</div> </div>
</li> </li>