From 788dad66f7e993a6c5283c0a3ce39c5ae9ccc9f9 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Wed, 4 Oct 2023 19:35:04 +0200 Subject: [PATCH] Update windmill ai homepage (#324) * Update windmill ai homepage * Fix autoplay --- src/landing/HeroAI.jsx | 61 +++++++ src/landing/Section.tsx | 7 +- src/pages/index.js | 2 + src/pages/windmill_ai.jsx | 342 +++++++++++++++----------------------- 4 files changed, 201 insertions(+), 211 deletions(-) create mode 100644 src/landing/HeroAI.jsx diff --git a/src/landing/HeroAI.jsx b/src/landing/HeroAI.jsx new file mode 100644 index 000000000..8719d2ae0 --- /dev/null +++ b/src/landing/HeroAI.jsx @@ -0,0 +1,61 @@ +import React from 'react'; +import RadialBlur from './RadialBlur'; +import { useColorMode } from '@docusaurus/theme-common'; + +export default function HeroAI() { + const { colorMode } = useColorMode(); + + return ( +
+ + +
+
+
+ Windmill AI +
+ +

+ Build internal tools with Windmill AI +

+

+ Windmill is a low-code platform for building endpoints, flows, and apps from simple + scripts. The presence of code at the heart of Windmill offers unlimited possibilities so + as not to rely solely on pre-built integrations. +

+

+ With the integration of AI models within Windmill, your willpower alone can create the + internal tools you want in just a few seconds. +

+

+ The AI generates code that matches Windmill's specifications, especially the interaction + with external APIs. +

+ + +
+
+
+
+
+ ); +} diff --git a/src/landing/Section.tsx b/src/landing/Section.tsx index cdbffcb54..e6f7363d5 100644 --- a/src/landing/Section.tsx +++ b/src/landing/Section.tsx @@ -16,7 +16,8 @@ export default function Section({ description, color, examples, - kind + kind, + shouldShowDevModeSwitch = true }) { const { developerMode } = useDeveloperMode(); const { colorMode } = useColorMode(); @@ -57,7 +58,7 @@ export default function Section({ > {title} - + {shouldShowDevModeSwitch && }

{caption}

@@ -75,7 +76,7 @@ export default function Section({ ) : ( <> - + {examples?.length > 0 && }{' '} )} diff --git a/src/pages/index.js b/src/pages/index.js index 0c629d08f..5a2cf0eab 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -21,6 +21,8 @@ export function useDeveloperMode() { return useContext(DeveloperModeContext); } +export { DeveloperModeContext }; + function HomepageHeader() { const [developerMode, setDeveloperMode] = useState(false); diff --git a/src/pages/windmill_ai.jsx b/src/pages/windmill_ai.jsx index ed426fa83..f50126616 100644 --- a/src/pages/windmill_ai.jsx +++ b/src/pages/windmill_ai.jsx @@ -1,221 +1,147 @@ -import React, { Component } from 'react'; +import React, { useState } from 'react'; import Head from '@docusaurus/Head'; -import LandingSection from '../landing/LandingSection'; import LandingHeader from '../landing/LandingHeader'; import Footer from '../landing/Footer'; -import { ArrowRight, Book, Pen } from 'lucide-react'; import LayoutProvider from '@theme/Layout/Provider'; -import ReactDOM from 'react-dom'; -import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader -import { Carousel } from 'react-responsive-carousel'; +import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader +import { Code, Hand } from 'lucide-react'; +import HeroAI from '../landing/HeroAI'; -export default function Windmill_AI() { - const data = { - title: 'Build internal tools with Windmill AI', - subtitle: - 'Have AI help you generate scripts and flows from simple prompts.', - description: ( -
-

- Windmill is a low-code platform for building endpoints, flows, and apps from simple scripts. - The presence of code at the heart of Windmill offers unlimited possibilities so as not to rely solely on pre-built integrations. -

-

- With the integration of AI models within Windmill, your willpower alone can create the internal tools you want in just a few seconds. -

-

The AI generates code that matches Windmill's specifications, especially the interaction with external APIs.

-
- ), - screenshot: '/img/windmill_ai/flow_generation.png', - video: { - videoSrc: '/videos/flow_ai.mp4', - altText: 'Windmill AI' - } - }; - - const code_generation = { - title: "Code Generation", - description: ( -
-

- Generate Windmill-specific code from simple prompt. -

-

- The AI-generated script will set to be tested right away, with an auto-generated UI and a dedicated webhook. -

-
- ), - video: { - videoSrc: '/videos/ai_generation.mp4', - altText: 'Code Generation' - } - }; - - const code_edition = { - title: "Code Edition", - description: ( -
-

- Select the code section you want to edit and give instructions to the AI assistant. -

-
- ), - video: { - videoSrc: '/videos/ai_edit.mp4', - altText: 'Code Edition' - } - }; +import Section from './../landing/Section'; +import { DeveloperModeContext } from './index'; - const code_fixing = { - title: "Code Fixing", - description: ( -
-

- Upon error when executing code, you will be offered to "AI Fix" it. -

-

- The assistant will automatically read the code, explain what went wrong, and suggest a way to fix it. -

-
- ), - video: { - videoSrc: '/videos/ai_fix.mp4', - altText: 'Code Fixing' - } - }; +const tabs = [ + { + label: 'App editor', + icon: Code, + id: 'app-editor', + data: [ + { + title: 'Generate Windmill-specific code from simple prompt', + description: + 'The AI-generated script will set to be tested right away, with an auto-generated UI and a dedicated webhook.', + icon: Hand, + caption:
Code Edition
, + video: { + videoSrc: '/videos/ai_generation.mp4', + altText: 'Code Edition', + videoLength: '21' + } + }, + { + title: 'Code Edition', + description: + 'Select the code section you want to edit and give instructions to the AI assistant.', + icon: Hand, + caption:
Code Edition
, + video: { + videoSrc: '/videos/ai_edit.mp4', + altText: 'Code Edition', + videoLength: '21' + } + }, + { + title: 'Code Fixing', + description: + 'Upon error when executing code, you will be offered to "AI Fix" it. The assistant will automatically read the code, explain what went wrong, and suggest a way to fix it.', + icon: Hand, + caption:
Code Fixing
, + video: { + videoSrc: '/videos/ai_fix.mp4', + altText: 'Code Fixing', + videoLength: '21' + } + } + ] + } +]; - const flow_sequence = { - title: "Sequence Flow Generation", - description: ( -
-

- Describe the sequence of actions you wish to execute, and the AI Flow builder will write all the steps, link them together, and allow you to trigger the flow manually. -

-
- ), - video: { - videoSrc: '/videos/flow_ai.mp4', - altText: 'Sequence Flow Generation' - } - }; +const flowTabs = [ + { + label: 'Flow editor', + icon: Code, + id: 'flow-editor', + data: [ + { + title: 'Sequence Flow Generation', + description: + 'Describe the sequence of actions you wish to execute, and the AI Flow builder will write all the steps, link them together, and allow you to trigger the flow manually.', + icon: Hand, + caption:
Code Edition
, + video: { + videoSrc: '/videos/flow_ai.mp4', + altText: 'Code Edition', + videoLength: '21' + } + }, + { + title: 'Trigger Flow Generation', + description: + 'Build a flow with two scripts, one that regularly checks for changes in an external system and a second that is executed for each change using a for-loop. This allows you to avoid relying on webhooks sent by external APIs, which can be tedious to configure.', + icon: Hand, + caption:
Code Edition
, + video: { + videoSrc: '/videos/flow_ai_trigger.mp4', + altText: 'Code Edition', + videoLength: '21' + } + } + ] + } +]; - const flow_trigger = { - title: "Trigger Flow Generation", - description: ( -
-

- Build a flow with two scripts, one that regularly checks for changes in an external system and a second that is executed for each change using a for-loop. -

-

- This allows you to avoid relying on webhooks sent by external APIs, which can be tedious to configure. -

-
- ), - video: { - videoSrc: '/videos/flow_ai_trigger.mp4', - altText: 'Trigger Flow Generation' - } - }; +export default function Windmill_AI() { + const [developerMode, setDeveloperMode] = useState(false); - const script_section = [ - code_generation, - code_edition, - code_fixing, - ]; + return ( + + +
+ + Windmill AI + + + + + - const flow_section = [ - flow_sequence, - flow_trigger, - ]; +
- return ( - -
- - Windmill AI - - - - - -
-
-
-

- {data.title} -

-

{data.subtitle}

-
-
-
-
{data.description}
-
- - -
-
-
-
-
-
-
- -
-

- Windmill AI for Scripts -

- - {script_section.map((section, index) => ( -
-
-

{section.title}

-
{section.description}
{/* Added text-left here */} -
-
-
-
- ))} - -
-
-

- Windmill AI for Flows -

- - {flow_section.map((section, index) => ( -
-
-

{section.title}

-
{section.description}
{/* Added text-left here */} -
-
-
-
- ))} - -
-
-
- + +
+ + ); -} \ No newline at end of file +}