update

client/src/pages/HowToSubmitPage/HowToSubmitPage.jsx

@@ -125,6 +125,21 @@ const CodeBlock = ({ children }) => (
       borderRadius: 1,
       fontFamily: "monospace",
       mb: 2,
+      "& .key": {
+        color: (theme) => theme.palette.primary.main,
+      },
+      "& .value": {
+        color: (theme) =>
+          theme.palette.mode === "dark"
+            ? theme.palette.success.light
+            : theme.palette.success.dark,
+      },
+      "& .comment": {
+        color: (theme) => theme.palette.text.secondary,
+      },
+      "& .punctuation": {
+        color: (theme) => theme.palette.text.primary,
+      },
     }}
   >
     {children}
@@ -135,21 +150,38 @@ const HowToSubmitPage = () => {
   return (
     <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", padding: 4 }}>
       <PageHeader
-        title="How to Submit"
+        title="How to submit ?"
         subtitle={
           <>
-            How to <span style={{ fontWeight: 600 }}>be a part</span> of{" "}
+            Join the <span style={{ fontWeight: 600 }}>community</span> of{" "}
             <span style={{ fontWeight: 600 }}>"leaderboards on the Hub"</span>
           </>
         }
       />
 
-      <Section title="How to submit your leaderboard?">
+      <Section title="Configuration steps">
         <Stack spacing={4}>
           <Typography variant="body1" color="text.secondary">
-            To be listed on this explorer, your leaderboard must be hosted on a
-            Hugging Face Space. Follow these steps to make your Space
-            discoverable:
+            Your leaderboard must be hosted on a{" "}
+            <Link
+              href="https://huggingface.co/docs/hub/spaces"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Hugging Face Space
+            </Link>
+            .
+            <br />
+            Like{" "}
+            <Link
+              href="https://huggingface.co/docs/hub/model-cards"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              model cards
+            </Link>
+            , your Space's <strong>README.md</strong> file should include
+            specific <strong>metadata</strong> in a YAML section at the top.
           </Typography>
 
           <Box
@@ -160,34 +192,73 @@ const HowToSubmitPage = () => {
               position: "relative",
             }}
           >
-            <Box sx={{ flex: 1 }}>
-              <Stack spacing={3}>
-                <Stack direction="row" spacing={2} alignItems="center">
-                  <StepNumber number={1} />
-                  <Typography
-                    variant="subtitle1"
-                    sx={{
-                      fontWeight: 600,
-                      color: "text.primary",
-                      letterSpacing: "-0.01em",
-                    }}
-                  >
-                    Is it an Arena or a Leaderboard ?
-                  </Typography>
-                </Stack>
-                <Box sx={{ pl: 7 }}>
-                  <Stack spacing={2}>
+            <Box sx={{ flex: 4 }}>
+              <Stack spacing={4}>
+                <Stack spacing={3}>
+                  <Stack direction="row" spacing={2} alignItems="center">
+                    <StepNumber number={1} />
+                    <Typography
+                      variant="subtitle1"
+                      sx={{
+                        fontWeight: 600,
+                        color: "text.primary",
+                        letterSpacing: "-0.01em",
+                      }}
+                    >
+                      Define the type
+                    </Typography>
+                  </Stack>
+                  <Box sx={{ pl: 7 }}>
                     <Typography variant="body2" color="text.secondary">
                       Add either the <strong>leaderboard</strong> or{" "}
-                      <strong>arena</strong> tag to your README.md:
+                      <strong>arena</strong> tag.
+                    </Typography>
+                  </Box>
+                </Stack>
+
+                <Stack spacing={3}>
+                  <Stack direction="row" spacing={2} alignItems="center">
+                    <StepNumber number={2} />
+                    <Typography
+                      variant="subtitle1"
+                      sx={{
+                        fontWeight: 600,
+                        color: "text.primary",
+                        letterSpacing: "-0.01em",
+                      }}
+                    >
+                      Add a description
+                    </Typography>
+                  </Stack>
+                  <Box sx={{ pl: 7 }}>
+                    <Typography variant="body2" color="text.secondary">
+                      Include a <strong>short_description</strong> field to
+                      explain the purpose of your evaluation.
+                    </Typography>
+                  </Box>
+                </Stack>
+
+                <Stack spacing={3}>
+                  <Stack direction="row" spacing={2} alignItems="center">
+                    <StepNumber number={3} />
+                    <Typography
+                      variant="subtitle1"
+                      sx={{
+                        fontWeight: 600,
+                        color: "text.primary",
+                        letterSpacing: "-0.01em",
+                      }}
+                    >
+                      Specify metadata
                     </Typography>
-                    <CodeBlock>
-                      tags:
-                      <br />
-                      &nbsp;&nbsp;- leaderboard # or arena
-                    </CodeBlock>
                   </Stack>
-                </Box>
+                  <Box sx={{ pl: 7 }}>
+                    <Typography variant="body2" color="text.secondary">
+                      Add <strong>metadata tags</strong> to categorize your
+                      evaluation and help users understand its characteristics.
+                    </Typography>
+                  </Box>
+                </Stack>
               </Stack>
             </Box>
 
@@ -199,93 +270,65 @@ const HowToSubmitPage = () => {
               }}
             />
 
