Spaces:
Running
Running
File size: 4,477 Bytes
70ddcac c3173d9 70ddcac c3173d9 3e11311 70ddcac 119afbd 70ddcac 24b8880 c3173d9 70ddcac c3173d9 70ddcac c3173d9 70ddcac a084789 c3173d9 a084789 c3173d9 a084789 c3173d9 a084789 c3173d9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import React, { useState, useEffect, useRef } from "react";
export default function ModelInputBar({ loading, fetchModelStructure }) {
// Single selection: user can pick one of several fetch options
const options = [
{ label: "Not Sure", value: "none", default: "deepseek-ai/DeepSeek-V3.1" },
{ label: "Causal Language Models (e.g. GPT, LLaMA, Phi, Mistral)", value: "causal", default: "gpt2"},
{ label: "Masked Language Models (BERT, RoBERTa, DistilBERT)", value: "masked", default: "google-bert/bert-base-uncased" },
{ label: "Sequence Classification (text classification, sentiment analysis)", value: "sequence", default: "distilbert-base-uncased" },
{ label: "Token Classification (NER, POS tagging)", value: "token", default: "dbmdz/bert-large-cased-finetuned-conll03-english" },
{ label: "Question Answering Models (e.g. BERT QA, RoBERTa QA)", value: "qa", default: "distilbert-base-uncased-distilled-squad" },
{ label: "Seq2Seq (encoder-decoder, e.g. T5, BART, MarianMT)", value: "s2s", default: "t5-base" },
{ label: "Vision models (image classification, CLIP vision tower, etc.)", value: "vision", default: "google/vit-base-patch16-224" },
{ label: "Vision-Language models (image-text models, Qwen-VL, etc.)", value: "vlm", default: "Qwen/Qwen3-VL-8B-Instruct" },
];
const [modelName, setModelName] = useState("");
const [selectedOption, setSelectedOption] = useState(options[0].value);
const [placeholder, setPlaceholder] = useState(options[0].default);
const handleFetch = () => {
const name = modelName && modelName !== "" ? modelName : placeholder;
fetchModelStructure(name, selectedOption);
};
const handelRadioChange = (e) => {
setSelectedOption(e.target.value);
const opt = options.find((o) => o.value === e.target.value);
if (opt) {
setPlaceholder(opt.default);
}
}
return (
<div className="flex flex-col gap-2 mb-4 w-full">
{/* Responsive flex row/col for title and input/button */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full py-2">
<h3 className="text-sm font-semibold text-slate-800 mb-2 whitespace-nowrap sm:mb-0">
Model Name:
</h3>
<div className="flex flex-1 gap-2">
<input
type="text"
value={modelName}
onChange={(e) => setModelName(e.target.value)}
placeholder={placeholder}
className="flex-1 px-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-300"
onKeyDown={(e) => {
if (e.key === "Enter") handleFetch();
}}
aria-label="Model name"
/>
<button
onClick={handleFetch}
disabled={loading}
className={`model-name px-4 py-2 rounded-lg font-medium text-white ${
loading ? "bg-slate-400 cursor-wait" : "bg-sky-600 hover:bg-sky-700"
}`}
>
{loading ? "Loading..." : "View"}
</button>
</div>
</div>
<div className="flex flex-col sm:flex-row sm:top gap-2 w-full py-2">
<h3 className="text-sm font-semibold text-slate-800 mb-2 whitespace-nowrap sm:mb-0">Model Type:</h3>
<div className="flex flex-wrap items-center gap-4 text-sm text-slate-700">
{options.map((option) => (
<label key={option.value} className="model-type flex items-center gap-2">
<input
type="radio"
name="fetchOption"
value={option.value}
checked={selectedOption === option.value}
onChange={handelRadioChange}
className="w-4 h-4"
/>
<span>{option.label}</span>
</label>
))}
</div>
</div>
</div>
);
}
|