change summary visual

Home.py

@@ -55,11 +55,11 @@ def info():
     with st.sidebar:
         st.write('## About')
         st.write(
-            "**This is a web application for individual users to quickly dig out the most suitable text-to-image generation model from [civitai](https://civitai.com).** Our research aims to understand personal preference to images synthesized by generative models fine-tuned on stable diffusion and you can contribute by playing with this tool and giving us your feedback! "
+            "This is a web application **for individual users to quickly dig out the most preferable text-to-image models from [civitai](https://civitai.com) for different prompts**. Our research aims to understand personal preference towards generative models  and you can contribute by playing with this tool and giving us your feedback! "
         )
 
         st.write(
-            "After picking images you liked from Gallery and a battle-mode Ranking Contest, a summary dashboard will be presented **indicating your preferred models with download links ready to be deployed in [Webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui)** !"
+            "After picking images you liked from Gallery and a Ranking Contest, a summary dashboard will be presented **indicating your preferred models with download links ready to be deployed in [Webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui)** !"
         )
 
 
@@ -88,15 +88,15 @@ if __name__ == '__main__':
         st.write('### About GEMRec')
         st.write("**GE**nerative **M**odel **Rec**ommendation (**GEMRec**) is a research project by [MAPS Lab](https://github.com/MAPS-research), NYU Shanghai.")
         st.write('### Our Task')
-        st.write('Given a user’s preference on a set of generated images, we aim to recommend the most preferred generative model for the user.')
+        st.write('Navigate hundreds of text-to-image models through various categories of pre-defined prompts and a graph-based interface. Given a user’s preference and interaction data, we aim to recommend the most preferred generative model for the user.')
         st.write('### Our Approach')
-        st.write('We propose a two-stage framework, which contains prompt-model retrival and generated item ranking. :red[Your participation in this web application will help us to improve our framework and to further our research on personalization.]')
-        st.write('### Key Contributions')
-        st.write('1. We propose a two-stage framework to approach the Generative Model Recommendation problem. Our framework allows end-users to effectively explore a diverse set of generative models to understand their expressiveness. It also allows system developers to elicit user preferences for items generated from personalized prompts.')
-        st.write('2. We release GEMRec-18K, a dense prompt-model interaction dataset that consists of 18K images generated by pairing 200 generative models with 90 prompts collected from real-world usages, accompanied by detailed metadata and generation configurations. This dataset builds the cornerstone for exploring Generative Recommendation and can be useful for other tasks related to understanding generative models')
-        st.write('3. We take the first step in examining evaluation metrics for personalized image generations and identify several limitations in existing metrics. We propose a weighted metric that is more suitable for the task and opens up directions for future improvements in model training and evaluations.')
+        st.write('We propose a two-stage framework, which contains prompt-model retrieval and generative model  ranking. :red[Your participation in this web application will help us to improve our framework and to further our research on personalization.]')
+        # st.write('### Key Contributions')
+        # st.write('1. We propose a two-stage framework to approach the Generative Model Recommendation problem. Our framework allows end-users to effectively explore a diverse set of generative models to understand their expressiveness. It also allows system developers to elicit user preferences for items generated from personalized prompts.')
+        # st.write('2. We release GEMRec-18K, a dense prompt-model interaction dataset that consists of 18K images generated by pairing 200 generative models with 90 prompts collected from real-world usages, accompanied by detailed metadata and generation configurations. This dataset builds the cornerstone for exploring Generative Recommendation and can be useful for other tasks related to understanding generative models')
+        # st.write('3. We take the first step in examining evaluation metrics for personalized image generations and identify several limitations in existing metrics. We propose a weighted metric that is more suitable for the task and opens up directions for future improvements in model training and evaluations.')
 
-    with st.expander(label='**💻 Where can I find the paper and dataset?**'):
+    with st.expander(label='**📑 Where can I find the paper and dataset?**'):
         st.write('### Paper')
         st.write('Arxiv: [Towards Personalized Prompt-Model Retrieval for Generative Recommendation](https://arxiv.org/abs/2308.02205)')
         st.write('### GEMRec-18K Dataset')

pages/Summary.py

@@ -30,7 +30,7 @@ class DashboardApp:
 
     def sidebar(self, tags, mode):
         with st.sidebar:
