Skip to content

Commit 7dd4c20

Browse files
wildminderwildminder
authored
Add files via upload
1 parent 4f926f7 commit 7dd4c20

File tree

18 files changed

+553
-326
lines changed

18 files changed

+553
-326
lines changed

‎web/src/App.tsx‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,16 @@ export function App(): JSX.Element {
2727
const filteredPackages = useMemo(() => {
2828
if (!debouncedQuery) return packages;
2929
const query = debouncedQuery.toLowerCase();
30-
return packages.filter(pkg =>
31-
pkg.name?.toLowerCase().includes(query) ||
32-
pkg.description?.toLowerCase().includes(query) ||
33-
pkg.wheels.some(w =>
34-
w.package_version?.includes(query) ||
35-
w.torch_version?.includes(query) ||
36-
w.cuda_version?.includes(query)
37-
)
30+
return packages.filter(
31+
(pkg) =>
32+
pkg.name?.toLowerCase().includes(query) ||
33+
pkg.description?.toLowerCase().includes(query) ||
34+
pkg.wheels.some(
35+
(w) =>
36+
w.package_version?.includes(query) ||
37+
w.torch_version?.includes(query) ||
38+
w.cuda_version?.includes(query),
39+
),
3840
);
3941
}, [packages, debouncedQuery]);
4042

@@ -47,11 +49,19 @@ export function App(): JSX.Element {
4749

4850
if (loading) {
4951
return (
50-
<div className="min-h-screen bg-background flex items-center justify-center" role="status" aria-live="polite" aria-label="Loading application">
52+
<div
53+
className="min-h-screen bg-background flex items-center justify-center"
54+
role="status"
55+
aria-live="polite"
56+
aria-label="Loading application"
57+
>
5158
<Background />
5259
<AsciiBackground />
5360
<div className="relative z-10 flex flex-col items-center gap-4">
54-
<div className="w-16 h-16 border-2 border-primary/20 border-t-primary rounded-full animate-spin" aria-hidden="true" />
61+
<div
62+
className="w-16 h-16 border-2 border-primary/20 border-t-primary rounded-full animate-spin"
63+
aria-hidden="true"
64+
/>
5565
<p className="font-mono text-sm text-text-secondary animate-pulse">
5666
Loading wheel data...
5767
</p>
@@ -62,7 +72,11 @@ export function App(): JSX.Element {
6272

6373
if (error) {
6474
return (
65-
<div className="min-h-screen bg-background flex items-center justify-center" role="alert" aria-live="assertive">
75+
<div
76+
className="min-h-screen bg-background flex items-center justify-center"
77+
role="alert"
78+
aria-live="assertive"
79+
>
6680
<Background />
6781
<AsciiBackground />
6882
<motion.div
@@ -98,11 +112,15 @@ export function App(): JSX.Element {
98112
<AsciiBackground />
99113
<Header />
100114

101-
<main id="main-content" className="relative z-10 flex-1 w-full px-4 sm:px-6 lg:px-8 py-6" role="main" aria-label="Windows AI Wheels Package Browser">
115+
<main
116+
id="main-content"
117+
className="relative z-10 flex-1 w-full px-4 sm:px-6 lg:px-8 py-6"
118+
role="main"
119+
aria-label="Windows AI Wheels Package Browser"
120+
>
102121
<div className="max-w-6xl mx-auto space-y-6">
103-
104122
{/* Hero Section */}
105-
<motion.div
123+
<motion.div
106124
initial={{ opacity: 0, y: 20 }}
107125
animate={{ opacity: 1, y: 0 }}
108126
className="text-center space-y-4"
@@ -115,9 +133,9 @@ export function App(): JSX.Element {
115133
Quick-search pre-compiled Python packages for your environment
116134
</p>
117135
<div className="max-w-xl mx-auto">
118-
<SearchBar
119-
value={query}
120-
onChange={setQuery}
136+
<SearchBar
137+
value={query}
138+
onChange={setQuery}
121139
placeholder="Search packages (e.g., flash attention, torch, cuda...)"
122140
aria-label="Search for Python wheel packages"
123141
/>
@@ -152,7 +170,8 @@ export function App(): JSX.Element {
152170
<div className="flex items-center gap-2">
153171
<Package className="w-4 h-4 text-primary" aria-hidden="true" />
154172
<span className="font-mono text-sm text-text-secondary">
155-
<span className="text-text-primary font-semibold">{filteredPackages.length}</span> package
173+
<span className="text-text-primary font-semibold">{filteredPackages.length}</span>{' '}
174+
package
156175
{filteredPackages.length !== 1 ? 's' : ''} available
157176
</span>
158177
</div>
@@ -173,22 +192,29 @@ export function App(): JSX.Element {
173192
role="status"
174193
>
175194
<Search className="w-12 h-12 text-text-muted mx-auto mb-4" aria-hidden="true" />
176-
<p className="text-text-secondary">
177-
No packages found matching "{debouncedQuery}"
178-
</p>
195+
<p className="text-text-secondary">No packages found matching "{debouncedQuery}"</p>
179196
</motion.div>
180197
) : (
181-
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4" role="list" aria-label="Python wheel packages">
198+
<ul
199+
className="grid grid-cols-1 md:grid-cols-2 gap-4"
200+
role="list"
201+
aria-label="Python wheel packages"
202+
>
182203
{filteredPackages
183-
.map(pkg => {
204+
.map((pkg) => {
184205
// Calculate matching wheels for each package
185-
const matchingWheels = pkg.wheels.filter(w => {
186-
if (selectedPython && !w.python_version?.includes(selectedPython)) return false;
206+
const matchingWheels = pkg.wheels.filter((w) => {
207+
if (selectedPython && !w.python_version?.includes(selectedPython))
208+
return false;
187209
if (selectedTorch && !w.torch_version?.includes(selectedTorch)) return false;
188210
if (selectedCuda && !w.cuda_version?.includes(selectedCuda)) return false;
189211
return true;
190212
});
191-
return { pkg, matchingCount: matchingWheels.length, isActive: matchingWheels.length > 0 };
213+
return {
214+
pkg,
215+
matchingCount: matchingWheels.length,
216+
isActive: matchingWheels.length > 0,
217+
};
192218
})
193219
.sort((a, b) => (b.isActive ? 1 : 0) - (a.isActive ? 1 : 0)) // Active first
194220
.map(({ pkg, matchingCount, isActive }, idx) => (

‎web/src/components/Filters/ControlPanel.tsx‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,17 @@ function OverflowPanel({
8080
role="dialog"
8181
aria-label={`${label} version selector`}
8282
>
83-
<div className={`text-xs font-mono ${accentColor} uppercase tracking-wider mb-2 flex items-center gap-2`}>
83+
<div
84+
className={`text-xs font-mono ${accentColor} uppercase tracking-wider mb-2 flex items-center gap-2`}
85+
>
8486
<span>{label}</span>
8587
<span className="text-text-muted">({options.length} versions)</span>
8688
</div>
87-
<div className="flex flex-wrap gap-1.5 max-w-[300px] max-h-[300px] overflow-y-auto" role="radiogroup" aria-label={`Available ${label} versions`}>
89+
<div
90+
className="flex flex-wrap gap-1.5 max-w-[300px] max-h-[300px] overflow-y-auto"
91+
role="radiogroup"
92+
aria-label={`Available ${label} versions`}
93+
>
8894
{options.map((opt) => (
8995
<motion.button
9096
key={opt}
@@ -128,21 +134,32 @@ function VersionSection({
128134
const moreButtonRef = useRef<HTMLButtonElement>(null);
129135

130136
// Filter options (already sorted by utils: special tags first, then descending)
131-
const filteredOptions = options.filter(opt => opt && opt.trim() !== '');
132-
137+
const filteredOptions = options.filter((opt) => opt && opt.trim() !== '');
138+
133139
// Split into visible and overflow
134140
const visibleOptions = filteredOptions.slice(0, visibleCount);
135141
const overflowOptions = filteredOptions.slice(visibleCount);
136142
const hasOverflow = overflowOptions.length > 0;
137143

138144
return (
139-
<fieldset className="flex-1 min-w-[200px]" role="group" aria-label={ariaLabel || `${label} version selector`}>
140-
<legend className={`flex items-center gap-2 text-xs font-mono ${accentColor} uppercase tracking-wider mb-2`}>
145+
<fieldset
146+
className="flex-1 min-w-[200px]"
147+
role="group"
148+
aria-label={ariaLabel || `${label} version selector`}
149+
>
150+
<legend
151+
className={`flex items-center gap-2 text-xs font-mono ${accentColor} uppercase tracking-wider mb-2`}
152+
>
141153
<Icon className="w-4 h-4" aria-hidden="true" />
142154
<span>{label}</span>
143155
</legend>
144-
145-
<div ref={containerRef} className="flex flex-wrap gap-1.5 items-center" role="radiogroup" aria-label={`Select ${label} version`}>
156+
157+
<div
158+
ref={containerRef}
159+
className="flex flex-wrap gap-1.5 items-center"
160+
role="radiogroup"
161+
aria-label={`Select ${label} version`}
162+
>
146163
{/* Any button */}
147164
<motion.button
148165
whileHover={animationsEnabled ? { scale: 1.05 } : {}}
@@ -197,7 +214,10 @@ function VersionSection({
197214
aria-expanded={showOverflow}
198215
>
199216
<span>+{overflowOptions.length}</span>
200-
<ChevronDown className={`w-3 h-3 transition-transform ${showOverflow ? 'rotate-180' : ''}`} aria-hidden="true" />
217+
<ChevronDown
218+
className={`w-3 h-3 transition-transform ${showOverflow ? 'rotate-180' : ''}`}
219+
aria-hidden="true"
220+
/>
201221
</motion.button>
202222

203223
<AnimatePresence>
@@ -255,7 +275,10 @@ export function ControlPanel({
255275
const visibleCount = getVisibleCount();
256276

257277
return (
258-
<section className="w-full bg-surface border border-border rounded-xl p-4" aria-label="Environment version filters">
278+
<section
279+
className="w-full bg-surface border border-border rounded-xl p-4"
280+
aria-label="Environment version filters"
281+
>
259282
{/* Header - PEP wheel filename style, only showing selected versions */}
260283
<div className="flex items-center justify-between mb-4">
261284
<div className="flex items-center gap-3">
@@ -265,9 +288,7 @@ export function ControlPanel({
265288
{selectedCuda && (
266289
<span className="text-accent-yellow">cu{selectedCuda.replace('.', '')}</span>
267290
)}
268-
{selectedTorch && (
269-
<span className="text-secondary">torch{selectedTorch}</span>
270-
)}
291+
{selectedTorch && <span className="text-secondary">torch{selectedTorch}</span>}
271292
{selectedPython && (
272293
<span className="text-primary">-cp{selectedPython.replace('.', '')}</span>
273294
)}

‎web/src/components/Filters/FilterPanel.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,7 @@ export function FilterPanel({
7272
Clear
7373
</motion.button>
7474
)}
75-
<motion.div
76-
animate={{ rotate: isExpanded ? 180 : 0 }}
77-
transition={{ duration: 0.2 }}
78-
>
75+
<motion.div animate={{ rotate: isExpanded ? 180 : 0 }} transition={{ duration: 0.2 }}>
7976
<ChevronDown className="w-5 h-5 text-text-muted" />
8077
</motion.div>
8178
</div>

‎web/src/components/Filters/QuickFilters.tsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@ interface FilterChipProps {
2323
color: string;
2424
}
2525

26-
function FilterChip({ icon: Icon, label, options, value, onChange, color }: FilterChipProps): JSX.Element {
26+
function FilterChip({
27+
icon: Icon,
28+
label,
29+
options,
30+
value,
31+
onChange,
32+
color,
33+
}: FilterChipProps): JSX.Element {
2734
return (
2835
<div className="relative group">
2936
<div className="flex items-center gap-2 px-3 py-2 bg-surface border border-border rounded-lg">
@@ -33,10 +40,16 @@ function FilterChip({ icon: Icon, label, options, value, onChange, color }: Filt
3340
onChange={(e) => onChange(e.target.value || null)}
3441
className="bg-transparent text-sm font-mono text-text-primary focus:outline-none cursor-pointer min-w-[100px]"
3542
>
36-
<option key={`${label}-any`} value="" className="bg-surface text-text-muted">Any {label}</option>
37-
{options.filter(opt => opt && opt.trim() !== '').map((opt, idx) => (
38-
<option key={`${label}-${opt}-${idx}`} value={opt} className="bg-surface">{opt}</option>
39-
))}
43+
<option key={`${label}-any`} value="" className="bg-surface text-text-muted">
44+
Any {label}
45+
</option>
46+
{options
47+
.filter((opt) => opt && opt.trim() !== '')
48+
.map((opt, idx) => (
49+
<option key={`${label}-${opt}-${idx}`} value={opt} className="bg-surface">
50+
{opt}
51+
</option>
52+
))}
4053
</select>
4154
</div>
4255
{value && (
@@ -66,13 +79,13 @@ export function QuickFilters({
6679
const hasFilters = selectedPython || selectedTorch || selectedCuda;
6780

6881
return (
69-
<motion.div
82+
<motion.div
7083
initial={{ opacity: 0, y: -10 }}
7184
animate={{ opacity: 1, y: 0 }}
7285
className="flex flex-wrap items-center gap-3 p-4 bg-surface/50 border border-border rounded-xl backdrop-blur-sm"
7386
>
7487
<span className="text-sm font-medium text-text-secondary mr-2">I need:</span>
75-
88+
7689
<FilterChip
7790
icon={Cpu}
7891
label="Python"
@@ -81,7 +94,7 @@ export function QuickFilters({
8194
onChange={onPythonChange}
8295
color="text-primary"
8396
/>
84-
97+
8598
<FilterChip
8699
icon={Zap}
87100
label="PyTorch"
@@ -90,7 +103,7 @@ export function QuickFilters({
90103
onChange={onTorchChange}
91104
color="text-secondary"
92105
/>
93-
106+
94107
<FilterChip
95108
icon={Box}
96109
label="CUDA"

‎web/src/components/Filters/VersionSelector.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@ export function VersionSelector({
9494
{label}
9595
</span>
9696
<div className="flex items-center gap-2">
97-
<span className={`font-display font-semibold ${value ? 'text-text-primary' : 'text-text-muted'}`}>
97+
<span
98+
className={`font-display font-semibold ${value ? 'text-text-primary' : 'text-text-muted'}`}
99+
>
98100
{value || `Any ${label}`}
99101
</span>
100102
{value && (

‎web/src/components/Install/index.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,12 @@ export function InstallCommand({ wheel }: InstallCommandProps): JSX.Element {
3434
>
3535
<Terminal className="w-4 h-4 text-primary" />
3636
<span className="font-mono text-2xs text-primary">Copy</span>
37-
37+
3838
{/* Glow effect on hover */}
39-
<div className="absolute inset-0 rounded-lg bg-primary/5 opacity-0 group-hover:opacity-100
40-
blur-md transition-opacity duration-200" />
39+
<div
40+
className="absolute inset-0 rounded-lg bg-primary/5 opacity-0 group-hover:opacity-100
41+
blur-md transition-opacity duration-200"
42+
/>
4143
</motion.button>
4244

4345
{/* Success indicator */}
@@ -88,21 +90,11 @@ export function CopyButton({ text, className = '' }: CopyButtonProps): JSX.Eleme
8890
>
8991
<AnimatePresence mode="wait">
9092
{copied ? (
91-
<motion.div
92-
key="check"
93-
initial={{ scale: 0 }}
94-
animate={{ scale: 1 }}
95-
exit={{ scale: 0 }}
96-
>
93+
<motion.div key="check" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
9794
<Check className="w-4 h-4 text-accent-green" />
9895
</motion.div>
9996
) : (
100-
<motion.div
101-
key="copy"
102-
initial={{ scale: 0 }}
103-
animate={{ scale: 1 }}
104-
exit={{ scale: 0 }}
105-
>
97+
<motion.div key="copy" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
10698
<Copy className="w-4 h-4" />
10799
</motion.div>
108100
)}

‎web/src/components/Layout/AsciiBackground.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function AsciiBackground(): JSX.Element | null {
1818
const initParticles = useCallback((width: number, height: number) => {
1919
const particleCount = Math.min(80, Math.floor((width * height) / 15000));
2020
particlesRef.current = [];
21-
21+
2222
for (let i = 0; i < particleCount; i++) {
2323
particlesRef.current.push({
2424
x: Math.random() * width,

0 commit comments

Comments
 (0)