// Cloned by Pranshu Mangal on 3 Dec 2023 from World "Chat with GPT model" by Starter user
// Please leave this clone trail here.
// talk to OpenAI GPT model (ChatGPT)
// adapted from: https://platform.openai.com/docs/api-reference/making-requests
const openaiURL = "https://api.openai.com/v1/chat/completions"; // can POST to this 3rd party URL
const themodel = "gpt-3.5-turbo"; // the OpenAI model we are going to talk to
// Hardcode your API key here
var apikey = "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";
var theprompt = "hello";
// default body is margin 0 and padding 0
// give it more whitespace:
$('body').css("margin", "20px");
$('body').css("padding", "20px");
document.write(`
<a >Hello world program to test API KEY</a>.
<br>
<a >OpenAI KEY </a> API.
<br>
<pre></pre>
<div style="width:60vw; background-color:white; margin:20; padding: 20px;">
<h3> "Enter a question to interact with GPT 3.5" </h3>
<input style="width:50vw;" id="me" Placeholder="Put your question here?" >
<button onclick="sendchat();" class="ab-normbutton" > Send </button>
</div>
<div style="width:60vw; border: 1px solid black; margin:20; padding: 20px;">
<h3> Answer</h3>
<div id="them"> </div>
</div>
<pre></pre>
`);
function sendchat() {
theprompt = $("#me").val();
// construct request as JSON
var thedata = {
"model": themodel,
"temperature": 0.7,
"messages": [{
"role": "user",
"content": theprompt
}]
};
// then as a string representing that JSON:
var thedatastring = JSON.stringify(thedata);
// HTTP headers must be set up with the hardcoded API key
$.ajaxSetup({
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey
}
});
// POST to 3rd party URL
$.ajax({
type: "POST",
url: openaiURL,
data: thedatastring,
dataType: "json",
success: function (d, rc) { successfn(d, rc); },
error: function () { errorfn(); }
});
}
function successfn(data, rc) {
var answer = data["choices"][0].message.content;
$("#them").html("<p>API called successfully</p><p>" + answer + "</p>");
}
function errorfn() {
$("#them").html("<font color=red><b> Unknown error. </b></font>");
}