feat: add example for datasheet + verbiage (risc0#2242)

Based on what Paul wrote to me > wrote some verbiage for the datasheet: > The data on this page can be used to estimate the total time and work required for proving zkVM applications. We recommend reading about our [recursive proving architecture](https://dev.risczero.com/api/recursion) as a companion for this page. > Example > To prove 6 million cycles (6 segments), the work required is… > 6 million cycles of `execute` > 6 calls to `rv32im` (1M cycles) > 6 calls to `lift` > 5 calls to `join` > 1 call to `identity_p254`(optional) > 1 call to stark2snark (optional) > The last two steps are only required if you’d like to verify your proofs on-chain. The row labelled `succinct` shows the cost for execute + rv32im + lift. The row labelled `groth16` shows the cost for execute + rv32im + lift + identity_p254 + stark2snark. On Bonsai, calls to rv32im, lift, and join are parallellized. Screenshots: <img width="1472" alt="image" src="https://github.com/user-attachments/assets/bf2e8d67-b57b-44bd-9363-7b16bd885ee0"> <img width="1466" alt="image" src="https://github.com/user-attachments/assets/b9cd3590-4e49-4e45-9d09-a10a16a25e36"> --------- Co-authored-by: Frank Laub <[email protected]>
halseth · Aug 17, 2024 · 939ac2c · 939ac2c
1 parent 2cdcd8f
commit 939ac2c
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/...ps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/datasheet/layout.tsx b/...ps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/datasheet/layout.tsx
@@ -1,11 +1,28 @@
+import { Badge } from "@risc0/ui/badge";
+import { Button } from "@risc0/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@risc0/ui/popover";
 import { Separator } from "@risc0/ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@risc0/ui/tooltip";
+import { InfoIcon } from "lucide-react";
+import Link from "next/link";
 import { type PropsWithChildren, Suspense } from "react";
 import { SuspenseLoader } from "shared/client/components/suspense-loader";
 import type { Version } from "~/types/version";
 import { FooterAscii } from "../../_components/footer-ascii";
 import { redirectIfWrongVersion } from "../../_utils/redirect-if-wrong-version";
 import { DatasheetCommitHashButton } from "./_components/datasheet-commit-hash-button";
 
+function CodeBadge({ children }: PropsWithChildren) {
+  return (
+    <Badge
+      variant="secondary"
+      className="bg-neutral-100 p-0 font-mono text-[10px] text-purple-900 leading-tight dark:bg-neutral-700 dark:text-purple-50"
+    >
+      {children}
+    </Badge>
+  );
+}
+
 export default function DatasheetLayout({
   children,
   params,
@@ -19,7 +36,68 @@ export default function DatasheetLayout({
   return (
     <div className="container max-w-screen-3xl">
       <div className="flex items-center justify-between gap-8">
-        <h1 className="text-2xl">Datasheet</h1>
+        <div>
+          <h1 className="text-2xl">Datasheet</h1>
+          <p className="text-muted-foreground text-sm">
+            The data on this page can be used to estimate the total time and work required for proving zkVM
+            applications. We recommend reading about our{" "}
+            <Link
+              rel="noopener noreferrer"
+              href="https://dev.risczero.com/api/recursion"
+              target="_blank"
+              className="link"
+            >
+              recursive proving architecture
+            </Link>{" "}
+            as a companion for this page.
+          </p>
+          <div className="text-muted-foreground text-sm">
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" className="my-2" startIcon={<InfoIcon />}>
+                  Show Example
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-full max-w-screen-sm text-sm">
+                <p>To prove 6 million cycles (6 segments), the work required is:</p>
+                <br />
+                <ul>
+                  <li>
+                    * 6 million cycles of <CodeBadge>execute</CodeBadge>
+                  </li>
+                  <li>
+                    * 6 calls to <CodeBadge>rv32im</CodeBadge> (1M cycles)
+                  </li>
+                  <li>
+                    * 6 calls to <CodeBadge>lift</CodeBadge>
+                  </li>
+                  <li>
+                    * 5 calls to <CodeBadge>join</CodeBadge>
+                  </li>
+                  <li>
+                    * 1 call to <CodeBadge>identity_p254</CodeBadge> (optional)
+                  </li>
+                  <li>
+                    * 1 call to <CodeBadge>stark2snark</CodeBadge> (optional)
+                  </li>
+                </ul>
+                <br />
+                <p>
+                  The last two steps are only required if you'd like to verify your proofs on-chain. The row labelled{" "}
+                  <CodeBadge>succinct</CodeBadge> shows the cost for <CodeBadge>execute</CodeBadge> +{" "}
+                  <CodeBadge>rv32im</CodeBadge> + <CodeBadge>lift</CodeBadge>. The row labelled{" "}
+                  <CodeBadge>groth16</CodeBadge> shows the cost for <CodeBadge>execute</CodeBadge> +{" "}
+                  <CodeBadge>rv32im</CodeBadge> + <CodeBadge>lift</CodeBadge> + <CodeBadge>identity_p254</CodeBadge> +
+                  <CodeBadge>stark2snark</CodeBadge>.
+                  <br />
+                  <br />
+                  On Bonsai, calls to <CodeBadge>rv32im</CodeBadge>, <CodeBadge>lift</CodeBadge>, and{" "}
+                  <CodeBadge>join</CodeBadge> are parallellized.
+                </p>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
 
         <Suspense fallback={<SuspenseLoader />}>
           <DatasheetCommitHashButton version={params.version} />

diff --git a/web/package.json b/web/package.json
@@ -11,17 +11,17 @@
   },
   "dependencies": {
     "@joshdavenport/tailwindcss-filter-order": "0.2.0",
-    "@poppinss/intl-formatter": "3.0.2",
+    "@poppinss/intl-formatter": "3.0.3",
     "@risc0/ui": "0.0.89",
     "@t3-oss/env-nextjs": "0.11.0",
-    "@tanstack/match-sorter-utils": "8.15.1",
-    "@tanstack/react-table": "8.19.3",
+    "@tanstack/match-sorter-utils": "8.19.4",
+    "@tanstack/react-table": "8.20.1",
     "@vercel/analytics": "1.3.1",
     "@vercel/speed-insights": "1.0.12",
     "chart.js": "2.9.4",
     "deepmerge": "4.3.1",
-    "framer-motion": "11.3.19",
-    "lucide-react": "0.417.0",
+    "framer-motion": "11.3.28",
+    "lucide-react": "0.428.0",
     "next": "14.2.5",
     "next-themes": "0.3.0",
     "prism-react-renderer": "2.3.1",
@@ -31,7 +31,7 @@
     "react-dom": "18.3.1",
     "react-rainbow-ascii": "1.0.3",
     "sharp": "0.33.4",
-    "turbo": "2.0.10",
+    "turbo": "2.0.14",
     "typescript": "5.5.4",
     "zod": "3.23.8"
   },
@@ -40,9 +40,9 @@
     "@next/bundle-analyzer": "14.2.5",
     "@types/chart.js": "2.9.41",
     "@types/jest": "29.5.12",
-    "@types/node": "22.0.0",
+    "@types/node": "22.3.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0"
   },
-  "packageManager": "[email protected].15"
+  "packageManager": "[email protected].24"
 }
diff --git a/web/packages/shared/styles/styles.css b/web/packages/shared/styles/styles.css
@@ -51,7 +51,11 @@ html {
 }
 
 a {
-  @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+  @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
+}
+
+.link {
+  @apply hover:text-primary dark:no-underline underline;
 }
 
 /* Chartjs */