Spaces:
Paused
Paused
File size: 2,967 Bytes
dcd5e1d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import { useState, useEffect, useCallback } from 'react';
import { OpenRouterModel } from '../lib/openrouter';
interface UseOpenRouterModelsResult {
models: OpenRouterModel[];
filteredModels: OpenRouterModel[];
loading: boolean;
error: string | null;
searchTerm: string;
setSearchTerm: (term: string) => void;
selectedCategory: string;
setSelectedCategory: (category: string) => void;
refetch: () => Promise<void>;
categories: string[];
}
export function useOpenRouterModels(): UseOpenRouterModelsResult {
const [models, setModels] = useState<OpenRouterModel[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('all');
const fetchModels = useCallback(async () => {
if (loading) return; // Prevent multiple simultaneous requests
console.log('🔄 Fetching OpenRouter models...');
setLoading(true);
setError(null);
try {
const url = new URL('/api/openrouter/models', window.location.origin);
console.log('📡 Requesting:', url.toString());
const response = await fetch(url.toString());
console.log('📥 Response status:', response.status);
const result = await response.json();
console.log('📋 Response data:', result);
if (!result.success) {
throw new Error(result.error || 'Failed to fetch models');
}
console.log('✅ Successfully fetched', result.data.length, 'models');
setModels(result.data);
} catch (err) {
console.error('❌ Error fetching models:', err);
setError(err instanceof Error ? err.message : 'Failed to fetch models');
} finally {
setLoading(false);
}
}, []); // Remove loading dependency to prevent infinite loop
useEffect(() => {
fetchModels();
}, [fetchModels]);
// Extract categories from model names/descriptions
const categories = [
'all',
...Array.from(new Set(
models
.map(model => {
const provider = model.id.split('/')[0];
return provider;
})
.filter(Boolean)
)).sort()
];
// Filter models based on search term and category
const filteredModels = models.filter(model => {
const matchesSearch = !searchTerm ||
model.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
model.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
model.description.toLowerCase().includes(searchTerm.toLowerCase());
const matchesCategory = selectedCategory === 'all' ||
model.id.startsWith(selectedCategory + '/');
return matchesSearch && matchesCategory;
});
return {
models,
filteredModels,
loading,
error,
searchTerm,
setSearchTerm,
selectedCategory,
setSelectedCategory,
refetch: fetchModels,
categories
};
}
|