// 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: 10px 0;
            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: 20px auto;
            box-shadow: 0px 0px 10px 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-Driven Storytelling</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()">Create Story</button>
    <p id="processResult"></p>
    
    <p>Adjust Creativity (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 key
    const storyStart = document.getElementById('storyStart').value;
    const genre = document.getElementById('genre').value;
    const temperature = parseFloat(document.getElementById('temperatureSlider').value);

    // Construct the prompt
    const 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 endpoint

    
    const 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;
    }
}