64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import ExploreModelItem from "../ExploreModelItem";
|
|
import HeaderTitle from "../HeaderTitle";
|
|
import SearchBar, { SearchType } from "../SearchBar";
|
|
import SimpleCheckbox from "../SimpleCheckbox";
|
|
import SimpleTag, { TagType } from "../SimpleTag";
|
|
import useGetHuggingFaceModel from "@/_hooks/useGetHuggingFaceModel";
|
|
import { useAtomValue } from "jotai";
|
|
import { modelSearchAtom } from "@/_helpers/JotaiWrapper";
|
|
import { useEffect } from "react";
|
|
|
|
const tags = [
|
|
"Roleplay",
|
|
"Llama",
|
|
"Story",
|
|
"Casual",
|
|
"Professional",
|
|
"CodeLlama",
|
|
"Coding",
|
|
];
|
|
const checkboxs = ["GGUF", "TensorRT", "Meow", "JigglyPuff"];
|
|
|
|
const ExploreModelContainer: React.FC = () => {
|
|
const modelSearch = useAtomValue(modelSearchAtom);
|
|
const { modelList, getHuggingFaceModel } = useGetHuggingFaceModel();
|
|
|
|
useEffect(() => {
|
|
getHuggingFaceModel(modelSearch);
|
|
}, [modelSearch]);
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 px-16 pt-14 overflow-hidden">
|
|
<HeaderTitle title="Explore Models" />
|
|
<SearchBar
|
|
type={SearchType.Model}
|
|
placeholder="Owner name like TheBloke, etc.."
|
|
/>
|
|
<div className="flex flex-1 gap-x-10 mt-9 overflow-hidden">
|
|
<div className="w-64">
|
|
<h2 className="font-semibold text-xs mb-[15px]">Tags</h2>
|
|
<SearchBar placeholder="Filter by tags" />
|
|
<div className="flex flex-wrap gap-[9px] mt-[14px]">
|
|
{tags.map((item) => (
|
|
<SimpleTag key={item} title={item} type={item as TagType} />
|
|
))}
|
|
</div>
|
|
<hr className="my-10" />
|
|
<fieldset>
|
|
{checkboxs.map((item) => (
|
|
<SimpleCheckbox key={item} name={item} />
|
|
))}
|
|
</fieldset>
|
|
</div>
|
|
<div className="flex-1 pb-4 gap-y-4 overflow-y-auto scroll">
|
|
{modelList.map((item) => (
|
|
<ExploreModelItem key={item.id} model={item} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExploreModelContainer;
|