// Cloned by Yibo Sun on 3 Dec 2023 from World "Exploring AI apis - World 1" by Yibo Sun // Please leave this clone trail here.
document.body.innerHTML =`<style>
body {
font-family:'Georgia', serif;/* Classic storytelling font */
background:#f8f8f8;/* Light background for readability */
padding:20px;
text-align: center;
background-image: url('https://ancientbrain.com/uploads/yibo/snowflake-1065155.jpg');/* Add your image URL here */
background-size: cover;
background-position: center;
background-repeat: no-repeat;}
input, select, button {
padding:10px;
margin:10px0;
width:300px;
border-radius:5px;
border:1px solid #ddd;
transition: all 0.3s ease;/* Smooth transition for interactions */}
button {
background-color:#5D1049;/* Deep color for elegance */
color: white;
cursor: pointer;}
button:hover {
background-color:#400C33;/* Darker shade on hover */
transform: scale(1.05);/* Slight increase in size */}#processResult {
padding:15px;
border-radius:5px;
background-color:#fff;
border:1px solid #ddd;
color:#333;
text-align: left;
max-width:600px;
margin:20pxauto;
box-shadow:0px0px10px rgba(0,0,0,0.1);/* subtle shadow for depth */}
h1 {
color:#5D1049;/* Matching color for headers */}</style><audio autoplay loop><source src="https://ancientbrain.com/uploads/yibo/inspiring-cinematic-ambient-116199.mp3" type="audio/mpeg"><!--Add your music URL here -->Your browser does not support the audio element.</audio><h1>AI-DrivenStorytelling</h1><p>Enter API Key(this will not be saved):</p><input type="password" id="apiKey" placeholder="Enter your API Key here"><p>Start your story:</p><input type="text" id="storyStart" placeholder="Once upon a time..."><p>Choose a genre:</p><select id="genre"><option value="fantasy">Fantasy</option><option value="sci-fi">Sci-Fi</option><option value="mystery">Mystery</option><option value="comedy">Comedy</option><option value="horror">Horror</option></select><button onclick="processText()">CreateStory</button><p id="processResult"></p><p>AdjustCreativity(Temperature):</p><input type="range" id="temperatureSlider" min="0" max="1" step="0.1" value="0.7">`;var apikey ="";var theprompt ="";function setkey(){
apikey = document.getElementById('apiKey').value.trim();}
document.getElementById('textToTranslate').onkeydown =function(event){if(event.keyCode ==13) processText();};function processText(){
setkey();// Set the API keyconst storyStart = document.getElementById('storyStart').value;const genre = document.getElementById('genre').value;const temperature = parseFloat(document.getElementById('temperatureSlider').value);// Construct the promptconst prompt =`Write a ${genre} story that begins with: ${storyStart}`;// Display a loading message
document.getElementById('processResult').textContent ='Generating story...';
sendMessageToOpenAI(prompt, temperature).then(response =>{
document.getElementById('processResult').textContent = response;}).catch(error =>{
document.getElementById('processResult').textContent ='Error: '+ error;});}
async function sendMessageToOpenAI(prompt, temperature){const openaiURL ="https://api.openai.com/v1/completions";// Changed to the general completions endpointconst data ={
model:"text-davinci-002",// Consider using a more suitable model for long-form content
prompt: prompt,
temperature: temperature,// Add the temperature parameter
max_tokens:1000// Increased token limit for longer story outputs};try{const response = await fetch(openaiURL,{
method:'POST',
headers:{'Content-Type':'application/json','Authorization':'Bearer '+ apikey
},
body: JSON.stringify(data)});const responseData = await response.json();if(responseData.choices && responseData.choices.length >0){return responseData.choices[0].text;// Adjusted to the general completions response structure}else{return'No valid response received from API';}}catch(error){
console.error('Error:', error);return'Error processing request: '+ error.message;}}