diff --git a/backend/models/image.go b/backend/models/image.go index 0f502a2..4194264 100644 --- a/backend/models/image.go +++ b/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 } diff --git a/frontend/src/Image.tsx b/frontend/src/Image.tsx index 0129bbb..079fef5 100644 --- a/frontend/src/Image.tsx +++ b/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 = () => { )} +
+ + {(images) => ( + + {(image) => ( + similar + )} + + )} + +
); }; diff --git a/frontend/src/network/index.ts b/frontend/src/network/index.ts index 2a83c6c..728bfe3 100644 --- a/frontend/src/network/index.ts +++ b/frontend/src/network/index.ts @@ -193,6 +193,25 @@ export const getImage = async (imageId: string): Promise => { return parse(dataTypeValidator, res); }; +const similarImageValidator = array( + strictObject({ + ID: pipe(string(), uuid()), + ImageName: string(), + Image: null_(), + }), +); + +export const getImageSimilar = async ( + imageId: string, +): Promise> => { + 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 => { const request = getBaseRequest({ path: "login",