File size: 2,406 Bytes
38c5e89 945c6bb 5786921 d378496 a447b30 30f44e6 38c5e89 92b36e2 30f44e6 a447b30 31d949e 65d87c5 30f44e6 65d87c5 a447b30 31d949e 38c5e89 945c6bb 38c5e89 945c6bb 5786921 30f44e6 65d87c5 4ed1d4f 65d87c5 30f44e6 65d87c5 4ed1d4f 10a3bbb 92b36e2 10a3bbb 9bf89c1 65d87c5 5786921 945c6bb 38c5e89 |
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 |
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>
</>
);
}
|