Hugging Face's logo

Spaces:
HuggingFaceBio
/
carbon-tokenization-02-tokenizers-compared
Running

App Files Community
GenerTeam commited on
Commit
d2d4628
路
verified 路
1 Parent(s): b181d8a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +17 -5
index.html CHANGED
@@ -9,6 +9,7 @@
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap">
11
  <style>
 
12
  :root {
13
  --bg: #f7f5ee;
14
  --ink: #1f1f1d;
@@ -555,7 +556,7 @@ input.seq-input:focus, textarea.seq-input:focus {
555
  .cond-pick.active.b-C { background: var(--base-c); border-color: var(--base-c); }
556
  .cond-pick.active.b-G { background: var(--base-g); border-color: var(--base-g); }
557
 
558
- /* W3 路 real Carbon-500M per-token scoring --------------------------- */
559
  .w3-itok { cursor: pointer; transition: outline-color 0.12s; }
560
  .w3-itok:hover { border-color: #888; }
561
  .w3-sub {
@@ -586,6 +587,7 @@ input.seq-input:focus, textarea.seq-input:focus {
586
  }
587
  .w3-io__arrow { font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--ink-faint); padding-bottom: 5px; }
588
  .w3-gt-tok { background: rgba(184,134,44,0.12); border-color: rgba(184,134,44,0.5) !important; }
 
589
  .w3-chart { display: block; width: 100%; height: auto; margin-top: 6px; background: #fff; border: 1px solid #eee; }
590
  .w3-legend {
591
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px;
@@ -593,7 +595,7 @@ input.seq-input:focus, textarea.seq-input:focus {
593
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px;
594
  }
595
  .w3-legend span { display: inline-flex; align-items: center; gap: 6px; }
596
- .w3-legend i { width: 12px; height: 3px; display: inline-block; }
597
  .w3-top { display: flex; gap: 6px; margin-top: 12px; }
598
  .w3-topchip {
599
  flex: 1 1 0; min-width: 0;
@@ -603,6 +605,7 @@ input.seq-input:focus, textarea.seq-input:focus {
603
  border-radius: 3px; padding: 6px 4px;
604
  }
605
  .w3-topchip .km { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; }
 
606
  .w3-topchip .pct { font-size: 9px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
607
  .posgrid__col.clickable { cursor: pointer; }
608
  .posgrid__col.sel { outline: 2px solid var(--ink); outline-offset: 2px; }
@@ -972,7 +975,7 @@ body { padding: 20px 24px; background: #fff; }
972
  </head>
973
  <body>
974
  <aside class="widget" id="w1">
975
- <div class="widget__head">
976
  <span class="widget__eyebrow">搂 Widget 路 02</span>
977
  <span class="widget__title">Per-base, BPE, and 6-mer on the same DNA sequence</span>
978
  </div>
@@ -1023,9 +1026,11 @@ body { padding: 20px 24px; background: #fff; }
1023
  </div>
1024
  </div>
1025
  </div>
1026
- </aside>
1027
  <script>
1028
 
 
 
1029
  // ============================================================
1030
  // Shared utilities
1031
  // ============================================================
@@ -1139,9 +1144,16 @@ function basesHTML(seq) {
1139
  return Array.from(seq).map((c) => `<span class="base ${c}">${c}</span>`).join('');
1140
  }
1141
 
 
 
 
 
1142
  (function setupW1() {
1143
  // toy BPE vocab: longer entries first for greedy match
1144
  const BPE_VOCAB = [
 
 
 
1145
  'ACGTA', 'TATAG', 'ATCGA', 'GATCA', 'TAGCT', 'AGCTA', 'CGATC', 'TGCTA',
1146
  'ATCG', 'GATC', 'TATA', 'AGCT', 'GCTA', 'CTAG', 'ACGT', 'TGCA',
1147
  'AT', 'CG', 'GC', 'TA', 'AA', 'TT', 'CC', 'GG', 'AC', 'GT', 'CT', 'GA',
@@ -1363,4 +1375,4 @@ function basesHTML(seq) {
1363
  })();
1364
  </script>
1365
  </body>
1366
- </html>
 
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap">
11
  <style>
12
+
13
  :root {
14
  --bg: #f7f5ee;
15
  --ink: #1f1f1d;
 
556
  .cond-pick.active.b-C { background: var(--base-c); border-color: var(--base-c); }
557
  .cond-pick.active.b-G { background: var(--base-g); border-color: var(--base-g); }
558
 
559
+ /* W3 路 real Carbon-3B per-token scoring --------------------------- */
560
  .w3-itok { cursor: pointer; transition: outline-color 0.12s; }
561
  .w3-itok:hover { border-color: #888; }
562
  .w3-sub {
 
587
  }
588
  .w3-io__arrow { font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--ink-faint); padding-bottom: 5px; }
589
  .w3-gt-tok { background: rgba(184,134,44,0.12); border-color: rgba(184,134,44,0.5) !important; }
590
+ .w3-gt-tok { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
591
  .w3-chart { display: block; width: 100%; height: auto; margin-top: 6px; background: #fff; border: 1px solid #eee; }
592
  .w3-legend {
593
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px;
 
595
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px;
596
  }
597
  .w3-legend span { display: inline-flex; align-items: center; gap: 6px; }
598
+ .w3-legend svg { width: 20px; height: 8px; display: inline-block; vertical-align: middle; }
599
  .w3-top { display: flex; gap: 6px; margin-top: 12px; }
600
  .w3-topchip {
601
  flex: 1 1 0; min-width: 0;
 
605
  border-radius: 3px; padding: 6px 4px;
606
  }
607
  .w3-topchip .km { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; }
608
+ .w3-topchip.ground-truth .km { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
609
  .w3-topchip .pct { font-size: 9px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
610
  .posgrid__col.clickable { cursor: pointer; }
611
  .posgrid__col.sel { outline: 2px solid var(--ink); outline-offset: 2px; }
 
975
  </head>
976
  <body>
977
  <aside class="widget" id="w1">
978
+ <div class="widget__head">
979
  <span class="widget__eyebrow">搂 Widget 路 02</span>
980
  <span class="widget__title">Per-base, BPE, and 6-mer on the same DNA sequence</span>
981
  </div>
 
1026
  </div>
1027
  </div>
1028
  </div>
1029
+ </aside>
1030
  <script>
1031
 
1032
+
1033
+
1034
  // ============================================================
1035
  // Shared utilities
1036
  // ============================================================
 
1144
  return Array.from(seq).map((c) => `<span class="base ${c}">${c}</span>`).join('');
1145
  }
1146
 
1147
+ // ============================================================
1148
+ // W2 路 BPE prefix ambiguity
1149
+ // ============================================================
1150
+
1151
  (function setupW1() {
1152
  // toy BPE vocab: longer entries first for greedy match
1153
  const BPE_VOCAB = [
1154
+ 'ACGGATCATGCTA', 'ATGCATGCA', 'CGATCGGGCCTT', 'AAGCTAGCTA', 'CGATCGTAG',
1155
+ 'ACGGATCA', 'ATGCATGC', 'CGATCGGG', 'GGCCTTAA', 'AGCTAGCT', 'CGTAGCAT',
1156
+ 'ACGGAT', 'GATCAT', 'ATGCTA', 'CATGCA', 'CGATCG', 'GGCCTT', 'AAGCTA', 'CTAGCT', 'CGTAGC',
1157
  'ACGTA', 'TATAG', 'ATCGA', 'GATCA', 'TAGCT', 'AGCTA', 'CGATC', 'TGCTA',
1158
  'ATCG', 'GATC', 'TATA', 'AGCT', 'GCTA', 'CTAG', 'ACGT', 'TGCA',
1159
  'AT', 'CG', 'GC', 'TA', 'AA', 'TT', 'CC', 'GG', 'AC', 'GT', 'CT', 'GA',
 
1375
  })();
1376
  </script>
1377
  </body>
1378
+ </html>