/trend: add filter for models/datasets.

src/pages/trend/index.tsx

@@ -65,6 +65,7 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
   const [selectedProviders, setSelectedProviders] = useState<string[]>([]);
   const [minLikes, setMinLikes] = useState(100);
   const [isLoading, setIsLoading] = useState(false);
+  const [contentType, setContentType] = useState<'all' | 'models' | 'datasets'>('all');
 
   const toggleProvider = (provider: string) => {
     setSelectedProviders(prev => 
@@ -76,18 +77,33 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
 
   // Group data by provider
   const providerData = Object.fromEntries(
-    Object.keys(PROVIDERS_MAP).map(provider => [
-      provider,
-      monthlyData.filter(d => d.provider === provider) || []
-    ])
+    Object.keys(PROVIDERS_MAP).map(provider => {
+      const providerMonthlyData = monthlyData.filter(d => {
+        const isDataset = d.name?.toLowerCase().includes('dataset') || 
+                         d.name?.toLowerCase().includes('corpus') ||
+                         d.name?.toLowerCase().includes('data');
+        const matchesContentType = contentType === 'all' || 
+                                 (contentType === 'datasets' && isDataset) ||
+                                 (contentType === 'models' && !isDataset);
+        return d.provider === provider && matchesContentType;
+      });
+      return [provider, providerMonthlyData || []];
+    })
   );
 
   // Filter and group detailed model data
   const filteredModels = (detailedData || [])
     .filter(model => {
-      console.log('Filtering model:', model.name, model.likes, model.provider);
+      const isDataset = model.name.toLowerCase().includes('dataset') || 
+                       model.name.toLowerCase().includes('corpus') ||
+                       model.name.toLowerCase().includes('data');
+      const matchesContentType = contentType === 'all' || 
+                               (contentType === 'datasets' && isDataset) ||
+                               (contentType === 'models' && !isDataset);
+      
       return model.likes >= minLikes && 
-        (selectedProviders.length === 0 || selectedProviders.includes(model.provider));
+        (selectedProviders.length === 0 || selectedProviders.includes(model.provider)) &&
+        matchesContentType;
     })
     .reduce<Record<string, DetailedModelData[]>>((acc, model) => {
       if (!acc[model.monthKey]) {
@@ -98,10 +114,10 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
     }, {});
 
   useEffect(() => {
-    console.log('Current filtered models:', filteredModels);
+    console.log('Content type changed:', contentType);
     console.log('Selected providers:', selectedProviders);
     console.log('Min likes:', minLikes);
-  }, [filteredModels, selectedProviders, minLikes]);
+  }, [contentType, selectedProviders, minLikes]);
 
   if (error) {
     return (
@@ -119,8 +135,41 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
     <div className="w-full max-w-screen-xl mx-auto p-4">
       <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2 dark:text-white">Chinese AI Model Release Trends 📈</h1>
       <p className="text-center text-sm mb-8 dark:text-gray-300">
-        Historical trends of model releases from Chinese AI organizations
+        Track the growth of Chinese AI models and datasets over time
       </p>
+      
+      <div className="flex justify-center mb-6 space-x-4">
+        <button
+          onClick={() => setContentType('all')}
+          className={`px-4 py-2 rounded-lg ${
+            contentType === 'all'
+              ? 'bg-blue-500 text-white'
+              : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+          }`}
+        >
+          All
+        </button>
+        <button
+          onClick={() => setContentType('models')}
+          className={`px-4 py-2 rounded-lg ${
+            contentType === 'models'
+              ? 'bg-blue-500 text-white'
+              : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+          }`}
+        >
+          Models
+        </button>
+        <button
+          onClick={() => setContentType('datasets')}
+          className={`px-4 py-2 rounded-lg ${
+            contentType === 'datasets'
+              ? 'bg-blue-500 text-white'
+              : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+          }`}
+        >
+          Datasets
+        </button>
+      </div>
 
       {/* Controls */}
       <div className="flex flex-wrap gap-4 mb-6 justify-center items-center">