做时间轴图表并不难,但是很麻烦,先要大量收集相关事件,然后在一些图表软件中反复调整操作。现在借助AI工具,可以自动生成了。
首先,在kimi中输入提示词来获取某个企业的大事记:
联网检索,元语智能chatYuan这个公司的大事记
以下是kimi的回复:
根据搜索结果,元语智能ChatYuan的大事记如下:
2022年10月1日,元语智能发布了PromptCLUE1.0模型和API,这是首个中文支持的零样本开源模型。
2022年11月,发布了PromptCLUE1.5模型和API,这个版本支持更多任务的零样本开源模型。
2022年12月20日,元语智能发布了ChatYuan,这是国内首个基于百亿参数大模型的功能对话产品,支持小程序和网页。
2023年1月12日,元语智能发布了ChatYuan大模型,这是首个功能对话开源模型供免费下载,全平台已有数万下载量。
2023年2月3日,元语智能发布了ChatYuan API,可供API调用的功能对话模型。
2023年2月22日,元语智能对ChatYuan进行了升级,支持中英双语交互、多次编辑、上下文关联交互、模拟情景设定等多种新功能。
可以看到是比较完整的,然后可以根据企业微信公众号等渠道再稍微添加一些事件,就很完整了。
接下来,将以上大事记复制到claude中,然后加上一段提示词:根据以上内容,用react创建一个竖向的时间轴图表,要紧凑一些,不用滚动下拉即可在一屏中看见,字体加粗,要有设计感一些,时间要显示成年月日,标题是:元语智能大事记
claude很快生成图表:
还可以查看源代码:
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
const timelineData = [
{ date: '2022-10-01', event: 'PromptCLUE1.0模型' },
{ date: '2022-11-01', event: 'PromptCLUE1.5模型' },
{ date: '2022-12-20', event: 'ChatYuan发布' },
{ date: '2023-01-12', event: 'ChatYuan大模型开源' },
{ date: '2023-02-03', event: 'API发布' },
{ date: '2023-02-09', event: '小程序打不开' },
{ date: '2023-02-22', event: 'ChatYuan升级' },
{ date: '2023-03-24', event: '支持手机' },
{ date: '2023-03-30', event: '入选AIGC50' },
{ date: '2023-04-03', event: '与外研在线合作' },
{ date: '2023-04-18', event: '升级版本发布' },
{ date: '2023-04-21', event: 'KnowX1.0发布' },
{ date: '2023-04-27', event: '入选AI创新企业TOP20' },
{ date: '2023-08-28', event: '公众号最后更新' },
];
const TimelineItem = ({ date, event, isLast }) => (
<divName="flex items-start mb-3 relative">
<divName="flex flex-col items-center mr-4">
<divName="w-3 h-3 bg-blue-500 rounded-full z-10"></div>
{!isLast && <divName="w-0.5 h-full bg-blue-200 absolute top-3 left-1"></div>}
</div>
<divName="flex-1">
<pName="text-xs font-bold text-blue-600 mb-1">{date}</p>
<pName="text-sm font-semibold">{event}</p>
</div>
</div>
);
const VerticalTimeline = () => {
return (
<CardName="max-w-md mx-auto h-screen flex flex-col bg-gradient-to-b from-blue-50 to-white">
<CardContentName="p-6 flex-grow overflow-hidden">
<h2Name="text-2xl font-extrabold mb-4 text-center text-blue-800">元语智能大事记</h2>
<divName="overflow-y-auto h-full pr-2 space-y-1">
{timelineData.map((item, index) => (
<TimelineItem
key={index}
date={item.date}
event={item.event}
isLast={index === timelineData.length - 1}
/>
))}
</div>
</CardContent>
</Card>
);
};
export default VerticalTimeline;