From 382cd1fa57cdbc9ab5312c3420ce68db1d736212 Mon Sep 17 00:00:00 2001
From: Chan <b24028>
Date: Wed, 8 Jan 2025 17:55:58 +0900
Subject: [PATCH] =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                     | 52 ++++++++++++------------
 demo/index.html                | 74 ++++++++++++++++++++++++++++++----
 docs/whisper-transcript.min.js |  2 +-
 src/WhisperSegment.js          |  2 +-
 4 files changed, 95 insertions(+), 35 deletions(-)
diff --git a/.gitignore b/.gitignore
index 62ba3c1..b681127 100644
--- a/.gitignore
+++ b/.gitignore
@@ -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
diff --git a/demo/index.html b/demo/index.html
index 1b01673..20b06fe 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -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>
diff --git a/docs/whisper-transcript.min.js b/docs/whisper-transcript.min.js
index a161920..9a5b43c 100644
--- a/docs/whisper-transcript.min.js
+++ b/docs/whisper-transcript.min.js
@@ -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>
diff --git a/src/WhisperSegment.js b/src/WhisperSegment.js
index 96d1e25..1b06fe0 100644
--- a/src/WhisperSegment.js
+++ b/src/WhisperSegment.js
@@ -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>
