Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>View Document - {{ filename }}</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .document-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .document-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .back-button { | |
| text-decoration: none; | |
| color: #3b82f6; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .back-button i { | |
| margin-right: 5px; | |
| } | |
| .document-title { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| } | |
| .document-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .action-button { | |
| background-color: #f3f4f6; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 4px; | |
| padding: 5px 10px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| transition: background-color 0.3s; | |
| } | |
| .action-button i { | |
| margin-right: 5px; | |
| } | |
| .action-button:hover { | |
| background-color: #e5e7eb; | |
| } | |
| .document-content { | |
| background-color: #ffffff; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 6px; | |
| padding: 20px; | |
| white-space: pre-wrap; | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| } | |
| .document-footer { | |
| margin-top: 20px; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="document-container"> | |
| <div class="document-header"> | |
| <a href="{{ url_for('home') }}" class="back-button"> | |
| <i class="fas fa-arrow-left"></i> Back to Home | |
| </a> | |
| <h1 class="document-title">{{ filename }}</h1> | |
| <div class="document-actions"> | |
| <button class="action-button" id="generate-wordcloud-btn"> | |
| <i class="fas fa-cloud"></i> Generate Word Cloud | |
| </button> | |
| <button class="action-button" onclick="window.print()"> | |
| <i class="fas fa-print"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| <div class="document-content"> | |
| {{ content }} | |
| </div> | |
| <div id="wordcloud-container" style="display: none; margin-top: 20px;"> | |
| <h2><i class="fas fa-cloud"></i> Document Word Cloud</h2> | |
| <div id="wordcloud-image-container" style="text-align: center; padding: 20px; background-color: #f9fafb; border-radius: 6px;"> | |
| <div id="loading-indicator" style="display: none;"> | |
| <i class="fas fa-spinner fa-spin"></i> Generating word cloud... | |
| </div> | |
| <img id="wordcloud-image" style="max-width: 100%; display: none;" /> | |
| </div> | |
| <div id="word-frequency" style="margin-top: 15px; display: none;"> | |
| <h3>Word Frequency Statistics</h3> | |
| <div id="word-frequency-list" style="display: flex; flex-wrap: wrap; gap: 10px;"> | |
| <!-- Word frequency data will be added here dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-footer"> | |
| <p>AI Teaching Assistant - Document Viewer</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const generateWordcloudBtn = document.getElementById('generate-wordcloud-btn'); | |
| const wordcloudContainer = document.getElementById('wordcloud-container'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const wordcloudImage = document.getElementById('wordcloud-image'); | |
| const wordFrequency = document.getElementById('word-frequency'); | |
| const wordFrequencyList = document.getElementById('word-frequency-list'); | |
| // If URL parameter generate_wordcloud=true, automatically generate word cloud | |
| const urlParams = new URLSearchParams(window.location.search); | |
| if (urlParams.get('generate_wordcloud') === 'true') { | |
| generateWordcloud(); | |
| } | |
| generateWordcloudBtn.addEventListener('click', function() { | |
| generateWordcloud(); | |
| }); | |
| function generateWordcloud() { | |
| // Show word cloud container and loading indicator | |
| wordcloudContainer.style.display = 'block'; | |
| loadingIndicator.style.display = 'block'; | |
| wordcloudImage.style.display = 'none'; | |
| wordFrequency.style.display = 'none'; | |
| // Get top_n parameter, default is 100 | |
| const topN = urlParams.get('top_n') || 100; | |
| // Call word cloud API | |
| fetch(`/api/wordcloud/{{ filename }}?top_n=${topN}`) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Failed to generate word cloud'); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| // Hide loading indicator | |
| loadingIndicator.style.display = 'none'; | |
| // Show word cloud image - Fix field name to match backend | |
| wordcloudImage.src = `data:image/png;base64,${data.wordcloud_image}`; | |
| wordcloudImage.style.display = 'block'; | |
| // Show word frequency statistics | |
| wordFrequency.style.display = 'block'; | |
| // Clear previous word frequency list | |
| wordFrequencyList.innerHTML = ''; | |
| // Add word frequency data | |
| data.word_frequency.forEach(([word, freq]) => { | |
| const wordItem = document.createElement('div'); | |
| wordItem.className = 'word-item'; | |
| wordItem.style.padding = '5px 10px'; | |
| wordItem.style.backgroundColor = '#e5e7eb'; | |
| wordItem.style.borderRadius = '4px'; | |
| wordItem.innerHTML = `<strong>${word}</strong>: ${freq}`; | |
| wordFrequencyList.appendChild(wordItem); | |
| }); | |
| }) | |
| .catch(error => { | |
| loadingIndicator.style.display = 'none'; | |
| wordFrequencyList.innerHTML = `<div style="color: red;">Error: ${error.message}</div>`; | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |