Commit

Pages/Recommender App.py

@@ -88,154 +88,350 @@ def recommend(anime, genre=None):
 
 # Function to display the top 8 animes with the highest rating
 def top_animes():
+    style_for_page = """
+    <style>
+    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    border-radius: 10px;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
+    border-radius: 15px;
+    text-align: center;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    </style>
+    """
+    st.markdown(style_for_page, unsafe_allow_html=True)
+
     top8 = anime_data.sort_values("score", ascending=False).head(8)
 
     with st.container():
-        col1, col2, col3, col4 = st.columns(4)
-        with col1:
-            st.write(f"[{top8.iloc[0].title}]({top8.iloc[0].anime_url})")
+        col0, col1, col2, col3 = st.columns(4)
+        with col0:
+            st.link_button(
+                f"{top8.iloc[0].title}",
+                f"{top8.iloc[0].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[0].poster)
-        with col2:
-            st.write(f"[{top8.iloc[1].title}]({top8.iloc[1].anime_url})")
+        with col1:
+            st.link_button(
+                f"{top8.iloc[1].title}",
+                f"{top8.iloc[1].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[1].poster)
-        with col3:
-            st.write(f"[{top8.iloc[2].title}]({top8.iloc[2].anime_url})")
+        with col2:
+            st.link_button(
+                f"{top8.iloc[2].title}",
+                f"{top8.iloc[2].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[2].poster)
-        with col4:
-            st.write(f"[{top8.iloc[3].title}]({top8.iloc[3].anime_url})")
+        with col3:
+            st.link_button(
+                f"{top8.iloc[3].title}",
+                f"{top8.iloc[3].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[3].poster)
 
     st.divider()
 
     with st.container():
-        col5, col6, col7, col8 = st.columns(4)
-        with col5:
-            st.write(f"[{top8.iloc[4].title}]({top8.iloc[4].anime_url})")
+        col4, col5, col6, col7 = st.columns(4)
+        with col4:
+            st.link_button(
+                f"{top8.iloc[4].title}",
+                f"{top8.iloc[4].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[4].poster)
-        with col6:
-            st.write(f"[{top8.iloc[5].title}]({top8.iloc[5].anime_url})")
+        with col5:
+            st.link_button(
+                f"{top8.iloc[5].title}",
+                f"{top8.iloc[5].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[5].poster)
-        with col7:
-            st.write(f"[{top8.iloc[6].title}]({top8.iloc[6].anime_url})")
+        with col6:
+            st.link_button(
+                f"{top8.iloc[6].title}",
+                f"{top8.iloc[6].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[6].poster)
-        with col8:
-            st.write(f"[{top8.iloc[7].title}]({top8.iloc[7].anime_url})")
+        with col7:
+            st.link_button(
+                f"{top8.iloc[7].title}",
+                f"{top8.iloc[7].anime_url}",
+                use_container_width=True,
+            )
             st.image(top8.iloc[7].poster)
 
 
 # Function to display the top 8 animes for user given genre
 def top_animes_genres(genre_select):
+    style_for_page = """
+    <style>
+    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    border-radius: 10px;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
+    border-radius: 15px;
+    text-align: center;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    </style>
+    """
+    st.markdown(style_for_page, unsafe_allow_html=True)
+
     top_8_genre = anime_data[
         anime_data["genres"].str.contains(genre_select)
     ].sort_values("score", ascending=False)[:8]
-    col1, col2, col3, col4 = st.columns(4)
-    with col1:
-        st.write(f"[{top_8_genre.iloc[0].title}]({top_8_genre.iloc[0].anime_url})")
+    col0, col1, col2, col3 = st.columns(4)
+    with col0:
+        st.link_button(
+            f"{top_8_genre.iloc[0].title}",
+            f"{top_8_genre.iloc[0].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[0].poster)
-    with col2:
-        st.write(f"[{top_8_genre.iloc[1].title}]({top_8_genre.iloc[1].anime_url})")
+    with col1:
+        st.link_button(
+            f"{top_8_genre.iloc[1].title}",
+            f"{top_8_genre.iloc[1].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[1].poster)
-    with col3:
-        st.write(f"[{top_8_genre.iloc[2].title}]({top_8_genre.iloc[2].anime_url})")
+    with col2:
+        st.link_button(
+            f"{top_8_genre.iloc[2].title}",
+            f"{top_8_genre.iloc[2].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[2].poster)
-    with col4:
-        st.write(f"[{top_8_genre.iloc[3].title}]({top_8_genre.iloc[3].anime_url})")
+    with col3:
+        st.link_button(
+            f"{top_8_genre.iloc[3].title}",
+            f"{top_8_genre.iloc[3].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[3].poster)
 
     st.divider()
 
-    col5, col6, col7, col8 = st.columns(4)
-    with col5:
-        st.write(f"[{top_8_genre.iloc[4].title}]({top_8_genre.iloc[4].anime_url})")
+    col4, col5, col6, col7 = st.columns(4)
+    with col4:
+        st.link_button(
+            f"{top_8_genre.iloc[4].title}",
+            f"{top_8_genre.iloc[4].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[4].poster)
-    with col6:
-        st.write(f"[{top_8_genre.iloc[5].title}]({top_8_genre.iloc[5].anime_url})")
+    with col5:
+        st.link_button(
+            f"{top_8_genre.iloc[5].title}",
+            f"{top_8_genre.iloc[5].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[5].poster)
-    with col7:
-        st.write(f"[{top_8_genre.iloc[6].title}]({top_8_genre.iloc[6].anime_url})")
+    with col6:
+        st.link_button(
+            f"{top_8_genre.iloc[6].title}",
+            f"{top_8_genre.iloc[6].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[6].poster)
-    with col8:
-        st.write(f"[{top_8_genre.iloc[7].title}]({top_8_genre.iloc[7].anime_url})")
+    with col7:
+        st.link_button(
+            f"{top_8_genre.iloc[7].title}",
+            f"{top_8_genre.iloc[7].anime_url}",
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[7].poster)
 
 
 # Function to display the top 8 animes with user given anime name for all genres
 def top_animes_custom(anime_select):
+    style_for_page = """
+    <style>
+    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    border-radius: 10px;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
+    border-radius: 15px;
+    text-align: center;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    </style>
+    """
+    st.markdown(style_for_page, unsafe_allow_html=True)
+
     (
         recommended_anime_names,
         recommended_anime_posters,
         recommended_anime_urls,
     ) = recommend(anime_select)
     with st.container():
-        col1, col2, col3, col4 = st.columns(4)
-        with col1:
-            st.write(f"[{recommended_anime_names[0]}]({recommended_anime_urls[0]})")
+        col0, col1, col2, col3 = st.columns(4)
+        with col0:
+            st.link_button(
+                f"{recommended_anime_names[0]}",
+                f"{recommended_anime_urls[0]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[0])
-        with col2:
-            st.write(f"[{recommended_anime_names[1]}]({recommended_anime_urls[1]})")
+        with col1:
+            st.link_button(
+                f"{recommended_anime_names[1]}",
+                f"{recommended_anime_urls[1]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[1])
-        with col3:
-            st.write(f"[{recommended_anime_names[2]}]({recommended_anime_urls[2]})")
+        with col2:
+            st.link_button(
+                f"{recommended_anime_names[2]}",
+                f"{recommended_anime_urls[2]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[2])
-        with col4:
-            st.write(f"[{recommended_anime_names[3]}]({recommended_anime_urls[3]})")
+        with col3:
+            st.link_button(
+                f"{recommended_anime_names[3]}",
+                f"{recommended_anime_urls[3]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[3])
 
     st.divider()
 
     with st.container():
-        col5, col6, col7, col8 = st.columns(4)
-        with col5:
-            st.write(f"[{recommended_anime_names[4]}]({recommended_anime_urls[4]})")
+        col4, col5, col6, col7 = st.columns(4)
+        with col4:
+            st.link_button(
+                f"{recommended_anime_names[4]}",
+                f"{recommended_anime_urls[4]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[4])
-        with col6:
-            st.write(f"[{recommended_anime_names[5]}]({recommended_anime_urls[5]})")
+        with col5:
+            st.link_button(
+                f"{recommended_anime_names[5]}",
+                f"{recommended_anime_urls[5]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[5])
-        with col7:
-            st.write(f"[{recommended_anime_names[6]}]({recommended_anime_urls[6]})")
+        with col6:
+            st.link_button(
+                f"{recommended_anime_names[6]}",
+                f"{recommended_anime_urls[6]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[6])
-        with col8:
-            st.write(f"[{recommended_anime_names[7]}]({recommended_anime_urls[7]})")
+        with col7:
+            st.link_button(
+                f"{recommended_anime_names[7]}",
+                f"{recommended_anime_urls[7]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[7])
 
 
 # Function to display the top 8 animes with user given anime name and genre
 def top_animes_custom_genres(anime_select, genre_select):
+    style_for_page = """
+    <style>
+    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    border-radius: 10px;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
+    border-radius: 15px;
+    text-align: center;
+    }
+    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    </style>
+    """
+    st.markdown(style_for_page, unsafe_allow_html=True)
+
     (
         recommended_anime_names,
         recommended_anime_posters,
         recommended_anime_urls,
     ) = recommend(anime_select, genre_select)
     with st.container():
-        col1, col2, col3, col4 = st.columns(4)
-        with col1:
-            st.write(f"[{recommended_anime_names[0]}]({recommended_anime_urls[0]})")
+        col0, col1, col2, col3 = st.columns(4)
+        with col0:
+            st.link_button(
+                f"{recommended_anime_names[0]}",
+                f"{recommended_anime_urls[0]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[0])
-        with col2:
-            st.write(f"[{recommended_anime_names[1]}]({recommended_anime_urls[1]})")
+        with col1:
+            st.link_button(
+                f"{recommended_anime_names[1]}",
+                f"{recommended_anime_urls[1]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[1])
-        with col3:
-            st.write(f"[{recommended_anime_names[2]}]({recommended_anime_urls[2]})")
+        with col2:
+            st.link_button(
+                f"{recommended_anime_names[2]}",
+                f"{recommended_anime_urls[2]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[2])
-        with col4:
-            st.write(f"[{recommended_anime_names[3]}]({recommended_anime_urls[3]})")
+        with col3:
+            st.link_button(
+                f"{recommended_anime_names[3]}",
+                f"{recommended_anime_urls[3]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[3])
 
     st.divider()
 
     with st.container():
-        col5, col6, col7, col8 = st.columns(4)
-        with col5:
-            st.write(f"[{recommended_anime_names[4]}]({recommended_anime_urls[4]})")
+        col4, col5, col6, col7 = st.columns(4)
+        with col4:
+            st.link_button(
+                f"{recommended_anime_names[4]}",
+                f"{recommended_anime_urls[4]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[4])
-        with col6:
-            st.write(f"[{recommended_anime_names[5]}]({recommended_anime_urls[5]})")
+        with col5:
+            st.link_button(
+                f"{recommended_anime_names[5]}",
+                f"{recommended_anime_urls[5]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[5])
-        with col7:
-            st.write(f"[{recommended_anime_names[6]}]({recommended_anime_urls[6]})")
+        with col6:
+            st.link_button(
+                f"{recommended_anime_names[6]}",
+                f"{recommended_anime_urls[6]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[6])
-        with col8:
-            st.write(f"[{recommended_anime_names[7]}]({recommended_anime_urls[7]})")
+        with col7:
+            st.link_button(
+                f"{recommended_anime_names[7]}",
+                f"{recommended_anime_urls[7]}",
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[7])
 
 
@@ -243,18 +439,19 @@ def top_animes_custom_genres(anime_select, genre_select):
 def recommender_page():
     style_for_page = """
     <style>
-    div.css-1v0mbdj.etr89bj1>img {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
-    border-radius: 1rem;
+    button.st-emotion-cache-c766yy.ef3psqc11 {
+    border-radius: 10px;    
+    }
+
+    button.st-emotion-cache-c766yy.ef3psqc11:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
     }
     </style>
     """
     st.markdown(style_for_page, unsafe_allow_html=True)
 
-    st.title("Anime Recommendation System")
+    st.title("Anime Recommendation System :ninja:")
 
     anime_list = anime_data["title"].tolist()
     anime_list.sort()

app.py

@@ -27,26 +27,8 @@ show_pages(
 def home_page():
     style_for_page = """
     <style>
-    div.css-1v0mbdj.etr89bj1>img {
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
-    border-radius: 5rem;
-    padding: 4rem;
-    justify-content: left;}
-
-    div.css-k7vsyb.e16nr0p31>h1 {
-    font-family: Poppins, sans-serif;
-    }
-
-    div.css-14xtw13.e8zbici0 {
-        margin-right: 2rem;
-        scale: 1.15;
-    }
-
-    div.css-nahz7x.e16nr0p34>p {
-        font-family: Poppins, sans-serif;
-        font-size: 1.05rem;
+    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    border-radius: 50px;
     }
     </style>
     """
@@ -60,7 +42,8 @@ def home_page():
         "Explore a world of anime and find personalized recommendations based on your anime preferences."
     )
     img = Image.open(r"animes.jpg")
-    st.image(img, use_column_width=True, caption="Anime Characters")
+    with st.container():
+        st.image(img, width=950, caption="Anime Characters")
     st.write(
         "Get started by selecting your favorite anime and let the recommendation system do the rest!"
     )