Spaces:

tfrere
/

research-article-gallery

Running

App Files Files Community

tfrere HF Staff commited on Apr 9

Commit

acb9889

0 Parent(s):

feat: initial static gallery of research-article-template spaces

Browse files

Files changed (2) hide show

README.md +16 -0
index.html +518 -0

README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+---
+title: Research Article Template Gallery
+emoji: "\U0001F4DA"
+colorFrom: yellow
+colorTo: purple
+sdk: static
+pinned: false
+tags:
+  - research-article-template
+---
+# Research Article Template - Spaces Gallery
+A gallery of all HuggingFace Spaces built with the [research-article-template](https://huggingface.co/spaces/tfrere/research-article-template).
+Data is fetched live from the HuggingFace API.

index.html ADDED Viewed

	@@ -0,0 +1,518 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Research Article Template - Spaces Gallery</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@mui/material@5/umd/material-ui.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@babel/standalone@7/babel.min.js"
+    ></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0d1117;
+        min-height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      const { useState, useEffect, useMemo } = React;
+      const {
+        createTheme,
+        ThemeProvider,
+        CssBaseline,
+        Container,
+        Box,
+        Typography,
+        Paper,
+        Table,
+        TableBody,
+        TableCell,
+        TableContainer,
+        TableHead,
+        TableRow,
+        TableSortLabel,
+        TextField,
+        InputAdornment,
+        Chip,
+        Link,
+        CircularProgress,
+        Grid,
+        Card,
+        CardContent,
+      } = MaterialUI;
+      const API_URL =
+        "https://huggingface.co/api/spaces?filter=research-article-template&limit=100&sort=likes&direction=-1";
+      const theme = createTheme({
+        palette: {
+          mode: "dark",
+          primary: { main: "#FFD21E" },
+          background: { default: "#0d1117", paper: "#161b22" },
+          divider: "#30363d",
+          text: { primary: "#e6edf3", secondary: "#8b949e" },
+        },
+        typography: {
+          fontFamily: "'Inter', sans-serif",
+          h3: { fontWeight: 800, letterSpacing: "-0.02em" },
+        },
+        shape: { borderRadius: 12 },
+        components: {
+          MuiPaper: {
+            styleOverrides: { root: { backgroundImage: "none" } },
+          },
+          MuiTableCell: {
+            styleOverrides: { root: { borderColor: "#30363d" } },
+          },
+        },
+      });
+      function StatCard({ label, value, emoji }) {
+        return (
+          <Card
+            variant="outlined"
+            sx={{
+              height: "100%",
+              border: "1px solid #30363d",
+              bgcolor: "#161b22",
+            }}
+          >
+            <CardContent sx={{ textAlign: "center", py: 3 }}>
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                gutterBottom
+                sx={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: 1 }}
+              >
+                {label}
+              </Typography>
+              <Typography variant="h4" fontWeight={700} sx={{ mt: 0.5 }}>
+                <span style={{ marginRight: 8 }}>{emoji}</span>
+                {value}
+              </Typography>
+            </CardContent>
+          </Card>
+        );
+      }
+      function App() {
+        const [spaces, setSpaces] = useState([]);
+        const [loading, setLoading] = useState(true);
+        const [error, setError] = useState(null);
+        const [search, setSearch] = useState("");
+        const [orderBy, setOrderBy] = useState("likes");
+        const [order, setOrder] = useState("desc");
+        useEffect(() => {
+          fetch(API_URL)
+            .then((r) => {
+              if (!r.ok) throw new Error("API request failed");
+              return r.json();
+            })
+            .then((data) => {
+              setSpaces(data);
+              setLoading(false);
+            })
+            .catch((err) => {
+              setError(err.message);
+              setLoading(false);
+            });
+        }, []);
+        const stats = useMemo(() => {
+          if (!spaces.length)
+            return { total: 0, likes: 0, authors: 0, latest: null };
+          const authors = new Set(spaces.map((s) => s.id.split("/")[0]));
+          const latest = spaces.reduce((a, b) =>
+            new Date(a.createdAt) > new Date(b.createdAt) ? a : b
+          );
+          return {
+            total: spaces.length,
+            likes: spaces.reduce((sum, s) => sum + (s.likes || 0), 0),
+            authors: authors.size,
+            latest,
+          };
+        }, [spaces]);
+        const sorted = useMemo(() => {
+          let result = spaces;
+          if (search) {
+            const q = search.toLowerCase();
+            result = result.filter((s) => s.id.toLowerCase().includes(q));
+          }
+          return [...result].sort((a, b) => {
+            let av, bv;
+            if (orderBy === "likes") {
+              av = a.likes;
+              bv = b.likes;
+            } else if (orderBy === "createdAt") {
+              av = new Date(a.createdAt).getTime();
+              bv = new Date(b.createdAt).getTime();
+            } else {
+              av = a.id.toLowerCase();
+              bv = b.id.toLowerCase();
+            }
+            if (av < bv) return order === "asc" ? -1 : 1;
+            if (av > bv) return order === "asc" ? 1 : -1;
+            return 0;
+          });
+        }, [spaces, search, orderBy, order]);
+        const handleSort = (prop) => {
+          if (orderBy === prop) {
+            setOrder(order === "desc" ? "asc" : "desc");
+          } else {
+            setOrderBy(prop);
+            setOrder(prop === "id" ? "asc" : "desc");
+          }
+        };
+        const fmtDate = (d) =>
+          new Date(d).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          });
+        if (loading) {
+          return (
+            <Box
+              display="flex"
+              flexDirection="column"
+              justifyContent="center"
+              alignItems="center"
+              minHeight="100vh"
+              gap={2}
+            >
+              <CircularProgress sx={{ color: "#FFD21E" }} />
+              <Typography color="text.secondary">
+                Loading spaces...
+              </Typography>
+            </Box>
+          );
+        }
+        if (error) {
+          return (
+            <Box
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              minHeight="100vh"
+            >
+              <Typography color="error">Failed to load data: {error}</Typography>
+            </Box>
+          );
+        }
+        return (
+          <Container maxWidth="lg" sx={{ py: { xs: 3, md: 6 } }}>
+            <Box textAlign="center" mb={5}>
+              <Typography
+                variant="h3"
+                sx={{
+                  mb: 1.5,
+                  fontSize: { xs: "1.8rem", md: "3rem" },
+                  background: "linear-gradient(135deg, #FFD21E 0%, #FF9D00 100%)",
+                  WebkitBackgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                Research Article Template
+              </Typography>
+              <Typography
+                variant="h6"
+                color="text.secondary"
+                fontWeight={400}
+                sx={{ fontSize: { xs: "0.95rem", md: "1.25rem" } }}
+              >
+                All {stats.total} HuggingFace Spaces built with the template
+              </Typography>
+            </Box>
+            <Grid container spacing={2} sx={{ mb: 4 }}>
+              <Grid item xs={6} sm={3}>
+                <StatCard
+                  label="Spaces"
+                  value={stats.total}
+                  emoji={"\u{1F4E6}"}
+                />
+              </Grid>
+              <Grid item xs={6} sm={3}>
+                <StatCard
+                  label="Total Likes"
+                  value={stats.likes.toLocaleString()}
+                  emoji={"\u2764\uFE0F"}
+                />
+              </Grid>
+              <Grid item xs={6} sm={3}>
+                <StatCard
+                  label="Authors"
+                  value={stats.authors}
+                  emoji={"\u{1F465}"}
+                />
+              </Grid>
+              <Grid item xs={6} sm={3}>
+                <StatCard
+                  label="Latest"
+                  value={
+                    stats.latest
+                      ? fmtDate(stats.latest.createdAt)
+                      : "-"
+                  }
+                  emoji={"\u{1F4C5}"}
+                />
+              </Grid>
+            </Grid>
+            <TextField
+              fullWidth
+              placeholder="Search spaces..."
+              variant="outlined"
+              size="small"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              sx={{
+                mb: 3,
+                "& .MuiOutlinedInput-root": {
+                  borderRadius: 2,
+                  bgcolor: "#161b22",
+                  "& fieldset": { borderColor: "#30363d" },
+                  "&:hover fieldset": { borderColor: "#FFD21E" },
+                  "&.Mui-focused fieldset": { borderColor: "#FFD21E" },
+                },
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <span style={{ fontSize: 18 }}>{"\u{1F50D}"}</span>
+                  </InputAdornment>
+                ),
+              }}
+            />
+            <TableContainer
+              component={Paper}
+              variant="outlined"
+              sx={{ border: "1px solid #30363d", bgcolor: "#0d1117" }}
+            >
+              <Table size="small">
+                <TableHead>
+                  <TableRow sx={{ bgcolor: "#161b22" }}>
+                    <TableCell sx={{ fontWeight: 600, width: 50 }}>
+                      #
+                    </TableCell>
+                    <TableCell sx={{ fontWeight: 600 }}>
+                      <TableSortLabel
+                        active={orderBy === "id"}
+                        direction={orderBy === "id" ? order : "asc"}
+                        onClick={() => handleSort("id")}
+                      >
+                        Space
+                      </TableSortLabel>
+                    </TableCell>
+                    <TableCell sx={{ fontWeight: 600, width: 120 }} align="right">
+                      <TableSortLabel
+                        active={orderBy === "likes"}
+                        direction={orderBy === "likes" ? order : "desc"}
+                        onClick={() => handleSort("likes")}
+                      >
+                        Likes
+                      </TableSortLabel>
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        fontWeight: 600,
+                        width: 140,
+                        display: { xs: "none", sm: "table-cell" },
+                      }}
+                    >
+                      <TableSortLabel
+                        active={orderBy === "createdAt"}
+                        direction={orderBy === "createdAt" ? order : "desc"}
+                        onClick={() => handleSort("createdAt")}
+                      >
+                        Created
+                      </TableSortLabel>
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {sorted.map((space, i) => {
+                    const parts = space.id.split("/");
+                    const author = parts[0];
+                    const name = parts[1];
+                    const isPopular = space.likes >= 50;
+                    return (
+                      <TableRow
+                        key={space.id}
+                        hover
+                        sx={{
+                          "&:hover": { bgcolor: "rgba(255,210,30,0.03)" },
+                          cursor: "pointer",
+                        }}
+                        onClick={() =>
+                          window.open(
+                            "https://huggingface.co/spaces/" + space.id,
+                            "_blank"
+                          )
+                        }
+                      >
+                        <TableCell>
+                          <Typography variant="body2" color="text.secondary">
+                            {i + 1}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Box>
+                            <Typography
+                              variant="caption"
+                              color="text.secondary"
+                              sx={{ display: "block", lineHeight: 1.3 }}
+                            >
+                              {author}
+                            </Typography>
+                            <Link
+                              href={
+                                "https://huggingface.co/spaces/" + space.id
+                              }
+                              target="_blank"
+                              rel="noopener"
+                              underline="hover"
+                              onClick={(e) => e.stopPropagation()}
+                              sx={{
+                                color: "#58a6ff",
+                                fontWeight: 500,
+                                fontSize: "0.9rem",
+                              }}
+                            >
+                              {name}
+                            </Link>
+                          </Box>
+                        </TableCell>
+                        <TableCell align="right">
+                          {space.likes > 0 ? (
+                            <Chip
+                              label={
+                                "\u2764\uFE0F " +
+                                space.likes.toLocaleString()
+                              }
+                              size="small"
+                              sx={{
+                                bgcolor: isPopular
+                                  ? "rgba(255,210,30,0.12)"
+                                  : "rgba(255,255,255,0.05)",
+                                color: isPopular ? "#FFD21E" : "#8b949e",
+                                fontWeight: isPopular ? 600 : 400,
+                                height: 24,
+                                "& .MuiChip-label": {
+                                  px: 1,
+                                  fontSize: "0.8rem",
+                                },
+                              }}
+                            />
+                          ) : (
+                            <Typography
+                              variant="body2"
+                              color="text.disabled"
+                              sx={{ fontSize: "0.8rem" }}
+                            >
+                              0
+                            </Typography>
+                          )}
+                        </TableCell>
+                        <TableCell
+                          sx={{
+                            display: { xs: "none", sm: "table-cell" },
+                          }}
+                        >
+                          <Typography
+                            variant="body2"
+                            color="text.secondary"
+                            sx={{ fontSize: "0.8rem" }}
+                          >
+                            {fmtDate(space.createdAt)}
+                          </Typography>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                  {sorted.length === 0 && (
+                    <TableRow>
+                      <TableCell colSpan={4} align="center" sx={{ py: 4 }}>
+                        <Typography color="text.secondary">
+                          No spaces found matching "{search}"
+                        </Typography>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <Typography
+              variant="body2"
+              color="text.disabled"
+              sx={{ textAlign: "center", mt: 4, fontSize: "0.75rem" }}
+            >
+              Data fetched live from the{" "}
+              <Link
+                href="https://huggingface.co/docs/hub/api"
+                target="_blank"
+                rel="noopener"
+                color="inherit"
+                underline="hover"
+              >
+                HuggingFace API
+              </Link>
+              {" \u2022 "}
+              <Link
+                href="https://github.com/tfrere/research-article-template"
+                target="_blank"
+                rel="noopener"
+                color="inherit"
+                underline="hover"
+              >
+                research-article-template
+              </Link>
+            </Typography>
+          </Container>
+        );
+      }
+      ReactDOM.createRoot(document.getElementById("root")).render(
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <App />
+        </ThemeProvider>
+      );
+    </script>
+  </body>
+</html>