format details better

Author: TGlide

src/services/huggingface-models.ts

@@ -1,54 +1,29 @@
 export interface HuggingFaceModel {
-	_id: string
 	id: string
-	inferenceProviderMapping: InferenceProviderMapping[]
-	trendingScore: number
-	config: ModelConfig
-	tags: string[]
-	pipeline_tag: "text-generation" | "image-text-to-text"
-	library_name?: string
+	object: "model"
+	created: number
+	owned_by: string
+	providers: Provider[]
 }
 
-export interface InferenceProviderMapping {
+export interface Provider {
 	provider: string
-	providerId: string
 	status: "live" | "staging" | "error"
-	task: "conversational"
-}
-
-export interface ModelConfig {
-	architectures: string[]
-	model_type: string
-	tokenizer_config?: {
-		chat_template?: string | Array<{ name: string; template: string }>
-		model_max_length?: number
+	supports_tools?: boolean
+	supports_structured_output?: boolean
+	context_length?: number
+	pricing?: {
+		input: number
+		output: number
 	}
 }
 
-interface HuggingFaceApiParams {
-	pipeline_tag?: "text-generation" | "image-text-to-text"
-	filter: string
-	inference_provider: string
-	limit: number
-	expand: string[]
-}
-
-const DEFAULT_PARAMS: HuggingFaceApiParams = {
-	filter: "conversational",
-	inference_provider: "all",
-	limit: 100,
-	expand: [
-		"inferenceProviderMapping",
-		"config",
-		"library_name",
-		"pipeline_tag",
-		"tags",
-		"mask_token",
-		"trendingScore",
-	],
+interface HuggingFaceApiResponse {
+	object: string
+	data: HuggingFaceModel[]
 }
 
-const BASE_URL = "https://huggingface.co/api/models"
+const BASE_URL = "https://router.huggingface.co/v1/models?collection=roocode"
 const CACHE_DURATION = 1000 * 60 * 60 // 1 hour
 
 interface CacheEntry {
@@ -59,24 +34,6 @@ interface CacheEntry {
 
 let cache: CacheEntry | null = null
 
-function buildApiUrl(params: HuggingFaceApiParams): string {
-	const url = new URL(BASE_URL)
-
-	// Add simple params
-	Object.entries(params).forEach(([key, value]) => {
-		if (!Array.isArray(value)) {
-			url.searchParams.append(key, String(value))
-		}
-	})
-
-	// Handle array params specially
-	params.expand.forEach((item) => {
-		url.searchParams.append("expand[]", item)
-	})
-
-	return url.toString()
-}
-
 const headers: HeadersInit = {
 	"Upgrade-Insecure-Requests": "1",
 	"Sec-Fetch-Dest": "document",
@@ -107,45 +64,25 @@ export async function fetchHuggingFaceModels(): Promise<HuggingFaceModel[]> {
 	try {
 		console.log("Fetching Hugging Face models from API...")
 
-		// Fetch both text-generation and image-text-to-text models in parallel
-		const [textGenResponse, imgTextResponse] = await Promise.allSettled([
-			fetch(buildApiUrl({ ...DEFAULT_PARAMS, pipeline_tag: "text-generation" }), requestInit),
-			fetch(buildApiUrl({ ...DEFAULT_PARAMS, pipeline_tag: "image-text-to-text" }), requestInit),
-		])
-
-		let textGenModels: HuggingFaceModel[] = []
-		let imgTextModels: HuggingFaceModel[] = []
-		let hasErrors = false
-
-		// Process text-generation models
-		if (textGenResponse.status === "fulfilled" && textGenResponse.value.ok) {
-			textGenModels = await textGenResponse.value.json()
-		} else {
-			console.error("Failed to fetch text-generation models:", textGenResponse)
-			hasErrors = true
-		}
+		const response = await fetch(BASE_URL, requestInit)
 
-		// Process image-text-to-text models
-		if (imgTextResponse.status === "fulfilled" && imgTextResponse.value.ok) {
-			imgTextModels = await imgTextResponse.value.json()
-		} else {
-			console.error("Failed to fetch image-text-to-text models:", imgTextResponse)
-			hasErrors = true
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`)
 		}
 
-		// Combine and filter models
-		const allModels = [...textGenModels, ...imgTextModels]
-			.filter((model) => model.inferenceProviderMapping.length > 0)
+		const apiResponse: HuggingFaceApiResponse = await response.json()
+		const allModels = apiResponse.data
+			.filter((model) => model.providers.length > 0)
 			.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()))
 
 		// Update cache
 		cache = {
 			data: allModels,
 			timestamp: now,
-			status: hasErrors ? "partial" : "success",
+			status: "success",
 		}
 
-		console.log(`Fetched ${allModels.length} Hugging Face models (status: ${cache.status})`)
+		console.log(`Fetched ${allModels.length} Hugging Face models`)
 		return allModels
 	} catch (error) {
 		console.error("Error fetching Hugging Face models:", error)

src/shared/ExtensionMessage.ts

@@ -138,26 +138,21 @@ export interface ExtensionMessage {
 	lmStudioModels?: string[]
 	vsCodeLmModels?: { vendor?: string; family?: string; version?: string; id?: string }[]
 	huggingFaceModels?: Array<{
-		_id: string
 		id: string
-		inferenceProviderMapping: Array<{
+		object: string
+		created: number
+		owned_by: string
+		providers: Array<{
 			provider: string
-			providerId: string
 			status: "live" | "staging" | "error"
-			task: "conversational"
-		}>
-		trendingScore: number
-		config: {
-			architectures: string[]
-			model_type: string
-			tokenizer_config?: {
-				chat_template?: string | Array<{ name: string; template: string }>
-				model_max_length?: number
+			supports_tools?: boolean
+			supports_structured_output?: boolean
+			context_length?: number
+			pricing?: {
+				input: number
+				output: number
 			}
-		}
-		tags: string[]
-		pipeline_tag: "text-generation" | "image-text-to-text"
-		library_name?: string
+		}>
 	}>
 	mcpServers?: McpServer[]
 	commits?: GitCommit[]

webview-ui/src/components/settings/providers/HuggingFace.tsx

@@ -13,28 +13,24 @@ import { cn } from "@src/lib/utils"
 import { TemperatureControl } from "../TemperatureControl"
 
 import { inputEventTransform } from "../transforms"
+import { formatPrice } from "@/utils/formatPrice"
 
 type HuggingFaceModel = {
-	_id: string
 	id: string
-	inferenceProviderMapping: Array<{
+	object: string
+	created: number
+	owned_by: string
+	providers: Array<{
 		provider: string
-		providerId: string
 		status: "live" | "staging" | "error"
-		task: "conversational"
-	}>
-	trendingScore: number
-	config: {
-		architectures: string[]
-		model_type: string
-		tokenizer_config?: {
-			chat_template?: string | Array<{ name: string; template: string }>
-			model_max_length?: number
+		supports_tools?: boolean
+		supports_structured_output?: boolean
+		context_length?: number
+		pricing?: {
+			input: number
+			output: number
 		}
-	}
-	tags: string[]
-	pipeline_tag: "text-generation" | "image-text-to-text"
-	library_name?: string
+	}>
 }
 
 type HuggingFaceProps = {
@@ -83,10 +79,7 @@ export const HuggingFace = ({ apiConfiguration, setApiConfigurationField }: Hugg
 
 	// Get current model and its providers
 	const currentModel = models.find((m) => m.id === apiConfiguration?.huggingFaceModelId)
-	const availableProviders = useMemo(
-		() => currentModel?.inferenceProviderMapping || [],
-		[currentModel?.inferenceProviderMapping],
-	)
+	const availableProviders = useMemo(() => currentModel?.providers || [], [currentModel?.providers])
 
 	// Set default provider when model changes
 	useEffect(() => {
@@ -142,18 +135,31 @@ export const HuggingFace = ({ apiConfiguration, setApiConfigurationField }: Hugg
 		return nameMap[provider] || provider.charAt(0).toUpperCase() + provider.slice(1)
 	}
 
-	// Get model capabilities
+	// Get current provider
+	const currentProvider = useMemo(() => {
+		if (!currentModel || !selectedProvider || selectedProvider === "auto") return null
+		return currentModel.providers.find((p) => p.provider === selectedProvider)
+	}, [currentModel, selectedProvider])
+
+	// Get model capabilities based on current provider
 	const modelCapabilities = useMemo(() => {
 		if (!currentModel) return null
 
-		const supportsImages = currentModel.pipeline_tag === "image-text-to-text"
-		const maxTokens = currentModel.config.tokenizer_config?.model_max_length
+		// For now, assume text-only models since we don't have pipeline_tag in new API
+		// This could be enhanced by checking model name patterns or adding vision support detection
+		const supportsImages = false
+
+		// Use provider-specific capabilities if a specific provider is selected
+		const maxTokens =
+			currentProvider?.context_length || currentModel.providers.find((p) => p.context_length)?.context_length
+		const supportsTools = currentProvider?.supports_tools || currentModel.providers.some((p) => p.supports_tools)
 
 		return {
 			supportsImages,
 			maxTokens,
+			supportsTools,
 		}
-	}, [currentModel])
+	}, [currentModel, currentProvider])
 
 	// Model capabilities component
 	const ModelCapabilities = () => {
@@ -174,12 +180,36 @@ export const HuggingFace = ({ apiConfiguration, setApiConfigurationField }: Hugg
 						/>
 						{modelCapabilities.supportsImages ? "Supports images" : "Text only"}
 					</div>
+					<div
+						className={cn(
+							"flex items-center gap-1",
+							modelCapabilities.supportsTools
+								? "text-vscode-charts-green"
+								: "text-vscode-errorForeground",
+						)}>
+						<span
+							className={cn("codicon", modelCapabilities.supportsTools ? "codicon-check" : "codicon-x")}
+						/>
+						{modelCapabilities.supportsTools ? "Supports tool calling" : "No tool calling"}
+					</div>
 					{modelCapabilities.maxTokens && (
 						<div className="flex items-center gap-1 text-vscode-descriptionForeground">
-							<span className="codicon codicon-info" />
-							Max context: {modelCapabilities.maxTokens.toLocaleString()} tokens
+							<span className="font-medium">{t("settings:modelInfo.maxOutput")}:</span>{" "}
+							{modelCapabilities.maxTokens.toLocaleString()} tokens
 						</div>
 					)}
+					{currentProvider?.pricing && (
+						<>
+							<div className="flex items-center gap-1 text-vscode-descriptionForeground">
+								<span className="font-medium">{t("settings:modelInfo.inputPrice")}:</span>{" "}
+								{formatPrice(currentProvider.pricing.input)} / 1M tokens
+							</div>
+							<div className="flex items-center gap-1 text-vscode-descriptionForeground">
+								<span className="font-medium">{t("settings:modelInfo.outputPrice")}:</span>{" "}
+								{formatPrice(currentProvider.pricing.output)} / 1M tokens
+							</div>
+						</>
+					)}
 				</div>
 			</div>
 		)