feat(web): update ui

web/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "PUBLIC_API_ENDPOINT= vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

web/src/lib/Figure.svelte

@@ -9,9 +9,14 @@
 	 */
 	export let title;
 	/**
-	 * @type {any}
+	 * @type {Array<string>}
 	 */
-	export let content;
+	export let tags = [];
+
+	/**
+	 * @type {Array<{key: string, source: string, value: any}>}
+	 */
+	export let metadata_entries = [];
 	/**
 	 * @type {any}
 	 */
@@ -27,13 +32,21 @@
 </script>
 
 <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
-	<div class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group">
+	<div
+		class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group"
+	>
 		<!-- Button container -->
 		<div class="group">
-			<button class="absolute left-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100" on:click={onPrevious}>
+			<button
+				class="absolute left-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100"
+				on:click={onPrevious}
+			>
 				&lt;
 			</button>
-			<button class="absolute right-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100" on:click={onNext}>
+			<button
+				class="absolute right-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100"
+				on:click={onNext}
+			>
 				&gt;
 			</button>
 			<!-- Your modal content goes here -->
@@ -49,11 +62,26 @@
 				<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
 					{title}
 				</p>
-			<p class="mt-2 text-gray-600">
+				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">TAGS</div>
-				{#each content as item}
+				<div class="mt-2 text-gray-600">
-					<span class="text-base text-gray-500 inline-block">{item}</span>
+					{#each tags as tag}
+						<span class="text-base text-gray-500 inline-block">{tag}</span>
 					{/each}
-			</p>
+				</div>
+				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">METADATA</div>
+				<div class="mt-2 text-gray-600">
+					{#each metadata_entries as entry}
+						<div class="mb-2">
+							<span class="font-bold">{entry.key}:</span>
+							{#if typeof entry.value === 'object'}
+								<pre class="bg-gray-100 p-2 rounded overflow-y-auto max-h-96">{JSON.stringify(entry.value, null, 2)}</pre>
+							{:else}
+								{entry.value}
+							{/if}
+							<span class="text-sm text-gray-500">({entry.source})</span>
+						</div>
+					{/each}
+				</div>
 			</div>
 		</div>
 		<div class="absolute top-0 right-0 pt-4 pr-4">
@@ -64,5 +92,4 @@
 			</button>
 		</div>
 	</div>
-  </div>
+</div>
-  

web/src/routes/+page.svelte

@@ -1,8 +1,6 @@
 <script>
-  import Figure from "$lib/Figure.svelte";
+	import Figure from '$lib/Figure.svelte';
-
+	import { PUBLIC_API_ENDPOINT } from '$env/static/public';
-
-
 
 	let searchString = '';
 	/**
@@ -11,7 +9,7 @@
 	let searchResults = [];
 	let isLoading = false;
 	let debounceTimer;
-  let showModal= false;
+	let showModal = false;
 	let selectedImage = 0;
 
 	const debounceDelay = 300;
@@ -23,7 +21,8 @@
 		isLoading = true;
 
 		try {
-      const response = await fetch(`http://localhost:8080/search?q=${encodeURIComponent(query)}`);
+			const apiEndpoint = typeof PUBLIC_API_ENDPOINT !== 'undefined' ? PUBLIC_API_ENDPOINT : window.location.origin;
+			const response = await fetch(`${apiEndpoint}/search?q=${encodeURIComponent(query)}`);
 			if (!response.ok) {
 				throw new Error('Network response was not ok');
 			}
@@ -101,20 +100,32 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="container mx-auto my-10">
-  <input type="text" class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500" bind:value={searchString} placeholder="Type to search..." />
+	<input
+		type="text"
+		class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500"
+		bind:value={searchString}
+		placeholder="Type to search..."
+	/>
 </div>
 
 <div class="container mx-auto">
-{#if isLoading}
+	{#if isLoading}
 		<p>Loading...</p>
-{:else if searchString}
+	{:else if searchString}
 		<div class="grid grid-cols-4 gap-4">
 			{#each searchResults as item, index}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out" on:click={() => openModal(index)}>
+				<div
+					class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out"
+					on:click={() => openModal(index)}
+				>
 					<figure class="px-5 pt-5">
-          <img class="w-full h-48 object-cover" src={`http://localhost:8080/files/${item.filepath}`} alt="" />
+						<img
+							class="w-full h-48 object-cover"
+							src={`http://localhost:8080/files/${item.filepath}`}
+							alt=""
+						/>
 					</figure>
 					<div class="p-4">
 						<h2 class="text-lg font-bold mb-2">{filename(item.filepath)}</h2>
@@ -123,16 +134,17 @@
 				</div>
 			{/each}
 		</div>
-{:else}
+	{:else}
 		<p>Type something to start searching...</p>
-{/if}
+	{/if}
 </div>
 
-
 {#if searchResults.length && showModal}
 	<Figure
 		image={`http://localhost:8080/files/${searchResults[selectedImage].filepath}`}
 		title={filename(searchResults[selectedImage].filepath)}
+		tags={searchResults[selectedImage].tags}
+		metadata_entries={searchResults[selectedImage].metadata_entries}
 		content={''}
 		onClose={closeModal}
 		onNext={() => openModal((selectedImage + 1) % searchResults.length)}
@@ -145,7 +157,7 @@
 		<p class="mt-2 text-sm leading-6 text-slate-500">© 2023 Labs Inc. All rights reserved.</p>
 		<div class="mt-2 flex items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
 			<a href="/privacy-policy">Privacy policy</a>
-      <div class="h-4 w-px bg-slate-500/20"></div>
+			<div class="h-4 w-px bg-slate-500/20" />
 			<a href="/changelog">Changelog</a>
 		</div>
 	</div>