From f98166d4c974d6a86bd534f8f1e5471fc581fcc1 Mon Sep 17 00:00:00 2001
From: Chan <b24028>
Date: Thu, 9 Jan 2025 11:16:52 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BB=AC=EB=9F=BC=EB=B7=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/index.html | 119 +++++++++++++++++++++++++++++++-----------------
 package.json    |   3 +-
 src/tooltip.js  |  32 ++++++++-----
 3 files changed, 99 insertions(+), 55 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 20b06fe..d6e2125 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,34 +2,33 @@
 <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>
-      <label for="jsonInput">Upload JSON (.json):</label>
-      <input type="file" id="jsonInput" accept=".json" multiple><br>
-      <button type="submit">Upload</button>
-    </form>
-  </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 id="demo"></div>
 
   <script type="module">
@@ -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 => {
-        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',
-        });
+        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'
+          });
+        }
       });
 
-      // 렌더링 업데이트
       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>
-            `
-          )}
+ 
+          <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="${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
       );
diff --git a/package.json b/package.json
index e5f4247..9a83ba6 100644
--- a/package.json
+++ b/package.json
@@ -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"
 }
diff --git a/src/tooltip.js b/src/tooltip.js
index c75effd..20b95d3 100644
--- a/src/tooltip.js
+++ b/src/tooltip.js
@@ -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>
     `;
