feat: Improve UI/UX across multiple frontend pages

frontend/my_pages/1_upload_UI.py

@@ -345,11 +345,8 @@ async def process_pdf(uploaded_file, file_expander, source_lang="", target_lang=
     # Create a list of uploaded files for selection
     file_options = [file.name for file in uploaded_files]
 
-    selection = st.multiselect(
-        "Choose files to process:",
-        options=file_options,
-        default=file_options,  # By default, select all uploaded files
-    )
+    # Select all uploaded files by default
+    selection = file_options
 
     # Translation configuration per file
     st.markdown("---")

frontend/my_pages/2_images_UI.py

@@ -150,7 +150,10 @@ def display_images(image_response, doc_id=None) -> None:
                         st.error(f"Error loading image {i + 1}: {e}")
 
                 with col2:
-                    st.markdown(f"**Image Key:** {image_data['image_key']}")
+                    # Display AI-generated caption if available
+                    if 'caption' in image_data and image_data['caption']:
+                        st.markdown(f"**Caption:** {image_data['caption']}")
+
                     # Download button - only show if image was successfully loaded
                     if image_bytes:
                         filename = f"image_{i+1}.png"

frontend/my_pages/3_tables_UI.py

@@ -154,7 +154,8 @@ def display_tables(table_response, doc_id=None):
                     else:
                         st.warning("Could not parse table data.")
 
-                    # Display title with page info and copy button
+                    # Display CSV format
+                    st.text("CSV Format")
                     csv_string = df.to_csv(index=False)
                     st.code(csv_string, language="csv")
 

frontend/my_pages/4_wordcloud_UI.py

@@ -83,8 +83,14 @@ async def display_wordcloud(expander: DocumentExpander):
         if res:
             img = await get_wordcloud_image(expander.doc_id)
             st.image(img)
-            markdown_list = [f"- {word}" for word in res["top_words"]]
-            st.markdown("\n".join(markdown_list))
+
+            # Display top words as styled pills
+            st.markdown("**Top Words:**")
+            pills_html = '<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; margin-bottom: 20px;">'
+            for word in res["top_words"]:
+                pills_html += f'<span style="background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.3); color: inherit; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 400; display: inline-block;">{word}</span>'
+            pills_html += '</div>'
+            st.markdown(pills_html, unsafe_allow_html=True)
 
 
 async def display_all(expanders: list[DocumentExpander]):

frontend/my_pages/6_translate_UI.py

@@ -180,7 +180,6 @@ def display_renderer_section(doc_id: str, filename: str, renderer_data: dict, ru
                     st.info("⏳ Translation is currently processing...")
 
                 elif status == "completed":
-                    st.success("✅ Translation completed!")
                     display_translation_info(translation_data)
 
                     # Check and display renderer section