script.js

// DOM Elements
const image1Input = document.getElementById('image1');
const image2Input = document.getElementById('image2');
const preview1 = document.getElementById('preview1');
const preview2 = document.getElementById('preview2');
const analyzeBtn = document.getElementById('analyze-btn');
const loader = document.getElementById('loader');
const resultsContainer = document.getElementById('results-container');
const resultImage1 = document.getElementById('result-image1');
const resultImage2 = document.getElementById('result-image2');
const differencesList = document.getElementById('differences-list');
const image1Details = document.getElementById('image1-details');
const image2Details = document.getElementById('image2-details');
const jsonOutput = document.getElementById('json-output');
const copyJsonBtn = document.getElementById('copy-json-btn');
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

// Global variables to store image data
let image1Data = null;
let image2Data = null;
let analysisResults = null;

// Event listeners
image1Input.addEventListener('change', (e) => handleImageUpload(e, preview1, 1));
image2Input.addEventListener('change', (e) => handleImageUpload(e, preview2, 2));
analyzeBtn.addEventListener('click', analyzeImages);
copyJsonBtn.addEventListener('click', copyJsonToClipboard);

// Tab switching
tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const tabId = btn.getAttribute('data-tab');
    
    // Remove active class from all buttons and content
    tabBtns.forEach(btn => btn.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));
    
    // Add active class to current button and content
    btn.classList.add('active');
    document.getElementById(`${tabId}-tab`).classList.add('active');
  });
});

// Handle image upload
function handleImageUpload(event, previewElement, imageNumber) {
  const file = event.target.files[0];
  if (!file) return;
  
  if (!file.type.startsWith('image/')) {
    alert('Please select an image file.');
    return;
  }
  
  const reader = new FileReader();
  
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    previewElement.innerHTML = '';
    previewElement.appendChild(img);
    
    if (imageNumber === 1) {
      image1Data = e.target.result;
    } else {
      image2Data = e.target.result;
    }
    
    checkEnableAnalyzeButton();
  };
  
  reader.readAsDataURL(file);
}

// Check if both images are loaded to enable the analyze button
function checkEnableAnalyzeButton() {
  if (image1Data && image2Data) {
    analyzeBtn.disabled = false;
  }
}

// Analyze images using Anthropic API
async function analyzeImages() {
  // Show loader
  loader.style.display = 'flex';
  resultsContainer.style.display = 'none';
  
  try {
    // Call your backend service
    const response = await fetch('/api/compare-base64', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        image1: image1Data,
        image2: image2Data
      })
    });
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || 'An error occurred during analysis');
    }
    
    // Store the results
    analysisResults = await response.json();
    
    // Display the results
    displayResults(analysisResults);
    
    // Hide loader and show results
    loader.style.display = 'none';
    resultsContainer.style.display = 'block';
    
  } catch (error) {
    console.error('Error analyzing images:', error);
    alert('An error occurred while analyzing the images: ' + error.message);
    loader.style.display = 'none';
  }
}

// Display the comparison results
function displayResults(results) {
  // Display images in results section
  resultImage1.innerHTML = preview1.innerHTML;
  resultImage2.innerHTML = preview2.innerHTML;
  
  // Display key differences
  differencesList.innerHTML = '';
  results.comparison.keyDifferences.forEach(diff => {
    const li = document.createElement('li');
    li.textContent = `${diff.attribute}: ${diff.difference}`;
    differencesList.appendChild(li);
  });
  
  // Display image 1 details
  displayImageDetails(results.comparison.image1, image1Details);
  
  // Display image 2 details
  displayImageDetails(results.comparison.image2, image2Details);
  
  // Display JSON data
  jsonOutput.textContent = JSON.stringify(results, null, 2);
}

// Display details for a single image
function displayImageDetails(imageData, container) {
  container.innerHTML = '';
  
  // Loop through each attribute
  for (const [key, value] of Object.entries(imageData)) {
    if (key !== 'objects' && key !== 'sceneType') { // Handle these specially
      const category = document.createElement('div');
      category.className = 'attribute-category';
      
      const title = document.createElement('h4');
      title.textContent = formatAttributeName(key);
      category.appendChild(title);
      
      // Add each detail within this attribute
      for (const [detailKey, detailValue] of Object.entries(value)) {
        const item = document.createElement('div');
        item.className = 'attribute-item';
        
        if (Array.isArray(detailValue)) {
          item.innerHTML = `<span class="attribute-label">${formatAttributeName(detailKey)}:</span> ${detailValue.join(', ')}`;
        } else {
          item.innerHTML = `<span class="attribute-label">${formatAttributeName(detailKey)}:</span> ${detailValue}`;
        }
        
        category.appendChild(item);
      }
      
      container.appendChild(category);
    } else if (key === 'objects' || key === 'sceneType') {
      // Handle complex nested structures
      const category = document.createElement('div');
      category.className = 'attribute-category';
      
      const title = document.createElement('h4');
      title.textContent = formatAttributeName(key);
      category.appendChild(title);
      
      // Add primary and secondary
      const primaryItem = document.createElement('div');
      primaryItem.className = 'attribute-item';
      primaryItem.innerHTML = `<span class="attribute-label">Primary:</span> ${value.primary}`;
      category.appendChild(primaryItem);
      
      if (value.secondary) {
        const secondaryItem = document.createElement('div');
        secondaryItem.className = 'attribute-item';
        secondaryItem.innerHTML = `<span class="attribute-label">Secondary:</span> ${value.secondary}`;
        category.appendChild(secondaryItem);
      }
      
      // Add specifics if available
      if (value.specifics && value.specifics.length > 0) {
        const specificsItem = document.createElement('div');
        specificsItem.className = 'attribute-item';
        specificsItem.innerHTML = `<span class="attribute-label">Specifics:</span> ${value.specifics.join(', ')}`;
        category.appendChild(specificsItem);
      }
      
      // Add qualities if available
      if (value.qualities && value.qualities.length > 0) {
        const qualitiesItem = document.createElement('div');
        qualitiesItem.className = 'attribute-item';
        qualitiesItem.innerHTML = `<span class="attribute-label">Qualities:</span> ${value.qualities.join(', ')}`;
        category.appendChild(qualitiesItem);
      }
      
      container.appendChild(category);
    }
  }
}

// Format attribute names for display
function formatAttributeName(name) {
  return name
    .replace(/([A-Z])/g, ' $1') // Add space before capital letters
    .replace(/^./, str => str.toUpperCase()); // Capitalize first letter
}

// Copy JSON to clipboard
function copyJsonToClipboard() {
  const jsonStr = JSON.stringify(analysisResults, null, 2);
  navigator.clipboard.writeText(jsonStr)
    .then(() => {
      // Show success message
      const originalText = copyJsonBtn.textContent;
      copyJsonBtn.textContent = 'Copied!';
      setTimeout(() => {
        copyJsonBtn.textContent = originalText;
      }, 2000);
    })
    .catch(err => {
      console.error('Failed to copy JSON: ', err);
      alert('Failed to copy JSON to clipboard.');
    });
}