AidBed/DeepFix1.html at master · Fik69/AidBed · GitHub

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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding Visualizer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }
        .font-mono {
            font-family: 'Roboto Mono', monospace;
        }
        .json-key { color: #9333ea; }
        .json-string { color: #16a34a; }
        .json-number { color: #2563eb; }
        .json-brace { color: #475569; }
        .smooth-transition { transition: all 0.3s ease-in-out; }
        .math-highlight { color: #f97316; font-weight: 600; }
        .math-vector { color: #1e40af; font-weight: 500; }
        .vector-cell { width: 40px; height: 30px; display: inline-block; text-align: center; line-height: 30px; margin: 2px; border-radius: 4px; background-color: #e0e7ff; font-size: 12px; }
        .vector-container { max-height: 200px; overflow-y: auto; }
        .dim-label { font-size: 10px; color: #64748b; }
        .calculation-step { margin-bottom: 15px; padding: 10px; background-color: #f1f5f9; border-radius: 8px; }
    </style>
</head>
<body class="text-slate-800">

    <div class="container mx-auto px-4 py-8 md:py-12 max-w-7xl">
        <header class="text-center mb-10 md:mb-16">
            <h1 class="text-4xl md:text-5xl font-bold text-slate-900">Visualizing Text Embeddings</h1>
            <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">An interactive tool to understand how text can be converted to numerical vectors that capture meaning.</p>
        </header>

        <main>
            <section id="generator" class="bg-white p-6 md:p-8 rounded-2xl shadow-lg border border-slate-200 mb-12">
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="flex flex-col">
                        <h2 class="text-2xl font-semibold text-slate-900 mb-4">1. Generate an Embedding</h2>
                        <p class="text-slate-600 mb-4">Enter any text below. We'll convert it to a numerical vector using a deterministic algorithm (not a real AI model). The same text will always produce the same vector.</p>
                        <div class="flex-grow flex flex-col">
                           <textarea id="text-input" class="w-full flex-grow p-4 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 smooth-transition resize-none" rows="8">A quick brown fox jumps over the lazy dog.</textarea>
                        </div>
                        <button id="embed-button" class="mt-4 w-full bg-sky-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-sky-700 active:scale-95 smooth-transition">
                            Generate Embedding
                        </button>
                    </div>

                    <div class="flex flex-col">
                        <h3 class="text-xl font-semibold text-slate-900 mb-4">Vector Representation</h3>
                        <div id="vector-container" class="vector-container bg-slate-50 p-4 rounded-lg border border-slate-200 font-mono text-sm">
                            <p class="text-slate-500">Your vector will appear here.</p>
                        </div>
                        <div class="mt-4 flex justify-between">
                            <span class="text-sm text-slate-500">Vector dimensions: <span id="dimension-count">0</span></span>
                            <span class="text-sm text-slate-500">Magnitude: <span id="magnitude">0.00</span></span>
                        </div>
                    </div>
                </div>

                <div id="explanation" class="mt-8 text-slate-600 hidden prose prose-slate max-w-none">
                    <h4>What is this vector?</h4>
                    <p>This is a numerical representation of your text. In real AI systems, embeddings are created by neural networks that learn to place semantically similar texts close together in this high-dimensional space. Our simplified version uses a deterministic algorithm to generate consistent vectors for demonstration purposes.</p>
                </div>
            </section>

            <section id="similarity" class="bg-white p-6 md:p-8 rounded-2xl shadow-lg border border-slate-200">
                <h2 class="text-2xl font-semibold text-slate-900 mb-4 text-center">2. Explore Semantic Similarity</h2>
                <p class="text-slate-600 mb-8 max-w-3xl mx-auto text-center">The power of embeddings comes from their ability to represent semantic meaning. Similar texts should have similar vectors. Enter two texts below to compare their vectors.</p>

                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <label for="text-input-a" class="font-medium text-slate-700 mb-2 block">Text A</label>
                        <textarea id="text-input-a" class="w-full p-4 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 smooth-transition" rows="5">The king sits on the throne.</textarea>
                        <div class="mt-2 text-sm text-slate-500">Vector magnitude: <span id="magnitude-a">0.00</span></div>
                    </div>
                    <div>
                        <label for="text-input-b" class="font-medium text-slate-700 mb-2 block">Text B</label>
                        <textarea id="text-input-b" class="w-full p-4 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 smooth-transition" rows="5">The queen is on her chair.</textarea>
                        <div class="mt-2 text-sm text-slate-500">Vector magnitude: <span id="magnitude-b">0.00</span></div>
                    </div>
                </div>

                <div class="mt-8 text-center">
                    <button id="similarity-button" class="bg-purple-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-purple-700 active:scale-95 smooth-transition">
                        Calculate Similarity
                    </button>
                </div>

                <div id="calculation-steps" class="mt-8 space-y-4 hidden">
                    <div class="calculation-step">
                        <h4 class="font-semibold text-slate-800 mb-2">Step 1: Dot Product Calculation</h4>
                        <div id="dot-product-calculation" class="font-mono text-sm"></div>
                    </div>

                    <div class="calculation-step">
                        <h4 class="font-semibold text-slate-800 mb-2">Step 2: Magnitude Calculation</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <h5 class="text-sm font-medium text-slate-700">Vector A Magnitude</h5>
                                <div id="magnitude-calculation-a" class="font-mono text-sm"></div>
                            </div>
                            <div>
                                <h5 class="text-sm font-medium text-slate-700">Vector B Magnitude</h5>
                                <div id="magnitude-calculation-b" class="font-mono text-sm"></div>
                            </div>
                        </div>
                    </div>

                    <div class="calculation-step">
                        <h4 class="font-semibold text-slate-800 mb-2">Step 3: Cosine Similarity</h4>
                        <div id="cosine-calculation" class="font-mono text-sm"></div>
                    </div>
                </div>

                <div id="similarity-results" class="mt-8 text-center hidden">
                    <h3 class="text-xl font-semibold text-slate-900">Cosine Similarity Score</h3>
                    <p id="similarity-score" class="text-5xl font-bold text-purple-600 my-2">0.00</p>
                    <div class="w-full max-w-md mx-auto bg-slate-200 rounded-full h-4 mt-4">
                        <div id="similarity-bar" class="bg-purple-500 h-4 rounded-full smooth-transition" style="width: 0%;"></div>
                    </div>
                    <p id="similarity-text" class="mt-4 text-slate-600"></p>
                </div>
            </section>
        </main>
    </div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const embedButton = document.getElementById('embed-button');
    const textInput = document.getElementById('text-input');
    const vectorContainer = document.getElementById('vector-container');
    const explanation = document.getElementById('explanation');
    const dimensionCount = document.getElementById('dimension-count');
    const magnitudeDisplay = document.getElementById('magnitude');

    const similarityButton = document.getElementById('similarity-button');
    const textInputA = document.getElementById('text-input-a');
    const textInputB = document.getElementById('text-input-b');
    const magnitudeA = document.getElementById('magnitude-a');
    const magnitudeB = document.getElementById('magnitude-b');
    const calculationSteps = document.getElementById('calculation-steps');
    const dotProductCalculation = document.getElementById('dot-product-calculation');
    const magnitudeCalculationA = document.getElementById('magnitude-calculation-a');
    const magnitudeCalculationB = document.getElementById('magnitude-calculation-b');
    const cosineCalculation = document.getElementById('cosine-calculation');
    const similarityResults = document.getElementById('similarity-results');
    const similarityScore = document.getElementById('similarity-score');
    const similarityBar = document.getElementById('similarity-bar');
    const similarityText = document.getElementById('similarity-text');

    const EMBEDDING_DIMENSIONS = 20; // Reduced for better visualization

    // Simple deterministic hash function
    const stringToSeed = (str) => {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            hash = ((hash << 5) - hash) + str.charCodeAt(i);
            hash |= 0; // Convert to 32-bit integer
        }
        return hash;
    };

    // Deterministic pseudo-random number generator
    const pseudoRandom = (seed) => {
        return () => {
            seed = (seed * 9301 + 49297) % 233280;
            return seed / 233280;
        };
    };

    const generateEmbedding = (text) => {
        const textToEmbed = text.trim();
        if (!textToEmbed) {
            return { values: [], magnitude: 0 };
        }

        const seed = stringToSeed(textToEmbed);
        const rng = pseudoRandom(seed);
        const values = [];

        for (let i = 0; i < EMBEDDING_DIMENSIONS; i++) {
            values.push((rng() - 0.5) * 2);
        }

        // Calculate magnitude
        const magnitude = Math.sqrt(values.reduce((sum, val) => sum + val * val, 0));

        return { values, magnitude };
    };

    const displayEmbedding = (text) => {
        const embedding = generateEmbedding(text);
        dimensionCount.textContent = embedding.values.length;
        magnitudeDisplay.textContent = embedding.magnitude.toFixed(2);

        // Display the vector values
        let html = '';
        embedding.values.forEach((value, index) => {
            html += `<div class="vector-cell" title="Dimension ${index}: ${value.toFixed(2)}">${value.toFixed(1)}</div>`;
            if ((index + 1) % 10 === 0) html += '<br>';
        });
        vectorContainer.innerHTML = html;

        explanation.classList.remove('hidden');
    };

    const calculateCosineSimilarity = (vecA, vecB) => {
        if (!vecA || !vecB || vecA.length !== vecB.length || vecA.length === 0) {
            return { similarity: 0, dotProduct: 0, magA: 0, magB: 0 };
        }

        let dotProduct = 0;
        let magA = 0;
        let magB = 0;

        for (let i = 0; i < vecA.length; i++) {
            dotProduct += vecA[i] * vecB[i];
            magA += vecA[i] * vecA[i];
            magB += vecB[i] * vecB[i];
        }

        magA = Math.sqrt(magA);
        magB = Math.sqrt(magB);

        if (magA === 0 || magB === 0) {
            return { similarity: 0, dotProduct: 0, magA: 0, magB: 0 };
        }

        const similarity = dotProduct / (magA * magB);
        return { similarity, dotProduct, magA, magB };
    };

    const calculateSimilarity = () => {
        const embeddingA = generateEmbedding(textInputA.value);
        const embeddingB = generateEmbedding(textInputB.value);

        magnitudeA.textContent = embeddingA.magnitude.toFixed(2);
        magnitudeB.textContent = embeddingB.magnitude.toFixed(2);

        const { similarity, dotProduct, magA, magB } = calculateCosineSimilarity(
            embeddingA.values,
            embeddingB.values
        );

        // Show calculation steps
        calculationSteps.classList.remove('hidden');

        // Dot product calculation
        let dotProductHtml = `A·B = `;
        for (let i = 0; i < Math.min(5, embeddingA.values.length); i++) {
            dotProductHtml += `(${embeddingA.values[i].toFixed(2)} × ${embeddingB.values[i].toFixed(2)})`;
            if (i < Math.min(5, embeddingA.values.length) - 1) dotProductHtml += ' + ';
        }
        if (embeddingA.values.length > 5) dotProductHtml += ` + ... + (Aₙ × Bₙ)`;
        dotProductHtml += ` = <span class="math-highlight">${dotProduct.toFixed(4)}</span>`;
        dotProductCalculation.innerHTML = dotProductHtml;

        // Magnitude calculations
        magnitudeCalculationA.innerHTML = `‖A‖ = √[`;
        for (let i = 0; i < Math.min(5, embeddingA.values.length); i++) {
            magnitudeCalculationA.innerHTML += `(${embeddingA.values[i].toFixed(2)})²`;
            if (i < Math.min(5, embeddingA.values.length) - 1) magnitudeCalculationA.innerHTML += ' + ';
        }
        if (embeddingA.values.length > 5) magnitudeCalculationA.innerHTML += ` + ... + (Aₙ)²`;
        magnitudeCalculationA.innerHTML += `] = <span class="math-highlight">${magA.toFixed(4)}</span>`;

        magnitudeCalculationB.innerHTML = `‖B‖ = √[`;
        for (let i = 0; i < Math.min(5, embeddingB.values.length); i++) {
            magnitudeCalculationB.innerHTML += `(${embeddingB.values[i].toFixed(2)})²`;
            if (i < Math.min(5, embeddingB.values.length) - 1) magnitudeCalculationB.innerHTML += ' + ';
        }
        if (embeddingB.values.length > 5) magnitudeCalculationB.innerHTML += ` + ... + (Bₙ)²`;
        magnitudeCalculationB.innerHTML += `] = <span class="math-highlight">${magB.toFixed(4)}</span>`;

        // Cosine similarity calculation
        cosineCalculation.innerHTML = `cos(θ) = A·B / (‖A‖ × ‖B‖) = ${dotProduct.toFixed(4)} / (${magA.toFixed(4)} × ${magB.toFixed(4)}) = <span class="math-highlight">${similarity.toFixed(4)}</span>`;

        // Display results
        similarityResults.classList.remove('hidden');
        const percentage = Math.max(0, Math.round(similarity * 100));
        similarityScore.textContent = similarity.toFixed(4);
        similarityBar.style.width = `${percentage}%`;

        let textFeedback = '';
        if (similarity > 0.8) textFeedback = "These texts are very similar in meaning.";
        else if (similarity > 0.6) textFeedback = "These texts are related.";
        else if (similarity > 0.4) textFeedback = "These texts have some thematic overlap.";
        else if (similarity > 0.2) textFeedback = "These texts are slightly related.";
        else textFeedback = "These texts are not very similar.";
        similarityText.textContent = textFeedback;
    };

    embedButton.addEventListener('click', () => {
        displayEmbedding(textInput.value);
    });

    similarityButton.addEventListener('click', calculateSimilarity);

    // Initialize with default values
    displayEmbedding(textInput.value);
});
</script>

</body>
</html>