Add vector search score to the vector search results

Author: cbullinger

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;

mflix/client/app/components/MovieCard/MovieCard.tsx

@@ -69,6 +69,11 @@ export default function MovieCard({ movie, isSelected = false, onSelectionChange
         {movie.year && (
           <p className={movieStyles.movieYear}>({movie.year})</p>
         )}
+        {movie.score !== undefined && (
+          <p className={movieStyles.vectorScore}>
+            🎯 Vector Score: {movie.score.toFixed(4)}
+          </p>
+        )}
         {movie.imdb?.rating && (
           <p className={movieStyles.movieRating}>⭐ {movie.imdb.rating}/10</p>
         )}

mflix/client/app/lib/api.ts

@@ -725,6 +725,8 @@ export async function vectorSearchMovies(searchParams: {
         genres: item.genres || [],
         directors: item.directors || [],
         cast: item.cast || [],
+        // Preserve the vector search score for display in UI
+        score: item.score,
         // Add default values for fields not included in VectorSearchResult
         fullplot: undefined,
         released: undefined,

mflix/client/app/types/movie.ts

@@ -51,6 +51,8 @@ export interface Movie {
   };
   metacritic?: number;
   type?: string;
+  /** Vector search score (only present in vector search results) */
+  score?: number;
 }
 
 /**