Add initialization handling for LoRA page with loading state

- Implement dynamic initialization detection in lora_routes
- Add initialization notice template with loading spinner
- Create CSS styles for initialization notice
- Add client-side script to auto-refresh page when initialization completes
This commit is contained in:
Will Miao
2025-02-04 19:44:23 +08:00
parent 78f16ad651
commit 7fb7e2aa2e
3 changed files with 92 additions and 11 deletions

View File

@@ -42,14 +42,46 @@
{% include 'components/loading.html' %}
<div class="container">
{% include 'components/controls.html' %}
<!-- Lora卡片容器 -->
<div class="card-grid" id="loraGrid">
<!-- Cards will be dynamically inserted here -->
{% if is_initializing %}
<div class="initialization-notice">
<div class="notice-content">
<div class="loading-spinner"></div>
<h2>Initializing LoRA Manager</h2>
<p>Scanning and building LoRA cache. This may take a few minutes...</p>
</div>
</div>
{% else %}
{% include 'components/controls.html' %}
<!-- Lora卡片容器 -->
<div class="card-grid" id="loraGrid">
<!-- Cards will be dynamically inserted here -->
</div>
{% endif %}
</div>
<script type="module" src="/loras_static/js/main.js"></script>
<script>
// 检查初始化状态并设置自动刷新
{% if is_initializing %}
async function checkInitStatus() {
try {
const response = await fetch('/api/loras?page=1&page_size=1');
if (response.ok) {
// 如果成功获取数据,说明初始化完成,刷新页面
window.location.reload();
} else {
// 如果还未完成,继续轮询
setTimeout(checkInitStatus, 2000); // 每2秒检查一次
}
} catch (error) {
// 如果出错,继续轮询
setTimeout(checkInitStatus, 2000);
}
}
// 启动状态检查
checkInitStatus();
{% endif %}
</script>
</body>
</html>