// Cloned by Pooja Salgar on 24 Nov 2023 from World "Chat with GPT model (clone by Nakyung Kim)" by Nakyung Kim
// Please leave this clone trail here.
// Cloned by Nakyung Kim on 20 Nov 2023 from World "Chat with GPT model" by Starter user
// OpenAI GPT model communication script adapted from OpenAI API documentation
// OpenAI API and model configuration
const openaiURL = "https://api.openai.com/v1/chat/completions";
const themodel = "gpt-3.5-turbo";
var apikey = "";
var theprompt = "Hello World";
var initialCheckPassed = false;
// Adjust body style for better readability
$('body').css({ "margin": "20px", "padding": "20px" });
// Write HTML content dynamically
//Source of the backgrounds:
//https://www.freepik.com/free-vector/purple-color-gradient-background-designs-modern_34150613.htm
document.write(`
<div id="enterkey" style="background-image: url('/uploads/jackie2002/6.jpg'); border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);">
<br>
<!-- Additional HTML Content -->
<!-- Enter API Key Section -->
<div id="enterkey">
<h1 style="color:white;">Chat with GPT model</h1>
<b style="color:white;">Enter API key: </b>
<input style='width:25vw;' maxlength='2000' name="apikey" id="apikey" value=''>
<button onclick='setApiKey();' class='ab-normbutton'>Set API key</button>
<div style="color:white;" id="enter"></div>
<!-- Chat Input Section -->
<div style="width:60vw; background-color: rgba(255, 255, 255, 0.5); margin: 20px; padding: 20px; border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);">
<h3 style="color:white;">Interact with AI</h3>
<input style="width:50vw; opacity: 1;" id="me" value="How much is the average living cost in Dublin?" onclick="clearInput(this);">
<button onclick="sendChat();" class='ab-normbutton' style="opacity: 1;">Send</button>
</div>
<!-- Chat Output Section -->
<div style="width:60vw; background-color: rgba(148, 108, 222, 0.5); margin: 20px; padding: 20px; border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);">
<h3 style="color: white; opacity: 1;">GPT replies</h3>
<div id="them" style="opacity: 1;"></div>
</div>
<p style="color:white;"><i>Be warned that GPT replies are often completely inaccurate.<br>
All LLM systems "hallucinate". It is how they work.</i></p>
</div>
</div>
`);
$(document).ready(function() {
applyInitialStyles();
attachEventHandlers();
});
function applyInitialStyles() {
$('body').css({
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"height": "100vh",
"margin": "0",
"padding": "20px",
"text-align": "center",
"font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" // macOS style font
});
// Styles for input fields and buttons
$('input').css({
"text-align": "center",
"width": "calc(100% - 40px)",
"margin": "10px 20px",
"padding": "10px",
"border-radius": "20px",
"border": "none",
"box-shadow": "0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19)"
});
$('button').css({
"display": "block",
"margin": "10px auto",
"padding": "10px 20px", // Adjust padding to control the size
"background-color": "#686AB7", // Change to your preferred color
"color": "white",
"border": "none",
"border-radius": "20px",
"box-shadow": "0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19)"
}).hover(function() {
$(this).css("opacity", "0.8");
}, function() {
$(this).css("opacity", "1");
});
// Hover effect for buttons
$('button').hover(
function() { $(this).css("opacity", "0.8"); },
function() { $(this).css("opacity", "1"); }
);
// Styles for the chat output section
$('#them').css({
// "background-color": "rgba(148, 108, 222, 0.5)",
"color": "white",
"width": "60vw",
"min-height": "100px",
// "margin": "20px",
// "padding": "20px",
// "border-radius": "20px",
// "text-align": "center",
// "box-shadow": "0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19)"
});
$('.chat-section, .output-section').css({
"max-width": "60vw", // Maximum width
"width": "100%", // Full width for smaller screens
"border-radius": "20px",
// ... other existing styles
});
// Media query for smaller screens
if (window.matchMedia("(max-width: 600px)").matches) {
$('.chat-section, .output-section').css({
"border-radius": "10px", // Smaller border-radius for smaller screens
"padding": "15px" // Adjust padding as needed
});
}
}
function attachEventHandlers() {
$('#me').keydown(function(event) {
if (event.keyCode == 13) sendChat();
});
$('#me').click(function() {
clearInput(this);
});
$('#apikey').click(function() {
setApiKey();
});
}
function clearInput(element) {
element.value = '';
}
function setApiKey() {
apikey = $("#apikey").val().trim();
if (apikey === "") {
$("#enter").html("<b>Please enter the correct API key.</b>");
} else {
$("#enter").html("<b>API key has been set.</b>");
$("#apikey").prop('readonly', true);
}
}
function sendChat() {
theprompt = $("#me").val();
if (!apikey) {
$("#them").html("<b>Please set the API key first.</b>");
return;
}
if (!initialCheckPassed && theprompt !== "Hello World") {
$("#them").html("<b>Please enter 'Hello World' to call the API.</b>");
return;
}
initialCheckPassed = true;
makeApiCall(theprompt);
}
function makeApiCall(prompt) {
var requestData = {
"model": themodel,
"temperature": 0.7,
"messages": [{"role": "user", "content": prompt}]
};
$.ajaxSetup({
headers: { "Content-Type": "application/json", "Authorization": "Bearer " + apikey }
});
$.ajax({
type: "POST",
url: openaiURL,
data: JSON.stringify(requestData),
dataType: "json",
success: handleSuccess,
error: handleError
});
}
function handleSuccess(data) {
var answer = data.choices[0].message.content;
$("#them").html(answer);
}
function handleError() {
$("#them").html("<b>An error occurred. Please try again.</b>");
}