Spaces:

zh-ai-community
/

china-ai-policy-research

Running

App Files Files Community

Xianbao QIAN commited on Oct 14, 2024

Commit

31767a7

1 Parent(s): 29c3483

Adapt the heatmap code for AI policy

Browse files

Files changed (11) hide show

bun.lockb +0 -0
content/policies/data-safety/en.md +5 -0
content/policies/data-safety/zh.md +7 -0
content/policies/global-ai/en.md +5 -0
content/policies/global-ai/zh.md +3 -0
package.json +2 -0
src/components/AIPoliciesTable.tsx +66 -0
src/pages/_document.tsx +15 -11
src/pages/index.tsx +118 -78
src/pages/policies/[slug].tsx +40 -0
src/pages/policies/[slug]/[fileName].tsx +50 -0

bun.lockb CHANGED Viewed

Binary files a/bun.lockb and b/bun.lockb differ

content/policies/data-safety/en.md ADDED Viewed

	@@ -0,0 +1,5 @@

+---
+title: English Policy Title
+language: English
+originalLink: https://example.com/policy1/en
+---

content/policies/data-safety/zh.md ADDED Viewed

	@@ -0,0 +1,7 @@

+---
+title: 中文政策标题
+language: 中文
+originalLink: https://abc.com
+---
+这是中文版的政策内容。

content/policies/global-ai/en.md ADDED Viewed

	@@ -0,0 +1,5 @@

+---
+title: Global AI Policy
+---
+Test global policy

content/policies/global-ai/zh.md ADDED Viewed

	@@ -0,0 +1,3 @@

+---
+title: 全球人工智能治理倡议
+---

package.json CHANGED Viewed

@@ -18,11 +18,13 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.427.0",
     "next": "14.2.5",
     "react": "^18",
     "react-activity-calendar": "^2.2.11",
     "react-dom": "^18",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7"
   },

     "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
     "lucide-react": "^0.427.0",
     "next": "14.2.5",
     "react": "^18",
     "react-activity-calendar": "^2.2.11",
     "react-dom": "^18",
+    "react-markdown": "^9.0.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/components/AIPoliciesTable.tsx ADDED Viewed

	@@ -0,0 +1,66 @@

