Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Summarizer - BART Model</title> | |
| <!-- Bootstrap 4 CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .navbar { | |
| background-color: #007bff; | |
| } | |
| .navbar-brand, .nav-link { | |
| color: white ; | |
| } | |
| .hero-section { | |
| background: #007bff; | |
| color: white; | |
| padding: 60px 20px; | |
| text-align: center; | |
| } | |
| .content-section { | |
| padding: 40px 20px; | |
| } | |
| .summary-box { | |
| max-width: 600px; | |
| margin: auto; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 5px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Hero Section --> | |
| <div class="hero-section"> | |
| <h1>AI-Powered Text Summarizer</h1> | |
| <p>Summarize long articles into concise and meaningful summaries using the BART model.</p> | |
| </div> | |
| <div class="container content-section"> | |
| <h2 class="text-center mb-4">About the BART Model</h2> | |
| <p class="text-left"> | |
| <strong>BART (Bidirectional and Auto-Regressive Transformer)</strong> is a sequence-to-sequence model that combines the strengths of both BERT and GPT. | |
| It features a <strong>bidirectional encoder</strong>, similar to BERT, which understands context deeply, and an <strong>autoregressive decoder</strong>, like GPT, which generates text efficiently. | |
| </p> | |
| <p class="text-left"> | |
| Pre-trained using a <strong>denoising objective</strong>, BART reconstructs original text from corrupted input, making it highly effective for text generation tasks such as | |
| <strong>summarization, translation, and question answering</strong>. | |
| </p> | |
| </div> | |
| <!-- Summarization Tool --> | |
| <div class="container content-section"> | |
| <h2 class="text-center mb-4">Try the Summarizer</h2> | |
| <p class="text-center">Enter a passage, and the AI will generate a concise summary.</p> | |
| <div class="summary-box"> | |
| <textarea id="userInput" class="form-control mb-3" rows="5" placeholder="Paste your text here..."></textarea> | |
| <button class="btn btn-primary btn-block" onclick="fetchSummary()">Summarize</button> | |
| <div class="spinner-border text-primary mt-3" id="loader" style="display:none;"></div> | |
| <div id="result" class="alert alert-secondary mt-3" style="display:none;"></div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap 4 JS + jQuery --> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | |
| <script> | |
| import fetch from "node-fetch"; | |
| async function query(data) { | |
| const response = await fetch( | |
| "https://api-inference.huggingface.co/models/facebook/bart-large-cnn", | |
| { | |
| headers: { | |
| Authorization: "Bearer {HF_TOKEN}", // Replace with your actual token | |
| "Content-Type": "application/json", | |
| }, | |
| method: "POST", | |
| body: JSON.stringify(data), | |
| } | |
| ); | |
| const result = await response.json(); | |
| return result; | |
| } | |
| async function fetchSummary() { | |
| const inputText = document.getElementById("userInput").value; | |
| const loader = document.getElementById("loader"); | |
| const resultBox = document.getElementById("result"); | |
| if (!inputText) { | |
| alert("Please enter some text."); | |
| return; | |
| } | |
| loader.style.display = "block"; | |
| resultBox.style.display = "none"; | |
| resultBox.innerText = ""; | |
| try { | |
| const response = await query({ inputs: inputText }); | |
| loader.style.display = "none"; | |
| resultBox.style.display = "block"; | |
| resultBox.innerHTML = `<strong>Summary:</strong> <br> ${response[0].summary_text}`; | |
| } catch (error) { | |
| loader.style.display = "none"; | |
| alert("Error fetching summary. Please try again."); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |