sematranslator

Running

App Files Files Community

lewiskimaru commited on Jan 18

Commit

75a0eef

•

1 Parent(s): 5ecc89c

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +64 -50

static/index.html CHANGED Viewed

@@ -1,52 +1,66 @@
-<!DOCTYPE html>
 <html>
-<head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>Sema Translator</title>
-    <link rel="stylesheet" href="static/style.css" />
-    <py-script src="modules/flores200_codes.py"></py-script>
-</head>
-<body>
-    <div class="Header">
-        <h1>Sema Translator</h1>
-        <p>Unlock the Power of Global Communication with Sema Translator! Seamlessly bridging language barriers. With support for over 200 languages, Sema Translator opens up a realm of possibilities for building truly global applications.</p>
-    </div>
-    <div class="LanguageDropdown" style="text-align:center">
-            <h2>Select a Language:</h2>
-            <select id="languageSelect">
-                {"".join(f"<option value='{code}'>{lang} - {code}</option>" for lang, code in flores_codes.items())}
-            </select>
-    </div>
-    <div class="instructions">
-        <p>Use the following python code to access the api endpoint</p>
-        <pre style="text-align: left;">
-import requests
-url = "{public_url}/translate/"
-data = {
-    "userinput": "rũcinĩ rwega, niwokĩra wega?",
-    "target_lang": "eng_Latn",
-}
-response = requests.post(url, json=data)
-result = response.json()
-print(result)
-source_language = result['source_language']
-print("Source Language:", source_language)
-translation = result['translated_text']
-print("Translated text:", translation)
-        </pre>
-    </div>
-    <div class="footer">
-        <h1>Created by Lewis Kamau Kiamru</h1>
-    </div>
-</body>
-</html>

 <html>
+  <head>
     <meta charset="utf-8">
+    <title>Sema API Integration Example</title>
+  </head>
+  <body>
+    <h1>Translate and Detect Source Language</h1>
+    <form action="#" method="post">
+      <label for="userinput">Enter text to translate:</label>
+      <input type="text" id="userinput" name="userinput">
+      <label for="target_lang">Enter target language:</label>
+      <input type="text" id="target_lang" name="target_lang">
+      <input type="submit" value="Translate">
+    </form>
+    <div id="output"></div>
+    <script>
+      const form = document.querySelector('form');
+      const targetLangInput = document.querySelector('#target_lang');
+      const outputDiv = document.querySelector('#output');
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const userInput = document.querySelector('#userinput').value;
+        const targetLang = targetLangInput.value || 'swh_Latn';
+        try {
+          const response = await fetch('https://kamau1-sema-api.hf.space/translate_detect/', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              userinput: userInput,
+              target_lang: targetLang
+            })
+          });
+          const data = await response.json();
+          const sourceLanguage = data.source_language;
+          const translatedText = data.translations[0].text;
+          outputDiv.innerHTML = `
+            <p><strong>Output:</strong></p>
+            <p>Source Language: ${source_language}</p>
+            <p>Translated Text: ${translated_text}</p>
+          `;
+        } catch (error) {
+          console.error(error);
+          outputDiv.textContent = 'An error occurred while translating the text. Please check the input and try again.';
+        }
+      });
+    </script>
+  </body>
+</html>