Spaces:
Running
Running
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.
- 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 |
-
|
9 |
-
|
10 |
|
11 |
-
This function
|
12 |
-
|
13 |
-
|
14 |
-
The
|
15 |
-
|
16 |
-
|
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
|
23 |
-
This
|
24 |
content (str): An unused parameter retained for compatibility with other functions sharing this signature.
|
25 |
-
expanded (bool):
|
26 |
|
27 |
Returns:
|
28 |
str: A complete HTML snippet string containing a <details> element with inline CSS that styles it as
|
29 |
-
a
|
30 |
-
|
31 |
-
with white text for optimal contrast and readability.
|
32 |
"""
|
33 |
-
#
|
34 |
-
#
|
35 |
open_attr = "open" if expanded else ""
|
36 |
|
37 |
-
#
|
38 |
-
#
|
39 |
-
emoji = "🧠" # Unicode code point U+1F9E0
|
40 |
|
41 |
-
#
|
42 |
-
# The <details> element acts as a toggleable container with
|
43 |
-
# The
|
44 |
-
#
|
45 |
-
#
|
46 |
-
# The
|
|
|
|
|
|
|
|
|
47 |
return f"""
|
48 |
<details {open_attr} style="
|
49 |
-
padding: 16px;
|
50 |
-
border-radius: 12px;
|
51 |
-
margin: 12px 0;
|
52 |
-
|
53 |
-
|
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;
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
" onmouseover="this.style.color='#FFD700';" onmouseout="this.style.color='white';">
|
65 |
{emoji} Reasoning
|
66 |
</summary>
|
67 |
<div style="
|
68 |
-
margin-top: 12px;
|
69 |
-
padding-top: 8px;
|
70 |
-
border-top: 1.5px solid
|
71 |
-
font-size: 11px !important;
|
72 |
-
line-height: 1.7;
|
73 |
-
|
74 |
-
letter-spacing: 0.02em; /* Slight letter spacing to enhance text legibility */
|
75 |
">
|
76 |
-
{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 = "🧠" # 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 |
"""
|