Spaces:
Sleeping
Sleeping
File size: 4,516 Bytes
03ae0e1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Summarizer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #FFF7ED;
color: #333;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #FB923C;
}
h3 {
text-align: center;
margin-top: -20px;
margin-bottom: 40px;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
}
textarea {
height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
background-color: #FB923C;
color: white;
border: none;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #F97316;
}
#summary-output {
margin-top: 20px;
background: #FFEDD5;
padding: 15px;
border-radius: 5px;
border: 1px solid #ccc;
}
#summary-heading {
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div class="container">
<h1>Text Summarizer</h1>
<h3>using HuggingFace Transformer</h3>
<p>Write or Paste your content below for quick summarization.</p>
<form id="summarization-form">
<textarea id="dialogue-input" placeholder="Enter your content here..." required></textarea>
<button type="submit">Summarize</button>
</form>
<div id="summary-output">
<h3 id="summary-heading">Content Summary</h3>
<p id="summary-text"></p>
</div>
</div>
<script>
// Here we will write all the JS code required in this project
document.getElementById("summarization-form").addEventListener("submit", async (e) => {
// Prevents the browser’s default behavior of reloading the page when the form is submitted.
// This lets you handle the submission with JavaScript instead.
e.preventDefault();
// Here this 'e' is actually representing the event which will happens on form submission
// Get references to elements
const dialogueInput = document.getElementById("dialogue-input");
const summaryText = document.getElementById("summary-text");
const submitButton = e.target.querySelector("button");
// Finds the button inside the form that triggered the submission.
// This is useful if you want to disable it while the summary is being generated (to prevent multiple clicks).
const dialogue = dialogueInput.value.trim(); //removes any leading or trailing whitespace (so " hello " becomes "hello").
if(!dialogue) return; // checks if the string is empty after trimming.
// Show processing message and disable button
summaryText.innerText = "Processing...";
submitButton.disabled = true;
try {
// send dialogue to backend using this POST request and waiting for its response & then storing that response here
const response = await fetch("/summarize", {
method: "POST",
headers: { "Content-Type": "application/json"},
body: JSON.stringify({ dialogue }),
});
if(!response.ok) {
throw new Error(`Server error: ${response.status}`);
}
const data = await response.json();
summaryText.innerText = data.summary || "No summary returned.";
} catch (error) {
summaryText.innerText = `Error: ${error.message}`;
} finally {
submitButton.disabled = false;
}
});
</script>
</body>
</html> |