script.js

const PRODUCT_GROUPS = {
  Standard: {
    "Standard": {
        "C1012 Glacier White": "817687427545199895",
        "C1026 Polar": "819910519797326073",
        "C3269 Ash Grey": "821839484099264081",
        "C3168 Silver Wave": "821849044696643212",
        "C1005 Milky White": "821948258441171133",
    },
    "Deluxe": {
        "C2103 Onyx Carrara": "827090618489513527",
        "C2104 Massa": "822075428127644644",
        "C3105 Casla Cloudy": "828912225788997963",
        "C3146 Casla Nova": "828013009961087650",
        "C2240 Marquin": "828085015087780649",
        "C2262 Concrete (Honed)": "822211862058871636",
        "C3311 Calacatta Sky": "829984593223502930",
        "C3346 Massimo": "827938741386607132",
    },
    "Luxury": {
        "C4143 Mario": "829984593223502930",
        "C4145 Marina": "828132560375742058",
        "C4202 Calacatta Gold": "828167757632695310",
        "C1205 Casla Everest": "828296778450463190",
        "C4211 Calacatta Supreme": "828436321937882328",
        "C4204 Calacatta Classic": "828422973179466146",
        "C5240 Spring": "is coming",
        "C1102 Super White": "828545723344775887",
        "C4246 Casla Mystery": "828544778451950698",
        "C4345 Oro": "828891068780182635",
        "C4346 Luxe": "829436426547535131",
        "C4342 Casla Eternal": "829190256201829181",
        "C4221 Athena": "829644354504131520",
        "C4222 Lagoon": "is coming",
        "C5225 Amber": "is coming",
    },
    "Super Luxury": {
        "C4255 Calacatta Extra": "829659013227537217",
    },
}

function switchTab(tab) {
  document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
  document.querySelectorAll('.tabs button').forEach(el => el.classList.remove('active'));
  document.getElementById(tab).style.display = 'block';
  document.querySelector(`button[onclick="switchTab('${tab}')"]`).classList.add('active');
}

function renderProductGroups(containerId) {
  const container = document.getElementById(containerId);
  for (const [group, products] of Object.entries(PRODUCT_GROUPS)) {
    const div = document.createElement('div');
    div.className = 'product-group';
    div.style.backgroundColor = GROUP_COLORS[group];
    div.innerHTML = `<h3>${group}</h3>`;
    for (const code in products) {
      if (products[code] !== "is coming" && products[code] !== "is loading") {
        div.innerHTML += `
          <label>
            <input type="checkbox" name="${group}" value="${code}">
            ${code}
          </label>
        `;
      }
    }
    container.appendChild(div);
  }
}

async function generateText2Img() {
  const prompt = document.getElementById('prompt').value;
  const size = document.getElementById('size').value;
  const customSize = document.getElementById('custom-size').value;
  const productCheckboxes = document.querySelectorAll('#product-groups input:checked');
  const productCodes = Array.from(productCheckboxes).map(cb => cb.value);

  if (!prompt || !productCodes.length) {
    showError('Please enter a prompt and select at least one product.');
    return;
  }

  showProgress(true);
  try {
    const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/text2img', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        prompt,
        size,
        custom_size: size === 'Custom size' ? customSize : null,
        product_codes: productCodes
      })
    });
    const data = await response.json();
    if (data.error) throw new Error(data.error);
    document.getElementById('output-image').src = data.image_url;
    document.getElementById('output-image').style.display = 'block';
  } catch (err) {
    showError(err.message);
  } finally {
    showProgress(false);
  }
}

async function generateImg2Img() {
  const fileInput = document.getElementById('image-upload');
  const position = document.getElementById('position').value;
  const size = document.getElementById('size-img2img').value;
  const customSize = document.getElementById('custom-size-img2img').value;
  const productCheckboxes = document.querySelectorAll('#product-groups-img2img input:checked');
  const productCodes = Array.from(productCheckboxes).map(cb => cb.value);

  if (!fileInput.files[0] || !productCodes.length) {
    showError('Please upload an image and select at least one product.');
    return;
  }

  showProgress(true);
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  formData.append('position', position);
  formData.append('size', size);
  if (size === 'Custom size') formData.append('custom_size', customSize);
  productCodes.forEach(code => formData.append('product_codes', code));

  try {
    const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/img2img', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    if (data.error) throw new Error(data.error);
    document.getElementById('output-image').src = data.image_url;
    document.getElementById('output-image').style.display = 'block';
  } catch (err) {
    showError(err.message);
  } finally {
    showProgress(false);
  }
}

function showProgress(show) {
  const progress = document.getElementById('progress');
  const bar = progress.querySelector('.progress-bar');
  progress.style.display = show ? 'block' : 'none';
  if (show) {
    let width = 0;
    const interval = setInterval(() => {
      if (width >= 100) clearInterval(interval);
      width += 10;
      bar.style.width = `${width}%`;
    }, 500);
  } else {
    bar.style.width = '0%';
  }
}

function showError(message) {
  const error = document.getElementById('error');
  error.textContent = message;
  error.style.display = 'block';
  setTimeout(() => error.style.display = 'none', 5000);
}

// Khởi tạo
document.getElementById('size').addEventListener('change', (e) => {
  document.getElementById('custom-size').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
});
document.getElementById('size-img2img').addEventListener('change', (e) => {
  document.getElementById('custom-size-img2img').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
});
renderProductGroups('product-groups');
renderProductGroups('product-groups-img2img');