+import React from 'react';
+import Link from 'next/link';
+interface PolicyData {
+  title: string;
+  slug: string;
+  fileName: string;
+  originalLink?: string;
+}
+interface AIPoliciesTableProps {
+  policies: PolicyData[];
+}
+const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
+  const groupedPolicies: { [slug: string]: PolicyData[] } = {};
+  policies.forEach((policy) => {
+    if (!groupedPolicies[policy.slug]) {
+      groupedPolicies[policy.slug] = [];
+    }
+    groupedPolicies[policy.slug].push(policy);
+  });
+  return (
+    <div className="my-8">
+      <h2 className="text-2xl font-bold mb-4 dark:text-white">AI Policies</h2>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse table-auto">
+          <tbody>
+            {Object.entries(groupedPolicies).map(([slug, policies], index) => {
+              const zhPolicy = policies.find((policy) => policy.fileName === 'zh.md');
+              const enPolicy = policies.find((policy) => policy.fileName === 'en.md');
+              return (
+                <tr key={slug} className={`${index % 2 === 0 ? 'bg-white dark:bg-gray-700' : 'bg-gray-50 dark:bg-gray-800'}`}>
+                  <td className="py-2 px-4 dark:text-white">
+                    <div>{zhPolicy?.title}</div>
+                    <div className="text-sm text-gray-500 dark:text-gray-400">{enPolicy?.title}</div>
+                  </td>
+                  <td className="py-2 px-4">
+                    {policies.map((policy) => (
+                      policy.originalLink ? (
+                        <a key={policy.fileName} href={policy.originalLink} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline dark:text-blue-400 mr-4">
+                          {policy.fileName === 'zh.md' ? '中文' : 'English'}
+                        </a>
+                      ) : (
+                        <Link key={policy.fileName} href={`/policies/${slug}/${policy.fileName}`}>
+                          <span className="text-blue-500 hover:underline dark:text-blue-400 mr-4 cursor-pointer">
+                            {policy.fileName === 'zh.md' ? '中文' : 'English'}
+                          </span>
+                        </Link>
+                      )
+                    ))}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+export default AIPoliciesTable;

src/pages/_document.tsx CHANGED Viewed

@@ -1,13 +1,17 @@
-import { Html, Head, Main, NextScript } from "next/document";
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
 }

+import Document, { Html, Head, Main, NextScript } from 'next/document';
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html className="dark">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }
+export default MyDocument;

src/pages/index.tsx CHANGED Viewed

@@ -1,46 +1,81 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { generateCalendarData } from "../utils/calendar";
-import {
-  OpenSourceHeatmapProps,
-  ProviderInfo,
-  ModelData,
-  CalendarData,
-} from "../types/heatmap";
-import Heatmap from "../components/Heatmap";
-import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
-import UserSearchDialog from "../components/UserSearchDialog";
-const PROVIDERS: ProviderInfo[] = [
-  { color: "#ff7000", authors: ["mistralai"] },
-  { color: "#1877F2", authors: ["meta-llama", "facebook", ] },
-  { color: "#10A37F", authors: ["openai"] },
-  { color: "#cc785c", authors: ["Anthropic"] },
-  { color: "#DB4437", authors: ["google"] },
-  { color: "#5E35B1", authors: ["allenai"] },
-  { color: "#0088cc", authors: ["apple"] },
-  { color: "#FEB800", authors: ["microsoft"] },
-  { color: "#76B900", authors: ["nvidia"] },
-  { color: "#0088cc", authors: ["deepseek-ai"] },
-  { color: "#0088cc", authors: ["Qwen"] },
-  { color: "#4C6EE6", authors: ["CohereForAI"] },
-  { color: "#4C6EE6", authors: ["ibm-granite"] },
-  { color: "#A020F0", authors: ["stabilityai"] },
-];
 export async function getStaticProps() {
   try {
-    const allAuthors = PROVIDERS.flatMap(({ authors }) => authors);
-    const uniqueAuthors = Array.from(new Set(allAuthors));
-    const flatData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
-    const updatedProviders = await fetchAllProvidersData(PROVIDERS);
-    const calendarData = generateCalendarData(flatData, updatedProviders);
     return {
       props: {
-        calendarData,
-        providers: updatedProviders,
       },
       revalidate: 3600, // regenerate every hour
     };
@@ -48,61 +83,66 @@ export async function getStaticProps() {
     console.error("Error fetching data:", error);
     return {
       props: {
-        calendarData: {},
-        providers: PROVIDERS,
       },
       revalidate: 60, // retry after 1 minute if there was an error
     };
   }
 }
-const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: ProviderInfo, calendarData: CalendarData }) => {
-  const providerName = provider.fullName || provider.authors[0];
-  return (
-    <div key={providerName} className="flex flex-col items-center">
-      <Heatmap
-        data={calendarData[providerName]}
-        color={provider.color}
-        providerName={providerName}
-        fullName={provider.fullName ?? providerName}
-        avatarUrl={provider.avatarUrl ?? ''}
-      />
-    </div>
-  );
-});
-const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
-  calendarData,
-  providers,
 }) => {
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    if (calendarData && Object.keys(calendarData).length > 0) {
-      setIsLoading(false);
-    }
-  }, [calendarData]);
-  const sortedProviders = useMemo(() =>
-    providers.sort((a, b) =>
-      calendarData[b.fullName || b.authors[0]].reduce(
-        (sum, day) => sum + day.count,
-        0
-      ) -
-      calendarData[a.fullName || a.authors[0]].reduce(
-        (sum, day) => sum + day.count,
-        0
-      )
-    ),
-    [providers, calendarData]
-  );
   return (
-    <div className="w-full max-w-screen-lg mx-auto p-4 py-16">
       <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">
         Hugging Face Heatmap 🤗
       </h1>
-      <div className="text-center text-sm my-8 space-y-4">
         <p>
           Models, Datasets, and Spaces from the top AI labs.
         </p>
@@ -111,7 +151,7 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
         </div>
       </div>
-      <div className="h-px max-w-lg mx-auto bg-gray-200 my-16" />
       {isLoading ? (
         <p className="text-center">Loading...</p>
@@ -125,9 +165,9 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
             />
           ))}
         </div>
