Hugging Face's logo

Spaces:
parthmax
/
FaceAging-AI
Runtime error

App Files Community
FaceAging-AI
File size: 4,201 Bytes 
98129a3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
// ===== Form Submission with Backend Integration =====
document.getElementById("uploadForm").addEventListener("submit", async function (e) {
  e.preventDefault();

  const fileInput = document.getElementById("fileInput");
  const conversionSelect = document.getElementById("conversion");
  const outputImage = document.getElementById("outputImage");
  const resultDiv = document.getElementById("result");
  const generateBtn = document.getElementById("generateBtn");

  if (!fileInput.files.length) return;

  const file = fileInput.files[0];
  const conversion = conversionSelect.value;

  generateBtn.disabled = true;
  generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';

  const formData = new FormData();
  formData.append("file", file);
  formData.append("conversion", conversion);

  try {
    const response = await fetch("/convert/", {
      method: "POST",
      body: formData,
    });

    const data = await response.json();

    if (data.image) {
      outputImage.src = `data:image/png;base64,${data.image}`;
      outputImage.alt = `Face image after ${conversion === "young_to_old" ? "aging" : "de-aging"} transformation`;
      outputImage.style.display = "block";
      resultDiv.scrollIntoView({ behavior: "smooth" });
    } else {
      alert(data.error || "An error occurred.");
    }
  } catch (error) {
    console.error("Error:", error);
    alert("Something went wrong. Please try again later.");
  } finally {
    generateBtn.disabled = false;
    generateBtn.innerHTML = "Generate";
  }
});


// ===== Dark Mode Toggle =====
const darkToggle = document.getElementById("darkToggle");
const body = document.body;
const darkIcon = darkToggle.querySelector("i");

function setDarkMode(enabled) {
  if (enabled) {
    body.classList.add("dark");
    darkIcon.classList.replace("fa-moon", "fa-sun");
    darkToggle.setAttribute("aria-label", "Toggle light mode");
    darkToggle.setAttribute("title", "Toggle light mode");
  } else {
    body.classList.remove("dark");
    darkIcon.classList.replace("fa-sun", "fa-moon");
    darkToggle.setAttribute("aria-label", "Toggle dark mode");
    darkToggle.setAttribute("title", "Toggle dark mode");
  }
  localStorage.setItem("faceAgingDarkMode", enabled ? "true" : "false");
}




// ===== Mobile Menu Toggle =====
const mobileMenuButton = document.getElementById("mobileMenuButton");
const mobileMenu = document.getElementById("mobileMenu");

mobileMenuButton.addEventListener("click", () => {
  const expanded = mobileMenuButton.getAttribute("aria-expanded") === "true";
  mobileMenuButton.setAttribute("aria-expanded", !expanded);
  mobileMenu.classList.toggle("hidden");
});


// ===== Header Shadow on Scroll =====
const header = document.getElementById("header");
window.addEventListener("scroll", () => {
  if (window.scrollY > 10) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});


// ===== Scroll Animations =====
const scrollElements = document.querySelectorAll(".scroll-animate, .fade-in");
const scrollObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        scrollObserver.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.15 }
);
scrollElements.forEach((el) => scrollObserver.observe(el));


// ===== Learn More Toggle =====
const learnMoreBtn = document.getElementById("learnMoreBtn");
const learnMoreContent = document.getElementById("learnMoreContent");

learnMoreBtn.addEventListener("click", () => {
  const isOpen = learnMoreContent.classList.toggle("open");
  learnMoreContent.hidden = !isOpen;
  learnMoreBtn.setAttribute("aria-expanded", isOpen);
  learnMoreBtn.textContent = isOpen ? "Show Less" : "Learn More";
});


// ===== Hero Upload Button Triggers File Picker =====
const uploadBtnHero = document.getElementById("uploadBtnHero");
const fileInput = document.getElementById("fileInput");

uploadBtnHero.addEventListener("click", () => {
  fileInput.click();
});