// Music Lyrics Generator GPT-3 By Jessica Azevedo
// Talk to OpenAI GPT model (ChatGPT)
// Adapted from:
// https://ancientbrain.com/world.php?world=2850716357 --> https://platform.openai.com/docs/api-reference/making-requests
const openaiURL = "https://api.openai.com/v1/chat/completions"; // post to to this 3rd party URL
const themodel = "gpt-3.5-turbo"; // OpenAI model utilised
// 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");
// background image
document.body.style.backgroundImage = 'url("uploads/tay91/Design.png")';
document.body.style.backgroundSize = 'cover';
document.write(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Music Lyrics Generator</title>
<style>
body {
margin: 20px;
padding: 20px;
background-color: #2c3e50;
font-family: 'Optima';
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #800080;
font-size: 45;
}
#enterkey {
margin-bottom: 20px;
}
#prompt-container {
width: 60vw;
background-color: #2c3e50;
border: 1px solid #2c3e50;
margin: 20px;
padding: 20px;
font-family: 'Optima';
color: #ffffff;
}
#temperature-container {
width: 60vw;
background-color: #2c3e50;
border: 1px solid #ffffff;
margin: 20px;
padding: 20px;
font-family: 'Optima';
color: #ffffff;
}
#maxtokens-container {
width: 60vw;
background-color: #2c3e50;
border: 1px solid #ffffff;
margin: 20px;
padding: 20px;
font-family: 'Optima';
color: #ffffff;
}
#temperature-label {
display: block;
margin-bottom: 10px;
}
#temperature-slider {
width: 50vw;
}
#result-container {
width: 60vw;
background-color: #ffffff;
border: 1px solid #ffffff;
margin: 20px;
padding: 20px;
font-family: 'Optima';
color: #2c3e50;
}
.ab-normbutton {
background-color: #e74c3c;
color: #ecf0f1;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>🎵 Music Lyrics Generator 🎵</h1>
<div id="enterkey">
<h3>Enter API key</h3>
<label for="apikey">API Key:</label>
<input style="width: 30vw;" maxlength="2000" name="apikey" id="apikey" value="">
<button type="button" onclick="setkey();" class="ab-normbutton">Set API key</button>
</div>
<div id="prompt-container">
<h3>Compose Music Lyrics</h3>
<label for="me">Enter your prompt:</label>
<input style="width: 50vw;" id="me" value="Write a groovy song about">
<button type="button" onclick="sendchat();" class="ab-normbutton">Generate Lyrics</button>
</div>
<div id="temperature-container">
<h3 id="temperature-label">Temperature: <span id="temperature-value">0.1</span></h3>
<label for="temperature-slider">Adjust temperature:</label>
<input type="range" min="0.1" max="1" step="0.1" value="0.1" id="temperature-slider" oninput="updateTemperature()">
</div>
<div id="maxtokens-container">
<h3 id="maxtokens-label">Lyric Length: <span id="maxtokens-value">100</span></h3>
<label for="maxtokens-slider">Adjust Max Tokens:</label>
<input type="range" min="100" max="400" step="1" value="100" id="maxtokens-slider" oninput="updateMaxTokens()">
</div>
<div id="result-container">
<h3>Generated Lyrics</h3>
<div id="them"></div>
</div>
<p id="warning-message"><i>Be warned that AI-generated replies may not always make sense. Enjoy the creativity!</i></p>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
function updateTemperature() {
var temperatureValue = document.getElementById("temperature-slider").value;
document.getElementById("temperature-value").textContent = temperatureValue;
}
</script>
</body>
</html>
`);
function setkey() {
apikey = jQuery("input#apikey").val();
apikey = apikey.trim();
$("#enterkey").html ( "<b> API key has been set. </b>" );
}
// function to update the Max Tokens value
function updateMaxTokens() {
var maxTokensValue = document.getElementById("maxtokens-slider").value;
document.getElementById("maxtokens-value").textContent = maxTokensValue;
}
// Enter will also send chat:
document.getElementById('me').onkeydown = function(event) { if (event.keyCode == 13) sendchat(); };
//Send my line of text
function sendchat() {
theprompt = $("#me").val();
var maxTokensValue = document.getElementById("maxtokens-slider").value;
// construct request as JSON
// "Lowering temperature means it will take fewer risks, and completions will be more accurate and deterministic. Increasing temperature will result in more diverse completions."
var thedata = {
"model": themodel,
"temperature": 1,
"max_tokens": parseInt(maxTokensValue),
"messages": [{
"role": "user",
"content": theprompt
}]
};
// then as string representing that JSON:
var thedatastring = JSON.stringify ( thedata );
// HTTP headers must be set up with API key:
$.ajaxSetup({
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey,
"cache-control": "no-cache", //line to set the cache-control header
}
});
// post to 3rd party URL:
$.ajax({
type: "POST",
url: openaiURL,
data: thedatastring,
dataType: "json",
success: function ( d, rc ) { successfn ( d, rc ); },
error: function() { errorfn (); }
});
}
// global variable to examine return data in console
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>" );
}