templates/pdflly.html

{% extends "base.html" %}

{% block title %}PDFly - Convert 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 #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;
  }

  @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 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 Converto 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-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>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="/pdflly" 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('/pdflly/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-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('/pdflly/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('/pdflly/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 %}