diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 753f831..ec784c7 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,5 +1,6 @@ + +
+
+

Output Folders

+ +
+ + {#if loading} +

Loading...

+ {:else if error} +

{error}

+ {:else if folders.length === 0} +

No output folders yet

+ {:else} + + +
+ +
+ {/if} +
+ + diff --git a/frontend/src/lib/components/ProcessingControls.svelte b/frontend/src/lib/components/ProcessingControls.svelte index 5c65934..0afe604 100644 --- a/frontend/src/lib/components/ProcessingControls.svelte +++ b/frontend/src/lib/components/ProcessingControls.svelte @@ -6,11 +6,35 @@ let dateFrom = $state(''); let dateTo = $state(''); let pollInterval = $state(null); + let assetCount = $state(null); + let loadingCount = $state(false); let isRunning = $derived( jobStatus === 'running' || jobStatus === 'compiling_video' || jobStatus === 'cancelling' ); + // Fetch asset count when personId changes + $effect(() => { + if (personId) { + fetchAssetCount(personId); + } + }); + + async function fetchAssetCount(id) { + loadingCount = true; + assetCount = null; + try { + const res = await fetch(`/api/people/${encodeURIComponent(id)}/asset-count`); + if (res.ok) { + assetCount = await res.json(); + } + } catch (e) { + console.error('Failed to fetch asset count:', e); + } finally { + loadingCount = false; + } + } + async function startProcessing() { try { const res = await fetch('/api/start', { @@ -95,9 +119,21 @@

Create Timelapse

-

- Selected: {personName || 'Unnamed'} -

+
+ + Selected: {personName || 'Unnamed'} + + {#if loadingCount} + Loading images... + {:else if assetCount} + + {assetCount.assets_with_faces} images with face data + {#if assetCount.total_assets !== assetCount.assets_with_faces} + ({assetCount.total_assets} total) + {/if} + + {/if} +