Skip to content

Commit fce6749

Browse files
KadxyKadxy
committed
feat(pricing):add model icon
1 parent a577f0f commit fce6749

File tree

4 files changed

+113
-100
lines changed

4 files changed

+113
-100
lines changed

‎app/pages/Pricing.tsx‎

Lines changed: 107 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,124 @@
1-
import {Row, Typography} from "antd";
1+
import {Image, Row, Typography} from "antd";
22
import {SCROLL_STYLE} from "@/constant";
33
import {modelHub} from "ai-model-hub";
4-
import {ProCard, ProTable} from "@ant-design/pro-components";
4+
import {ProCard, ProTable, WaterMark} from "@ant-design/pro-components";
55

66
const {Text} = Typography;
77

88
export function PricingPage() {
99
return (
1010
<div style={{...SCROLL_STYLE}}>
11-
<Row
12-
gutter={[16, 16]}
13-
style={{...SCROLL_STYLE, height: "100%", padding: 32, borderRadius: 16}}
11+
<WaterMark
12+
content={"OpenAI-Next"}
13+
fontColor={"rgba(0,0,0,0.1)"}
1414
>
15-
<>
16-
{modelHub.getAll().map((provider) => {
17-
return (
18-
<ProCard
19-
title={provider.provider}
20-
key={provider.provider}
21-
bordered
22-
headerBordered
23-
>
24-
<ProTable
25-
options={false}
26-
pagination={false}
27-
search={false}
28-
size={"small"}
29-
dataSource={provider.models_list}
30-
columns={[
31-
{
32-
title: "模型名称",
33-
dataIndex: "name",
34-
width: "15%",
35-
render: (_, record) => <Text strong copyable>{record.name}</Text>
36-
},
37-
{
38-
title: "发布时间",
39-
dataIndex: "release_time",
40-
width: "10%",
41-
render: (_, record) => {
42-
try {
43-
const timestamp = Number(record.release_time) * 1000;
44-
if (isNaN(timestamp) || timestamp < 0) {
15+
<Row
16+
gutter={[16, 16]}
17+
style={{...SCROLL_STYLE, height: "100%", padding: 32, borderRadius: 16}}
18+
>
19+
<>
20+
{modelHub.getAll().map((provider) => {
21+
return (
22+
<ProCard
23+
title={provider.logo.icon ? <><Image
24+
src={provider.logo.icon?.black_white || provider.logo.icon?.color || ""}
25+
height={32}
26+
preview={false}
27+
style={{verticalAlign: 'middle'}}
28+
/>
29+
<b style={{
30+
fontSize: 18,
31+
marginLeft: 8,
32+
verticalAlign: 'middle'
33+
}}>{provider.provider}</b></>
34+
:
35+
provider.provider
36+
}
37+
key={provider.provider}
38+
bordered
39+
headerBordered
40+
>
41+
<ProTable
42+
options={false}
43+
pagination={false}
44+
search={false}
45+
size={"small"}
46+
dataSource={provider.models_list}
47+
columns={[
48+
{
49+
title: "模型名称",
50+
dataIndex: "name",
51+
width: "21%",
52+
render: (_, record) => <Text strong copyable>{record.name}</Text>
53+
},
54+
{
55+
title: "发布时间",
56+
dataIndex: "release_time",
57+
width: "11%",
58+
render: (_, record) => {
59+
try {
60+
const timestamp = Number(record.release_time) * 1000;
61+
if (isNaN(timestamp) || timestamp < 0) {
62+
return <Text type={"secondary"}>-</Text>
63+
} else {
64+
const date = {
65+
year: new Date(timestamp).getFullYear(),
66+
month: new Date(timestamp).getMonth() + 1,
67+
day: new Date(timestamp).getDate(),
68+
};
69+
return <Text>{date.year}-{(date.month).toString().padStart(2, "0")}-{(date.day).toString().padStart(2, "0")}</Text>
70+
}
71+
} catch (e) {
4572
return <Text type={"secondary"}>-</Text>
46-
} else {
47-
const date = {
48-
year: new Date(timestamp).getFullYear(),
49-
month: new Date(timestamp).getMonth() + 1,
50-
day: new Date(timestamp).getDate(),
51-
};
52-
return <Text>{date.year}-{(date.month).toString().padStart(2, "0")}-{(date.day).toString().padStart(2, "0")}</Text>
5373
}
54-
} catch (e) {
55-
return <Text type={"secondary"}>-</Text>
56-
}
74+
},
75+
},
76+
{
77+
title: "模型介绍",
78+
dataIndex: "description",
79+
width: "38%",
80+
ellipsis: true,
5781
},
58-
},
59-
{
60-
title: "模型介绍",
61-
dataIndex: "description",
62-
width: "50%",
63-
ellipsis: true,
64-
},
65-
{
66-
title: "价格（输入）",
67-
render: (_, record) => {
68-
const price = record?.price?.[0]?.input;
69-
const isFree = price === 0;
70-
return (
71-
price ? isFree ? <Text type={"success"}>免费</Text> :
72-
<Text>${price} / 1M tokens</Text> :
73-
<Text type={"secondary"}>暂无</Text>
74-
)
82+
{
83+
title: "价格（输入）",
84+
render: (_, record) => {
85+
const price = record?.price?.[0]?.input;
86+
const isFree = price === 0;
87+
return (
88+
price ? isFree ? <Text type={"success"}>免费</Text> :
89+
<Text>${price} / 1M tokens</Text> :
90+
<Text type={"secondary"}>暂无</Text>
91+
)
92+
},
93+
width: "15%",
7594
},
76-
width: "10%",
77-
},
78-
{
79-
title: "价格（输出）",
80-
render: (_, record) => {
81-
const price = record?.price?.[0]?.output;
82-
const isFree = price === 0;
83-
return (
84-
price ? isFree ? <Text type={"success"}>免费</Text> :
85-
<Text>${price} / 1M tokens</Text> :
86-
<Text type={"secondary"}>暂无</Text>
87-
)
95+
{
96+
title: "价格（输出）",
97+
render: (_, record) => {
98+
const price = record?.price?.[0]?.output;
99+
const isFree = price === 0;
100+
return (
101+
price ? isFree ? <Text type={"success"}>免费</Text> :
102+
<Text>${price} / 1M tokens</Text> :
103+
<Text type={"secondary"}>暂无</Text>
104+
)
105+
},
106+
width: "15%",
88107
},
89-
width: "10%",
90-
},
91-
]}
92-
/>
93-
</ProCard>
94-
);
95-
})}
96-
<Text type={"secondary"} style={{marginTop: 6}}>
97-
You can view the update records of model information, submit feedback or suggestions in
98-
our <Typography.Link
99-
href={"https://github.com/OpenAI-Next/ai-model-hub"}>GitHub Repository</Typography.Link>.
100-
</Text>
101-
</>
102-
</Row>
108+
]}
109+
scroll={{x: 950}}
110+
/>
111+
</ProCard>
112+
);
113+
})}
114+
<Text type={"secondary"} style={{marginTop: 6}}>
115+
You can view the update records of model information, submit feedback or suggestions in
116+
our <Typography.Link
117+
href={"https://github.com/OpenAI-Next/ai-model-hub"}>GitHub Repository</Typography.Link>.
118+
</Text>
119+
</>
120+
</Row>
121+
</WaterMark>
103122
</div>
104123
);
105124
}

‎next.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const nextConfig = {
2828

2929
return config;
3030
},
31-
transpilePackages: ['@lobehub/icons'],
31+
// transpilePackages: [],
3232
output: mode,
3333
reactStrictMode: false,
3434
images: {

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@
1717
"@ant-design/nextjs-registry": "^1.0.0",
1818
"@ant-design/pro-components": "^2.7.9",
1919
"@fortaine/fetch-event-source": "^3.0.6",
20-
"@lobehub/icons": "^1.22.1",
2120
"@types/file-saver": "^2.0.7",
22-
"ai-model-hub": "^1.1.3",
21+
"ai-model-hub": "^1.2.1",
2322
"ajv": "8.14.0",
2423
"ali-oss": "^6.20.0",
2524
"antd": "^5.17.4",

‎yarn.lock‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1609,11 +1609,6 @@
16091609
"@jridgewell/resolve-uri" "^3.1.0"
16101610
"@jridgewell/sourcemap-codec" "^1.4.14"
16111611

1612-
"@lobehub/icons@^1.22.1":
1613-
version "1.33.2"
1614-
resolved "https://registry.yarnpkg.com/@lobehub/icons/-/icons-1.33.2.tgz#bad5f0e2a30d4122b92b9b661f0db8062bdc0951"
1615-
integrity sha512-+zjI3ysaHoxZLtRW2FJtS9SYv0/hIBAllnZDuFc+PWGYOTV6E7SUFVMzjkN3XesadAXgvggLkgTM9eeZAiEPIw==
1616-
16171612
"@next/[email protected]":
16181613
version "14.2.9"
16191614
resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.9.tgz#f7fed48efa51b069cfc611082ad0101756df4c6a"
@@ -2318,10 +2313,10 @@ agentkeepalive@^3.4.1:
23182313
dependencies:
23192314
humanize-ms "^1.2.1"
23202315

2321-
ai-model-hub@^1.1.3:
2322-
version "1.1.3"
2323-
resolved "https://registry.yarnpkg.com/ai-model-hub/-/ai-model-hub-1.1.3.tgz#80375e9da32899c5f0d50a768df7e7f32685951a"
2324-
integrity sha512-M40FE191n8hOpgysXbh2o9N0AexXQnEiS5P6+k5TJXGRPx4HfQNkzKhPFNpz1hI2kpPFSrH5Ciq+BzsxvelBrw==
2316+
ai-model-hub@^1.2.1:
2317+
version "1.2.1"
2318+
resolved "https://registry.yarnpkg.com/ai-model-hub/-/ai-model-hub-1.2.1.tgz#767fb4af124dc6435768978bcbad1d73d6af137a"
2319+
integrity sha512-pc5bvFdfJcr63opAhGxB4zDm8pMtPANojcsdtteLxM2IVPcDDO8yEXREuJXnJHdRnP/spkC7RV1wt/5lNS/I9w==
23252320

23262321
ajv-keywords@^3.5.2:
23272322
version "3.5.2"

0 commit comments

Comments
 (0)