Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Log Analyzer</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .upload-container { | |
| border: 2px dashed #ccc; | |
| padding: 20px; | |
| text-align: center; | |
| margin: 20px 0; | |
| border-radius: 5px; | |
| } | |
| #file-input { | |
| margin: 10px 0; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 15px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| #results { | |
| margin-top: 30px; | |
| } | |
| .entity-group { | |
| margin-bottom: 20px; | |
| } | |
| .entity-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| pre { | |
| background-color: #f5f5f5; | |
| padding: 15px; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| } | |
| th, td { | |
| border: 1px solid #ddd; | |
| padding: 8px; | |
| text-align: left; | |
| } | |
| th { | |
| background-color: #f2f2f2; | |
| } | |
| tr:nth-child(even) { | |
| background-color: #f9f9f9; | |
| } | |
| .view-controls { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .view-controls button { | |
| background-color: #555; | |
| } | |
| .view-controls button.active { | |
| background-color: #4CAF50; | |
| } | |
| .view { | |
| display: none; | |
| } | |
| .view.active { | |
| display: block; | |
| } | |
| #json-view { | |
| white-space: pre-wrap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Log File Analyzer</h1> | |
| <div class="upload-container"> | |
| <h2>Upload Log File</h2> | |
| <form id="upload-form" enctype="multipart/form-data"> | |
| <input type="file" id="file-input" name="file" accept=".log,.txt"> | |
| <div> | |
| <button type="submit">Analyze Log</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="loading" class="loading"> | |
| <p>Analyzing log file... Please wait.</p> | |
| </div> | |
| <div id="results"></div> | |
| <script> | |
| document.getElementById('upload-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const fileInput = document.getElementById('file-input'); | |
| if (!fileInput.files.length) { | |
| alert('Please select a file to analyze'); | |
| return; | |
| } | |
| const formData = new FormData(); | |
| formData.append('file', fileInput.files[0]); | |
| // Show loading indicator | |
| document.getElementById('loading').style.display = 'block'; | |
| document.getElementById('results').innerHTML = ''; | |
| fetch('/analyze', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // Hide loading indicator | |
| document.getElementById('loading').style.display = 'none'; | |
| // Display results | |
| const resultsDiv = document.getElementById('results'); | |
| if (Object.keys(data).length === 0) { | |
| resultsDiv.innerHTML = '<p>No entities found in the log file.</p>'; | |
| return; | |
| } | |
| let resultsHTML = '<h2>Analysis Results</h2>'; | |
| // Add view controls | |
| resultsHTML += ` | |
| <div class="view-controls"> | |
| <button id="list-view-btn" class="active">List View</button> | |
| <button id="table-view-btn">Table View</button> | |
| <button id="json-view-btn">Raw JSON</button> | |
| </div> | |
| `; | |
| // List view (original) | |
| resultsHTML += '<div id="list-view" class="view active">'; | |
| for (const [entityType, entities] of Object.entries(data)) { | |
| if (entities.length > 0) { | |
| resultsHTML += ` | |
| <div class="entity-group"> | |
| <div class="entity-title">${entityType} (${entities.length})</div> | |
| <pre>${entities.join('\n')}</pre> | |
| </div> | |
| `; | |
| } | |
| } | |
| resultsHTML += '</div>'; | |
| // Table view | |
| resultsHTML += '<div id="table-view" class="view">'; | |
| for (const [entityType, entities] of Object.entries(data)) { | |
| if (entities.length > 0) { | |
| resultsHTML += ` | |
| <div class="entity-group"> | |
| <div class="entity-title">${entityType} (${entities.length})</div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| `; | |
| entities.forEach((entity, index) => { | |
| resultsHTML += ` | |
| <tr> | |
| <td>${index + 1}</td> | |
| <td>${entity}</td> | |
| </tr> | |
| `; | |
| }); | |
| resultsHTML += ` | |
| </tbody> | |
| </table> | |
| </div> | |
| `; | |
| } | |
| } | |
| resultsHTML += '</div>'; | |
| // JSON view | |
| resultsHTML += ` | |
| <div id="json-view" class="view"> | |
| <pre>${JSON.stringify(data, null, 2)}</pre> | |
| </div> | |
| `; | |
| resultsDiv.innerHTML = resultsHTML; | |
| // Add event listeners for view controls | |
| document.getElementById('list-view-btn').addEventListener('click', function() { | |
| setActiveView('list-view'); | |
| }); | |
| document.getElementById('table-view-btn').addEventListener('click', function() { | |
| setActiveView('table-view'); | |
| }); | |
| document.getElementById('json-view-btn').addEventListener('click', function() { | |
| setActiveView('json-view'); | |
| }); | |
| }) | |
| .catch(error => { | |
| document.getElementById('loading').style.display = 'none'; | |
| console.error('Error:', error); | |
| document.getElementById('results').innerHTML = '<p>Error analyzing log file. Please try again.</p>'; | |
| }); | |
| }); | |
| function setActiveView(viewId) { | |
| // Remove active class from all views and buttons | |
| document.querySelectorAll('.view').forEach(el => el.classList.remove('active')); | |
| document.querySelectorAll('.view-controls button').forEach(el => el.classList.remove('active')); | |
| // Add active class to selected view and button | |
| document.getElementById(viewId).classList.add('active'); | |
| document.getElementById(viewId + '-btn').classList.add('active'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |