Xianbao QIAN
update styling and fix a few links
d4a7cd9
raw
history blame
4.54 kB
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';
import { PolicyData } from "../types";
// 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 {
// Read policy data from policies.json
const policiesFilePath = path.join(process.cwd(), 'content', 'policies.json');
const policiesContent = fs.readFileSync(policiesFilePath, 'utf-8');
const rawPolicyData = JSON.parse(policiesContent);
// Transform the policy data into the expected format
const policyData = rawPolicyData.map((policy: any) => ({
zh: policy.zh,
en: policy.en,
link: {
zh: policy.link.zh || null, // Only include link if provided
en: policy.link.en || null, // Only include link if provided
},
releaseDate: policy.releaseDate,
}));
// Sort policyData based on releaseDate in descending order
policyData.sort((a: PolicyData, b: PolicyData) => {
const dateA = a.releaseDate ? new Date(a.releaseDate).getTime() : 0;
const dateB = b.releaseDate ? new Date(b.releaseDate).getTime() : 0;
return dateB - dateA;
});
return {
props: {
policyData,
},
revalidate: 3600,
};
} catch (error) {
console.error("Error fetching data:", error);
return {
props: {
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[] }> = ({
policyData,
}) => {
return (
<div className="w-full min-h-screen bg-white dark:bg-gray-900 dark:text-white">
<div className="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">
China AI policy research πŸ€—
</h1>
<AIPoliciesTable policies={policyData} />
</div>
{/* <div className="text-center text-sm my-8 space-y-4">
<p>
Models, Datasets, and Spaces from the top AI labs.
</p>
<div className="flex justify-center space-x-4">
<UserSearchDialog />
</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 className="space-y-16">
{sortedProviders.map((provider) => (
<ProviderHeatmap
key={provider.fullName || provider.authors[0]}
provider={provider}
calendarData={calendarData}
/>
))}
</div>
)} */}
</div>
);
};
export default React.memo(OpenSourceHeatmap);