// Cloned by Rajat Lashkare on 2 Dec 2023 from World "Chat with GPT model" by Starter user 
// Please leave this clone trail here.


// talk to Hugging Face using its Inference API
// adapted from:
// https://huggingface.co/docs/api-inference/index

const MODEL_NAME = "gpt2";      // the model we are going to talk to

const ENDPOINT = `https://api-inference.huggingface.co/models/${MODEL_NAME}`; // the API endpoint

let API_TOKEN = "";            // the API token we need to talk to the model

// set the API token
function setkey() {
  API_TOKEN = $("#apikey").val().trim();
  if (API_TOKEN.length > 0) {
    $("#enterkey").html("<b> API key has been set. </b>");
    $("#key_error").hide();
  }
}

// query the model
async function query(data) {
  const response = await fetch(ENDPOINT, {
    headers: { Authorization: `Bearer ${API_TOKEN}` },
    method: "POST",
    body: JSON.stringify(data),
  }
  );
  const result = await response.json();
  return result;
}

// send the query and display the result
function sendQuery() {
  if (!API_TOKEN) {
    $("#key_error").show();
    return;
  } else {
    $("#key_error").hide();
  }

  var prompt = $("#prompt").val();
  $("#loading").show();

  query({ inputs: prompt }).then((response) => {
      
      // mh edit
      // console.log (response);
      
    $("#response").html(response[0].generated_text);
    $("#loading").hide();
  }).catch((error) => { 
    console.error(error);
    $("#loading").hide();
  });
}

// default body is margin 0 and padding 0 
// give it more whitespace:

$('body').css("margin", "20px");
$('body').css("padding", "20px");


document.write ( `
    <h1> AI API Integration with Hugging Face 🤗 </h1>

    Running World:
    <a href='https://ancientbrain.com/world.php?world=6184007328'>Current World</a>.
    <br>
    Aim: To showcase an example of using AI APIs for <A HREF="https://huggingface.co/models">Hugging Face Models</A>
    using the
    <A HREF="https://huggingface.co/docs/api-inference/index">Inference API</A>
    on Ancient Brain.
    <br>

    <h3> Enter User Access Token </h3>

    The crucial thing is you need an "API key" to talk to Hugging Face. <br>
    To get one, you need to sign up for a Hugging Face account and then get an API key
    <a href='https://huggingface.co/settings/tokens'>here</a>.
    <br>
    You enter your API key below and then chat away.
    Then communications to Hugging Face will be made from your IP address using your API key.
    <br>
    This World will never store your API key.
    You can view the <a href='https://ancientbrain.com/viewjs.php?world=6184007328'> source code</a> to see that is
    true!
    <p>

    <div id=enterkey>
        Enter API key:
        <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
        <button onclick='setkey();' class=ab-normbutton>Set API key</button>
    </div>

    <div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
        <h3> Example of Inference API Usage </h3>
        <h4> <a href="https://huggingface.co/docs/api-inference/detailed_parameters#text-generation-task">Text
                Generation Task</a> </h4>
        <div> To demonstrate an example, I will be using <a href="https://huggingface.co/gpt2g">gpt2</a> as a
            recommended model for testing API. <br>
            GPT-2 is a transformers model trained on a large English corpus in a self-supervised manner, predicting the
            next word in sentences.</div>

        <h4> Enter prompt below: </h4>
        <input style='width:25vw;' maxlength='2000' name="prompt" id="prompt"
            value='My name is John Doe. I like to'>
        <button onclick='sendQuery();'>Send</button>
        <h2 id="key_error" style="color: red; display: none;">PLEASE ENTER API KEY!!</h2>
    </div>

    <div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
        <h3> Model Response <span id="loading" style="display: none;">(Generating, please wait...)</span> </h3>
        <div id="response"></div>
    </div>

    <p> <i> Be warned that GPT replies are often completely inaccurate.<br>
            All LLM systems <a href="https://www.google.com/search?q=llm+hallucination"> "hallucinate"</a>.
            It is how they work. </i> </p>
` );

// send the query when the user presses enter
document.getElementById('prompt').onkeydown = function (event) { if (event.keyCode == 13) sendQuery(); };