templates/scribble.html

{% extends "base.html" %}

{% block title %}Scribble 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);
}
  .canvas-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: 2px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  #scribbleCanvas {
    width: 100%;
    height: 400px;
    cursor: crosshair;
    display: block;
  }

  .tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
  }

  .tool-btn {
    padding: 10px 20px;
    border-radius: 50px;
    border: none;
    background: #f8f9fa;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  }

  .tool-btn.active {
    background: #667eea;
    color: white;
  }

  .color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
  }

  .color-option.active {
    border-color: #333;
    transform: scale(1.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;
  }

  @media (max-width: 768px) {
    #scribbleCanvas {
      height: 300px;
    }
    
    .button-row {
      flex-direction: column;
      align-items: center;
    }
    
    .button-row .btn, .button-row .tool-btn {
      width: 100%;
      max-width: 300px;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title"><i class="fas fa-pen-fancy me-2"></i>Scribble to LaTeX</h1>
  <p class="page-subtitle">
    Draw mathematical equations on the canvas 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">Draw Your Equation</h3>
      
      <div class="tools">
        <button id="penTool" class="tool-btn active">
          <i class="fas fa-pen"></i> Pen
        </button>
        <button id="eraserTool" class="tool-btn">
          <i class="fas fa-eraser"></i> Eraser
        </button>
        <button id="undoBtn" class="tool-btn">
          <i class="fas fa-undo"></i> Undo
        </button>
        <button id="clearBtn" class="tool-btn">
          <i class="fas fa-trash"></i> Clear
        </button>
        
        <div class="d-flex align-items-center gap-2">
          <div class="color-option active" style="background: #000000;" data-color="#000000"></div>
          <div class="color-option" style="background: #ff0000;" data-color="#ff0000"></div>
          <div class="color-option" style="background: #0000ff;" data-color="#0000ff"></div>
          <div class="color-option" style="background: #00ff00;" data-color="#00ff00"></div>
        </div>
        
        <div class="d-flex align-items-center gap-2">
          <label for="penSize">Size:</label>
          <input type="range" id="penSize" min="1" max="20" value="3" style="width: 100px;">
        </div>
      </div>
      
      <div class="canvas-container">
        <canvas id="scribbleCanvas"></canvas>
      </div>
      
      <div class="text-center mt-4">
        <button id="convertBtn" class="btn btn-primary-gradient">
          <i class="fas fa-cogs me-2"></i>Convert to LaTeX
        </button>
      </div>
    </div>

    <div class="loading" id="loading">
      <div class="spinner"></div>
      <p>Processing your scribble... 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="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="newScribble" class="btn btn-neutral">
          <i class="fas fa-redo me-2"></i>New Scribble
        </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>
  // DOM elements
  const canvas = document.getElementById('scribbleCanvas');
  const ctx = canvas.getContext('2d');
  const convertBtn = document.getElementById('convertBtn');
  const resultCard = document.getElementById('resultCard');
  const loading = document.getElementById('loading');
  const solveBtn = document.getElementById('solveBtn');
  const solutionOutput = document.getElementById('solutionOutput');
  
  // State variables
  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;
  let currentTool = 'pen';
  let currentColor = '#000000';
  let penSize = 3;
  let drawingHistory = [];
  let currentLatex = '';
  
  // Set canvas size
  function resizeCanvas() {
    const container = canvas.parentElement;
    canvas.width = container.clientWidth;
    canvas.height = 400;
    
    // Set background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  
  // Initialize canvas
  window.addEventListener('load', () => {
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
  });
  
  // Drawing functions
  function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
    
    // Save state for undo
    saveCanvasState();
  }
  
  function draw(e) {
    if (!isDrawing) return;
    
    ctx.strokeStyle = currentTool === 'eraser' ? 'white' : currentColor;
    ctx.lineWidth = penSize;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }
  
  function stopDrawing() {
    isDrawing = false;
  }
  
  // Save canvas state for undo
  function saveCanvasState() {
    drawingHistory.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
    // Limit history to 50 states to prevent memory issues
    if (drawingHistory.length > 50) {
      drawingHistory.shift();
    }
  }
  
  // Undo last action
  function undo() {
    if (drawingHistory.length > 0) {
      const prevState = drawingHistory.pop();
      ctx.putImageData(prevState, 0, 0);
    }
  }
  
  // Clear canvas
  function clearCanvas() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawingHistory = [];
  }
  
  // Get canvas as data URL
  function getCanvasData() {
    return canvas.toDataURL('image/png');
  }
  
  // Event listeners for drawing
  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseout', stopDrawing);
  
  // Touch events for mobile
  canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousedown', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
  });
  
  canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
  });
  
  canvas.addEventListener('touchend', (e) => {
    e.preventDefault();
    const mouseEvent = new MouseEvent('mouseup', {});
    canvas.dispatchEvent(mouseEvent);
  });
  
  // Tool buttons
  document.getElementById('penTool').addEventListener('click', () => {
    currentTool = 'pen';
    document.getElementById('penTool').classList.add('active');
    document.getElementById('eraserTool').classList.remove('active');
  });
  
  document.getElementById('eraserTool').addEventListener('click', () => {
    currentTool = 'eraser';
    document.getElementById('eraserTool').classList.add('active');
    document.getElementById('penTool').classList.remove('active');
  });
  
  // Color selection
  document.querySelectorAll('.color-option').forEach(option => {
    option.addEventListener('click', () => {
      document.querySelectorAll('.color-option').forEach(opt => {
        opt.classList.remove('active');
      });
      option.classList.add('active');
      currentColor = option.dataset.color;
    });
  });
  
  // Pen size
  document.getElementById('penSize').addEventListener('input', (e) => {
    penSize = parseInt(e.target.value);
  });
  
  // Undo button
  document.getElementById('undoBtn').addEventListener('click', undo);
  
  // Clear button
  document.getElementById('clearBtn').addEventListener('click', clearCanvas);
  
  // Convert button
  convertBtn.addEventListener('click', async () => {
    try {
      loading.style.display = 'block';
      resultCard.style.display = 'none';
      solutionOutput.style.display = 'none';
      
      const imageData = getCanvasData();
      
      const response = await fetch('/scribble/process', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ image: imageData })
      });
      
      const data = await response.json();
      
      if (data.success) {
        currentLatex = data.latex;
        
        // Display results
        document.getElementById('latexOutput').textContent = data.latex;
        document.getElementById('renderedContent').innerHTML = `$$${data.latex}$$`;
        
        // Render with MathJax if available
        if (typeof MathJax !== 'undefined') {
          MathJax.typesetPromise([document.getElementById('renderedContent')]);
        }
        
        // Show result card
        resultCard.style.display = 'block';
      } else {
        alert('Error: ' + data.error);
      }
    } catch (error) {
      console.error('Conversion error:', error);
      alert('An error occurred during conversion. Please try again.');
    } finally {
      loading.style.display = 'none';
    }
  });
  
  // Solve equation
  solveBtn.addEventListener('click', async () => {
    if (!currentLatex) return;
    
    try {
      loading.style.display = 'block';
      
      const response = await fetch('/scribble/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';
    }
  });
  
  // Copy to clipboard
  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.');
    });
  });
  
  // New scribble
  document.getElementById('newScribble').addEventListener('click', () => {
    resultCard.style.display = 'none';
    solutionOutput.style.display = 'none';
  });
</script>
{% endblock %}