// First, we grab our key HTML parts with their IDs.
const summarizeButton = document.getElementById(‘magicBtn’);
const textArea = document.getElementById(‘myTextarea’);
const outputArea = document.getElementById(‘resultBox’);

// Now, we tell the button what to do when someone clicks it.
summarizeButton.addEventListener(‘click’, async () => {
// 1. Get the text the user typed. We clean up any extra spaces.
const userText = textArea.value.trim();

// 2. A quick check: did the user actually type something?
if (!userText) {
outputArea.innerHTML = ‘<p class=”placeholder-text”>Oops! Please type something first.</p>’;
return;
}

// 3. Give the user some friendly feedback while they wait.
outputArea.innerText = “Working on your summary… this won’t take long!”;

try {
// 4. Time to send a message to our AI back-end!
// This ‘fetch’ command is like sending a text message to a specific address (our API).
const response = await fetch(‘YOUR_AWS_API_ADDRESS_HERE’, {
method: ‘POST’, // We’re sending new information (the text)
headers: {
‘Content-Type’: ‘application/json’, // We’re telling the server we’re sending JSON data
},
body: JSON.stringify({ text: userText }), // We package the text into a JSON object
});

// 5. Check if the server replied with a success message.
if (!response.ok) {
throw new Error(`Something went wrong! Server responded with status: ${response.status}`);
}

// 6. Read the AI’s reply, which is also a JSON message.
const result = await response.json();

// 7. Finally, we show the summary from the AI in our output box.
outputArea.innerText = result.summary;

} catch (error) {
// If anything goes wrong, we let the user know.
console.error(‘There was a problem:’, error);
outputArea.innerText = ‘Uh oh! Something went wrong. Please try again.’;
}
});