custom radio style

Home.py

@@ -30,7 +30,7 @@ def save_user_id(user_id):
     if not user_id:
         user_id = 'anonymous' + str(random.randint(0, 100000))
     st.session_state.user_id = [user_id, datetime.now().strftime("%Y-%m-%d %H:%M:%S")]
-    st.session_state.assigned_rank_mode = random.choice(['sort', 'battle'])
+    st.session_state.assigned_rank_mode = random.choice(['Drag and Sort', 'Battle'])
 
 
 def logout():
@@ -55,11 +55,11 @@ def info():
         # )
 
         st.write(
-            "This is a web application for individual users to quickly dig out the most suitable text-to-image generation model from civitai. 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 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! "
         )
 
         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 !"
+            "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)** !"
         )
 
 
@@ -80,6 +80,7 @@ if __name__ == '__main__':
         login()
     else:
         st.write(f"You have already logged in as `{st.session_state.user_id[0]}`")
+        st.write(f"Assigned ranking mode: `{st.session_state.assigned_rank_mode}`")
         st.button('Log out', on_click=logout)
 
     st.write('---')

pages/Gallery.py

@@ -276,7 +276,7 @@ class GalleryApp:
         # return prompt_tags, tag, prompt_id, items
 
     def app(self):
-        # st.title('Model Visualization and Retrieval')
+        st.title('Model Visualization and Retrieval')
         # st.write('This is a gallery of images generated by the models')
 
         # build the tabular view
@@ -288,7 +288,7 @@ class GalleryApp:
         # tag = stx.tab_bar(chosen_data, key='tag', default='food')
 
         # save tag to session state on change
-        tag = st.radio('Select a tag', prompt_tags, index=5, horizontal=True, key='tag')
+        tag = st.radio('Select a tag', prompt_tags, index=5, horizontal=True, key='tag', label_visibility='collapsed')
 
         # tabs = st.tabs(prompt_tags)
         # for i in range(len(prompt_tags)):
@@ -301,11 +301,6 @@ class GalleryApp:
         st.caption('Select a prompt')
         subset_selector = st.columns([3, 1])
         with subset_selector[0]:
-            # remember last prompt
-            # if 'prompt_idx_last_time' not in st.session_state:
-            #     st.session_state.prompt_idx_last_time = 0
-
-            # selected_prompt = st.selectbox('Select prompt', prompts, index=3)
             selected_prompt = selectbox('Select prompt', prompts, key=f'prompt_{tag}', no_selection_label='---', label_visibility='collapsed', index=0)
             # st.session_state.prompt_idx_last_time = prompts.index(selected_prompt) if selected_prompt else 0
 
@@ -347,17 +342,8 @@ class GalleryApp:
 
             if st.session_state.gallery_state[prompt_id] == 'graph':
                 if safety_check:
-                    # if subset == 'Selected Only' and 'selected_dict' in st.session_state:
-                    #     # try:
-                    #     items = items[items['modelVersion_id'].isin(st.session_state.selected_dict[prompt_id])].reset_index(drop=True)
-                    #     self.gallery_mode(prompt_id, items)
-                    #     # except:
-                    #     #     st.warning('No selected images found')
-                    # else:
                     self.graph_mode(prompt_id, items)
                 with subset_selector[-1]:
-                    # if st.session_state.gallery_state[prompt_id] == 'graph':
-                    # subset = st.selectbox('Select a subset', ['All', 'Selected Only'], index=0, key=f'subset_{tag}')
                     has_selection = False
                     try:
                         if len(st.session_state.selected_dict.get(prompt_id, [])) > 0:
@@ -366,7 +352,7 @@ class GalleryApp:
                         pass
 
                     if has_selection:
-                        checkout = st.button('🛒 Check out selections', use_container_width=True, type='primary')
+                        checkout = st.button('Check out selections', use_container_width=True, type='primary')
                         if checkout:
                             print('checkout')
 
@@ -394,11 +380,6 @@ class GalleryApp:
                         if forward:
                             switch_page('ranking')
 
