add options for different model types

frontend/src/App.jsx

@@ -3,13 +3,11 @@ import ModelInputBar from "./components/ModelInputBar";
 import ModelLayersCard from "./components/ModelLayersCard";
 
 export default function App() {
-  const [modelName, setModelName] = useState("");
-  const [selectedOption, setSelectedOption] = useState("none");
   const [structure, setStructure] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
-  const fetchModelStructure = async () => {
+  const fetchModelStructure = async (modelName, selectedOption) => {
     if (!modelName) return;
     setLoading(true);
     setError("");
@@ -51,10 +49,6 @@ export default function App() {
 
         {/* Input Bar */}
         <ModelInputBar
-          modelName={modelName}
-          setModelName={setModelName}
-          selectedOption={selectedOption}
-          setSelectedOption={setSelectedOption}
           loading={loading}
           fetchModelStructure={fetchModelStructure}
         />
@@ -79,7 +73,7 @@ export default function App() {
 
       {/* Footer */}
       <footer className="mt-8 text-slate-500 text-sm text-center">
-        Built with React + FastAPI
+        Still under development.
       </footer>
     </div>
   );

frontend/src/components/ModelInputBar.jsx

@@ -1,37 +1,52 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
-export default function ModelInputBar({ modelName, setModelName, selectedOption, setSelectedOption, loading, fetchModelStructure }) {
+export default function ModelInputBar({ loading, fetchModelStructure }) {
     // Single selection: user can pick one of several fetch options
     const options = [
-        { label: "Not Sure", value: "none" },
-        { label: "Causal Language Models (e.g. GPT, LLaMA, Phi, Mistral)", value: "causal" },
-        { label: "Masked Language Models (BERT, RoBERTa, DistilBERT)", value: "masked" },
-        { label: "Sequence Classification (text classification, sentiment analysis)", value: "sequence" },
-        { label: "Token Classification (NER, POS tagging)", value: "token" },
-        { label: "Question Answering Models (e.g. BERT QA, RoBERTa QA)", value: "qa" },
-        { label: "Text Generation Models (e.g. T5, BART)", value: "generation" },
-        { label: "Seq2Seq (encoder-decoder, e.g. T5, BART, MarianMT)", value: "s2s" },
-        { label: "Vision models (image classification, CLIP vision tower, etc.)", value: "vision" },
+        { label: "Not Sure", value: "none", default: "deepseek-ai/deepseek-moe-16b-base" },
+        { label: "Causal Language Models (e.g. GPT, LLaMA, Phi, Mistral)", value: "causal", default: "gpt2"},
+        { label: "Masked Language Models (BERT, RoBERTa, DistilBERT)", value: "masked", default: "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" },
     ];
 
-    // const [selectedOption, setSelectedOption] = useState(options[0].value);
+    const [modelName, setModelName] = useState("");
+    const [selectedOption, setSelectedOption] = useState(options[0].value);
+    const [placeholder, setPlaceholder] = useState(options[0].default);
+
 
     const handleFetch = () => {
-        fetchModelStructure();
+        const name = modelName && modelName !== "" ? modelName : placeholder;
+        fetchModelStructure(name, selectedOption);
     };
 
-return (
+    const handelRadioChange = (e) => {
+        setSelectedOption(e.target.value);
+        const opt = options.find((o) => o.value === e.target.value);
+        if (opt) {
+            setPlaceholder(opt.default);
+        }
+    }
+
+    const [focused, setFocused] = useState(false);
+
+    return (
     <div className="flex flex-col gap-2 mb-4 w-full">
         <div className="flex gap-2 w-full">
             <input
                 type="text"
                 value={modelName}
                 onChange={(e) => setModelName(e.target.value)}
-                placeholder="e.g. deepseek-ai/deepseek-moe-16b-base"
+                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();
                 }}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
                 aria-label="Model name"
             />
 
@@ -54,7 +69,7 @@ return (
                         name="fetchOption"
                         value={option.value}
                         checked={selectedOption === option.value}
-                        onChange={(e) => setSelectedOption(e.target.value)}
+                        onChange={handelRadioChange}
                         className="w-4 h-4"
                     />
                     <span>{option.label}</span>