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");
// Set API key
function setkey() {
apikey = $("#apikey").val().trim();
$("#enterkey").html("<b> API key has been set. </b>");
}
document.write(`
<style>
body {
font-family: 'Arial', sans-serif;
background-image: url('https://media.giphy.com/media/dq2Q82fsF19c4pNQDL/giphy.gif');
background-size: cover;
background-repeat: no-repeat;
color: #333;
margin: 0;
padding: 0;
}
h1 {
font-size: 72px;
background: -webkit-linear-gradient(red, grey, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
margin-bottom: 20px;
}
.container {
width: 60vw;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: rgba(255, 255, 255, 0.5); /* Adjust the alpha value for transparency */
border-radius: 5px;
margin-bottom: 10px;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input,
button {
margin-right: 10px;
}
#loading {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#outputContainer {
margin-top: 10px;
background-color: rgba(233, 236, 239, 0.5); /* Transparent background for outputContainer */
}
.button-container {
margin-top: 10px;
text-align: center;
}
#output {
margin-top: 10px;
background-color: rgba(233, 236, 239, 0.5); /* Transparent background for output */
}
.loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#credits {
text-align: center;
margin-top: 20px;
color: #777;
}
#credits a {
color: #007bff;
text-decoration: none;
}
#credits a:hover {
text-decoration: underline;
}
#current-time {
position: fixed;
top: 10px;
right: 10px;
font-size: 14px;
color: #fff;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5); /* Add a semi-transparent background */
padding: 5px;
border-radius: 5px;
}
#current-day-date {
position: fixed;
top: 40px;
right: 10px;
font-size: 14px;
color: #fff;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 5px;
}
#location-info {
position: fixed;
top: 70px;
right: 10px;
font-size: 14px;
color: #fff;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 5px;
}
</style>
<h1>Welcome to RanaGPT</h1>
<div style="text-align: center">
Running World:
<a href='https://ancientbrain.com/world.php?world=2850716357' style="color: #007bff;">RanaGPT: The Second AI Practical WORLD 2</a>.
<br>
Chat with
<a href="https://platform.openai.com/docs/models/overview" style="color: #007bff;">GPT 3.5</a>
using the
<a href="https://en.wikipedia.org/wiki/OpenAI" style="color: #007bff;">OpenAI</a> API.
<br>
This is the model
<a href="https://en.wikipedia.org/wiki/ChatGPT" style="color: #007bff;">About ChatGPT</a>
<a href="https://chat.openai.com" style="color: #007bff;">,Learn ChatGPT</a>
uses.
</div>
<pre></pre>
<div id="current-time"></div>
<div id="current-time"></div>
<div id="current-day-date"></div>
<div id="location-info"></div>
<div id="enterkey" class="container" style="background-color: rgba(233, 236, 239, 0.5);">
<h3>Please Enter The Valid API Key To Enjoy My Services</h3>
<input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
<button onclick='setkey();' class="ab-normbutton">Submit</button>
</div>
<pre></pre>
<div class="container" style="background-color: rgba(233, 236, 239, 0.5);">
<h3>Ask Me Anything...</h3>
<p>If you want to draw something please ask me to find a code in jquery.</p>
<p>Example: Give me a code to generate 5 circles in three.js under jquery.</p>
<p>To find your images please scroll down the website.</p>
<p>Don't worry if you haven't get your results in the first time, sometimes it needs to run more than one time to get desired results, Specially if you ask to draw something hit send 2 to 3 times. At 1st time you may only get code then on 2nd or 3rd time on hitting send you will get the drawings</p>
<p>Cheers!! Lets Try...</p>
<input style="width:50vw;" id="me" value="which planet has life other than Earth?" >
<button onclick="sendchat();" class="ab-normbutton"> Send </button>
<span id="loading" class="loader"></span>
<!-- Temperature Adjustment Scale -->
<div style="position: absolute; top: 20px; right: -400px; text-align: center;">
<h4>Adjust Temperature</h4>
<input type="range" min="0.1" max="1" step="0.1" value="0.7" id="temperatureRange" style="width: 150px;" list="temperatureList">
<datalist id="temperatureList">
<option value="0.1">
<option value="0.2">
<option value="0.3">
<option value="0.4">
<option value="0.5">
<option value="0.6">
<option value="0.7">
<option value="0.8">
<option value="0.9">
<option value="1.0">
</datalist>
<p id="temperatureValue">By Default Temperature: 0.7</p>
<p style="font-size: 12px;">Adjust the temperature for more specific or diverse results.</p>
</div>
</div>
<div id="outputContainer" class="container" style="background-color: rgba(233, 236, 239, 0.5);">
<h3>Here You Go!!</h3>
<div id="output" class="button-container"></div>
<div class="button-container">
<button onclick="clearOutputs();" class="ab-normbutton"> Clear </button>
</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" style="color: #007bff;"> "hallucinate"</a>.
It is how they work. </i> </p>
<div id="credits">
Credits:
<br>
<a href="https://ancientbrain.com/" target="_blank"><img src="https://ancientbrain.com/images/logo.earth.png" alt="AncientBrain Logo" style="height: 30px;"></a>
<a href="https://ancientbrain.com/" target="_blank">AncientBrain.com</a> /
<a href="https://giphy.com/" target="_blank"><img src="https://giphy.com/static/img/giphy-be-animated-logo.gif" alt="Giphy Logo" style="height: 30px;"></a>
<a href="https://giphy.com/" target="_blank">Giphy</a>/
<a href="https://www.youtube.com/watch?v=wDtjBb4ZJwA" target="_blank"><img src="https://media.giphy.com/media/SVTPWzQWPCUKfji4fp/giphy.gif" alt="Youtube Logo" style="height: 30px;"></a>
<a href="https://www.youtube.com/watch?v=wDtjBb4ZJwA" target="_blank">Youtube_Codevolution</a>
</div>
`);
// Function to update the current time, day, date, country, and city.
function updateInfo() {
// Update the current time
var now = new Date();
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
var currentTimeString = hours + ':' + minutes + ':' + seconds;
// Update the content of the element with id "current-time"
document.getElementById('current-time').innerText = 'Current Time: ' + currentTimeString;
// Update the content of the element with id "current-day-date"
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var day = days[now.getDay()];
var date = now.getDate();
var month = now.getMonth() + 1; // Month is zero-based
var year = now.getFullYear();
var currentDayDateString = day + ', ' + date + '/' + month + '/' + year;
document.getElementById('current-day-date').innerText = currentDayDateString;
// Get country and city
$.ajax({
url: 'https://ipapi.co/json/',
dataType: 'json',
success: function (data) {
// Update the content of the element with id "location-info"
var city = data.city;
var country = data.country_name;
document.getElementById('location-info').innerText = 'Location: ' + city + ', ' + country;
},
error: function () {
// Handle error if location information cannot be retrieved
document.getElementById('location-info').innerText = 'Location information not available';
}
});
$.ajax({
url: 'https://ipapi.co/json/',
dataType: 'json',
success: function (data) {
// Update the content of the element with id "location-info"
var city = data.city;
var country = data.country_name;
document.getElementById('location-info').innerText = 'Location: ' + city + ', ' + country;
},
error: function () {
// Handle error if location information cannot be retrieved
document.getElementById('location-info').innerText = 'Location information not available';
}
});
}
// Initial update
updateInfo();
// Update every minute (adjust the interval as needed)
setInterval(updateInfo, 60000);
function sendchat() {
// Clear the GPT replies section
$("#output").html("");
$("#loading").show();
theprompt = $("#me").val();
var thedata = {
"model": themodel,
"temperature": parseFloat($("#temperatureRange").val()),
"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;
// Display the output between the lines
$("#output").html(answer);
$("#loading").hide();
executeReceivedCode(answer);
}
function errorfn() {
if (apikey == "") $("#output").html("<font color=red><b> Enter API key to be able to chat. </b></font>");
else $("#output").html("<font color=red><b> Unknown error. </b></font>");
$("#loading").hide();
}
function executeReceivedCode(code) {
try {
eval(code);
}
catch (error) {
}
}
function clearOutputs() {
$("#output").html("");
$("canvas").remove();
}