Update frontend/script.js

frontend/script.js

@@ -1,99 +1,242 @@
-async function uploadFile(endpoint) {
-    const fileInput = document.getElementById("fileInput");
-    const file = fileInput.files[0];
-
+// Tab switching functionality
+document.addEventListener("DOMContentLoaded", () => {
+    // Tab switching
+    const tabButtons = document.querySelectorAll(".tab-button")
+    const tabContents = document.querySelectorAll(".tab-content")
+  
+    tabButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        // Remove active class from all buttons and hide all contents
+        tabButtons.forEach((btn) => btn.classList.remove("active"))
+        tabContents.forEach((content) => content.classList.add("hidden"))
+  
+        // Add active class to clicked button and show corresponding content
+        button.classList.add("active")
+        const contentId = "content-" + button.id.split("-")[1]
+        document.getElementById(contentId).classList.remove("hidden")
+      })
+    })
+  
+    // File input handling
+    const fileInput = document.getElementById("fileInput")
+    const fileName = document.getElementById("fileName")
+  
+    fileInput.addEventListener("change", () => {
+      if (fileInput.files.length > 0) {
+        fileName.textContent = fileInput.files[0].name
+      } else {
+        fileName.textContent = "No file chosen"
+      }
+    })
+  
+    // Copy output button
+    const copyButton = document.getElementById("copyOutput")
+    copyButton.addEventListener("click", () => {
+      const output = document.getElementById("output")
+      navigator.clipboard
+        .writeText(output.textContent)
+        .then(() => {
+          showNotification("Results copied successfully!")
+        })
+        .catch((err) => {
+          console.error("Failed to copy text: ", err)
+        })
+    })
+  
+    // Translation options toggle
+    const translateBtn = document.getElementById("translateBtn")
+    const translationOptions = document.getElementById("translationOptions")
+  
+    translateBtn.addEventListener("click", () => {
+      // Toggle translation options visibility
+      if (translationOptions.classList.contains("hidden")) {
+        translationOptions.classList.remove("hidden")
+      } else {
+        // If options are already visible, perform translation
+        translateText()
+      }
+    })
+  })
+  
+  // Show notification function
+  function showNotification(message) {
+    // Create notification element
+    const notification = document.createElement("div")
+    notification.className =
+      "notification fixed top-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-md"
+    notification.innerHTML = message
+  
+    // Add to document
+    document.body.appendChild(notification)
+  
+    // Remove after 3 seconds
+    setTimeout(() => {
+      notification.remove()
+    }, 3000)
+  }
+  
+  // Show/hide loader
+  function toggleLoader(show) {
+    const loader = document.getElementById("loader")
+    if (show) {
+      loader.classList.remove("hidden")
+    } else {
+      loader.classList.add("hidden")
+    }
+  }
+  
+  // API Functions
+  async function uploadFile(endpoint) {
+    const fileInput = document.getElementById("fileInput")
+    const file = fileInput.files[0]
+  
     if (!file) {
-        alert("Please select a file first.");
-        return;
+      showNotification("Please select a file first.")
+      return
+    }
+  
+    toggleLoader(true)
+    const formData = new FormData()
+    formData.append("file", file)
+  
+    try {
+      const response = await fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {
+        method: "POST",
+        body: formData,
+      })
+  
+      const data = await response.json()
+      document.getElementById("output").innerText = JSON.stringify(data, null, 2)
+    } catch (error) {
+      console.error("Error:", error)
+      document.getElementById("output").innerText = "Error fetching data!"
+    } finally {
+      toggleLoader(false)
+    }
+  }
+  
+  async function processText(endpoint) {
+    // If endpoint is translate, we now handle it separately
+    if (endpoint === "translate") {
+      // Show translation options if they're hidden
+      if (document.getElementById("translationOptions").classList.contains("hidden")) {
+        document.getElementById("translationOptions").classList.remove("hidden")
+        return
+      }
+      return translateText()
+    }
+  
+    const text = document.getElementById("textInput").value
+  
+    if (!text) {
+      showNotification("Please enter text first.")
+      return
     }
-
-    const formData = new FormData();
-    formData.append("file", file);
-
+  
+    toggleLoader(true)
+    const formData = new FormData()
+    formData.append("text", text)
+  
     try {
-        const response = await fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {  // ✅ تم تصحيح المسار
-            method: "POST",
-            body: formData
-        });
-
-        const data = await response.json();
-        document.getElementById("output").innerText = JSON.stringify(data, null, 2);
+      const response = await fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {
+        method: "POST",
+        body: formData,
+      })
+  
+      const data = await response.json()
+      document.getElementById("output").innerText = JSON.stringify(data, null, 2)
     } catch (error) {
-        console.error("Error:", error);
-        document.getElementById("output").innerText = "Error fetching data!";
+      console.error("Error:", error)
+      document.getElementById("output").innerText = "Error fetching data!"
+    } finally {
+      toggleLoader(false)
     }
