templates/pdffly.html

{% extends "base.html" %}

{% block title %}PDFly - Convert PDF to LaTeX | TexLab{% endblock %}

{% block extra_css %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<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-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: auto;
    background: #525659;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #pdfCanvas {
    display: block;
    margin: 0 auto;
  }

  .pdf-placeholder {
    text-align: center;
    padding: 40px;
  }

  .highlight-overlay {
    position: absolute;
    border: 2px solid #4361ee;
    background-color: rgba(67, 97, 238, 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, #4361ee 0%, #3a0ca3 100%);
    color: white;
    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(67, 97, 238, 0.4);
  }

  .highlighter-btn.active {
    background: #3a0ca3;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.5);
  }

  .file-info {
    background: #e3f2fd;
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
  }

  .btn-success-gradient {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-success-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
  }

  @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-bolt me-2"></i>PDFly - Smart PDF to LaTeX</h1>
  <p class="page-subtitle">
    Upload a PDF document, highlight areas with Converto, 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 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">
        <canvas id="pdfCanvas" style="max-width: 100%; height: auto;"></canvas>
      </div>
      
      <div class="text-center mt-3">
        <button id="highlighterBtn" class="highlighter-btn">
          <i class="fas fa-magic me-2"></i>Converto
        </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>✅ Ready for Overleaf!</h5> -->
        <div id="renderedContent"></div>
        <div style="margin-top: 15px; padding: 15px; background: #e8f5e9; border-radius: 8px; text-align: left;">
          <strong>Latex Code will appear here</strong>
          <ul style="margin: 10px 0; padding-left: 20px;">
            
          </ul>
        </div>
      </div>
      
      <div class="latex-output" id="latexOutput" style="display: none;"></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="downloadLatexBtn" class="btn btn-success-gradient">
          <i class="fas fa-download me-2"></i>Download .tex File
        </button>
        <button id="newConversion" class="btn btn-neutral">
          <i class="fas fa-redo me-2"></i>Convert Another Area
        </button>
        <a href="/pdffly" 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 = '';
  let completeLatexDocument = '';
  let pdfDoc = null;
  let pageNum = 1;
  let pageRendering = false;
  let pageNumPending = null;
  let scale = 1.5;
  
  // Configure PDF.js worker
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
  
  // 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;
      // Trigger the form submission handler
      const event = new Event('submit', { bubbles: true, cancelable: true });
      uploadForm.dispatchEvent(event);
    }
  });

  // Render PDF page
  function renderPage(num) {
    pageRendering = true;
    pdfDoc.getPage(num).then(function(page) {
      const canvas = document.getElementById('pdfCanvas');
      const ctx = canvas.getContext('2d');
      const viewport = page.getViewport({scale: scale});
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      
      const renderTask = page.render(renderContext);
      renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    });
    
    currentPage.textContent = num;
  }
  
  // Queue page rendering
  function queueRenderPage(num) {
    if (pageRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }
  
  // Load and display PDF
  function loadPDF(url) {
    pdfjsLib.getDocument(url).promise.then(function(pdf) {
      pdfDoc = pdf;
      totalPages.textContent = pdf.numPages;
      pageNum = 1;
      renderPage(pageNum);
      updatePageNavigation();
    });
  }

  // Form submission
  uploadForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    const file = fileInput.files[0];
    
    if (!file) {
      alert('Please select a PDF file');
      return;
    }
    
    formData.append('file', file);
    
    try {
      loading.style.display = 'block';
      
      const response = await fetch('/pdffly/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;
        
        // Load and render PDF
        loadPDF(data.pdf_path);
        
        // Display all LaTeX results
        let allLatex = '';
        data.results.forEach(result => {
          if (result.latex) {
            allLatex += `Page ${result.page}:\n${result.latex}\n\n`;
          } else if (result.error) {
            allLatex += `Page ${result.page}: Error - ${result.error}\n\n`;
          }
        });
        
        // Store complete document
        completeLatexDocument = data.complete_document || allLatex;
        
        // Show results immediately
        currentLatex = allLatex;
        document.getElementById('latexOutput').textContent = completeLatexDocument;
        document.getElementById('renderedContent').innerHTML = '<p><strong>✅ PDF converted to LaTeX successfully!</strong><br><small>The code has been cleaned and formatted for Overleaf compilation.</small></p>';
        resultCard.style.display = 'block';
        
        // 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 || 'Unknown 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-magic me-2"></i>Converto Active';
      pdfContainer.style.cursor = 'crosshair';
    } else {
      highlighterBtn.innerHTML = '<i class="fas fa-magic me-2"></i>Converto';
      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('/pdflly/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('/pdffly/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 = '<p>Full PDF content converted to LaTeX</p>';
        
        // Show result card
        resultCard.style.display = 'block';
      } else {
        alert('Error: ' + (data.error || 'Unknown 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('/pdffly/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}`;
        } else {
          solutionText = solution.message || 'Math solver integration pending';
        }
        
        document.getElementById('solutionContent').textContent = solutionText;
        solutionOutput.style.display = 'block';
      } else {
        alert('Error: ' + (data.error || 'Unknown 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 = completeLatexDocument || document.getElementById('latexOutput').textContent;
    navigator.clipboard.writeText(latexText).then(() => {
      alert('✅ Complete LaTeX document copied to clipboard!\nReady to paste into Overleaf.');
    }).catch(err => {
      console.error('Failed to copy: ', err);
      alert('Failed to copy LaTeX code. Please try again.');
    });
  });
  
  // Download LaTeX file
  document.getElementById('downloadLatexBtn').addEventListener('click', () => {
    const latexText = completeLatexDocument || document.getElementById('latexOutput').textContent;
    const blob = new Blob([latexText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = (currentFilename.replace('.pdf', '') || 'converted') + '.tex';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    alert('✅ LaTeX file downloaded!\nYou can now upload it to Overleaf.');
  });
  
  // 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', () => {
    if (pageNum <= 1) return;
    pageNum--;
    queueRenderPage(pageNum);
    updatePageNavigation();
    
    // Clear highlight when changing pages
    if (highlight) {
      highlight.remove();
      highlight = null;
      convertSelectedBtn.disabled = true;
      clearSelection.disabled = true;
    }
  });
  
  nextPage.addEventListener('click', () => {
    if (pageNum >= pdfDoc.numPages) return;
    pageNum++;
    queueRenderPage(pageNum);
    updatePageNavigation();
    
    // Clear highlight when changing pages
    if (highlight) {
      highlight.remove();
      highlight = null;
      convertSelectedBtn.disabled = true;
      clearSelection.disabled = true;
    }
  });
</script>
{% endblock %}