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