hadadrjt commited on
Commit
6c284cf
·
1 Parent(s): 7f36913

ai: Unset colors in reasoning section.

Browse files

* Gradio has built-in dark and light themes by default.

* Removing these themes enables automatic color detection
based on the user's operating system preference for
light or dark mode.

* In other words, it uses the default colors provided
by Gradio's CSS without any manual overrides.

Files changed (1) hide show
  1. src/ui/reasoning.py +46 -50
src/ui/reasoning.py CHANGED
@@ -5,75 +5,71 @@
5
 
6
  def styles(reasoning: str, content: str, expanded: bool = False) -> str:
7
  """
8
- Create a visually captivating and interactive HTML <details> block that elegantly presents reasoning text
9
- inside a beautifully styled collapsible container with enhanced user experience features.
10
 
11
- This function generates a sophisticated collapsible section using HTML and inline CSS, designed to grab
12
- attention with a modern, polished look. It leverages subtle shadows, smooth transitions, and vibrant styling
13
- to make the reasoning content stand out while maintaining excellent readability on dark backgrounds.
14
- The container uses the default background color to blend seamlessly with its surroundings, ensuring
15
- versatility in different UI contexts. The summary header includes an engaging emoji and changes color on hover
16
- to invite user interaction. The reasoning text is carefully spaced and styled with a clean font and
17
- crisp white color for maximum clarity. The collapsible block can start expanded or collapsed based on the
18
- 'expanded' parameter. The 'content' parameter remains unused here to keep the function signature consistent
19
- with similar functions.
20
 
21
  Args:
22
- reasoning (str): The main explanation or reasoning text to be displayed inside the collapsible block.
23
- This content is wrapped in a styled <div> for clear presentation.
24
  content (str): An unused parameter retained for compatibility with other functions sharing this signature.
25
- expanded (bool): Determines if the collapsible block is initially open (True) or closed (False) when rendered.
26
 
27
  Returns:
28
  str: A complete HTML snippet string containing a <details> element with inline CSS that styles it as
29
- a sleek, interactive collapsible container. The styling includes padding, rounded corners,
30
- a subtle but dynamic shadow, smooth hover effects on the summary header, and carefully sized fonts
31
- with white text for optimal contrast and readability.
32
  """
33
- # Conditionally add the 'open' attribute to the <details> element if expanded is True,
34
- # so the block starts expanded when rendered in the browser.
35
  open_attr = "open" if expanded else ""
36
 
37
- # Use the HTML numeric character reference for the brain emoji instead of manual emoji character.
38
- # This ensures consistent rendering and avoids direct emoji input.
39
- emoji = "&#129504;" # Unicode code point U+1F9E0 for 🧠 emoji
40
 
41
- # Return the full HTML string with inline CSS styles applied to create an eye-catching, user-friendly collapsible block.
42
- # The <details> element acts as a toggleable container with smooth rounded corners and a dynamic shadow that subtly intensifies on hover.
43
- # The <summary> element serves as the clickable header with a brain emoji represented by its HTML code to visually represent reasoning,
44
- # featuring a color transition on hover to encourage user interaction.
45
- # The reasoning text is enclosed in a <div> with generous spacing, a delicate top border, and crisp white text for excellent readability.
46
- # The entire block uses a clean, modern sans-serif font and avoids any background color override to maintain design flexibility.
 
 
 
 
47
  return f"""
48
  <details {open_attr} style="
49
- padding: 16px; /* Comfortable inner spacing for a spacious feel */
50
- border-radius: 12px; /* Smoothly rounded corners for a modern, friendly appearance */
51
- margin: 12px 0; /* Vertical margin to separate from other page elements */
52
- box-shadow: 0 4px 12px rgba(0,0,0,0.35); /* Deeper, softly diffused shadow to create a subtle floating effect */
53
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Crisp, modern font stack for excellent readability */
54
- color: white; /* Bright white text to stand out clearly on dark or varied backgrounds */
55
- transition: box-shadow 0.3s ease-in-out; /* Smooth shadow transition for dynamic visual feedback on hover */
56
  ">
57
  <summary style="
58
- font-weight: 700; /* Bold font weight to make the summary header prominent */
59
- color: white; /* White text color for consistent contrast */
60
- font-size: 14px !important; /* Slightly larger font size for better emphasis */
61
- cursor: pointer; /* Pointer cursor to indicate the summary is clickable */
62
- user-select: none; /* Prevent text selection on click for cleaner interaction */
63
- transition: color 0.25s ease-in-out; /* Smooth color transition when hovering */
64
- " onmouseover="this.style.color='#FFD700';" onmouseout="this.style.color='white';">
65
  {emoji} Reasoning
66
  </summary>
67
  <div style="
68
- margin-top: 12px; /* Clear separation between summary and content */
69
- padding-top: 8px; /* Additional padding for comfortable reading space */
70
- border-top: 1.5px solid rgba(255, 255, 255, 0.25); /* Elegant translucent top border to visually separate content */
71
- font-size: 11px !important; /* Slightly larger font size for improved readability */
72
- line-height: 1.7; /* Increased line height for comfortable text flow */
73
- color: white; /* Maintain white text color for clarity */
74
- letter-spacing: 0.02em; /* Slight letter spacing to enhance text legibility */
75
  ">
76
- {reasoning} <!-- Reasoning -->
77
  </div>
78
  </details>
79
  """
 
