124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
/* eslint-disable react/display-name */
|
|
|
|
"use client";
|
|
|
|
import ExploreModelItemHeader from "../ExploreModelItemHeader";
|
|
import ModelVersionList from "../ModelVersionList";
|
|
import { Fragment, forwardRef, useEffect, useState } from "react";
|
|
import SimpleTag from "../SimpleTag";
|
|
import { displayDate } from "@/_utils/datetime";
|
|
import { Product } from "@/_models/Product";
|
|
import useGetMostSuitableModelVersion from "@/_hooks/useGetMostSuitableModelVersion";
|
|
|
|
type Props = {
|
|
model: Product;
|
|
};
|
|
|
|
const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
|
|
const [show, setShow] = useState(false);
|
|
|
|
const { availableVersions } = model;
|
|
const { suitableModel, getMostSuitableModelVersion } =
|
|
useGetMostSuitableModelVersion();
|
|
|
|
useEffect(() => {
|
|
getMostSuitableModelVersion(availableVersions);
|
|
}, [availableVersions]);
|
|
|
|
if (!suitableModel) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="flex flex-col border border-gray-200 rounded-md mb-4"
|
|
>
|
|
<ExploreModelItemHeader
|
|
suitableModel={suitableModel}
|
|
exploreModel={model}
|
|
/>
|
|
<div className="flex flex-col px-[26px] py-[22px]">
|
|
<div className="flex justify-between">
|
|
<div className="flex-1 flex flex-col gap-8">
|
|
<div className="flex flex-col gap-1">
|
|
<div className="text-sm font-medium text-gray-500">
|
|
Model Format
|
|
</div>
|
|
<div className="px-2.5 py-0.5 bg-gray-100 text-xs text-gray-800 w-fit">
|
|
GGUF
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="text-sm font-medium text-gray-500">
|
|
Hardware Compatibility
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{/* <SimpleTag
|
|
clickable={false}
|
|
title={TagType.Compatible}
|
|
type={TagType.Compatible}
|
|
/> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex flex-col gap-8">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-500">
|
|
Release Date
|
|
</div>
|
|
<div className="text-sm font-normal text-gray-900">
|
|
{displayDate(model.releaseDate)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="text-sm font-medium text-gray-500">
|
|
Expected Performance
|
|
</div>
|
|
{/* <SimpleTag
|
|
title={TagType.Medium}
|
|
type={TagType.Medium}
|
|
clickable={false}
|
|
/> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1 mt-[26px]">
|
|
<span className="text-sm font-medium text-gray-500">About</span>
|
|
<span className="text-sm font-normal text-gray-500">
|
|
{model.longDescription}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col mt-5">
|
|
<span className="text-sm font-medium text-gray-500">Tags</span>
|
|
<div className="flex flex-wrap gap-2">
|
|
{model.tags.map((tag) => (
|
|
// @ts-ignore
|
|
<SimpleTag key={tag} title={tag} type={tag} clickable={false} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{model.availableVersions?.length > 0 && (
|
|
<Fragment>
|
|
{show && (
|
|
<ModelVersionList
|
|
model={model}
|
|
versions={model.availableVersions}
|
|
recommendedVersion={suitableModel?.id ?? ""}
|
|
/>
|
|
)}
|
|
<button
|
|
onClick={() => setShow(!show)}
|
|
className="bg-[#FBFBFB] text-gray-500 text-sm text-left py-2 px-4 border-t border-gray-200"
|
|
>
|
|
{!show ? "+ Show Available Versions" : "- Collapse"}
|
|
</button>
|
|
</Fragment>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default ExploreModelItem;
|