-}
-
-async function processText(endpoint) {
-    const text = document.getElementById("textInput").value;
-
+  }
+  
+  async function translateText() {
+    const text = document.getElementById("textInput").value
+    const sourceLanguage = document.getElementById("sourceLanguage").value
+    const targetLanguage = document.getElementById("targetLanguage").value
+  
     if (!text) {
-        alert("Please enter some text.");
-        return;
+      showNotification("Please enter text to translate.")
+      return
     }
-
-    const formData = new FormData();
-    formData.append("text", text);
-
+  
+    toggleLoader(true)
+    const formData = new FormData()
+    formData.append("text", text)
+    formData.append("source_lang", sourceLanguage)
+    formData.append("target_lang", targetLanguage)
+  
     try {
-        const response = await fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {  // ✅ تم تصحيح المسار
-            method: "POST",
-            body: formData
-        });
-
-        const data = await response.json();
-        document.getElementById("output").innerText = JSON.stringify(data, null, 2);
+      const response = await fetch("https://soltane777-textgeneration.hf.space/translate", {
+        method: "POST",
+        body: formData,
+      })
+  
+      const data = await response.json()
+      document.getElementById("output").innerText = JSON.stringify(data, null, 2)
     } catch (error) {
-        console.error("Error:", error);
-        document.getElementById("output").innerText = "Error fetching data!";
+      console.error("Error:", error)
+      document.getElementById("output").innerText = "Error fetching translation data!"
+    } finally {
+      toggleLoader(false)
     }
-}
-
-async function askQuestion() {
-    const context = document.getElementById("contextInput").value;
-    const question = document.getElementById("questionInput").value;
-
+  }
+  
+  async function askQuestion() {
+    const context = document.getElementById("contextInput").value
+    const question = document.getElementById("questionInput").value
+  
     if (!context || !question) {
-        alert("يرجى إدخال كل من النص المرجعي والسؤال.");
-        return;
+      showNotification("Please enter both reference text and question.")
+      return
     }
-
+  
+    toggleLoader(true)
     try {
-        const response = await fetch("https://soltane777-textgeneration.hf.space/qa/", {  
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ context: context, question: question })
-        });
-
-        const data = await response.json();
-        document.getElementById("output").innerText = JSON.stringify(data, null, 2);
+      const response = await fetch("https://soltane777-textgeneration.hf.space/qa/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ context: context, question: question }),
+      })
+  
+      const data = await response.json()
+      document.getElementById("output").innerText = JSON.stringify(data, null, 2)
     } catch (error) {
-        console.error("Error:", error);
-        document.getElementById("output").innerText = "Error fetching data!";
+      console.error("Error:", error)
+      document.getElementById("output").innerText = "Error fetching data!"
+    } finally {
+      toggleLoader(false)
     }
-}
-
-async function generateCode() {
-    const prompt = document.getElementById("codeInput").value;
-
+  }
+  
+  async function generateCode() {
+    const prompt = document.getElementById("codeInput").value
+  
     if (!prompt) {
-        alert("يرجى إدخال وصف للرسم البياني.");
-        return;
+      showNotification("Please enter a description for the code.")
+      return
     }
-
-    const formData = new FormData();
-    formData.append("prompt", prompt);
-
+  
+    toggleLoader(true)
+    const formData = new FormData()
+    formData.append("prompt", prompt)
+  
     try {
-        const response = await fetch("https://soltane777-textgeneration.hf.space/generate_code/", {  
-            method: "POST",
-            body: formData
-        });
-
-        const data = await response.json();
-        document.getElementById("output").innerText = JSON.stringify(data, null, 2);
+      const response = await fetch("https://soltane777-textgeneration.hf.space/generate_code/", {
+        method: "POST",
+        body: formData,
+      })
+  
+      const data = await response.json()
+      document.getElementById("output").innerText = JSON.stringify(data, null, 2)
     } catch (error) {
-        console.error("Error:", error);
-        document.getElementById("output").innerText = "Error fetching data!";
+      console.error("Error:", error)
+      document.getElementById("output").innerText = "Error fetching data!"
+    } finally {
+      toggleLoader(false)
     }
-}
+  }
+