Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix/update-ui-info

Browse Source
This commit is contained in:
Faisal Amir 2025-08-25 16:45:59 +07:00
parent 2472cc949a
commit e73a710c06
6 changed files with 50 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web-app/src/components/ui/hover-card.tsx
View File

@ -6,7 +6,14 @@ import { cn } from '@/lib/utils'
function HoverCard({ function HoverCard({
...props ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) { }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} /> return (
<HoverCardPrimitive.Root
openDelay={0}
closeDelay={0}
data-slot="hover-card"
{...props}
/>
)
} }
function HoverCardTrigger({ function HoverCardTrigger({

2
web-app/src/containers/ChatInput.tsx
View File

@ -562,7 +562,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>{t('visions')}</p> <p>{t('vision')}</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>

87
web-app/src/containers/ModelInfoHoverCard.tsx
View File

@ -5,11 +5,11 @@ import {
} from '@/components/ui/hover-card' } from '@/components/ui/hover-card'
import { IconInfoCircle } from '@tabler/icons-react' import { IconInfoCircle } from '@tabler/icons-react'
import { CatalogModel, ModelQuant } from '@/services/models' import { CatalogModel, ModelQuant } from '@/services/models'
import { extractDescription } from '@/lib/models'
interface ModelInfoHoverCardProps { interface ModelInfoHoverCardProps {
model: CatalogModel model: CatalogModel
variant?: ModelQuant variant?: ModelQuant
isDefaultVariant?: boolean
defaultModelQuantizations: string[] defaultModelQuantizations: string[]
modelSupportStatus: Record<string, string> modelSupportStatus: Record<string, string>
onCheckModelSupport: (variant: ModelQuant) => void onCheckModelSupport: (variant: ModelQuant) => void
@ -19,12 +19,12 @@ interface ModelInfoHoverCardProps {
export const ModelInfoHoverCard = ({ export const ModelInfoHoverCard = ({
model, model,
variant, variant,
isDefaultVariant,
defaultModelQuantizations, defaultModelQuantizations,
modelSupportStatus, modelSupportStatus,
onCheckModelSupport, onCheckModelSupport,
children, children,
}: ModelInfoHoverCardProps) => { }: ModelInfoHoverCardProps) => {
const isVariantMode = !!variant
const displayVariant = const displayVariant =
variant || variant ||
model.quants.find((m) => model.quants.find((m) =>
@ -95,8 +95,8 @@ export const ModelInfoHoverCard = ({
{children || ( {children || (
<div className="cursor-pointer"> <div className="cursor-pointer">
<IconInfoCircle <IconInfoCircle
size={14} size={isDefaultVariant ? 20 : 14}
className="mt-0.5 text-main-view-fg/50 hover:text-main-view-fg/80 transition-colors" className="mt-0.5 text-main-view-fg/80 hover:text-main-view-fg/80 transition-colors"
/> />
</div> </div>
)} )}
@ -106,10 +106,10 @@ export const ModelInfoHoverCard = ({
{/* Header */} {/* Header */}
<div className="border-b border-main-view-fg/10 pb-3"> <div className="border-b border-main-view-fg/10 pb-3">
<h4 className="text-sm font-semibold text-main-view-fg"> <h4 className="text-sm font-semibold text-main-view-fg">
{isVariantMode ? variant.model_id : model.model_name} {!isDefaultVariant ? variant?.model_id : model?.model_name}
</h4> </h4>
<p className="text-xs text-main-view-fg/60 mt-1"> <p className="text-xs text-main-view-fg/60 mt-1">
{isVariantMode {!isDefaultVariant
? 'Model Variant Information' ? 'Model Variant Information'
: 'Model Information'} : 'Model Information'}
</p> </p>
@ -118,57 +118,21 @@ export const ModelInfoHoverCard = ({
{/* Main Info Grid */} {/* Main Info Grid */}
<div className="grid grid-cols-2 gap-3 text-xs"> <div className="grid grid-cols-2 gap-3 text-xs">
<div className="space-y-2"> <div className="space-y-2">
{isVariantMode ? ( <>
<> <div>
<div> <span className="text-main-view-fg/50 block">
<span className="text-main-view-fg/50 block"> {isDefaultVariant
File Size ? 'Maybe Default Quantization'
</span> : 'Quantization'}
<span className="text-main-view-fg font-medium mt-1 inline-block"> </span>
{variant.file_size} <span className="text-main-view-fg font-medium mt-1 inline-block">
</span> {variant?.model_id.split('-').pop()?.toUpperCase() || 'N/A'}
</div> </span>
<div> </div>
<span className="text-main-view-fg/50 block"> </>
Quantization
</span>
<span className="text-main-view-fg font-medium mt-1 inline-block">
{variant.model_id.split('-').pop()?.toUpperCase() ||
'N/A'}
</span>
</div>
</>
) : (
<>
<div>
<span className="text-main-view-fg/50 block">
Downloads
</span>
<span className="text-main-view-fg font-medium mt-1 inline-block">
{model.downloads?.toLocaleString() || '0'}
</span>
</div>
<div>
<span className="text-main-view-fg/50 block">Variants</span>
<span className="text-main-view-fg font-medium mt-1 inline-block">
{model.quants?.length || 0}
</span>
</div>
</>
)}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{!isVariantMode && (
<div>
<span className="text-main-view-fg/50 block">
Default Size
</span>
<span className="text-main-view-fg font-medium mt-1 inline-block">
{displayVariant?.file_size || 'N/A'}
</span>
</div>
)}
<div> <div>
<span className="text-main-view-fg/50 block"> <span className="text-main-view-fg/50 block">
Compatibility Compatibility
@ -204,21 +168,6 @@ export const ModelInfoHoverCard = ({
</div> </div>
</div> </div>
)} )}
{/* Content Section */}
<div className="border-t border-main-view-fg/10 pt-3">
<h5 className="text-xs font-medium text-main-view-fg/70 mb-1">
{isVariantMode ? 'Download URL' : 'Description'}
</h5>
<div className="text-xs text-main-view-fg/60 bg-main-view-fg/5 rounded p-2">
{isVariantMode ? (
<div className="font-mono break-all">{variant.path}</div>
) : (
extractDescription(model?.description) ||
'No description available'
)}
</div>
</div>
</div> </div>
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>

12
web-app/src/containers/dialogs/EditModel.tsx
View File

@ -7,11 +7,7 @@ import {
DialogTrigger, DialogTrigger,
} from '@/components/ui/dialog' } from '@/components/ui/dialog'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { useModelProvider } from '@/hooks/useModelProvider' import { useModelProvider } from '@/hooks/useModelProvider'
import { import {
IconPencil, IconPencil,
@ -19,7 +15,7 @@ import {
IconTool, IconTool,
// IconWorld, // IconWorld,
// IconAtom, // IconAtom,
IconCodeCircle2, // IconCodeCircle2,
} from '@tabler/icons-react' } from '@tabler/icons-react'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { useTranslation } from '@/i18n/react-i18next-compat' import { useTranslation } from '@/i18n/react-i18next-compat'
@ -186,7 +182,7 @@ export const DialogEditModel = ({
/> />
</div> </div>
<div className="flex items-center justify-between"> {/* <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<IconCodeCircle2 className="size-4 text-main-view-fg/70" /> <IconCodeCircle2 className="size-4 text-main-view-fg/70" />
<span className="text-sm"> <span className="text-sm">
@ -208,7 +204,7 @@ export const DialogEditModel = ({
{t('providers:editModel.notAvailable')} {t('providers:editModel.notAvailable')}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</div> </div> */}
{/* <div className="flex items-center justify-between"> {/* <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">

19
web-app/src/routes/hub/index.tsx
View File

@ -353,12 +353,7 @@ function Hub() {
// Immediately set local downloading state // Immediately set local downloading state
addLocalDownloadingModel(modelId) addLocalDownloadingModel(modelId)
const mmprojPath = model.mmproj_models?.[0]?.path const mmprojPath = model.mmproj_models?.[0]?.path
pullModelWithMetadata( pullModelWithMetadata(modelId, modelUrl, mmprojPath, huggingfaceToken)
modelId,
modelUrl,
mmprojPath,
huggingfaceToken
)
} }
return ( return (
@ -661,6 +656,18 @@ function Hub() {
defaultModelQuantizations={ defaultModelQuantizations={
defaultModelQuantizations defaultModelQuantizations
} }
variant={
filteredModels[
virtualItem.index
].quants.find((m) =>
defaultModelQuantizations.some((e) =>
m.model_id.toLowerCase().includes(e)
)
) ??
filteredModels[virtualItem.index]
.quants?.[0]
}
isDefaultVariant={true}
modelSupportStatus={modelSupportStatus} modelSupportStatus={modelSupportStatus}
onCheckModelSupport={checkModelSupport} onCheckModelSupport={checkModelSupport}
/> />

10
web-app/src/routes/settings/providers/$providerName.tsx
View File

@ -584,10 +584,12 @@ function ProviderDetail() {
} }
actions={ actions={
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<DialogEditModel {provider && provider.provider !== 'llamacpp' && (
provider={provider} <DialogEditModel
modelId={model.id} provider={provider}
/> modelId={model.id}
/>
)}
{model.settings && ( {model.settings && (
<ModelSetting <ModelSetting
provider={provider} provider={provider}