Spaces:
Running
Running
File size: 3,615 Bytes
1a93ca4 f33c95a 1a93ca4 c5c05c0 3bbf674 c5c05c0 ff1ba74 1a93ca4 f33c95a 1a93ca4 f33c95a 1a93ca4 f33c95a 1a93ca4 f33c95a 1a93ca4 c5c05c0 ff1ba74 c5c05c0 d701d46 c5c05c0 1a93ca4 c5c05c0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | """
Sidebar component with module and parameter selection dropdowns.
This component provides the left sidebar interface for selecting:
- Attention modules
- Layer blocks (residual stream outputs)
- Normalization parameters
- Logit lens parameters
"""
from dash import html, dcc
def create_sidebar():
"""Create the left sidebar with selection dropdowns."""
return html.Div([
# Toggle button for collapsing/expanding sidebar
html.Button(
html.I(className="fas fa-chevron-right"), # Start with right chevron (collapsed)
id="sidebar-toggle-btn",
className="sidebar-toggle-button",
title="Toggle sidebar"
),
# Sidebar content (hidden when collapsed)
html.Div([
html.H3("Module Selection", className="sidebar-title"),
html.P("Advanced: Select which model components to inspect. "
"The defaults work well for most explorations.",
style={'color': '#6c757d', 'fontSize': '11px', 'marginBottom': '12px', 'lineHeight': '1.4'}),
# Loading/status indicator
html.Div(id="loading-indicator", className="loading-container"),
# Attention modules dropdown
html.Div([
html.Label("Attention Modules:", className="dropdown-label"),
dcc.Dropdown(
id='attention-modules-dropdown',
options=[],
value=None,
placeholder="Select attention modules...",
multi=True,
className="module-dropdown"
)
], className="dropdown-container"),
# Layer blocks dropdown (residual stream outputs)
html.Div([
html.Label("Layer Blocks:", className="dropdown-label"),
dcc.Dropdown(
id='block-modules-dropdown',
options=[],
value=None,
placeholder="Select layer blocks...",
multi=True,
className="module-dropdown"
)
], className="dropdown-container"),
# Normalization parameters dropdown
html.Div([
html.Label("Normalization Parameters:", className="dropdown-label"),
dcc.Dropdown(
id='norm-params-dropdown',
options=[],
value=None,
placeholder="Select norm parameters...",
multi=True,
className="module-dropdown"
)
], className="dropdown-container"),
# Action buttons
html.Div([
html.Button(
"Clear Selections",
id="clear-selections-btn",
className="action-button secondary-button",
title="Reset all module selections to default"
)
], className="button-container"),
# Reset Ablation button (hidden by default, shown when in ablation mode)
html.Div([
html.Button(
[
html.I(className="fas fa-undo", style={'marginRight': '8px'}),
"Reset Ablation"
],
id="reset-ablation-btn",
className="action-button warning-button",
style={'marginTop': '10px'}
)
], id="reset-ablation-container", style={'display': 'none'})
], id="sidebar-content", className="sidebar-content")
])
|