Refactor CSS class for home page image border

Pages/Recommender App.py

@@ -2,6 +2,7 @@ import streamlit as st
 import pandas as pd
 import pickle
 from ast import literal_eval
+import webbrowser
 
 
 # Importing the dataset
@@ -90,27 +91,25 @@ def recommend(anime, genre=None):
 def top_animes():
     style_for_page = """
     <style>
-    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    .css-c766yy.ef3psqc11 {
+    border-radius: 15px;
+    text-align: center:
+    }
+    .css-c766yy.ef3psqc11:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    .css-1v0mbdj.e115fcil1>img {
     border-radius: 25px;
     }
-    div.st-emotion-cache-1012qpg.e1nzilvr5 {
+    button.css-1rgehwv.ef3psqc11 {
+    border-radius: 15px;
     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;
+    button.css-1rgehwv.ef3psqc11:hover {
+    scale: 1.05;
     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)
@@ -120,16 +119,36 @@ def top_animes():
     with st.container():
         col0, col1, col2, col3 = st.columns(4)
         with col0:
-            st.write(f"[{top8.iloc[0].title}]({top8.iloc[0].anime_url})")
+            st.button(
+                label=f"{top8.iloc[0].title}",
+                key=top8.iloc[0].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[0].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[0].poster, use_column_width=True)
         with col1:
-            st.write(f"[{top8.iloc[1].title}]({top8.iloc[1].anime_url})")
+            st.button(
+                label=f"{top8.iloc[1].title}",
+                key=top8.iloc[1].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[1].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[1].poster, use_column_width=True)
         with col2:
-            st.write(f"[{top8.iloc[2].title}]({top8.iloc[2].anime_url})")
+            st.button(
+                label=f"{top8.iloc[2].title}",
+                key=top8.iloc[2].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[2].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[2].poster, use_column_width=True)
         with col3:
-            st.write(f"[{top8.iloc[3].title}]({top8.iloc[3].anime_url})")
+            st.button(
+                label=f"{top8.iloc[3].title}",
+                key=top8.iloc[3].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[3].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[3].poster, use_column_width=True)
 
     st.divider()
@@ -137,16 +156,36 @@ def top_animes():
     with st.container():
         col4, col5, col6, col7 = st.columns(4)
         with col4:
-            st.write(f"[{top8.iloc[4].title}]({top8.iloc[4].anime_url})")
+            st.button(
+                label=f"{top8.iloc[4].title}",
+                key=top8.iloc[4].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[4].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[4].poster, use_column_width=True)
         with col5:
-            st.write(f"[{top8.iloc[5].title}]({top8.iloc[5].anime_url})")
+            st.button(
+                label=f"{top8.iloc[5].title}",
+                key=top8.iloc[5].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[5].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[5].poster, use_column_width=True)
         with col6:
-            st.write(f"[{top8.iloc[6].title}]({top8.iloc[6].anime_url})")
+            st.button(
+                label=f"{top8.iloc[6].title}",
+                key=top8.iloc[6].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[6].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[6].poster, use_column_width=True)
         with col7:
-            st.write(f"[{top8.iloc[7].title}]({top8.iloc[7].anime_url})")
+            st.button(
+                label=f"{top8.iloc[7].title}",
+                key=top8.iloc[7].title,
+                on_click=lambda: webbrowser.open_new_tab(top8.iloc[7].anime_url),
+                use_container_width=True,
+            )
             st.image(top8.iloc[7].poster, use_column_width=True)
 
 
@@ -154,27 +193,25 @@ def top_animes():
 def top_animes_genres(genre_select):
     style_for_page = """
     <style>
-    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    .css-c766yy.ef3psqc11 {
+    border-radius: 15px;
+    text-align: center:
+    }
+    .css-c766yy.ef3psqc11:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    .css-1v0mbdj.e115fcil1>img {
     border-radius: 25px;
     }
-    div.st-emotion-cache-1012qpg.e1nzilvr5 {
+    button.css-1rgehwv.ef3psqc11 {
+    border-radius: 15px;
     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;
+    button.css-1rgehwv.ef3psqc11:hover {
+    scale: 1.05;
     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)
@@ -184,32 +221,72 @@ def top_animes_genres(genre_select):
     ].sort_values("score", ascending=False)[:8]
     col0, col1, col2, col3 = st.columns(4)
     with col0:
-        st.write(f"[{top_8_genre.iloc[0].title}]({top_8_genre.iloc[0].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[0].title}",
+            key=top_8_genre.iloc[0].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[0].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[0].poster, use_column_width=True)
     with col1:
-        st.write(f"[{top_8_genre.iloc[1].title}]({top_8_genre.iloc[1].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[1].title}",
+            key=top_8_genre.iloc[1].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[1].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[1].poster, use_column_width=True)
     with col2:
-        st.write(f"[{top_8_genre.iloc[2].title}]({top_8_genre.iloc[2].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[2].title}",
+            key=top_8_genre.iloc[2].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[2].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[2].poster, use_column_width=True)
     with col3:
-        st.write(f"[{top_8_genre.iloc[3].title}]({top_8_genre.iloc[3].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[3].title}",
+            key=top_8_genre.iloc[3].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[3].anime_url),
+            use_container_width=True,
+        )
         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(f"[{top_8_genre.iloc[4].title}]({top_8_genre.iloc[4].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[4].title}",
+            key=top_8_genre.iloc[4].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[4].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[4].poster, use_column_width=True)
     with col5:
