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

83
demo/index.html
View File

@@ -2,25 +2,25 @@
<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>
@@ -28,7 +28,6 @@
<input type="file" id="jsonInput" accept=".json" multiple><br>
<button type="submit">Upload</button>
</form>
</div>
<div id="demo"></div>
@@ -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 => {
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',
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`
<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="${transcript.audio}"
url="${transcript.url}">
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
);

3
package.json
View File

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