Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculus Calculator & Python Script Generator</title> | |
| <!-- Import Math.js for Calculus Calculations --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.js"></script> | |
| <!-- Import FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --card-bg: rgba(255, 255, 255, 0.95); | |
| --text-color: #1f2937; | |
| --border-radius: 16px; | |
| --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: var(--bg-gradient); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| color: var(--text-color); | |
| } | |
| .app-container { | |
| background: var(--card-bg); | |
| width: 100%; | |
| max-width: 900px; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header Section */ | |
| header { | |
| padding: 25px; | |
| border-bottom: 1px solid #e5e7eb; | |
| background: #f9fafb; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .footer-link { | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .footer-link:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Main Content Grid */ | |
| main { | |
| padding: 30px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| } | |
| @media (max-width: 768px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Left Side: Calculator */ | |
| .calculator-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .section-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: #374151; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .input-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| label { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: #4b5563; | |
| } | |
| .input-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .input-wrapper i { | |
| position: absolute; | |
| left: 15px; | |
| color: #9ca3af; | |
| font-size: 1rem; | |
| } | |
| input, select { | |
| width: 100%; | |
| padding: 12px 12px 12px 45px; | |
| border: 2px solid #e5e7eb; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| outline: none; | |
| background: #fff; | |
| } | |
| input:focus, select:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| .btn-group { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-top: 10px; | |
| } | |
| button { | |
| padding: 14px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-calc { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-calc:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-copy { | |
| background: #e5e7eb; | |
| color: #374151; | |
| } | |
| .btn-copy:hover { | |
| background: #d1d5db; | |
| } | |
| /* Results Area */ | |
| .result-panel { | |
| margin-top: 25px; | |
| padding: 20px; | |
| background: #f3f4f6; | |
| border-radius: 12px; | |
| border-left: 5px solid var(--primary-color); | |
| } | |
| .result-label { | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: #6b7280; | |
| margin-bottom: 10px; | |
| font-weight: 700; | |
| } | |
| .math-expression { | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 1.2rem; | |
| color: #111827; | |
| margin-bottom: 15px; | |
| line-height: 1.6; | |
| background: #fff; | |
| padding: 10px; | |
| border-radius: 6px; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .final-answer { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| font-family: 'Courier New', Courier, monospace; | |
| } | |
| /* Right Side: Python Script Generator */ | |
| .python-section { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .code-container { | |
| flex-grow: 1; | |
| position: relative; | |
| background: #1e1e1e; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| margin-bottom: 20px; | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.5); | |
| } | |
| .code-header { | |
| background: #2d2d2d; | |
| padding: 10px 15px; | |
| display: flex; | |
| gap: 8px; | |
| border-bottom: 1px solid #333; | |
| } | |
| .dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .dot.red { background: #ff5f56; } | |
| .dot.yellow { background: #ffbd2e; } | |
| .dot.green { background: #27c93f; } | |
| pre { | |
| padding: 20px; | |
| color: #d4d4d4; | |
| font-family: 'Fira Code', 'Consolas', monospace; | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| overflow: auto; | |
| max-height: 400px; | |
| } | |
| .keyword { color: #569cd6; } | |
| .string { color: #ce9178; } | |
| .function { color: #dcdcaa; } | |
| .number { color: #b5cea8; } | |
| .comment { color: #6a9955; } | |
| .python-desc { | |
| font-size: 0.9rem; | |
| color: #4b5563; | |
| line-height: 1.5; | |
| } | |
| /* Responsive Tweaks */ | |
| @media (max-width: 480px) { | |
| header { | |
| flex-direction: column; | |
| gap: 15px; | |
| text-align: center; | |
| } | |
| h1 { justify-content: center; } | |
| .footer-link { justify-content: center; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <header> | |
| <h1><i class="fa-solid fa-calculator"></i> Calculus Pro</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link"> | |
| <i class="fa-solid fa-code"></i> Built with anycoder | |
| </a> | |
| </header> | |
| <main> | |
| <!-- Left Side: Interactive Calculator --> | |
| <div class="calculator-section"> | |
| <div class="section-title"> | |
| <i class="fa-solid fa-calculator"></i> Interactive Calculator | |
| </div> | |
| <div class="input-group"> | |
| <label for="functionInput">Enter Function f(x)</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-function"></i> | |
| <input type="text" id="functionInput" placeholder="e.g., x^2 + sin(x)" value="x^2"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label for="operationType">Operation Type</label> | |
| <select id="operationType" onchange="toggleInputVisibility()"> | |
| <option value="differentiate">Differentiation (Derivative)</option> | |
| <option value="integrate">Integration (Antiderivative)</option> | |
| </select> | |
| </div> | |
| <!-- Dynamic Input for Derivative Point or Integral Bounds --> | |
| <div class="input-group" id="calcParams"> | |
| <label for="calcValue">Point / Upper Bound (a)</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-arrow-right"></i> | |
| <input type="number" id="calcValue" placeholder="e.g., 2" value="2"> | |
| </div> | |
| <label style="margin-top: 5px; margin-bottom: 0;">Lower Bound (b) [Optional for Definite]</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-arrow-left"></i> | |
| <input type="number" id="calcValue2" placeholder="e.g., 0" value="0"> | |
| </div> | |
| </div> | |
| <div class="btn-group"> | |
| <button class="btn-calc" onclick="calculateCalculus()"> | |
| <i class="fa-solid fa-play"></i> Calculate | |
| </button> | |
| <button class="btn-copy" onclick="copyToClipboard()"> | |
| <i class="fa-regular fa-copy"></i> Copy Result | |
| </button> | |
| </div> | |
| <div class="result-panel"> | |
| <div class="result-label">Step-by-Step Logic</div> | |
| <div id="logicDisplay" class="math-expression" style="font-size: 1rem;"> | |
| Enter a function and select an operation to see the result here. | |
| </div> | |
| <div class="result-label" style="margin-top: 15px;">Final Result</div> | |
| <div id="resultDisplay" class="final-answer"> | |
| 0 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side: Python Script Generator --> | |
| <div class="python-section"> | |
| <div class="section-title"> | |
| <i class="fa-solid fa-file-code"></i> Python Script Generator | |
| </div> | |
| <p class="python-desc"> | |
| Need to run this on a server? Here is the Python script using <code>sympy</code> to perform the same calculations. You can copy this code and run it in your local environment. | |
| </p> | |
| <div class="code-container"> | |
| <div class="code-header"> | |
| <div class="dot red"></div> | |
| <div class="dot yellow"></div> | |
| <div class="dot green"></div> | |
| </div> | |
| <pre id="pythonCodeOutput"> | |
| <span class="comment"># Calculus Script Generated by AnyCoder</span> | |
| <span class="keyword">import</span> sympy <span class="keyword">as</span> sp | |
| <span class="comment"># Define the variable</span> | |
| x = sp.symbols(<span class="string">'x'</span>) | |
| <span class="comment"># Define the function</span> | |
| f_string = <span class="string">"x**2"</span> <span class="comment"># User input goes here</span> | |
| f = sp.sympify(f_string) | |
| <span class="comment"># Operation: Differentiation</span> | |
| derivative = sp.diff(f, x) | |
| print(<span class="string">f"Derivative: {derivative}"</span>) | |
| <span class="comment"># Operation: Integration (Definite)</span> | |
| integral = sp.integrate(f, (x, 0, 2)) | |
| print(<span class="string">f"Definite Integral from 0 to 2: {integral}"</span>) | |
| </pre> | |
| </div> | |
| <button class="btn-copy" style="width: 100%;" onclick="copyPythonCode()"> | |
| <i class="fa-regular fa-copy"></i> Copy Python Code | |
| </button> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Logic for the Web Calculator | |
| const functionInput = document.getElementById('functionInput'); | |
| const operationType = document.getElementById('operationType'); | |
| const calcValue = document.getElementById('calcValue'); | |
| const calcValue2 = document.getElementById('calcValue2'); | |
| const logicDisplay = document.getElementById('logicDisplay'); | |
| const resultDisplay = document.getElementById('resultDisplay'); | |
| // Toggle visibility of bounds based on operation | |
| function toggleInputVisibility() { | |
| const paramsDiv = document.getElementById('calcParams'); | |
| if (operationType.value === 'differentiate') { | |
| // For derivative, we only need one point | |
| calcValue2.style.display = 'none'; | |
| paramsDiv.querySelector('label:nth-of-type(2)').style.display = 'none'; | |
| } else { | |
| // For integral, we need bounds | |
| calcValue2.style.display = 'block'; | |
| paramsDiv.querySelector('label:nth-of-type(2)').style.display = 'block'; | |
| } | |
| } | |
| // Helper to format math symbols for display | |
| function formatMathDisplay(expr, isDerivative = false, point = null) { | |
| let html = String(expr); | |
| // Basic replacements for better visual appearance | |
| html = html.replace(/\^/g, '<sup>'); | |
| html = html.replace(/(\d+)<\/sup>/g, '</sup>$1'); // Fix order | |
| html = html.replace(/\*/g, ' · '); | |
| html = html.replace(/sin/g, 'sin'); | |
| html = html.replace(/cos/g, 'cos'); | |
| html = html.replace(/log/g, 'log'); | |
| html = html.replace(/sqrt/g, '√'); | |
| if (isDerivative) { | |
| return `<span style="color:#4b5563">Given:</span> f(x) = ${html}<br><span style="color:#4b5563">Find:</span> f'(x)`; | |
| } else { | |
| return `<span style="color:#4b5563">Given:</span> ∫ f(x) dx<br><span style="color:#4b5563">Limits:</span> ${point ? `from ${calcValue2.value} to ${calcValue.value}` : 'Indefinite'}`; | |
| } | |
| } | |
| function calculateCalculus() { | |
| const funcStr = functionInput.value; | |
| const op = operationType.value; | |
| try { | |
| // Create a math.js scope | |
| const scope = { x: 2 }; // Dummy value for parsing | |
| const expression = math.evaluate(funcStr, scope); | |
| logicDisplay.innerHTML = "Analyzing function..."; | |
| if (op === 'differentiate') { | |
| // Calculate Derivative | |
| const derivative = math.derivative(funcStr, 'x'); | |
| const derivativeStr = derivative.toString(); | |
| logicDisplay.innerHTML = ` | |
| <span style="color:#4b5563">Function:</span> ${funcStr.replace(/\*/g, '')}<br> | |
| <span style="color:#4b5563">Applied Rule:</span> Power Rule / Chain Rule<br> | |
| <span style="color:#4b5563">Derivative Function:</span> ${derivativeStr} | |
| `; | |
| // Calculate value at point if provided | |
| let pointVal = calcValue.value || 0; | |
| if (pointVal !== "") { | |
| const result = math.evaluate(derivativeStr, { x: parseFloat(pointVal) }); | |
| resultDisplay.innerHTML = `${result.toFixed(4)} (at x = ${pointVal})`; | |
| } else { | |
| resultDisplay.innerHTML = derivativeStr; | |
| } | |
| } else if (op === 'integrate') { | |
| // Calculate Integral | |
| const integral = math.integral(funcStr, 'x'); | |
| const integralStr = integral.toString(); | |
| logicDisplay.innerHTML = ` | |
| <span style="color:#4b5563">Function:</span> ${funcStr.replace(/\*/g, '')}<br> | |
| <span style="color:#4b5563">Applied Rule:</span> Power Rule / Substitution<br> | |
| <span style="color:#4b5563">Indefinite Integral:</span> ${integralStr} + C | |
| `; | |
| // Calculate Definite Integral if bounds provided | |
| let lower = calcValue2.value !== "" ? parseFloat(calcValue2.value) : null; | |
| let upper = calcValue.value !== "" ? parseFloat(calcValue.value) : null; | |
| if (lower !== null && upper !== null) { | |
| // Create a function from the integral string | |
| const integralFunc = math.compile(integralStr); | |
| const upperVal = integralFunc.evaluate({ x: upper }); | |
| const lowerVal = integralFunc.evaluate({ x: lower }); | |
| const definiteResult = upperVal - lowerVal; | |
| resultDisplay.innerHTML = `${definiteResult.toFixed(4)} (Definite Integral)`; | |
| logicDisplay.innerHTML += `<br><span style="color:#4b5563">Calculation:</span> F(${upper}) - F(${lower}) = ${definiteResult.toFixed(4)}`; | |
| } else { | |
| resultDisplay.innerHTML = integralStr + " + C"; | |
| } | |
| } | |
| } catch (error) { | |
| logicDisplay.innerHTML = `<span style="color:red">Error parsing expression. Please check syntax.</span>`; | |
| logicDisplay.innerHTML += `<br><small>${error.message}</small>`; | |
| resultDisplay.innerHTML = "Invalid Input"; | |
| } | |
| } | |
| // Copy to Clipboard | |
| function copyToClipboard() { | |
| const text = resultDisplay.innerText; | |
| navigator.clipboard.writeText(text).then(() => { | |
| const btn = document.querySelector('.btn-copy'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| // Python Code Generator Logic | |
| function updatePythonCode() { | |
| const funcStr = functionInput.value; | |
| // Convert JS power operator ^ to Python ** for display | |
| const pythonFunc = funcStr.replace(/\^/g, '**'); | |
| const codeBlock = document.getElementById('pythonCodeOutput'); | |
| const htmlContent = ` | |
| <span class="comment"># Calculus Script Generated by AnyCoder</span> | |
| <span class="keyword">import</span> sympy <span class="keyword">as</span> sp | |
| <span class="comment"># Define the variable</span> | |
| x = sp.symbols(<span class="string">'x'</span>) | |
| <span class="comment"># Define the function (User Input)</span> | |
| f_string = <span class="string">"${pythonFunc}"</span> | |
| f = sp.sympify(f_string) | |
| <span class="comment"># Operation: ${operationType.value === 'differentiate' ? 'Differentiation' : 'Integration'}</span> | |
| `; | |
| if (operationType.value === 'differentiate') { | |
| codeBlock.innerHTML = htmlContent + ` | |
| derivative = sp.diff(f, x) | |
| print(<span class="string">f"Derivative: {derivative}"</span>) | |
| <span class="comment"># To evaluate at a specific point (e.g., x=2):</span> | |
| point_value = 2 | |
| result = derivative.subs(x, point_value) | |
| print(<span class="string">f"Derivative at x={point_value}: {result}"</span>) | |
| `; | |
| } else { | |
| codeBlock.innerHTML = htmlContent + ` | |
| <span class="comment"># Indefinite Integral</span> | |
| indefinite_integral = sp.integrate(f, x) | |
| print(<span class="string">f"Indefinite Integral: {indefinite_integral} + C"</span>) | |
| <span class="comment"># Definite Integral (e.g., from 0 to 2)</span> | |
| definite_integral = sp.integrate(f, (x, 0, 2)) | |
| print(<span class="string">f"Definite Integral from 0 to 2: {definite_integral}"</span>) | |
| `; | |
| } | |
| } | |
| function copyPythonCode() { | |
| const codeBlock = document.getElementById('pythonCodeOutput').innerText; | |
| navigator.clipboard.writeText(codeBlock).then(() => { | |
| const btn = document.querySelector('.python-section .btn-copy'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fa-solid fa-check"></i> Code Copied!'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| toggleInputVisibility(); | |
| calculateCalculus(); // Run initial calculation | |
| // Listeners for real-time updates | |
| functionInput.addEventListener('input', updatePythonCode); | |
| operationType.addEventListener('change', () => { | |
| toggleInputVisibility(); | |
| updatePythonCode(); | |
| calculateCalculus(); | |
| }); | |
| calcValue.addEventListener('input', calculateCalculus); | |
| calcValue2.addEventListener('input', calculateCalculus); | |
| }); | |
| </script> | |
| </body> | |
| </html> |