templates/table.html

{% extends "base.html" %}

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

{% block extra_css %}
<style>

  .feature-card {

    display: inline-block;

    width: 100%;

    height: auto !important;

    padding: 20px 25px;

    margin-bottom: 20px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

  }



  .upload-message {

    display: none;

    background: linear-gradient(135deg, #e3f2fd, #bbdefb);

    /* soft sky-blue gradient */

    color: #0d47a1;

    /* deep blue text */

    font-weight: 600;

    padding: 12px 20px;

    margin: 15px auto;

    text-align: center;

    border-radius: 10px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);

    width: fit-content;

    max-width: 80%;

    animation: fadeIn 0.4s ease-in-out;

  }



  /* Smooth fade-in animation */

  @keyframes fadeIn {

    from {

      opacity: 0;

      transform: translateY(-5px);

    }



    to {

      opacity: 1;

      transform: translateY(0);

    }

  }



  .mode-selector {

    display: flex;

    gap: 15px;

    justify-content: center;

    margin-bottom: 30px;

    flex-wrap: wrap;

  }



  .mode-btn {

    padding: 12px 25px;

    border-radius: 50px;

    border: 2px solid #ddd;

    background: white;

    color: #333;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

  }



  .mode-btn.active {

    background: #667eea;

    color: white;

    border-color: #667eea;

    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);

  }



  .mode-btn:hover:not(.active) {

    border-color: #667eea;

    transform: translateY(-2px);

  }



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

  }



  .manual-input {

    background: #f8f9fa;

    border-radius: 15px;

    padding: 30px;

    margin-bottom: 20px;

  }



  .input-group {

    display: flex;

    gap: 15px;

    justify-content: center;

    flex-wrap: wrap;

    margin-bottom: 20px;

  }



  .input-field {

    display: flex;

    flex-direction: column;

    align-items: center;

  }



  .input-field label {

    margin-bottom: 8px;

    font-weight: 600;

  }



  .input-field input {

    width: 100px;

    padding: 10px;

    border: 2px solid #ddd;

    border-radius: 10px;

    text-align: center;

    font-size: 1.1rem;

  }



  .input-field input:focus {

    outline: none;

    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);

  }



  .canvas-container {

    position: relative;

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

    border: 2px solid #ddd;

    border-radius: 10px;

    overflow: hidden;

    background: white;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    margin-bottom: 20px;

  }



  #tableCanvas {

    width: 100%;

    height: 400px;

    cursor: crosshair;

    display: block;

  }



  .image-preview {

    max-width: 100%;

    max-height: 400px;

    margin: 20px auto;

    display: block;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  }



  .latex-output {

    background: #f8f9fa;

    border-radius: 10px;

    padding: 20px;

    border: 1px solid #eee;

    font-family: 'Consolas', 'Courier New', monospace;

    font-size: 1.1rem;

    white-space: pre-wrap;

    word-break: break-all;

    min-height: 100px;

    margin: 20px 0;

  }



  .rendered-output {

    background: white;

    border-radius: 10px;

    padding: 20px;

    border: 1px solid #eee;

    min-height: 100px;

    margin: 20px 0;

    text-align: center;

  }

  .table-info-card{

    background: white;

    border-radius: 10px;

    padding: 20px;

    border: 1px solid #eee;

    min-height: 100px;

    margin: 20px 0;

    text-align: center;

  }



  .solution-output {

    background: #e8f5e9;

    border-radius: 10px;

    padding: 20px;

    border: 1px solid #c8e6c9;

    margin: 20px 0;

    display: none;

  }



  .solution-title {

    color: #2e7d32;

    margin-bottom: 15px;

    font-weight: 600;

  }



  .solution-content {

    font-family: 'Consolas', 'Courier New', monospace;

    font-size: 1.1rem;

    white-space: pre-wrap;

  }



  .loading {

    display: none;

    text-align: center;

    padding: 20px;

  }



  .spinner {

    border: 4px solid rgba(0, 0, 0, 0.1);

    border-radius: 50%;

    border-top: 4px solid #667eea;

    width: 40px;

    height: 40px;

    animation: spin 1s linear infinite;

    margin: 0 auto 15px;

  }



  @keyframes spin {

    0% {

      transform: rotate(0deg);

    }



    100% {

      transform: rotate(360deg);

    }

  }



  .button-row {

    display: flex;

    gap: 15px;

    justify-content: center;

    margin: 20px 0;

    flex-wrap: wrap;

  }



  @media (max-width: 768px) {

    .mode-selector {

      flex-direction: column;

      align-items: center;

    }



    .mode-btn {

      width: 100%;

      max-width: 300px;

    }



    #tableCanvas {

      height: 300px;

    }



    .input-group {

      flex-direction: column;

      align-items: center;

    }



    .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-table me-2"></i>Table to LaTeX</h1>
  <p class="page-subtitle">
    Convert table images to clean, editable LaTeX code using AI-powered recognition.
  </p>
