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 %}