-      )}
     </div>
   );
 };
-export default React.memo(OpenSourceHeatmap);

 import React, { useState, useEffect, useMemo } from "react";
+// import { generateCalendarData } from "../utils/calendar";
+// import {
+//   OpenSourceHeatmapProps,
+//   ProviderInfo,
+//   ModelData,
+//   CalendarData,
+// } from "../types/heatmap";
+// import Heatmap from "../components/Heatmap";
+// import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
+// import UserSearchDialog from "../components/UserSearchDialog";
+import AIPoliciesTable from "../components/AIPoliciesTable";
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+// const PROVIDERS: ProviderInfo[] = [
+//   { color: "#ff7000", authors: ["mistralai"] },
+//   { color: "#1877F2", authors: ["meta-llama", "facebook", ] },
+//   { color: "#10A37F", authors: ["openai"] },
+//   { color: "#cc785c", authors: ["Anthropic"] },
+//   { color: "#DB4437", authors: ["google"] },
+//   { color: "#5E35B1", authors: ["allenai"] },
+//   { color: "#0088cc", authors: ["apple"] },
+//   { color: "#FEB800", authors: ["microsoft"] },
+//   { color: "#76B900", authors: ["nvidia"] },
+//   { color: "#0088cc", authors: ["deepseek-ai"] },
+//   { color: "#0088cc", authors: ["Qwen"] },
+//   { color: "#4C6EE6", authors: ["CohereForAI"] },
+//   { color: "#4C6EE6", authors: ["ibm-granite"] },
+//   { color: "#A020F0", authors: ["stabilityai"] },
+// ];
+interface PolicyData {
+  title: string;
+  language: string;
+  originalLink: string;
+  slug: string;
+  fileName: string;
+}
 export async function getStaticProps() {
   try {
+    // const allAuthors = PROVIDERS.flatMap(({ authors }) => authors);
+    // const uniqueAuthors = Array.from(new Set(allAuthors));
+    // const flatData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
+    // const updatedProviders = await fetchAllProvidersData(PROVIDERS);
+    // const calendarData = generateCalendarData(flatData, updatedProviders);
+    // Read policy data
+    const policiesDir = path.join(process.cwd(), 'content', 'policies');
+    const policyFolders = fs.readdirSync(policiesDir);
+    const policyData: PolicyData[] = [];
+    for (const folder of policyFolders) {
+      const zhFilePath = path.join(policiesDir, folder, 'zh.md');
+      const enFilePath = path.join(policiesDir, folder, 'en.md');
+      if (fs.existsSync(zhFilePath) && fs.existsSync(enFilePath)) {
+        const zhContent = fs.readFileSync(zhFilePath, 'utf-8');
+        const enContent = fs.readFileSync(enFilePath, 'utf-8');
+        const { data: zhData } = matter(zhContent);
+        const { data: enData } = matter(enContent);
+        policyData.push({ ...zhData, slug: folder, fileName: 'zh.md' } as PolicyData);
+        policyData.push({ ...enData, slug: folder, fileName: 'en.md' } as PolicyData);
+      }
+    }
     return {
       props: {
+        // calendarData,
+        // providers: updatedProviders,
+        policyData, // Pass policy data as props
       },
       revalidate: 3600, // regenerate every hour
     };
     console.error("Error fetching data:", error);
     return {
       props: {
+        // calendarData: {},
+        // providers: PROVIDERS,
+        policyData: [], // Pass empty policy data as props
       },
       revalidate: 60, // retry after 1 minute if there was an error
     };
   }
 }
