Spaces:
Running
Running
File size: 2,322 Bytes
aaf834a 8cec3fe aaf834a 8cec3fe d958e42 8cec3fe d958e42 8cec3fe aaf834a 8cec3fe aaf834a 8cec3fe aaf834a 8cec3fe aaf834a 8cec3fe aaf834a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <script>
/** @type {{ vision: ReturnType<import('../lib/stores/vision.svelte.js').createVisionStore> }} */
let { vision } = $props();
</script>
{#if vision.loadingModels.length > 0}
<div class="loader-overlay">
<div class="loader-card">
{#each vision.loadingModels as model}
<div class="model-entry">
<h3>Loading Model</h3>
<p class="subtitle">{model.name}</p>
{#if model.progress !== null}
<div class="progress-bar">
<div class="progress-fill" style="width: {model.progress}%"></div>
</div>
<span class="percent">{model.progress}%</span>
{:else}
<div class="progress-bar">
<div class="progress-fill indeterminate"></div>
</div>
<span class="percent">Preparing...</span>
{/if}
</div>
{/each}
</div>
</div>
{/if}
<style>
.loader-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
animation: fadeIn 0.3s ease-out;
}
.loader-card {
background: rgba(30, 30, 30, 0.95);
border-radius: 16px;
padding: 24px 32px;
text-align: center;
color: #fff;
max-width: 320px;
width: 90%;
display: flex;
flex-direction: column;
gap: 16px;
}
.model-entry {
display: flex;
flex-direction: column;
gap: 4px;
}
h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.subtitle {
margin: 0 0 8px;
font-size: 0.75rem;
color: #999;
}
.progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #3b82f6;
border-radius: 3px;
transition: width 0.3s ease;
}
.progress-fill.indeterminate {
width: 30%;
animation: slide 1.5s ease-in-out infinite;
}
.percent {
display: block;
margin-top: 4px;
font-size: 0.8rem;
color: #aaa;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
</style>
|