Update app.py

app.py

@@ -151,7 +151,10 @@ def get_embedding_from_db(conn, table_name, crc32_column, crc32_value, model_nam
     return None
 
 def get_movie_data_from_db(conn, movie_ids):
-    """Получает данные фильмов из таблицы Movies по списку ID."""
+    """
+    Получает данные фильмов из таблицы Movies по списку ID, 
+    включая предположительно URL-адрес постера и рейтинг.
+    """
     movie_data_dict = {}
     try:
         with conn.cursor() as cur:
@@ -161,14 +164,21 @@ def get_movie_data_from_db(conn, movie_ids):
                         'Название', data->>'name',
                         'Год', data->>'year',
                         'Жанры', (SELECT string_agg(genre->>'name', ', ') FROM jsonb_array_elements(data->'genres') AS genre),
-                        'Описание', COALESCE(data->>'description', '')
+                        'Описание', COALESCE(data->>'description', ''),
+                        'Постер', data->'poster'->'previewUrl',
+                        'Рейтинг', data->'rating'->'kp'
                     ) AS prepared_json
                 FROM "{movies_table}"
                 WHERE id IN %s
             """, (tuple(movie_ids),))
             for movie_id, movie_data, prepared_json in cur.fetchall():
-                prepared_string = f"Название: {prepared_json['Название']}\nГод: {prepared_json['Год']}\nЖанры: {prepared_json['Жанры']}\nОписание: {prepared_json['Описание']}"
-                movie_data_dict[movie_id] = (movie_data, prepared_string)
+                prepared_string = (
+                    f"Название: {prepared_json['Название']}\n"
+                    f"Год: {prepared_json['Год']}\n"
+                    f"Жанры: {prepared_json['Жанры']}\n"
+                    f"Описание: {prepared_json['Описание']}"
+                )
+                movie_data_dict[movie_id] = (movie_data, prepared_string, prepared_json)
     except Exception as e:
         logging.error(f"Ошибка при получении данных фильмов из БД: {e}")
     return movie_data_dict
@@ -207,7 +217,7 @@ def rerank_with_api(query, results, top_k, rerank_top_k=None, api_key=None):
 
     documents = []
     for movie_id, _ in results:
-        movie_data, prepared_string = movie_data_dict.get(movie_id, (None, None))
+        movie_data, prepared_string, _ = movie_data_dict.get(movie_id, (None, None, None))
         if movie_data:
             documents.append(prepared_string)
         else:
@@ -344,14 +354,16 @@ def search_movies_internal(query: str, top_k: int = 25, rerank_top_k: Optional[i
         formatted_results = []
         for movie_id, score in reranked_results:
             # Находим данные фильма
-            movie_data, _ = movie_data_dict.get(movie_id, (None, None))
+            movie_data, _, prepared_json = movie_data_dict.get(movie_id, (None, None, None))
             if movie_data:
                 formatted_results.append({
                     "movie_id": movie_id,
-                    "name": movie_data['name'],
-                    "year": movie_data['year'],
-                    "genres": [genre['name'] for genre in movie_data['genres']],
-                    "description": movie_data.get('description', ''),
+                    "name": prepared_json['Название'],
+                    "year": prepared_json['Год'],
+                    "genres": prepared_json['Жанры'],
+                    "description": prepared_json['Описание'],
+                    "poster_preview_url": prepared_json['Постер'],
+                    "rating_kp": prepared_json['Рейтинг'],
                     "relevance_score": score if rerank_success else (
                         movie_data_dict.get(movie_id, (None, None))[1] if movie_data_dict.get(movie_id,(None, None)) is not None else 0.0)  # Сохраняем similarity, если нет реранжировки
                 })
@@ -537,40 +549,80 @@ async def root():
                 gap: 20px;
             }
             .movie-card {
+                position: relative;
                 border-radius: 10px;
                 overflow: hidden;
                 background-color: #111;
                 transition: transform 0.1s ease;
+                cursor: pointer;
             }
             .movie-card:hover,
             .movie-card:focus {
                 transform: scale(1.05);
             }
+            .movie-poster {
+                width: 100%;
+                height: 350px;
+                object-fit: cover;
+            }
             .movie-info {
-                padding: 10px;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
             }
             .movie-title {
+                width: 100%;
+                background-color: #111;
                 font-size: 1.1em;
                 font-weight: bold;
-                margin-bottom: 5px;
+                text-align: center;
+                padding: 10px;
+                box-sizing: border-box;
             }
-            .movie-year {
-                font-size: 0.9em;
+            .top-info {
+                display: flex;
+                justify-content: space-between;
+                padding: 10px;
+            }
+            .movie-year, .movie-rating {
+                font-size: 0.8em;
                 color: #ccc;
-                margin-bottom: 5px;
             }
-            .movie-genres {
-                font-size: 0.9em;
-                margin-bottom: 5px;
+            .movie-details {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.9);
+                z-index: 100;
+                overflow-y: auto;
+            }
+            .movie-details-content {
+                padding: 20px;
+            }
+            .close-button {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background: none;
+                border: none;
+                color: #fff;
+                font-size: 30px;
+                cursor: pointer;
+                z-index: 101;
             }
-            .movie-description {
+            .movie-description-modal {
+                color: #fff;
                 font-size: 0.9em;
                 line-height: 1.4;
-                margin-bottom: 5px;
-            }
-            .relevance-score {
-                font-size: 0.8em;
-                color: #ccc;
+                margin-top: 20px;
             }
 
             @media (min-width: 769px) {
@@ -591,6 +643,9 @@ async def root():
                 .movie-grid {
                     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                 }
+                .movie-poster {
+                    height: 225px;
+                }
                 .logo {
                     font-size: 1.5em;
                 }
@@ -599,6 +654,9 @@ async def root():
                 .movie-grid {
                     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                 }
+                .movie-poster {
+                    height: 180px;
+                }
                 .logo {
                     font-size: 1.3em;
                 }
@@ -621,7 +679,12 @@ async def root():
                 <div class="movie-grid" id="movieGrid"></div>
             </main>
         </div>
-
+        <div id="movieDetails" class="movie-details">
+            <div class="movie-details-content">
+                <button class="close-button" onclick="closeMovieDetails()">×</button>
+                <div id="movieDescription" class="movie-description-modal"></div>
+            </div>
+        </div>
         <script>
             document.getElementById('searchForm').addEventListener('submit', function(event) {
                 event.preventDefault();
@@ -641,15 +704,20 @@ async def root():
                             data.results.forEach(movie => {
                                 const movieCard = document.createElement('div');
                                 movieCard.className = 'movie-card';
+                                const ratingColor = getRatingColor(movie.rating_kp);
                                 movieCard.innerHTML = `
-                                    <div class="movie-info">
-                                        <div class="movie-title">${movie.name}</div>
-                                        <div class="movie-year">${movie.year}</div>
-                                        <div class="movie-genres">${movie.genres.join(', ')}</div>
-                                        <div class="movie-description">${movie.description}</div>
-                                        <div class="relevance-score">Релевантность: ${movie.relevance_score.toFixed(4)}</div>
+                                <img src="${movie.poster_preview_url}" alt="${movie.name}" class="movie-poster">
+                                <div class="movie-info">
+                                    <div class="top-info">
+                                        <span class="movie-year">${movie.year}</span>
+                                        <span class="movie-rating" style="color: ${ratingColor};">${movie.rating_kp}</span>
                                     </div>
+                                    <div class="movie-title">${movie.name}</div>
+                                </div>
                                 `;
+                                movieCard.addEventListener('click', () => {
+                                    openMovieDetails(movie.description);
+                                });
                                 movieGrid.appendChild(movieCard);
                             });
                         } else {
@@ -661,6 +729,25 @@ async def root():
                         movieGrid.innerHTML = '<p>Произошла ошибка при поиске.</p>';
                     });
             }
+            function getRatingColor(rating) {
+                if (rating >= 7) {
+                    return 'green';
+                } else if (rating >= 5) {
+                    return 'orange';
+                } else {
+                    return 'red';
+                }
+            }
+            function openMovieDetails(description) {
+                const movieDetails = document.getElementById('movieDetails');
+                const movieDescription = document.getElementById('movieDescription');
+                movieDescription.textContent = description;
+                movieDetails.style.display = 'block';
+            }
+
+            function closeMovieDetails() {
+                document.getElementById('movieDetails').style.display = 'none';
+            }
         </script>
     </body>
     </html>