-            <Box sx={{ flex: 1 }}>
-              <Stack spacing={3}>
-                <Stack direction="row" spacing={2} alignItems="center">
-                  <StepNumber number={2} />
-                  <Typography
-                    variant="subtitle1"
-                    sx={{
-                      fontWeight: 600,
-                      color: "text.primary",
-                      letterSpacing: "-0.01em",
-                    }}
-                  >
-                    Describe it briefly
-                  </Typography>
-                </Stack>
-                <Box sx={{ pl: 7 }}>
-                  <Stack spacing={2}>
-                    <Typography variant="body2" color="text.secondary">
-                      Include a <strong>short_description</strong> field in your
-                      README.md.
-                    </Typography>
-                    <CodeBlock>
-                      short_description: Evaluating LLMs on math reasoning tasks
-                    </CodeBlock>
-                  </Stack>
-                </Box>
-              </Stack>
+            <Box sx={{ flex: 5 }}>
+              <CodeBlock>
+                ---
+                <br />
+                <span className="key">short_description</span>
+                <span className="punctuation">:</span>{" "}
+                <span className="value">
+                  Evaluating LLMs on math reasoning tasks
+                </span>
+                <br />
+                <span className="key">tags</span>
+                <span className="punctuation">:</span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">leaderboard</span>
+                <span className="comment">
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
+                  Type of leaderboard
+                </span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">submission:automatic</span>{" "}
+                <span className="comment"># How models are submitted</span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">test:public</span>{" "}
+                <span className="comment">
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Test
+                  set visibility
+                </span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">judge:function</span>{" "}
+                <span className="comment">
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Evaluation method
+                </span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">modality:text</span>{" "}
+                <span className="comment">
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Input/output type
+                </span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">language:english</span>{" "}
+                <span className="comment">
+                  &nbsp;&nbsp;&nbsp;&nbsp;# Language coverage
+                </span>
+                <br />
+                <span className="punctuation">&nbsp;&nbsp;-</span>{" "}
+                <span className="value">domain:financial</span>{" "}
+                <span className="comment">
+                  &nbsp;&nbsp;&nbsp;&nbsp;# Specific domain
+                </span>
+                <br />
+                ---
+              </CodeBlock>
             </Box>
           </Box>
-
-          <Divider />
-
-          <Box>
-            <Stack spacing={3}>
-              <Stack direction="row" spacing={2} alignItems="center">
-                <StepNumber number={3} />
-                <Typography
-                  variant="subtitle1"
-                  sx={{
-                    fontWeight: 600,
-                    color: "text.primary",
-                    letterSpacing: "-0.01em",
-                  }}
-                >
-                  Add relevant tags
-                </Typography>
-              </Stack>
-              <Box sx={{ pl: 7 }}>
-                <Stack spacing={2}>
-                  <Typography variant="body2" color="text.secondary">
-                    Add relevant tags from these categories to help users find
-                    and understand your leaderboard.
-                  </Typography>
-                  <CodeBlock>
-                    tags:
-                    <br />
-                    &nbsp;&nbsp;- leaderboard
-                    <br />
-                    &nbsp;&nbsp;- submission:automatic &nbsp;&nbsp;# How models
-                    are submitted
-                    <br />
-                    &nbsp;&nbsp;- test:public
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
-                    Test set visibility
-                    <br />
-                    &nbsp;&nbsp;- judge:function
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
-                    Evaluation method
-                    <br />
-                    &nbsp;&nbsp;- modality:text
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#
-                    Input/output type
-                    <br />
-                    &nbsp;&nbsp;- language:english
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Language coverage
-                    <br />
-                    &nbsp;&nbsp;- domain:financial
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# Specific domain
-                  </CodeBlock>
-                  <Typography variant="body2" color="text.secondary">
-                    See the complete list of available tags and their meanings
-                    below.
-                  </Typography>
-                </Stack>
-              </Box>
-            </Stack>
-          </Box>
         </Stack>
       </Section>