</div>

<div class="row">
  <div class="col-lg-10 mx-auto">
    <div class="feature-card">
      <h3 class="section-title">Choose Input Method</h3>

      <div class="mode-selector">
        <button id="cameraMode" class="mode-btn active">
          <i class="fas fa-camera me-2"></i>Table Image
        </button>
        <button id="manualMode" class="mode-btn">
          <i class="fas fa-keyboard me-2"></i>Manual Input
        </button>
        <button id="drawMode" class="mode-btn">
          <i class="fas fa-pen me-2"></i>Camera Capture
        </button>
      </div>

       <!-- Camera/Table Image Mode ....................... -->
      <div id="cameraSection">
        <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 table image here</h4>
            <p class="upload-hint">or click to browse files (JPG, PNG, GIF, etc.)</p>

            <input type="file" name="image" id="fileInput" accept="image/*" required class="d-none">


          </div>
          <div id="uploadMessage" class="upload-message">
            File uploaded successfully!
          </div>

          <div class="text-center" id="uploadButtonContainer" style="display:none; margin-top:15px;">
            <button type="submit" class="btn btn-primary-gradient">
              <i class="fas fa-upload me-2"></i>Upload & Convert
            </button>
          </div>

        </form>
      </div>

      </form>
    </div>

    <!-- Manual Input Mode -->
    <div id="manualSection" style="display: none;">
      <div class="manual-input">
        <h4 class="text-center mb-4">Specify Table Dimensions</h4>

        <div class="input-group">
          <div class="input-field">
            <label for="rowsInput">Rows</label>
            <input type="number" id="rowsInput" min="1" max="20" value="3">
          </div>

          <div class="input-field">
            <label for="colsInput">Columns</label>
            <input type="number" id="colsInput" min="1" max="10" value="3">
          </div>
        </div>

        <div class="text-center">
          <button id="generateBtn" class="btn btn-primary-gradient">
            <i class="fas fa-table me-2"></i>Generate LaTeX Table
          </button>
        </div>
      </div>
    </div>


<!-- 📷 Camera Capture Section -->
<div id="drawSection" style="display: none;">
  <div class="text-center mb-3">
    <p>Capture a picture of your table below</p>
  </div>

  <div class="camera-container text-center">
    <video id="cameraPreview" autoplay playsinline class="rounded shadow" style="width: 90%; max-width: 500px;"></video>
    <canvas id="cameraCanvas" style="display: none;"></canvas>
  </div>

  <div class="text-center mt-3">
    <button id="captureBtn" class="btn btn-success me-2">
      <i class="fas fa-camera me-2"></i> Capture
    </button>
    <button id="convertCameraBtn" class="btn btn-primary-gradient" disabled>
      <i class="fas fa-cogs me-2"></i> Convert to LaTeX
    </button>
  </div>

  <div id="capturedImagePreview" class="text-center mt-3"></div>
</div>

<!-- <--RESULT SECTION --> 
  <div class="loading" id="loading">
    <div class="spinner"></div>
    <p>Processing your table... This may take a few seconds.</p>
  </div>

  <div class="feature-card" id="resultCard" style="display: none;">
    <h3 class="section-title">Generated LaTeX</h3>

    <div class="image-preview-container" id="imagePreviewContainer" style="display: none;">
      <h5>Original Image:</h5>
      <img id="imagePreview" class="image-preview" alt="Uploaded table">
    </div>

    <div class="rendered-output">
      <h5>Latex code will appear here for Table:</h5>
      <div id="renderedContent"></div>
    </div>

   <div class="table-info-card" id="tableInfo" style="display: none;">
  <h5><i class="fas fa-ruler-combined me-2"></i>Detected Table Dimensions</h5>
  <p><strong>Rows:</strong> <span id="detectedRowCount">-</span></p>
  <p><strong>Columns:</strong> <span id="detectedColCount">-</span></p>
