File size: 5,384 Bytes
55d7c10 31767a7 9816072 31767a7 17388ad 4646723 b92b41e 17388ad 9816072 f831b65 9816072 f831b65 17388ad 9816072 17388ad f831b65 17388ad 9816072 633e5e5 17388ad 31767a7 55d7c10 31767a7 22aa376 633e5e5 17a3607 b92b41e 31767a7 55d7c10 31767a7 55d7c10 428d2d6 22aa376 55d7c10 428d2d6 31767a7 428d2d6 5e26aa6 22aa376 17388ad 31767a7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
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, PolicyDataSchema } from "../types";
import z from 'zod';
// 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 policyData = JSON.parse(policiesContent);
// Validate policyData against the schema
const validatedPolicyData = PolicyDataSchema.array().parse(policyData);
// Sort policyData based on releaseDate in descending order
validatedPolicyData.sort((a: PolicyData, b: PolicyData) => {
const dateA = new Date(a.releaseDate).getTime();
const dateB = new Date(b.releaseDate).getTime();
return dateB - dateA;
});
return {
props: {
policyData: validatedPolicyData,
},
revalidate: 3600,
};
} catch (error) {
if (error instanceof z.ZodError) {
const errorMessage = error.issues
.map((issue) => {
const path = issue.path.join('.');
const message = issue.message;
return `Invalid policy data at "${path}": ${message}`;
})
.join('\n');
console.error('Error validating policy data:', errorMessage);
throw new Error(`Failed to validate policy data:\n${errorMessage}`);
} else {
console.error('Error fetching data:', error);
if (error instanceof Error) {
throw new Error(`Failed to fetch policy data: ${error.message}`);
} else {
throw new Error('Failed to fetch policy data: An unknown error occurred.');
}
}
}
}
// 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} />
{/* Add citation section */}
<div className="mt-16">
<h2 className="text-2xl font-bold mb-4">Citation</h2>
<p className="text-gray-700 dark:text-gray-400">
If you use this resource in your research, please cite it as follows:
</p>
<pre className="bg-gray-100 dark:bg-gray-800 p-4 rounded mt-2">
{`@misc{china_ai_policy_${new Date().getFullYear()},
title={China AI Policy Research},
author={Tiezhen Wang, Adina Yakefu, Lu Cheng},
year={2024},
}`}
</pre>
</div>
</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);
|