mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 05:32:12 -03:00
36d3cd93d5
- Added new localization keys for usage statistics, collection analysis, storage efficiency, and insights in English and Chinese. - Updated modal templates to utilize localization for delete, exclude, and bulk delete confirmations. - Improved download modal with localized labels and placeholders. - Enhanced example access modal with localized titles and descriptions. - Updated help modal to include localized content for update vlogs and documentation sections. - Refactored move modal to use localization for labels and buttons. - Implemented localization in relink Civitai modal for warnings and help text. - Updated update modal to reflect localized text for actions and progress messages. - Enhanced statistics template with localized titles for charts and lists.
203 lines
8.9 KiB
HTML
203 lines
8.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t('statistics.title') }} - {{ t('header.appTitle') }}{% endblock %}
|
|
{% block page_id %}statistics{% endblock %}
|
|
|
|
{% block preload %}
|
|
{% if not is_initializing %}
|
|
<link rel="preload" href="/loras_static/js/statistics.js" as="script" crossorigin="anonymous">
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block head_scripts %}
|
|
<!-- Add Chart.js for statistics page -->
|
|
<script src="/loras_static/vendor/chart.js/chart.umd.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block init_title %}{{ t('initialization.statistics.title') }}{% endblock %}
|
|
{% block init_message %}{{ t('initialization.statistics.message') }}{% endblock %}
|
|
{% block init_check_url %}/api/stats/collection-overview{% endblock %}
|
|
|
|
{% block content %}
|
|
{% if not is_initializing %}
|
|
<!-- Key Metrics Panel -->
|
|
<div class="metrics-panel">
|
|
<div class="metrics-grid" id="metricsGrid">
|
|
<!-- Metrics cards will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Dashboard Content -->
|
|
<div class="dashboard-content">
|
|
<!-- Navigation Tabs -->
|
|
<div class="dashboard-tabs">
|
|
<button class="tab-button active" data-tab="overview">
|
|
<i class="fas fa-chart-bar"></i> {{ t('statistics.tabs.overview') }}
|
|
</button>
|
|
<button class="tab-button" data-tab="usage">
|
|
<i class="fas fa-chart-line"></i> {{ t('statistics.tabs.usage') }}
|
|
</button>
|
|
<button class="tab-button" data-tab="collection">
|
|
<i class="fas fa-layer-group"></i> {{ t('statistics.tabs.collection') }}
|
|
</button>
|
|
<button class="tab-button" data-tab="storage">
|
|
<i class="fas fa-hdd"></i> {{ t('statistics.tabs.storage') }}
|
|
</button>
|
|
<button class="tab-button" data-tab="insights">
|
|
<i class="fas fa-lightbulb"></i> {{ t('statistics.tabs.insights') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content Panels -->
|
|
<div class="tab-content">
|
|
<!-- Overview Tab -->
|
|
<div class="tab-panel active" id="overview-panel">
|
|
<div class="panel-grid">
|
|
<!-- Collection Overview Chart -->
|
|
<div class="chart-container">
|
|
<h3><i class="fas fa-pie-chart"></i> {{ t('statistics.charts.collectionOverview') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="collectionPieChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Base Model Distribution -->
|
|
<div class="chart-container">
|
|
<h3><i class="fas fa-layer-group"></i> {{ t('statistics.charts.baseModelDistribution') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="baseModelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Timeline -->
|
|
<div class="chart-container full-width">
|
|
<h3><i class="fas fa-chart-line"></i> {{ t('statistics.charts.usageTrends') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="usageTimelineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Analysis Tab -->
|
|
<div class="tab-panel" id="usage-panel">
|
|
<div class="panel-grid">
|
|
<!-- Top Used LoRAs -->
|
|
<div class="list-container">
|
|
<h3><i class="fas fa-star"></i> {{ t('statistics.usage.mostUsedLoras') }}</h3>
|
|
<div class="model-list" id="topLorasList">
|
|
<!-- List will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Used Checkpoints -->
|
|
<div class="list-container">
|
|
<h3><i class="fas fa-check-circle"></i> {{ t('statistics.usage.mostUsedCheckpoints') }}</h3>
|
|
<div class="model-list" id="topCheckpointsList">
|
|
<!-- List will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Used Embeddings -->
|
|
<div class="list-container">
|
|
<h3><i class="fas fa-code"></i> {{ t('statistics.usage.mostUsedEmbeddings') }}</h3>
|
|
<div class="model-list" id="topEmbeddingsList">
|
|
<!-- List will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Distribution Chart -->
|
|
<div class="chart-container full-width">
|
|
<h3><i class="fas fa-chart-bar"></i> {{ t('statistics.charts.usageDistribution') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="usageDistributionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collection Tab -->
|
|
<div class="tab-panel" id="collection-panel">
|
|
<div class="panel-grid">
|
|
<!-- Tag Cloud -->
|
|
<div class="chart-container">
|
|
<h3><i class="fas fa-tags"></i> {{ t('statistics.collection.popularTags') }}</h3>
|
|
<div class="tag-cloud" id="tagCloud">
|
|
<!-- Tag cloud will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Base Model Timeline -->
|
|
<div class="chart-container">
|
|
<h3><i class="fas fa-history"></i> {{ t('statistics.collection.modelTypes') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="modelTypesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collection Growth -->
|
|
<div class="chart-container full-width">
|
|
<h3><i class="fas fa-chart-area"></i> {{ t('statistics.collection.collectionAnalysis') }}</h3>
|
|
<div class="analysis-cards" id="collectionAnalysis">
|
|
<!-- Analysis cards will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Tab -->
|
|
<div class="tab-panel" id="storage-panel">
|
|
<div class="panel-grid">
|
|
<!-- Storage by Model Type -->
|
|
<div class="chart-container">
|
|
<h3><i class="fas fa-database"></i> {{ t('statistics.storage.storageUsage') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="storageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Largest Models -->
|
|
<div class="list-container">
|
|
<h3><i class="fas fa-weight-hanging"></i> {{ t('statistics.storage.largestModels') }}</h3>
|
|
<div class="model-list" id="largestModelsList">
|
|
<!-- List will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Efficiency -->
|
|
<div class="chart-container full-width">
|
|
<h3><i class="fas fa-chart-scatter"></i> {{ t('statistics.storage.storageEfficiency') }}</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="storageEfficiencyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Insights Tab -->
|
|
<div class="tab-panel" id="insights-panel">
|
|
<div class="insights-container">
|
|
<h3><i class="fas fa-lightbulb"></i> {{ t('statistics.insights.smartInsights') }}</h3>
|
|
<div class="insights-list" id="insightsList">
|
|
<!-- Insights will be populated by JavaScript -->
|
|
</div>
|
|
|
|
<!-- Recommendations -->
|
|
<div class="recommendations-section">
|
|
<h4><i class="fas fa-tasks"></i> {{ t('statistics.insights.recommendations') }}</h4>
|
|
<div class="recommendations-list" id="recommendationsList">
|
|
<!-- Recommendations will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block main_script %}
|
|
{% if not is_initializing %}
|
|
<script type="module" src="/loras_static/js/statistics.js"></script>
|
|
{% endif %}
|
|
{% endblock %} |