-
-
-                # else:
-                #     st.button('Proceed', use_container_width=True)
-
         try:
             self.sidebar(items, prompt_id, note)
         except:
@@ -712,6 +693,9 @@ def load_tsne_coordinates(items):
 if __name__ == "__main__":
     st.set_page_config(page_title="Model Coffer Gallery", page_icon="🖼️", layout="wide")
 
+    with open('./pages/style.css') as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
     if 'user_id' not in st.session_state:
         st.warning('Please log in first.')
         home_btn = st.button('Go to Home Page')

pages/Ranking.py

@@ -24,28 +24,31 @@ class RankingApp:
         if 'counter' not in st.session_state:
             st.session_state.counter = {}
 
-    def sidebar(self):
+    def sidebar(self, selected_prompt, items):
         with st.sidebar:
-            prompt_tags = self.promptBook['tag'].unique()
-            prompt_tags = np.sort(prompt_tags).tolist()
-
-            print(st.session_state.gallery_focus)
-            tag_idx = prompt_tags.index(st.session_state.gallery_focus['tag']) if st.session_state.gallery_focus['tag'] in prompt_tags else 0
-            print(tag_idx)
-
-            tag = st.selectbox('Select a prompt tag', prompt_tags, index=tag_idx)
-            items = self.promptBook[self.promptBook['tag'] == tag].reset_index(drop=True)
-            prompts = np.sort(items['prompt'].unique())[::-1].tolist()
-
-            prompt_idx = prompts.index(st.session_state.gallery_focus['prompt']) if st.session_state.gallery_focus['prompt'] in prompts else 0
-            print(prompt_idx)
-
-            selected_prompt = st.selectbox('Select a prompt', prompts, index=prompt_idx)
-
-            mode = st.radio('Select a mode', ['Drag and Sort', 'Battle'], index=1)
-
-            items = items[items['prompt'] == selected_prompt].reset_index(drop=True)
-            prompt_id = items['prompt_id'].unique()[0]
+            st.title('Personal Image Ranking')
+            st.write('Here you can test out your selected images with any prompt you like. ')
+            # prompt_tags = self.promptBook['tag'].unique()
+            # prompt_tags = np.sort(prompt_tags).tolist()
+            #
+            # print(st.session_state.gallery_focus)
+            # tag_idx = prompt_tags.index(st.session_state.gallery_focus['tag']) if st.session_state.gallery_focus['tag'] in prompt_tags else 0
+            # print(tag_idx)
+            #
+            # tag = st.selectbox('Select a prompt tag', prompt_tags, index=tag_idx)
+            # items = self.promptBook[self.promptBook['tag'] == tag].reset_index(drop=True)
+            # prompts = np.sort(items['prompt'].unique())[::-1].tolist()
+            #
+            # prompt_idx = prompts.index(st.session_state.gallery_focus['prompt']) if st.session_state.gallery_focus['prompt'] in prompts else 0
+            # print(prompt_idx)
+            #
+            # selected_prompt = st.selectbox('Select a prompt', prompts, index=prompt_idx)
+            #
+            # # mode = st.radio('Select a mode', ['Drag and Sort', 'Battle'], index=1)
+            # mode = st.session_state.assigned_rank_mode
+            #
+            # items = items[items['prompt'] == selected_prompt].reset_index(drop=True)
+            # prompt_id = items['prompt_id'].unique()[0]
 
             with st.form(key='prompt_form'):
                 # input image metadata
@@ -53,7 +56,7 @@ class RankingApp:
                 negative_prompt = st.text_area('Negative Prompt', items['negativePrompt'].unique()[0], height=150, key='negative_prompt', disabled=True)
                 st.form_submit_button('Generate Images [Coming Soon]', type='primary', use_container_width=True, disabled=True)
 
-        return prompt_tags, tag, prompt_id, items, mode
+        return None
 
     def draggable_images(self, items, prompt_id, layout='portrait'):
         # init ranking by the order of items
