Skip to content

Update frontend to AGI theme and fix image loading#2

Merged
neuromechanist merged 5 commits intomainfrom
agi-branding-high-priority
Nov 24, 2025
Merged

Update frontend to AGI theme and fix image loading#2
neuromechanist merged 5 commits intomainfrom
agi-branding-high-priority

Conversation

@neuromechanist
Copy link
Member

Summary

  • Fix .gitignore to track image-list.json (was causing 404 on deploy)
  • Update color scheme from purple to AGI brand colors (teal #184A3D, orange #E99852)
  • Convert to light theme with warm off-white background
  • Replace Brain icon with AGI logo in header
  • Update all frontend components to use consistent AGI styling

Changes

  • .gitignore: Allow image-list.json to be tracked
  • tailwind.config.js: Add AGI color palette
  • page.tsx: Main page with AGI theme
  • ThumbnailRibbon.tsx: Updated to light theme
  • AnnotationViewer.tsx: Updated to light theme

Test plan

  • Verify image-list.json is included in build
  • Check deployment loads images correctly
  • Verify color scheme matches AGI branding
  • Test on mobile viewport

- Fix .gitignore to track image-list.json (was causing 404 on deploy)
- Update color scheme from purple to AGI brand colors (teal, orange)
- Add AGI color palette to tailwind.config.js
- Convert to light theme with warm off-white background
- Replace Brain icon with AGI logo in header
- Update all components (page, ThumbnailRibbon, AnnotationViewer)
- Improve accessibility with proper contrast ratios
- Calculate group size dynamically based on total image count
- Each dot now represents ~100 images (for 1000 images)
- Progress indicator correctly highlights for any image index
- Replace dot indicators with a draggable progress slider
- Click anywhere on the slider to jump to that position
- Drag the handle to scrub through images quickly
- Shows filled track with teal-to-orange gradient
- Segment markers for visual reference
- Smooth transition animations
- Deploy PR previews to /pr-preview/pr-{number}/ subdirectory
- Automatic cleanup when PR is closed
- Uses rossjrw/pr-preview-action for deployment
- Builds with correct base path for preview URL
@github-actions
Copy link

PR Preview Action v1.6.3

🚀 View preview at
https://Annotation-Garden.github.io/image-annotation/pr-preview/pr-2/

Built to branch gh-pages at 2025-11-24 21:18 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

GitHub Pages with workflow-based deployment only supports single
deployments, making PR previews unfeasible. Changed to build check
that verifies PRs compile successfully before merge.
@github-actions
Copy link

Build Check Passed

The frontend build completed successfully. Once merged, changes will deploy to: https://annotation-garden.github.io/image-annotation/

@neuromechanist neuromechanist merged commit dab3d24 into main Nov 24, 2025
1 check passed
@neuromechanist neuromechanist deleted the agi-branding-high-priority branch November 25, 2025 23:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant