Commit

Pages/Recommender App.py

@@ -91,19 +91,26 @@ def top_animes():
     style_for_page = """
     <style>
     div.st-emotion-cache-1v0mbdj.e115fcil1>img {
-    border-radius: 10px;
+    border-radius: 25px;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
-    border-radius: 15px;
+    div.st-emotion-cache-1012qpg.e1nzilvr5 {
     text-align: center;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0>div>p {
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p {
     font-weight: 600;
+    text-decoration: none;
+    border: 3px solid #607985;
+    border-radius: 10px;
+    text-color: #607985;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
-    scale: 1.05;
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p:hover {
+    scale: 1.10;
     transition-duration: 0.3s;
     }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p>a {
+    text-decoration: none;
+    color: #607985;
+    }
     </style>
     """
     st.markdown(style_for_page, unsafe_allow_html=True)
@@ -113,16 +120,16 @@ def top_animes():
     with st.container():
         col0, col1, col2, col3 = st.columns(4)
         with col0:
-            st.write("[top8.iloc[0].title](top8.iloc[0].url)")
+            st.write(f"[{top8.iloc[0].title}]({top8.iloc[0].anime_url})")
             st.image(top8.iloc[0].poster, use_column_width=True)
         with col1:
-            st.write("")
+            st.write(f"[{top8.iloc[1].title}]({top8.iloc[1].anime_url})")
             st.image(top8.iloc[1].poster, use_column_width=True)
         with col2:
-            st.write("")
+            st.write(f"[{top8.iloc[2].title}]({top8.iloc[2].anime_url})")
             st.image(top8.iloc[2].poster, use_column_width=True)
         with col3:
-            st.write("")
+            st.write(f"[{top8.iloc[3].title}]({top8.iloc[3].anime_url})")
             st.image(top8.iloc[3].poster, use_column_width=True)
 
     st.divider()
@@ -130,16 +137,16 @@ def top_animes():
     with st.container():
         col4, col5, col6, col7 = st.columns(4)
         with col4:
-            st.write("")
+            st.write(f"[{top8.iloc[4].title}]({top8.iloc[4].anime_url})")
             st.image(top8.iloc[4].poster, use_column_width=True)
         with col5:
-            st.write("")
+            st.write(f"[{top8.iloc[5].title}]({top8.iloc[5].anime_url})")
             st.image(top8.iloc[5].poster, use_column_width=True)
         with col6:
-            st.write("")
+            st.write(f"[{top8.iloc[6].title}]({top8.iloc[6].anime_url})")
             st.image(top8.iloc[6].poster, use_column_width=True)
         with col7:
-            st.write("")
+            st.write(f"[{top8.iloc[7].title}]({top8.iloc[7].anime_url})")
             st.image(top8.iloc[7].poster, use_column_width=True)
 
 
@@ -148,19 +155,26 @@ def top_animes_genres(genre_select):
     style_for_page = """
     <style>
     div.st-emotion-cache-1v0mbdj.e115fcil1>img {
-    border-radius: 10px;
+    border-radius: 25px;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
-    border-radius: 15px;
+    div.st-emotion-cache-1012qpg.e1nzilvr5 {
     text-align: center;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0>div>p {
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p {
     font-weight: 600;
-    }    
-    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
-    scale: 1.05;
+    text-decoration: none;
+    border: 3px solid #607985;
+    border-radius: 10px;
+    text-color: #607985;
+    }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p:hover {
+    scale: 1.10;
     transition-duration: 0.3s;
     }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p>a {
+    text-decoration: none;
+    color: #607985;
+    }
     </style>
     """
     st.markdown(style_for_page, unsafe_allow_html=True)
@@ -170,25 +184,33 @@ def top_animes_genres(genre_select):
     ].sort_values("score", ascending=False)[:8]
     col0, col1, col2, col3 = st.columns(4)
     with col0:
-        st.write("")       st.image(top_8_genre.iloc[0].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[0].title}]({top_8_genre.iloc[0].anime_url})")
+        st.image(top_8_genre.iloc[0].poster, use_column_width=True)
     with col1:
-        st.write("")       st.image(top_8_genre.iloc[1].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[1].title}]({top_8_genre.iloc[1].anime_url})")
+        st.image(top_8_genre.iloc[1].poster, use_column_width=True)
     with col2:
-        st.write("")       st.image(top_8_genre.iloc[2].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[2].title}]({top_8_genre.iloc[2].anime_url})")
+        st.image(top_8_genre.iloc[2].poster, use_column_width=True)
     with col3:
-        st.write("")       st.image(top_8_genre.iloc[3].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[3].title}]({top_8_genre.iloc[3].anime_url})")
+        st.image(top_8_genre.iloc[3].poster, use_column_width=True)
 
     st.divider()
 
     col4, col5, col6, col7 = st.columns(4)
     with col4:
-        st.write("")       st.image(top_8_genre.iloc[4].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[4].title}]({top_8_genre.iloc[4].anime_url})")
+        st.image(top_8_genre.iloc[4].poster, use_column_width=True)
     with col5:
-        st.write("")       st.image(top_8_genre.iloc[5].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[5].title}]({top_8_genre.iloc[5].anime_url})")
+        st.image(top_8_genre.iloc[5].poster, use_column_width=True)
     with col6:
