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"> <html lang="en-GB">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<style> <style>
body { 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; background-color: black;
color: white; color: white;
} }
input[type="file"] { table {
margin: 1em 0; border-collapse: collapse;
width: 100%;
}
td {
vertical-align: top;
border: 1px solid #666;
padding: 8px;
width: 50%;
} }
</style> </style>
</head> </head>
<body> <body>
<div> <h1>Dynamic Whisper Transcript</h1>
<h1>Dynamic Whisper Transcript</h1> <form id="uploadForm">
<!-- 파일 업로드 폼 --> <label for="audioInput">Upload Audio (.mp3):</label>
<form id="uploadForm"> <input type="file" id="audioInput" accept=".mp3" multiple><br>
<label for="audioInput">Upload Audio (.mp3):</label> <label for="jsonInput">Upload JSON (.json):</label>
<input type="file" id="audioInput" accept=".mp3" multiple><br> <input type="file" id="jsonInput" accept=".json" multiple><br>
<label for="jsonInput">Upload JSON (.json):</label> <button type="submit">Upload</button>
<input type="file" id="jsonInput" accept=".json" multiple><br> </form>
<button type="submit">Upload</button>
</form>
</div>
<div id="demo"></div> <div id="demo"></div>
<script type="module"> <script type="module">
@@ -40,47 +39,83 @@
const uploadForm = document.getElementById('uploadForm'); const uploadForm = document.getElementById('uploadForm');
const audioInput = document.getElementById('audioInput'); const audioInput = document.getElementById('audioInput');
const jsonInput = document.getElementById('jsonInput'); const jsonInput = document.getElementById('jsonInput');
let transcripts = []; // 업로드된 <whisper-transcript> 데이터를 관리
// 파일 업로드 이벤트 처리 // 최대 2개만 표시한다고 가정
let transcripts = [];
uploadForm.addEventListener('submit', (event) => { uploadForm.addEventListener('submit', (event) => {
event.preventDefault(); event.preventDefault();
const audioFiles = Array.from(audioInput.files); const audioFiles = Array.from(audioInput.files);
const jsonFiles = Array.from(jsonInput.files); const jsonFiles = Array.from(jsonInput.files);
// <whisper-transcript> 데이터 생성
audioFiles.forEach(audioFile => { audioFiles.forEach(audioFile => {
const matchingJson = jsonFiles.find(jsonFile => if (transcripts.length < 2) {
jsonFile.name.replace('.json', '') === audioFile.name.replace('.mp3', '') const matchingJson = jsonFiles.find(jsonFile =>
); jsonFile.name.replace('.json', '') === audioFile.name.replace('.mp3', '')
);
transcripts.push({ transcripts.push({
audio: audioFile.name, audio: audioFile.name,
url: matchingJson ? matchingJson.name : 'No JSON provided', url: matchingJson ? matchingJson.name : 'No JSON provided'
}); });
}
}); });
// 렌더링 업데이트
renderTranscripts(); renderTranscripts();
// 입력 초기화
audioInput.value = ''; audioInput.value = '';
jsonInput.value = ''; jsonInput.value = '';
}); });
// Lit으로 동적 렌더링
function renderTranscripts() { function renderTranscripts() {
render( render(
html` html`
<tooltip-color-guide></tooltip-color-guide> <tooltip-color-guide></tooltip-color-guide>
${transcripts.map(
transcript => html` <table>
<whisper-transcript <tr>
audio="${transcript.audio}" <td>
url="${transcript.url}"> ${transcripts[0]
</whisper-transcript> ? 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 demoContainer
); );

3
package.json
View File

@@ -28,5 +28,6 @@
"rollup": "^4.27.3", "rollup": "^4.27.3",
"rollup-plugin-node-resolve": "^5.2.0" "rollup-plugin-node-resolve": "^5.2.0"
}, },
"customElements": "custom-elements.json" "customElements": "custom-elements.json",
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
} }

32
src/tooltip.js
View File

@@ -7,7 +7,6 @@ export class TooltipColorGuide extends LitElement {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.tooltip-text { .tooltip-text {
visibility: hidden; visibility: hidden;
width: 200px; width: 200px;
@@ -18,20 +17,21 @@ export class TooltipColorGuide extends LitElement {
padding: 10px; padding: 10px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 125%; /* ▼ 오른쪽 아래로 배치 ▼ */
left: 50%; top: 100%;
transform: translateX(-50%); left: 100%;
/* 왼쪽 위 꼭짓점이 부모의 (오른쪽 아래 꼭짓점)에 딱 맞도록 함 */
transform: translate(0, 0);
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.tooltip span {
color : white;
}
.tooltip:hover .tooltip-text { .tooltip:hover .tooltip-text {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.tooltip span {
color: white;
}
.color-box { .color-box {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
@@ -45,10 +45,18 @@ export class TooltipColorGuide extends LitElement {
<div class="tooltip"> <div class="tooltip">
<span>Color Guide</span> <span>Color Guide</span>
<div class="tooltip-text"> <div class="tooltip-text">
<div><span class="color-box" style="background-color: white;"></span>this.probability > 0.9: (White)</div> <div>
<div><span class="color-box" style="background-color: yellow;"></span>this.probability > 0.7: (Yellow)</div> <span class="color-box" style="background-color: white;"></span>this.probability > 0.9: (White)
<div><span class="color-box" style="background-color: orange;"></span>this.probability > 0.5: (Orange)</div> </div>
<div><span class="color-box" style="background-color: red;"></span>this.probability ≤ 0.5: (Red)</div> <div>
<span class="color-box" style="background-color: yellow;"></span>this.probability > 0.7: (Yellow)
</div>
<div>
<span class="color-box" style="background-color: orange;"></span>this.probability > 0.5: (Orange)
</div>
<div>
<span class="color-box" style="background-color: red;"></span>this.probability ≤ 0.5: (Red)
</div>
</div> </div>
</div> </div>
`; `;