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>Rendered 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"></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 %}