-            tag = st.selectbox('Select a tag', tags, key='tag')
+            # tag = st.selectbox('Select a tag', tags, key='tag')
             # st.write('---')
             with st.form('summary_sidebar_form'):
                 st.write('## Want a more comprehensive summary?')
@@ -48,10 +48,10 @@ class DashboardApp:
             #     if submit_feedback:
             #         print(feedback)
 
-        return tag
+        # return tag
 
     def leaderboard(self, tag, db_table):
-        tag = '%' if tag == 'all' else tag
+        tag = '%' if tag == 'overview' else tag
 
         # get the ranking results of the current user
         curser = RANKING_CONN.cursor()
@@ -65,39 +65,40 @@ class DashboardApp:
             # sort the modelVersion_standings by value into a list of tuples in descending order
             st.session_state.modelVersion_standings[tag] = sorted(st.session_state.modelVersion_standings[tag].items(), key=lambda x: x[1], reverse=True)
 
-        tab1, tab2 = st.tabs(['Top Picks', 'Detailed Info'])
+        # tab1, tab2 = st.tabs(['Top Picks', 'Detailed Info'])
 
-        with tab1:
+        # 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', example_prompts=example_prompts)
-            else:
-                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')
-            #
-            # elif st.session_state.summary_mode == 'edit':
-            #     switch_stage = st.button('Done', key='switch_stage_done', type='primary', on_click=lambda: st.session_state.__setitem__('summary_mode', 'display'))
-            #     self.podium_expander(tag, n=len(st.session_state.modelVersion_standings[tag]), summary_mode='edit')
-
-        with tab2:
-            st.write('**Detailed information of all selected models**')
-            detailed_info = pd.merge(pd.DataFrame(st.session_state.modelVersion_standings[tag], columns=['modelVersion_id', 'ranking_score']), self.roster, on='modelVersion_id')
-
-            detailed_info = detailed_info[['model_name', 'modelVersion_name', 'model_download_count', 'tag', 'baseModel']]
-
-            st.data_editor(detailed_info, hide_index=False, disabled=True)
-            st.caption('You can click the header to sort the table by that column.')
+        # 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', example_prompts=example_prompts)
+        # else:
+        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')
+        #
+        # elif st.session_state.summary_mode == 'edit':
+        #     switch_stage = st.button('Done', key='switch_stage_done', type='primary', on_click=lambda: st.session_state.__setitem__('summary_mode', 'display'))
+        #     self.podium_expander(tag, n=len(st.session_state.modelVersion_standings[tag]), summary_mode='edit')
+
+        # with tab2:
+        st.write('---')
+        st.write('**Detailed information of all selected models**')
+        detailed_info = pd.merge(pd.DataFrame(st.session_state.modelVersion_standings[tag], columns=['modelVersion_id', 'ranking_score']), self.roster, on='modelVersion_id')
+
+        detailed_info = detailed_info[['model_name', 'modelVersion_name', 'model_download_count', 'tag', 'baseModel']]
+
+        st.data_editor(detailed_info, hide_index=False, disabled=True)
+        st.caption('You can click the header to sort the table by that column.')
 
     def podium_expander(self, tag, example_prompts, n=3, summary_mode: ['display', 'edit'] = 'display'):
 
@@ -110,29 +111,40 @@ class DashboardApp:
             icon = '🥇'if i == 0 else '🥈' if i == 1 else '🥉' if i == 2 else '🎈'
             podium_display = st.columns([1, 14], gap='medium')
             with podium_display[0]:
-                if summary_mode == 'display':
-                    st.title(f'{icon}')
-                elif summary_mode == 'edit':
-                    settop = st.button('🔝', key=f'settop_{modelVersion_id}', help='Set this model to the top', disabled=i == 0, on_click=self.switch_order, args=(tag, i, 0), use_container_width=True)
-                    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), use_container_width=True)
-                    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), use_container_width=True)
+                st.title(f'{icon}')
+                # if summary_mode == 'display':
+                #     st.title(f'{icon}')
+                # elif summary_mode == 'edit':
+                #     settop = st.button('🔝', key=f'settop_{modelVersion_id}', help='Set this model to the top', disabled=i == 0, on_click=self.switch_order, args=(tag, i, 0), use_container_width=True)
+                #     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), use_container_width=True)
+                #     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), use_container_width=True)
             with podium_display[1]:
