feat: showing similar images on frontend

backend/models/image.go

@@ -209,7 +209,7 @@ func (m ImageModel) GetSimilar(ctx context.Context, imageId uuid.UUID) ([]model.
 			WHERE embedding IS NOT NULL
 		)
 		SELECT id, image_name 
-		FROM similatiries 
+		FROM similarities 
 		WHERE cosine_similarity > $2
 	`)
 
@@ -223,7 +223,7 @@ func (m ImageModel) GetSimilar(ctx context.Context, imageId uuid.UUID) ([]model.
 
 	for rows.Next() {
 		image := model.Image{}
-		err := rows.Scan(&image)
+		err := rows.Scan(&image.ID, &image.ImageName)
 		if err != nil {
 			return []model.Image{}, err
 		}

frontend/src/Image.tsx

@@ -1,6 +1,6 @@
 import { A, useParams } from "@solidjs/router";
-import { For, Show, type Component } from "solid-js";
-import { base, type UserImage } from "./network";
+import { createResource, For, Show, type Component } from "solid-js";
+import { base, getImageSimilar, type UserImage } from "./network";
 import { useSearchImageContext } from "./contexts/SearchImageContext";
 import { SearchCard } from "./components/search-card/SearchCard";
 import { IconArrowLeft } from "@tabler/icons-solidjs";
@@ -11,6 +11,8 @@ export const Image: Component = () => {
 
     const { imagesWithProperties } = useSearchImageContext();
 
+    const [similarImages] = createResource(() => getImageSimilar(imageId));
+
     const imageProperties = (): UserImage[] | undefined =>
         Object.entries(imagesWithProperties()).find(
             ([id]) => id === imageId,
@@ -43,6 +45,21 @@ export const Image: Component = () => {
                     )}
                 </Show>
             </div>
+            <div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
+                <Show when={similarImages()}>
+                    {(images) => (
+                        <For each={images()}>
+                            {(image) => (
+                                <img
+                                    alt="similar"
+                                    class="col-span-3"
+                                    src={`${base}/image/${image.ID}`}
+                                />
+                            )}
+                        </For>
+                    )}
+                </Show>
+            </div>
         </main>
     );
 };

frontend/src/network/index.ts

@@ -193,6 +193,25 @@ export const getImage = async (imageId: string): Promise<UserImage> => {
     return parse(dataTypeValidator, res);
 };
 
+const similarImageValidator = array(
+    strictObject({
+        ID: pipe(string(), uuid()),
+        ImageName: string(),
+        Image: null_(),
+    }),
+);
+
+export const getImageSimilar = async (
+    imageId: string,
+): Promise<InferOutput<typeof similarImageValidator>> => {
+    const request = getBaseAuthorizedRequest({
+        path: `image-similar/${imageId}`,
+    });
+
+    const res = await fetch(request).then((res) => res.json());
+    return parse(similarImageValidator, res);
+};
+
 export const postLogin = async (email: string): Promise<void> => {
     const request = getBaseRequest({
         path: "login",