-        st.write("")       st.image(top_8_genre.iloc[6].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[6].title}]({top_8_genre.iloc[6].anime_url})")
+        st.image(top_8_genre.iloc[6].poster, use_column_width=True)
     with col7:
-        st.write("")       st.image(top_8_genre.iloc[7].poster, use_column_width=True)
+        st.write(f"[{top_8_genre.iloc[7].title}]({top_8_genre.iloc[7].anime_url})")
+        st.image(top_8_genre.iloc[7].poster, use_column_width=True)
 
 
 # Function to display the top 8 animes with user given anime name for all genres
@@ -196,19 +218,26 @@ def top_animes_custom(anime_select):
     style_for_page = """
     <style>
     div.st-emotion-cache-1v0mbdj.e115fcil1>img {
-    border-radius: 10px;
+    border-radius: 25px;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
-    border-radius: 15px;
+    div.st-emotion-cache-1012qpg.e1nzilvr5 {
     text-align: center;
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0>div>p {
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p {
     font-weight: 600;
-    }    
-    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
-    scale: 1.05;
+    text-decoration: none;
+    border: 3px solid #607985;
+    border-radius: 10px;
+    text-color: #607985;
+    }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p:hover {
+    scale: 1.10;
     transition-duration: 0.3s;
     }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p>a {
+    text-decoration: none;
+    color: #607985;
+    }
     </style>
     """
     st.markdown(style_for_page, unsafe_allow_html=True)
@@ -221,16 +250,16 @@ def top_animes_custom(anime_select):
     with st.container():
         col0, col1, col2, col3 = st.columns(4)
         with col0:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[0]}]({recommended_anime_urls[0]})")
             st.image(recommended_anime_posters[0], use_column_width=True)
         with col1:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[1]}]({recommended_anime_urls[1]})")
             st.image(recommended_anime_posters[1], use_column_width=True)
         with col2:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[2]}]({recommended_anime_urls[2]})")
             st.image(recommended_anime_posters[2], use_column_width=True)
         with col3:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[3]}]({recommended_anime_urls[3]})")
             st.image(recommended_anime_posters[3], use_column_width=True)
 
     st.divider()
@@ -238,16 +267,16 @@ def top_animes_custom(anime_select):
     with st.container():
         col4, col5, col6, col7 = st.columns(4)
         with col4:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[4]}]({recommended_anime_urls[4]})")
             st.image(recommended_anime_posters[4], use_column_width=True)
         with col5:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[5]}]({recommended_anime_urls[5]})")
             st.image(recommended_anime_posters[5], use_column_width=True)
         with col6:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[6]}]({recommended_anime_urls[6]})")
             st.image(recommended_anime_posters[6], use_column_width=True)
         with col7:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[7]}]({recommended_anime_urls[7]})")
             st.image(recommended_anime_posters[7], use_column_width=True)
 
 
@@ -256,7 +285,7 @@ def top_animes_custom_genres(anime_select, genre_select):
     style_for_page = """
     <style>
     div.st-emotion-cache-1v0mbdj.e115fcil1>img {
-    border-radius: 10px;
+    border-radius: 25px;
     }
     a.st-emotion-cache-1lbx6hs.e16zdaao0 {
     border-radius: 15px;
@@ -269,6 +298,24 @@ def top_animes_custom_genres(anime_select, genre_select):
     scale: 1.05;
     transition-duration: 0.3s;
     }
+    div.st-emotion-cache-1012qpg.e1nzilvr5 {
+    text-align: center;
+    }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p {
+    font-weight: 600;
+    text-decoration: none;
+    border: 3px solid #607985;
+    border-radius: 10px;
+    text-color: #607985;
+    }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p:hover {
+    scale: 1.10;
+    transition-duration: 0.3s;
+    }
+    div.st-emotion-cache-1012qpg.e1nzilvr5>p>a {
+    text-decoration: none;
+    color: #607985;
+    }
     </style>
     """
     st.markdown(style_for_page, unsafe_allow_html=True)
@@ -281,16 +328,16 @@ def top_animes_custom_genres(anime_select, genre_select):
     with st.container():
         col0, col1, col2, col3 = st.columns(4)
         with col0:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[0]}]({recommended_anime_urls[0]})")
             st.image(recommended_anime_posters[0], use_column_width=True)
         with col1:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[1]}]({recommended_anime_urls[1]})")
             st.image(recommended_anime_posters[1], use_column_width=True)
         with col2:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[2]}]({recommended_anime_urls[2]})")
             st.image(recommended_anime_posters[2], use_column_width=True)
         with col3:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[3]}]({recommended_anime_urls[3]})")
             st.image(recommended_anime_posters[3], use_column_width=True)
 
     st.divider()
@@ -298,16 +345,16 @@ def top_animes_custom_genres(anime_select, genre_select):
     with st.container():
         col4, col5, col6, col7 = st.columns(4)
         with col4:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[4]}]({recommended_anime_urls[4]})")
             st.image(recommended_anime_posters[4], use_column_width=True)
         with col5:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[5]}]({recommended_anime_urls[5]})")
             st.image(recommended_anime_posters[5], use_column_width=True)
         with col6:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[6]}]({recommended_anime_urls[6]})")
             st.image(recommended_anime_posters[6], use_column_width=True)
         with col7:
-            st.write("")          )
+            st.write(f"[{recommended_anime_names[7]}]({recommended_anime_urls[7]})")
             st.image(recommended_anime_posters[7], use_column_width=True)