Spaces:
Running
Running
File size: 6,344 Bytes
172d832 3a26429 172d832 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | <!doctype html>
<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-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>
|