zanwei/chatgpt-model-selector

This project recreates the model-intelligence picker interface from ChatGPT as a reusable UI component, built in two separate versions that share the same look and behavior. One version is a JavaScript Web Component that runs directly in any modern browser with no external dependencies. The other is a SwiftUI package for iOS 17 and newer, or macOS 14 and newer, aimed at native Apple app developers. Both versions offer the same five selectable intelligence tiers: Light, Medium, High, Extra High, and Ultra. Dragging the selector snaps between tiers with a spring-like magnetic pull, the color shifts smoothly from cyan to violet as you move up the tiers, and picking the top Ultra tier triggers a small celebration animation. The component also respects a user's reduced-motion accessibility setting by toning down or skipping the animation. The JavaScript version can be dropped into a page as a custom HTML element, chatgpt-model-selector, with attributes for the model name shown and the starting tier value. It fires a standard change event containing the selected index, tier name, and model whenever the user picks a new tier. It works in browsers that support Web Components, Shadow DOM, Canvas 2D, and the ResizeObserver API. The SwiftUI version is installed as a Swift package through Xcode's package manager or by editing Package.swift directly, then used as a ModelSelector view bound to a state variable holding the current tier. A native demo app is included and can be run either through Xcode or from the command line with Swift's package runner. Beyond the picker itself, the project includes accessibility support such as VoiceOver labeling and Dynamic Type on the Apple side, automated tests covering the tier logic and geometry, and continuous integration checks for both the Swift and JavaScript code. The README is explicit that this is an independent, ChatGPT-inspired interface experiment with no affiliation to or endorsement from OpenAI. It is released under the MIT license.