Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions scripts/deployment/bake_emotion_model.py
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@


def main() -> int:
model_id = os.environ.get("EMOTION_MODEL_ID", "0xmnrv/samo")
model_id = os.environ.get("EMOTION_MODEL_ID", "duelker/samo-goemotions-deberta-v3-large")
token = os.environ.get("HF_TOKEN")

if token and login is not None:
Expand All @@ -34,4 +34,4 @@ def main() -> int:


if __name__ == "__main__":
raise SystemExit(main())
raise SystemExit(main())
2 changes: 1 addition & 1 deletion scripts/deployment/patch_config_and_upload.py
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
from transformers import AutoConfig
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")

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This change is part of updating the model ID across multiple files. I have two suggestions to improve maintainability:

  1. Standardize Environment Variable Name: The environment variable for the model ID is inconsistent across scripts. This script uses MODEL_ID, while others use EMOTION_MODEL_ID or HF_REPO. Standardizing on a single, descriptive name like EMOTION_MODEL_ID would improve clarity and reduce configuration errors.

  2. 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.


# Get token from environment or local storage
TOKEN = os.getenv("HF_TOKEN")
Expand Down
2 changes: 1 addition & 1 deletion scripts/maintenance/infer_mapping_and_eval.py
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
from sklearn.metrics import f1_score, accuracy_score
from scipy.optimize import linear_sum_assignment

MODEL_ID = os.getenv("MODEL_ID", "0xmnrv/samo")
MODEL_ID = os.getenv("MODEL_ID", "duelker/samo-goemotions-deberta-v3-large")
TOKEN = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACE_HUB_TOKEN")
DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
BATCH = int(os.getenv("BATCH_SIZE", "32"))
Expand Down
2 changes: 1 addition & 1 deletion scripts/maintenance/metrics_test.py
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
from transformers import AutoTokenizer, AutoModelForSequenceClassification
from sklearn.metrics import f1_score, accuracy_score

MODEL_ID = os.getenv("MODEL_ID", "0xmnrv/samo")
MODEL_ID = os.getenv("MODEL_ID", "duelker/samo-goemotions-deberta-v3-large")
TOKEN = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACE_HUB_TOKEN")
DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
BATCH = int(os.getenv("BATCH_SIZE", "32"))
Expand Down
2 changes: 1 addition & 1 deletion scripts/testing/hf_serverless_smoke.py
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import requests

HF_REPO = os.getenv("HF_REPO", "0xmnrv/samo")
HF_REPO = os.getenv("HF_REPO", "duelker/samo-goemotions-deberta-v3-large")
HF_TOKEN = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACE_TOKEN")

API_URL = f"https://api-inference.huggingface.co/models/{HF_REPO}"
Expand Down
2 changes: 1 addition & 1 deletion src/unified_ai_api.py
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,7 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
from src.models.emotion_detection.hf_loader import (
load_emotion_model_multi_source
)
hf_model_id = os.getenv("EMOTION_MODEL_ID", "0xmnrv/samo")
hf_model_id = os.getenv("EMOTION_MODEL_ID", "duelker/samo-goemotions-deberta-v3-large")
hf_token = os.getenv("HF_TOKEN")
local_dir = os.getenv("EMOTION_MODEL_LOCAL_DIR")
archive_url = os.getenv("EMOTION_MODEL_ARCHIVE_URL")
Expand Down
1,767 changes: 1,143 additions & 624 deletions website/comprehensive-demo.html

Large diffs are not rendered by default.

59 changes: 59 additions & 0 deletions website/css/README.md
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
89 changes: 89 additions & 0 deletions website/css/components/animations.css
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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.


/* 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

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
/* 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.

77 changes: 77 additions & 0 deletions website/css/components/base.css
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

Copilot AI Sep 27, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
* {
animation: none !important;
transition: none !important;
}
/* Only disable non-essential, decorative animations/transitions */

Copilot uses AI. Check for mistakes.
.hero-section::before {
animation: none !important;
}
.floating-card {
animation: none !important;
}
.audio-bar {
animation: none !important;
}
}
59 changes: 59 additions & 0 deletions website/css/components/buttons.css
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;
}
}
Loading
Loading