templates/math.html

{% extends "base.html" %}

{% block title %}Math Equation 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);
  }

  .upload-message {
    display: none;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    /* soft sky-blue gradient */
    color: #0d47a1;
    /* deep blue text */
    font-weight: 600;
    padding: 12px 20px;
    margin: 15px auto;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    width: fit-content;
    max-width: 80%;
    animation: fadeIn 0.4s ease-in-out;
  }

  /* Smooth fade-in animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


  .upload-area {
    border: 3px dashed #ddd;
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: #fafafa;
    margin-bottom: 20px;
  }

  .upload-area:hover {
    border-color: #667eea;
    background-color: #f0f4ff;
  }

  .upload-area.dragover {
    border-color: #667eea;
    background-color: #e0e7ff;
    transform: scale(1.02);
  }

  .upload-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 15px;
  }

  .upload-text {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 10px;
  }

  .upload-hint {
    color: #888;
    font-size: 0.9rem;
  }

  .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;
  }

  @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-square-root-alt me-2"></i>Math Equation to LaTeX</h1>
  <p class="page-subtitle">
    Upload an image of a mathematical equation and convert it 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">Upload Equation Image</h3>




      <form method="POST" enctype="multipart/form-data" id="uploadForm">
        <div class="upload-area" id="dropArea">
          <div class="upload-icon">
            <i class="fas fa-cloud-upload-alt"></i>
          </div>
          <h4 class="upload-text">Drag & Drop your equation image here</h4>
          <p class="upload-hint">or click to browse files (JPG, PNG, GIF, etc.)</p>
          <input type="file" name="image" id="fileInput" accept="image/*" required class="d-none">
        </div>


        
        <div id="uploadMessage" class="upload-message">
          File uploaded successfully!
        </div>

        <div class="text-center" id="uploadButtonContainer" style="display:none; margin-top:15px;">
          <button type="submit" class="btn btn-primary-gradient">
            <i class="fas fa-upload me-2"></i>Upload & Convert
          </button>
        </div>

      </form>
    </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>Original Image:</h5>
        <img id="imagePreview" class="image-preview" alt="Uploaded 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="newConversion" class="btn btn-neutral">
          <i class="fas fa-redo me-2"></i>New Conversion
        </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 dropArea = document.getElementById('dropArea');
  const fileInput = document.getElementById('fileInput');
  const uploadForm = document.getElementById('uploadForm');
  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');

  const uploadMessage = document.getElementById('uploadMessage');
  const uploadButtonContainer = document.getElementById('uploadButtonContainer');

  // State variables
  let currentLatex = '';

  // File upload handling
  dropArea.addEventListener('click', () => {
    fileInput.click();
  });



  // When user picks file manually
  fileInput.addEventListener('change', () => {
    if (fileInput.files.length) {
      showUploadReadyState(fileInput.files[0].name);
    }
  });

  // When file is dropped
  dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.classList.remove('dragover');

    if (e.dataTransfer.files.length) {
      fileInput.files = e.dataTransfer.files;
      showUploadReadyState(e.dataTransfer.files[0].name);
    }
  });

  // Helper: show "uploaded" message and button
  function showUploadReadyState(fileName) {
    uploadMessage.innerHTML = `✅ <b>${fileName}</b> uploaded successfully!`;
    uploadMessage.style.display = 'block';
    uploadButtonContainer.style.display = 'block';
  }

  // Prevent browser defaults globally
  document.addEventListener('dragover', (e) => e.preventDefault());
  document.addEventListener('drop', (e) => e.preventDefault());

  // Drag and Drop Events
  dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.classList.add('dragover');
  });

  dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('dragover');
  });

  dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.classList.remove('dragover');

    if (e.dataTransfer.files.length) {
      fileInput.files = e.dataTransfer.files;
      uploadForm.requestSubmit(); // 🔥 triggers your async submit code
    }
  });



  // Form submission
  uploadForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(uploadForm);

    try {
      loading.style.display = 'block';
      resultCard.style.display = 'none';
      solutionOutput.style.display = 'none';

      const response = await fetch('/math/process', {
        method: 'POST',
        body: formData
      });

      const data = await response.json();

      if (data.success) {
        currentLatex = data.latex;

        // Display image preview if available
        if (data.image_path) {
          imagePreview.src = '/' + data.image_path;
          imagePreviewContainer.style.display = 'block';
        } else {
          imagePreviewContainer.style.display = 'none';
        }

        // 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('Upload error:', error);
      alert('An error occurred during upload. 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('/math/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 conversion
  document.getElementById('newConversion').addEventListener('click', () => {
    resultCard.style.display = 'none';
    solutionOutput.style.display = 'none';
    uploadForm.reset();
  });
</script>
{% endblock %}