| import Head from "next/head"; | |
| import Container from "@mui/material/Container"; | |
| import { Stack } from "@mui/material"; | |
| import { DividerBox } from "@/components/base/boxes"; | |
| import { useCallback, useEffect, useState } from "react"; | |
| import { HF_FileEntry, HFRes } from "@/types"; | |
| import { basename } from "path"; | |
| export default function Home() { | |
| const [repo, setRepo] = useState('https://huggingface.co/datasets/banned-historical-archives/banned-historical-archives/tree/main'); | |
| const [path, setPath] = useState(''); | |
| const [entries, setEntries] = useState<HF_FileEntry[]>([]) | |
| const [next, setNext] = useState('') | |
| const update = useCallback( | |
| (async () => { | |
| const res = (await ((await fetch(`/api/get_file_list?repo=${encodeURIComponent(repo)}&path=${encodeURIComponent(path)}`)).json())) as HFRes; | |
| setEntries(res.entries); | |
| setNext(res.nextURL!); | |
| }), [repo, path] | |
| ) | |
| useEffect(() => { | |
| update() | |
| }, []) | |
| return ( | |
| <> | |
| <Head> | |
| <title>nextjs-docker-starter</title> | |
| <link rel="icon" href="/favicon.ico" /> | |
| <meta name="description" content="Next.js in Docker on 🤗 Spaces" /> | |
| </Head> | |
| <Container component="main" sx={{ minHeight: "90vh" }}> | |
| <Stack spacing={4} useFlexGap> | |
| <input value={repo} onChange={e => setRepo(e.target.value)}/> | |
| <input value={path} onChange={e => setPath(e.target.value)}/> | |
| <button onClick={update}>update</button> | |
| {entries.map(i => <div key={i.path} style={{display: 'flex'}}> | |
| <div style={{flex: 1}} onClick={() => { | |
| if (i.type =='directory') { | |
| setPath(i.path); | |
| setTimeout(update, 100); | |
| } | |
| }}>{basename(i.path)}</div> | |
| <div style={{flex: 1}}>{i.size}</div> | |
| <div style={{flex: 1}}>{i.type}</div> | |
| </div>)} | |
| {next ? | |
| <button onClick={async () => { | |
| const res = await fetch('https://huggingface.co' + next); | |
| if (res.headers.get('link')) { | |
| setNext(res.headers.get('link')!.split('>;')[0].replace('<https://huggingface.co', '')) | |
| } else { | |
| setNext(''); | |
| } | |
| const data = await (res).json() as HF_FileEntry[]; | |
| setEntries([...entries, ...data]); | |
| }}>more</button> : null} | |
| </Stack> | |
| </Container> | |
| </> | |
| ); | |
| } | |