AI 仓库情报摘要

FR-AI / ANALYSIS

为什么值得关注

提供了一个精致且无障碍的 UI 组件，在网络和原生 Apple 平台上表现一致，零依赖、完整支持 VoiceOver，并经过 CI 验证。

适合谁使用

需要自定义选择器的 Web 开发者
寻找可复用 SwiftUI 选择器的 iOS/macOS 开发者
探索动画化、无障碍控件的 UI/UX 设计师
对跨平台 UI 模式感兴趣的开源贡献者

典型使用场景

在 AI 聊天界面中选择智能等级
在设置面板中嵌入模型选择器
在教程中演示 Web 组件或 SwiftUI 最佳实践
为 AI 产品快速原型化模型选择体验

项目优势

零依赖——浏览器中可独立运行，同时也是 Swift 包
两个实现共享五档磁力吸附和青到紫的色彩渐变
无障碍支持——VoiceOver、Dynamic Type、减少运动及一致亮色外观
经过 CI 验证，包含确定性几何和等级逻辑的单元测试

使用前须知

需要现代浏览器特性（Web Components、Shadow DOM、Canvas 2D、ResizeObserver）
SwiftUI 版本仅支持 iOS 17+ 和 macOS 14+
声明为独立实验项目，与 OpenAI 无关——生产环境采用需仔细评估

README 快速开始

ChatGPT Model Selector

A ChatGPT-inspired model intelligence picker in two zero-dependency implementations:

JavaScript: a standards-based Web Component that runs directly in the browser.
SwiftUI: a reusable Swift Package for iOS 17+ and macOS 14+, plus a native demo app.

The two versions share the same five intelligence levels, magnetic snapping, animated color progression, reduced-motion behavior, and Ultra celebration.

Demo

https://github.com/user-attachments/assets/1025109b-c19d-42a1-8fb4-a035cc104bbf

JavaScript version

Open index.html in a browser, or include the component in your own page:

Listen for selection changes through the standard change event:

const selector = document.querySelector('chatgpt-model-selector');

selector.addEventListener('change', (event) => {
  console.log(event.detail.index, event.detail.tier, event.detail.model);
});

Web Component API

Attribute	Type	Default	Description
`model-name`	string	`GPT-5.4`	Model label shown in the trigger and menu
`value`	integer 0–4	`1`	Light, Medium, High, Extra High, or Ultra

value gets or sets the tier index.
tier returns the current tier name.
change emits { index, tier, model } in event.detail.

The component supports modern browsers with Web Components, Shadow DOM, Canvas 2D, and ResizeObserver.

SwiftUI version

Requirements

Xcode 16 or newer
Swift 6.0 or newer
iOS 17 or newer
macOS 14 or newer
XcodeGen only when regenerating the iOS demo project

Add the package

In Xcode, choose File → Add Package Dependencies and enter:

https://github.com/zanwei/chatgpt-model-selector

Or add the package in Package.swift:

dependencies: [
  .package(
    url: "https://github.com/zanwei/chatgpt-model-selector.git",
    branch: "main"
  )
]

Then add the ChatGPTModelSelector library product to your target.

Use the component

import ChatGPTModelSelector
import SwiftUI

struct ComposerView: View {
  @State private var tier: ModelTier = .medium

  var body: some View {
    ModelSelector(
      modelName: "GPT-5.4",
      selection: $tier
    )
  }
}

The binding is the source of truth: user interaction updates it, and external writes move the sel

项目描述

ChatGPT-inspired model intelligence picker as a zero-dependency Web Component (MIT)

chatgpt-model-selector