-                title_display = st.columns([3, 1, 1, 1])
+                title_display = st.columns([3.5, 2, 2, 2, 0.5, 0.5, 0.5])
                 with title_display[0]:
                     st.write(f'##### {model_name}, {modelVersion_name}')
                     # st.write(f'Ranking Score: {winning_times}')
                 with title_display[1]:
                     # image_display = st.selectbox('image display', ['Featured', 'All Images'], key=f'image_display_{modelVersion_id}', label_visibility='collapsed')
-                    image_display = st.checkbox('Show all images', key=f'image_display_{modelVersion_id}')
+                    image_display = st.toggle('Show all images', key=f'image_display_{modelVersion_id}')
 
                 with title_display[2]:
-                    st.link_button('Download Model', url, use_container_width=True)
+                    st.link_button('Download', 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.link_button('Civitai', 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 title_display[4]:
+                    settop = st.button('🔝', key=f'settop_{modelVersion_id}', help='Set this model to the top',
+                                       disabled=i == 0, on_click=self.switch_order, args=(tag, i, 0),
+                                       use_container_width=True)
+                with title_display[5]:
+                    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),
+                                       use_container_width=True)
+                with title_display[6]:
+                    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),
+                                         use_container_width=True)
 
                 if not image_display:
                     example_images = self.promptBook[self.promptBook['prompt_id'].isin(example_prompts) & (self.promptBook['modelVersion_id']==modelVersion_id)]['image_id'].values
@@ -143,11 +155,10 @@ class DashboardApp:
                     )
 
                 else:
-                    st.toast('🐌 It may take a while to load all images. Please be patient.')
                 # with st.expander(f'Show Images'):
                     images = self.promptBook[self.promptBook['modelVersion_id'] == modelVersion_id]['image_id'].values
 
-                    safety_check = st.checkbox('Include potentially unsafe or offensive images', value=False, key=modelVersion_id)
+                    safety_check = st.toggle('Include potentially unsafe or offensive images', value=False, key=modelVersion_id)
                     unsafe_prompts = json.load(open('data/unsafe_prompts.json', 'r'))
                     # merge dict values into one list
                     unsafe_prompts = [item for sublist in unsafe_prompts.values() for item in sublist]
@@ -162,6 +173,7 @@ class DashboardApp:
                         images,
                         img_style={"margin": "5px", "height": "100px"}
                     )
+                    st.write('🐌 It may take a while to load all images. Please be patient, and **NEVER USE THE REFRESH BUTTON ON YOUR BROWSER**.')
 
                     # # st.write(f'### Images generated with {icon} {model_name}, {modelVersion_name}')
                     # col_num = 4
@@ -212,7 +224,7 @@ class DashboardApp:
         # get tags from database of the current user
         db_table = 'sort_results' if mode == 'Drag and Sort' else 'battle_results'
 
-        tags = ['all']
+        tags = ['overview']
         curser = RANKING_CONN.cursor()
         curser.execute(
             f"SELECT DISTINCT tag FROM {db_table} WHERE username = '{st.session_state.user_id[0]}' AND timestamp = '{st.session_state.user_id[1]}'")
@@ -220,11 +232,13 @@ class DashboardApp:
             tags.append(row['tag'])
         curser.close()
 
-        if tags == ['all']:
+        if tags == ['overview']:
             st.info(f'No rankings are finished with {mode} mode yet.')
 
         else:
-            tag = self.sidebar(tags, mode)
+            tags = tags[0:1] if len(tags) == 2 else tags
+            tag = st.radio('Select a tag', tags, index=0, horizontal=True, label_visibility='collapsed')
+            self.sidebar(tags, mode)
             self.leaderboard(tag, db_table)
 
         with st.sidebar:
@@ -240,7 +254,7 @@ class DashboardApp:
                     RANKING_CONN.commit()
                     curser.close()
 
-                    st.toast('Thanks for your feedback! We will take it into consideration in our future work.')
+                    st.toast('🙏 **Thanks for your feedback! We will take it into consideration in our future work.**')
 
 
 if __name__ == "__main__":
@@ -280,4 +294,7 @@ if __name__ == "__main__":
             app = DashboardApp(roster, promptBook, session_finished)
             app.app()
 
+    with open('./css/style.css') as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+