Hugging Face's logo

Spaces:
oliverguhr
/
softmaxfunction
Running

App Files Community
oliverguhr commited on
Commit
5b8c940
·
verified ·
1 Parent(s): 55bb88f

genertaed by deepsite

Browse files

https://huggingface.co/spaces/enzostvs/deepsite

Files changed (1) hide show
  1. index.html +261 -19
index.html CHANGED
@@ -1,19 +1,261 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Softmax Function Visualizer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .slider-container {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .slider-container:hover {
14
+ transform: translateY(-3px);
15
+ }
16
+ .bar-container {
17
+ transition: all 0.5s ease;
18
+ }
19
+ .glow {
20
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
21
+ }
22
+ .input-value {
23
+ min-width: 60px;
24
+ text-align: center;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-100 min-h-screen">
29
+ <div class="container mx-auto px-4 py-8">
30
+ <div class="max-w-4xl mx-auto">
31
+ <!-- Header -->
32
+ <div class="text-center mb-8">
33
+ <h1 class="text-4xl font-bold text-blue-600 mb-2">Softmax Function Visualizer</h1>
34
+ <p class="text-gray-600 text-lg">
35
+ Interactive visualization of the softmax activation function
36
+ </p>
37
+ </div>
38
+
39
+ <!-- Explanation Card -->
40
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
41
+ <div class="flex items-start">
42
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
43
+ <i class="fas fa-info-circle text-blue-600 text-xl"></i>
44
+ </div>
45
+ <div>
46
+ <h2 class="text-xl font-semibold text-gray-800 mb-2">About Softmax</h2>
47
+ <p class="text-gray-600 mb-2">
48
+ The softmax function converts a vector of real numbers into a probability distribution.
49
+ It's commonly used in machine learning for multi-class classification.
50
+ </p>
51
+ <p class="text-gray-600">
52
+ Formula: <code class="bg-gray-100 px-2 py-1 rounded">σ(z)_i = e^{z_i} / Σ_j e^{z_j}</code>
53
+ </p>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Controls -->
59
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
60
+ <div class="flex justify-between items-center mb-4">
61
+ <h2 class="text-xl font-semibold text-gray-800">Input Values</h2>
62
+ <div class="flex space-x-2">
63
+ <button id="add-input" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg transition">
64
+ <i class="fas fa-plus mr-1"></i> Add
65
+ </button>
66
+ <button id="reset" class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-lg transition">
67
+ <i class="fas fa-sync-alt mr-1"></i> Reset
68
+ </button>
69
+ </div>
70
+ </div>
71
+
72
+ <div id="sliders-container" class="space-y-4">
73
+ <!-- Sliders will be added here dynamically -->
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Results -->
78
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
79
+ <!-- Input Values -->
80
+ <div class="bg-white rounded-xl shadow-md p-6">
81
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Input Values</h2>
82
+ <div id="input-values" class="space-y-2">
83
+ <!-- Input values will be displayed here -->
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Softmax Output -->
88
+ <div class="bg-white rounded-xl shadow-md p-6">
89
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Softmax Output</h2>
90
+ <div id="output-values" class="space-y-2">
91
+ <!-- Output values will be displayed here -->
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Summary -->
97
+ <div class="bg-blue-50 rounded-xl shadow-md p-6">
98
+ <div class="flex items-start">
99
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
100
+ <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
101
+ </div>
102
+ <div>
103
+ <h2 class="text-xl font-semibold text-gray-800 mb-2">Key Insights</h2>
104
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
105
+ <li>Softmax converts input values to probabilities that sum to 1</li>
106
+ <li>Higher input values get exponentially larger probabilities</li>
107
+ <li>The function is sensitive to differences between values</li>
108
+ <li>Adding a constant to all inputs doesn't change the output</li>
109
+ </ul>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <script>
117
+ document.addEventListener('DOMContentLoaded', function() {
118
+ // Initialize with 3 inputs
119
+ let inputValues = [1, 2, 3];
120
+
121
+ // DOM elements
122
+ const slidersContainer = document.getElementById('sliders-container');
123
+ const inputValuesContainer = document.getElementById('input-values');
124
+ const outputValuesContainer = document.getElementById('output-values');
125
+ const addInputBtn = document.getElementById('add-input');
126
+ const resetBtn = document.getElementById('reset');
127
+
128
+ // Initialize the app
129
+ function init() {
130
+ renderSliders();
131
+ updateVisualization();
132
+ }
133
+
134
+ // Render sliders based on current input values
135
+ function renderSliders() {
136
+ slidersContainer.innerHTML = '';
137
+ inputValuesContainer.innerHTML = '';
138
+
139
+ inputValues.forEach((value, index) => {
140
+ // Create slider container
141
+ const sliderContainer = document.createElement('div');
142
+ sliderContainer.className = 'slider-container bg-gray-50 p-4 rounded-lg';
143
+
144
+ // Create label
145
+ const label = document.createElement('div');
146
+ label.className = 'flex justify-between items-center mb-2';
147
+ label.innerHTML = `
148
+ <span class="font-medium text-gray-700">Input ${index + 1}</span>
149
+ <div class="flex items-center">
150
+ <span class="input-value bg-blue-100 text-blue-800 font-mono px-2 py-1 rounded mr-2">${value.toFixed(2)}</span>
151
+ <button class="delete-btn text-red-500 hover:text-red-700 transition" data-index="${index}">
152
+ <i class="fas fa-trash"></i>
153
+ </button>
154
+ </div>
155
+ `;
156
+
157
+ // Create slider
158
+ const slider = document.createElement('input');
159
+ slider.type = 'range';
160
+ slider.min = '-5';
161
+ slider.max = '5';
162
+ slider.step = '0.1';
163
+ slider.value = value;
164
+ slider.className = 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer';
165
+ slider.dataset.index = index;
166
+
167
+ // Add event listener
168
+ slider.addEventListener('input', function() {
169
+ const index = parseInt(this.dataset.index);
170
+ const value = parseFloat(this.value);
171
+ inputValues[index] = value;
172
+
173
+ // Update the displayed value
174
+ this.parentNode.querySelector('.input-value').textContent = value.toFixed(2);
175
+
176
+ updateVisualization();
177
+ });
178
+
179
+ // Add delete button event listener
180
+ const deleteBtn = label.querySelector('.delete-btn');
181
+ deleteBtn.addEventListener('click', function() {
182
+ if (inputValues.length > 1) {
183
+ const index = parseInt(this.dataset.index);
184
+ inputValues.splice(index, 1);
185
+ renderSliders();
186
+ updateVisualization();
187
+ } else {
188
+ alert("You need at least one input!");
189
+ }
190
+ });
191
+
192
+ // Assemble slider container
193
+ sliderContainer.appendChild(label);
194
+ sliderContainer.appendChild(slider);
195
+ slidersContainer.appendChild(sliderContainer);
196
+ });
197
+ }
198
+
199
+ // Calculate softmax function
200
+ function softmax(values) {
201
+ const max = Math.max(...values);
202
+ const exps = values.map(x => Math.exp(x - max)); // Numerical stability
203
+ const sumExps = exps.reduce((a, b) => a + b, 0);
204
+ return exps.map(exp => exp / sumExps);
205
+ }
206
+
207
+ // Update all visualizations
208
+ function updateVisualization() {
209
+ const softmaxOutput = softmax(inputValues);
210
+
211
+ // Update input values display
212
+ inputValuesContainer.innerHTML = inputValues.map((value, index) => `
213
+ <div class="flex justify-between items-center py-2 px-3 rounded ${index % 2 === 0 ? 'bg-gray-50' : ''}">
214
+ <span class="font-medium">Input ${index + 1}</span>
215
+ <span class="font-mono text-blue-600">${value.toFixed(4)}</span>
216
+ </div>
217
+ `).join('');
218
+
219
+ // Update output values display
220
+ outputValuesContainer.innerHTML = softmaxOutput.map((value, index) => {
221
+ const percent = (value * 100).toFixed(2);
222
+ return `
223
+ <div class="bar-container">
224
+ <div class="flex justify-between items-center mb-1">
225
+ <span class="font-medium">Output ${index + 1}</span>
226
+ <span class="font-mono text-green-600">${value.toFixed(4)} <span class="text-gray-500">(${percent}%)</span></span>
227
+ </div>
228
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
229
+ <div class="bg-gradient-to-r from-blue-400 to-blue-600 h-2.5 rounded-full"
230
+ style="width: ${percent}%"></div>
231
+ </div>
232
+ </div>
233
+ `;
234
+ }).join('');
235
+ }
236
+
237
+ // Event listeners
238
+ addInputBtn.addEventListener('click', function() {
239
+ if (inputValues.length < 8) {
240
+ // Add a new input with value similar to the last one
241
+ const newValue = inputValues.length > 0 ? inputValues[inputValues.length - 1] : 0;
242
+ inputValues.push(newValue);
243
+ renderSliders();
244
+ updateVisualization();
245
+ } else {
246
+ alert("Maximum of 8 inputs reached!");
247
+ }
248
+ });
249
+
250
+ resetBtn.addEventListener('click', function() {
251
+ inputValues = [1, 2, 3];
252
+ renderSliders();
253
+ updateVisualization();
254
+ });
255
+
256
+ // Initialize the app
257
+ init();
258
+ });
259
+ </script>
260
+ </body>
261
+ </html>