Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Human Labeling</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div id="appScreen"> | |
| <header> | |
| <h1>Human Labeling Tool</h1> | |
| <span class="tag">Powered by @n.t.phuc149</span> | |
| </header> | |
| <div class="main"> | |
| <div class="status-bar" id="statusBar"> | |
| <div class="dot"></div> | |
| <span id="statusText">Sẵn sàng</span> | |
| </div> | |
| <div class="panel-video"> | |
| <div class="panel-label">Preview</div> | |
| <div class="video-container" id="videoContainer"> | |
| <div class="video-placeholder"> | |
| <svg | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="1.2" | |
| > | |
| <rect x="2" y="3" width="20" height="14" rx="2" /> | |
| <path d="M8 21h8M12 17v4" /> | |
| </svg> | |
| <p>Chọn một video từ dataset để xem</p> | |
| </div> | |
| </div> | |
| <div class="video-meta" id="videoMeta"></div> | |
| </div> | |
| <div class="panel-right"> | |
| <div class="panel-transcript"> | |
| <div class="transcript-toolbar"> | |
| <span class="left">Transcript</span> | |
| <div class="right"> | |
| <span class="char-count" id="charCount"></span> | |
| <button | |
| class="btn btn-ghost" | |
| id="copyBtn" | |
| onclick="copyText()" | |
| style="padding: 4px 10px; font-size: 12px" | |
| > | |
| <i class="ri-file-copy-line"></i> Copy | |
| </button> | |
| <button | |
| class="btn btn-ghost" | |
| id="genInstrBtn" | |
| onclick="generateInstruction()" | |
| style="padding: 4px 10px; font-size: 12px" | |
| > | |
| <i class="ri-sparkling-line"></i> Gen Instruction | |
| </button> | |
| <button | |
| class="btn btn-primary" | |
| onclick="saveCurrentToDataset()" | |
| style="padding: 4px 10px; font-size: 12px" | |
| > | |
| <i class="ri-save-line"></i> Lưu & Verify | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ref-zone"> | |
| <div class="ref-label">References</div> | |
| <div class="ref-pills" id="refPills"></div> | |
| <div class="ref-input-row"> | |
| <input | |
| type="text" | |
| id="refInput" | |
| placeholder="VD: Điều 1 nghị định 168/2024/NĐ-CP" | |
| /> | |
| <button onclick="addReference()"> | |
| <i class="ri-add-line"></i> Thêm | |
| </button> | |
| </div> | |
| </div> | |
| <textarea | |
| id="transcriptArea" | |
| placeholder="Chọn một entry từ dataset để hiển thị script. Bạn có thể chỉnh sửa trực tiếp rồi nhấn Lưu & Verify." | |
| ></textarea> | |
| </div> | |
| <div class="panel-dataset"> | |
| <div class="dataset-toolbar"> | |
| <div class="left"> | |
| Dataset | |
| <span class="dataset-count" id="datasetCount"></span> | |
| <span class="autosave-indicator" id="autosaveIndicator"></span> | |
| </div> | |
| <div style="display: flex; gap: 5px"> | |
| <label | |
| class="btn btn-ghost" | |
| style="padding: 4px 10px; font-size: 12px; cursor: pointer" | |
| > | |
| <i class="ri-upload-line"></i> Import JSON<input | |
| type="file" | |
| accept=".json" | |
| onchange="importJSON(event)" | |
| style="display: none" | |
| /> | |
| </label> | |
| <label | |
| class="btn btn-ghost" | |
| style="padding: 4px 10px; font-size: 12px; cursor: pointer" | |
| > | |
| <i class="ri-upload-line"></i> Import CSV<input | |
| type="file" | |
| accept=".csv" | |
| onchange="importCSV(event)" | |
| style="display: none" | |
| /> | |
| </label> | |
| <button | |
| class="btn btn-ghost" | |
| onclick="exportJSON()" | |
| style="padding: 4px 10px; font-size: 12px" | |
| > | |
| <i class="ri-download-line"></i> Export JSON | |
| </button> | |
| <button | |
| class="btn btn-ghost" | |
| onclick="exportCSV()" | |
| style="padding: 4px 10px; font-size: 12px" | |
| > | |
| <i class="ri-download-line"></i> Export CSV | |
| </button> | |
| <button | |
| class="btn btn-ghost" | |
| onclick="clearDataset()" | |
| style="padding: 4px 10px; font-size: 12px; color: #ef4444" | |
| > | |
| <i class="ri-delete-bin-6-line"></i> Xoá tất cả | |
| </button> | |
| </div> | |
| </div> | |
| <div class="dataset-table-wrap"> | |
| <table id="datasetTable"> | |
| <thead> | |
| <tr> | |
| <th class="td-num">#</th> | |
| <th>Title</th> | |
| <th>Script</th> | |
| <th>References</th> | |
| <th>URL</th> | |
| <th>Status</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="datasetBody"> | |
| <tr> | |
| <td colspan="7" class="empty-state"> | |
| Import file JSON hoặc CSV để bắt đầu labeling. | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div id="paginationBar" class="pagination-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |