Hugging Face's logo

Spaces:
shism
/
symcalc
Running

App Files Community
shism commited on
Commit
ca16717
·
verified ·
1 Parent(s): b1a4066

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +324 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Symcalc
3
- emoji: 🏃
4
  colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: symcalc
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,324 @@
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>SymCalc - Symbolic Calculator</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
+ .calculator-screen {
11
+ height: 120px;
12
+ overflow-y: auto;
13
+ scrollbar-width: thin;
14
+ scrollbar-color: #4f46e5 #e5e7eb;
15
+ }
16
+ .calculator-screen::-webkit-scrollbar {
17
+ width: 6px;
18
+ }
19
+ .calculator-screen::-webkit-scrollbar-track {
20
+ background: #e5e7eb;
21
+ }
22
+ .calculator-screen::-webkit-scrollbar-thumb {
23
+ background-color: #4f46e5;
24
+ border-radius: 3px;
25
+ }
26
+ .symbol-btn {
27
+ transition: all 0.2s ease;
28
+ }
29
+ .symbol-btn:hover {
30
+ transform: translateY(-2px);
31
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
32
+ }
33
+ .history-item:hover {
34
+ background-color: #f3f4f6;
35
+ cursor: pointer;
36
+ }
37
+ .fade-in {
38
+ animation: fadeIn 0.3s ease-in-out;
39
+ }
40
+ @keyframes fadeIn {
41
+ from { opacity: 0; transform: translateY(10px); }
42
+ to { opacity: 1; transform: translateY(0); }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
47
+ <div class="w-full max-w-md">
48
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
49
+ <!-- Header -->
50
+ <div class="bg-indigo-600 p-4 flex items-center justify-between">
51
+ <div class="flex items-center space-x-2">
52
+ <i class="fas fa-infinity text-white text-xl"></i>
53
+ <h1 class="text-white font-bold text-xl">SymCalc</h1>
54
+ </div>
55
+ <div class="flex space-x-2">
56
+ <button class="text-white hover:bg-indigo-700 p-2 rounded-full transition">
57
+ <i class="fas fa-history"></i>
58
+ </button>
59
+ <button class="text-white hover:bg-indigo-700 p-2 rounded-full transition">
60
+ <i class="fas fa-cog"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Calculator Screen -->
66
+ <div class="p-4">
67
+ <div class="calculator-screen bg-gray-50 rounded-lg p-4 mb-4 font-mono text-right">
68
+ <div id="expression" class="text-gray-500 text-lg h-8 overflow-x-auto whitespace-nowrap"></div>
69
+ <div id="result" class="text-2xl font-bold text-gray-800 mt-2"></div>
70
+ <div id="error" class="text-red-500 text-sm mt-1"></div>
71
+ </div>
72
+
73
+ <!-- Symbolic Input Buttons -->
74
+ <div class="grid grid-cols-5 gap-2 mb-3">
75
+ <button onclick="addSymbol('π')" class="symbol-btn bg-indigo-100 text-indigo-700 p-3 rounded-lg font-bold">π</button>
76
+ <button onclick="addSymbol('e')" class="symbol-btn bg-indigo-100 text-indigo-700 p-3 rounded-lg font-bold">e</button>
77
+ <button onclick="addSymbol('√(')" class="symbol-btn bg-indigo-100 text-indigo-700 p-3 rounded-lg font-bold">√</button>
78
+ <button onclick="addSymbol('^')" class="symbol-btn bg-indigo-100 text-indigo-700 p-3 rounded-lg font-bold">^</button>
79
+ <button onclick="addSymbol('!')" class="symbol-btn bg-indigo-100 text-indigo-700 p-3 rounded-lg font-bold">!</button>
80
+
81
+ <button onclick="addSymbol('sin(')" class="symbol-btn bg-indigo-50 text-indigo-600 p-3 rounded-lg">sin</button>
82
+ <button onclick="addSymbol('cos(')" class="symbol-btn bg-indigo-50 text-indigo-600 p-3 rounded-lg">cos</button>
83
+ <button onclick="addSymbol('tan(')" class="symbol-btn bg-indigo-50 text-indigo-600 p-3 rounded-lg">tan</button>
84
+ <button onclick="addSymbol('ln(')" class="symbol-btn bg-indigo-50 text-indigo-600 p-3 rounded-lg">ln</button>
85
+ <button onclick="addSymbol('log(')" class="symbol-btn bg-indigo-50 text-indigo-600 p-3 rounded-lg">log</button>
86
+ </div>
87
+
88
+ <!-- Standard Calculator Buttons -->
89
+ <div class="grid grid-cols-4 gap-2">
90
+ <button onclick="clearAll()" class="symbol-btn bg-red-100 text-red-600 p-3 rounded-lg font-bold">C</button>
91
+ <button onclick="backspace()" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold"><i class="fas fa-backspace"></i></button>
92
+ <button onclick="addSymbol('(')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">(</button>
93
+ <button onclick="addSymbol(')')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">)</button>
94
+
95
+ <button onclick="addSymbol('7')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">7</button>
96
+ <button onclick="addSymbol('8')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">8</button>
97
+ <button onclick="addSymbol('9')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">9</button>
98
+ <button onclick="addSymbol('/')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">÷</button>
99
+
100
+ <button onclick="addSymbol('4')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">4</button>
101
+ <button onclick="addSymbol('5')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">5</button>
102
+ <button onclick="addSymbol('6')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">6</button>
103
+ <button onclick="addSymbol('*')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">×</button>
104
+
105
+ <button onclick="addSymbol('1')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">1</button>
106
+ <button onclick="addSymbol('2')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">2</button>
107
+ <button onclick="addSymbol('3')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">3</button>
108
+ <button onclick="addSymbol('-')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">−</button>
109
+
110
+ <button onclick="addSymbol('0')" class="symbol-btn bg-white text-gray-800 p-3 rounded-lg font-bold shadow-sm">0</button>
111
+ <button onclick="addSymbol('.')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">.</button>
112
+ <button onclick="addSymbol('+')" class="symbol-btn bg-gray-200 text-gray-700 p-3 rounded-lg font-bold">+</button>
113
+ <button onclick="calculate()" class="symbol-btn bg-indigo-600 text-white p-3 rounded-lg font-bold">=</button>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- History Panel (Hidden by default) -->
118
+ <div id="historyPanel" class="hidden bg-gray-50 border-t border-gray-200 max-h-60 overflow-y-auto">
119
+ <div class="p-3 border-b border-gray-200 flex justify-between items-center bg-gray-100">
120
+ <h3 class="font-medium text-gray-700">History</h3>
121
+ <button onclick="clearHistory()" class="text-gray-500 hover:text-red-500">
122
+ <i class="fas fa-trash-alt"></i>
123
+ </button>
124
+ </div>
125
+ <div id="historyList" class="divide-y divide-gray-200"></div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="mt-4 text-center text-gray-500 text-sm">
130
+ <p>SymCalc - Symbolic Mathematics Calculator</p>
131
+ </div>
132
+ </div>
133
+
134
+ <script>
135
+ let currentExpression = '';
136
+ let history = JSON.parse(localStorage.getItem('calcHistory')) || [];
137
+
138
+ // Initialize the calculator
139
+ document.addEventListener('DOMContentLoaded', () => {
140
+ updateScreen();
141
+ renderHistory();
142
+
143
+ // Toggle history panel
144
+ document.querySelector('.fa-history').parentElement.addEventListener('click', toggleHistoryPanel);
145
+
146
+ // Keyboard support
147
+ document.addEventListener('keydown', handleKeyPress);
148
+ });
149
+
150
+ function handleKeyPress(e) {
151
+ const keyMap = {
152
+ '0': '0', '1': '1', '2': '2', '3': '3', '4': '4',
153
+ '5': '5', '6': '6', '7': '7', '8': '8', '9': '9',
154
+ '+': '+', '-': '-', '*': '*', '/': '/',
155
+ '.': '.', '^': '^', '!': '!',
156
+ '(': '(', ')': ')',
157
+ 'Enter': '=',
158
+ 'Backspace': 'backspace',
159
+ 'Escape': 'clear'
160
+ };
161
+
162
+ const key = keyMap[e.key];
163
+ if (key) {
164
+ e.preventDefault();
165
+ if (key === '=') calculate();
166
+ else if (key === 'backspace') backspace();
167
+ else if (key === 'clear') clearAll();
168
+ else addSymbol(key);
169
+ }
170
+ }
171
+
172
+ function addSymbol(symbol) {
173
+ currentExpression += symbol;
174
+ updateScreen();
175
+ }
176
+
177
+ function clearAll() {
178
+ currentExpression = '';
179
+ document.getElementById('error').textContent = '';
180
+ updateScreen();
181
+ }
182
+
183
+ function backspace() {
184
+ currentExpression = currentExpression.slice(0, -1);
185
+ updateScreen();
186
+ }
187
+
188
+ function updateScreen() {
189
+ document.getElementById('expression').textContent = currentExpression || '0';
190
+ document.getElementById('result').textContent = '';
191
+ }
192
+
193
+ function calculate() {
194
+ if (!currentExpression) return;
195
+
196
+ const loadingEl = document.getElementById('loading');
197
+ loadingEl.classList.remove('hidden');
198
+
199
+ // Use setTimeout to allow UI to update before heavy calculation
200
+ setTimeout(() => {
201
+ try {
202
+ // Replace symbolic constants with their values
203
+ let expr = currentExpression
204
+ .replace(/π/g, 'Math.PI')
205
+ .replace(/e/g, 'Math.E')
206
+ .replace(/√\(/g, 'Math.sqrt(')
207
+ .replace(/\^/g, '**')
208
+ .replace(/sin\(/g, 'Math.sin(')
209
+ .replace(/cos\(/g, 'Math.cos(')
210
+ .replace(/tan\(/g, 'Math.tan(')
211
+ .replace(/ln\(/g, 'Math.log(')
212
+ .replace(/log\(/g, 'Math.log10(');
213
+
214
+ // Handle factorial with gamma function for non-integers and better precision
215
+ expr = expr.replace(/([\d.]+)!/g, function(match, num) {
216
+ const n = parseFloat(num);
217
+ if (n < 0) throw "Factorial of negative number";
218
+ if (n > 170) throw "Number too large for factorial";
219
+
220
+ // Use gamma function for non-integers
221
+ if (!Number.isInteger(n)) {
222
+ return `(function gamma(z) {
223
+ const g = 7;
224
+ const p = [
225
+ 0.99999999999980993, 676.5203681218851, -1259.1392167224028,
226
+ 771.32342877765313, -176.61502916214059, 12.507343278686905,
227
+ -0.13857109526572012, 9.9843695780195716e-6, 1.5056327351493116e-7
228
+ ];
229
+ if (z < 0.5) return Math.PI / (Math.sin(Math.PI * z) * gamma(1 - z));
230
+ z -= 1;
231
+ let x = p[0];
232
+ for (let i = 1; i < g + 2; i++) x += p[i] / (z + i);
233
+ const t = z + g + 0.5;
234
+ return Math.sqrt(2 * Math.PI) * Math.pow(t, z + 0.5) * Math.exp(-t) * x;
235
+ })(${n + 1})`;
236
+ }
237
+
238
+ // Simple factorial for integers
239
+ let result = 1;
240
+ for (let i = 2; i <= n; i++) result *= i;
241
+ return result;
242
+ });
243
+
244
+ const result = eval(expr);
245
+ document.getElementById('result').textContent = formatResult(result);
246
+ document.getElementById('error').textContent = '';
247
+
248
+ // Add to history
249
+ addToHistory(currentExpression, result);
250
+
251
+ } catch (error) {
252
+ document.getElementById('error').textContent = 'Error: ' + error;
253
+ document.getElementById('result').textContent = '';
254
+ } finally {
255
+ loadingEl.classList.add('hidden');
256
+ }
257
+ }, 10);
258
+ }
259
+
260
+ function formatResult(num) {
261
+ if (Number.isInteger(num)) return num;
262
+
263
+ // Handle very large/small numbers with scientific notation
264
+ if (Math.abs(num) > 1e12 || (Math.abs(num) < 1e-4 && num !== 0)) {
265
+ return num.toExponential(6).replace(/(\.\d*?[1-9])0+e/, '$1e');
266
+ }
267
+
268
+ // Format with fixed decimal places but remove trailing zeros
269
+ const str = num.toFixed(8);
270
+ if (str.indexOf('.') !== -1) {
271
+ return str.replace(/\.?0+$/, '');
272
+ }
273
+ return str;
274
+ }
275
+
276
+ function addToHistory(expression, result) {
277
+ history.unshift({
278
+ expression,
279
+ result,
280
+ timestamp: new Date().toISOString()
281
+ });
282
+
283
+ if (history.length > 10) history.pop();
284
+
285
+ localStorage.setItem('calcHistory', JSON.stringify(history));
286
+ renderHistory();
287
+ }
288
+
289
+ function renderHistory() {
290
+ const historyList = document.getElementById('historyList');
291
+ historyList.innerHTML = '';
292
+
293
+ history.forEach((item, index) => {
294
+ const historyItem = document.createElement('div');
295
+ historyItem.className = 'p-3 history-item fade-in';
296
+ historyItem.innerHTML = `
297
+ <div class="text-sm text-gray-500">${new Date(item.timestamp).toLocaleTimeString()}</div>
298
+ <div class="font-mono">${item.expression}</div>
299
+ <div class="text-right font-bold text-indigo-600">= ${formatResult(item.result)}</div>
300
+ `;
301
+
302
+ historyItem.addEventListener('click', () => {
303
+ currentExpression = item.expression;
304
+ updateScreen();
305
+ document.getElementById('result').textContent = formatResult(item.result);
306
+ });
307
+
308
+ historyList.appendChild(historyItem);
309
+ });
310
+ }
311
+
312
+ function clearHistory() {
313
+ history = [];
314
+ localStorage.setItem('calcHistory', JSON.stringify(history));
315
+ renderHistory();
316
+ }
317
+
318
+ function toggleHistoryPanel() {
319
+ const panel = document.getElementById('historyPanel');
320
+ panel.classList.toggle('hidden');
321
+ }
322
+ </script>
323
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shism/symcalc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
324
+ </html>