Implement paginated LoRA data fetching with caching and infinite scroll

This commit is contained in:
Will Miao
2025-02-02 22:57:22 +08:00
parent 118c4521a2
commit 4b247995d1
5 changed files with 429 additions and 127 deletions

View File

@@ -69,7 +69,7 @@
<div class="controls">
<div class="folder-tags">
{% for folder in folders %}
<div class="tag" data-folder="{{ folder }}" onclick="toggleFolder(this)">{{ folder }}</div>
<div class="tag" data-folder="{{ folder }}">{{ folder }}</div>
{% endfor %}
</div>
@@ -85,55 +85,7 @@
<!-- Lora卡片容器 -->
<div class="card-grid" id="loraGrid">
{% for lora in loras %}
<div class="lora-card"
data-sha256="{{ lora.sha256 }}"
data-filepath="{{ lora.file_path }}"
data-name="{{ lora.model_name }}"
data-file_name="{{ lora.file_name }}"
data-folder="{{ lora.folder }}"
data-modified="{{ lora.modified }}"
data-from_civitai="{{ lora.from_civitai }}"
data-meta="{{ lora.civitai | default({}) | tojson | forceescape }}">
<div class="card-preview">
{% if lora.preview_url.endswith('.mp4') or lora.preview_url.endswith('.webm') %}
<video controls autoplay muted loop>
<source src="{{ lora.preview_url }}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% else %}
<img src="{{ lora.preview_url if lora.preview_url else '/loras_static/images/no-preview.png' }}" alt="{{ lora.name }}">
{% endif %}
<div class="card-header">
<span class="base-model-label" title="{{ lora.base_model }}">
{{ lora.base_model }}
</span>
<div class="card-actions">
<i class="fas fa-globe"
title="{% if lora.from_civitai %}View on Civitai{% else %}Not available from Civitai{% endif %}"
{% if lora.from_civitai %}onclick="event.stopPropagation(); openCivitai('{{ lora.model_name }}')"{% endif %}
{% if not lora.from_civitai %}style="opacity: 0.5; cursor: not-allowed"{% endif %}></i>
<i class="fas fa-copy"
title="Copy Model Name"
onclick="event.stopPropagation(); navigator.clipboard.writeText(this.closest('.lora-card').dataset.file_name)"></i>
<i class="fas fa-trash"
title="Delete Model"
onclick="event.stopPropagation(); deleteModel('{{ lora.file_path }}')"></i>
</div>
</div>
<div class="card-footer">
<div class="model-info">
<span class="model-name">{{ lora.model_name }}</span>
</div>
<div class="card-actions">
<i class="fas fa-image"
title="Replace Preview Image"
onclick="event.stopPropagation(); replacePreview('{{ lora.file_path }}')"></i>
</div>
</div>
</div>
</div>
{% endfor %}
<!-- Cards will be dynamically inserted here -->
</div>
</div>