// Cloned by Colin Ekedigwe on 13 Nov 2024 from World "Multilingual Translation Tool" by Starter user
// Please leave this clone trail here.

var apikeyOpenAI = ""; // OpenAI API key
var apikeyGoogle = ""; // Google Cloud API key

// Set default translation settings
var sourceLanguage = "detect";
var targetLanguage = "en";

// Apply basic styles
$('body').css("margin", "20px");
$('body').css("padding", "20px");

// HTML structure inside document.write()
document.write(`
<h1>AI API Query Comparison</h1>
<p>This tool queries multiple AI APIs and compares their responses.</p>

<div>
  <h3>Enter API Key for OpenAI</h3>
  <input type="text" id="apikeyOpenAI" style="width: 30vw;" placeholder="Enter OpenAI API key">
  <button onclick="setAPIKeys();" class="ab-normbutton">Set OpenAI API Key</button>
  <p id="keyStatusOpenAI"></p>
</div>

<div>
  <h3>Enter API Key for Google Translation</h3>
  <input type="text" id="apikeyGoogle" style="width: 30vw;" placeholder="Enter Google API key">
  <button onclick="setAPIKeys();" class="ab-normbutton">Set Google API Key</button>
  <p id="keyStatusGoogle"></p>
</div>

<div>
  <h3>Enter Text to Query</h3>
  <input type="text" id="textToQuery" style="width: 50vw;" placeholder="Enter query text">
</div>

<div>
  <button onclick="queryAPIs();" class="ab-normbutton">Query APIs</button>
</div>

<div style="background-color: #ffffcc; padding: 10px; border: 1px solid black; margin-top: 20px;">
  <h3>Responses from OpenAI</h3>
  <div id="responseOpenAI"></div>
</div>

<div style="background-color: #ffffcc; padding: 10px; border: 1px solid black; margin-top: 20px;">
  <h3>Responses from Google Translation</h3>
  <div id="responseGoogle"></div>
</div>

<p><i>Be aware that responses might vary based on each AI's model and the input provided.</i></p>
`);

// Function to set both API keys
function setAPIKeys() {
  apikeyOpenAI = document.getElementById("apikeyOpenAI").value.trim();
  apikeyGoogle = document.getElementById("apikeyGoogle").value.trim();
  
  if (apikeyOpenAI && apikeyGoogle) {
    document.getElementById("keyStatusOpenAI").innerHTML = "<b>OpenAI API key has been set.</b>";
    document.getElementById("keyStatusGoogle").innerHTML = "<b>Google API key has been set.</b>";
  } else {
    document.getElementById("keyStatusOpenAI").innerHTML = "<font color='red'><b>Please enter both API keys.</b></font>";
  }
}

// Function to handle queries and compare results from both APIs
function queryAPIs() {
  const queryText = document.getElementById("textToQuery").value.trim();

  if (!apikeyOpenAI || !apikeyGoogle) {
    alert("Please set both API keys.");
    return;
  }

  if (!queryText) {
    alert("Please enter text to query.");
    return;
  }

  // Query OpenAI API
  queryOpenAI(queryText);

  // Query Google Translation API (using the same query for translation demonstration)
  queryGoogleTranslation(queryText);
}

// Function to query OpenAI API
function queryOpenAI(queryText) {
  const openaiURL = "https://api.openai.com/v1/chat/completions";
  const openaiModel = "gpt-3.5-turbo";
  
  const data = {
    "model": openaiModel,
    "temperature": 0.7,
    "messages": [{
      "role": "user",
      "content": queryText
    }]
  };

  const requestData = JSON.stringify(data);
  
  $.ajaxSetup({
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apikeyOpenAI
    }
  });

  $.ajax({
    type: "POST",
    url: openaiURL,
    data: requestData,
    dataType: "json",
    success: function(response) {
      const answer = response.choices[0].message.content;
      document.getElementById("responseOpenAI").innerText = answer;
    },
    error: function() {
      document.getElementById("responseOpenAI").innerHTML = "<font color='red'><b>Error with OpenAI API.</b></font>";
    }
  });
}

// Function to query Google Translation API
function queryGoogleTranslation(queryText) {
  const googleURL = `https://translation.googleapis.com/language/translate/v2?key=${apikeyGoogle}`;
  const data = {
    q: queryText,
    target: 'en'
  };

  const requestData = JSON.stringify(data);

  $.ajaxSetup({
    headers: {
      "Content-Type": "application/json"
    }
  });

  $.ajax({
    type: "POST",
    url: googleURL,
    data: requestData,
    dataType: "json",
    success: function(response) {
      const translation = response.data.translations[0].translatedText;
      document.getElementById("responseGoogle").innerText = translation;
    },
    error: function() {
      document.getElementById("responseGoogle").innerHTML = "<font color='red'><b>Error with Google Translation API.</b></font>";
    }
  });
}