Skip to content

A
ai-box
Commit dea7e381 authored by fisherdaddy's avatar fisherdaddy
Browse files
Options

feature: Add model performance ranking charts with multi-tab interface

parent 5d716c73
Show whitespace changes
Inline Side-by-side
Showing with 848 additions and 22 deletions
public/assets/icon/grok.svg 0 → 100644
View file @ dea7e381
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Grok</title><path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path></svg>
\ No newline at end of file
public/assets/icon/meta.svg 0 → 100644
View file @ dea7e381
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Meta</title><defs><linearGradient id="lobe-icons-meta-fill-0" x1="75.897%" x2="26.312%" y1="89.199%" y2="12.194%"><stop offset=".06%" stop-color="#0867DF"></stop><stop offset="45.39%" stop-color="#0668E1"></stop><stop offset="85.91%" stop-color="#0064E0"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-1" x1="21.67%" x2="97.068%" y1="75.874%" y2="23.985%"><stop offset="13.23%" stop-color="#0064DF"></stop><stop offset="99.88%" stop-color="#0064E0"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-2" x1="38.263%" x2="60.895%" y1="89.127%" y2="16.131%"><stop offset="1.47%" stop-color="#0072EC"></stop><stop offset="68.81%" stop-color="#0064DF"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-3" x1="47.032%" x2="52.15%" y1="90.19%" y2="15.745%"><stop offset="7.31%" stop-color="#007CF6"></stop><stop offset="99.43%" stop-color="#0072EC"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-4" x1="52.155%" x2="47.591%" y1="58.301%" y2="37.004%"><stop offset="7.31%" stop-color="#007FF9"></stop><stop offset="100%" stop-color="#007CF6"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-5" x1="37.689%" x2="61.961%" y1="12.502%" y2="63.624%"><stop offset="7.31%" stop-color="#007FF9"></stop><stop offset="100%" stop-color="#0082FB"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-6" x1="34.808%" x2="62.313%" y1="68.859%" y2="23.174%"><stop offset="27.99%" stop-color="#007FF8"></stop><stop offset="91.41%" stop-color="#0082FB"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-7" x1="43.762%" x2="57.602%" y1="6.235%" y2="98.514%"><stop offset="0%" stop-color="#0082FB"></stop><stop offset="99.95%" stop-color="#0081FA"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-8" x1="60.055%" x2="39.88%" y1="4.661%" y2="69.077%"><stop offset="6.19%" stop-color="#0081FA"></stop><stop offset="100%" stop-color="#0080F9"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-9" x1="30.282%" x2="61.081%" y1="59.32%" y2="33.244%"><stop offset="0%" stop-color="#027AF3"></stop><stop offset="100%" stop-color="#0080F9"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-10" x1="20.433%" x2="82.112%" y1="50.001%" y2="50.001%"><stop offset="0%" stop-color="#0377EF"></stop><stop offset="99.94%" stop-color="#0279F1"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-11" x1="40.303%" x2="72.394%" y1="35.298%" y2="57.811%"><stop offset=".19%" stop-color="#0471E9"></stop><stop offset="100%" stop-color="#0377EF"></stop></linearGradient><linearGradient id="lobe-icons-meta-fill-12" x1="32.254%" x2="68.003%" y1="19.719%" y2="84.908%"><stop offset="27.65%" stop-color="#0867DF"></stop><stop offset="100%" stop-color="#0471E9"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero"><path d="M6.897 4h-.024l-.031 2.615h.022c1.715 0 3.046 1.357 5.94 6.246l.175.297.012.02 1.62-2.438-.012-.019a48.763 48.763 0 00-1.098-1.716 28.01 28.01 0 00-1.175-1.629C10.413 4.932 8.812 4 6.896 4z" fill="url(#lobe-icons-meta-fill-0)"></path><path d="M6.873 4C4.95 4.01 3.247 5.258 2.02 7.17a4.352 4.352 0 00-.01.017l2.254 1.231.011-.017c.718-1.083 1.61-1.774 2.568-1.785h.021L6.896 4h-.023z" fill="url(#lobe-icons-meta-fill-1)"></path><path d="M2.019 7.17l-.011.017C1.2 8.447.598 9.995.274 11.664l-.005.022 2.534.6.004-.022c.27-1.467.786-2.828 1.456-3.845l.011-.017L2.02 7.17z" fill="url(#lobe-icons-meta-fill-2)"></path><path d="M2.807 12.264l-2.533-.6-.005.022c-.177.918-.267 1.851-.269 2.786v.023l2.598.233v-.023a12.591 12.591 0 01.21-2.44z" fill="url(#lobe-icons-meta-fill-3)"></path><path d="M2.677 15.537a5.462 5.462 0 01-.079-.813v-.022L0 14.468v.024a8.89 8.89 0 00.146 1.652l2.535-.585a4.106 4.106 0 01-.004-.022z" fill="url(#lobe-icons-meta-fill-4)"></path><path d="M3.27 16.89c-.284-.31-.484-.756-.589-1.328l-.004-.021-2.535.585.004.021c.192 1.01.568 1.85 1.106 2.487l.014.017 2.018-1.745a2.106 2.106 0 01-.015-.016z" fill="url(#lobe-icons-meta-fill-5)"></path><path d="M10.78 9.654c-1.528 2.35-2.454 3.825-2.454 3.825-2.035 3.2-2.739 3.917-3.871 3.917a1.545 1.545 0 01-1.186-.508l-2.017 1.744.014.017C2.01 19.518 3.058 20 4.356 20c1.963 0 3.374-.928 5.884-5.33l1.766-3.13a41.283 41.283 0 00-1.227-1.886z" fill="#0082FB"></path><path d="M13.502 5.946l-.016.016c-.4.43-.786.908-1.16 1.416.378.483.768 1.024 1.175 1.63.48-.743.928-1.345 1.367-1.807l.016-.016-1.382-1.24z" fill="url(#lobe-icons-meta-fill-6)"></path><path d="M20.918 5.713C19.853 4.633 18.583 4 17.225 4c-1.432 0-2.637.787-3.723 1.944l-.016.016 1.382 1.24.016-.017c.715-.747 1.408-1.12 2.176-1.12.826 0 1.6.39 2.27 1.075l.015.016 1.589-1.425-.016-.016z" fill="#0082FB"></path><path d="M23.998 14.125c-.06-3.467-1.27-6.566-3.064-8.396l-.016-.016-1.588 1.424.015.016c1.35 1.392 2.277 3.98 2.361 6.971v.023h2.292v-.022z" fill="url(#lobe-icons-meta-fill-7)"></path><path d="M23.998 14.15v-.023h-2.292v.022c.004.14.006.282.006.424 0 .815-.121 1.474-.368 1.95l-.011.022 1.708 1.782.013-.02c.62-.96.946-2.293.946-3.91 0-.083 0-.165-.002-.247z" fill="url(#lobe-icons-meta-fill-8)"></path><path d="M21.344 16.52l-.011.02c-.214.402-.519.67-.917.787l.778 2.462a3.493 3.493 0 00.438-.182 3.558 3.558 0 001.366-1.218l.044-.065.012-.02-1.71-1.784z" fill="url(#lobe-icons-meta-fill-9)"></path><path d="M19.92 17.393c-.262 0-.492-.039-.718-.14l-.798 2.522c.449.153.927.222 1.46.222.492 0 .943-.073 1.352-.215l-.78-2.462c-.167.05-.341.075-.517.073z" fill="url(#lobe-icons-meta-fill-10)"></path><path d="M18.323 16.534l-.014-.017-1.836 1.914.016.017c.637.682 1.246 1.105 1.937 1.337l.797-2.52c-.291-.125-.573-.353-.9-.731z" fill="url(#lobe-icons-meta-fill-11)"></path><path d="M18.309 16.515c-.55-.642-1.232-1.712-2.303-3.44l-1.396-2.336-.011-.02-1.62 2.438.012.02.989 1.668c.959 1.61 1.74 2.774 2.493 3.585l.016.016 1.834-1.914a2.353 2.353 0 01-.014-.017z" fill="url(#lobe-icons-meta-fill-12)"></path></g></svg>
\ No newline at end of file
public/assets/icon/nexusflow.svg 0 → 100644
View file @ dea7e381
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="1em"
width="1em"
style="flex:none;line-height:1"
viewBox="0 0 24 24">
<title>Nexusflow</title>
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_3" data-name="Rectangle 3" width="180" height="100" fill="none"/>
</clipPath>
</defs>
<g id="Group_174" data-name="Group 174" transform="translate(2 4) scale(0.45)">
<path id="Path_1" data-name="Path 1" d="M0,0V37.817H18.9L13.232,32.53H5.356V5.408H9.61l17.806,17.1V15.025L11.733,0Z" transform="translate(0 0)" fill="#62cbf2"/>
<path id="Path_2" data-name="Path 2" d="M49.109,0,54.78,5.287h7.877V32.409H58.4L40.6,15.307v7.485L56.279,37.817H68.012V0Z" transform="translate(-29.351 0)" fill="#307fe2"/>
<path id="Path_3" data-name="Path 3" d="M168.2,61.824h3.456v19.83h-2.912L157.834,67.546V81.654h-3.456V61.824H157.6l10.6,13.711Z" transform="translate(-111.615 -43.994)" fill="#fcfcfc"/>
<g id="Group_2" data-name="Group 2" transform="translate(0 0)">
<g id="Group_1" data-name="Group 1" clip-path="url(#clip-path)">
<path id="Path_4" data-name="Path 4" d="M229.934,90.339a4.2,4.2,0,0,0,2.833,1,4.937,4.937,0,0,0,2.21-.462,7.181,7.181,0,0,0,1.841-1.357l2.011,1.818a8.3,8.3,0,0,1-2.563,2.078,7.569,7.569,0,0,1-3.555.78,7.849,7.849,0,0,1-3.017-.577A7.328,7.328,0,0,1,227.257,92a7.517,7.517,0,0,1-1.629-2.5,8.516,8.516,0,0,1-.595-3.247,8.763,8.763,0,0,1,.538-3.088,7.785,7.785,0,0,1,1.515-2.526,7.328,7.328,0,0,1,2.309-1.717,6.759,6.759,0,0,1,2.946-.635,7,7,0,0,1,3.13.664,6.468,6.468,0,0,1,2.238,1.79,7.82,7.82,0,0,1,1.346,2.627,10.841,10.841,0,0,1,.453,3.146q0,.231-.014.462t-.042.491H228.461a4.624,4.624,0,0,0,1.473,2.872m6.176-5.181a6.082,6.082,0,0,0-.368-1.573,4.056,4.056,0,0,0-.765-1.27,3.65,3.65,0,0,0-1.147-.852,3.484,3.484,0,0,0-1.516-.318,3.424,3.424,0,0,0-2.62,1.111,5.062,5.062,0,0,0-1.261,2.9Z" transform="translate(-162.698 -56.193)" fill="#fcfcfc"/>
<path id="Path_5" data-name="Path 5" d="M293.533,94.653h-3.739l-3.682-5.34-3.655,5.34H278.8l5.5-7.735-5.3-7.5h3.74l3.456,5.022,3.456-5.022h3.654l-5.3,7.418Z" transform="translate(-201.574 -57)" fill="#fcfcfc"/>
<path id="Path_6" data-name="Path 6" d="M349.077,79.414h3.456v15.24h-3.456V92.263a7.418,7.418,0,0,1-1.836,1.908,4.686,4.686,0,0,1-2.825.8,4.929,4.929,0,0,1-3.926-1.588,6.271,6.271,0,0,1-1.384-4.272v-9.7h3.456v8.639a4.1,4.1,0,0,0,.828,2.75,2.924,2.924,0,0,0,2.345.965,3.151,3.151,0,0,0,2.415-.993A3.917,3.917,0,0,0,349.077,88Z" transform="translate(-245.172 -57)" fill="#fcfcfc"/>
<path id="Path_7" data-name="Path 7" d="M405.463,91.6a4.111,4.111,0,0,1-1.176,1.487,5.239,5.239,0,0,1-1.771.895,7.623,7.623,0,0,1-2.181.3,9.907,9.907,0,0,1-3.272-.577A10.425,10.425,0,0,1,393.99,92l1.53-2.367a9.9,9.9,0,0,0,2.479,1.4,6.841,6.841,0,0,0,2.422.476,2.85,2.85,0,0,0,1.714-.447,1.411,1.411,0,0,0,.609-1.2v-.058a1.125,1.125,0,0,0-.269-.75,2.43,2.43,0,0,0-.737-.563,6.364,6.364,0,0,0-1.076-.433l-1.26-.39q-.822-.26-1.657-.577a5.949,5.949,0,0,1-1.5-.822,4.131,4.131,0,0,1-1.091-1.241,3.618,3.618,0,0,1-.425-1.833V83.14a4.456,4.456,0,0,1,.411-1.934,4.309,4.309,0,0,1,1.133-1.472,5.038,5.038,0,0,1,1.7-.923,6.705,6.705,0,0,1,2.082-.318,9.376,9.376,0,0,1,2.861.462,10.191,10.191,0,0,1,2.635,1.27l-1.36,2.482a11.369,11.369,0,0,0-2.182-1.054,6.169,6.169,0,0,0-2.039-.389,2.449,2.449,0,0,0-1.544.433,1.338,1.338,0,0,0-.553,1.1v.058a1,1,0,0,0,.284.707,2.784,2.784,0,0,0,.75.548,8.314,8.314,0,0,0,1.077.462q.609.217,1.261.419.821.26,1.643.606a6.879,6.879,0,0,1,1.487.852,4.212,4.212,0,0,1,1.091,1.227,3.418,3.418,0,0,1,.425,1.761v.058a4.868,4.868,0,0,1-.425,2.107" transform="translate(-284.854 -56.339)" fill="#fcfcfc"/>
<path id="Path_8" data-name="Path 8" d="M451.593,67.261v2.886h-3.909V81.821h-3.456V70.148h-1.9V67.232h1.9v-1.1a5.2,5.2,0,0,1,1.2-3.767,4.567,4.567,0,0,1,3.418-1.227,9.094,9.094,0,0,1,1.558.115,10.436,10.436,0,0,1,1.218.289V64.49a8.845,8.845,0,0,0-.977-.274,4.916,4.916,0,0,0-1.034-.1q-1.983,0-1.983,2.309v.837Z" transform="translate(-319.803 -43.885)" fill="#fcfcfc"/>
<rect id="Rectangle_2" data-name="Rectangle 2" width="3.456" height="20.276" transform="translate(134.555 17.378)" fill="#fcfcfc"/>
<path id="Path_9" data-name="Path 9" d="M522.47,89.315A8.021,8.021,0,0,1,520.8,91.84a7.88,7.88,0,0,1-2.536,1.717,8.366,8.366,0,0,1-6.359.014,7.72,7.72,0,0,1-2.522-1.7,7.876,7.876,0,0,1-2.252-5.585,7.908,7.908,0,0,1,7.988-8,8.063,8.063,0,0,1,3.187.62,7.732,7.732,0,0,1,2.521,1.7,7.826,7.826,0,0,1,1.657,2.525,8.025,8.025,0,0,1,.6,3.089,7.859,7.859,0,0,1-.609,3.088m-3.185-4.935a4.981,4.981,0,0,0-.943-1.573,4.428,4.428,0,0,0-1.436-1.068,4.556,4.556,0,0,0-3.688,0,4.356,4.356,0,0,0-1.422,1.053,4.577,4.577,0,0,0-.9,1.544,5.66,5.66,0,0,0-.31,1.89,5.46,5.46,0,0,0,.338,1.92,4.762,4.762,0,0,0,.943,1.573,4.514,4.514,0,0,0,1.436,1.054,4.22,4.22,0,0,0,1.816.39,4.292,4.292,0,0,0,3.294-1.443,4.587,4.587,0,0,0,.9-1.544,5.663,5.663,0,0,0,.309-1.89,5.356,5.356,0,0,0-.338-1.905" transform="translate(-366.654 -56.193)" fill="#fcfcfc"/>
<path id="Path_10" data-name="Path 10" d="M584.4,89.715l3.059-10.448h3.428l-4.9,15.355h-3.059L579.581,84.2l-3.371,10.42H573.15l-4.844-15.355h3.513l3,10.448,3.315-10.506h2.917Z" transform="translate(-410.884 -56.853)" fill="#fcfcfc"/>
</g>
</g>
</g>
</svg>
public/assets/icon/stepfun.svg 0 → 100644
View file @ dea7e381
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Stepfun</title><path d="M22.012 0h1.032v.927H24v.968h-.956V3.78h-1.032V1.896h-1.878v-.97h1.878V0zM2.6 12.371V1.87h.969v10.502h-.97zm10.423.66h10.95v.918h-6.208v9.579h-4.742V13.03zM5.629 3.333v12.356H0v4.51h10.386V8L20.859 8l-.003-4.668-15.227.001z" fill="url(#lobe-icons-stepfun-fill)" fill-rule="evenodd"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-stepfun-fill" x1="1.646" x2="18.342" y1="1.916" y2="22.091"><stop stop-color="#01A9FF"></stop><stop offset="1" stop-color="#0160FF"></stop></linearGradient></defs></svg>
\ No newline at end of file
src/components/Footer.jsx
View file @ dea7e381
...@@ -85,6 +85,7 @@ const Footer = () => { ...@@ -85,6 +85,7 @@ const Footer = () => {
{ name: t('tools.openAITimeline.title'), path: '/openai-timeline', description: t('openAITimeline.description') }, { name: t('tools.openAITimeline.title'), path: '/openai-timeline', description: t('openAITimeline.description') },
{ name: t('tools.anthropicTimeline.title'), path: '/anthropic-timeline', description: t('anthropicTimeline.description') }, { name: t('tools.anthropicTimeline.title'), path: '/anthropic-timeline', description: t('anthropicTimeline.description') },
{ name: t('tools.modelPrice.title'), path: '/llm-model-price', description: t('modelPrice.description') }, { name: t('tools.modelPrice.title'), path: '/llm-model-price', description: t('modelPrice.description') },
{ name: 'Artifical Analysis', url: 'https://artificialanalysis.ai/', description: 'Artifical Analysis' },
], ],
relatedLinks: [ relatedLinks: [
{ name: 'OpenAI Research', url: 'https://openai.com/research/', description: 'Leading AI research company' }, { name: 'OpenAI Research', url: 'https://openai.com/research/', description: 'Leading AI research company' },
......
src/components/PricingChart.jsx
View file @ dea7e381
...@@ -3,7 +3,9 @@ import React, { useState, useEffect, useRef } from 'react'; ...@@ -3,7 +3,9 @@ import React, { useState, useEffect, useRef } from 'react';
import { useScrollToTop } from '../hooks/useScrollToTop'; import { useScrollToTop } from '../hooks/useScrollToTop';
import '../styles/PricingChart.css'; import '../styles/PricingChart.css';
const ChartLegend = ({ onLegendClick, highlightedBarTypes }) => { const ChartLegend = ({ onLegendClick, highlightedBarTypes, showPricing = true }) => {
if (!showPricing) return null;
return ( return (
<div className="legend"> <div className="legend">
<div <div
...@@ -26,27 +28,32 @@ const ChartLegend = ({ onLegendClick, highlightedBarTypes }) => { ...@@ -26,27 +28,32 @@ const ChartLegend = ({ onLegendClick, highlightedBarTypes }) => {
); );
}; };
const ChartBar = ({ price, type, maxPrice, highlighted }) => { const ChartBar = ({ price, type, maxPrice, highlighted, score }) => {
const getBarHeight = () => { const getBarHeight = () => {
if (score !== undefined) {
return (score / maxPrice) * 200;
}
return (price / maxPrice) * 200; return (price / maxPrice) * 200;
}; };
return ( return (
<div <div
className={`bar ${type}-bar`} className={`bar ${score !== undefined ? 'score-bar' : `${type}-bar`}`}
style={{ style={{
height: `${getBarHeight()}px`, height: `${getBarHeight()}px`,
opacity: highlighted ? 1 : 0.3, opacity: highlighted ? 1 : 0.3,
}} }}
> >
<span className="price-label">{price}</span> <span className="price-label">{score !== undefined ? score : price}</span>
</div> </div>
); );
}; };
const ProviderColumn = ({ provider, maxPrice, highlightedBarTypes }) => ( const ProviderColumn = ({ provider, maxPrice, highlightedBarTypes, showPricing = true }) => (
<div className="chart-column"> <div className="chart-column">
<div className="bars-container"> <div className="bars-container">
{showPricing ? (
<>
<ChartBar <ChartBar
price={provider.inputPrice} price={provider.inputPrice}
type="input" type="input"
...@@ -59,6 +66,14 @@ const ProviderColumn = ({ provider, maxPrice, highlightedBarTypes }) => ( ...@@ -59,6 +66,14 @@ const ProviderColumn = ({ provider, maxPrice, highlightedBarTypes }) => (
maxPrice={maxPrice} maxPrice={maxPrice}
highlighted={highlightedBarTypes.output} highlighted={highlightedBarTypes.output}
/> />
</>
) : (
<ChartBar
score={provider.score}
maxPrice={maxPrice}
highlighted={true}
/>
)}
</div> </div>
<div className="provider-info"> <div className="provider-info">
<img <img
...@@ -99,7 +114,7 @@ const GridLines = () => ( ...@@ -99,7 +114,7 @@ const GridLines = () => (
</div> </div>
); );
const PricingChart = ({ data }) => { const PricingChart = ({ data, showPricing = true }) => {
useScrollToTop(); useScrollToTop();
const [highlightedBarTypes, setHighlightedBarTypes] = useState({ const [highlightedBarTypes, setHighlightedBarTypes] = useState({
input: true, input: true,
...@@ -162,6 +177,9 @@ const PricingChart = ({ data }) => { ...@@ -162,6 +177,9 @@ const PricingChart = ({ data }) => {
}; };
const getMaxPrice = () => { const getMaxPrice = () => {
if (!showPricing) {
return Math.max(...data.providers.map(provider => provider.score));
}
const prices = data.providers.flatMap((provider) => [ const prices = data.providers.flatMap((provider) => [
provider.inputPrice, provider.inputPrice,
provider.outputPrice, provider.outputPrice,
...@@ -176,7 +194,11 @@ const PricingChart = ({ data }) => { ...@@ -176,7 +194,11 @@ const PricingChart = ({ data }) => {
<h1 className="chart-title">{data.title}</h1> <h1 className="chart-title">{data.title}</h1>
<h2 className="chart-subtitle">{data.subtitle}</h2> <h2 className="chart-subtitle">{data.subtitle}</h2>
<ChartLegend onLegendClick={handleLegendClick} highlightedBarTypes={highlightedBarTypes} /> <ChartLegend
onLegendClick={handleLegendClick}
highlightedBarTypes={highlightedBarTypes}
showPricing={showPricing}
/>
<div className={`chart-area ${hasScroll ? 'has-scroll' : ''}`} ref={chartAreaRef}> <div className={`chart-area ${hasScroll ? 'has-scroll' : ''}`} ref={chartAreaRef}>
<YAxis maxPrice={maxPrice} /> <YAxis maxPrice={maxPrice} />
...@@ -188,6 +210,7 @@ const PricingChart = ({ data }) => { ...@@ -188,6 +210,7 @@ const PricingChart = ({ data }) => {
provider={provider} provider={provider}
maxPrice={maxPrice} maxPrice={maxPrice}
highlightedBarTypes={highlightedBarTypes} highlightedBarTypes={highlightedBarTypes}
showPricing={showPricing}
/> />
))} ))}
</div> </div>
......
src/components/PricingCharts.jsx
View file @ dea7e381
import React from 'react'; import React, { useState } from 'react';
import { useScrollToTop } from '../hooks/useScrollToTop'; import { useScrollToTop } from '../hooks/useScrollToTop';
import PricingChart from '../components/PricingChart'; import PricingChart from '../components/PricingChart';
import OpenaiPricing from '../data/openai-pricing.json'; import OpenaiPricing from '../data/openai-pricing.json';
import LLMPricing from '../data/llm-pricing.json'; import LLMPricing from '../data/llm-pricing.json';
import VisionPricing from '../data/vision-model-pricing.json'; import VisionPricing from '../data/vision-model-pricing.json';
import ModelRanking from '../data/model-ranking.json';
import ModelRankingMath from '../data/model-ranking-math.json';
import ModelRankingCode from '../data/model-ranking-code.json';
import ModelRankingWeb from '../data/model-ranking-web.json';
import ModelRankingWriting from '../data/model-ranking-writing.json';
import SEO from '../components/SEO'; import SEO from '../components/SEO';
import { usePageLoading } from '../hooks/usePageLoading'; import { usePageLoading } from '../hooks/usePageLoading';
import LoadingOverlay from './LoadingOverlay'; import LoadingOverlay from './LoadingOverlay';
const TabRankingCharts = () => {
const [activeTab, setActiveTab] = useState('general');
const tabs = [
{ id: 'general', name: '综合能力', data: ModelRanking },
{ id: 'math', name: '数学能力', data: ModelRankingMath },
{ id: 'code', name: '代码能力', data: ModelRankingCode },
{ id: 'web', name: 'Web 开发能力', data: ModelRankingWeb },
{ id: 'writing', name: '写作能力', data: ModelRankingWriting },
];
return (
<div className="tab-ranking-charts">
<div className="tab-buttons">
{tabs.map((tab) => (
<button
key={tab.id}
className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
onClick={() => setActiveTab(tab.id)}
>
{tab.name}
</button>
))}
</div>
<div className="tab-content">
{tabs.map((tab) => (
<div
key={tab.id}
className={`tab-pane ${activeTab === tab.id ? 'active' : ''}`}
style={{ display: activeTab === tab.id ? 'block' : 'none' }}
>
<PricingChart data={tab.data} showPricing={false} />
</div>
))}
</div>
</div>
);
};
const PricingCharts = () => { const PricingCharts = () => {
useScrollToTop(); useScrollToTop();
const isLoading = usePageLoading(); const isLoading = usePageLoading();
...@@ -16,8 +60,8 @@ const PricingCharts = () => { ...@@ -16,8 +60,8 @@ const PricingCharts = () => {
return ( return (
<> <>
<SEO <SEO
title="AI Model Pricing Comparison" title="AI Model Pricing & Ranking Comparison"
description="Compare prices of different AI models" description="Compare prices and performance rankings of different AI models"
/> />
{isLoading && <LoadingOverlay />} {isLoading && <LoadingOverlay />}
<div className="pricing-charts-container"> <div className="pricing-charts-container">
...@@ -27,6 +71,7 @@ const PricingCharts = () => { ...@@ -27,6 +71,7 @@ const PricingCharts = () => {
<PricingChart data={OpenaiPricing} /> <PricingChart data={OpenaiPricing} />
<PricingChart data={LLMPricing} /> <PricingChart data={LLMPricing} />
<PricingChart data={VisionPricing} /> <PricingChart data={VisionPricing} />
<TabRankingCharts />
</div> </div>
</> </>
); );
......
src/data/model-ranking-code.json 0 → 100644
View file @ dea7e381
{
"title": "国内外各模型能力对比 - 代码",
"subtitle": "数据来源：lmarena.ai",
"providers": [
{
"name": "Gemini-2.0-Pro-Exp-02-05",
"score": 1374,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "ChatGPT-4o-latest（2025-01-29）",
"score": 1366,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-2.0-Flash-Thinking-Exp-01-21",
"score": 1365,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "o1-2024-12-17",
"score": 1363,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "DeepSeek-R1",
"score": 1363,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "o3-mini",
"score": 1359,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o1-preview",
"score": 1355,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o1-mini",
"score": 1353,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-2.0-Flash-001",
"score": 1349,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Qwen2.5-Max",
"score": 1337,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Claude-3.5-Sonnet-(20241022)",
"score": 1325,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "Gemini-2.0-Flash-Lite-Preview-02-05",
"score": 1318,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "DeepSeek-V3",
"score": 1317,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Qwen2.5-plus-1127",
"score": 1303,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Deepseek-v2.5-1210",
"score": 1297,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Yi-Lightning",
"score": 1302,
"logo": "/assets/icon/yi_small.jpg"
},
{
"name": "Athene-v2-Chat-72B",
"score": 1300,
"logo": "/assets/icon/nexusflow.svg"
},
{
"name": "Step-2-16K-Exp",
"score": 1295,
"logo": "/assets/icon/stepfun.svg"
},
{
"name": "GLM-4-Plus-0111",
"score": 1288,
"logo": "/assets/icon/glm_small.svg"
},
{
"name": "Claude-3.5-Sonnet-(20240620)",
"score": 1295,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "GPT-4o-2024-05-13",
"score": 1293,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-1.5-Pro-002",
"score": 1289,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Deepseek-v2.5",
"score": 1288,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "GPT-4o-mini-2024-07-18",
"score": 1284,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "GLM-4-Plus",
"score": 1283,
"logo": "/assets/icon/glm_small.svg"
},
{
"name": "Qwen2.5-72B-Instruct",
"score": 1283,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Qwen.Max-0912",
"score": 1280,
"logo": "/assets/icon/ali_small.svg"
}
]
}
\ No newline at end of file
src/data/model-ranking-math.json 0 → 100644
View file @ dea7e381
{
"title": "国内外各模型能力对比 - 数学",
"subtitle": "数据来源：lmarena.ai",
"providers": [
{
"name": "o1-2024-12-17",
"score": 1362,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o3-mini",
"score": 1360,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "DeepSeek-R1",
"score": 1351,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Gemini-2.0-Flash-Thinking-Exp-01-21",
"score": 1348,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "o1-preview",
"score": 1340,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-2.0-Flash-001",
"score": 1334,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini-2.0-Pro-Exp-02-05",
"score": 1332,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Qwen2.5-Max",
"score": 1326,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "o1-mini",
"score": 1326,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "ChatGPT-4o-latest（2025-01-29）",
"score": 1306,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Step-2-16K-Exp",
"score": 1270,
"logo": "/assets/icon/stepfun.svg"
},
{
"name": "Gemini-1.5-Pro-002",
"score": 1278,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Claude-3.5-Sonnet-(20241022)",
"score": 1278,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "DeepSeek-V3",
"score": 1274,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Claude-3.5-Sonnet-(20240620)",
"score": 1271,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "Yi-Lightning",
"score": 1269,
"logo": "/assets/icon/yi_small.jpg"
},
{
"name": "Athene-v2-Chat-72B",
"score": 1266,
"logo": "/assets/icon/nexusflow.svg"
},
{
"name": "Qwen2.5-plus-1127",
"score": 1266,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Gemini-2.0-Flash-Lite-Preview-02-05",
"score": 1263,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Deepseek-v2.5-1210",
"score": 1254,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "GLM-4-Plus-0111",
"score": 1249,
"logo": "/assets/icon/glm_small.svg"
},
{
"name": "GPT-4o-2024-05-13",
"score": 1254,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "GPT-4o-2024-08-06",
"score": 1252,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Qwen2.5-72B-Instruct",
"score": 1252,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Grok-2-08-13",
"score": 1252,
"logo": "/assets/icon/grok.svg"
},
{
"name": "Meta-Llama-3.1-405B-Instruct-bf16",
"score": 1250,
"logo": "/assets/icon/meta.svg"
}
]
}
\ No newline at end of file
src/data/model-ranking-web.json 0 → 100644
View file @ dea7e381
{
"title": "国内外各模型能力对比 - Web开发",
"subtitle": "数据来源：lmarena.ai",
"providers": [
{
"name": "Claude-3.5-Sonnet-(20241022)",
"score": 1252.68,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "DeepSeek-R1",
"score": 1210.90,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "o3-mini-high-(20250131)",
"score": 1157.14,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Claude-3.5-Haiku-(20241022)",
"score": 1138.22,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "Gemini-2.0-Pro-Exp-02-05",
"score": 1111.42,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "o3-mini-(20250131)",
"score": 1106.80,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o1-(20241217)",
"score": 1054.47,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o1-mini-(20240912)",
"score": 1051.66,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-2.0-Flash-Thinking-01-21",
"score": 1038.65,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini-2.0-Flash-Thinking-1219",
"score": 1026.64,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini-Exp-1206",
"score": 1025.29,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Qwen2.5-Max",
"score": 987.17,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Gemini-2.0-Flash-Exp",
"score": 987.10,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "DeepSeek-V3",
"score": 967.68,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "GPT-4o-2024-11-20",
"score": 964.00,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Qwen2.5-Coder-32B-Instruct",
"score": 904.64,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Gemini-1.5-Pro-002",
"score": 895.41,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Llama-3.1-405B-Instruct",
"score": 814.01,
"logo": "/assets/icon/meta.svg"
}
]
}
\ No newline at end of file
src/data/model-ranking-writing.json 0 → 100644
View file @ dea7e381
{
"title": "国内外各模型能力对比 - 写作",
"subtitle": "数据来源：lmarena.ai",
"providers": [
{
"name": "ChatGPT-4o-latest (2025-01-29)",
"score": 1422,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-2.0-Flash-Thinking-Exp-01-21",
"score": 1403,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini-2.0-Pro-Exp-02-05",
"score": 1389,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini-2.0-Flash-001",
"score": 1362,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "DeepSeek-R1",
"score": 1362,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "o1-2024-12-17",
"score": 1347,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-2.0-Flash-Lite-Preview-02-05",
"score": 1329,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Step-2-16K-Exp",
"score": 1326,
"logo": "/assets/icon/stepfun.svg"
},
{
"name": "DeepSeek-V3",
"score": 1332,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Qwen2.5-Max",
"score": 1327,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Gemini-1.5-Pro-002",
"score": 1332,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "o1-preview",
"score": 1320,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "GLM-4-Plus-0111",
"score": 1300,
"logo": "/assets/icon/glm_small.svg"
},
{
"name": "Deepseek-v2.5-1210",
"score": 1288,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "GPT-4-2024-05-13",
"score": 1290,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Claude 3.5 Sonnet (20241022)",
"score": 1289,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "Gemini-1.5-Flash-002",
"score": 1287,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Grok-2-08-13",
"score": 1284,
"logo": "/assets/icon/grok.svg"
},
{
"name": "Yi-Lightning",
"score": 1282,
"logo": "/assets/icon/yi_small.jpg"
},
{
"name": "Gemini-1.5-Pro-001",
"score": 1276,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini Advanced App (2024-05-14)",
"score": 1276,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Llama-3.1-Nemotron-70B-Instruct",
"score": 1270,
"logo": "/assets/icon/meta.svg"
},
{
"name": "GPT-4o-2024-08-06",
"score": 1275,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "GPT-4o-mini-2024-07-18",
"score": 1269,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o3-mini1",
"score": 1265,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Qwen2.5-plus-1127",
"score": 1263,
"logo": "/assets/icon/ali_small.svg"
}
]
}
\ No newline at end of file
src/data/model-ranking.json 0 → 100644
View file @ dea7e381
{
"title": "国内外各模型能力对比",
"subtitle": "数据来源：lmarena.ai",
"providers": [
{
"name": "Gemini-2.0-Flash-Thinking-Exp-01-21",
"score": 1384,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Gemini-2.0-Pro-Exp-02-05",
"score": 1379,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "ChatGPT-4o-latest（2025-01-29）",
"score": 1377,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "DeepSeek-R1",
"score": 1361,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Gemini-2.0-Flash-001",
"score": 1355,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "o1-2024-12-17",
"score": 1352,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "o1-preview",
"score": 1335,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Qwen2.5-Max",
"score": 1332,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "DeepSeek-V3",
"score": 1316,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Gemini-2.0-Flash-Lite-Preview-02-05",
"score": 1309,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "o3-mini",
"score": 1307,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "GLM-4-Plus-0111",
"score": 1304,
"logo": "/assets/icon/glm_small.svg"
},
{
"name": "Step-2-16K-Exp",
"score": 1304,
"logo": "/assets/icon/stepfun.svg"
},
{
"name": "o1-mini",
"score": 1304,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Gemini-1.5-Pro-002",
"score": 1302,
"logo": "/assets/icon/google_small.svg"
},
{
"name": "Grok-2-08-13",
"score": 1288,
"logo": "/assets/icon/grok.svg"
},
{
"name": "Yi-Lightning",
"score": 1287,
"logo": "/assets/icon/yi_small.jpg"
},
{
"name": "GPT-4-2024-05-13",
"score": 1285,
"logo": "/assets/icon/openai_small.svg"
},
{
"name": "Claude-3.5-Sonnet-(20241022)",
"score": 1283,
"logo": "/assets/icon/anthropic_small.svg"
},
{
"name": "Qwen2.5-plus-1127",
"score": 1282,
"logo": "/assets/icon/ali_small.svg"
},
{
"name": "Deepseek-v2.5-1210",
"score": 1279,
"logo": "/assets/icon/deepseek_small.jpg"
},
{
"name": "Athene-v2-Chat-72B",
"score": 1275,
"logo": "/assets/icon/nexusflow.svg"
},
{
"name": "GLM-4-Plus",
"score": 1274,
"logo": "/assets/icon/glm_small.svg"
}
]
}
\ No newline at end of file
src/locales/en/aiproducts.json
View file @ dea7e381
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
"title": "Gemini", "title": "Gemini",
"description": "AI dialogue tool by Google" "description": "AI dialogue tool by Google"
}, },
"deepseek": {
"title": "DeepSeek",
"description": "AI dialogue tool by DeepSeek"
},
"poe": { "poe": {
"title": "POE", "title": "POE",
"description": "Multi-model chat platform by Quora" "description": "Multi-model chat platform by Quora"
......
src/locales/ja/aiproducts.json
View file @ dea7e381
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
"title": "Gemini", "title": "Gemini",
"description": "GoogleのAI対話ツール" "description": "GoogleのAI対話ツール"
}, },
"deepseek": {
"title": "DeepSeek",
"description": "DeepSeekのAI対話ツール"
},
"poe": { "poe": {
"title": "POE", "title": "POE",
"description": "Quoraのマルチモデルチャットプラットフォーム" "description": "Quoraのマルチモデルチャットプラットフォーム"
......
src/locales/ko/aiproducts.json
View file @ dea7e381
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
"title": "Gemini", "title": "Gemini",
"description": "Google의 AI 대화 도구" "description": "Google의 AI 대화 도구"
}, },
"deepseek": {
"title": "DeepSeek",
"description": "DeepSeek의 AI 대화 도구"
},
"poe": { "poe": {
"title": "POE", "title": "POE",
"description": "Quora의 멀티 모델 채팅 플랫폼" "description": "Quora의 멀티 모델 채팅 플랫폼"
......
src/locales/zh/aiproducts.json
View file @ dea7e381
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
"title": "Gemini", "title": "Gemini",
"description": "Google旗下AI对话工具" "description": "Google旗下AI对话工具"
}, },
"deepseek": {
"title": "DeepSeek",
"description": "DeepSeek 旗下的 AI 对话助手"
},
"poe": { "poe": {
"title": "POE", "title": "POE",
"description": "Quora 旗下的多模型聊天平台" "description": "Quora 旗下的多模型聊天平台"
......
src/pages/AIProduct.jsx
View file @ dea7e381
...@@ -32,6 +32,13 @@ const tools = [ ...@@ -32,6 +32,13 @@ const tools = [
external: true, external: true,
category: 'Chatbots' category: 'Chatbots'
}, },
{
id: 'deepseek',
icon: '/assets/icon/deepseek_small.jpg',
path: 'https://chat.deepseek.com',
external: true,
category: 'Chatbots'
},
{ {
id: 'poe', id: 'poe',
icon: '/assets/icon/poe.png', icon: '/assets/icon/poe.png',
......
src/styles/PricingChart.css
View file @ dea7e381
...@@ -280,3 +280,75 @@ ...@@ -280,3 +280,75 @@
.chart-area::-webkit-scrollbar-thumb:hover { .chart-area::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
} }
.score-bar {
background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
width: 40px;
margin: 0 10px;
border-radius: 4px;
position: relative;
transition: opacity 0.3s ease;
}
.tab-ranking-charts {
margin: 2rem 0;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tab-buttons {
display: flex;
gap: 1px;
background: #f5f5f5;
padding: 0.5rem;
border-radius: 8px 8px 0 0;
border-bottom: 1px solid #eee;
}
.tab-button {
padding: 0.75rem 1.5rem;
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
color: #666;
transition: all 0.3s ease;
border-radius: 6px;
}
.tab-button:hover {
background: rgba(0, 0, 0, 0.05);
color: #333;
}
.tab-button.active {
background: #fff;
color: #1a73e8;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.tab-content {
padding: 1rem;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment