Spaces:
Sleeping
Sleeping
File size: 3,967 Bytes
513e668 |
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 |
<!DOCTYPE html>
<html>
<head>
<title>Text Summarization</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: url('static/Text-Summarization.jpg') no-repeat center center fixed;
background-size: cover;
font-family: Arial, sans-serif;
position: relative;
}
#content {
text-align: center;
background: rgba(255, 255, 255, 0.8); /* Semi-transparent background for better readability */
padding: 20px;
border-radius: 10px;
}
#summary {
margin-top: 20px;
color: black;
font-weight: bold;
}
#loading {
display: none;
color: green;
}
#input_text {
width: 80%; /* Adjust width as needed */
height: 200px; /* Adjust height as needed */
resize: vertical; /* Allow vertical resizing */
margin-top: 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#logo {
position: absolute;
top: 20px;
right: 20px;
width: 150px; /* Adjust width as needed */
}
#footer {
position: absolute;
bottom: 10px;
text-align: center;
width: 100%;
color: white;
}
</style>
</head>
<body>
<div id="logo">
<img src="static/logo.png" alt="Logo" width="150"> <!-- Adjust width as needed -->
</div>
<div id="content">
<h1>Text Summarization</h1>
<form id="summarizeForm">
<label for="input_text">Enter text to summarize:</label><br>
<textarea id="input_text" name="input_text" rows="10" cols="50"></textarea><br>
<button type="submit">Summarize</button>
</form>
<div id="loading">Loading...</div>
<div id="summary"></div>
</div>
<div id="footer">
© <span id="year"></span> Bikasuzzaman. Machine Learning Engineer.
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#summarizeForm').submit(function (event) {
event.preventDefault();
var formData = new FormData(this);
// Show loading circle
$('#loading').show();
$.ajax({
type: 'POST',
url: '/summarize',
data: formData,
processData: false,
contentType: false,
success: function (data) {
$('#summary').text(data.summary);
// Hide loading circle
$('#loading').hide();
},
error: function () {
alert('Error summarizing text.');
// Hide loading circle
$('#loading').hide();
}
});
});
// Set the current year in the footer
const currentYear = new Date().getFullYear();
$('#year').text(currentYear);
});
</script>
</body>
</html>
|