update results display

pages/{Resutls.py → Results.py}

@@ -40,52 +40,68 @@ class DashboardApp:
 
         # sort the modelVersion_standings by value into a list of tuples in descending order
         modelVersion_standings = sorted(modelVersion_standings.items(), key=lambda x: x[1], reverse=True)
-        # show the top 3 in metric cards
-        st.write('## Top picks')
-        n = 3
-        metric_cols = st.columns(n)
-
-        for i in range(n):
-            with metric_cols[i]:
-                modelVersion_id = modelVersion_standings[i][0]
-                winning_times = modelVersion_standings[i][1]
-
-                print(self.roster)
-
-                model_name, modelVersion_name, url = self.roster[self.roster['modelVersion_id'] == modelVersion_id][['model_name', 'modelVersion_name', 'modelVersion_url']].values[0]
-
-                # st.metric(label=str(modelVersion_id) + ' ' + model_name, value=modelVersion_name, delta=f'Ranking Score: {winning_times}', delta_color='off')
-                # # st.write(f'https://civitai.com/models/{modelVersion_id}')
-                #
-                # style_metric_cards(border_left_color='gold')
-                # st.button(str(modelVersion_id), on_click=lambda: os.system(f'open https://civitai.com/models/{modelVersion_id}'), key=modelVersion_id, use_container_width=True)
-
-                metric_card = stylable_container(
-                    key="container_with_border",
-                    css_styles="""
-                    {
-                        border: 1px solid rgba(49, 51, 63, 0.2);
-                        border-left: 0.5rem solid silver;
-                        border-radius: 5px;
-                        padding: calc(1em + 5px);
-                        gap: 0.5em;
-                        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.08);
-                        overflow: scroll;
-                    }
-                    """,
-                )
-
-                with metric_card:
-                    icon = '🥇'if i == 0 else '🥈' if i == 1 else '🥉'
-                    st.write(modelVersion_id)
-                    st.write(f'### {icon} {model_name}, [{modelVersion_name}](https://civitai.com/models/{modelVersion_id})')
-                    st.write(f'Ranking Score: {winning_times}')
-
-        st.write('---')
-
-        st.write('## Detailed information of all selected models')
-        detailed_info = pd.merge(pd.DataFrame(modelVersion_standings, columns=['modelVersion_id', 'ranking_score']), self.roster, on='modelVersion_id')
-        st.data_editor(detailed_info, hide_index=True, disabled=True)
+
+        tab1, tab2 = st.tabs(['Top Picks', 'Detailed Info'])
+
+        with tab1:
+            # show the top 3 in metric cards
+            st.write('## Top picks')
+            n = 3
+            metric_cols = st.columns(n)
+            image_display = st.empty()
+            
+            for i in range(n):
+                with metric_cols[i]:
+                    modelVersion_id = modelVersion_standings[i][0]
+                    winning_times = modelVersion_standings[i][1]
+
+                    model_name, modelVersion_name, url = self.roster[self.roster['modelVersion_id'] == modelVersion_id][['model_name', 'modelVersion_name', 'modelVersion_url']].values[0]
+
+                    metric_card = stylable_container(
+                        key="container_with_border",
+                        css_styles="""
+                        {
+                            border: 1.5px solid rgba(49, 51, 63, 0.8);
+                            border-left: 0.5rem solid silver;
+                            border-radius: 5px;
+                            padding: calc(1em + 5px);
+                            gap: 0.5em;
+                            box-shadow: 0 0 2rem rgba(0, 0, 0, 0.08);
+                            overflow-x: scroll;
+                        }
+                        """,
+                    )
+
+                    with metric_card:
+                        icon = '🥇'if i == 0 else '🥈' if i == 1 else '🥉'
+                        st.write(modelVersion_id)
+                        st.write(f'### {icon} {model_name}, [{modelVersion_name}](https://civitai.com/models/{modelVersion_id})')
+                        st.write(f'Ranking Score: {winning_times}')
+
+                    show_image = st.button('Show Image', key=modelVersion_id, use_container_width=True)
+                    if show_image:
+
+                        images = self.promptBook[self.promptBook['modelVersion_id'] == modelVersion_id]['image_id'].values
+                        with image_display.container():
+                            st.write('---')
+                            st.write(f'### Images generated with {icon} {model_name}, {modelVersion_name}')
+                            col_num = 4
+                            image_cols = st.columns(col_num)
+                            for i in range(len(images)):
+                                with image_cols[i % col_num]:
+                                    image = f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{images[i]}.png"
+                                    st.image(image, use_column_width=True)
+
+            # st.write('---')
+            #     expander = st.expander(f'### {icon} {model_name}, [{modelVersion_name}](https://civitai.com/models/{modelVersion_id})')
+            #     with expander:
+            #         images = self.promptBook[self.promptBook['modelVersion_id'] == modelVersion_id]['image_id'].values
+            #         st.write(images)
+
+        with tab2:
+            st.write('## Detailed information of all selected models')
+            detailed_info = pd.merge(pd.DataFrame(modelVersion_standings, columns=['modelVersion_id', 'ranking_score']), self.roster, on='modelVersion_id')
+            st.data_editor(detailed_info, hide_index=True, disabled=True)
 
 
     def score_calculator(self, results, db_table):