File size: 5,459 Bytes
55d7c10
31767a7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f831b65
31767a7
5e26aa6
17388ad
 
31767a7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17388ad
31767a7
 
17388ad
f831b65
 
 
 
 
 
 
 
 
 
 
 
31767a7
 
17388ad
f831b65
 
 
 
 
 
 
17388ad
 
f831b65
17388ad
f831b65
17388ad
 
 
 
 
31767a7
17388ad
 
 
633e5e5
17388ad
 
31767a7
 
 
 
 
 
 
 
 
 
 
 
 
 
55d7c10
31767a7
 
22aa376
633e5e5
17a3607
 
 
 
 
 
 
 
 
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
154
155
156
157
158
159
160
161
162
163
164
165
166
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;
  releaseDate: 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',
          releaseDate: zhData.releaseDate ? zhData.releaseDate.toString() : '',
        } as PolicyData);
        policyData.push({
          ...enData,
          slug: folder,
          fileName: 'en.md',
          releaseDate: enData.releaseDate ? enData.releaseDate.toString() : '',
        } as PolicyData);
      }
    }

    // Sort policyData based on releaseDate in descending order
    policyData.sort((a, b) => {
      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);