src/components/ModelInput.tsx

import { useState } from "react";
import {
  Box,
  Button,
  Chip,
  Paper,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import RocketLaunchRoundedIcon from "@mui/icons-material/RocketLaunchRounded";

interface Props {
  onSubmit: (input: string) => void;
  disabled?: boolean;
}

const SAMPLES = [
  { label: "Llama 1B", value: "TinyLlama/TinyLlama-1.1B-Chat-v1.0" },
  { label: "Qwen2.5 0.5B", value: "Qwen/Qwen2.5-0.5B-Instruct" },
  { label: "GPT-2", value: "gpt2" },
  { label: "DistilBERT", value: "distilbert-base-uncased" },
  { label: "ViT", value: "google/vit-base-patch16-224" },
  { label: "T5 small", value: "google-t5/t5-small" },
];

export function ModelInput({ onSubmit, disabled }: Props) {
  const [value, setValue] = useState("TinyLlama/TinyLlama-1.1B-Chat-v1.0");
  return (
    <Paper
      elevation={0}
      sx={{
        p: { xs: 3, md: 5 },
        maxWidth: 720,
        mx: "auto",
        mt: { xs: 4, md: 10 },
        textAlign: "center",
        background:
          "radial-gradient(120% 100% at 50% 0%, rgba(124,92,255,0.15) 0%, rgba(17,26,48,0.0) 70%)",
      }}
    >
      <Typography variant="h4" fontWeight={800} sx={{ letterSpacing: -0.5 }}>
        Visualize any Hugging Face model
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{ mt: 1.5 }}>
        Paste a Hugging Face URL or repo id. Reads only the safetensors header
        + the model's source — no weights, no backend, no wait queue.
      </Typography>
      <Box
        component="form"
        onSubmit={(e) => {
          e.preventDefault();
          if (value.trim()) onSubmit(value.trim());
        }}
        sx={{ mt: 4, display: "flex", gap: 1.5, flexWrap: "wrap" }}
      >
        <TextField
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="meta-llama/Llama-3.2-1B or https://huggingface.co/..."
          fullWidth
          sx={{ flex: 1, minWidth: 240 }}
          disabled={disabled}
        />
        <Button
          type="submit"
          variant="contained"
          size="large"
          disabled={disabled || !value.trim()}
          startIcon={<RocketLaunchRoundedIcon />}
        >
          Visualize
        </Button>
      </Box>
      <Stack
        direction="row"
        spacing={1}
        sx={{ mt: 3, justifyContent: "center", flexWrap: "wrap", rowGap: 1 }}
      >
        {SAMPLES.map((s) => (
          <Chip
            key={s.value}
            label={s.label}
            variant="outlined"
            clickable
            onClick={() => {
              setValue(s.value);
              onSubmit(s.value);
            }}
            sx={{ borderColor: "rgba(155,180,255,0.25)" }}
          />
        ))}
      </Stack>
    </Paper>
  );
}