@@ -261,9 +264,8 @@ class RankingApp:
         self.battle_images(items, prompt_id)
 
     def app(self):
-        st.title('Personal Image Ranking')
-        st.write('Here you can test out your selected images with any prompt you like. ')
-        st.caption("We might pair some other images that you haven't selected based on our evaluation matrix.")
+        # st.title('Personal Image Ranking')
+        # st.write('Here you can test out your selected images with any prompt you like. ')
         # st.write(self.promptBook)
 
         # save the current progress to session state
@@ -271,7 +273,32 @@ class RankingApp:
             st.session_state.progress = {}
         print('current progress: ', st.session_state.progress)
 
-        prompt_tags, tag, prompt_id, items, mode = self.sidebar()
+        # select tag and prompt
+        prompt_tags = self.promptBook['tag'].unique()
+        prompt_tags = np.sort(prompt_tags).tolist()
+
+        print(st.session_state.gallery_focus)
+        tag_idx = prompt_tags.index(st.session_state.gallery_focus['tag']) if st.session_state.gallery_focus[
+                                                                                  'tag'] in prompt_tags else 0
+        print(tag_idx)
+
+        tag = st.radio('Select a tag', prompt_tags, index=tag_idx, horizontal=True)
+        items = self.promptBook[self.promptBook['tag'] == tag].reset_index(drop=True)
+        prompts = np.sort(items['prompt'].unique())[::-1].tolist()
+
+        prompt_idx = prompts.index(st.session_state.gallery_focus['prompt']) if st.session_state.gallery_focus[
+                                                                                    'prompt'] in prompts else 0
+        print(prompt_idx)
+
+        selected_prompt = st.selectbox('Select a prompt', prompts, index=prompt_idx)
+
+        # mode = st.radio('Select a mode', ['Drag and Sort', 'Battle'], index=1)
+        mode = st.session_state.assigned_rank_mode
+
+        items = items[items['prompt'] == selected_prompt].reset_index(drop=True)
+        prompt_id = items['prompt_id'].unique()[0]
+
+        self.sidebar(selected_prompt, items)
         batch_num = len(items) // self.batch_size
         batch_num += 1 if len(items) % self.batch_size != 0 else 0
 
@@ -284,35 +311,43 @@ class RankingApp:
             st.session_state.progress[prompt_id] = 'ranking'
 
         if st.session_state.progress[prompt_id] == 'ranking':
+            st.caption("We might pair some other images that you haven't selected based on our evaluation matrix.")
             if mode == 'Drag and Sort':
                 self.dragsort_mode(items, prompt_id, batch_num)
             elif mode == 'Battle':
                 self.battle_mode(items, prompt_id)
 
         elif st.session_state.progress[prompt_id] == 'finished':