-        st.write(f"[{top_8_genre.iloc[5].title}]({top_8_genre.iloc[5].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[5].title}",
+            key=top_8_genre.iloc[5].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[5].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[5].poster, use_column_width=True)
     with col6:
-        st.write(f"[{top_8_genre.iloc[6].title}]({top_8_genre.iloc[6].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[6].title}",
+            key=top_8_genre.iloc[6].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[6].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[6].poster, use_column_width=True)
     with col7:
-        st.write(f"[{top_8_genre.iloc[7].title}]({top_8_genre.iloc[7].anime_url})")
+        st.button(
+            label=f"{top_8_genre.iloc[7].title}",
+            key=top_8_genre.iloc[7].title,
+            on_click=lambda: webbrowser.open_new_tab(top_8_genre.iloc[7].anime_url),
+            use_container_width=True,
+        )
         st.image(top_8_genre.iloc[7].poster, use_column_width=True)
 
 
@@ -217,27 +294,25 @@ def top_animes_genres(genre_select):
 def top_animes_custom(anime_select):
     style_for_page = """
     <style>
-    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    .css-c766yy.ef3psqc11 {
+    border-radius: 15px;
+    text-align: center:
+    }
+    .css-c766yy.ef3psqc11:hover {
+    scale: 1.05;
+    transition-duration: 0.3s;
+    }
+    .css-1v0mbdj.e115fcil1>img {
     border-radius: 25px;
     }
-    div.st-emotion-cache-1012qpg.e1nzilvr5 {
+    button.css-1rgehwv.ef3psqc11 {
+    border-radius: 15px;
     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;
+    button.css-1rgehwv.ef3psqc11:hover {
+    scale: 1.05;
     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)
@@ -250,16 +325,36 @@ def top_animes_custom(anime_select):
     with st.container():
         col0, col1, col2, col3 = st.columns(4)
         with col0:
-            st.write(f"[{recommended_anime_names[0]}]({recommended_anime_urls[0]})")
+            st.button(
+                label=f"{recommended_anime_names[0]}",
+                key=recommended_anime_names[0],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[0]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[0], use_column_width=True)
         with col1:
-            st.write(f"[{recommended_anime_names[1]}]({recommended_anime_urls[1]})")
+            st.button(
+                label=f"{recommended_anime_names[1]}",
+                key=recommended_anime_names[1],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[1]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[1], use_column_width=True)
         with col2:
-            st.write(f"[{recommended_anime_names[2]}]({recommended_anime_urls[2]})")
+            st.button(
+                label=f"{recommended_anime_names[2]}",
+                key=recommended_anime_names[2],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[2]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[2], use_column_width=True)
         with col3:
-            st.write(f"[{recommended_anime_names[3]}]({recommended_anime_urls[3]})")
+            st.button(
+                label=f"{recommended_anime_names[3]}",
+                key=recommended_anime_names[3],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[3]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[3], use_column_width=True)
 
     st.divider()
@@ -267,16 +362,36 @@ def top_animes_custom(anime_select):
     with st.container():
         col4, col5, col6, col7 = st.columns(4)
         with col4:
-            st.write(f"[{recommended_anime_names[4]}]({recommended_anime_urls[4]})")
+            st.button(
+                label=f"{recommended_anime_names[4]}",
+                key=recommended_anime_names[4],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[4]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[4], use_column_width=True)
         with col5:
-            st.write(f"[{recommended_anime_names[5]}]({recommended_anime_urls[5]})")
+            st.button(
+                label=f"{recommended_anime_names[5]}",
+                key=recommended_anime_names[5],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[5]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[5], use_column_width=True)
         with col6:
-            st.write(f"[{recommended_anime_names[6]}]({recommended_anime_urls[6]})")
+            st.button(
+                label=f"{recommended_anime_names[6]}",
+                key=recommended_anime_names[6],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[6]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[6], use_column_width=True)
         with col7:
-            st.write(f"[{recommended_anime_names[7]}]({recommended_anime_urls[7]})")
+            st.button(
+                label=f"{recommended_anime_names[7]}",
+                key=recommended_anime_names[7],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[7]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[7], use_column_width=True)
 
 
@@ -284,38 +399,25 @@ def top_animes_custom(anime_select):
 def top_animes_custom_genres(anime_select, genre_select):
     style_for_page = """
     <style>
