diff --git a/mflix/client/app/components/MovieCard/MovieCard.module.css b/mflix/client/app/components/MovieCard/MovieCard.module.css index bfce2e7..c19765d 100644 --- a/mflix/client/app/components/MovieCard/MovieCard.module.css +++ b/mflix/client/app/components/MovieCard/MovieCard.module.css @@ -105,6 +105,17 @@ font-size: 14px; } +.vectorScore { + margin: 0 0 4px 0; + color: #0066cc; + font-size: 13px; + font-weight: 500; + background: #e6f0ff; + padding: 4px 8px; + border-radius: 4px; + display: inline-block; +} + .movieGenres { margin: 0; color: #888; diff --git a/mflix/client/app/components/MovieCard/MovieCard.tsx b/mflix/client/app/components/MovieCard/MovieCard.tsx index 7d9ceaf..1ff2c9d 100644 --- a/mflix/client/app/components/MovieCard/MovieCard.tsx +++ b/mflix/client/app/components/MovieCard/MovieCard.tsx @@ -69,6 +69,11 @@ export default function MovieCard({ movie, isSelected = false, onSelectionChange {movie.year && (
({movie.year})
)} + {movie.score !== undefined && ( ++ 🎯 Vector Score: {movie.score.toFixed(4)} +
+ )} {movie.imdb?.rating && (⭐ {movie.imdb.rating}/10
)} diff --git a/mflix/client/app/lib/api.ts b/mflix/client/app/lib/api.ts index 2d20442..c99c08f 100644 --- a/mflix/client/app/lib/api.ts +++ b/mflix/client/app/lib/api.ts @@ -725,6 +725,7 @@ export async function vectorSearchMovies(searchParams: { genres: item.genres || [], directors: item.directors || [], cast: item.cast || [], + score: item.score, // Add default values for fields not included in VectorSearchResult fullplot: undefined, released: undefined, diff --git a/mflix/client/app/types/movie.ts b/mflix/client/app/types/movie.ts index 360a87b..9f34f7d 100644 --- a/mflix/client/app/types/movie.ts +++ b/mflix/client/app/types/movie.ts @@ -5,7 +5,7 @@ /** * Movie interface for type safety - * Matches the Movie type from the Express backend + * Matches the Movie type from the backend */ export interface Movie { _id: string; @@ -51,11 +51,13 @@ export interface Movie { }; metacritic?: number; type?: string; + // Vector search score (only present in vector search results) + score?: number; } /** * API Response interface for the movies endpoint - * Matches the SuccessResponse type from the Express backend + * Matches the SuccessResponse type from the backend */ export interface MoviesApiResponse { success: boolean;