From ad1d0dffce070ee6c491e083aaa0edefc19ca73a Mon Sep 17 00:00:00 2001 From: Tony Holdstock-Brown Date: Mon, 23 Oct 2023 19:12:12 -0700 Subject: [PATCH] AI page updates --- pages/ai.tsx | 217 +++++++++++++++++++++++++++------ pages/blog/[slug].tsx | 4 +- pages/demo.tsx | 6 +- pages/uses/[case].tsx | 2 +- pages/uses/internal-tools.tsx | 15 ++- pages/uses/workflow-engine.tsx | 153 +++++++++++++---------- shared/PageHeader.tsx | 33 +++-- shared/SectionHeader.tsx | 33 ++++- 8 files changed, 330 insertions(+), 133 deletions(-) diff --git a/pages/ai.tsx b/pages/ai.tsx index b534bc7ed..c1317de15 100644 --- a/pages/ai.tsx +++ b/pages/ai.tsx @@ -9,7 +9,6 @@ import Check from "src/shared/Icons/Check"; import { ChevronRightIcon } from "@heroicons/react/20/solid"; import CodeWindow from "src/shared/CodeWindow"; - export const getStaticProps: GetStaticProps = async () => { return { props: { @@ -26,23 +25,32 @@ export default function AI() { -

Companies of all sizes trust Inngest to power their AI functionality.

+

+ Companies of all sizes trust Inngest to power their AI functionality. +

{/* Code example */} -

+ " + > Focus on what matters: the AI.

-

Spend time on what's important. Scale from day 0 by leaving the complex orchestration to us.

+

+ Spend time developing what's important. Scale from day 0 by leaving + the complex orchestration to us. +

-
+ " + > -
+
-

- Rapidly iterate on complex AI chains,
directly in code. + " + > + Rapidly iterate on complex AI chains, +
+ directly in code.

-

- A simple, powerful interface that lets you define reliable flow control using any AI provider, connecting with any data source. Write AI workflows directly in your API using our SDK, with local testing out of the box. + " + > + A simple, powerful interface that lets you define reliable flow + control in your own code. Write AI workflows directly in your + API using our SDK, with local testing out of the box.

-
+ " + >
-

+ " + > Your data, your environment

-

Leverage data from your own database, vector store, or APIs directly in code — without complex interfaces or adapters.

+

+ Leverage data from your own database, vector store, or APIs + directly in code — without complex interfaces or adapters. +

-

+ " + > Any AI model, any AI pattern

-

Easily implement any AI model as a single call or using patterns like RAG, tree of thoughts, chain of thoughts, or safety rails, directly in code.

+

+ Easily implement any AI model as a single call or using patterns + like RAG, tree of thoughts, chain of thoughts, or safety rails, + directly in code. +

- + +
+
+ + + + +

+ Full flow control +

+

+ Concurrency, rate limiting, debounce, automatic cancellation — + everything you need to scale, while respecting rate limits, built + in from the beginning. +

+
+
+ + + +

+ Local development +

+

+ Develop in your existing code base and test things locally using + our dev server, with full production parity. +

+
+
+ + + +

+ Zero infra or CD changes +

+

+ Deploy in your existing API, on your existing platform, without + spinning up new infra or provisioning new clouds. +

+
+
+ ); } const AIHero = () => ( -
-

+

+ " + > Build powerful AI workflows in code.

- Develop, test, and deploy reliable AI workflows to production, in less than a day. Inngest’s event-driven workflows handle queueing, state, scale, and observability, letting you focus on what matters. + Develop, test, and deploy reliable AI workflows to production, in less + than a day. Inngest’s event-driven workflows handle queueing, state, + scale, and observability, letting you focus on what matters.

-
+ " + > { return (
- {list.map((item, n) => {item})} + {list.map((item, n) => ( + + {item} + + ))}
); -} +}; const GradientBox = ({ children, className = "" }) => (
@@ -202,7 +342,7 @@ const GradientBox = ({ children, className = "" }) => ( {children}
-) +); const aiFlow = ` export const userWorkflow = inngest.createFunction( @@ -236,7 +376,7 @@ export const userWorkflow = inngest.createFunction( `; const DevIcon = (props) => ( - ( d="M22.27 52v-8.531h1.974c.332.004.645.039.938.105.297.063.57.153.82.27.348.16.654.37.92.633a3 3 0 0 1 .644.896c.145.29.254.605.329.95.078.343.119.71.123 1.1v.628c0 .375-.038.73-.112 1.066a3.97 3.97 0 0 1-.31.926 3.45 3.45 0 0 1-1.254 1.406c-.282.176-.6.31-.955.404a4.591 4.591 0 0 1-1.143.147H22.27Zm1.101-7.64v6.755h.873c.313-.004.596-.043.85-.117.258-.074.486-.18.685-.316.211-.141.393-.313.545-.516.156-.207.28-.438.37-.691.078-.207.136-.43.175-.668.04-.242.06-.495.065-.756v-.639a4.765 4.765 0 0 0-.07-.762c-.04-.246-.1-.474-.182-.685a2.662 2.662 0 0 0-.428-.738 2.029 2.029 0 0 0-.65-.54 2.454 2.454 0 0 0-.616-.234 3.152 3.152 0 0 0-.744-.094h-.873Zm13.31 3.697H33.12v3.023h4.154V52h-5.238v-8.531h5.185v.925H33.12v2.743h3.562v.92ZM43.687 52l-2.696-8.531h1.16l1.876 6.369.123.416.129-.428 1.886-6.357h1.154L44.63 52h-.943Zm12.208-3.943h-3.562v3.023h4.154V52H51.25v-8.531h5.185v.925h-4.101v2.743h3.562v.92Zm6.139 3.023h4.172V52H60.95v-8.531h1.084v7.611Zm13.93-2.853a6.264 6.264 0 0 1-.081.925 4.939 4.939 0 0 1-.223.897c-.101.289-.232.558-.392.808-.157.25-.344.47-.563.657-.219.187-.47.336-.756.445a2.687 2.687 0 0 1-.949.158c-.352 0-.67-.052-.955-.158a2.58 2.58 0 0 1-.75-.445 2.964 2.964 0 0 1-.568-.657 4.012 4.012 0 0 1-.393-.814 4.958 4.958 0 0 1-.234-.896 6.141 6.141 0 0 1-.082-.92v-.973c.004-.305.029-.611.076-.92.05-.313.129-.613.234-.902.102-.29.23-.559.387-.809.16-.254.35-.476.568-.668.219-.187.469-.334.75-.44.285-.109.604-.163.955-.163.352 0 .67.054.955.164.285.105.538.252.756.44.219.187.407.407.563.661.16.25.293.52.398.809.102.289.176.59.223.902.05.313.078.621.082.926v.973Zm-1.071-.985a7.265 7.265 0 0 0-.041-.633 4.802 4.802 0 0 0-.118-.662 3.622 3.622 0 0 0-.228-.615 2.073 2.073 0 0 0-.352-.527 1.556 1.556 0 0 0-1.166-.487 1.542 1.542 0 0 0-1.16.492c-.14.153-.258.329-.351.528-.094.195-.168.4-.223.615-.059.219-.102.44-.129.662a7.238 7.238 0 0 0-.041.627v.985c.004.199.018.41.041.632.027.223.07.442.129.657.058.218.135.427.228.627.094.199.211.373.352.521.14.152.307.273.498.363.191.09.414.135.668.135a1.556 1.556 0 0 0 1.172-.498c.137-.148.25-.32.34-.516.094-.199.17-.408.228-.627a4.12 4.12 0 0 0 .112-.656c.023-.222.037-.435.04-.638v-.985Zm6.314 1.336V52h-1.084v-8.531h2.765c.383.008.744.068 1.084.181.344.114.645.278.903.493.257.214.46.48.609.797.152.316.229.68.229 1.09 0 .41-.077.773-.229 1.09a2.302 2.302 0 0 1-.61.79 2.725 2.725 0 0 1-.902.492 3.52 3.52 0 0 1-1.084.176h-1.681Zm0-.89h1.681c.25-.004.48-.044.692-.118.21-.078.394-.187.55-.328.157-.14.278-.31.364-.51.09-.203.135-.433.135-.691 0-.258-.045-.49-.135-.697a1.519 1.519 0 0 0-.358-.528 1.629 1.629 0 0 0-.556-.334 2.07 2.07 0 0 0-.692-.123h-1.681v3.328Zm9.613-4.22 1.388 4.266 1.5-4.265h1.348V52H94v-3.404l.088-3.563-1.576 4.594h-.621l-1.447-4.47.087 3.439V52h-1.054v-8.531h1.342Zm13.11 4.589h-3.562v3.023h4.154V52h-5.238v-8.531h5.186v.925h-4.102v2.743h3.562v.92ZM114.188 52h-1.102l-3.31-6.375-.018 6.375h-1.096v-8.531h1.102l3.311 6.363.017-6.363h1.096V52Zm10.017-7.605h-2.637V52h-1.054v-7.605h-2.637v-.926h6.328v.925Z" /> -) +); const StoreLogos = (props) => ( ( /> -) - +); const ProviderLogos = (props) => ( ( /> -) +); diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index 2ad87e888..f88293aaa 100644 --- a/pages/blog/[slug].tsx +++ b/pages/blog/[slug].tsx @@ -19,14 +19,14 @@ import IconCalendar from "src/shared/Icons/Calendar"; import CTACallout from "src/shared/CTACallout"; import Blockquote from "src/shared/Blog/Blockquote"; import rehypeCodeTitles from "rehype-code-titles"; -import YouTube from 'react-youtube-embed' +import YouTube from "react-youtube-embed"; const components = { DiscordCTA, Button, CTACallout, Blockquote, - YouTube + YouTube, }; type Props = { diff --git a/pages/demo.tsx b/pages/demo.tsx index b8f41380a..3ae767949 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -39,7 +39,11 @@ export default function Demo() {

Create, Test, and Deploy in minutes

-
diff --git a/pages/uses/[case].tsx b/pages/uses/[case].tsx index f3294ea30..935da150c 100644 --- a/pages/uses/[case].tsx +++ b/pages/uses/[case].tsx @@ -265,4 +265,4 @@ export default function useCase({ stringData }) { const Icon = ({ name, ...props }: { name: IconType } & IconProps) => { const C = Icons[name]; return ; -}; \ No newline at end of file +}; diff --git a/pages/uses/internal-tools.tsx b/pages/uses/internal-tools.tsx index 9d74af314..12fe6a979 100644 --- a/pages/uses/internal-tools.tsx +++ b/pages/uses/internal-tools.tsx @@ -34,7 +34,10 @@ export default function Template() { and ship using the most advanced tooling platform available.

-
-
@@ -161,7 +167,10 @@ export default function Template() {
-
- @@ -79,28 +85,38 @@ export default function workflowEngine() {
- Case study + + Case study +

- FlorianWorks: zero to building a mission-critical workflow engine for fire departments + FlorianWorks: zero to building a mission-critical workflow engine + for fire departments

- FlorianWorks develops custom-built software products for fire departments, incorporating custom - workflows built directly on top of Inngest to ship reliable products faster and easier than ever before. + FlorianWorks develops custom-built software products for fire + departments, incorporating custom workflows built directly on top + of Inngest to ship reliable products faster and easier than ever + before.

- Utilizing Inngest's core workflow engine and primitives such as step.waitForEvent, - FlorianWorks ships scheduling, roster management, a rules engine, and finance management without spending effort - developing custom distributed systems primitives or reliability concerns. + Utilizing Inngest's core workflow engine and primitives such as{" "} + step.waitForEvent, FlorianWorks + ships scheduling, roster management, a rules engine, and finance + management without spending effort developing custom distributed + systems primitives or reliability concerns.

  • - Development on core business logic only + Development on core + business logic only
  • - Auditable, logged, secure workflows + Auditable, logged, secure + workflows
  • - Zero additional infrastructure required + Zero additional + infrastructure required
@@ -109,13 +125,17 @@ export default function workflowEngine() {
- -

- "Inngest is a great platform to build reliability into your long running tasks without drowning in complexity."" -

-

- Ozan Şener, Principal Engineer + +

+ "Inngest is a great platform to build reliability into your long + running tasks without drowning in complexity.""

+

Ozan Şener, Principal Engineer

 @@ -126,36 +146,44 @@ export default function workflowEngine() { Fully customizable, durable workflows

- You bring the application code, we bring the engine. Allow your own users to - create workflows composed of reusable logic that you define. Our engine - runs workflows as steps, taking care of scale, orchestration, idempotency, retries, - and observability for you. + You bring the application code, we bring the engine. Allow your + own users to create workflows composed of reusable logic that you + define. Our engine runs workflows as steps, taking care of scale, + orchestration, idempotency, retries, and observability for you.

- Build simple linear workflows or complex DAG-based workflows with parallelism and - fan-in out of the box. Leverage our step primitives for human-in-the-loop or paused - functions which automatically resume based off of conditions being met. + Build simple linear workflows or complex DAG-based workflows with + parallelism and fan-in out of the box. Leverage our step + primitives for human-in-the-loop or paused functions which + automatically resume based off of conditions being met.

- Concurrency, rate limiting and debounce -  controls built in, with custom keys or controlling your own user's limits + + Concurrency, rate limiting and debounce + +  controls built in, with custom keys or controlling your + own user's limits
Reliably run any code -  in any step, with retries and error handling automatically managed +  in any step, with retries and error handling + automatically managed
- Auditable, observable, and scalable -  handling tens of thousands of requests per second with real time metrics + + Auditable, observable, and scalable + +  handling tens of thousands of requests per second with + real time metrics
@@ -177,15 +205,15 @@ export default function workflowEngine() {
- +
-
- workflow.ts +
+
+ workflow.ts +
-
} snippet={stackWorkflows} showLineNumbers={true} @@ -194,13 +222,10 @@ export default function workflowEngine() {
- ); } - - const stackWorkflows = ` import { runAction } from "@/actions"; import { inngest } from "@/inngest"; diff --git a/shared/PageHeader.tsx b/shared/PageHeader.tsx index c980d594f..4db2293d6 100644 --- a/shared/PageHeader.tsx +++ b/shared/PageHeader.tsx @@ -14,29 +14,28 @@ type PageHeaderProps = { }; export default function PageHeader(props: PageHeaderProps) { - if (!!props.image) { - return + return ; } const { title, lede, ctas } = props; return (
-

- {title} -

-

- {Boolean(ctas?.length) && ( -
- {ctas.map((cta) => ( - - ))} -
- )} +

+ {title} +

+

+ {Boolean(ctas?.length) && ( +
+ {ctas.map((cta) => ( + + ))} +
+ )}
); } @@ -77,4 +76,4 @@ const LeftAlignedHeader = ({ )}
); -} +}; diff --git a/shared/SectionHeader.tsx b/shared/SectionHeader.tsx index cf599d9c9..d6fabe054 100644 --- a/shared/SectionHeader.tsx +++ b/shared/SectionHeader.tsx @@ -4,26 +4,47 @@ type SectionHeaderProps = { pre?: ReactElement | string; title: ReactElement | string; lede?: ReactElement | string; - center?: boolean + center?: boolean; }; -const SectionHeader = ({ title, lede = "", center = false, pre }: SectionHeaderProps) => { +const SectionHeader = ({ + title, + lede = "", + center = false, + pre, +}: SectionHeaderProps) => { return ( <> {pre && ( -

+

{pre}

)} -

+

{title}

{typeof lede === "string" ? ( -

+

{lede}

) : ( -
+
{lede}
)}