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

52
.gitignore vendored
View File

@@ -1,26 +1,26 @@
## editors
/.idea
/.vscode
## system files
.DS_Store
## npm
/node_modules/
/npm-debug.log
## testing
/coverage/
## temp folders
/.tmp/
# build
/_site/
/dist/
/out-tsc/
storybook-static
custom-elements.json
yarn.lock
## editors
/.idea
/.vscode
## system files
.DS_Store
## npm
/node_modules/
/npm-debug.log
## testing
/coverage/
## temp folders
/.tmp/
# build
/_site/
/dist/
/out-tsc/
storybook-static
custom-elements.json
yarn.lock

74
demo/index.html
View File

@@ -10,24 +10,84 @@
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>
<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>
<script type="module">
import { html, render } from 'lit';
import '../whisper-transcript.js';
render(
html`
<tooltip-color-guide></tooltip-color-guide>
const demoContainer = document.querySelector('#demo');
const uploadForm = document.getElementById('uploadForm');
const audioInput = document.getElementById('audioInput');
const jsonInput = document.getElementById('jsonInput');
let transcripts = []; // 업로드된 <whisper-transcript> 데이터를 관리
<whisper-transcript audio="audio.mp3" url="audio.json"></whisper-transcript>
`,
document.querySelector('#demo')
);
// 파일 업로드 이벤트 처리
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(
html`
<tooltip-color-guide></tooltip-color-guide>
${transcripts.map(
transcript => html`
<whisper-transcript
audio="${transcript.audio}"
url="${transcript.url}">
</whisper-transcript>
`
)}
`,
demoContainer
);
}
// 초기 렌더링
renderTranscripts();
</script>
</body>
</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="words">
${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>
</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="words">
${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>
</li>