5
 
6
  def styles(reasoning: str, content: str, expanded: bool = False) -> str:
7
  """
8
+ Generate a clean, interactive HTML <details> block that displays reasoning text inside a collapsible container
9
+ with subtle styling and enhanced user experience, without applying any custom colors or shadows.
10
 
11
+ This function creates a collapsible section using HTML and inline CSS that focuses on simplicity and readability.
12
+ It avoids setting any custom text or background colors and does not include any box shadow effects,
13
+ allowing the block to inherit colors and styles from its surrounding environment.
14
+ The summary header includes a brain emoji represented by its HTML numeric character reference to symbolize reasoning.
15
+ The collapsible block can be rendered initially expanded or collapsed based on the 'expanded' parameter.
16
+ The 'content' parameter is unused but kept for compatibility with similar function signatures.
 
 
 
17
 
18
  Args:
19
+ reasoning (str): The explanation or reasoning text to be displayed inside the collapsible block.
20
+ This text is wrapped in a styled <div> for clear presentation.
21
  content (str): An unused parameter retained for compatibility with other functions sharing this signature.
22
+ expanded (bool): If True, the collapsible block is initially open; if False, it starts closed.
23
 
24
  Returns:
25
  str: A complete HTML snippet string containing a <details> element with inline CSS that styles it as
26
+ a simple, user-friendly collapsible container. The styling includes padding, rounded corners,
27
+ smooth transitions on the summary header's text color, and readable font sizing without any color overrides or shadows.
 
28
  """
29
+ # Determine whether to include the 'open' attribute in the <details> tag.
30
+ # If 'expanded' is True, the block will be rendered open by default in the browser.
31
  open_attr = "open" if expanded else ""
32
 
33
+ # Define the brain emoji using its HTML numeric character reference to ensure consistent display
34
+ # across different browsers and platforms, avoiding potential encoding issues.
35
+ emoji = "&#129504;" # Unicode code point U+1F9E0 representing the 🧠 emoji
36
 
37
+ # Construct and return the full HTML string for the collapsible block.
38
+ # The <details> element acts as a toggleable container with padding and rounded corners for a modern look.
39
+ # The inline styles avoid setting explicit colors or shadows, allowing the block to inherit styles from its context.
40
+ # The <summary> element serves as the clickable header, featuring the brain emoji and the label "Reasoning".
41
+ # It includes styling for font weight, size, cursor, and smooth color transitions on hover.
42
+ # The hover effect is implemented using inline JavaScript event handlers that maintain the inherited color,
43
+ # ensuring no color changes occur but allowing for potential future customization.
44
+ # The reasoning text is wrapped inside a <div> with spacing and a subtle top border to visually separate it from the summary.
45
+ # Typography settings improve readability with increased line height and slight letter spacing.
46
+ # The 'content' parameter is intentionally unused but present to maintain compatibility with similar function signatures.
47
  return f"""
48
  <details {open_attr} style="
49
+ padding: 16px; /* Inner spacing for comfortable content layout */
50
+ border-radius: 12px; /* Rounded corners for a smooth, friendly appearance */
51
+ margin: 12px 0; /* Vertical spacing to separate from adjacent elements */
52
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, readable font stack */
53
+ transition: box-shadow 0.3s ease-in-out; /* Transition effect retained though no shadow is applied */
 
 
54
  ">
55
  <summary style="
56
+ font-weight: 700; /* Bold text to highlight the summary header */
57
+ font-size: 14px !important; /* Slightly larger font size for emphasis */
58
+ cursor: pointer; /* Cursor changes to pointer to indicate interactivity */
59
+ user-select: none; /* Prevents text selection on click for cleaner UX */
60
+ transition: color 0.25s ease-in-out; /* Smooth transition for color changes on hover */
61
+ " onmouseover="this.style.color='inherit';" onmouseout="this.style.color='inherit';">
 
62
  {emoji} Reasoning
63
  </summary>
64
  <div style="
65
+ margin-top: 12px; /* Space separating the summary from the content */
66
+ padding-top: 8px; /* Additional padding for comfortable reading */
67
+ border-top: 1.5px solid; /* Subtle top border to visually separate content */
68
+ font-size: 11px !important; /* Slightly larger font size for better readability */
69
+ line-height: 1.7; /* Increased line height for easy text flow */
70
+ letter-spacing: 0.02em; /* Slight letter spacing to enhance legibility */
 
71
  ">
72
+ {reasoning} <!-- Reasoning -->
73
  </div>
74
  </details>
75
  """