Skip to content

feat: add ai-gateway page #1896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LiteSun merged 3 commits into from
Apr 17, 2025
Merged

feat: add ai-gateway page #1896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80b83cd
feat: add ai page
LiteSun Apr 17, 2025
2d83a63
u
LiteSun Apr 17, 2025
d632c19
u
LiteSun Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blog/en/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ module.exports = {
backgroundColor: '#e8433e',
textColor: 'white',
content:
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="https://apisix.apache.org/blog/2025/04/08/introducing-apisix-ai-gateway/"> Learn More</a>',
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="/ai-gateway/"> Learn More</a>',
},
prism: {
theme: require('prism-react-renderer/themes/github'),
Expand Down
2 changes: 1 addition & 1 deletion blog/zh/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ module.exports = {
backgroundColor: '#e8433e',
textColor: 'white',
content:
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="https://apisix.apache.org/blog/2025/04/08/introducing-apisix-ai-gateway/"> Learn More</a>',
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="/ai-gateway/"> Learn More</a>',
},
prism: {
theme: require('prism-react-renderer/themes/github'),
Expand Down
2 changes: 1 addition & 1 deletion doc/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ module.exports = {
backgroundColor: '#e8433e',
textColor: 'white',
content:
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="https://apisix.apache.org/blog/2025/04/08/introducing-apisix-ai-gateway/"> Learn More</a>',
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="/ai-gateway/"> Learn More</a>',
},
prism: {
theme: require('prism-react-renderer/themes/github'),
Expand Down
2 changes: 1 addition & 1 deletion website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ module.exports = {
backgroundColor: '#e8433e',
textColor: 'white',
content:
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="https://apisix.apache.org/blog/2025/04/08/introducing-apisix-ai-gateway/"> Learn More</a>',
'\u{1F914} Introducing APISIX AI Gateway – Built for LLMs and AI workloads. <a target="_blank" rel="noopener noreferrer" href="/ai-gateway/"> Learn More</a>',
},
prism: {
theme: require('prism-react-renderer/themes/github'),
Expand Down
14 changes: 11 additions & 3 deletions website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@docusaurus/module-type-aliases": "^2.0.0-beta.6",
"@svgr/webpack": "^5.5.0",
"@tsconfig/docusaurus": "^1.0.4",
"@types/react": "^17.0.20",
"@types/react": "^18.0.20",
"@types/react-helmet": "^6.1.2",
"@types/react-lazy-load-image-component": "^1.5.2",
"@types/react-router-dom": "^5.1.8",
Expand All @@ -29,24 +29,31 @@
"typescript": "^4.4.2"
},
"dependencies": {
"@chakra-ui/icons": "2.0.17",
"@chakra-ui/pro-theme": "^0.0.64",
"@chakra-ui/react": "2.5.1",
"@docusaurus/core": "2.0.0-beta.6",
"@docusaurus/logger": "^2.0.0-rc.1",
"@docusaurus/preset-classic": "2.0.0-beta.6",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@iconify/icons-akar-icons": "^1.2.8",
"@iconify/react": "^3.2.2",
"@use-gesture/react": "^10.2.16",
"change-case": "^4.1.2",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.2",
"fitty": "^2.3.6",
"framer-motion": "^12.4.1",
"gsap": "^3.7.1",
"lethargy": "^1.0.9",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"raw-loader": "^4.0.2",
"rc-image": "^5.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.5.0",
"react-lazy-load-image-component": "^1.5.4",
"react-spring": "^9.4.5",
"react-transition-group": "^4.4.1",
Expand All @@ -55,6 +62,7 @@
"remark-mdx": "^1.6.22",
"sass": "^1.53.0",
"styled-components": "^5.3.3",
"swiper": "^11.2.6",
"three": "^0.131.3",
"unist-util-visit": "^2.0.2",
"video.js": "^7.19.2"
Expand Down
210 changes: 210 additions & 0 deletions website/src/components/AIGateway/Advantage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
import React from 'react';
import {
Box,
Container,
Heading,
Stack,
Text,
Grid,
GridItem,
Button,
Icon,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { useAdvantages } from './data';

import AvifImage from './AvifImage';

const Advantage: React.FC = () => {
const advantages = useAdvantages();

return (
<Box bg="#f9f9fb">
<Container py={{ base: '72px', lg: '120px' }}>
<Box textAlign="center" mb={{ base: '48px', lg: '80px' }}>
<Heading
as="h2"
variant="h2"
>
Transform APISIX into an AI Gateway with AI Plugins
</Heading>
<Button
as="a"
href="https://apisix.apache.org/docs/apisix/next/plugins/ai-proxy/"
target="_blank"
w={{ base: '158px', lg: 'auto' }}
h={{ base: '46px', lg: '48px' }}
variant="gradient"
mt="8"
>
Read the Docs
</Button>
</Box>
<Grid
as={motion.div as any}
templateRows={{
base: 'repeat(1, 1fr 0.5fr)',
lg: 'repeat(1, 1fr 0.5fr)',
} as const}
templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
gap={6}
>
{/* the first three list */}
{advantages.slice(0, 3).map((item, index) => (
<GridItem
gridArea={{ base: item.mobileArea, lg: item.gridArea }}
as={motion.div as any}
key={item.title as string}
initial={{ y: 20, opacity: 0 }}
whileInView={{
y: 0,
opacity: 1,
transition: { delay: 0.2 + 0.1 * index },
}}
viewport={{ once: true }}
bg="#ffffff"
borderRadius="8px"
display={{ base: 'flex', lg: 'unset' }}
alignItems={{ base: 'center' }}
justifyContent="center"
>
<Stack
spacing="4"
px={{ base: '4', lg: '8' }}
py="10"
alignItems="center"
textAlign="center"
>
{item.icon && (
<Box
w="48px"
h="48px"
p="1px"
background="linear-gradient(to right, #8F41E9, #578AEF)"
borderRadius="8px"
>
<Box
background="#fff"
borderRadius="8px"
height="100%"
display="flex"
justifyContent="center"
alignItems="center"
>
<Icon as={item.icon as any} boxSize="28px" color="brand.500" />
</Box>
</Box>
)}
<Heading
as="h4"
variant="h4"
fontSize={{ base: '26px', lg: '28px' }}
bg="var(--chakra-colors-gradient-600)"
bgClip="text"
{...item.titleStyle}
>
{item.title}
</Heading>
<Text
fontSize={{ base: '16px', lg: '18px' }}
color="#656b8a"
letterSpacing="-0.2px"
>
{item.description}
</Text>
</Stack>
</GridItem>
))}
{/* the last list */}
{advantages.slice(3, 4).map((item) => (
<GridItem
gridArea={{ base: item.mobileArea, lg: item.gridArea }}
as={motion.div as any}
key={item.title as string}
initial={{ y: 20, opacity: 0 }}
whileInView={{
y: 0,
opacity: 1,
transition: { delay: 0.6 },
}}
viewport={{ once: true }}
bg="#ffffff"
borderRadius="8px"
>
<Stack
spacing="6"
px={{ base: '6', lg: '12' }}
py="10"
alignItems="left"
textAlign={{ base: 'left', lg: 'left' }}
>
<Heading
as="h4"
variant="h4"
fontSize={{ base: '26px', lg: '32px' }}
{...item.titleStyle}
>
{item.title}
</Heading>
<Box>
<Text
fontSize={{ base: '16px', lg: '19px' }}
lineHeight="1.6"
color="#656b8a"
>
{item.description}
</Text>
<AvifImage
src={item.picture}
alt=""
height="50px"
w="full"
objectFit="contain"
transform={{ base: 'scale(1.03)', lg: 'scale(1.12)' }}
mt={{ base: '30px', lg: '50px' }}
/>
</Box>
</Stack>
</GridItem>
))}
</Grid>

<Box
as={motion.div}
initial={{ y: 20, opacity: 0 }}
whileInView={{ y: 0, opacity: 1, transition: { delay: 0.7 } }}
viewport={{ once: true }}
mt={{ base: '60px', lg: '80px' }}
>
<Box
position="relative"
width="100%"
height={{ base: 'auto', md: '600px', lg: '810px' }}
display={{ base: 'none', md: 'inherit' }}
>
<AvifImage
src="https://static.api7.ai/uploads/2025/04/17/OzCNXRTl_apisix-ai-gateway-architecture.png"
alt="AI Gateway Architecture"
objectFit="cover"
width="100%"
height="100%"
/>
</Box>

{/* Mobile */}
<Box maxW="full" mx="auto" display={{ base: 'unset', md: 'none' }}>
<AvifImage
src="https://static.api7.ai/uploads/2025/04/17/ykJ74KyV_apisix-ai-gateway-mobile.png"
alt="AI Gateway Architecture"
objectFit="cover"
width="100%"
height="100%"
/>
</Box>
</Box>
</Container>
</Box>
);
};

export default Advantage;
19 changes: 19 additions & 0 deletions website/src/components/AIGateway/AvifImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import type { ImageProps } from '@chakra-ui/react';
import { Image } from '@chakra-ui/react';

const AvifImage: React.FC<ImageProps> = ({ src, alt, ...props }) => {
if (src?.toLowerCase().includes('.svg') || src?.includes('imageMogr2/')) {
return <Image src={src} alt={alt} {...props} />;
}

return (
<picture>
<source srcSet={`${src}?imageMogr2/format/avif`} type="image/avif" />
<source srcSet={`${src}?imageMogr2/format/webp`} type="image/webp" />
<Image src={src} alt={alt} {...props} />
</picture>
);
};

export default AvifImage;
Loading
Loading