Update script.js

script.js

@@ -1,85 +1,52 @@
-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",
-    },
-}
+const PRODUCTS = [
+  "C1012 Glacier White", "C1026 Polar", "C3269 Ash Grey", "C3168 Silver Wave", "C1005 Milky White",
+  "C2103 Onyx Carrara", "C2104 Massa", "C3105 Casla Cloudy", "C3146 Casla Nova", "C2240 Marquin",
+  "C2262 Concrete (Honed)", "C3311 Calacatta Sky", "C3346 Massimo", "C4143 Mario", "C4145 Marina",
+  "C4202 Calacatta Gold", "C1205 Casla Everest", "C4211 Calacatta Supreme", "C4204 Calacatta Classic",
+  "C1102 Super White", "C4246 Casla Mystery", "C4345 Oro", "C4346 Luxe", "C4342 Casla Eternal",
+  "C4221 Athena", "C4255 Calacatta Extra"
+];
 
 function switchTab(tab) {
-  document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
-  document.querySelectorAll('.tabs button').forEach(el => el.classList.remove('active'));
+  document.querySelectorAll('.section').forEach(el => el.style.display = 'none');
+  document.querySelectorAll('.tab-button').forEach(el => el.classList.remove('active'));
   document.getElementById(tab).style.display = 'block';
   document.querySelector(`button[onclick="switchTab('${tab}')"]`).classList.add('active');
+  resetOutput();
 }
 
-function renderProductGroups(containerId) {
+function renderProducts(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);
-  }
+  PRODUCTS.forEach(product => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'product-button';
+    button.textContent = product;
+    button.onclick = () => button.classList.toggle('selected');
+    container.appendChild(button);
+  });
+}
+
+function resetOutput() {
+  document.getElementById('loading').style.display = 'none';
+  document.getElementById('error').style.display = 'none';
+  document.getElementById('generated-image').style.display = 'none';
+  document.getElementById('download-link').style.display = 'none';
 }
 
-async function generateText2Img() {
+async function generateText2Img(event) {
+  event.preventDefault();
   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);
+  const selectedProducts = Array.from(document.querySelectorAll('#text2img-products .product-button.selected')).map(btn => btn.textContent);
 
-  if (!prompt || !productCodes.length) {
-    showError('Please enter a prompt and select at least one product.');
+  if (!prompt || !selectedProducts.length) {
+    showError('Vui lòng nhập mô tả và chọn ít nhất một sản phẩm.');
     return;
   }
 
-  showProgress(true);
+  showLoading(true);
   try {
     const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/text2img', {
       method: 'POST',
@@ -88,40 +55,39 @@ async function generateText2Img() {
         prompt,
         size,
         custom_size: size === 'Custom size' ? customSize : null,
-        product_codes: productCodes
+        product_codes: selectedProducts
       })
     });
     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';
+    showImage(data.image_url);
   } catch (err) {
     showError(err.message);
   } finally {
-    showProgress(false);
+    showLoading(false);
   }
 }
 
-async function generateImg2Img() {
+async function generateImg2Img(event) {
+  event.preventDefault();
   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);
+  const selectedProducts = Array.from(document.querySelectorAll('#img2img-products .product-button.selected')).map(btn => btn.textContent);
 
-  if (!fileInput.files[0] || !productCodes.length) {
-    showError('Please upload an image and select at least one product.');
+  if (!fileInput.files[0] || !selectedProducts.length) {
+    showError('Vui lòng tải ảnh và chọn ít nhất một sản phẩm.');
     return;
   }
 
-  showProgress(true);
+  showLoading(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));
+  selectedProducts.forEach(code => formData.append('product_codes', code));
 
   try {
     const response = await fetch('https://YOUR_USERNAME-caslaquartz-backend.hf.space/api/img2img', {
@@ -130,29 +96,16 @@ async function generateImg2Img() {
     });
     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';
+    showImage(data.image_url);
   } catch (err) {
     showError(err.message);
   } finally {
-    showProgress(false);
+    showLoading(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 showLoading(show) {
+  document.getElementById('loading').style.display = show ? 'block' : 'none';
 }
 
 function showError(message) {
@@ -162,6 +115,39 @@ function showError(message) {
   setTimeout(() => error.style.display = 'none', 5000);
 }
 
+function showImage(url) {
+  const img = document.getElementById('generated-image');
+  const link = document.getElementById('download-link');
+  img.src = url;
+  img.style.display = 'block';
+  link.href = url;
+  link.style.display = 'inline-block';
+}
+
+// Dropzone handlers
+function dropHandler(event) {
+  event.preventDefault();
+  const file = event.dataTransfer.files[0];
+  if (file) {
+    document.getElementById('image-upload').files = event.dataTransfer.files;
+    previewImage(file);
+  }
+}
+
+function dragOverHandler(event) {
+  event.preventDefault();
+}
+
+document.getElementById('image-upload').addEventListener('change', (e) => {
+  if (e.target.files[0]) previewImage(e.target.files[0]);
+});
+
+function previewImage(file) {
+  const preview = document.getElementById('preview-image');
+  preview.src = URL.createObjectURL(file);
+  preview.style.display = 'block';
+}
+
 // Khởi tạo
 document.getElementById('size').addEventListener('change', (e) => {
   document.getElementById('custom-size').style.display = e.target.value === 'Custom size' ? 'block' : 'none';
@@ -169,5 +155,5 @@ document.getElementById('size').addEventListener('change', (e) => {
 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');
+renderProducts('text2img-products');
+renderProducts('img2img-products');