Spaces:
Running
Running
Commit ·
2a3e6df
1
Parent(s): 04751a7
feat: added SVG visualizations for Word2Vec vector math and latent space clustering
Browse files
CME295-Transformers/index.html
CHANGED
|
@@ -525,7 +525,65 @@
|
|
| 525 |
</div>
|
| 526 |
<div class="list-item">
|
| 527 |
<div class="list-num">02</div>
|
| 528 |
-
<div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 529 |
</div>
|
| 530 |
<div class="list-item">
|
| 531 |
<div class="list-num">03</div>
|
|
|
|
| 525 |
</div>
|
| 526 |
<div class="list-item">
|
| 527 |
<div class="list-num">02</div>
|
| 528 |
+
<div>
|
| 529 |
+
<strong>Word2Vec & Vector Spaces:</strong> Word embeddings map tokens into a high-dimensional continuous space (e.g., 512 dimensions). These vectors capture semantic relationships via dot products; tokens with similar meanings are geometrically close.
|
| 530 |
+
|
| 531 |
+
<div class="visual-demo" style="margin-top: 20px; background: rgba(0,0,0,0.2); padding: 20px; border-radius: 8px; border: 1px solid var(--cyan);">
|
| 532 |
+
<h4 style="color: var(--cyan); margin-bottom: 15px; font-size: 0.9em;">Visualizing Semantic Vector Math: King - Man + Woman ≈ Queen</h4>
|
| 533 |
+
<svg viewBox="0 0 400 200" style="width: 100%; height: auto;">
|
| 534 |
+
<!-- Axes -->
|
| 535 |
+
<line x1="20" y1="180" x2="380" y2="180" stroke="var(--text-dim)" stroke-width="1" />
|
| 536 |
+
<line x1="20" y1="20" x2="20" y2="180" stroke="var(--text-dim)" stroke-width="1" />
|
| 537 |
+
|
| 538 |
+
<!-- Man to King -->
|
| 539 |
+
<circle cx="60" cy="140" r="4" fill="var(--orange)" />
|
| 540 |
+
<text x="70" y="145" fill="var(--text)" font-size="12">Man</text>
|
| 541 |
+
<line x1="60" y1="140" x2="160" y2="60" stroke="var(--orange)" stroke-width="2" stroke-dasharray="4" />
|
| 542 |
+
<circle cx="160" cy="60" r="4" fill="var(--orange)" />
|
| 543 |
+
<text x="170" y="65" fill="var(--text)" font-size="12">King</text>
|
| 544 |
+
|
| 545 |
+
<!-- Woman to Queen -->
|
| 546 |
+
<circle cx="150" cy="160" r="4" fill="var(--cyan)" />
|
| 547 |
+
<text x="160" y="165" fill="var(--text)" font-size="12">Woman</text>
|
| 548 |
+
<line x1="150" y1="160" x2="250" y2="80" stroke="var(--cyan)" stroke-width="2" stroke-dasharray="4" />
|
| 549 |
+
<circle cx="250" cy="80" r="4" fill="var(--cyan)" />
|
| 550 |
+
<text x="260" y="85" fill="var(--text)" font-size="12">Queen</text>
|
| 551 |
+
|
| 552 |
+
<!-- Relationship Vector -->
|
| 553 |
+
<path d="M 60 140 L 150 160" stroke="var(--green)" stroke-width="1" marker-end="url(#arrow)" />
|
| 554 |
+
<path d="M 160 60 L 250 80" stroke="var(--green)" stroke-width="1" marker-end="url(#arrow)" />
|
| 555 |
+
|
| 556 |
+
<defs>
|
| 557 |
+
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
|
| 558 |
+
<path d="M0,0 L0,6 L9,3 z" fill="var(--green)" />
|
| 559 |
+
</marker>
|
| 560 |
+
</defs>
|
| 561 |
+
</svg>
|
| 562 |
+
<p style="font-size: 0.8em; color: var(--text-dim); margin-top: 10px;">The relationship vector (Gender) is consistently mapped across different nouns.</p>
|
| 563 |
+
</div>
|
| 564 |
+
|
| 565 |
+
<div class="visual-demo" style="margin-top: 20px; background: rgba(0,0,0,0.2); padding: 20px; border-radius: 8px; border: 1px solid var(--orange);">
|
| 566 |
+
<h4 style="color: var(--orange); margin-bottom: 15px; font-size: 0.9em;">Latent Space Clustering</h4>
|
| 567 |
+
<svg viewBox="0 0 400 150" style="width: 100%; height: auto;">
|
| 568 |
+
<!-- Cluster 1: Fruit -->
|
| 569 |
+
<g>
|
| 570 |
+
<circle cx="80" cy="70" r="30" fill="var(--cyan)" opacity="0.1" />
|
| 571 |
+
<circle cx="70" cy="60" r="3" fill="var(--cyan)" /> <text x="75" y="62" fill="var(--text-dim)" font-size="10">Apple</text>
|
| 572 |
+
<circle cx="90" cy="80" r="3" fill="var(--cyan)" /> <text x="95" y="82" fill="var(--text-dim)" font-size="10">Banana</text>
|
| 573 |
+
<circle cx="65" cy="85" r="3" fill="var(--cyan)" /> <text x="50" y="95" fill="var(--text-dim)" font-size="10">Orange</text>
|
| 574 |
+
</g>
|
| 575 |
+
|
| 576 |
+
<!-- Cluster 2: Transport -->
|
| 577 |
+
<g>
|
| 578 |
+
<circle cx="280" cy="80" r="35" fill="var(--orange)" opacity="0.1" />
|
| 579 |
+
<circle cx="270" cy="70" r="3" fill="var(--orange)" /> <text x="275" y="72" fill="var(--text-dim)" font-size="10">Car</text>
|
| 580 |
+
<circle cx="300" cy="90" r="3" fill="var(--orange)" /> <text x="305" y="92" fill="var(--text-dim)" font-size="10">Truck</text>
|
| 581 |
+
<circle cx="260" cy="100" r="3" fill="var(--orange)" /> <text x="240" y="115" fill="var(--text-dim)" font-size="10">Airplane</text>
|
| 582 |
+
</g>
|
| 583 |
+
</svg>
|
| 584 |
+
<p style="font-size: 0.8em; color: var(--text-dim); margin-top: 10px;">Embeddings naturally group semantically similar concepts together in vector clusters.</p>
|
| 585 |
+
</div>
|
| 586 |
+
</div>
|
| 587 |
</div>
|
| 588 |
<div class="list-item">
|
| 589 |
<div class="list-num">03</div>
|