UI Updates
Browse files- templates/index.html +22 -5
templates/index.html
CHANGED
|
@@ -37,6 +37,10 @@
|
|
| 37 |
border: 1px solid #ccc;
|
| 38 |
border-radius: 5px;
|
| 39 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 40 |
</style>
|
| 41 |
</head>
|
| 42 |
<body>
|
|
@@ -44,14 +48,23 @@
|
|
| 44 |
<p>Enter the text you want to summarize:</p>
|
| 45 |
<textarea id="input-text" placeholder="Paste your text here..."></textarea>
|
| 46 |
<br>
|
| 47 |
-
<button onclick="summarizeText()">Summarize</button>
|
| 48 |
-
|
| 49 |
<div id="result"></div>
|
| 50 |
|
| 51 |
<script>
|
| 52 |
async function summarizeText() {
|
| 53 |
const text = document.getElementById('input-text').value;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 54 |
if (text) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
const response = await fetch('/summarize', {
|
| 56 |
method: 'POST',
|
| 57 |
headers: {
|
|
@@ -59,14 +72,18 @@
|
|
| 59 |
},
|
| 60 |
body: JSON.stringify({ text: text })
|
| 61 |
});
|
|
|
|
| 62 |
const result = await response.json();
|
|
|
|
|
|
|
|
|
|
| 63 |
if (result.summary) {
|
| 64 |
-
|
| 65 |
} else if (result.error) {
|
| 66 |
-
|
| 67 |
}
|
| 68 |
} else {
|
| 69 |
-
|
| 70 |
}
|
| 71 |
}
|
| 72 |
</script>
|
|
|
|
| 37 |
border: 1px solid #ccc;
|
| 38 |
border-radius: 5px;
|
| 39 |
}
|
| 40 |
+
#loading {
|
| 41 |
+
display: none;
|
| 42 |
+
margin-top: 20px;
|
| 43 |
+
}
|
| 44 |
</style>
|
| 45 |
</head>
|
| 46 |
<body>
|
|
|
|
| 48 |
<p>Enter the text you want to summarize:</p>
|
| 49 |
<textarea id="input-text" placeholder="Paste your text here..."></textarea>
|
| 50 |
<br>
|
| 51 |
+
<button id="summarize-button" onclick="summarizeText()">Summarize</button>
|
| 52 |
+
<div id="loading">Loading...</div>
|
| 53 |
<div id="result"></div>
|
| 54 |
|
| 55 |
<script>
|
| 56 |
async function summarizeText() {
|
| 57 |
const text = document.getElementById('input-text').value;
|
| 58 |
+
const button = document.getElementById('summarize-button');
|
| 59 |
+
const loading = document.getElementById('loading');
|
| 60 |
+
const resultDiv = document.getElementById('result');
|
| 61 |
+
|
| 62 |
if (text) {
|
| 63 |
+
// Disable the button and show loading indicator
|
| 64 |
+
button.disabled = true;
|
| 65 |
+
loading.style.display = 'block';
|
| 66 |
+
resultDiv.innerText = ''; // Clear previous results
|
| 67 |
+
|
| 68 |
const response = await fetch('/summarize', {
|
| 69 |
method: 'POST',
|
| 70 |
headers: {
|
|
|
|
| 72 |
},
|
| 73 |
body: JSON.stringify({ text: text })
|
| 74 |
});
|
| 75 |
+
|
| 76 |
const result = await response.json();
|
| 77 |
+
loading.style.display = 'none'; // Hide loading indicator
|
| 78 |
+
button.disabled = false; // Re-enable the button
|
| 79 |
+
|
| 80 |
if (result.summary) {
|
| 81 |
+
resultDiv.innerText = 'Summary: ' + result.summary;
|
| 82 |
} else if (result.error) {
|
| 83 |
+
resultDiv.innerText = 'Error: ' + result.error;
|
| 84 |
}
|
| 85 |
} else {
|
| 86 |
+
resultDiv.innerText = 'Please enter some text.';
|
| 87 |
}
|
| 88 |
}
|
| 89 |
</script>
|