Spaces:
Sleeping
Sleeping
| <!-- Results Template --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Analysis Results - Advanced Data Analysis Tool</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .main-container { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| margin: 30px auto; | |
| max-width: 1400px; | |
| padding: 30px; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin: 30px 0; | |
| } | |
| .stat-card { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| padding: 25px; | |
| border-radius: 15px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .analysis-section { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 30px; | |
| margin: 20px 0; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .plot-container { | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| .plot-container img { | |
| max-width: 100%; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .swot-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .swot-card { | |
| padding: 25px; | |
| border-radius: 15px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .swot-strengths { background: linear-gradient(45deg, #4CAF50, #45a049); color: white; } | |
| .swot-weaknesses { background: linear-gradient(45deg, #f44336, #d32f2f); color: white; } | |
| .swot-opportunities { background: linear-gradient(45deg, #2196F3, #1976D2); color: white; } | |
| .swot-threats { background: linear-gradient(45deg, #FF9800, #F57C00); color: white; } | |
| .insights-text { | |
| background: #f8f9fa; | |
| border-left: 4px solid #667eea; | |
| padding: 20px; | |
| border-radius: 5px; | |
| margin: 20px 0; | |
| white-space: pre-wrap; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| border: none; | |
| padding: 12px 30px; | |
| border-radius: 25px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .nav-tabs .nav-link { | |
| border: none; | |
| border-radius: 25px; | |
| margin: 0 5px; | |
| padding: 10px 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-tabs .nav-link.active { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| } | |
| .table-responsive { | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .table { | |
| margin: 0; | |
| } | |
| .table th { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| border: none; | |
| } | |
| .insights-card { | |
| background: linear-gradient(45deg, #f8f9fa, #e9ecef); | |
| border-radius: 15px; | |
| padding: 25px; | |
| margin: 20px 0; | |
| border-left: 5px solid #667eea; | |
| } | |
| .correlation-matrix { | |
| overflow-x: auto; | |
| } | |
| .section-header { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 10px; | |
| margin: 20px 0 10px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="main-container"> | |
| <!-- Header --> | |
| <div class="text-center mb-4"> | |
| <h1 class="display-5 text-primary"> | |
| <i class="fas fa-chart-line me-3"></i> | |
| Data Analysis Results | |
| </h1> | |
| <p class="lead">Comprehensive analysis of: <strong>{{ results.dataset_info.filename }}</strong></p> | |
| <small class="text-muted">Analysis completed on: {{ results.dataset_info.upload_time }}</small> | |
| </div> | |
| <!-- Quick Stats --> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <i class="fas fa-table fa-2x mb-2"></i> | |
| <h3>{{ results.dataset_info.rows }}</h3> | |
| <p>Total Rows</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-columns fa-2x mb-2"></i> | |
| <h3>{{ results.dataset_info.columns }}</h3> | |
| <p>Total Columns</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-memory fa-2x mb-2"></i> | |
| <h3>{{ results.dataset_info.memory_usage }}</h3> | |
| <p>Memory Usage</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-exclamation-triangle fa-2x mb-2"></i> | |
| <h3>{{ results.dataset_info.missing_values_total }}</h3> | |
| <p>Missing Values</p> | |
| </div> | |
| </div> | |
| <!-- Navigation Tabs --> | |
| <ul class="nav nav-tabs" id="analysisTab" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab"> | |
| <i class="fas fa-info-circle me-2"></i>Overview | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="visualizations-tab" data-bs-toggle="tab" data-bs-target="#visualizations" type="button" role="tab"> | |
| <i class="fas fa-chart-bar me-2"></i>Visualizations | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="insights-tab" data-bs-toggle="tab" data-bs-target="#insights" type="button" role="tab"> | |
| <i class="fas fa-brain me-2"></i>AI Insights | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="swot-tab" data-bs-toggle="tab" data-bs-target="#swot" type="button" role="tab"> | |
| <i class="fas fa-crosshairs me-2"></i>SWOT Analysis | |
| </button> | |
| </li> | |
| </ul> | |
| <!-- Tab Content --> | |
| <div class="tab-content" id="analysisTabContent"> | |
| <!-- Overview Tab --> | |
| <div class="tab-pane fade show active" id="overview" role="tabpanel"> | |
| <div class="analysis-section"> | |
| <h3 class="section-header"> | |
| <i class="fas fa-info-circle me-2"></i>Dataset Overview | |
| </h3> | |
| <!-- Column Information --> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h5>Column Information</h5> | |
| <div class="table-responsive"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Column</th> | |
| <th>Data Type</th> | |
| <th>Missing Values</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for column in results.basic_stats.columns %} | |
| <tr> | |
| <td>{{ column }}</td> | |
| <td>{{ results.basic_stats.dtypes[column] }}</td> | |
| <td>{{ results.basic_stats.missing_values[column] }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <h5>Data Quality Summary</h5> | |
| <div class="insights-card"> | |
| <p><strong>Total Records:</strong> {{ results.dataset_info.rows }}</p> | |
| <p><strong>Features:</strong> {{ results.dataset_info.columns }}</p> | |
| <p><strong>Duplicate Rows:</strong> {{ results.dataset_info.duplicate_rows }}</p> | |
| <p><strong>Memory Usage:</strong> {{ results.dataset_info.memory_usage }}</p> | |
| <p><strong>Missing Values:</strong> {{ results.dataset_info.missing_values_total }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Numerical Insights --> | |
| {% if results.numerical_insights %} | |
| <h5 class="mt-4">Numerical Columns Analysis</h5> | |
| <div class="table-responsive"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Column</th> | |
| <th>Mean</th> | |
| <th>Median</th> | |
| <th>Std Dev</th> | |
| <th>Min</th> | |
| <th>Max</th> | |
| <th>Outliers</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for column, stats in results.numerical_insights.items() %} | |
| <tr> | |
| <td>{{ column }}</td> | |
| <td>{{ "%.2f"|format(stats.mean) }}</td> | |
| <td>{{ "%.2f"|format(stats.median) }}</td> | |
| <td>{{ "%.2f"|format(stats.std) }}</td> | |
| <td>{{ "%.2f"|format(stats.min) }}</td> | |
| <td>{{ "%.2f"|format(stats.max) }}</td> | |
| <td>{{ stats.outliers }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| {% endif %} | |
| <!-- Categorical Insights --> | |
| {% if results.categorical_insights %} | |
| <h5 class="mt-4">Categorical Columns Analysis</h5> | |
| <div class="row"> | |
| {% for column, stats in results.categorical_insights.items() %} | |
| <div class="col-md-6 mb-3"> | |
| <div class="insights-card"> | |
| <h6>{{ column }}</h6> | |
| <p><strong>Unique Values:</strong> {{ stats.unique_count }}</p> | |
| <p><strong>Most Common:</strong> {{ stats.mode }}</p> | |
| <p><strong>Top Categories:</strong></p> | |
| <ul> | |
| {% for category, count in stats.top_categories.items() %} | |
| <li>{{ category }}: {{ count }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <!-- Visualizations Tab --> | |
| <div class="tab-pane fade" id="visualizations" role="tabpanel"> | |
| <div class="analysis-section"> | |
| <h3 class="section-header"> | |
| <i class="fas fa-chart-bar me-2"></i>Data Visualizations | |
| </h3> | |
| {% if results.plot_images %} | |
| <div class="row"> | |
| {% for plot in results.plot_images %} | |
| <div class="col-lg-6 col-md-12 mb-4"> | |
| <div class="plot-container"> | |
| <img src="data:image/png;base64,{{ plot }}" alt="Data Visualization" class="img-fluid"> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <p>No visualizations available for this dataset.</p> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <!-- AI Insights Tab --> | |
| <div class="tab-pane fade" id="insights" role="tabpanel"> | |
| <div class="analysis-section"> | |
| <h3 class="section-header"> | |
| <i class="fas fa-brain me-2"></i>AI-Powered Insights | |
| </h3> | |
| <div class="insights-text"> | |
| {{ results.ai_insights }} | |
| </div> | |
| <!-- Correlation Matrix --> | |
| {% if results.correlation_matrix %} | |
| <h5 class="mt-4">Correlation Analysis</h5> | |
| <div class="correlation-matrix"> | |
| <div class="table-responsive"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Feature</th> | |
| {% for col in results.correlation_matrix.keys() %} | |
| <th>{{ col }}</th> | |
| {% endfor %} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for row_col, row_data in results.correlation_matrix.items() %} | |
| <tr> | |
| <td><strong>{{ row_col }}</strong></td> | |
| {% for col, value in row_data.items() %} | |
| <td>{{ "%.3f"|format(value) }}</td> | |
| {% endfor %} | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <!-- SWOT Analysis Tab --> | |
| <div class="tab-pane fade" id="swot" role="tabpanel"> | |
| <div class="analysis-section"> | |
| <h3 class="section-header"> | |
| <i class="fas fa-crosshairs me-2"></i>SWOT Analysis | |
| </h3> | |
| <div class="swot-grid"> | |
| <!-- Strengths --> | |
| <div class="swot-card swot-strengths"> | |
| <h5><i class="fas fa-thumbs-up me-2"></i>Strengths</h5> | |
| <ul> | |
| {% for strength in results.swot_analysis.strengths %} | |
| <li>{{ strength }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <!-- Weaknesses --> | |
| <div class="swot-card swot-weaknesses"> | |
| <h5><i class="fas fa-thumbs-down me-2"></i>Weaknesses</h5> | |
| <ul> | |
| {% for weakness in results.swot_analysis.weaknesses %} | |
| <li>{{ weakness }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <!-- Opportunities --> | |
| <div class="swot-card swot-opportunities"> | |
| <h5><i class="fas fa-lightbulb me-2"></i>Opportunities</h5> | |
| <ul> | |
| {% for opportunity in results.swot_analysis.opportunities %} | |
| <li>{{ opportunity }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <!-- Threats --> | |
| <div class="swot-card swot-threats"> | |
| <h5><i class="fas fa-exclamation-triangle me-2"></i>Threats</h5> | |
| <ul> | |
| {% for threat in results.swot_analysis.threats %} | |
| <li>{{ threat }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="text-center mt-4"> | |
| <a href="/" class="btn btn-primary"> | |
| <i class="fas fa-upload me-2"></i>Analyze Another File | |
| </a> | |
| <button class="btn btn-secondary" onclick="window.print()"> | |
| <i class="fas fa-print me-2"></i>Print Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Initialize tooltips | |
| var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
| var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { | |
| return new bootstrap.Tooltip(tooltipTriggerEl); | |
| }); | |
| </script> | |
| </body> | |
| </html> |