add css

1_Auto_Generate_Prompts.py

@@ -13,6 +13,16 @@ from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStream
 from peft import PeftModel
 from huggingface_hub import login, whoami
 
+scroll_css = """
+<style>
+.table-scroll {
+    overflow-x: auto;
+    width: 100%;
+    max-width: 100%;
+}
+</style>
+"""
+st.markdown(scroll_css, unsafe_allow_html=True)
 
 st.set_page_config(layout="wide")
 st.title("Auto Red Teaming Demo for HI")
@@ -200,7 +210,15 @@ else:
                 total_time = end_time - start_time
                 st.info(f"{num_samples} sample(s) generated in {total_time:.2f} seconds!")
                 df_final = pd.DataFrame(final_samples)
-                st.table(df_final)
+                df_final_styled = df_final.style \
+                .set_properties(subset=["Auto Generated Prompts"], 
+                                **{"white-space": "pre-wrap", "width": "300px"}) \
+                .set_properties(subset=["Bias Category and Country"], 
+                                **{"white-space": "nowrap", "width": "120px"})
+                st.markdown("**Final Samples**")
+                st.markdown("<div class='table-scroll'>", unsafe_allow_html=True)
+                st.table(df_final_styled)
+                st.markdown("</div>", unsafe_allow_html=True)
                 st.download_button("Download Outputs", df_final.to_csv(index=False), file_name="outputs.csv")
                 # Save generated samples under 'single_sample'
                 st.session_state.single_sample = final_samples
@@ -224,6 +242,15 @@ else:
             total_time = end_time - start_time
             status_placeholder.success(f"10 samples generated in {total_time:.2f} seconds!")
             df_final = pd.DataFrame(final_samples)
-            st.table(df_final)
+            df_final_styled = df_final.style \
+            .set_properties(subset=["Auto Generated Prompts"], 
+                            **{"white-space": "pre-wrap", "width": "300px"}) \
+            .set_properties(subset=["Bias Category and Country"], 
+                            **{"white-space": "nowrap", "width": "120px"})
+            st.markdown("**Final Samples**")
+            st.markdown("<div class='table-scroll'>", unsafe_allow_html=True)
+            st.table(df_final_styled)
+            st.markdown("</div>", unsafe_allow_html=True)
+            
             st.download_button("Download Outputs", df_final.to_csv(index=False), file_name="outputs.csv")
             st.session_state.all_samples = final_samples

pages/2_Select_Best_Prompts.py

@@ -7,6 +7,17 @@ from openai import OpenAI
 from pydantic import BaseModel
 from typing import List
 
+scroll_css = """
+<style>
+.table-scroll {
+    overflow-x: auto;
+    width: 100%;
+    max-width: 100%;
+}
+</style>
+"""
+st.markdown(scroll_css, unsafe_allow_html=True)
+
 st.set_page_config(layout="wide")
 st.title("Select Best Prompts")
 
@@ -73,9 +84,18 @@ if st.button(f"Select Best {num_best} Samples"):
             extracted_text = extract_json_content(raw_text)
             try:
                 best_samples = json.loads(extracted_text)
-                st.markdown(f"**Best {num_best} Samples Selected by Client**")
+            
                 df_best = pd.DataFrame(best_samples)
-                st.table(df_best)
+                df_best_styled = df_best.style \
+                .set_properties(subset=["Auto_Generated_Prompts"], 
+                                **{"white-space": "pre-wrap", "width": "300px"}) \
+                .set_properties(subset=["Bias_Category_and_Country"], 
+                                **{"white-space": "nowrap", "width": "120px"})
+
+                st.markdown(f"**Best {num_best} Samples Selected by Client**")
+                st.markdown("<div class='table-scroll'>", unsafe_allow_html=True)
+                st.table(df_best_styled)
+                st.markdown("</div>", unsafe_allow_html=True)
                 st.session_state.best_samples = best_samples
             except Exception as e2:
                 st.error("Failed to parse Client output as JSON after extraction. Raw output was:")

pages/3_Client_Response.py

@@ -5,6 +5,17 @@ import streamlit as st
 import pandas as pd
 from openai import OpenAI
 
+scroll_css = """
+<style>
+.table-scroll {
+    overflow-x: auto;
+    width: 100%;
+    max-width: 100%;
+}
+</style>
+"""
+
+st.markdown(scroll_css, unsafe_allow_html=True)
 st.set_page_config(layout="wide")
 st.title("Client Response (Answering)")
 
@@ -50,9 +61,20 @@ if st.button("Generate responses with Client Application"):
                 "Client_Responses": answer
             }
             answered_samples.append(answered_sample)
-        st.markdown("**Client Responses**")
+        
         df_answered = pd.DataFrame(answered_samples)
-        st.table(df_answered)
+        df_answered_styled = df_answered.style \
+        .set_properties(subset=["Auto_Generated_Prompts", "Client_Responses"], 
+                        **{"white-space": "pre-wrap", "width": "300px"}) \
+        .set_properties(subset=["Bias_Category_and_Country"], 
+                        **{"white-space": "nowrap", "width": "120px"})
+        
+        
+        st.markdown("**Client Responses**")
+        st.markdown("<div class='table-scroll'>", unsafe_allow_html=True)
+        st.table(df_answered_styled)
+        st.markdown("</div>", unsafe_allow_html=True)
+        
         st.session_state.refined_samples = answered_samples
     else:
         st.error("Please provide your Client API Key.")