add image border and navigation

pages/Gallery.py

@@ -54,6 +54,9 @@ class GalleryApp:
     def gallery_graph(self, items):
         items = load_tsne_coordinates(items)
 
+        # sort items to be popularity from low to high, so that most popular ones will be on the top
+        items = items.sort_values(by=['model_download_count'], ascending=True).reset_index(drop=True)
+
         scale = 50
         items.loc[:, 'x'] = items['x'] * scale
         items.loc[:, 'y'] = items['y'] * scale
@@ -69,18 +72,18 @@ class GalleryApp:
 
             nodes.append(Node(id=items.loc[idx, 'image_id'],
                               # label=str(items.loc[idx, 'model_name']),
-                              title = f"model name: {items.loc[idx, 'model_name']}\nmodelVersion name: {items.loc[idx, 'modelVersion_name']}\nclip score: {items.loc[idx, 'clip_score']}\nmcos score: {items.loc[idx, 'mcos_score']}\npopularity: {items.loc[idx, 'model_download_count']}",
+                              title=f"model name: {items.loc[idx, 'model_name']}\nmodelVersion name: {items.loc[idx, 'modelVersion_name']}\nclip score: {items.loc[idx, 'clip_score']}\nmcos score: {items.loc[idx, 'mcos_score']}\npopularity: {items.loc[idx, 'model_download_count']}",
                               size=20,
                               shape='image',
                               image=f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{items.loc[idx, 'image_id']}.png",
                               x=items.loc[idx, 'x'].item(),
                               y=items.loc[idx, 'y'].item(),
-                              fixed=True,
-                              color={'background': '#00000', 'border': '#ffffff'},
+                              # fixed=True,
+                              color={'background': '#E0E0E1', 'border': '#ffffff', 'highlight': {'border': '#F04542'}},
                               # opacity=opacity,
                               shadow={'enabled': True, 'color': 'rgba(0,0,0,0.4)', 'size': 10, 'x': 1, 'y': 1},
-                              # borderWidth=1,
-                              # shapeProperties={'useBorderWithImage': True},
+                              borderWidth=2,
+                              shapeProperties={'useBorderWithImage': True},
                               )
                          )
 
@@ -89,12 +92,13 @@ class GalleryApp:
                         directed=True,
                         physics=False,
                         hierarchical=False,
+                        interaction={'navigationButtons': True, 'dragNodes': False},
                         # **kwargs
                         )
 
         return agraph(nodes=nodes,
                       edges=edges,
-                      config=config
+                      config=config,
                       )
 
 
@@ -297,9 +301,13 @@ class GalleryApp:
             switch_page("ranking")
 
         with graph_cols[0]:
-            return_value = self.gallery_graph(items)
-        with graph_cols[1]:
+            graph_space = st.empty()
 
+            with graph_space.container():
+                with st.spinner('Loading graph...'):
+                    return_value = self.gallery_graph(items)
+
+        with graph_cols[1]:
             if return_value:
                 with st.form(key=f'{prompt_id}'):
                     image_url = f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{return_value}.png"
@@ -570,7 +578,7 @@ if __name__ == "__main__":
         if home_btn:
             switch_page("home")
     else:
-        st.write('You have already logged in as ' + st.session_state.user_id[0])
+        # st.write('You have already logged in as ' + st.session_state.user_id[0])
         roster, promptBook, images_ds = load_hf_dataset()
         # print(promptBook.columns)