// Variables
const llmHost = 'https://llm.vfsh.me';
const generateEndpoint = '/api/generate';

// Grab elements from the page
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
const outputArea = document.getElementById('outputArea');

// Functions
async function sendGen() {
    const response = await fetch(`${llmHost}${generateEndpoint}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ model: 'llama3.2', prompt: userInput.value })
    });

    return response;
}

async function readResponse(response) {
    console.log(response);
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');

    try {
        // Recursive function to read the stream
        reader.read().then(( done, value ) => {
            console.log(`Done: ${done}`);
            console.log(`Value: ${value}`);
            if (done) {
                return;
            }
        });
    } catch (error) {
        outputArea.innerHTML = `<span class="text-red-500">Error: ${error.message}</span>`;
    }
}

// Event listeners
sendButton.addEventListener('click', async () => {
    outputArea.innerHTML = '';
    const response = await sendGen();
    readResponse(response);
});