mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 05:32:12 -03:00
105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>LoRA Management</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/loras_static/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/loras_static/images/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/loras_static/images/favicon-16x16.png">
|
|
<link rel="manifest" href="/loras_static/images/site.webmanifest">
|
|
</head>
|
|
<body>
|
|
<div class="theme-toggle" onclick="toggleTheme()">
|
|
<img src="/loras_static/images/theme-toggle.svg" alt="Theme">
|
|
</div>
|
|
|
|
<!-- 添加模态窗口 -->
|
|
<div id="loraModal" class="modal"></div>
|
|
|
|
<div id="loading-overlay" class="loading-overlay" style="display: none;">
|
|
<div class="loading-content">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-status">Scanning Loras...</div>
|
|
<div class="progress-container">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- 控制栏 -->
|
|
<div class="controls">
|
|
<div class="folder-tags">
|
|
{% for folder in folders %}
|
|
<div class="tag" data-folder="{{ folder }}" onclick="toggleFolder(this)">{{ folder }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<select id="sortSelect">
|
|
<option value="name">Name</option>
|
|
<option value="date">Date</option>
|
|
</select>
|
|
<button onclick="refreshLoras()"><i class="fas fa-sync"></i> Refresh</button>
|
|
<button onclick="fetchCivitai()" class="secondary"><i class="fas fa-download"></i> Fetch</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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-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="{{ '/loras_static/previews/' + lora.preview_url }}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
{% else %}
|
|
<img src="{{ ('/loras_static/previews/' + 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_name }}')"></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_name }}', '{{ lora.folder }}')"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/loras_static/js/script.js" defer></script>
|
|
</body>
|
|
</html> |