-
Notifications
You must be signed in to change notification settings - Fork 0
Fix emotion model ID configuration to use DeBERTa instead of DistilRoBERTa #198
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
9211aa6
373da35
97a6f63
ad48b66
bdd5d57
b228a9e
6095624
1b8466f
3ba8ed0
c5fde3f
f62e084
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| # CSS Architecture - Modular Component Structure | ||
|
|
||
| This directory contains a modular CSS architecture that addresses code review feedback | ||
| for improved maintainability and performance. | ||
|
|
||
| ## Structure | ||
|
|
||
| ### Main Files | ||
|
|
||
| - `main.css` - Main entry point that imports all component stylesheets | ||
| - `comprehensive-demo.css` - Original monolithic file (kept for reference) | ||
|
|
||
| ### Component Files (`components/` directory) | ||
|
|
||
| - `variables.css` - CSS custom properties and design system variables | ||
| - `base.css` - Base styles, typography, and global elements | ||
| - `navigation.css` - Navigation bar and menu styles | ||
| - `buttons.css` - Button components and interactive elements | ||
| - `forms.css` - Form controls and input styling | ||
| - `containers.css` - Layout containers and hero sections | ||
| - `cards.css` - Feature cards and content cards | ||
| - `progress.css` - Progress indicators and pipeline components | ||
| - `charts.css` - Data visualization and chart components | ||
| - `messages.css` - Error and success message styling | ||
| - `animations.css` - Keyframes, transitions, and animation effects | ||
| - `responsive.css` - Media queries and responsive design rules | ||
|
|
||
| ## Benefits | ||
|
|
||
| 1. **Improved Maintainability**: Each component is isolated and easier to modify | ||
| 2. **Better Performance**: Mobile-specific optimizations (e.g., disabled | ||
| `background-attachment: fixed`) | ||
| 3. **Reduced Redundancy**: Consolidated duplicate rules and eliminated conflicts | ||
| 4. **Enhanced Readability**: Logical organization makes code easier to understand | ||
| 5. **Scalability**: Easy to add new components without affecting existing styles | ||
|
|
||
| ## Usage | ||
|
|
||
| Simply include `main.css` in your HTML: | ||
|
|
||
| ```html | ||
| <link href="css/main.css" rel="stylesheet" /> | ||
| ``` | ||
|
|
||
| The main.css file automatically imports all component stylesheets in the correct order. | ||
|
|
||
| ## Performance Optimizations | ||
|
|
||
| - Mobile devices use `background-attachment: scroll` instead of `fixed` for better | ||
| performance | ||
| - Consolidated duplicate CSS rules to reduce file size | ||
| - Optimized favicon.ico for better loading performance | ||
| - Modular structure allows for better caching strategies | ||
|
|
||
| ## Browser Support | ||
|
|
||
| - Modern browsers with CSS custom properties support | ||
| - Graceful degradation for older browsers | ||
| - Mobile-first responsive design approach |
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,89 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Animations and Transitions */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @keyframes fadeInUp { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| from { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| opacity: 0; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transform: translateY(40px) scale(0.95); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| opacity: 1; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transform: translateY(0) scale(1); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @keyframes float { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 0%, 100% { transform: translateY(0px) rotate(0deg); } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 33% { transform: translateY(-20px) rotate(1deg); } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 66% { transform: translateY(-10px) rotate(-1deg); } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @keyframes slideInLeft { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| opacity: 1; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transform: translateX(0); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @keyframes shimmer { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 0% { transform: translateX(-100%); } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 100% { transform: translateX(100%); } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @keyframes audioPulse { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 0% { height: 20px; } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 100% { height: 40px; } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .floating-card { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation: float 6s ease-in-out infinite; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Result sections */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .result-section-hidden { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: none !important; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .result-section-visible { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: block; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .result-section { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: none; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .result-section.show { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: block; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Loading States */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .loading-spinner { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: none; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| color: #e2e8f0; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .loading-spinner.show { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: block; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Dynamic Layout States */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #inputLayout { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition: all 0.5s ease-in-out; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #resultsLayout { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition: all 0.5s ease-in-out; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #titleWithFlow { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition: all 0.3s ease-in-out; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+70
to
+80
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These transition properties are being redefined within the |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Enhanced transitions for responsive changes */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @media (prefers-reduced-motion: no-preference) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #titleWithFlow, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #inputLayout, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #resultsLayout { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+82
to
+89
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Honor We now add multiple continuous animations and transitions, but we only gate the eased timing under @media (prefers-reduced-motion: no-preference) {
#titleWithFlow,
#inputLayout,
#resultsLayout {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
+
+@media (prefers-reduced-motion: reduce) {
+ .floating-card,
+ .result-section-visible,
+ .result-section.show {
+ animation: none !important;
+ }
+
+ #titleWithFlow,
+ #inputLayout,
+ #resultsLayout {
+ transition: none !important;
+ }
+}📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Original file line number | Diff line number | Diff line change | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,77 @@ | ||||||||||||
| /* Base Styles and Typography */ | ||||||||||||
| body.comprehensive-demo { | ||||||||||||
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | ||||||||||||
| line-height: 1.6; | ||||||||||||
| color: #e2e8f0; | ||||||||||||
| background: var(--dark-gradient); | ||||||||||||
| background-attachment: fixed; | ||||||||||||
| min-height: 100vh; | ||||||||||||
| padding-top: 80px; /* Account for fixed navbar */ | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| /* Disable background-attachment: fixed on mobile devices for performance */ | ||||||||||||
| @media (max-width: 768px) { | ||||||||||||
| body.comprehensive-demo { | ||||||||||||
| background-attachment: scroll; | ||||||||||||
| } | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| /* Material Icons styling */ | ||||||||||||
| .material-icons { | ||||||||||||
| font-family: 'Material Icons'; | ||||||||||||
| font-weight: normal; | ||||||||||||
| font-style: normal; | ||||||||||||
| font-size: 24px; | ||||||||||||
| line-height: 1; | ||||||||||||
| letter-spacing: normal; | ||||||||||||
| text-transform: none; | ||||||||||||
| display: inline-block; | ||||||||||||
| white-space: nowrap; | ||||||||||||
| word-wrap: normal; | ||||||||||||
| direction: ltr; | ||||||||||||
| -webkit-font-feature-settings: 'liga'; | ||||||||||||
| -webkit-font-smoothing: antialiased; | ||||||||||||
| vertical-align: middle; | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| /* Info icon styling */ | ||||||||||||
| .info-icon { | ||||||||||||
| font-size: 16px !important; | ||||||||||||
| color: #6b7280; | ||||||||||||
| margin-left: 6px; | ||||||||||||
| cursor: help; | ||||||||||||
| opacity: 0.7; | ||||||||||||
| transition: var(--transition-smooth); | ||||||||||||
| vertical-align: middle; | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| .info-icon:hover { | ||||||||||||
| color: var(--primary-color); | ||||||||||||
| opacity: 1; | ||||||||||||
| transform: scale(1.1); | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| /* Text Effects */ | ||||||||||||
| .gradient-text { | ||||||||||||
| background: var(--primary-gradient); | ||||||||||||
| -webkit-background-clip: text; | ||||||||||||
| -webkit-text-fill-color: transparent; | ||||||||||||
| background-clip: text; | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| /* Reduced Motion Preferences */ | ||||||||||||
| @media (prefers-reduced-motion: reduce) { | ||||||||||||
| * { | ||||||||||||
| animation: none !important; | ||||||||||||
| transition: none !important; | ||||||||||||
| } | ||||||||||||
|
Comment on lines
+64
to
+67
|
||||||||||||
| * { | |
| animation: none !important; | |
| transition: none !important; | |
| } | |
| /* Only disable non-essential, decorative animations/transitions */ |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| /* Button Styles */ | ||
| .comprehensive-demo .btn-primary { | ||
| background: var(--primary-gradient); | ||
| border: none; | ||
| border-radius: 12px; | ||
| padding: 12px 30px; | ||
| font-weight: 600; | ||
| transition: var(--transition-bounce); | ||
| box-shadow: var(--shadow-glow); | ||
| } | ||
|
|
||
| .comprehensive-demo .btn-primary:hover { | ||
| transform: translateY(-2px) scale(1.05); | ||
| box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4); | ||
| } | ||
|
|
||
| .comprehensive-demo .btn:focus-visible { | ||
| outline: 3px solid #667eea; | ||
| outline-offset: 2px; | ||
| } | ||
|
|
||
| .comprehensive-demo .btn-primary:focus-visible { | ||
| outline: 3px solid #c084fc; | ||
| outline-offset: 2px; | ||
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45); | ||
| } | ||
|
|
||
| /* Button Consistency and Improved Spacing */ | ||
| .btn-lg { | ||
| padding: 0.75rem 1.5rem; | ||
| font-weight: 600; | ||
| border-radius: 12px; | ||
| transition: all 0.3s ease; | ||
| min-width: 120px; /* Ensure consistent button widths */ | ||
| } | ||
|
|
||
| /* Debug Test Section Toggleable */ | ||
| #debugTestSection .btn-sm { | ||
| padding: 0.5rem 1rem; | ||
| font-size: 0.875rem; | ||
| border-radius: 8px; | ||
| transition: all 0.2s ease; | ||
| } | ||
|
|
||
| /* Responsive button adjustments */ | ||
| @media (max-width: 768px) { | ||
| .btn-lg { | ||
| min-width: 200px; | ||
| width: 100%; | ||
| max-width: 300px; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 576px) { | ||
| .btn-lg { | ||
| padding: 0.6rem 1rem; | ||
| font-size: 0.9rem; | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change is part of updating the model ID across multiple files. I have two suggestions to improve maintainability:
Standardize Environment Variable Name: The environment variable for the model ID is inconsistent across scripts. This script uses
MODEL_ID, while others useEMOTION_MODEL_IDorHF_REPO. Standardizing on a single, descriptive name likeEMOTION_MODEL_IDwould improve clarity and reduce configuration errors.Centralize Default Model ID: The default model ID string
"duelker/samo-goemotions-deberta-v3-large"is now repeated in 6 different files. This makes future updates error-prone. Consider defining this default value as a constant in a shared configuration file (e.g.,src/constants.py) and importing it where needed. This would centralize the configuration.