|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Text Summarization</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 40px; |
|
padding: 20px; |
|
background-color: #f9f9f9; |
|
} |
|
textarea { |
|
width: 100%; |
|
height: 200px; |
|
padding: 10px; |
|
margin-bottom: 20px; |
|
border-radius: 5px; |
|
border: 1px solid #ccc; |
|
} |
|
button { |
|
padding: 10px 20px; |
|
background-color: #007bff; |
|
color: white; |
|
border: none; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
} |
|
button:hover { |
|
background-color: #0056b3; |
|
} |
|
#result { |
|
margin-top: 20px; |
|
padding: 10px; |
|
background-color: #e9ecef; |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
} |
|
#loading { |
|
display: none; |
|
margin-top: 20px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Text Summarization</h1> |
|
<p>Enter the text you want to summarize:</p> |
|
<textarea id="input-text" placeholder="Paste your text here..."></textarea> |
|
<br> |
|
<button id="summarize-button" onclick="summarizeText()">Summarize</button> |
|
<div id="loading">Loading...</div> |
|
<div id="result"></div> |
|
|
|
<script> |
|
async function summarizeText() { |
|
const text = document.getElementById('input-text').value; |
|
const button = document.getElementById('summarize-button'); |
|
const loading = document.getElementById('loading'); |
|
const resultDiv = document.getElementById('result'); |
|
|
|
if (text) { |
|
|
|
button.disabled = true; |
|
loading.style.display = 'block'; |
|
resultDiv.innerText = ''; |
|
|
|
const response = await fetch('/summarize', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json' |
|
}, |
|
body: JSON.stringify({ text: text }) |
|
}); |
|
|
|
const result = await response.json(); |
|
loading.style.display = 'none'; |
|
button.disabled = false; |
|
|
|
if (result.summary) { |
|
resultDiv.innerText = 'Summary: ' + result.summary; |
|
} else if (result.error) { |
|
resultDiv.innerText = 'Error: ' + result.error; |
|
} |
|
} else { |
|
resultDiv.innerText = 'Please enter some text.'; |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
