Vendor can show more

This commit is contained in:
Xin Wang
2026-02-12 19:29:24 +08:00
parent 3c7efce80b
commit 81ed89b84f
3 changed files with 37 additions and 13 deletions

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Search, Filter, Plus, Trash2, Key, Server, Ear, Globe, Languages, Pencil, Mic, Square, Upload } from 'lucide-react';
import { Button, Input, Select, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge, LibraryPageShell, TableStatusRow, LibraryActionCell } from '../components/UI';
import { ASRModel } from '../types';
@@ -85,7 +85,7 @@ const convertRecordedBlobToWav = async (blob: Blob): Promise<File> => {
export const ASRLibraryPage: React.FC = () => {
const [models, setModels] = useState<ASRModel[]>([]);
const [searchTerm, setSearchTerm] = useState('');
const [vendorFilter, setVendorFilter] = useState<string>('OpenAI Compatible');
const [vendorFilter, setVendorFilter] = useState<string>('all');
const [langFilter, setLangFilter] = useState<string>('all');
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
const [editingModel, setEditingModel] = useState<ASRModel | null>(null);
@@ -108,10 +108,15 @@ export const ASRLibraryPage: React.FC = () => {
loadModels();
}, []);
const vendorOptions = useMemo(
() => Array.from(new Set(models.map((m) => String(m.vendor || '').trim()).filter(Boolean))).sort(),
[models]
);
const filteredModels = models.filter((m) => {
const q = searchTerm.toLowerCase();
const matchesSearch = m.name.toLowerCase().includes(q) || (m.modelName || '').toLowerCase().includes(q);
const matchesVendor = m.vendor === vendorFilter;
const matchesVendor = vendorFilter === 'all' || m.vendor === vendorFilter;
const matchesLang = langFilter === 'all' || m.language === langFilter || (langFilter !== 'all' && m.language === 'Multi-lingual');
return matchesSearch && matchesVendor && matchesLang;
});
@@ -159,7 +164,10 @@ export const ASRLibraryPage: React.FC = () => {
value={vendorFilter}
onChange={(e) => setVendorFilter(e.target.value)}
>
<option value="OpenAI Compatible">OpenAI Compatible</option>
<option value="all"></option>
{vendorOptions.map((vendor) => (
<option key={vendor} value={vendor}>{vendor}</option>
))}
</Select>
</div>
<div className="flex items-center space-x-2">