feat: Improve UI/UX across multiple frontend pages

[NotYuSheng]

User description

Summary

This PR improves the user experience across multiple frontend pages by streamlining workflows, improving visual presentation, and reducing redundant information.

---

Changes Made

• Removed file selection multiselect in upload page - all uploaded files are now automatically processed
• Updated images page to display AI-generated captions instead of internal image keys
• Added "CSV Format" label above CSV code block in tables page for clarity
• Styled top words as pills in wordcloud page for better visual presentation
• Removed redundant "Translation completed!" success message in translation page

---

Context / Rationale

These changes enhance the user experience by:

1. Simplifying workflow: Removing unnecessary file selection step as users typically want to process all uploaded files
2. Improving information display: Showing user-relevant captions instead of technical image keys
3. Better visual design: Using pill-style tags for top words improves readability
4. Reducing clutter: Removing redundant success messages that don't add value
5. Adding clarity: Labeling the CSV output format explicitly

---

Related Docs or References

N/A

---

FastAPI Application Checklist (Delete if PR is not relevant)

This PR only affects frontend Streamlit pages and does not modify any FastAPI services.

---

General Checklist

• I have tested these changes locally
• I have updated relevant documentation or added comments where needed
• I have linked relevant issues and tagged reviewers
• I have followed coding conventions and naming standards

---

PR Type

Enhancement

---

Description

• Remove file selection multiselect in upload page

• Display AI-generated captions instead of image keys

• Add "CSV Format" label for table outputs

• Style top words as pills in wordcloud page

---

Diagram Walkthrough

flowchart LR
  A["Upload Page"] --> B["Auto-select all files"]
  C["Images Page"] --> D["Show AI captions"]
  E["Tables Page"] --> F["Add CSV format label"]
  G["Wordcloud Page"] --> H["Style words as pills"]
  I["Translation Page"] --> J["Remove redundant message"]

Loading

File Walkthrough

Relevant files

Enhancement

1_upload_UI.py Auto-select all uploaded files                                                      frontend/my_pages/1_upload_UI.py Removed multiselect widget for file selection Auto-select all uploaded files by default Simplified user workflow by eliminating manual selection step +2/-5      2_images_UI.py Show AI captions instead of image keys                                      frontend/my_pages/2_images_UI.py Display AI-generated captions instead of internal image keys Check for caption availability before displaying Improve user-facing information presentation +4/-1      3_tables_UI.py Add CSV format label for clarity                                                  frontend/my_pages/3_tables_UI.py Added "CSV Format" label above CSV code block Improved clarity of table output format +2/-1      4_wordcloud_UI.py Style top words as visual pills                                                    frontend/my_pages/4_wordcloud_UI.py Replaced markdown list with styled pill components Added HTML styling for better visual presentation Improved readability of top words display +8/-2      6_translate_UI.py Remove redundant success message                                                  frontend/my_pages/6_translate_UI.py Removed redundant "Translation completed!" success message Streamlined translation status display +0/-1

---

[gemini-code-assist]

Summary of Changes

Hello @NotYuSheng, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience across several frontend pages by implementing targeted UI/UX improvements. Changes include streamlining file processing, providing more user-friendly information displays, improving visual presentation, and reducing unnecessary notifications, all aimed at making the application more intuitive and efficient for users.

Highlights

• Upload Workflow Streamlined: The file selection multiselect on the upload page has been removed, ensuring all uploaded files are automatically processed without user intervention.
• Image Display Enhanced: The images page now displays AI-generated captions for images, replacing the internal image keys for better user understanding.
• CSV Output Clarity: A "CSV Format" label has been added above the CSV code block on the tables page to explicitly indicate the format of the displayed data.
• Wordcloud Visuals Improved: Top words in the wordcloud page are now styled as interactive "pills" for a more modern and visually appealing presentation.
• Translation Page Decluttered: The redundant "Translation completed!" success message has been removed from the translation page to reduce visual clutter.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[codiumai-pr-agent-free]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Security	✅ Prevent XSS by escaping HTML Suggestion Impact: The commit implemented the exact suggestion by importing html module and using html.escape() on the word variable before embedding it in the HTML string to prevent XSS vulnerabilities code diff: +import html from components.documents import document_multiselect_with_expander, DocumentExpander PDF_PROCESSOR_URL = os.environ["PDF_PROCESSOR_URL"] @@ -88,7 +89,8 @@ 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>' + escaped_word = html.escape(word) + 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;">{escaped_word}</span>' To prevent a potential Cross-Site Scripting (XSS) vulnerability, escape the word variable using html.escape() before embedding it in the HTML string that is rendered with unsafe_allow_html=True. frontend/my_pages/4_wordcloud_UI.py [87-93] +import html + # 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>' + escaped_word = html.escape(word) + 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;">{escaped_word}</span>' pills_html += '</div>' st.markdown(pills_html, unsafe_allow_html=True) [Suggestion processed] Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a potential XSS security vulnerability from rendering unescaped data with unsafe_allow_html=True and provides the correct fix.	High
Possible issue	✅ Prevent crash on null dataframe Suggestion Impact: The commit implemented exactly what was suggested - moving the CSV conversion code (display text, to_csv call, and code display) inside the if block to prevent crashes when df is None code diff: + + # Display CSV format + st.text("CSV Format") + csv_string = df.to_csv(index=False) + st.code(csv_string, language="csv") else: st.warning("Could not parse table data.") - - # Display CSV format - st.text("CSV Format") - csv_string = df.to_csv(index=False) - st.code(csv_string, language="csv") Prevent a potential AttributeError by moving the CSV conversion logic (df.to_csv) inside the if df is not None: block to ensure it only runs when the dataframe exists. frontend/my_pages/3_tables_UI.py [151-160] # Show dataframe if df is not None: st.dataframe(df, use_container_width=True) + + # Display CSV format + st.text("CSV Format") + csv_string = df.to_csv(index=False) + st.code(csv_string, language="csv") else: st.warning("Could not parse table data.") -# Display CSV format -st.text("CSV Format") -csv_string = df.to_csv(index=False) -st.code(csv_string, language="csv") - [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential AttributeError that would crash the application if the dataframe df is None, and provides a simple, correct fix.	Medium
Update

[gemini-code-assist]

Code Review

This pull request introduces several valuable UI/UX improvements across the frontend pages, such as simplifying the file upload workflow and enhancing data presentation. The changes are well-aligned with the goal of improving user experience. I've found one high-severity security issue in the word cloud page where user-provided content is rendered as HTML without sanitization, which could lead to an XSS vulnerability. I've provided a detailed comment with a code suggestion to address this.