-            st.write('## You have ranked all models for this tag!')
-            st.write('Thank you for your participation! Feel free to do the following things:')
-            # st.write('* Rank for other tags and prompts.')
-            # st.write('* Back to the gallery page to see more images.')
-            # st.write('* Rank again for this tag and prompt.')
-            # st.write('* Check the summary to see what model you like most.')
-            # st.write('*More functions are coming soon... Please stay tuned*')
-            st.button('👈 Rank for other tags and prompts')
-            restart_btn = st.button('🎖️ Rank this prompt again')
-            if restart_btn:
-                st.session_state.progress[prompt_id] = 'ranking'
-                st.session_state.counter[prompt_id] = 0
-                st.session_state.pointer[prompt_id] = {'left': 0, 'right': 1}
-                st.experimental_rerun()
-
-            gallery_btn = st.button('🖼️ Back to Gallery')
-            if gallery_btn:
-                switch_page('gallery')
-
-            summary_btn = st.button('📊 See Summary')
-            if summary_btn:
-                switch_page('summary')
-
+            # st.toast('**Summary is available now!**')
+            # st.write('---')
+            with st.form(key='ranking_finished'):
+                st.info('**🎉 You have ranked all models for this prompt!**')
+                st.write('Feel free to do the following things:')
+
+                # st.write('* Back to the gallery page to see more images.')
+                # st.write('* Rank again for this tag and prompt.')
+                options_panel = st.columns(4)
+
+                with options_panel[0]:
+                    summary_btn = st.form_submit_button('📊 See Summary', use_container_width=True, type='primary')
+                    if summary_btn:
+                        switch_page('summary')
+
+                with options_panel[1]:
+                    gallery_btn = st.form_submit_button('🖼️ Back to Gallery', use_container_width=True)
+                    if gallery_btn:
+                        switch_page('gallery')
+
+                with options_panel[2]:
+                    st.form_submit_button('👆 Rank other prompts', use_container_width=True)
+
+                with options_panel[3]:
+                    restart_btn = st.form_submit_button('🎖️ Re-rank this prompt', use_container_width=True)
+                    if restart_btn:
+                        st.session_state.progress[prompt_id] = 'ranking'
+                        st.session_state.counter[prompt_id] = 0
+                        st.session_state.pointer[prompt_id] = {'left': 0, 'right': 1}
+                        st.experimental_rerun()
 
 def connect_to_db():
     conn = pymysql.connect(
@@ -331,6 +366,9 @@ def connect_to_db():
 if __name__ == "__main__":
     st.set_page_config(page_title="Personal Image Ranking", page_icon="🎖️️", layout="wide")
 
+    with open('./pages/style.css') as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
     if 'user_id' not in st.session_state:
         st.warning('Please log in first.')
         home_btn = st.button('Go to Home Page')

pages/Summary.py

@@ -24,6 +24,15 @@ class DashboardApp:
     def sidebar(self, tags, mode):
         with st.sidebar:
             tag = st.selectbox('Select a tag', tags, key='tag')
+            st.write('---')
+            st.write('## Want a more comprehensive summary?')
+            st.write('Jump back to gallery and select more images to rank!')
+            back_to_gallery = st.button('🖼️ Go to Gallery', key='summary_sidebar_gallery')
+            if back_to_gallery:
+                switch_page('gallery')
+            back_to_ranking = st.button('🎖️ Go to Ranking', key='summary_sidebar_ranking')
+            if back_to_ranking:
+                switch_page('ranking')
 
         return tag
 
@@ -155,9 +164,10 @@ class DashboardApp:
     def app(self):
         st.title('Your Preferred Models', help="Scores are calculated based on your ranking results.")
 
-        mode = st.sidebar.radio('Ranking mode', ['Sort', 'Battle'], horizontal=True, index=1)
+        # mode = st.sidebar.radio('Ranking mode', ['Drag and Sort', 'Battle'], horizontal=True, index=1)
+        mode = st.session_state.assigned_rank_mode
         # get tags from database of the current user
-        db_table = 'sort_results' if mode == 'Sort' else 'battle_results'
+        db_table = 'sort_results' if mode == 'Drag and Sort' else 'battle_results'
 
         tags = ['all']
         curser = RANKING_CONN.cursor()

pages/style.css

@@ -0,0 +1,27 @@
+div.row-widget.stRadio > div {
+ flex-direction: row;
+ align-items: stretch;
+}
+
+div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"]  {
+    /*background-color: rgb(240, 242, 246);*/
+    padding-right: 10px;
+    /*padding-left: 4px;*/
+    padding-bottom: 3px;
+    margin: 4px 0px;
+    border-radius: 0;
+    border-bottom: 2px solid whitesmoke;
+    transition: border-bottom-color 0.2s ease 0s;
+}
+
+/*change the background color of the parent label of the selected radio button*/
+div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"]:has( > input[type="radio"]:checked) {
+    /*background-color: blanchedalmond;*/
+    border-bottom: 2px solid red;
+    transition: border-bottom-color 0.2s ease 0s;
+}
+
+/*hide the circle of the radio button*/
+div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] > div:first-child {
+    display: none;
+}