mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
5a8a402fdc
- Updated LoraRoutes to better check cache initialization status and handle loading states. - Added logging for successful cache loading and error handling for cache retrieval failures. - Enhanced base.html and loras.html templates to display a loading spinner and initialization notice during cache setup. - Improved user experience by ensuring the loading notice is displayed appropriately based on initialization state.
153 lines
5.4 KiB
HTML
153 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>{% block title %}LoRA Manager{% endblock %}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/loras_static/css/style.css">
|
|
{% block page_css %}{% endblock %}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
<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">
|
|
|
|
<!-- 预加载关键资源 -->
|
|
<link rel="preload" href="/loras_static/css/style.css" as="style">
|
|
{% block preload %}{% endblock %}
|
|
|
|
<!-- 优化字体加载 -->
|
|
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2"
|
|
as="font" type="font/woff2" crossorigin>
|
|
|
|
<!-- 添加性能监控 -->
|
|
<script>
|
|
performance.mark('page-start');
|
|
window.addEventListener('load', () => {
|
|
performance.mark('page-end');
|
|
performance.measure('page-load', 'page-start', 'page-end');
|
|
});
|
|
</script>
|
|
|
|
<!-- 添加安全相关的 meta 标签 -->
|
|
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
|
|
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
|
|
|
|
<!-- 添加资源加载策略 -->
|
|
<link rel="preconnect" href="https://civitai.com">
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
|
|
|
|
<!-- Add styles for initialization notice -->
|
|
{% if is_initializing %}
|
|
<style>
|
|
.initialization-notice {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
z-index: 9999;
|
|
margin-top: 0;
|
|
border-radius: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
}
|
|
.notice-content {
|
|
background-color: rgba(30, 30, 30, 0.9);
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
|
max-width: 500px;
|
|
width: 80%;
|
|
}
|
|
.loading-spinner {
|
|
border: 5px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top: 5px solid #fff;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 auto 20px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
|
|
<script>
|
|
// 计算滚动条宽度并设置CSS变量
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const scrollDiv = document.createElement('div');
|
|
scrollDiv.style.cssText = 'width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px;';
|
|
document.body.appendChild(scrollDiv);
|
|
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
|
document.body.removeChild(scrollDiv);
|
|
document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
|
|
});
|
|
</script>
|
|
{% block head_scripts %}{% endblock %}
|
|
</head>
|
|
|
|
<body data-page="{% block page_id %}base{% endblock %}">
|
|
{% if is_initializing %}
|
|
<div class="initialization-notice">
|
|
<div class="notice-content">
|
|
<div class="loading-spinner"></div>
|
|
<h2>{% block init_title %}Initializing{% endblock %}</h2>
|
|
<p>{% block init_message %}Scanning and building cache. This may take a few minutes...{% endblock %}</p>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% include 'components/header.html' %}
|
|
|
|
<div class="page-content">
|
|
{% include 'components/modals.html' %}
|
|
{% include 'components/loading.html' %}
|
|
{% include 'components/context_menu.html' %}
|
|
{% block additional_components %}{% endblock %}
|
|
|
|
<div class="container">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
{% block overlay %}{% endblock %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block main_script %}{% endblock %}
|
|
|
|
{% if is_initializing %}
|
|
<script>
|
|
// 检查初始化状态并设置自动刷新
|
|
async function checkInitStatus() {
|
|
try {
|
|
const response = await fetch('{% block init_check_url %}/api/loras?page=1&page_size=1{% endblock %}');
|
|
if (response.ok) {
|
|
// 如果成功获取数据，说明初始化完成，刷新页面
|
|
window.location.reload();
|
|
} else {
|
|
// 如果还未完成，继续轮询
|
|
setTimeout(checkInitStatus, 2000); // 每2秒检查一次
|
|
}
|
|
} catch (error) {
|
|
// 如果出错，继续轮询
|
|
setTimeout(checkInitStatus, 2000);
|
|
}
|
|
}
|
|
|
|
// 启动状态检查
|
|
setTimeout(checkInitStatus, 1000); // 给页面完全加载的时间
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% block additional_scripts %}{% endblock %}
|
|
</body>
|
|
|
|
</html>
|