Upgrading Layout and adding Contact info

app.py

@@ -8,6 +8,7 @@ import pandas as pd
 import time
 import os
 
+
 model_repository_id = "Dusduo/Pokemon-classification-1stGen"
 # Loading the pokemon classifier model and its processor
 image_processor = AutoImageProcessor.from_pretrained(model_repository_id)
@@ -66,11 +67,16 @@ st.title("Gotta Classify 'Em All - 1st Generation Pokedex -")
 st.write('\n')
 
 
-col1, col2 = st.columns([3,1]) # [3,1]
+
+image = Image.open('base.jpg')
+
+col1, col2 = st.columns([1,2]) # [3,1]
 
 with col1:
     image = Image.open('base.jpg')
-    show = st.image(image, , width=400) #use_column_width=True)
+    show = st.image(image, use_column_width=True)
+
+
 
 
 
@@ -105,7 +111,7 @@ uploaded_file = st.sidebar.file_uploader("",type=['png', 'jpg', 'jpeg'], accept_
 if uploaded_file is not None:
     
     u_img = Image.open(uploaded_file)
-    show.image(u_img, 'Uploaded Image', width=400 )#use_column_width=True)
+    show.image(u_img, 'Uploaded Image',use_column_width=True) #, width=400 )#
     
     # Preprocess the image for the model
     model_inputs = preprocess(image_processor, u_img)
@@ -137,9 +143,9 @@ if st.sidebar.button("Click Here to Classify"):
                              "There might be too many entities on the image." )
                              
         else:
-            st.sidebar.write(f" It's a(n) {prediction} picture.",'\n')
+            st.sidebar.write(f" It's a(n) <b>{prediction}</b> picture.",'\n', unsafe_allow_html=True)
             
-            st.sidebar.write('Probability:',probability,'%')
+            st.sidebar.write(f'<b>Probability:</b>',probability,'%', unsafe_allow_html=True)
             
             # Retrieve predicted pokemon information
             _, pokedex_number, english_name, romaji_name, katakana_name, weight_kg, height_m, type1, type2, color1, color2, classification, evolve_from, evolve_into, is_legendary = pokemon_info_df[pokemon_info_df['name']==prediction].values[0]
@@ -150,38 +156,51 @@ if st.sidebar.button("Click Here to Classify"):
                     with st.container():
                         pokeball_image_col,pokedex_number_col, pokemon_name_col = st.columns([1,1,8])
                         pokeball_image_col.image(pokeball_image)
-                        pokedex_number_col.markdown(f'<div style="text-align: left; font-size: 1.4rem;"><b>{pokedex_number}</b></div>', unsafe_allow_html=True)
-                        pokemon_name_col.markdown(f'<div style="text-align: right; font-size: 1.4rem;"><b>{english_name}</b></div>', unsafe_allow_html=True)
+                        pokedex_number_col.markdown(f'<div style="text-align: left; white-space: nowrap; font-size: 1.8em;"><b>Pokedex n°{pokedex_number}</b></div>', unsafe_allow_html=True)
+                        pokemon_name_col.markdown(f'<div style="text-align: right; font-size: 1.8em;"><b>{english_name} <br> {katakana_name}</b></div>', unsafe_allow_html=True)
                         
                     # second row
                     with st.container():
-                        st.markdown(f'<div style="text-align: center; color: {color1}; font-size: 1.2rem;"><b>{classification}</b></div>', unsafe_allow_html=True)
+                        st.markdown(f'<div style="text-align: center; color: {color1}; font-size: 1.6em;"><b>{classification}</b></div>', unsafe_allow_html=True)
                         
                     # 3rd row
                     with st.container():
                         if pd.isna(type2):
                             st.write('\n')
-                            st.markdown(f'<div style="display: flex; justify-content: center; align-items: center; "><div style="display: inline-block; padding: 5px; margin: 0 5px; border-radius: 5px; background-color: {color1}; color: white;">{type1}</div>', unsafe_allow_html=True)
+                            st.markdown(f'<div style="display: flex; justify-content: center; align-items: center; "><div style="display: inline-block; padding: 1%; margin: 0 1%; border-radius: 5px; background-color: {color1}; color: white; font-size: 1.4em;"><b>{type1}</b></div>', unsafe_allow_html=True)
                         else: 
                             type1_col, type2_col = st.columns(2)
-                            type1_col.markdown(f'<div style="display: flex; justify-content: center; align-items: center;"><div style="display: inline-block; padding: 5px; margin: 0 5px; border-radius: 5px; background-color: {color1}; color: white;">{type1}</div>', unsafe_allow_html=True)
-                            type2_col.markdown(f'<div style="display: flex; justify-content: center; align-items: center;"><div style="display: inline-block; padding: 5px; margin: 0 5px; border-radius: 5px; background-color: {color2}; color: white;">{type2}</div>', unsafe_allow_html=True) 
+                            type1_col.markdown(f'<div style="display: flex; justify-content: center; align-items: center;"><div style="display: inline-block; padding: 1%; margin: 0 1%; border-radius: 5px; background-color: {color1}; color: white; font-size: 1.4em;"><b>{type1}</b></div>', unsafe_allow_html=True)
+                            type2_col.markdown(f'<div style="display: flex; justify-content: center; align-items: center;"><div style="display: inline-block; padding: 1%; margin: 0 1%; border-radius: 5px; background-color: {color2}; color: white; font-size: 1.4em;"><b>{type2}</b></div>', unsafe_allow_html=True) 
                         st.write('\n')
                     # 4th row
                     with st.container():
-                        st.write(f'<div style=font-size: 1.4rem;><b>Height:</b> {height_m}m', unsafe_allow_html=True)
+                        st.write(f'<div style="font-size: 1.8em;"><b>Height:</b> {height_m}m', unsafe_allow_html=True)
                         st.write('\n')
-                        st.write(f'<div style=font-size: 1.4rem;><b>Weight:</b> {weight_kg}kg', unsafe_allow_html=True)
+                        st.write(f'<div style="font-size: 1.8em;"><b>Weight:</b> {weight_kg}kg', unsafe_allow_html=True)
                         st.write('\n')
                         if not pd.isna(evolve_from):
-                            st.markdown(f'<div style=font-size: 1.4rem;><b>Evolves from:</b> {evolve_from}', unsafe_allow_html=True)
+                            st.markdown(f'<div style="font-size: 1.8em;"><b>Evolves from:</b> {evolve_from}', unsafe_allow_html=True)
                             #st.write(f'Evolves from: {evolve_from}')
                             st.write('\n')
                         if not pd.isna(evolve_into):
-                            st.markdown(f'<div style=font-size: 1.4rem;><b>Evolves into:</b> {evolve_into}', unsafe_allow_html=True)
+                            st.markdown(f'<div style="font-size: 1.8em;"><b>Evolves into:</b> {evolve_into}', unsafe_allow_html=True)
                             #st.write(f'Evolves into: {evolve_into}')
                             st.write('\n')
                     
-    
-    
+st.sidebar.write('\n')
+st.sidebar.info(
+    """
+    - Web App URL: [url](https://huggingface.co/spaces/Dusduo/GottaClassifyEmAll)
+    - GitHub repository: [repository](https://github.com/A-Duss/GottaClassifyEmAll.git)
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Antoine Dussolle: [LinkedIn](https://www.linkedin.com/in/antoine-dussolle/) | [GitHub](https://github.com/A-Duss) 
+    """
+)
+