Spaces:
Sleeping
Sleeping
| <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> | |