// 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
// default API key and prompt:
var apikey = "";
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(`
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
h1 {
color: #007BFF;
text-align: center;
}
#running-world {
text-align: center;
margin-bottom: 20px;
}
.section-box {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#enterkey, #temperature, #user-input, #gpt-replies {
background: linear-gradient(to bottom, #e6f7ff, #cce0ff); /* Professional background shade */
}
button {
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="range"] {
width: 100%;
margin-top: 10px;
}
#tempValue {
display: inline-block;
margin-left: 10px;
}
pre {
margin-top: 0;
}
p {
color: #777;
}
h1 {
color: #007BFF;
text-align: center;
animation: jump 0.75s infinite alternate;
}
@keyframes jump {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
</style>
<h1 id="jumping-heading">Chat with GPT model</h1>
<div id="running-world">
<a href='https://ancientbrain.com/world.php?world=2850716357'>Chat with GPT model</a>.
<br>
Chat with
<a href="https://platform.openai.com/docs/models/overview">GPT 3.5</a>
using the
<a href="https://en.wikipedia.org/wiki/OpenAI">OpenAI</a> API.
<br>
This is the model
<a href="https://en.wikipedia.org/wiki/ChatGPT">ChatGPT</a>
uses.
</div>
<pre></pre>
<div id="enterkey" class="section-box">
<h3>Enter API key</h3>
<p>Get your Open AI API key <a href="https://platform.openai.com/api-keys">from here.</a></p>
<input style='width:100%;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
<button onclick='setkey();'>Set API key</button>
</div>
<pre></pre>
<div id="temperature" class="section-box">
<h3>Temperature Control</h3>
<p>"Set the temperature and check the variation in the response. Works best with promt no.4 or similar."</p>
<input type="range" min="0" max="1" step="0.1" value="0.7" id="tempSlider">
<span id="tempValue">0.7</span>
<div id="word-limit" class="section-box"style="background: linear-gradient(to bottom, #B0C4DE, #FAF5EF);">
<h3>Word Limit</h3>
<p>"Define the maximum length of words for your response.Works best with promt no.3 or similar."</p>
<input type="number" id="wordLimit" value="1000">
</div>
</div>
<pre></pre>
<div id="top-p" class="section-box" style="background: linear-gradient(to bottom, #B0C4DE, #FAF5EF);">
<h3>Top P Control</h3>
<p>"Set the Top P value to control the randomness of the response."</p>
<select id="topPSelector">
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
</div>
<pre></pre>
<div id="user-input" class="section-box">
<h3>Choose or Type a "prompt" to interact with GPT.</h3>
<p>1. when did henry vii die?</p>
<p>2. Give code to draw <b>three cubes</b> using Three.js with jQuery. \\Set top p as 1.0\\</p>
<p>3. Who is MS Dhoni?</p>
<p>4. Write an essay on Global Warming?</p>
<input type="text" id="me" value="Copy a prompt from above and make changes as required !" >
<button onclick="sendchat();">Send</button>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<div id="gpt-replies" class="section-box">
<h3>GPT replies</h3>
<p>1. Please hold on, The response might take upto 150 seconds to generate!!
<br>2. For prompt no.2, you will have to click SEND 3 times, after receiving response each time to be able to see the code run.</p>
<button onclick="clearOutputs();">Clear</button>
<div id="them"></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>
<script>
document.addEventListener('DOMContentLoaded', function () {
var tempSlider = document.getElementById("tempSlider");
var tempValue = document.getElementById("tempValue");
tempSlider.addEventListener('input', function () {
tempValue.textContent = tempSlider.value;
});
var topPSelector = document.getElementById("topPSelector");
topPSelector.addEventListener('change', function () {
var topPValue = topPSelector.value;
sendchat(); // Automatically trigger chat request when top P value changes
});
});
});
</script>
<div style="height: 20px;"></div>
<div id="credits" class="section-box" style="background: linear-gradient(to bottom, #f0f0f0, #e0e0e0); text-align: center;">
<h3>Credits</h3>
<ol style="list-style: decimal inside; padding-left: 0;">
<li>This chat application is powered by the OpenAI GPT-3.5 Turbo model.</li>
<li>This chat application is programmed on <a href="https://ancientbrain.com/">Ancient Brain.</a></li>
<li>Adapted from the OpenAI API documentation: <a href="https://platform.openai.com/docs/api-reference/making-requests">OpenAI API Reference</a></li>
<li>ChatGPT model is based on the GPT-3 architecture developed by OpenAI.</li>
</ol>
</div>
<pre></pre>
`);
function setkey() {
apikey = $("#apikey").val();
apikey = apikey.trim();
if (apikey.length > 0) {
$("#enterkey").html("<b> API key has been set. </b>");
} else {
$("#enterkey").html("<font color=red><b> Please enter a valid API key. </b></font>");
}
}
document.getElementById('me').onkeydown = function (event) {
if (event.keyCode == 13) sendchat();
};
function sendchat() {
// Clear the GPT replies section
$("#them").html("");
theprompt = $("#me").val();
var temperatureValue = $("#tempSlider").val();
var wordLimitValue = $("#wordLimit").val();
var topPValue = $("#topPSelector").val()
$("#tempValue").text(temperatureValue);
var thedata = {
"model": themodel,
"temperature": parseFloat(temperatureValue),
"max_tokens": parseInt(wordLimitValue),
"top_p": parseFloat(topPValue),
"messages": [{
"role": "user",
"content": theprompt
}]
};
var thedatastring = JSON.stringify(thedata);
$.ajaxSetup({
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey
}
});
$.ajax({
type: "POST",
url: openaiURL,
data: thedatastring,
dataType: "json",
success: function (data, rc) {
successfn(data, rc);
executeReceivedCode(data.choices[0].message.content);
},
error: function () {
errorfn();
}
});
}
var a;
function successfn(data, rc) {
a = data;
var answer = a.choices[0].message.content;
$("#them").html(answer);
}
function errorfn() {
if (apikey == "") $("#them").html("<font color=red><b> Enter API key to be able to chat. </b></font>");
else $("#them").html("<font color=red><b> Unknown error. </b></font>");
}
function executeReceivedCode(code) {
try {
eval(code);
} catch (error) {
console.error("Error executing received code:", error);
}
}
function clearOutputs() {
$("#them").html("");
}