refactor(spx-gui): migrate style selector to fronend

[petezhuang]

No description provided.

[niupilot]

Code Review for PR #2266: migrate style selector to frontend ✅

This PR refactors the style selector component by migrating from a backend API-driven approach to a static frontend-defined model list. The main changes include:

1. Removed API dependency: Eliminated getStyleList() API call from style-list.ts (entire file removed)
2. Static model definition: Hard-coded style models with local image imports in modelSelector.vue
3. Simplified component logic: Removed loading states, error handling, and retry mechanisms
4. Added local images: Included theme preview images as static assets

Issues Found

🔴 Critical Issues (Must Fix)

1. Syntax Error (modelSelector.vue:109): Missing closing quote in description will prevent compilation
2. File name typo (multiple lines): natrue.jpg should be nature.jpg - inconsistent naming

⚠️ Architecture Concerns

1. Loss of flexibility: Hard-coding themes eliminates ability to dynamically update styles without code deployment
2. No error handling: Removed all error handling for missing/broken images
3. Bundle size impact: Static imports increase bundle size vs lazy-loaded API content

🔧 Code Quality Issues

1. Interface change: recommended_provider field removed from ModelInfo interface without documentation
2. Dead CSS: Unused styles for loading/error states remain in component
3. No fallback mechanism: No graceful degradation if local images fail to load

✅ Positive Aspects

• Simplified component logic reduces complexity
• Eliminates network dependency and loading states
• Better performance with bundled assets
• Cleaner, more predictable UI behavior

Recommendation

The refactoring approach is sound for static content, but please address the critical syntax issues before merging. Consider adding basic error handling for image loading failures to maintain robustness.

---

👉 Want me to re-run this review? Just type /review in the comments! For more usage examples, visit CodeAgent GitHub Repository.

[gemini-code-assist]

Summary of Changes

Hello @petezhuang, I'm Gemini Code Assist¹! 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 refactors the AI-generated content (AIGC) style selection mechanism within the spx-gui. It shifts the source of truth for available styles from a dynamic backend API to a static, hardcoded list directly within the frontend application. This change streamlines the style selection process, eliminates network-related complexities, and removes the need for explicit AI provider selection at the API call level.

Highlights

• Style List Migration: The list of available styles for AIGC generation has been migrated from being fetched dynamically from a backend API to a static, hardcoded list directly within the frontend application.
• API Simplification: The provider parameter has been removed from the GenerateImageRequest interface and the generateSvgDirect function, simplifying the image generation API calls.
• Frontend Component Streamlining: The modelSelector.vue component has been significantly simplified by removing all loading state management, error handling, and retry logic associated with fetching data from the backend.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the style selector for AI image generation by migrating the style definitions from the backend to the frontend. This is accomplished by removing the API call for fetching styles and introducing a hardcoded list within the modelSelector.vue component. The changes are consistent across the modified files, simplifying the logic by removing the need for network request handling, loading states, and error states for this feature. My review focuses on the new hardcoded data, suggesting improvements for code quality, consistency, and fixing a minor UI bug.

[niupilot]

Found 2 critical issues requiring fixes and several areas for improvement. The refactoring successfully simplifies the component but introduces some bugs and removes flexibility.

[qiniu-ci]

This PR has been deployed to the preview environment. You can explore it using the preview URL.

Warning

Please note that deployments in the preview environment are temporary and will be automatically cleaned up after a certain period. Make sure to explore it before it is removed. For any questions, contact the Go+ Builder team.