Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Summarization - SmartDoc AI</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="stylesheet" href="static/styles/notification.css"> | |
| <link rel="stylesheet" href="static/styles/functions.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav class="container"> | |
| <div class="logo"> | |
| <a href="/">SmartDoc AI</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>Summarize Your Documents <br> | |
| in Seconds</h1> | |
| <p>Transform lengthy documents into concise, accurate summaries with our advanced AI technology. Save time and | |
| extract key insights from any text with just a few clicks.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="reasons"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Why Choose Our Summarization AI</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="reasons-grid"> | |
| <div class="reason-card"> | |
| <div class="reason-icon">⚡</div> | |
| <h3>Time Efficiency</h3> | |
| <p>Reduce reading time by up to 80% while retaining all key information from your documents. Our AI quickly | |
| identifies and extracts the most important points.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">🧠</div> | |
| <h3>Advanced NLP</h3> | |
| <p>Powered by state-of-the-art Natural Language Processing algorithms that understand context, identify key | |
| concepts, and generate human-like summaries.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">📊</div> | |
| <h3>Accuracy</h3> | |
| <p>Our AI maintains the highest level of accuracy, ensuring that summaries capture the essential information | |
| without missing critical details or context.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">🔄</div> | |
| <h3>Customizable</h3> | |
| <p>Adjust summary length and focus areas based on your specific needs. Get exactly the information you want, | |
| in the format you prefer.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="steps"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>How It Works</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="steps-container"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>Upload Your Document</h3> | |
| <p>Select and upload the document you want to summarize. We support various formats including PDF, DOCX, | |
| TXT, and more.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>AI Processing</h3> | |
| <p>Our advanced AI analyzes your document, identifying key concepts, main ideas, and important details while | |
| understanding the context and relationships between ideas.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>Review Summary</h3> | |
| <p>Receive a concise, well-structured summary that captures the essence of your document. The summary | |
| maintains the original meaning while significantly reducing length.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Download or Share</h3> | |
| <p>Save your summary as a PDF or text file, or share it directly with colleagues. All your data is processed | |
| securely and never stored without your permission.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="upload"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Upload Your Document</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="upload-container"> | |
| <div class="upload-box"> | |
| <div class="upload-icon">📄</div> | |
| <div class="upload-text"> | |
| <h3>Select a Document to Summarize</h3> | |
| <p>Upload a PDF, DOCX, or TXT file (max 10MB)</p> | |
| </div> | |
| <div class="file-input-container"> | |
| <label for="document-upload" class="file-input-label">Choose File</label> | |
| <input type="file" id="document-upload" class="file-input" accept=".pdf,.docx,.ppt,.xlsx"> | |
| <div class="file-name" id="file-name">No file chosen</div> | |
| </div> | |
| <button class="btn-primary" id="summarize-btn">Generate Summary</button> | |
| <div class="loading-container" id="loading-container"> | |
| <div class="loading-spinner"></div> | |
| <div class="loading-text">Analyzing document and generating summary...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="results" id="results-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Your Summary</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="results-container"> | |
| <div class="results-box"> | |
| <div class="results-header"> | |
| <div class="results-title"> | |
| <h3>Document Summary</h3> | |
| </div> | |
| </div> | |
| <div class="results-content" id="summary-content"> | |
| <!-- <p>The document discusses the impact of artificial intelligence on modern business operations. Key points | |
| include:</p> | |
| <p>1. AI technologies are transforming how businesses analyze customer data, with 78% of companies reporting | |
| improved decision-making after implementing AI solutions.</p> | |
| <p>2. Machine learning algorithms can predict customer behavior with up to 85% accuracy when properly | |
| trained on historical data.</p> | |
| <p>3. Companies that have integrated AI into their workflow report an average 23% increase in operational | |
| efficiency and 15% reduction in costs.</p> | |
| <p>4. The most successful AI implementations focus on augmenting human capabilities rather than replacing | |
| them, creating new roles focused on AI oversight and ethical considerations.</p> | |
| <p>5. Future developments will likely center around more transparent AI systems that can explain their | |
| decision-making processes to human operators.</p>--> | |
| </div> | |
| <div class="results-actions"> | |
| <button class="btn-secondary" id="new-summary-btn">New Summary</button> | |
| <button class="btn-primary" id="download-btn">Download Summary</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <a href="/">SmartDoc AI</a> | |
| <p>Intelligent Document Processing</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2025 SmartDoc AI.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <div class="notification-container"></div> | |
| <script src="static/scripts/notifcation.js"></script> | |
| <script src="static/scripts/text-summarization.js"></script> | |
| <!--<script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const fileInput = document.getElementById('document-upload'); | |
| const fileName = document.getElementById('file-name'); | |
| const summarizeBtn = document.getElementById('summarize-btn'); | |
| const loadingContainer = document.getElementById('loading-container'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const newSummaryBtn = document.getElementById('new-summary-btn'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| // Display file name when a file is selected | |
| fileInput.addEventListener('change', function () { | |
| if (this.files && this.files[0]) { | |
| fileName.textContent = this.files[0].name; | |
| } else { | |
| fileName.textContent = 'No file chosen'; | |
| } | |
| }); | |
| // Show loading animation and then results when Generate Summary is clicked | |
| summarizeBtn.addEventListener('click', function () { | |
| if (fileInput.files.length === 0) { | |
| alert('Please select a file first'); | |
| return; | |
| } | |
| // Show loading animation | |
| loadingContainer.style.display = 'block'; | |
| summarizeBtn.disabled = true; | |
| // Simulate processing time (3 seconds) | |
| setTimeout(function () { | |
| // Hide loading animation | |
| loadingContainer.style.display = 'none'; | |
| // Show results section | |
| resultsSection.style.display = 'block'; | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| // Re-enable button | |
| summarizeBtn.disabled = false; | |
| }, 3000); | |
| }); | |
| // Reset form for a new summary | |
| newSummaryBtn.addEventListener('click', function () { | |
| fileInput.value = ''; | |
| fileName.textContent = 'No file chosen'; | |
| resultsSection.style.display = 'none'; | |
| // Scroll to upload section | |
| document.querySelector('.upload').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Simulate download functionality | |
| downloadBtn.addEventListener('click', function () { | |
| const summaryText = document.getElementById('summary-content').innerText; | |
| const blob = new Blob([summaryText], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'document-summary.txt'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }); | |
| }); | |
| </script>--> | |
| </body> | |
| </html> |