beta testing for image display

pages/Summary.py

@@ -12,6 +12,7 @@ from streamlit_elements import elements, mui, html, dashboard, nivo
 from streamlit_extras.switch_page_button import switch_page
 from streamlit_extras.metric_cards import style_metric_cards
 from streamlit_extras.stylable_container import stylable_container
+from st_clickable_images import clickable_images
 
 from pages.Gallery import load_hf_dataset
 from pages.Ranking import connect_to_db
@@ -69,10 +70,18 @@ class DashboardApp:
         with tab1:
             # self.podium(modelVersion_standings)
             switch_stage = st.toggle('Manual Reorder', key='switch_stage')
+
+            example_prompts = []
+            # get example images
+            for key, value in st.session_state.selected_dict.items():
+                for model in st.session_state.modelVersion_standings[tag]:
+                    if model[0] in value:
+                        example_prompts.append(key)
+
             if switch_stage:
-                self.podium_expander(tag, n=len(st.session_state.modelVersion_standings[tag]), summary_mode='edit')
+                self.podium_expander(tag, n=len(st.session_state.modelVersion_standings[tag]), summary_mode='edit', example_prompts=example_prompts)
             else:
-                self.podium_expander(tag, n=3, summary_mode='display')
+                self.podium_expander(tag, n=len(st.session_state.modelVersion_standings[tag]), summary_mode='display', example_prompts=example_prompts)
             # if st.session_state.summary_mode == 'display':
             #     switch_stage = st.button('Manual Reorder', key='switch_stage_edit', on_click=lambda: st.session_state.__setitem__('summary_mode', 'edit'))
             #     self.podium_expander(tag, n=3, summary_mode='display')
@@ -87,7 +96,7 @@ class DashboardApp:
 
             st.data_editor(detailed_info, hide_index=False, disabled=True)
 
-    def podium_expander(self, tag, n=3, summary_mode: ['display', 'edit'] = 'display'):
+    def podium_expander(self, tag, example_prompts, n=3, summary_mode: ['display', 'edit'] = 'display'):
 
         for i in range(n):
             modelVersion_id = st.session_state.modelVersion_standings[tag][i][0]
@@ -104,17 +113,30 @@ class DashboardApp:
                     moveup = st.button('⬆', key=f'moveup_{modelVersion_id}', help='Move this model up', disabled=i == 0, on_click=self.switch_order, args=(tag, i, i - 1))
                     movedown = st.button('⬇', key=f'movedown_{modelVersion_id}', help='Move this model down', disabled=i == n - 1, on_click=self.switch_order, args=(tag, i, i + 1))
             with podium_display[1]:
-                title_display = st.columns([4, 1, 1])
+                title_display = st.columns([3, 1, 1, 1])
                 with title_display[0]:
                     st.write(f'##### {model_name}, {modelVersion_name}')
-                    st.write(f'Ranking Score: {winning_times}')
+                    # st.write(f'Ranking Score: {winning_times}')
                 with title_display[1]:
-                    st.link_button('Download Model', url, use_container_width=True)
+                    image_display = st.selectbox('image display', ['Featured', 'All Images'], key=f'image_display_{modelVersion_id}', label_visibility='collapsed')
+
                 with title_display[2]:
+                    st.link_button('Download Model', url, use_container_width=True)
+                with title_display[3]:
                     st.link_button('Civitai Page', f'https://civitai.com/models/{model_id}?modelVersionId={modelVersion_id}', use_container_width=True, type='primary')
                 # st.write(f'[Civitai Page](https://civitai.com/models/{model_id}?modelVersionId={modelVersion_id}), [Model Download Link]({url}), Ranking Score: {winning_times}')
                 # with st.expander(f'**{icon} {model_name}, [{modelVersion_name}](https://civitai.com/models/{model_id}?modelVersionId={modelVersion_id})**, Ranking Score: {winning_times}'):
-                with st.expander(f'Show Images'):
+
+                if image_display == 'Featured':
+                    example_images = self.promptBook[self.promptBook['prompt_id'].isin(example_prompts) & (self.promptBook['modelVersion_id']==modelVersion_id)]['image_id'].values
+                    example_images = [f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{image}.png" for image in example_images]
+                    clickable_images(
+                        example_images,
+                        img_style={"margin": "5px", "height": "100px"}
+                    )
+
+                elif image_display == 'All Images':
+                # with st.expander(f'Show Images'):
                     images = self.promptBook[self.promptBook['modelVersion_id'] == modelVersion_id]['image_id'].values
 
                     safety_check = st.toggle('Include potentially unsafe or offensive images', value=False, key=modelVersion_id)
@@ -127,14 +149,21 @@ class DashboardApp:
                         # exclude unsafe prompts from images
                         images = [image for image in images if image not in unsafe_images]
 
-                    # st.write(f'### Images generated with {icon} {model_name}, {modelVersion_name}')
-                    col_num = 4
-                    image_cols = st.columns(col_num)
-
-                    for j in range(len(images)):
-                        with image_cols[j % col_num]:
-                            image = f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{images[j]}.png"
-                            st.image(image, use_column_width=True)
+                    images = [f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{image}.png" for image in images]
+                    clickable_images(
+                        images,
+                        img_style={"margin": "5px", "height": "100px"}
+                    )
+
+                    # # st.write(f'### Images generated with {icon} {model_name}, {modelVersion_name}')
+                    # col_num = 4
+                    # image_cols = st.columns(col_num)
+                    #
+                    # for j in range(len(images)):
+                    #     with image_cols[j % col_num]:
+                    #         image = f"https://modelcofferbucket.s3-accelerate.amazonaws.com/{images[j]}.png"
+                    #         st.image(image, use_column_width=True)
+                    #
             if i != n - 1:
                 st.write('---')
 
@@ -188,18 +217,18 @@ class DashboardApp:
         else:
             tag = self.sidebar(tags, mode)
             self.leaderboard(tag, db_table)
-
-        comment = st.chat_input('Please leave your comments here.', key='comment')
-        if comment:
-            commenttime = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-            curser = RANKING_CONN.cursor()
-            # parse the comment to at most 300 to avoid SQL injection
-            for i in range(0, len(comment), 300):
-                curser.execute(f"INSERT INTO comments (username, timestamp, comment, commenttime) VALUES ('{st.session_state.user_id[0]}', '{st.session_state.user_id[1]}', '{comment[i:i+300]}', '{commenttime}')")
-            RANKING_CONN.commit()
-            curser.close()
-
-            st.toast('Thanks for your feedback! We will take it into consideration in our future work.')
+        #
+        # comment = st.chat_input('Please leave your comments here.', key='comment')
+        # if comment:
+        #     commenttime = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        #     curser = RANKING_CONN.cursor()
+        #     # parse the comment to at most 300 to avoid SQL injection
+        #     for i in range(0, len(comment), 300):
+        #         curser.execute(f"INSERT INTO comments (username, timestamp, comment, commenttime) VALUES ('{st.session_state.user_id[0]}', '{st.session_state.user_id[1]}', '{comment[i:i+300]}', '{commenttime}')")
+        #     RANKING_CONN.commit()
+        #     curser.close()
+        #
+        #     st.toast('Thanks for your feedback! We will take it into consideration in our future work.')
 
 
 if __name__ == "__main__":

requirements.txt

@@ -7,3 +7,4 @@ streamlit-vega-lite
 scikit-learn
 pymysql
 extra_streamlit_components
+st-clickable-images