Other js files uploaded

_api.js

@@ -0,0 +1,30 @@
+const TOKEN = ""; // Replace with your actual token
+
+async function query(chooseModel, token = TOKEN) {
+  try {
+    const response = await fetch(
+      `https://api-inference.huggingface.co/models/${chooseModel}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+        body: JSON.stringify({ inputs: text.value }),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`Error: ${response.status} ${response.statusText}`);
+    }
+
+    const result = await response.blob();
+    return result;
+  } catch (error) {
+    notificationInstance.show(
+      "error",
+      "Error fetching the image. Please try again later."
+    );
+    throw error; // Re-throw the error to handle it in the click event listener
+  }
+}

_dom.js

@@ -0,0 +1,31 @@
+//inputs
+const token = document.querySelector("#token");
+const text = document.querySelector("#text");
+
+//others
+const hintIcon = document.querySelector("#hint-icon");
+const hintContent = document.querySelector("#hint-content");
+
+//call to actions
+const chooseModel = document.querySelector("#chooseModel");
+const btn = document.querySelector("#btn");
+const downloadBtn = document.querySelector("#downloadBtn");
+const togglePassword = document.querySelector("#toggle-password");
+
+//outputs
+const modelInfo = document.querySelector("#model-info-text"); // Get the model info div
+const loader = document.querySelector("#loader");
+const img = document.querySelector("#img");
+const historyContainer = document.querySelector("#history");
+
+// ===============data=============
+const modelDetails = {
+  "Melonie/text_to_image_finetuned":
+    "These are LoRA adaption weights for runwayml/stable-diffusion-v1-5. The weights were fine-tuned on the lambdalabs/pokemon-blip-captions dataset.",
+
+  "mann-e/Mann-E_Dreams":
+    "This is the newest SDXL based model from Mann-E platform, which is a generative AI startup based in Iran. ",
+
+  "alvdansen/midsommarcartoon":
+    "A retro-style cartoon print model that blends a bit of an anime influence with classic northern european cartoons.",
+};

_events.js

@@ -0,0 +1,58 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // Instantiate Hint for API token
+  const apiTokenHint = new Hint("hint-icon", "hint-content");
+
+  // Instantiate Hint for Model Info
+  const modelInfoHint = new Hint("model-hint-icon", "model-hint-content");
+
+  chooseModel.addEventListener("change", updateModelInfo);
+
+  togglePassword.addEventListener("click", () => {
+    const type =
+      token.getAttribute("type") === "password" ? "text" : "password";
+    token.setAttribute("type", type);
+
+    togglePassword.querySelector("i").classList.toggle("fa-eye-slash");
+    togglePassword.querySelector("i").classList.toggle("fa-eye");
+  });
+
+  btn.addEventListener("click", async () => {
+    //form validations
+    if (text.value.trim() === "") {
+      notificationInstance.show("error", "Please enter some text.");
+      return;
+    }
+
+    if (token.value.trim() === "") {
+      notificationInstance.show("error", "Please enter your API token.");
+
+      return;
+    }
+
+    loader.classList.remove("hidden");
+    img.src = ""; // Clear the current image
+    downloadBtn.classList.add("hidden");
+
+    try {
+      const response = await query(chooseModel.value, token.value);
+      const objectUrl = URL.createObjectURL(response);
+      img.src = objectUrl;
+      downloadBtn.classList.remove("hidden");
+      imageHistoryInstance.addToHistory(objectUrl);
+    } catch (error) {
+      notificationInstance.show(
+        "error",
+        "Sorry, the model is currently unavailable. Please try again later."
+      );
+    } finally {
+      loader.classList.add("hidden");
+    }
+  });
+
+  downloadBtn.addEventListener("click", () => {
+    const link = document.createElement("a");
+    link.href = img.src;
+    link.download = "generated_image.png";
+    link.click();
+  });
+}); //END OF EVENT LISTENER

_helpers.js

@@ -0,0 +1,11 @@
+function updateModelInfo() {
+  const selectedModel = chooseModel.value;
+  modelInfo.textContent =
+    modelDetails[selectedModel] || "No information available for this model.";
+}
+
+//for test only
+// function showHistory() {
+//   console.log(imageHistoryInstance.history, "history");
+//   historyContainer.classList.remove("hidden");
+// }

main.js

@@ -0,0 +1,7 @@
+//initaializers
+
+// Initialize model info display
+updateModelInfo();
+
+// Initialize image saved history & display
+imageHistoryInstance.loadImageHistory();

myClasses.js

@@ -0,0 +1,178 @@
+// Hint class definition
+class Hint {
+  constructor(hintIconId, hintContentId) {
+    this.hintIcon = document.querySelector(`#${hintIconId}`);
+    this.hintContent = document.querySelector(`#${hintContentId}`);
+
+    // Bind event listener
+    this.hintIcon.addEventListener("click", this.toggle.bind(this));
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    this.hintContent.classList.toggle("show");
+  }
+}
+
+// Notification class with Singleton pattern (no need to create new instances for each notification)
+class Notification {
+  constructor() {
+    if (!Notification.instance) {
+      Notification.instance = this;
+      this.notifications = []; // Array to store active notifications
+    }
+    return Notification.instance;
+  }
+
+  show(type, message) {
+    const notificationElement = document.createElement("div");
+    notificationElement.className = `notification ${type}`;
+    notificationElement.textContent = message;
+
+    // Add close button
+    const closeButton = document.createElement("span");
+    closeButton.className = "close-btn";
+    closeButton.innerHTML = "×";
+    closeButton.addEventListener("click", () =>
+      this.close(notificationElement)
+    );
+    notificationElement.appendChild(closeButton);
+
+    document.body.appendChild(notificationElement);
+
+    // Auto-close after 5 seconds (5000 milliseconds)
+    setTimeout(() => {
+      this.close(notificationElement);
+    }, 5000);
+  }
+
+  close(notificationElement) {
+    notificationElement.remove();
+  }
+}
+
+// Singleton instance
+const notificationInstance = new Notification();
+
+// Example usage:
+// notificationInstance.show("success", "Operation successful!");
+// notificationInstance.show("error", "An error occurred. Please try again.");
+// notificationInstance.show("info", "Informational message.");
+
+// ImageHistory class
+class ImageHistory {
+  constructor(historyContainerId) {
+    this.history = []; // Array to store image URLs
+    this.historyContainer = document.querySelector(`#${historyContainerId}`);
+  }
+
+  addToHistory(imageUrl) {
+    this.history.push(imageUrl);
+    this.renderHistory(); // Update the DOM to reflect changes
+  }
+
+  renderHistory() {
+    // Clear existing history items in the DOM
+    this.historyContainer.innerHTML = "";
+
+    if (this.history.length === 0) {
+      const historyItem = document.createElement("p");
+      historyItem.textContent = "No images generated yet.";
+      this.historyContainer.appendChild(historyItem);
+      return;
+    }
+
+    // Render each image in history
+    this.history.forEach((imageUrl, index) => {
+      const historyItem = document.createElement("div");
+      historyItem.classList.add("history-item");
+
+      const image = document.createElement("img");
+      image.src = imageUrl;
+
+      historyItem.appendChild(image);
+
+      // Add download button
+      const downloadButton = document.createElement("span");
+      const iconDownload = document.createElement("i");
+      iconDownload.classList.add("fas", "fa-arrow-down");
+      downloadButton.appendChild(iconDownload);
+      //   downloadButton.textContent = "Download";
+      downloadButton.classList.add("downloadButton");
+      downloadButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.downloadThisImage(index);
+      });
+      historyItem.appendChild(downloadButton);
+
+      // Add remove button
+      const removeBtn = document.createElement("span");
+      const iconRemove = document.createElement("i");
+      iconRemove.classList.add("fas", "fa-xmark");
+      removeBtn.appendChild(iconRemove);
+      //   removeBtn.textContent = "Remove";
+      removeBtn.classList.add("removeButton");
+
+      removeBtn.addEventListener("click", (e) => this.removeFromHistory(index));
+      historyItem.appendChild(removeBtn);
+
+      this.historyContainer.appendChild(historyItem);
+    });
+  }
+
+  downloadThisImage(index) {
+    const imageUrl = this.history[index];
+    if (imageUrl) {
+      //   // Create a temporary <a> element to trigger download
+      const link = document.createElement("a");
+      link.href = imageUrl;
+      link.download = `image_${index + 1}.png`; // Adjust filename as needed
+      link.click();
+      link.remove();
+    } else {
+      //   // Handle error or show notification if image URL not found
+      notificationInstance.show("error", "Image URL not found.");
+    }
+  }
+
+  removeFromHistory(index) {
+    if (index >= 0 && index < this.history.length) {
+      this.history.splice(index, 1);
+      this.renderHistory(); // Update the DOM after removal
+      notificationInstance.show("success", "Image removed from history.");
+    } else {
+      // Handle error or show notification if index is out of range
+      notificationInstance.show("error", "Invalid index.");
+    }
+  }
+
+  clearHistory() {
+    this.history = [];
+    this.saveToLocalStorage();
+    this.renderHistory();
+    notificationInstance.show("success", "History cleared.");
+  }
+
+  saveToLocalStorage() {
+    localStorage.setItem("TextToImgHistory", JSON.stringify(this.history));
+    notificationInstance.show("success", "History saved.");
+  }
+
+  loadImageHistory() {
+    const savedHistory = localStorage.getItem("TextToImgHistory");
+    if (savedHistory) {
+      this.history = JSON.parse(savedHistory);
+      this.renderHistory();
+    }
+  }
+
+  // clearLocalStorage() {
+  //   localStorage.removeItem("TextToImgHistory");
+  // }
+}
+
+// Singleton instance of ImageHistory
+const imageHistoryInstance = new ImageHistory("history-container"); // Provide ID of history container element
+
+// Example usage:
+// imageHistoryInstance.addToHistory("https://example.com/image1.png");