+// const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: ProviderInfo, calendarData: CalendarData }) => {
+//   const providerName = provider.fullName || provider.authors[0];
+//   return (
+//     <div key={providerName} className="flex flex-col items-center">
+//       <Heatmap
+//         data={calendarData[providerName]}
+//         color={provider.color}
+//         providerName={providerName}
+//         fullName={provider.fullName ?? providerName}
+//         avatarUrl={provider.avatarUrl ?? ''}
+//       />
+//     </div>
+//   );
+// });
+const OpenSourceHeatmap: React.FC<{ policyData: PolicyData[] }> = ({
+  // calendarData,
+  // providers,
+  policyData,
 }) => {
+  // const [isLoading, setIsLoading] = useState(true);
+  // useEffect(() => {
+  //   if (calendarData && Object.keys(calendarData).length > 0) {
+  //     setIsLoading(false);
+  //   }
+  // }, [calendarData]);
+  // const sortedProviders = useMemo(() =>
+  //   providers.sort((a, b) =>
+  //     calendarData[b.fullName || b.authors[0]].reduce(
+  //       (sum, day) => sum + day.count,
+  //       0
+  //     ) -
+  //     calendarData[a.fullName || a.authors[0]].reduce(
+  //       (sum, day) => sum + day.count,
+  //       0
+  //     )
+  //   ),
+  //   [providers, calendarData]
+  // );
   return (
+    <div className="w-full max-w-screen-lg mx-auto p-4 py-16 dark:bg-gray-900 dark:text-white">
       <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">
         Hugging Face Heatmap 🤗
       </h1>
+      <AIPoliciesTable policies={policyData} />
+      {/* <div className="text-center text-sm my-8 space-y-4">
         <p>
           Models, Datasets, and Spaces from the top AI labs.
         </p>
         </div>
       </div>
+      <div className="h-px max-w-lg mx-auto bg-gray-200 dark:bg-gray-700 my-16" />
       {isLoading ? (
         <p className="text-center">Loading...</p>
             />
           ))}
         </div>
+      )} */}
     </div>
   );
 };
+export default React.memo(OpenSourceHeatmap);

src/pages/policies/[slug].tsx ADDED Viewed

	@@ -0,0 +1,40 @@

+import React from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import ReactMarkdown from 'react-markdown';
+interface PolicyProps {
+  content: string;
+}
+const PolicyPage: React.FC<PolicyProps> = ({ content }) => {
+  return (
+    <div className="container mx-auto py-8">
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  );
+};
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: false,
+  };
+};
+export const getStaticProps: GetStaticProps<PolicyProps> = async ({ params }) => {
+  const { slug, fileName } = params as { slug: string; fileName: string };
+  const filePath = path.join(process.cwd(), 'content', 'policies', slug, fileName);
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const { content } = matter(fileContent);
+  return {
+    props: {
+      content,
+    },
+  };
+};
+export default PolicyPage;

src/pages/policies/[slug]/[fileName].tsx ADDED Viewed

	@@ -0,0 +1,50 @@

+import React from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import ReactMarkdown from 'react-markdown';
+interface PolicyProps {
+  content: string;
+}
+const PolicyPage: React.FC<PolicyProps> = ({ content }) => {
+  return (
+    <div className="container mx-auto py-8">
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  );
+};
+export const getStaticPaths: GetStaticPaths = async () => {
+  const policiesDir = path.join(process.cwd(), 'content', 'policies');
+  const policyFolders = fs.readdirSync(policiesDir);
+  const paths = policyFolders.flatMap((folder) => {
+    const languageFiles = fs.readdirSync(path.join(policiesDir, folder));
+    return languageFiles.map((file) => {
+      return { params: { slug: folder, fileName: file } };
+    });
+  });
+  return {
+    paths,
+    fallback: false,
+  };
+};
+export const getStaticProps: GetStaticProps<PolicyProps> = async ({ params }) => {
+  const { slug, fileName } = params as { slug: string; fileName: string };
+  const filePath = path.join(process.cwd(), 'content', 'policies', slug, fileName);
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const { content } = matter(fileContent);
+  return {
+    props: {
+      content,
+    },
+  };
+};
+export default PolicyPage;