templates/pdf.html

{% extends "base.html" %}

{% block title %}PDF to LaTeX | TexLab{% endblock %}

{% block extra_css %}
<style>

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

  }



  .pdf-container {

    position: relative;

    margin: 20px 0;

    border: 1px solid #ddd;

    border-radius: 10px;

    overflow: hidden;

    background: #f8f9fa;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  .pdf-placeholder {

    text-align: center;

    padding: 40px;

  }



  .highlight-overlay {

    position: absolute;

    border: 2px solid #ffc107;

    background-color: rgba(255, 193, 7, 0.3);

    cursor: crosshair;

  }



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

  }



  .page-controls {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin: 20px 0;

  }



  .page-indicator {

    padding: 10px 20px;

    background: #f8f9fa;

    border-radius: 20px;

    font-weight: 600;

  }



  .button-row {

    display: flex;

    gap: 15px;

    justify-content: center;

    margin: 20px 0;

    flex-wrap: wrap;

  }



  .highlighter-btn {

    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);

    color: #333;

    border: none;

    padding: 12px 25px;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s ease;

    font-size: 1rem;

  }



  .highlighter-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);

  }



  .highlighter-btn.active {

    background: #ff9800;

    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);

  }



  .file-info {

    background: #e3f2fd;

    border-radius: 10px;

    padding: 15px;

    margin: 15px 0;

    text-align: center;

  }



  @media (max-width: 768px) {

    .pdf-container {

      min-height: 300px;

    }

    

    .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-file-pdf me-2"></i>PDF to LaTeX</h1>
  <p class="page-subtitle">
    Upload a PDF document, highlight areas, 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">Upload PDF Document</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 PDF here</h4>
          <p class="upload-hint">or click to browse files (PDF only)</p>
          <input type="file" name="pdf_file" id="fileInput" accept=".pdf" required class="d-none">
        </div>
        
        <div class="text-center">
          <button type="submit" class="btn btn-primary-gradient">
            <i class="fas fa-upload me-2"></i>Upload PDF
          </button>
        </div>
      </form>
    </div>

    <div class="feature-card" id="pdfViewer" style="display: none;">
      <h3 class="section-title">PDF Document</h3>
      
      <div class="file-info">
        <i class="fas fa-file-pdf me-2"></i>
        <span id="fileName"></span> 
        (<span id="pageCount"></span> pages)
      </div>
      
      <div class="page-controls">
        <button id="prevPage" class="btn btn-neutral">
          <i class="fas fa-arrow-left"></i>
        </button>
        <div class="page-indicator">
          Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
        </div>
        <button id="nextPage" class="btn btn-neutral">
          <i class="fas fa-arrow-right"></i>
        </button>
      </div>
      
      <div class="pdf-container" id="pdfContainer">
        <div class="pdf-placeholder">
          <i class="fas fa-file-pdf fa-3x mb-3" style="color: #dc3545;"></i>
          <h4>PDF Document Preview</h4>
          <p class="text-muted">Click the Highlighter Mode button and drag to select an area for conversion</p>
          <div style="margin-top: 30px; text-align: left; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h5>Sample PDF Content</h5>
            <p>This is a placeholder for your PDF document content. In a real implementation, the actual PDF pages would be rendered here.</p>
            <p>You can highlight any area of this document to convert it to LaTeX code.</p>
            <p><strong>Mathematical Expression:</strong> E = mc²</p>
            <p><strong>Table:</strong></p>
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Column 1</th>
                  <th>Column 2</th>
                  <th>Column 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Row 1, Col 1</td>
                  <td>Row 1, Col 2</td>
                  <td>Row 1, Col 3</td>
                </tr>
                <tr>
                  <td>Row 2, Col 1</td>
                  <td>Row 2, Col 2</td>
                  <td>Row 2, Col 3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <div class="text-center mt-3">
        <button id="highlighterBtn" class="highlighter-btn">
          <i class="fas fa-highlighter me-2"></i>Highlighter Mode
        </button>
      </div>
      
      <div class="button-row">
        <button id="convertSelectedBtn" class="btn btn-primary-gradient" disabled>
          <i class="fas fa-cogs me-2"></i>Convert Selected Area to LaTeX
        </button>
        <button id="clearSelection" class="btn btn-neutral" disabled>
          <i class="fas fa-times-circle me-2"></i>Clear Highlight
        </button>
        <button id="convertAllBtn" class="btn btn-dark-gradient">
          <i class="fas fa-file-pdf me-2"></i>Convert Entire PDF
        </button>
      </div>
    </div>

    <div class="loading" id="loading">
      <div class="spinner"></div>
      <p>Processing your PDF... 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 Content:</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-secondary-gradient">
          <i class="fas fa-calculator me-2"></i>Solve Content
        </button>
        <button id="copyBtn" class="btn btn-primary-gradient">
          <i class="fas fa-copy me-2"></i>Copy to Clipboard
        </button>
        <button id="newConversion" class="btn btn-neutral">
          <i class="fas fa-redo me-2"></i>Convert Another Area
        </button>
        <a href="/pdf" class="btn btn-neutral">
          <i class="fas fa-file-pdf me-2"></i>Upload Another PDF
        </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 pdfViewer = document.getElementById('pdfViewer');

  const pdfContainer = document.getElementById('pdfContainer');

  const convertSelectedBtn = document.getElementById('convertSelectedBtn');

  const clearSelection = document.getElementById('clearSelection');

  const convertAllBtn = document.getElementById('convertAllBtn');

  const resultCard = document.getElementById('resultCard');

  const loading = document.getElementById('loading');

  const fileName = document.getElementById('fileName');

  const pageCount = document.getElementById('pageCount');

  const currentPage = document.getElementById('currentPage');

  const totalPages = document.getElementById('totalPages');

  const prevPage = document.getElementById('prevPage');

  const nextPage = document.getElementById('nextPage');

  const highlighterBtn = document.getElementById('highlighterBtn');

  const solveBtn = document.getElementById('solveBtn');

  const solutionOutput = document.getElementById('solutionOutput');

  

  // State variables

  let currentFilename = '';

  let highlight = null;

  let isHighlighting = false;

  let startX, startY;

  let isHighlighterMode = false;

  let currentLatex = '';

  

  // File upload handling

  dropArea.addEventListener('click', () => {

    fileInput.click();

  });

  

  // 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.submit();

    }

  });

  

  // Form submission

  uploadForm.addEventListener('submit', async (e) => {

    e.preventDefault();

    

    const formData = new FormData(uploadForm);

    

    try {

      loading.style.display = 'block';

      

      const response = await fetch('/pdf/upload', {

        method: 'POST',

        body: formData

      });

      

      const data = await response.json();

      

      if (data.success) {

        currentFilename = data.filename;

        

        // Update file info

        fileName.textContent = data.filename;

        pageCount.textContent = data.pages;

        totalPages.textContent = data.pages;

        currentPage.textContent = 1;

        

        // Enable page navigation buttons

        updatePageNavigation();

        

        // Show PDF viewer

        document.querySelector('.feature-card:first-child').style.display = 'none';

        pdfViewer.style.display = 'block';

        

        // Add highlighting functionality

        addHighlightingFunctionality();

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

    }

  });

  

  // Add highlighting functionality to PDF container

  function addHighlightingFunctionality() {

    pdfContainer.addEventListener('mousedown', startHighlight);

    pdfContainer.addEventListener('mousemove', updateHighlight);

    pdfContainer.addEventListener('mouseup', endHighlight);

  }

  

  // Toggle highlighter mode

  highlighterBtn.addEventListener('click', () => {

    isHighlighterMode = !isHighlighterMode;

    highlighterBtn.classList.toggle('active', isHighlighterMode);

    

    if (isHighlighterMode) {

      highlighterBtn.innerHTML = '<i class="fas fa-highlighter me-2"></i>Highlighting Active';

      pdfContainer.style.cursor = 'crosshair';

    } else {

      highlighterBtn.innerHTML = '<i class="fas fa-highlighter me-2"></i>Highlighter Mode';

      pdfContainer.style.cursor = 'default';

      

      // Remove any existing highlight if exiting highlighter mode

      if (highlight) {

        highlight.remove();

        highlight = null;

        convertSelectedBtn.disabled = true;

        clearSelection.disabled = true;

      }

    }

  });

  

  // Start highlight

  function startHighlight(e) {

    if (!isHighlighterMode) return;

    

    isHighlighting = true;

    const rect = pdfContainer.getBoundingClientRect();

    startX = e.clientX - rect.left;

    startY = e.clientY - rect.top;

    

    // Remove existing highlight if any

    if (highlight) {

      highlight.remove();

      highlight = null;

    }

    

    // Create new highlight overlay

    highlight = document.createElement('div');

    highlight.className = 'highlight-overlay';

    highlight.style.left = startX + 'px';

    highlight.style.top = startY + 'px';

    highlight.style.width = '0px';

    highlight.style.height = '0px';

    

    pdfContainer.appendChild(highlight);

  }

  

  // Update highlight

  function updateHighlight(e) {

    if (!isHighlighting || !highlight || !isHighlighterMode) return;

    

    const rect = pdfContainer.getBoundingClientRect();

    const currentX = e.clientX - rect.left;

    const currentY = e.clientY - rect.top;

    

    const width = currentX - startX;

    const height = currentY - startY;

    

    highlight.style.width = Math.abs(width) + 'px';

    highlight.style.height = Math.abs(height) + 'px';

    

    if (width < 0) {

      highlight.style.left = currentX + 'px';

    }

    

    if (height < 0) {

      highlight.style.top = currentY + 'px';

    }

  }

  

  // End highlight

  function endHighlight() {

    if (!isHighlighting) return;

    isHighlighting = false;

    

    if (highlight) {

      const rect = highlight.getBoundingClientRect();

      const containerRect = pdfContainer.getBoundingClientRect();

      

      // Enable convert button if highlight is large enough

      if (rect.width > 20 && rect.height > 20) {

        convertSelectedBtn.disabled = false;

        clearSelection.disabled = false;

      } else {

        // Remove small highlights

        highlight.remove();

        highlight = null;

      }

    }

  }

  

  // Clear highlight

  clearSelection.addEventListener('click', () => {

    if (highlight) {

      highlight.remove();

      highlight = null;

      convertSelectedBtn.disabled = true;

      clearSelection.disabled = true;

    }

  });

  

  // Convert selected area

  convertSelectedBtn.addEventListener('click', async () => {

    if (!currentFilename) return;

    

    try {

      loading.style.display = 'block';

      resultCard.style.display = 'none';

      solutionOutput.style.display = 'none';

      

      // Get highlight coordinates if available

      let coordinates = null;

      if (highlight) {

        const rect = highlight.getBoundingClientRect();

        const containerRect = pdfContainer.getBoundingClientRect();

        coordinates = [

          rect.left - containerRect.left,

          rect.top - containerRect.top,

          rect.width,

          rect.height

        ];

      }

      

      const response = await fetch('/pdf/process', {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json'

        },

        body: JSON.stringify({

          filename: currentFilename,

          coordinates: coordinates,

          page: parseInt(currentPage.textContent) - 1

        })

      });

      

      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';

    }

  });

  

  // Convert entire PDF

  convertAllBtn.addEventListener('click', async () => {

    if (!currentFilename) return;

    

    try {

      loading.style.display = 'block';

      resultCard.style.display = 'none';

      solutionOutput.style.display = 'none';

      

      const response = await fetch('/pdf/process', {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json'

        },

        body: JSON.stringify({

          filename: currentFilename,

          convert_all: true

        })

      });

      

      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 PDF content

  solveBtn.addEventListener('click', async () => {

    if (!currentLatex) return;

    

    try {

      loading.style.display = 'block';

      

      const response = await fetch('/pdf/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 content. 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';

    if (highlight) {

      highlight.remove();

      highlight = null;

      convertSelectedBtn.disabled = true;

      clearSelection.disabled = true;

    }

  });

  

  // Update page navigation button states

  function updatePageNavigation() {

    const current = parseInt(currentPage.textContent);

    const total = parseInt(totalPages.textContent);

    

    prevPage.disabled = current <= 1;

    nextPage.disabled = current >= total;

  }

  

  // Page navigation

  prevPage.addEventListener('click', () => {

    const current = parseInt(currentPage.textContent);

    if (current > 1) {

      currentPage.textContent = current - 1;

      updatePageNavigation();

      

      // Clear highlight when changing pages

      if (highlight) {

        highlight.remove();

        highlight = null;

        convertSelectedBtn.disabled = true;

        clearSelection.disabled = true;

      }

    }

  });

  

  nextPage.addEventListener('click', () => {

    const current = parseInt(currentPage.textContent);

    const total = parseInt(totalPages.textContent);

    if (current < total) {

      currentPage.textContent = current + 1;

      updatePageNavigation();

      

      // Clear highlight when changing pages

      if (highlight) {

        highlight.remove();

        highlight = null;

        convertSelectedBtn.disabled = true;

        clearSelection.disabled = true;

      }

    }

  });

</script>
{% endblock %}