document.body.innerHTML = `
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
            text-align: center;
        }
        input, button {
            margin: 10px 0;
            padding: 10px;
            width: 300px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #processResult {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            background-color: #ddd;
            display: inline-block;
        }
    </style>
    <h1>Hello World!</h1>
    <p>Enter API Key (this will not be saved):</p>
    <input type="password" id="apiKey" placeholder="Enter your API Key here">
    <p>Enter text to process:</p>
    <input type="text" id="textToTranslate" placeholder="Enter text to process">
    <button onclick="processText()">Process</button>
    <p id="processResult"></p>
`;



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
    theprompt = document.getElementById('textToTranslate').value;
    sendMessageToOpenAI(theprompt)
        .then(response => {
            document.getElementById('processResult').textContent = response;
        })
        .catch(error => {
            document.getElementById('processResult').textContent = 'Error: ' + error;
        });
}

async function sendMessageToOpenAI(message) {
    const openaiURL = "https://api.openai.com/v1/chat/completions";
    const data = {
        model: "gpt-3.5-turbo",
        messages: [
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": message}
        ]
    };

    try {
        const response = await fetch(openaiURL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + apikey // Make sure there's a space after 'Bearer'
            },
            body: JSON.stringify(data)
        });

        const responseData = await response.json(); // Corrected line

        if (responseData.choices && responseData.choices.length > 0 && responseData.choices[0].message) {
            return responseData.choices[0].message.content;
        } else {
            return 'No valid response received from API';
        }
    } catch (error) {
        console.error('Error:', error);
        return 'Error processing request: ' + error.message;
    }
}


// Example usage
async function main() {
    const response = await sendMessageToOpenAI("Who won the world series in 2020?");
    console.log(response);
}