-    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
-    border-radius: 25px;
-    }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0 {
+    .css-c766yy.ef3psqc11 {
     border-radius: 15px;
-    text-align: center;
-    }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0>div>p {
-    font-weight: 600;
+    text-align: center:
     }
-    a.st-emotion-cache-1lbx6hs.e16zdaao0:hover {
+    .css-c766yy.ef3psqc11:hover {
     scale: 1.05;
     transition-duration: 0.3s;
     }
-    div.st-emotion-cache-1012qpg.e1nzilvr5 {
-    text-align: center;
+    .css-1v0mbdj.e115fcil1>img {
+    border-radius: 25px;
     }
-    div.st-emotion-cache-1012qpg.e1nzilvr5>p {
-    font-weight: 600;
-    text-decoration: none;
-    border: 3px solid #607985;
-    border-radius: 10px;
-    text-color: #607985;
+    button.css-1rgehwv.ef3psqc11 {
+    border-radius: 15px;
+    text-align: center;
     }
-    div.st-emotion-cache-1012qpg.e1nzilvr5>p:hover {
-    scale: 1.10;
+    button.css-1rgehwv.ef3psqc11:hover {
+    scale: 1.05;
     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)
@@ -328,16 +430,36 @@ def top_animes_custom_genres(anime_select, genre_select):
     with st.container():
         col0, col1, col2, col3 = st.columns(4)
         with col0:
-            st.write(f"[{recommended_anime_names[0]}]({recommended_anime_urls[0]})")
+            st.button(
+                label=f"{recommended_anime_names[0]}",
+                key=recommended_anime_names[0],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[0]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[0], use_column_width=True)
         with col1:
-            st.write(f"[{recommended_anime_names[1]}]({recommended_anime_urls[1]})")
+            st.button(
+                label=f"{recommended_anime_names[1]}",
+                key=recommended_anime_names[1],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[1]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[1], use_column_width=True)
         with col2:
-            st.write(f"[{recommended_anime_names[2]}]({recommended_anime_urls[2]})")
+            st.button(
+                label=f"{recommended_anime_names[2]}",
+                key=recommended_anime_names[2],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[2]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[2], use_column_width=True)
         with col3:
-            st.write(f"[{recommended_anime_names[3]}]({recommended_anime_urls[3]})")
+            st.button(
+                label=f"{recommended_anime_names[3]}",
+                key=recommended_anime_names[3],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[3]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[3], use_column_width=True)
 
     st.divider()
@@ -345,16 +467,36 @@ def top_animes_custom_genres(anime_select, genre_select):
     with st.container():
         col4, col5, col6, col7 = st.columns(4)
         with col4:
-            st.write(f"[{recommended_anime_names[4]}]({recommended_anime_urls[4]})")
+            st.button(
+                label=f"{recommended_anime_names[4]}",
+                key=recommended_anime_names[4],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[4]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[4], use_column_width=True)
         with col5:
-            st.write(f"[{recommended_anime_names[5]}]({recommended_anime_urls[5]})")
+            st.button(
+                label=f"{recommended_anime_names[5]}",
+                key=recommended_anime_names[5],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[5]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[5], use_column_width=True)
         with col6:
-            st.write(f"[{recommended_anime_names[6]}]({recommended_anime_urls[6]})")
+            st.button(
+                label=f"{recommended_anime_names[6]}",
+                key=recommended_anime_names[6],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[6]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[6], use_column_width=True)
         with col7:
-            st.write(f"[{recommended_anime_names[7]}]({recommended_anime_urls[7]})")
+            st.button(
+                label=f"{recommended_anime_names[7]}",
+                key=recommended_anime_names[7],
+                on_click=lambda: webbrowser.open_new_tab(recommended_anime_urls[7]),
+                use_container_width=True,
+            )
             st.image(recommended_anime_posters[7], use_column_width=True)
 
 
@@ -362,7 +504,11 @@ def top_animes_custom_genres(anime_select, genre_select):
 def recommender_page():
     style_for_page = """
     <style>
-    button.st-emotion-cache-c766yy.ef3psqc11 {
+    button..css-c766yy.ef3psqc11 {
+        border-radius: 15px;
+        text-align: center:
+        }
+    st-emotion-cache-c766yy.ef3psqc11 {
     border-radius: 10px;    
     }
 

app.py

@@ -27,7 +27,7 @@ show_pages(
 def home_page():
     style_for_page = """
     <style>
-    div.st-emotion-cache-1v0mbdj.e115fcil1>img {
+    .css-1v0mbdj.e115fcil1>img {
     border-radius: 50px;
     }
     </style>