static/script.js

const translateText = async (text) => {
    console.log(text)
    const inferResponse = await fetch(`infer_t5?input=${text}`);
    const inferJson = await inferResponse.json();
    console.log(inferJson.output)
    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);
            // const en_text_ml = "English: "  + assistantText[0] + " Malayalam:";
            // console.log(en_text_ml)
            outPutElement.textContent = await translateText(assistantText[0]);
            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)