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 ( return (
<div className="flex h-[500px] flex-1 flex-col"> <div className="flex h-[500px] flex-1 flex-col">
<h1 className="mb-3 font-semibold">Available Versions</h1> <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) => { {ggufModels.map((model, index) => {
if (!model.downloadUrl) return null if (!model.downloadUrl) return null
return ( 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 { useAtomValue, useSetAtom } from 'jotai'
import { twMerge } from 'tailwind-merge'
import { MainViewState } from '@/constants/screens' import { MainViewState } from '@/constants/screens'
import { useCreateNewThread } from '@/hooks/useCreateNewThread' import { useCreateNewThread } from '@/hooks/useCreateNewThread'
@ -114,16 +116,24 @@ const ModelDownloadRow: React.FC<Props> = ({
} }
return ( 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 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"> <div className="flex justify-between">
{quantization && ( <div className="flex">
<Badge variant="soft" className="mr-1"> {quantization && (
{quantization} <Badge variant="soft" className="mr-1">
</Badge> {quantization}
)} </Badge>
<h1 className="mr-5 line-clamp-1 font-medium text-[hsla(var(--text-secondary))]"> )}
{fileName} <h1
</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"> <Badge theme="secondary" className="hidden md:flex">
{toGibibytes(fileSize)} {toGibibytes(fileSize)}
</Badge> </Badge>

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

@ -33,7 +33,7 @@ const ModelSegmentInfo = () => {
if (!importingHuggingFaceRepoData) return null if (!importingHuggingFaceRepoData) return null
return ( 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'}> <HeaderInfo title={'Model ID'}>
<h1 className="font-medium text-zinc-500 dark:text-gray-300"> <h1 className="font-medium text-zinc-500 dark:text-gray-300">
{modelName} {modelName}