</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-accent-gradient">

          <i class="fas fa-calculator me-2"></i>Solve Table Content

        </button> -->
      <button id="copyBtn" class="btn btn-secondary-gradient">
        <i class="fas fa-copy me-2"></i>Copy LaTeX
      </button>
      <button id="newConversion" class="btn btn-neutral">
        <i class="fas fa-redo me-2"></i>New Conversion
      </button>
      <a href="/" class="btn btn-neutral">
        <i class="fas fa-home me-2"></i>Back to Home
      </a>
    </div>
  </div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>

  // ----------------------------

  // DOM elements

  // ----------------------------

  const cameraMode = document.getElementById('cameraMode');       // "Table Image" main upload tab

  const captureMode = document.getElementById('drawMode');       // your Camera Capture button (id drawMode in HTML)

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



  const cameraSection = document.getElementById('cameraSection'); // upload form section

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

  const captureSection = document.getElementById('drawSection');  // this is where your camera HTML currently sits (id="drawSection")



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

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

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



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



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

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

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

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



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

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



  // Camera capture DOM

  const video = document.getElementById('cameraPreview');

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

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

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

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



  // Result fields

  const latexOutputEl = document.getElementById('latexOutput');

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

  const detectedRowCountEl = document.getElementById('detectedRowCount');

  const detectedColCountEl = document.getElementById('detectedColCount');

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



  // Misc

  let currentLatex = '';

  let cameraStream = null;

  let capturedImageBase64 = null;



  // ----------------------------

  // Mode switching

  // ----------------------------

  cameraMode.addEventListener('click', () => setActiveMode('upload'));

  manualMode.addEventListener('click', () => setActiveMode('manual'));

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

    setActiveMode('capture');

    startCamera(); // start stream when user opens capture mode

  });



  function setActiveMode(mode) {

    // update active classes

    cameraMode.classList.toggle('active', mode === 'upload');

    manualMode.classList.toggle('active', mode === 'manual');

    captureMode.classList.toggle('active', mode === 'capture');



    // show/hide sections

    cameraSection.style.display = mode === 'upload' ? 'block' : 'none';

    manualSection.style.display = mode === 'manual' ? 'block' : 'none';

    captureSection.style.display = mode === 'capture' ? 'block' : 'none';



    // stop camera when leaving capture

    if (mode !== 'capture') stopCamera();

  }



  // default mode (upload)

  setActiveMode('upload');



  // ----------------------------

  // File upload / drag & drop

  // ----------------------------

  

  

  

  dropArea.addEventListener('click', () => fileInput.click());



  document.addEventListener('dragover', (e) => e.preventDefault());

  document.addEventListener('drop', (e) => e.preventDefault());



  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;

      showUploadReadyState(e.dataTransfer.files[0].name);

    }

  });



  fileInput.addEventListener('change', () => {

    if (fileInput.files.length > 0) {

      showUploadReadyState(fileInput.files[0].name);

    }

  });





  function showUploadReadyState(fileName) {

    uploadMessage.innerHTML = `✅ <b>${fileName}</b> uploaded successfully!`;

    uploadMessage.style.display = 'block';

    uploadButtonContainer.style.display = 'block';

  }



  dropArea.addEventListener('dragover', (e) => {

    e.preventDefault();

    dropArea.classList.add('dragover');

  });



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

    dropArea.classList.remove('dragover');

  });



  dropArea.addEventListener('drop', (e) => {

    e.preventDefault();

    dropArea.classList.remove('dragover');



    if (e.dataTransfer.files.length) {

      fileInput.files = e.dataTransfer.files;

      uploadForm.requestSubmit(); // 🔥 triggers your async submit code

    }

  });













  // ----------------------------

  // Upload form submit -> /table/process

  // ----------------------------

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

    e.preventDefault();

    const formData = new FormData(uploadForm);



    try {

      loading.style.display = 'block';

      resultCard.style.display = 'none';

      tableInfo.style.display = 'none';



      const response = await fetch('/table/process', { method: 'POST', body: formData });

      const data = await response.json();

      handleProcessResult(data);

    } catch (err) {

      console.error('Upload error:', err);

      alert('An error occurred during upload. Please try again.');

    } finally {

      loading.style.display = 'none';

    }

  });



  // ----------------------------

  // Manual generation -> /table/generate

  // ----------------------------

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

    const rows = parseInt(document.getElementById('rowsInput').value);

    const cols = parseInt(document.getElementById('colsInput').value);



    if (rows <= 0 || cols <= 0) return alert('Please enter valid numbers for rows and columns');



    try {

      loading.style.display = 'block';

      resultCard.style.display = 'none';

      tableInfo.style.display = 'none';



      const response = await fetch('/table/generate', {

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify({ rows, cols })

      });

      const data = await response.json();



      if (data.success) {

        currentLatex = data.latex;

        latexOutputEl.textContent = data.latex;

        renderedContent.innerHTML = `$$${data.latex}$$`;

        if (typeof MathJax !== 'undefined') MathJax.typesetPromise([renderedContent]);



        imagePreviewContainer.style.display = 'none';

        resultCard.style.display = 'block';

      } else {

        alert('Error: ' + data.error);

      }

    } catch (err) {

      console.error('Generation error:', err);

      alert('An error occurred during generation. Please try again.');

    } finally {

      loading.style.display = 'none';

    }

  });



  // ----------------------------

  // Camera functions

  // ----------------------------

  async function startCamera() {

    try {

      if (cameraStream && cameraStream.active) return; // already running

      cameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });

      video.srcObject = cameraStream;

      video.play();

      convertCameraBtn.disabled = true; // no capture yet

    } catch (err) {

      console.error('Camera error:', err);

      alert('Camera access denied or not available.');

      // fallback: switch to upload mode

      setActiveMode('upload');

    }

  }



  function stopCamera() {

    if (cameraStream) {

      cameraStream.getTracks().forEach(track => track.stop());

      cameraStream = null;

    }

    // clear preview

    capturedImagePreview.innerHTML = '';

    capturedImageBase64 = null;

    convertCameraBtn.disabled = true;

  }



  // Capture snapshot from video

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

    if (!video || !video.videoWidth) return alert('Camera not ready. Try again.');

    cameraCanvas.width = video.videoWidth;

    cameraCanvas.height = video.videoHeight;

    const ctx = cameraCanvas.getContext('2d');

    ctx.drawImage(video, 0, 0, cameraCanvas.width, cameraCanvas.height);

    capturedImageBase64 = cameraCanvas.toDataURL('image/png');

    capturedImagePreview.innerHTML = `<img src="${capturedImageBase64}" class="img-fluid rounded shadow" style="max-width:400px;">`;

    convertCameraBtn.disabled = false;

  });



  // Send captured image to backend

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

    if (!capturedImageBase64) return alert('Please capture an image first.');

    try {

      loading.style.display = 'block';

      resultCard.style.display = 'none';

      tableInfo.style.display = 'none';



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

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify({ image: capturedImageBase64 })

      });

      const data = await response.json();

      handleProcessResult(data);

    } catch (err) {

      console.error('Conversion error:', err);

      alert('An error occurred during conversion. Please try again.');

    } finally {

      loading.style.display = 'none';

    }

  });



  // ----------------------------

  // Common: handle /table/process result

  // ----------------------------

  function handleProcessResult(data) {

    if (!data) return alert('No response from server.');



    if (data.success) {

      currentLatex = data.latex || '';

      latexOutputEl.textContent = currentLatex;



      // show image preview if server returned an image path

      if (data.image_path) {

        imagePreview.src = '/' + data.image_path;

        imagePreviewContainer.style.display = 'block';

      } else {

        imagePreviewContainer.style.display = 'none';

      }



      // show rendered content (MathJax)

      renderedContent.innerHTML = `$$${currentLatex}$$`;

      if (typeof MathJax !== 'undefined') MathJax.typesetPromise([renderedContent]);



      // detected rows/cols

      detectedRowCountEl.textContent = data.rows ?? '-';

      detectedColCountEl.textContent = data.cols ?? '-';

      tableInfo.style.display = 'block';



      resultCard.style.display = 'block';



      // stop camera (optional) when result is shown

      // stopCamera();

    } else {

      alert('Error: ' + (data.error || 'Unknown error'));

    }

  }



  // ----------------------------

  // Copy & New conversion

  // ----------------------------

  document.getElementById('copyBtn').addEventListener('click', () => {

    const latexText = latexOutputEl.textContent;

    navigator.clipboard.writeText(latexText).then(() => {

      // small visual feedback

      alert('LaTeX code copied to clipboard!');

    }).catch(err => {

      console.error('Failed to copy:', err);

      alert('Failed to copy LaTeX code. Please try again.');

    });

  });



  document.getElementById('newConversion').addEventListener('click', () => {

    resultCard.style.display = 'none';

    tableInfo.style.display = 'none';

    uploadForm.reset();

    imagePreviewContainer.style.display = 'none';

    // if camera was open, stop it

    stopCamera();

  });



  // ----------------------------

  // Ensure camera stops when leaving page (cleanup)

  // ----------------------------

  window.addEventListener('beforeunload', stopCamera);

</script>

{% endblock %}