English-Malayalam Translate v30

Dockerfile

@@ -27,4 +27,8 @@ WORKDIR $HOME/app
 # Copy the current directory contents into the container at $HOME/app setting the owner to the user
 COPY --chown=user . $HOME/app
 
+RUN --mount=type=secret,id=API_KEY,mode=0444,required=true \
+ API_KEY=$(cat /run/secrets/API_KEY)&&
+ echo "const API_KEY = '${API_KEY}';" > $HOME/app/static/config.js 
+
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -2,7 +2,6 @@ import os
 from fastapi import FastAPI, Request
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
-from fastapi.templating import Jinja2Templates
 from transformers import pipeline
 
 
@@ -20,11 +19,4 @@ app.mount("/", StaticFiles(directory="static", html=True), name="static")
 
 @app.get("/")
 def index() -> FileResponse:
-    return FileResponse(path="/app/static/index.html", media_type="text/html")
-
-templates = Jinja2Templates(directory="/app/templates")
-
-@app.get("/chat")
-async def chat():
-    apikey = {"APIKEY": os.environ.get("API_KEY")}
-    return templates.TemplateResponse("chat.html", {"apikey": apikey})
+    return FileResponse(path="/app/static/index.html", media_type="text/html")

requirements.txt

@@ -1,5 +1,4 @@
 fastapi==0.74.*
-jinja2
 requests==2.27.*
 sentencepiece==0.1.*
 torch==1.11.*

static/chat.js

@@ -1,84 +0,0 @@
-console.log("API_KEY " + apiKey)
-const translateText = async (text) => {
-    const inferResponse = await fetch(`infer_t5?input=${text}`);
-    const inferJson = await inferResponse.json();
-  
-    return inferJson.output;
-  };
-
-
-function generatePrompterAssistantText(inputString) {
-    // Split the input string into an array of sentences
-    const sentences = inputString.split('<|endoftext|>');
-  
-    // Initialize arrays for prompter and assistant text
-    let prompterText = [];
-    let assistantText = [];
-  
-    // Loop through each sentence and add it to the prompter or assistant text array
-    for (let i = 0; i < sentences.length; i++) {
-      // Check if the sentence contains the <prompter> tag
-      if (sentences[i].includes('<|prompter|>')) {
-        // Extract the text within the <prompter> tags and add it to the prompter text array
-        const prompterSentence = sentences[i].replace(/<\|prompter\|>/g, '');
-        prompterText.push(prompterSentence);
-      } else if (sentences[i].includes('<|assistant|>')) {
-        const assistantSentence = sentences[i].replace(/<\|assistant\|>/g, '');
-        // Add the sentence to the assistant text array
-        assistantText.push(assistantSentence);
-      }
-    }
-  
-    // Return the prompter and assistant text arrays
-    return [prompterText, assistantText];
-  }
-
-const submitButton = document.querySelector('#submit')
-const outPutElement = document.querySelector('#output')
-const inputElement = document.querySelector('input')
-const historyElement = document.querySelector('.history')
-const buttonElement = document.querySelector('button')
-
-
-function changeInput(value)
-{
-    console.log(value)
-    const inputElement = document.querySelector('input')
-    inputElement.value = value
-}
-async function getMessage(){
-    console.log("input value "+ inputElement.value)
-    const options = {
-        method: "POST",
-        headers: {
-            Authorization: `Bearer ${API_KEY}`,
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-            inputs: "<|prompter|>" + inputElement.value + "<|endoftext|><|assistant|>"
-        })
-    } 
-    try{
-        const response = await fetch("https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5", options);
-        const data = await response.json()
-        console.log(data[0].generated_text)
-
-        if(inputElement.value && data && data[0].generated_text){
-            const [prompterText, assistantText] = generatePrompterAssistantText(data[0].generated_text);
-            outPutElement.textContent = await translateText(assistantText);
-            const pElement = document.createElement('p')
-            pElement.textContent = inputElement.value
-            pElement.addEventListener('click', () => changeInput(pElement.textContent))
-            historyElement.append(pElement)
-        }
-    } catch(error) {
-        console.log(error)
-    }
-}
-
-submitButton.addEventListener('click', getMessage)
-
-function clearInput(){
-    inputElement.value = ''
-}
-buttonElement.addEventListener('click', clearInput)

static/index.html

@@ -1,9 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>JavaScipt Open Assistant Clone</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="config.js"></script>
 </head>
 <body>
