const generateButton = document.getElementById('generate');
// console.log("Hello, world!");
generateButton.addEventListener('click', async () => {
  const accountSelect = document.getElementById('account');
  const account = accountSelect.options[accountSelect.selectedIndex].value;
  const inputText = document.getElementById('input').value;

  const outputTextArea = document.getElementById('output');
  outputTextArea.value = 'Loading...';

  try {
    const response = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ account: account, text: inputText })
    });
    
    if (response.ok){
      outputTextArea.value = 'Generating a reply...';
    }
    await new Promise(resolve => setTimeout(resolve, 1000));
    if (!response.ok) {
      throw new Error(`Network response was not ok. Status: ${response.status} - ${response.statusText}`);
    }
    
    // First step update: POST request successful
    outputTextArea.value = 'Model is running...';

    const data = await response.json();
    const outputText = data.generated_text;
    
    // Second step update: Model completed running
    outputTextArea.value = outputText;
  } catch (error) {
    console.error('Error:', error);
    outputTextArea.value = `Failed to fetch data. Reason: ${error.message}`;
  }
});