| {% extends "base.html" %}
|
|
|
| {% block title %}Camera to LaTeX | TexLab{% endblock %}
|
|
|
| {% block extra_css %}
|
| <style>
|
| .feature-card {
|
| display: inline-block;
|
| width: 100%;
|
| height: auto !important;
|
| padding: 20px 25px;
|
| margin-bottom: 20px;
|
| background: #fff;
|
| border-radius: 12px;
|
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
| }
|
| .camera-container {
|
| position: relative;
|
| width: 100%;
|
| max-width: 600px;
|
| margin: 0 auto 20px;
|
| border-radius: 15px;
|
| overflow: hidden;
|
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
| }
|
|
|
| .camera-preview {
|
| width: 100%;
|
| display: block;
|
| background: #000;
|
| }
|
|
|
| .capture-btn {
|
| position: absolute;
|
| bottom: 20px;
|
| left: 50%;
|
| transform: translateX(-50%);
|
| width: 70px;
|
| height: 70px;
|
| border-radius: 50%;
|
| background: rgba(255, 255, 255, 0.2);
|
| border: 3px solid white;
|
| cursor: pointer;
|
| transition: all 0.2s ease;
|
| }
|
|
|
| .capture-btn:hover {
|
| background: rgba(255, 255, 255, 0.3);
|
| transform: translateX(-50%) scale(1.1);
|
| }
|
|
|
| .capture-btn:active {
|
| transform: translateX(-50%) scale(0.95);
|
| }
|
|
|
| .capture-btn-inner {
|
| width: 100%;
|
| height: 100%;
|
| border-radius: 50%;
|
| background: white;
|
| }
|
|
|
| .image-preview {
|
| max-width: 100%;
|
| max-height: 400px;
|
| margin: 20px auto;
|
| display: block;
|
| border-radius: 10px;
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .latex-output {
|
| background: #f8f9fa;
|
| border-radius: 10px;
|
| padding: 20px;
|
| border: 1px solid #eee;
|
| font-family: 'Consolas', 'Courier New', monospace;
|
| font-size: 1.1rem;
|
| white-space: pre-wrap;
|
| word-break: break-all;
|
| min-height: 100px;
|
| margin: 20px 0;
|
| }
|
|
|
| .rendered-output {
|
| background: white;
|
| border-radius: 10px;
|
| padding: 20px;
|
| border: 1px solid #eee;
|
| min-height: 100px;
|
| margin: 20px 0;
|
| text-align: center;
|
| }
|
|
|
| .solution-output {
|
| background: #e8f5e9;
|
| border-radius: 10px;
|
| padding: 20px;
|
| border: 1px solid #c8e6c9;
|
| margin: 20px 0;
|
| display: none;
|
| }
|
|
|
| .solution-title {
|
| color: #2e7d32;
|
| margin-bottom: 15px;
|
| font-weight: 600;
|
| }
|
|
|
| .solution-content {
|
| font-family: 'Consolas', 'Courier New', monospace;
|
| font-size: 1.1rem;
|
| white-space: pre-wrap;
|
| }
|
|
|
| .loading {
|
| display: none;
|
| text-align: center;
|
| padding: 20px;
|
| }
|
|
|
| .spinner {
|
| border: 4px solid rgba(0, 0, 0, 0.1);
|
| border-radius: 50%;
|
| border-top: 4px solid #667eea;
|
| width: 40px;
|
| height: 40px;
|
| animation: spin 1s linear infinite;
|
| margin: 0 auto 15px;
|
| }
|
|
|
| @keyframes spin {
|
| 0% { transform: rotate(0deg); }
|
| 100% { transform: rotate(360deg); }
|
| }
|
|
|
| .button-row {
|
| display: flex;
|
| gap: 15px;
|
| justify-content: center;
|
| margin: 20px 0;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .permission-error {
|
| text-align: center;
|
| padding: 30px;
|
| color: #666;
|
| }
|
|
|
| .permission-error i {
|
| font-size: 3rem;
|
| color: #dc3545;
|
| margin-bottom: 20px;
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .button-row {
|
| flex-direction: column;
|
| align-items: center;
|
| }
|
|
|
| .button-row .btn {
|
| width: 100%;
|
| max-width: 300px;
|
| }
|
| }
|
| </style>
|
| {% endblock %}
|
|
|
| {% block content %}
|
| <div class="page-header">
|
| <h1 class="page-title"><i class="fas fa-camera me-2"></i>Camera to LaTeX</h1>
|
| <p class="page-subtitle">
|
| Capture mathematical equations with your camera and convert them to clean, editable LaTeX code.
|
| </p>
|
| </div>
|
|
|
| <div class="row">
|
| <div class="col-lg-10 mx-auto">
|
| <div class="feature-card">
|
| <h3 class="section-title">Capture Equation</h3>
|
|
|
| <div class="camera-container">
|
| <video id="cameraPreview" class="camera-preview" autoplay playsinline></video>
|
| <div class="capture-btn" id="captureBtn">
|
| <div class="capture-btn-inner"></div>
|
| </div>
|
| </div>
|
|
|
| <div class="permission-error" id="permissionError" style="display: none;">
|
| <i class="fas fa-exclamation-triangle"></i>
|
| <h4>Camera Permission Required</h4>
|
| <p>Please allow camera access to use this feature.</p>
|
| <button id="retryPermission" class="btn btn-primary-gradient mt-3">
|
| <i class="fas fa-redo me-2"></i>Retry Camera Access
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div class="loading" id="loading">
|
| <div class="spinner"></div>
|
| <p>Processing your equation... This may take a few seconds.</p>
|
| </div>
|
|
|
| <div class="feature-card" id="resultCard" style="display: none;">
|
| <h3 class="section-title">Generated LaTeX</h3>
|
|
|
| <div class="image-preview-container" id="imagePreviewContainer" style="display: none;">
|
| <h5>Captured Image:</h5>
|
| <img id="imagePreview" class="image-preview" alt="Captured equation">
|
| </div>
|
|
|
| <div class="rendered-output">
|
| <h5>Rendered Equation:</h5>
|
| <div id="renderedContent"></div>
|
| </div>
|
|
|
| <div class="latex-output" id="latexOutput"></div>
|
|
|
| <div class="solution-output" id="solutionOutput">
|
| <h5 class="solution-title"><i class="fas fa-calculator me-2"></i>Solution</h5>
|
| <div class="solution-content" id="solutionContent"></div>
|
| </div>
|
|
|
| <div class="button-row">
|
| <button id="solveBtn" class="btn btn-accent-gradient">
|
| <i class="fas fa-calculator me-2"></i>Solve Equation
|
| </button>
|
| <button id="copyBtn" class="btn btn-secondary-gradient">
|
| <i class="fas fa-copy me-2"></i>Copy LaTeX
|
| </button>
|
| <button id="newCapture" class="btn btn-neutral">
|
| <i class="fas fa-camera me-2"></i>New Capture
|
| </button>
|
| <a href="/" class="btn btn-neutral">
|
| <i class="fas fa-home me-2"></i>Back to Home
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| {% endblock %}
|
|
|
| {% block extra_js %}
|
| <script>
|
|
|
| const cameraPreview = document.getElementById('cameraPreview');
|
| const captureBtn = document.getElementById('captureBtn');
|
| const permissionError = document.getElementById('permissionError');
|
| const retryPermission = document.getElementById('retryPermission');
|
| const resultCard = document.getElementById('resultCard');
|
| const loading = document.getElementById('loading');
|
| const imagePreview = document.getElementById('imagePreview');
|
| const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
| const solveBtn = document.getElementById('solveBtn');
|
| const solutionOutput = document.getElementById('solutionOutput');
|
|
|
|
|
| let currentStream = null;
|
| let currentLatex = '';
|
|
|
|
|
| async function initCamera() {
|
| try {
|
| const stream = await navigator.mediaDevices.getUserMedia({
|
| video: {
|
| facingMode: 'environment',
|
| width: { ideal: 1280 },
|
| height: { ideal: 720 }
|
| }
|
| });
|
|
|
| currentStream = stream;
|
| cameraPreview.srcObject = stream;
|
| permissionError.style.display = 'none';
|
| } catch (err) {
|
| console.error('Camera error:', err);
|
| permissionError.style.display = 'block';
|
| cameraPreview.style.display = 'none';
|
| }
|
| }
|
|
|
|
|
| retryPermission.addEventListener('click', initCamera);
|
|
|
|
|
| captureBtn.addEventListener('click', async () => {
|
| if (!currentStream) return;
|
|
|
| try {
|
| loading.style.display = 'block';
|
| resultCard.style.display = 'none';
|
| solutionOutput.style.display = 'none';
|
|
|
|
|
| const canvas = document.createElement('canvas');
|
| const video = cameraPreview;
|
| canvas.width = video.videoWidth;
|
| canvas.height = video.videoHeight;
|
| const ctx = canvas.getContext('2d');
|
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
|
| canvas.toBlob(async (blob) => {
|
| const formData = new FormData();
|
| formData.append('image', blob, 'capture.jpg');
|
|
|
| try {
|
| const response = await fetch('/camera/process', {
|
| method: 'POST',
|
| body: formData
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (data.success) {
|
| currentLatex = data.latex;
|
|
|
|
|
| imagePreview.src = canvas.toDataURL('image/jpeg');
|
| imagePreviewContainer.style.display = 'block';
|
|
|
|
|
| document.getElementById('latexOutput').textContent = data.latex;
|
| document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
|
|
|
|
|
| if (typeof MathJax !== 'undefined') {
|
| MathJax.typesetPromise([document.getElementById('renderedContent')]);
|
| }
|
|
|
|
|
| resultCard.style.display = 'block';
|
| } else {
|
| alert('Error: ' + data.error);
|
| }
|
| } catch (error) {
|
| console.error('Processing error:', error);
|
| alert('An error occurred during processing. Please try again.');
|
| } finally {
|
| loading.style.display = 'none';
|
| }
|
| }, 'image/jpeg', 0.9);
|
|
|
| } catch (error) {
|
| console.error('Capture error:', error);
|
| alert('An error occurred during capture. Please try again.');
|
| loading.style.display = 'none';
|
| }
|
| });
|
|
|
|
|
| solveBtn.addEventListener('click', async () => {
|
| if (!currentLatex) return;
|
|
|
| try {
|
| loading.style.display = 'block';
|
|
|
| const response = await fetch('/camera/solve', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({ latex: currentLatex })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (data.success) {
|
| const solution = data.solution;
|
| let solutionText = '';
|
|
|
| if (solution.type === 'equation') {
|
| solutionText = `Solutions:\n${solution.solutions.join('\n')}`;
|
| } else if (solution.type === 'expression') {
|
| solutionText = `Simplified:\n${solution.result}`;
|
| } else if (solution.type === 'numerical') {
|
| solutionText = `Numerical value:\n${solution.result}`;
|
| } else if (solution.type === 'system') {
|
| solutionText = `System solutions:\n${JSON.stringify(solution.solutions)}`;
|
| } else if (solution.type === 'error') {
|
| solutionText = `Error: ${solution.message}`;
|
| }
|
|
|
| document.getElementById('solutionContent').textContent = solutionText;
|
| solutionOutput.style.display = 'block';
|
| } else {
|
| alert('Error: ' + data.error);
|
| }
|
| } catch (error) {
|
| console.error('Solving error:', error);
|
| alert('An error occurred while solving the equation. Please try again.');
|
| } finally {
|
| loading.style.display = 'none';
|
| }
|
| });
|
|
|
|
|
| document.getElementById('copyBtn').addEventListener('click', () => {
|
| const latexText = document.getElementById('latexOutput').textContent;
|
| navigator.clipboard.writeText(latexText).then(() => {
|
| showNotification('LaTeX code copied to clipboard!');
|
| }).catch(err => {
|
| console.error('Failed to copy: ', err);
|
| alert('Failed to copy LaTeX code. Please try again.');
|
| });
|
| });
|
|
|
|
|
| document.getElementById('newCapture').addEventListener('click', () => {
|
| resultCard.style.display = 'none';
|
| solutionOutput.style.display = 'none';
|
| });
|
|
|
|
|
| window.addEventListener('load', initCamera);
|
|
|
|
|
| window.addEventListener('beforeunload', () => {
|
| if (currentStream) {
|
| currentStream.getTracks().forEach(track => track.stop());
|
| }
|
| });
|
| </script>
|
| {% endblock %} |