-    <!-- Include your script file -->
-    <script src="script.js"></script>
+    <section class="side-bar">
+        <button>New Chat</button>
+        <div class="history"></div>
+        <nav>
+            <p>Made by a മലയാളി</p>
+        </nav>
+    </section>
+    <section  class="main">
+        <h1>മലയാളം - Open Assistant</h1>
+        <p id="output"></p>
+        <div class="bottom-section">
+            <div class="input-container">
+                <input>
+                <div id="submit">➢</div>
+            </div>
+        </div>
+        <p class="info">Open Assistant - This is the 4th iteration English 
+            supervised-fine-tuning (SFT) model of the Open-Assistant project. 
+        </p>
+    </section>
+     <script src="script.js"></script>
 </body>
-</html>
+</html>

static/script.js

@@ -1,15 +1,84 @@
-const xhr = new XMLHttpRequest();
-xhr.open('GET', '/chat');
-xhr.onload = function() {
-    if (xhr.status === 200) {
-        // Update the DOM with the rendered HTML
-        const content = document.createElement('div');
-        content.innerHTML = xhr.response;
-        document.body.appendChild(content);
+console.log("API_KEY " + apiKey)
+const translateText = async (text) => {
+    const inferResponse = await fetch(`infer_t5?input=${text}`);
+    const inferJson = await inferResponse.json();
+  
+    return inferJson.output;
+  };
+
+
+function generatePrompterAssistantText(inputString) {
+    // Split the input string into an array of sentences
+    const sentences = inputString.split('<|endoftext|>');
+  
+    // Initialize arrays for prompter and assistant text
+    let prompterText = [];
+    let assistantText = [];
+  
+    // Loop through each sentence and add it to the prompter or assistant text array
+    for (let i = 0; i < sentences.length; i++) {
+      // Check if the sentence contains the <prompter> tag
+      if (sentences[i].includes('<|prompter|>')) {
+        // Extract the text within the <prompter> tags and add it to the prompter text array
+        const prompterSentence = sentences[i].replace(/<\|prompter\|>/g, '');
+        prompterText.push(prompterSentence);
+      } else if (sentences[i].includes('<|assistant|>')) {
+        const assistantSentence = sentences[i].replace(/<\|assistant\|>/g, '');
+        // Add the sentence to the assistant text array
+        assistantText.push(assistantSentence);
+      }
     }
-    else {
-        console.log('Request failed.  Returned status of ' + xhr.status);
+  
+    // Return the prompter and assistant text arrays
+    return [prompterText, assistantText];
+  }
+
+const submitButton = document.querySelector('#submit')
+const outPutElement = document.querySelector('#output')
+const inputElement = document.querySelector('input')
+const historyElement = document.querySelector('.history')
+const buttonElement = document.querySelector('button')
+
+
+function changeInput(value)
+{
+    console.log(value)
+    const inputElement = document.querySelector('input')
+    inputElement.value = value
+}
+async function getMessage(){
+    console.log("input value "+ inputElement.value)
+    const options = {
+        method: "POST",
+        headers: {
+            Authorization: `Bearer ${API_KEY}`,
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            inputs: "<|prompter|>" + inputElement.value + "<|endoftext|><|assistant|>"
+        })
+    } 
+    try{
+        const response = await fetch("https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5", options);
+        const data = await response.json()
+        console.log(data[0].generated_text)
+
+        if(inputElement.value && data && data[0].generated_text){
+            const [prompterText, assistantText] = generatePrompterAssistantText(data[0].generated_text);
+            outPutElement.textContent = await translateText(assistantText);
+            const pElement = document.createElement('p')
+            pElement.textContent = inputElement.value
+            pElement.addEventListener('click', () => changeInput(pElement.textContent))
+            historyElement.append(pElement)
+        }
+    } catch(error) {
+        console.log(error)
     }
-};
-xhr.send();
+}
+
+submitButton.addEventListener('click', getMessage)
 
+function clearInput(){
+    inputElement.value = ''
+}
+buttonElement.addEventListener('click', clearInput)

templates/chat.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>JavaScipt Open Assistant Clone</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <section class="side-bar">
-        <button>New Chat</button>
-        <div class="history"></div>
-        <nav>
-            <p>Made by a മലയാളി</p>
-        </nav>
-    </section>
-    <section  class="main">
-        <h1>മലയാളം - Open Assistant</h1>
-        <p id="output"></p>
-        <div class="bottom-section">
-            <div class="input-container">
-                <input>
-                <div id="submit">➢</div>
-            </div>
-        </div>
-        <p class="info">Open Assistant - This is the 4th iteration English 
-            supervised-fine-tuning (SFT) model of the Open-Assistant project. 
-        </p>
-    </section>
-    <script>
-		var apiKey = {{ apikey.APIKEY }};
-	</script>
-    <script src="chat.js"></script>
-</body>
-</html>