Fix emotion model ID configuration to use DeBERTa instead of DistilRoBERTa#198
Conversation
Ultra-granular split for Sourcery compatibility (30k chars < 150k limit): - favicon.ico: Professional website favicon - css/comprehensive-demo.css: Advanced demo styling with CSS variables Part 3/4 of website files from feat/clean-demo-website. Completes the website assets for visual branding and styling. Original work attribution: PR #169 feat/clean-demo-website 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Consolidate duplicate CSS rules (.demo-container, .feature-card, #textInput) - Fix aggressive universal selector in prefers-reduced-motion with specific classes - Make .step-label selector more specific to avoid conflicts - Merge duplicate @media (max-width: 768px) blocks for better maintainability
- Add variables.css with design system variables - Add base.css with typography and global styles - Add main.css as entry point for component imports
- Add buttons.css for button styles and interactions - Add forms.css for form controls and input styling - Add navigation.css for navbar and menu components - Add cards.css for feature cards and content containers
- Add containers.css for layout containers and hero sections - Add progress.css for progress indicators and pipeline components - Add charts.css for data visualization and chart components - Add animations.css for transitions and animation effects
- Add messages.css for error and success message styling - Add responsive.css for media queries and responsive design - Add comprehensive README.md explaining the modular CSS architecture
- Merge feat/website-assets branch with comprehensive improvements - Resolve merge conflicts between main and website-assets branches - Keep improved modular CSS architecture and code review fixes - Include proper binary favicon.ico and component-based CSS structure - Address all code review issues: mobile performance, duplicate rules, selectors
…BERTa Update EMOTION_MODEL_ID default from '0xmnrv/samo' to 'duelker/samo-goemotions-deberta-v3-large' across 5 critical files to ensure Cloud Run services use the correct fine-tuned model. Files changed: - src/unified_ai_api.py: Main API model loading - scripts/deployment/bake_emotion_model.py: Model baking script - scripts/deployment/patch_config_and_upload.py: Config patching - scripts/maintenance/infer_mapping_and_eval.py: Evaluation script - scripts/maintenance/metrics_test.py: Metrics testing 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Update HF_REPO default from '0xmnrv/samo' to 'duelker/samo-goemotions-deberta-v3-large' in the serverless testing script to ensure consistency across all testing tools. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @uelkerd, your pull request is larger than the review limit of 150000 diff characters
WalkthroughUpdates default Hugging Face model ID to "duelker/samo-goemotions-deberta-v3-large" across scripts and src/unified_ai_api.py. Adds a modular CSS architecture with a main aggregator, component styles, responsive/animation rules, and a CSS README. Also updates/expands comprehensive-demo.css. No logic or control-flow changes beyond defaults. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Here's the code health analysis summary for commits Analysis Summary
|
Summary of ChangesHello @uelkerd, I'm Gemini Code Assist1! 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 addresses two distinct but important areas: it corrects an issue where Cloud Run services were using an outdated emotion detection model by updating the model ID to a more advanced DeBERTa-v3-large version, and it significantly overhauls the website's CSS architecture. The CSS refactoring introduces a modular component-based system, moving away from a single large stylesheet to a more organized and scalable structure, which will enhance future development and site performance. Highlights
Using Gemini Code AssistThe 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
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 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
|
There was a problem hiding this comment.
Pull Request Overview
This PR restructures the website CSS architecture for better maintainability and organization. The changes extract inline styles from HTML into a modular component-based system and update the comprehensive demo page with improved functionality and clean separation of concerns.
- CSS refactoring from monolithic to modular component structure
- Enhanced comprehensive demo page with feature tabs and improved UI
- Migration from Material Icons to Font Awesome for better consistency
Reviewed Changes
Copilot reviewed 22 out of 23 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| website/css/main.css | New main CSS entry point importing component stylesheets |
| website/css/comprehensive-demo.css | Original styles preserved with improvements |
| website/css/components/ | Modular CSS components organized by functionality |
| website/comprehensive-demo.html | Complete redesign with tabbed interface and enhanced features |
| src/unified_ai_api.py | Update default emotion model ID configuration |
| scripts/*.py | Update default emotion model ID across deployment scripts |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| :root { | ||
| --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); | ||
| --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); | ||
| --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); | ||
| --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%); | ||
|
|
||
| --primary-color: #8b5cf6; | ||
| --secondary-color: #a855f7; | ||
| --accent-color: #c084fc; | ||
| --dark-color: #0f0f23; | ||
| --darker-color: #0a0a1a; | ||
| --light-accent: #e9d5ff; | ||
| --glass-bg: rgba(139, 92, 246, 0.1); | ||
| --glass-border: rgba(139, 92, 246, 0.2); | ||
| --error-color: #ef4444; | ||
| --success-color: #10b981; | ||
|
|
||
| --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
| --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
| --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3); | ||
| --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
There was a problem hiding this comment.
CSS variables are duplicated between the comprehensive-demo.css file and the modular components/variables.css file. This creates maintenance overhead and potential inconsistencies. Since the modular structure is being introduced, consider removing the duplicate variable definitions from this file and only keeping them in components/variables.css.
| :root { | |
| --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); | |
| --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); | |
| --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); | |
| --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%); | |
| --primary-color: #8b5cf6; | |
| --secondary-color: #a855f7; | |
| --accent-color: #c084fc; | |
| --dark-color: #0f0f23; | |
| --darker-color: #0a0a1a; | |
| --light-accent: #e9d5ff; | |
| --glass-bg: rgba(139, 92, 246, 0.1); | |
| --glass-border: rgba(139, 92, 246, 0.2); | |
| --error-color: #ef4444; | |
| --success-color: #10b981; | |
| --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3); | |
| --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } |
|
|
||
| const emotionSpan = document.createElement('span'); | ||
| emotionSpan.className = 'fw-bold text-capitalize'; | ||
| emotionSpan.textContent = emotion.emotion; // textContent automatically escapes HTML |
There was a problem hiding this comment.
[nitpick] While the comment is correct about automatic HTML escaping, it would be more appropriate to use a JSDoc-style comment or move this explanation to a higher-level function documentation, as inline comments like this can clutter the code when used extensively throughout the codebase.
| emotionSpan.textContent = emotion.emotion; // textContent automatically escapes HTML | |
| emotionSpan.textContent = emotion.emotion; |
| * { | ||
| animation: none !important; | ||
| transition: none !important; | ||
| } |
There was a problem hiding this comment.
The universal selector (*) with !important declarations is overly aggressive and can break necessary animations for functionality (like focus indicators or loading states). Consider targeting specific animation classes or using a more selective approach to preserve essential UI feedback while respecting user preferences.
| * { | |
| animation: none !important; | |
| transition: none !important; | |
| } | |
| /* Only disable non-essential, decorative animations/transitions */ |
| container.innerHTML = ` | ||
| <div class="alert alert-info"> | ||
| <strong>Rate Limit Test Results:</strong><br> | ||
| Successful requests: ${successCount}<br> | ||
| Rate limited requests: ${rateLimitedCount}<br> | ||
| Rate limiting is working correctly! | ||
| </div> | ||
| `; |
There was a problem hiding this comment.
Using innerHTML with template literals containing user-controlled data (successCount, rateLimitedCount) can potentially introduce XSS vulnerabilities if the data is not properly sanitized. Consider using textContent for the dynamic values or createElement/appendChild approach for safer DOM manipulation.
| container.innerHTML = ` | |
| <div class="alert alert-info"> | |
| <strong>Rate Limit Test Results:</strong><br> | |
| Successful requests: ${successCount}<br> | |
| Rate limited requests: ${rateLimitedCount}<br> | |
| Rate limiting is working correctly! | |
| </div> | |
| `; | |
| // Safer DOM manipulation to avoid XSS | |
| container.innerHTML = ""; // Clear previous content | |
| const alertDiv = document.createElement("div"); | |
| alertDiv.className = "alert alert-info"; | |
| const strong = document.createElement("strong"); | |
| strong.textContent = "Rate Limit Test Results:"; | |
| alertDiv.appendChild(strong); | |
| alertDiv.appendChild(document.createElement("br")); | |
| const successText = document.createTextNode("Successful requests: " + successCount); | |
| alertDiv.appendChild(successText); | |
| alertDiv.appendChild(document.createElement("br")); | |
| const rateLimitedText = document.createTextNode("Rate limited requests: " + rateLimitedCount); | |
| alertDiv.appendChild(rateLimitedText); | |
| alertDiv.appendChild(document.createElement("br")); | |
| const infoText = document.createTextNode("Rate limiting is working correctly!"); | |
| alertDiv.appendChild(infoText); | |
| container.appendChild(alertDiv); |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request correctly updates the hardcoded emotion model ID to the new DeBERTa model across six Python scripts. It also includes a significant and beneficial refactoring of the website's CSS, moving from a monolithic file to a modular, component-based architecture. My review focuses on improving the maintainability of both the Python scripts and the new CSS structure. I've suggested standardizing environment variable names and centralizing the default model ID to reduce redundancy in the Python code. For the CSS, I've pointed out a potentially redundant stylesheet, an opportunity to remove duplicate transition rules, and suggested ways to avoid using !important for better long-term maintainability.
| from huggingface_hub import HfApi, HfFolder | ||
|
|
||
| MODEL_ID = os.getenv("MODEL_ID", "0xmnrv/samo") | ||
| MODEL_ID = os.getenv("MODEL_ID", "duelker/samo-goemotions-deberta-v3-large") |
There was a problem hiding this comment.
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.
| @@ -1,52 +1,1213 @@ | |||
| /* Comprehensive Demo Specific Styles */ | |||
| /* Comprehensive Demo Styles - Extracted from HTML for better maintainability */ | |||
There was a problem hiding this comment.
This file is described in website/css/README.md as the 'Original monolithic file (kept for reference)', but this PR updates it to be a new monolithic file containing all the refactored component styles. This seems to create a duplicate, manually-managed bundle of the component stylesheets, which are already imported by main.css.
If main.css is the new entry point for styles, this file appears redundant and could cause confusion or maintenance issues. Was this file intended to be committed with these changes? If it's for reference, it should probably be left as the original version or deleted to avoid having two sources of truth for the styles.
| #inputLayout { | ||
| transition: all 0.5s ease-in-out; | ||
| } | ||
|
|
||
| #resultsLayout { | ||
| transition: all 0.5s ease-in-out; | ||
| } | ||
|
|
||
| #titleWithFlow { | ||
| transition: all 0.3s ease-in-out; | ||
| } |
There was a problem hiding this comment.
These transition properties are being redefined within the @media (prefers-reduced-motion: no-preference) block below (lines 83-89). To avoid redundancy and keep all motion-related styles grouped, you can remove these declarations. The styles within the media query will handle the transitions for users who have not opted out of motion.
| #textInput { | ||
| min-height: 240px !important; | ||
| font-size: 16px; | ||
| line-height: 1.5; | ||
| resize: vertical; | ||
| padding: 1.5rem; /* Increased padding for better appearance */ | ||
| background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */ | ||
| border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */ | ||
| } | ||
|
|
||
| #textInput:focus { | ||
| background-color: rgba(255, 255, 255, 0.18) !important; | ||
| border-color: var(--primary-color) !important; | ||
| box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important; | ||
| transform: scale(1.01); /* Subtle scale on focus */ | ||
| } |
There was a problem hiding this comment.
The use of !important is generally discouraged as it makes stylesheets difficult to maintain and debug by breaking the natural CSS cascade. It seems to be used here to override Bootstrap styles.
While sometimes necessary, it's worth investigating if you can achieve the same result by increasing selector specificity. For example, a more specific selector like body.comprehensive-demo #textInput might provide enough specificity to override Bootstrap without needing !important.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
website/css/main.css (1)
4-15: Avoid cascading@importin production stylesheetsStacking a dozen
@importdirectives forces the browser to load these styles serially, which is flagged by Lighthouse and Core Web Vitals as a render-blocking performance issue. Please flatten this via build-time bundling (preferred) or multiple<link rel="stylesheet">tags so the files can download in parallel.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
website/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (21)
scripts/deployment/bake_emotion_model.py(2 hunks)scripts/deployment/patch_config_and_upload.py(1 hunks)scripts/maintenance/infer_mapping_and_eval.py(1 hunks)scripts/maintenance/metrics_test.py(1 hunks)scripts/testing/hf_serverless_smoke.py(1 hunks)src/unified_ai_api.py(1 hunks)website/css/README.md(1 hunks)website/css/components/animations.css(1 hunks)website/css/components/base.css(1 hunks)website/css/components/buttons.css(1 hunks)website/css/components/cards.css(1 hunks)website/css/components/charts.css(1 hunks)website/css/components/containers.css(1 hunks)website/css/components/forms.css(1 hunks)website/css/components/messages.css(1 hunks)website/css/components/navigation.css(1 hunks)website/css/components/progress.css(1 hunks)website/css/components/responsive.css(1 hunks)website/css/components/variables.css(1 hunks)website/css/comprehensive-demo.css(1 hunks)website/css/main.css(1 hunks)
🔇 Additional comments (1)
scripts/deployment/patch_config_and_upload.py (1)
8-8: Model fallback aligned with DeBERTa rollout.Switching the default fallback to
duelker/samo-goemotions-deberta-v3-largekeeps this script consistent with the rest of the deployment tooling.
| /* 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); | ||
| } | ||
| } |
There was a problem hiding this comment.
Honor prefers-reduced-motion for new animations
We now add multiple continuous animations and transitions, but we only gate the eased timing under prefers-reduced-motion: no-preference. Users who explicitly request reduced motion will still be forced through the full animation set, which is an accessibility regression. Please add a complementary prefers-reduced-motion: reduce block that disables these animations/transitions altogether.
@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
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /* 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); | |
| } | |
| } | |
| /* 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); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .floating-card, | |
| .result-section-visible, | |
| .result-section.show { | |
| animation: none !important; | |
| } | |
| #titleWithFlow, | |
| #inputLayout, | |
| #resultsLayout { | |
| transition: none !important; | |
| } | |
| } |
🤖 Prompt for AI Agents
In website/css/components/animations.css around lines 82 to 89, the new
transitions are only applied under @media (prefers-reduced-motion:
no-preference) which forces animations for users who requested reduced motion;
add a complementary @media (prefers-reduced-motion: reduce) rule targeting
#titleWithFlow, #inputLayout, and #resultsLayout that disables motion by setting
transition: none and animation: none (use !important to override where
necessary) so all animations/transitions are suppressed for reduced-motion
users.
| :root { | ||
| --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); | ||
| --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); | ||
| --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); | ||
| --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%); | ||
|
|
||
| --primary-color: #8b5cf6; | ||
| --secondary-color: #a855f7; | ||
| --accent-color: #c084fc; | ||
| --dark-color: #0f0f23; | ||
| --darker-color: #0a0a1a; | ||
| --light-accent: #e9d5ff; | ||
| --glass-bg: rgba(139, 92, 246, 0.1); | ||
| --glass-border: rgba(139, 92, 246, 0.2); | ||
| --error-color: #ef4444; | ||
| --success-color: #10b981; | ||
|
|
||
| --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
| --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
| --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3); | ||
| --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove duplicated design tokens from this bundle
We now centralize these :root tokens in website/css/components/variables.css, but this file still redeclares the entire block. Keeping two authoritative copies guarantees drift the next time someone adjusts a token. Please delete the duplicate block here and rely on the shared variables module.
-:root {
- --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
- --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
- --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
- --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
-
- --primary-color: #8b5cf6;
- --secondary-color: #a855f7;
- --accent-color: #c084fc;
- --dark-color: #0f0f23;
- --darker-color: #0a0a1a;
- --light-accent: #e9d5ff;
- --glass-bg: rgba(139, 92, 246, 0.1);
- --glass-border: rgba(139, 92, 246, 0.2);
- --error-color: #ef4444;
- --success-color: #10b981;
-
- --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
- --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
-}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| :root { | |
| --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); | |
| --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); | |
| --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); | |
| --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%); | |
| --primary-color: #8b5cf6; | |
| --secondary-color: #a855f7; | |
| --accent-color: #c084fc; | |
| --dark-color: #0f0f23; | |
| --darker-color: #0a0a1a; | |
| --light-accent: #e9d5ff; | |
| --glass-bg: rgba(139, 92, 246, 0.1); | |
| --glass-border: rgba(139, 92, 246, 0.2); | |
| --error-color: #ef4444; | |
| --success-color: #10b981; | |
| --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3); | |
| --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } |
🤖 Prompt for AI Agents
website/css/comprehensive-demo.css lines 4-25: this file redeclares the full
:root design token block that is now centralized in
website/css/components/variables.css; remove the duplicated :root block (lines
4–25) from this file and instead import or rely on the shared variables module
(ensure no other references depend on the local block); after deletion, run a
quick search for any remaining token redefinitions to prevent duplicates and
confirm styles still compile.
| /* Progress Steps */ | ||
| .progress-step { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* Vertical Progress Pipeline */ | ||
| .progress-pipeline-vertical { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 12px; /* Reduced from 20px for tighter spacing */ | ||
| padding: 25px 15px; /* Reduced padding */ | ||
| background: var(--glass-bg); | ||
| border-radius: 20px; | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| min-height: 450px; /* Reduced height */ | ||
| justify-content: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .progress-step-vertical { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| text-align: left; | ||
| padding: 16px 20px; /* Increased padding for better touch targets */ | ||
| border-radius: 15px; | ||
| transition: var(--transition-smooth); | ||
| min-width: 160px; /* Increased width */ | ||
| background: rgba(255, 255, 255, 0.05); | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| margin-bottom: 4px; /* Reduced margin */ | ||
| width: 100%; /* Full width for better appearance */ | ||
| } | ||
|
|
||
| .progress-step-vertical .step-icon-small { | ||
| width: 24px !important; /* Increased from 18px */ | ||
| height: 24px !important; /* Increased from 18px */ | ||
| border-radius: 50%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-right: 16px; /* Increased margin */ | ||
| margin-bottom: 0; | ||
| font-size: 0.8rem !important; /* Increased from 0.6rem */ | ||
| transition: var(--transition-smooth); | ||
| background: rgba(255, 255, 255, 0.1) !important; | ||
| color: #e2e8f0 !important; | ||
| border: 1px solid rgba(255, 255, 255, 0.2); | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .progress-step-vertical .step-label { | ||
| font-size: 0.9rem; /* Increased from 0.7rem */ | ||
| font-weight: 600; | ||
| color: #e2e8f0; | ||
| transition: var(--transition-smooth); | ||
| text-align: left; /* Changed from center to left for better alignment */ | ||
| flex: 1; /* Take remaining space */ | ||
| } | ||
|
|
||
| .progress-step-vertical.active .step-icon-small { | ||
| background: var(--primary-gradient) !important; | ||
| color: white !important; | ||
| box-shadow: var(--shadow-glow); | ||
| } | ||
|
|
||
| .progress-step-vertical.completed .step-icon-small { | ||
| background: var(--success-color) !important; | ||
| color: white !important; | ||
| } | ||
|
|
||
| .progress-step-vertical.error .step-icon-small { | ||
| background: var(--error-color) !important; | ||
| color: white !important; | ||
| } | ||
|
|
||
| .pipeline-arrow-vertical { | ||
| font-size: 1.2rem; /* Slightly smaller */ | ||
| color: #94a3b8; /* Better color */ | ||
| margin: 2px 0; /* Reduced margin */ | ||
| opacity: 0.7; /* Subtle appearance */ | ||
| transition: var(--transition-smooth); | ||
| } | ||
|
|
||
| .progress-step.completed { | ||
| background: rgba(16, 185, 129, 0.1); | ||
| border: 1px solid rgba(16, 185, 129, 0.3); | ||
| } | ||
|
|
||
| .progress-step.active { | ||
| background: var(--primary-gradient); | ||
| color: white; | ||
| } | ||
|
|
||
| .step-icon { | ||
| width: 30px; | ||
| height: 30px; | ||
| border-radius: 50%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-right: 15px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .step-icon.completed { | ||
| background: #10b981; | ||
| color: white; | ||
| } | ||
|
|
||
| .step-icon.active { | ||
| background: white; | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| .step-icon.pending { | ||
| background: rgba(139, 92, 246, 0.2); | ||
| color: #94a3b8; | ||
| } | ||
|
|
||
| /* Progress Pipeline - New Compact Horizontal Design */ | ||
| .progress-pipeline { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 1rem; | ||
| padding: 1.5rem; | ||
| background: var(--glass-bg); | ||
| border-radius: 15px; | ||
| border: 1px solid var(--glass-border); | ||
| max-width: 700px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| /* Horizontal Progress Pipeline for Title Flow */ | ||
| .progress-pipeline-horizontal { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 0.5rem; | ||
| padding: 0.5rem 1rem; | ||
| background: rgba(139, 92, 246, 0.05); | ||
| border-radius: 25px; | ||
| border: 1px solid rgba(139, 92, 246, 0.1); | ||
| backdrop-filter: blur(5px); | ||
| box-shadow: none; | ||
| opacity: 0.7; | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .progress-pipeline-horizontal:hover { | ||
| opacity: 1; | ||
| background: rgba(139, 92, 246, 0.08); | ||
| } | ||
|
|
||
| /* 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; | ||
| } | ||
|
|
||
| /* Enhanced Feature Cards with Better Background Prominence */ | ||
| .feature-card { | ||
| background: linear-gradient(135deg, | ||
| rgba(139, 92, 246, 0.15) 0%, | ||
| rgba(168, 85, 247, 0.12) 50%, | ||
| rgba(192, 132, 252, 0.1) 100%); | ||
| backdrop-filter: blur(15px); | ||
| border: 1px solid rgba(139, 92, 246, 0.25); | ||
| border-radius: 20px; | ||
| box-shadow: var(--shadow-glass); | ||
| transition: var(--transition-bounce); | ||
| color: #e2e8f0; | ||
| height: 100%; | ||
| padding: 2rem; /* Increased padding for better background-to-text ratio */ | ||
| min-height: 140px; /* Ensure minimum height for prominence */ | ||
| position: relative; | ||
| } | ||
|
|
||
| /* Add subtle glow effect to feature cards */ | ||
| .feature-card::before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: linear-gradient(135deg, | ||
| rgba(139, 92, 246, 0.05), | ||
| rgba(168, 85, 247, 0.03), | ||
| rgba(192, 132, 252, 0.02)); | ||
| border-radius: 20px; | ||
| z-index: -1; | ||
| opacity: 0; | ||
| transition: opacity 0.3s ease; | ||
| } | ||
|
|
||
| .feature-card:hover::before { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| /* Enhanced demo container background */ | ||
| .demo-container { | ||
| background: linear-gradient(135deg, | ||
| rgba(139, 92, 246, 0.12) 0%, | ||
| rgba(15, 15, 35, 0.95) 50%, | ||
| rgba(168, 85, 247, 0.08) 100%); | ||
| backdrop-filter: blur(20px); | ||
| border: 1px solid rgba(139, 92, 246, 0.2); | ||
| border-radius: 20px; | ||
| box-shadow: | ||
| var(--shadow-glass), | ||
| 0 0 40px rgba(139, 92, 246, 0.1); | ||
| padding: 3rem; | ||
| margin: 2rem 0; | ||
| width: 100%; | ||
| position: relative; | ||
| z-index: 1; | ||
| color: #e2e8f0; | ||
| } | ||
|
|
||
| /* Enhanced Loading Step Styles */ | ||
| .process-step { | ||
| background: rgba(255, 255, 255, 0.05); | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| border-radius: 12px; | ||
| padding: 15px; | ||
| transition: all 0.3s ease; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .process-step.active { | ||
| background: rgba(139, 92, 246, 0.15); | ||
| border-color: rgba(139, 92, 246, 0.4); | ||
| transform: scale(1.02); | ||
| } | ||
|
|
||
| .process-step.completed { | ||
| background: rgba(16, 185, 129, 0.15); | ||
| border-color: rgba(16, 185, 129, 0.4); | ||
| } | ||
|
|
||
| .step-text { | ||
| font-weight: 600; | ||
| color: #e2e8f0; | ||
| font-size: 0.9rem; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .step-status { | ||
| font-size: 0.8rem; | ||
| color: #94a3b8; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .process-step.active .step-status { | ||
| color: #a855f7; | ||
| } | ||
|
|
||
| .process-step.completed .step-status { | ||
| color: #10b981; | ||
| } | ||
|
|
||
| /* Processing Information Compact Styles */ | ||
| #processingInfoSidebar .feature-card { | ||
| min-height: auto; | ||
| } | ||
|
|
||
| #processingInfoSidebar .bg-dark { | ||
| transition: all 0.2s ease; | ||
| } | ||
|
|
||
| #processingInfoSidebar .bg-dark:hover { | ||
| background-color: rgba(0, 0, 0, 0.4) !important; | ||
| transform: translateX(2px); | ||
| } | ||
|
|
||
| /* 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.hidden { | ||
| display: none !important; | ||
| } | ||
|
|
||
| #debugTestSection .btn-sm { | ||
| padding: 0.5rem 1rem; | ||
| font-size: 0.875rem; | ||
| border-radius: 8px; | ||
| transition: all 0.2s ease; | ||
| } | ||
|
|
||
| /* Enhanced Input Area Background */ | ||
| #textInput { | ||
| min-height: 240px !important; | ||
| font-size: 16px; | ||
| line-height: 1.5; | ||
| resize: vertical; | ||
| padding: 1.5rem; /* Increased padding for better appearance */ | ||
| background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */ | ||
| border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */ | ||
| } | ||
|
|
||
| #textInput:focus { | ||
| background-color: rgba(255, 255, 255, 0.18) !important; | ||
| border-color: var(--primary-color) !important; | ||
| box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important; | ||
| transform: scale(1.01); /* Subtle scale on focus */ | ||
| } | ||
|
|
||
| .progress-step-horizontal { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| min-width: 60px; | ||
| transition: var(--transition-smooth); | ||
| } | ||
|
|
||
| .progress-step-horizontal .step-icon-small { | ||
| width: 18px !important; | ||
| height: 18px !important; | ||
| border-radius: 50%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-bottom: 0.25rem; | ||
| font-size: 0.7rem !important; | ||
| transition: var(--transition-smooth); | ||
| background: rgba(255, 255, 255, 0.1) !important; | ||
| color: #cbd5e1 !important; | ||
| border: 1px solid rgba(255, 255, 255, 0.15); | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .progress-step-horizontal .step-label { | ||
| font-size: 0.65rem; | ||
| font-weight: 500; | ||
| color: #94a3b8; | ||
| white-space: nowrap; | ||
| transition: var(--transition-smooth); | ||
| } | ||
|
|
||
| .progress-step-horizontal.active .step-icon-small { | ||
| background: var(--primary-gradient) !important; | ||
| color: white !important; | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| .progress-step-horizontal.active .step-label { | ||
| color: var(--primary-color); | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .progress-step-horizontal.completed .step-icon-small { | ||
| background: #10b981 !important; | ||
| color: white !important; | ||
| } | ||
|
|
||
| .progress-step-horizontal.completed .step-label { | ||
| color: #10b981; | ||
| } | ||
|
|
||
| .pipeline-arrow { | ||
| font-size: 0.8rem; | ||
| color: #64748b; | ||
| font-weight: normal; | ||
| user-select: none; | ||
| opacity: 0.6; | ||
| } | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Finish extracting the progress/container styles
The progress pipeline and container rules you moved to components/progress.css and components/containers.css are still duplicated here verbatim. Maintaining two copies of the same selectors is a maintenance hazard and makes future tweaks unpredictable (order-dependent overrides). Please drop these sections from this file so the components module is the single source of truth.
-/* Progress Steps */
-.progress-step {
- display: flex;
- align-items: center;
-}
-
-/* Vertical Progress Pipeline */
-.progress-pipeline-vertical {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 12px; /* Reduced from 20px for tighter spacing */
- padding: 25px 15px; /* Reduced padding */
- background: var(--glass-bg);
- border-radius: 20px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- min-height: 450px; /* Reduced height */
- justifyef:* rest of block removed */
-}
-
-/* Progress Pipeline - New Compact Horizontal Design */
-.progress-pipeline {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 1rem;
- padding: 1.5rem;
- background: var(--glass-bg);
- border-radius: 15px;
- border: 1px solid var(--glass-border);
- max-width: 700px;
- margin: 0 auto;
-}
-
-/* Horizontal Progress Pipeline for Title Flow */
-.progress-pipeline-horizontal {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- background: rgba(139, 92, 246, 0.05);
- border-radius: 25px;
- border: 1px solid rgba(139, 92, 246, 0.1);
- backdrop-filter: blur(5px);
- box-shadow: none;
- opacity: 0.7;
- transition: all 0.3s ease;
-}
-
-/* Enhanced demo container background */
-.demo-container {
- background: linear-gradient(135deg,
- rgba(139, 92, 246, 0.12) 0%,
- rgba(15, 15, 35, 0.95) 50%,
- rgba(168, 85, 247, 0.08) 100%);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(139, 92, 246, 0.2);
- border-radius: 20px;
- box-shadow:
- var(--shadow-glass),
- 0 0 40px rgba(139, 92, 246, 0.1);
- padding: 3rem;
- margin: 2rem 0;
- width: 100%;
- position: relative;
- z-index: 1;
- color: #e2e8f0;
-}
-
-/* Enhanced Loading Step Styles */
-.process-step {
- background: rgba(255, 255, 255, 0.05);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 12px;
- padding: 15px;
- transition: all 0.3s ease;
- text-align: center;
-}
-/* … remove remaining duplicate progress/process-step rules … */Committable suggestion skipped: line range outside the PR's diff.
| /* Pure HTML/CSS Chart styling - BEAUTIFUL DESIGN */ | ||
| .emotion-chart-container, .summary-chart-container { | ||
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); | ||
| border-radius: 16px; | ||
| padding: 25px; | ||
| margin: 20px 0; | ||
| border: 1px solid rgba(255, 255, 255, 0.2); | ||
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | ||
| backdrop-filter: blur(10px); | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .emotion-chart-container::before, .summary-chart-container::before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: 3px; | ||
| background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc); | ||
| } | ||
|
|
||
| .chart-header { | ||
| text-align: center; | ||
| margin-bottom: 25px; | ||
| } | ||
|
|
||
| .chart-title { | ||
| color: #fbbf24; | ||
| font-weight: 700; | ||
| margin-bottom: 8px; | ||
| font-size: 1.25rem; | ||
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .chart-subtitle { | ||
| color: #cbd5e1; | ||
| font-size: 0.9rem; | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .emotion-bars { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .emotion-bar { | ||
| margin-bottom: 20px; | ||
| animation: slideInLeft 0.8s ease-out forwards; | ||
| opacity: 0; | ||
| transform: translateX(-30px); | ||
| background: rgba(255, 255, 255, 0.03); | ||
| border-radius: 12px; | ||
| padding: 15px; | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| transition: all 0.3s ease; | ||
| display: block; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .emotion-bar:hover { | ||
| background: rgba(255, 255, 255, 0.08); | ||
| transform: translateY(-2px); | ||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| @keyframes slideInLeft { | ||
| to { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
| } | ||
|
|
||
| .emotion-label { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-bottom: 12px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .emotion-name { | ||
| font-weight: 700; | ||
| color: #f1f5f9; | ||
| text-transform: capitalize; | ||
| font-size: 1rem; | ||
| letter-spacing: 0.5px; | ||
| } | ||
|
|
||
| .emotion-percentage { | ||
| color: #a855f7; | ||
| font-weight: 700; | ||
| font-size: 1.1rem; | ||
| background: rgba(168, 85, 247, 0.1); | ||
| padding: 4px 12px; | ||
| border-radius: 20px; | ||
| border: 1px solid rgba(168, 85, 247, 0.3); | ||
| } | ||
|
|
||
| .emotion-bar-bg { | ||
| background: rgba(0, 0, 0, 0.3); | ||
| border-radius: 15px; | ||
| height: 16px; | ||
| overflow: hidden; | ||
| position: relative; | ||
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .emotion-bar-fill { | ||
| height: 100%; | ||
| border-radius: 15px; | ||
| transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); | ||
| position: relative; | ||
| overflow: hidden; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .emotion-bar-fill::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | ||
| animation: shimmer 3s infinite; | ||
| } | ||
|
|
||
| @keyframes shimmer { | ||
| 0% { transform: translateX(-100%); } | ||
| 100% { transform: translateX(100%); } | ||
| } | ||
|
|
||
| .summary-stats { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| margin-bottom: 25px; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .stat-item { | ||
| text-align: center; | ||
| flex: 1; | ||
| background: rgba(255, 255, 255, 0.05); | ||
| border-radius: 12px; | ||
| padding: 15px; | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .stat-item:hover { | ||
| background: rgba(255, 255, 255, 0.08); | ||
| transform: translateY(-2px); | ||
| } | ||
|
|
||
| .stat-item.highlight { | ||
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1)); | ||
| border: 2px solid rgba(139, 92, 246, 0.4); | ||
| box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2); | ||
| } | ||
|
|
||
| .stat-value { | ||
| font-size: 1.8rem; | ||
| font-weight: 800; | ||
| color: #fbbf24; | ||
| margin-bottom: 8px; | ||
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .stat-item.highlight .stat-value { | ||
| color: #c084fc; | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| .stat-label { | ||
| font-size: 0.8rem; | ||
| color: #cbd5e1; | ||
| text-transform: uppercase; | ||
| letter-spacing: 1px; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .summary-bars { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .summary-bar { | ||
| margin-bottom: 20px; | ||
| background: rgba(255, 255, 255, 0.03); | ||
| border-radius: 12px; | ||
| padding: 15px; | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .summary-bar:hover { | ||
| background: rgba(255, 255, 255, 0.08); | ||
| transform: translateY(-1px); | ||
| } | ||
|
|
||
| .bar-label { | ||
| font-weight: 700; | ||
| color: #f1f5f9; | ||
| margin-bottom: 12px; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .bar-bg { | ||
| background: rgba(0, 0, 0, 0.3); | ||
| border-radius: 12px; | ||
| height: 24px; | ||
| overflow: hidden; | ||
| position: relative; | ||
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .bar-fill { | ||
| height: 100%; | ||
| border-radius: 12px; | ||
| transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); | ||
| position: relative; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove duplicated chart/audiovisual styles
All of these selectors (.emotion-chart-container, .emotion-bar, .summary-bar, etc.) now live in components/charts.css. Leaving the same block here creates two definitions for every chart rule, defeating the purpose of the component split and complicating debugging when values diverge. Please delete this block and rely on the component stylesheet.
-/* Emotion Badges */
-.emotion-badge {
- display: block;
- padding: 8px 16px;
- margin: 4px 0;
- border-radius: 20px;
- font-size: 0.9rem;
- font-weight: 500;
- transition: var(--transition-smooth);
- text-align: center;
- width: 100%;
- box-sizing: border-box;
-}
-
-/* … remove rest of chart/audio styles … */Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In website/css/comprehensive-demo.css around lines 866 to 1091, remove the
entire duplicated chart/audiovisual CSS block (all selectors from
.emotion-chart-container through .bar-fill) so the project uses the single
source-of-truth in components/charts.css; after removal, ensure any page that
depended on this file still imports components/charts.css (add import if
missing) and run the CSS build/lint to confirm no missing selectors or
regressions.
Fortress-Compliant Model ID Fix
SCOPE: Update emotion model ID from
0xmnrv/samotoduelker/samo-goemotions-deberta-v3-largeFILES: 6 files total (2 commits to stay under 5-file limit per commit)
PROBLEM: Cloud Run services were using wrong emotion detection model due to hardcoded fallbacks
What This PR Does
Updates the
EMOTION_MODEL_IDdefault values across 6 files to ensure all Cloud Run services use the correct DeBERTa-v3-large model instead of the old DistilRoBERTa model.Files Changed
Commit 1 (5 files):
src/unified_ai_api.py: Main API model loading fallbackscripts/deployment/bake_emotion_model.py: Model baking script fallbackscripts/deployment/patch_config_and_upload.py: Config patching fallbackscripts/maintenance/infer_mapping_and_eval.py: Evaluation script fallbackscripts/maintenance/metrics_test.py: Metrics testing fallbackCommit 2 (1 file):
scripts/testing/hf_serverless_smoke.py: Serverless testing fallbackExpected Impact
After deployment, the API should return 28 GoEmotions classes (DeBERTa model) instead of 27 classes (DistilRoBERTa model), confirming the correct model is being used.
Validation Plan
duelker/samo-goemotions-deberta-v3-largemodel is loaded🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation