Create script.js

script.js

@@ -0,0 +1,173 @@
+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');