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

fix: responsive modal import model gguf

Browse Source
This commit is contained in:
Faisal Amir 2024-08-28 13:57:50 +07:00 committed by Van Pham
parent d3d7909474
commit 46aa9d3a29
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx
View File

@ -29,7 +29,7 @@ const ModelDownloadList = () => {
return (
<div className="flex h-[500px] flex-1 flex-col">
<h1 className="mb-3 font-semibold">Available Versions</h1>
<ScrollArea className="w-full lg:flex-1">
<ScrollArea className="h-full w-full lg:flex-1">
{ggufModels.map((model, index) => {
if (!model.downloadUrl) return null
return (

30
web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx
View File

@ -10,6 +10,8 @@ import { Badge, Button, Progress } from '@janhq/joi'
import { useAtomValue, useSetAtom } from 'jotai'
import { twMerge } from 'tailwind-merge'
import { MainViewState } from '@/constants/screens'
import { useCreateNewThread } from '@/hooks/useCreateNewThread'
@ -114,16 +116,24 @@ const ModelDownloadRow: React.FC<Props> = ({
}
return (
<div className="flex flex-col gap-4 space-x-1 rounded border border-[hsla(var(--app-border))] p-3 md:flex-row md:items-center md:justify-between lg:w-[550px]">
<div className="flex">
{quantization && (
<Badge variant="soft" className="mr-1">
{quantization}
</Badge>
)}
<h1 className="mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]">
{fileName}
</h1>
<div className="flex flex-col gap-4 rounded border border-[hsla(var(--app-border))] p-3 md:flex-row md:items-center md:justify-between xl:w-full">
<div className="flex justify-between">
<div className="flex">
{quantization && (
<Badge variant="soft" className="mr-1">
{quantization}
</Badge>
)}
<h1
className={twMerge(
'mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]',
quantization && 'max-w-[25ch]'
)}
title={fileName}
>
{fileName}
</h1>
</div>
<Badge theme="secondary" className="hidden md:flex">
{toGibibytes(fileSize)}
</Badge>

2
web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx
View File

@ -33,7 +33,7 @@ const ModelSegmentInfo = () => {
if (!importingHuggingFaceRepoData) return null
return (
<div className="flex w-full flex-col space-y-4">
<div className="flex w-full flex-col space-y-4 lg:w-1/3">
<HeaderInfo title={'Model ID'}>
<h1 className="font-medium text-zinc-500 dark:text-gray-300">
{modelName}