diff --git a/docs/component-library/library-guides/gpt-agent-toolkit/how-it-works.md b/docs/component-library/library-guides/gpt-agent-toolkit/how-it-works.md index 0b9353b..476d56a 100644 --- a/docs/component-library/library-guides/gpt-agent-toolkit/how-it-works.md +++ b/docs/component-library/library-guides/gpt-agent-toolkit/how-it-works.md @@ -12,7 +12,9 @@ The GPT Agent Toolkit is adopted from [BabyAGI](https://github.com/yoheinakajima
- + + ![BabyAGI workflow diagram](https://user-images.githubusercontent.com/21254008/235015461-543a897f-70cc-4b63-941a-2ae3c9172b11.png) +

Read more here.
diff --git a/docs/component-library/library-guides/spark/spark-submit.md b/docs/component-library/library-guides/spark/spark-submit.md index 9bf6944..ccbac2e 100644 --- a/docs/component-library/library-guides/spark/spark-submit.md +++ b/docs/component-library/library-guides/spark/spark-submit.md @@ -21,7 +21,10 @@ Xircuits provides an user interface to submit Spark applications via [custom rem
Video

-

+ + ![Spark remote submit](/img/docs/spark-remote-submit.gif) + +

If you have chosen cluster mode, your application should run in the Spark dashboard at `localhost:8080`. @@ -29,7 +32,10 @@ If you have chosen cluster mode, your application should run in the Spark dashbo
Video

-

+ + ![Spark submit cluster](/img/docs/spark-submit-cluster.gif) + +

diff --git a/docs/component-library/library-guides/xgboost/index.md b/docs/component-library/library-guides/xgboost/index.md index 2661371..f1e0b2a 100644 --- a/docs/component-library/library-guides/xgboost/index.md +++ b/docs/component-library/library-guides/xgboost/index.md @@ -67,7 +67,9 @@ Now that you've successfully trained an XGBoost model and performed a prediction Replace `SKLearnLoadDataset` with `CSVToSKLearnDataset` and update the inPorts. For this example, we can use the [pinguin dataset](https://www.kaggle.com/code/parulpandey/penguin-dataset-the-new-iris). If it does not exist in your working directory, you can fetch it using the `xircuits-examples` command. Update its inPorts so that it looks like this.

- + +![XGBoost workflow example](https://github.com/XpressAI/xircuits.io/assets/68586800/f9d355d6-6e8a-42e6-9d27-a67cdd946c7c) +

As with the previous example, simply press run. You should see diff --git a/docs/main/Installation.md b/docs/main/Installation.md index 8fd50c7..a8e5ed1 100644 --- a/docs/main/Installation.md +++ b/docs/main/Installation.md @@ -45,7 +45,10 @@ If you're interested in the cutting-edge features of Xircuits (which might inclu
Video

-

+ + ![](/img/docs/download-wheel.gif) + +

After downloading, extract the wheel to your working directory and install it with: diff --git a/docs/main/developer-guide/contributing/contributing-a-xircuits-component-library.md b/docs/main/developer-guide/contributing/contributing-a-xircuits-component-library.md index 4215090..0fdef85 100644 --- a/docs/main/developer-guide/contributing/contributing-a-xircuits-component-library.md +++ b/docs/main/developer-guide/contributing/contributing-a-xircuits-component-library.md @@ -86,20 +86,30 @@ Don't forget that you should prepend `xai_` to the directory name in order for y If successful, you should be able to see them staged in git. Commit both the .gitmodules and your component library and push them. -
+
VS Code Example -

-

-
+ +

+ + ![VS Code submodule](/img/docs/vscode-submodule.png) + +

+ +
### 4. Create the PR! Navigate to your Xircuits repository and create the pull request! To ensure that we can help you merge it, [please allow us to be able to push commits to your fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork#enabling-repository-maintainer-permissions-on-existing-pull-requests). -
+
VS Code Example -

-

-

-And you're done! We'll give a look at your PR as soon as possible, so keep track the review tab now and then. You can also join our Discord if you would like to discuss anything. \ No newline at end of file +

+ + ![Submit component library PR](/img/docs/submit-component-lib-pr.png) + +

+ +

+ +And you're done! We'll give a look at your PR as soon as possible, so keep track the review tab now and then. You can also join our Discord if you would like to discuss anything. diff --git a/docs/main/developer-guide/contributing/contributing-a-xircuits-project-template.md b/docs/main/developer-guide/contributing/contributing-a-xircuits-project-template.md index 4d0a0f6..ae77ec8 100644 --- a/docs/main/developer-guide/contributing/contributing-a-xircuits-project-template.md +++ b/docs/main/developer-guide/contributing/contributing-a-xircuits-project-template.md @@ -40,11 +40,12 @@ Navigate to `project-templates/readme.md` and add your project to the list. Navigate to your Xircuits repository and create the pull request! To ensure that we can help you merge it, [please allow us to be able to push commits to your fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork#enabling-repository-maintainer-permissions-on-existing-pull-requests). -
+
VS Code Example -

-

-

+ + ![Submit component library PR](/img/docs/submit-component-lib-pr.png) + +

And that's it! Sharing your project template is a good way of getting more contributors to help your repository. We're always looking out for more interesting use cases that you can build with Xircuits! \ No newline at end of file diff --git a/docs/main/developer-guide/creating-a-xircuits-component-library.md b/docs/main/developer-guide/creating-a-xircuits-component-library.md index ba3cca0..4831833 100644 --- a/docs/main/developer-guide/creating-a-xircuits-component-library.md +++ b/docs/main/developer-guide/creating-a-xircuits-component-library.md @@ -33,7 +33,10 @@ If you have done it correctly, you should end up with a directory tree similar t
Video

-

+ + ![Create new component library](/img/docs/create-new-component-library.gif) + +



You can now check whether Xircuits have registered your component library. In the Component Tray, click the refresh icon. `newLibrary` should appear, and inside it your component ready to use. @@ -44,7 +47,10 @@ Xircuits component libraries, as with Xircuits files are very sharable. All you
Video

-

+ + ![Collaboration](/img/docs/collab.gif) + +



## Creating a Component Library from the Template diff --git a/docs/main/faq.md b/docs/main/faq.md index cefa2b3..a46eed3 100644 --- a/docs/main/faq.md +++ b/docs/main/faq.md @@ -9,7 +9,10 @@ Nope, the easiest way to install it is by `pip install xircuits`. If you'd like
Video

-

+ + ![Download wheel](/img/docs/download-wheel.gif) + +

**Q: What's the difference between installing and building Xircuits?** diff --git a/docs/main/how-tos/branch-and-loops.md b/docs/main/how-tos/branch-and-loops.md index 0d5a11a..555072e 100644 --- a/docs/main/how-tos/branch-and-loops.md +++ b/docs/main/how-tos/branch-and-loops.md @@ -11,15 +11,19 @@ In Xircuits, we have provided the `controlflow` component library which implemen The `BranchComponent` allows you to create branches in your workflow based on a condition, similar to an if-else statement in traditional programming.

- -

BranchComponent
+ +![](/img/docs/BranchComponent.png) + +
BranchComponent

Consider the following workflow:

- -

BranchComponent Example
+ +![](/img/docs/BranchComponentExample.png) + +
BranchComponent Example

The `BranchComponent` will alter its behavior depending on the `condition` inPort. In this case, as a `Literal True` is connected to the `BranchComponent`, it will execute the `Print` component which is connected to the "This will be printed if the condition is true!" Literal String. Finally, as with all branch components, it will go to the default flow port after completing the branch execution flow and execute one additional `Print` component. @@ -62,15 +66,19 @@ If you would like more examples of `BranchComponent`, `ControlflowBranch.xircuit The `LoopComponent` enables repetitive execution of a workflow segment based on a condition, similar to a while loop.

- -

LoopComponent
+ +![](/img/docs/LoopComponent.png) + +
LoopComponent

Consider the example `ControlflowLoop.xircuits`:

- -

LoopComponent Example
+ +![](/img/docs/ControlflowLoop.xircuits.png) + +
LoopComponent Example

`LoopComponent` will keep looping as long as the condition is set to be `True`. @@ -120,8 +128,10 @@ As shown from the output, this workflow will continue indefinitely as the condit The `ForEach` component iterates over a list of items, executing a workflow segment for each item, similar to a for loop. Consider the following workflow:

- -

ForEachComponent Example
+ +![](/img/docs/ForEachComponentExample.png) + +
ForEachComponent Example

In this workflow, the `ForEach` component will iterate through each item in the list. The item and the index are printed one after the other. @@ -179,8 +189,10 @@ In this workflow, the `ForEach` component will iterate through each item in the The `ComparisonComponent` performs comparisons between two values and returns a boolean result, useful for creating conditions in branches and loops. Consider the following advanced example:

- -

Comparison Components to Control Loops Example
+ +![](/img/docs/ControlflowCounterLoop.xircuits.png) + +
Comparison Components to Control Loops Example

In this workflow, we first define a boolean variable called `is_running` using `DefineVariableComponent`. This boolean is the condition of looping for the `LoopComponent`. The workflow then defines a counter that decreases each step. Then finally using the `ComparisonComponent`, we define only when the counter is less than 1, `is_running` will be `False`. diff --git a/docs/main/how-tos/events.md b/docs/main/how-tos/events.md index b270856..a594b88 100644 --- a/docs/main/how-tos/events.md +++ b/docs/main/how-tos/events.md @@ -42,7 +42,9 @@ In this tutorial, you will learn how to integrate event-driven functionality int 2. Observe how the `OnEvent` component reacts when the `FireEvent` component triggers the specified event.

- -

Events Preview
+ +![](/img/docs/events.gif) + +
Events Preview

diff --git a/docs/main/how-tos/nested-workflows.md b/docs/main/how-tos/nested-workflows.md index bea980d..24cdca8 100644 --- a/docs/main/how-tos/nested-workflows.md +++ b/docs/main/how-tos/nested-workflows.md @@ -7,8 +7,10 @@ sidebar_position: 4 Xircuits allows users to create modular, reusable workflows that can be integrated into larger workflows using `workflow components`. Workflow components function like subroutines or functions in traditional programming, encapsulating specific tasks or logic within a reusable piece that can be embedded in a larger workflow.

- -

Workflow Components
+ +![Workflow Components](/img/docs/workflow_component.png) + +
Workflow Components

## Creating a Workflow Component diff --git a/docs/main/how-tos/parallelism-in-xircuits.md b/docs/main/how-tos/parallelism-in-xircuits.md index f0381f6..f18dcf4 100644 --- a/docs/main/how-tos/parallelism-in-xircuits.md +++ b/docs/main/how-tos/parallelism-in-xircuits.md @@ -30,8 +30,10 @@ Create a new workflow or open an existing one where you want to use multithreadi 5. Connect the `futures` outPort of `RunParallelThread` to the `futures` inPort of `AwaitFutures`.

- -

Parallel Execution Components
+ +![](/img/docs/ParallelExecutionComponents.png) + +
Parallel Execution Components

### Step 3: Use Branch Components @@ -47,8 +49,10 @@ Common branch components include: Let's look at the `RunParallelExample.xircuits` workflow:

- -

RunParallelThread Example
+ +![](/img/docs/RunParallelExample.png) + +
RunParallelThread Example

In this example: diff --git a/docs/main/how-tos/using-variables.md b/docs/main/how-tos/using-variables.md index a9a9851..1350889 100644 --- a/docs/main/how-tos/using-variables.md +++ b/docs/main/how-tos/using-variables.md @@ -11,8 +11,10 @@ If you would like to manage variables within your workflows, variable components - `DefineVariableComponent`

- -

Variable Components
+ +![](/img/docs/VariableComponents.png) + +
Variable Components

## Steps to Use Variable Components @@ -25,8 +27,10 @@ Using `Variable Components` is simple: Consider the following workflow.

- -

Variable Component Example
+ +![](/img/docs/VariableComponentsExample.png) + +
Variable Component Example

You can define a variable at any point of the workflow using `SetVariableComponent`, and then retrieve the value at the end using `GetVariableComponent`. diff --git a/docs/main/overview.md b/docs/main/overview.md index c957321..dc51d0a 100644 --- a/docs/main/overview.md +++ b/docs/main/overview.md @@ -17,16 +17,28 @@ It is created by data scientists for data scientists. Rich Xircuits Canvas Interface

Unreal Engine-like Chain Component Interface

-

+ + ![](/img/docs/interface-chain.gif) + +

Custom Nodes and Ports

-

+ + ![](/img/docs/interface-custom-ports.gif) + +

Smart Link and Type Check Logic

-

+ + ![](/img/docs/interface-smart-link.gif) + +

Component Tooltips

-

+ + ![](/img/docs/interface-tooltips.gif) + +

diff --git a/docs/main/references/components/comment-component.md b/docs/main/references/components/comment-component.md index 569e965..86e1cdd 100644 --- a/docs/main/references/components/comment-component.md +++ b/docs/main/references/components/comment-component.md @@ -8,7 +8,10 @@ The comment component is a component that displays messages. Unlike normal libra
Video

-

+ + ![](/img/docs/comment-component.gif) + +

Execution-wise, the Comment component has no effect, it's purely a tooltip to help Xircuits users understand the workflow. \ No newline at end of file diff --git a/docs/main/references/components/event-components.md b/docs/main/references/components/event-components.md index 954bf4d..85ceda3 100644 --- a/docs/main/references/components/event-components.md +++ b/docs/main/references/components/event-components.md @@ -27,6 +27,8 @@ The Events Component Library is included in the base Xircuits installation and r - **Flexibility**: By using events, workflows can be more flexible, allowing for dynamic changes in response to different conditions or inputs.

- -

Events Preview
+ +![](/img/docs/events.gif) + +
Events Preview

diff --git a/docs/main/references/components/index.md b/docs/main/references/components/index.md index 02d711b..46eda2a 100644 --- a/docs/main/references/components/index.md +++ b/docs/main/references/components/index.md @@ -18,7 +18,9 @@ Component library nodes are the workhorses of your workflow. They perform action
Preview

- + +![](/img/docs/component-nodes.gif) +

Component Nodes

@@ -56,7 +58,9 @@ Parameter nodes, found in the GENERAL tab, supply values to other components, in
Preview

- + +![](/img/docs/interface-custom-ports.gif) +

Parameter Nodes

diff --git a/docs/main/references/components/variable-components.md b/docs/main/references/components/variable-components.md index 285bcd2..feb86d4 100644 --- a/docs/main/references/components/variable-components.md +++ b/docs/main/references/components/variable-components.md @@ -11,8 +11,10 @@ Variable components are components that act like variables in workflows. We have - `GetVariableComponent`

- -

Variable Components
+ +![](/img/docs/VariableComponents.png) + +
Variable Components

## DefineVariableComponent diff --git a/docs/main/references/components/workflow-components.md b/docs/main/references/components/workflow-components.md index 5fb9cd6..4be2cf4 100644 --- a/docs/main/references/components/workflow-components.md +++ b/docs/main/references/components/workflow-components.md @@ -3,8 +3,10 @@ Workflow components are Xircuits workflows designed to be reusable within other workflows by accepting values and passing the results to an outside workflow.

- -

Workflow Components
+ +![](/img/docs/workflow_component.png) + +
Workflow Components

:::info diff --git a/docs/main/references/xircuits-interface/component-tray.md b/docs/main/references/xircuits-interface/component-tray.md index 4c54fb6..38879d3 100644 --- a/docs/main/references/xircuits-interface/component-tray.md +++ b/docs/main/references/xircuits-interface/component-tray.md @@ -7,8 +7,10 @@ sidebar_position: 1 The Component Library Tray is an essential part of the Xircuits interface, providing access to all available components for building your workflows. It consists of three main parts: the search bar, library context menus, and the components themselves.

- -

Xircuits Component Tray
+ +![](/img/docs/xircuits-component-tray.png) + +
Xircuits Component Tray

@@ -23,8 +25,10 @@ At the top of the Component Library Tray, you'll find a search bar that allows y ### Search Bar Context Menu

- -

Main Context Menu
+ +![](/img/docs/tray-context-main.png) + +
Main Context Menu

Next to the search bar, there's a context menu (accessible via the `...` icon) with the following options: @@ -55,8 +59,10 @@ Both local and remote libraries have their own context menus, accessible by clic ### For Local Libraries:

- -

Local Library Context Menu
+ +![](/img/docs/tray-context-local-component-library.png) + +
Local Library Context Menu

@@ -70,8 +76,10 @@ Note: The availability of these options depends on the library's configuration i ### For Remote Libraries:

- -

Remote Library Context Menu
+ +![](/img/docs/tray-context-remote-component-library.png) + +
Remote Library Context Menu

Remote libraries are listed under the **AVAILABLE FOR INSTALLATION** header. Their context menu includes: diff --git a/docs/main/references/xircuits-interface/node-port-link-logic.md b/docs/main/references/xircuits-interface/node-port-link-logic.md index a41e632..bd53042 100644 --- a/docs/main/references/xircuits-interface/node-port-link-logic.md +++ b/docs/main/references/xircuits-interface/node-port-link-logic.md @@ -82,7 +82,10 @@ To ensure robust codegen compilation, we have established several rules and logi
Component Chaining Interface

-

+ + ![](/img/docs/interface-chain.gif) + +

- If a link is not dropped on a port, it prompts the component tray interface. @@ -95,5 +98,8 @@ To ensure robust codegen compilation, we have established several rules and logi
Video: Interface Smart Link

-

+ + ![](/img/docs/interface-smart-link.gif) + +

diff --git a/docs/main/references/xircuits-interface/remote-run.md b/docs/main/references/xircuits-interface/remote-run.md index 7c55af9..d666229 100644 --- a/docs/main/references/xircuits-interface/remote-run.md +++ b/docs/main/references/xircuits-interface/remote-run.md @@ -59,7 +59,10 @@ Running Spark Submit using local mode
Video

-

+ + ![](/img/docs/spark-remote-submit.gif) + +

### Note: diff --git a/docs/main/references/xircuits-interface/workflow-canvas.md b/docs/main/references/xircuits-interface/workflow-canvas.md index 5f9d88d..77081ea 100644 --- a/docs/main/references/xircuits-interface/workflow-canvas.md +++ b/docs/main/references/xircuits-interface/workflow-canvas.md @@ -11,7 +11,10 @@ You can start the Xircuits workflow canvas in two ways:
Video

-

+ + ![](/img/docs/open-xircuits.gif) + +

The following are the common canvas interfaces that you will use: @@ -70,7 +73,10 @@ You are able to modify `Parameter Components` (Literal nodes and Argument nodes)
Video

-

+ + ![](/img/docs/edit-literal.gif) + +

::: @@ -83,14 +89,20 @@ There are 2 types of links in Xircuits.
Video

-

+ + ![](/img/docs/sequence-link.gif) + +

2. **Parameter Links:** They indicate data flow from parameter component to library component, or from library component to another library component. Parameter links are grey in color and turn into a yellow flow when highlighted.
Video

-

+ + ![](/img/docs/parameter-link.gif) + +

- Shift selecting will create a point in the link. Use it to route links so it's visually intuitive. diff --git a/docs/main/tutorials/creating-components-with-xircuits.md b/docs/main/tutorials/creating-components-with-xircuits.md index c71eeba..ad9c72d 100644 --- a/docs/main/tutorials/creating-components-with-xircuits.md +++ b/docs/main/tutorials/creating-components-with-xircuits.md @@ -29,8 +29,10 @@ If you're creating a new workflow: Your workflow should look like this:

- -

HelloTutorial.xircuits
+ +![](/img/docs/tutorial-workflow-component-01.png) + +
HelloTutorial.xircuits

To create your first workflow component: @@ -53,8 +55,10 @@ Now, let's use this component in a new workflow: 5. Compile and run this new workflow.

- -

Using the Workflow Component
+ +![](/img/docs/tutorial-workflow-component-02.png) + +
Using the Workflow Component

You should see the same output as before: "Hello Xircuits!". However, you're now effectively executing a workflow in another workflow. Congratulations! You've just created and used your first workflow component. @@ -72,8 +76,10 @@ While your component works, it's not very flexible. Let's modify it to accept cu 1. Save your changes and compile the workflow.

- -

Using the Arguments in Workflow Components
+ +![](/img/docs/tutorial-workflow-component-03.png) + +
Using the Arguments in Workflow Components

## Using Your Enhanced Workflow Component @@ -88,8 +94,10 @@ Now that you've modified your workflow: 6. Connect everything and run the workflow.

- -

Using the Updated Workflow Component
+ +![](/img/docs/tutorial-workflow-component-04.png) + +
Using the Updated Workflow Component

diff --git a/docs/main/tutorials/creating-your-first-visual-workflow.md b/docs/main/tutorials/creating-your-first-visual-workflow.md index dd199fb..ef07251 100644 --- a/docs/main/tutorials/creating-your-first-visual-workflow.md +++ b/docs/main/tutorials/creating-your-first-visual-workflow.md @@ -60,7 +60,9 @@ Now, let's create a machine learning workflow by adding and connecting multiple - Connect `KerasEvaluateAccuracy` to the `Finish` node to complete the workflow.

- + + ![](/img/docs/tutorial-workflow-from-scratch-01.png) +

Connecting the Components

@@ -77,7 +79,9 @@ Here's what you need to do: 2. Connect `TrainTestSplit`'s `test` outPort to `KerasEvaluateAccuracy`'s `eval_dataset` inPort.

- + + ![](/img/docs/tutorial-workflow-from-scratch-02.png) +

Providing Data between Components

@@ -107,7 +111,9 @@ Parameter components allow you to set fixed values that can be used by other com 4. Press Enter to confirm the value.

- + +![](/img/docs/tutorial-workflow-from-scratch-03.png) +

Supplying Parameter Components

diff --git a/docs/main/tutorials/getting-started-with-xircuits.md b/docs/main/tutorials/getting-started-with-xircuits.md index c3802a8..37d8888 100644 --- a/docs/main/tutorials/getting-started-with-xircuits.md +++ b/docs/main/tutorials/getting-started-with-xircuits.md @@ -66,7 +66,9 @@ Once you open a .xircuits file, you will see a visual representation of your wor
Preview

- + + ![](/img/docs/component-nodes.gif) +

Component Nodes

@@ -76,7 +78,9 @@ Once you open a .xircuits file, you will see a visual representation of your wor
Preview

- + + ![](/img/docs/interface-custom-ports.gif) +

Parameter Nodes

@@ -90,7 +94,9 @@ Once you open a .xircuits file, you will see a visual representation of your wor There are also two Literal components connected to ConcatString, providing the strings "Hello " and "Xircuits!" to be concatenated.

- + +![](/img/docs/hello-tutorial.png) +

HelloTutorial.xircuits

diff --git a/docs/main/tutorials/integrating-python-code-with-xircuits.md b/docs/main/tutorials/integrating-python-code-with-xircuits.md index c21fadb..172f247 100644 --- a/docs/main/tutorials/integrating-python-code-with-xircuits.md +++ b/docs/main/tutorials/integrating-python-code-with-xircuits.md @@ -134,7 +134,9 @@ Let's create a workflow that calculates the number of days between the current d - Link the `days_difference` output to the `Print` component.

- + +![](/img/docs/tutorial-custom-python-component-01.png) +

Using the DateDifference Component

@@ -158,8 +160,10 @@ When creating your own components, keep these best practices in mind: In the XpressAI platform, you can leverage the chat assistant to generate components for you. This powerful feature can significantly speed up your component creation process and help you get started quickly with custom functionality.

- -

Chat Assistant
+ +![](/img/docs/xircuits-chat-assistant.gif) + +
Chat Assistant

::: diff --git a/docs/project-template/running-a-xircuits-project-template.md b/docs/project-template/running-a-xircuits-project-template.md index 8975bbf..f34cebd 100644 --- a/docs/project-template/running-a-xircuits-project-template.md +++ b/docs/project-template/running-a-xircuits-project-template.md @@ -57,7 +57,10 @@ Once you've setup the project, a Xircuits project template becomes a normal Xirc
Video

-

+ + ![](/img/docs/iris_template.gif) + +

Congratulations you have successfully ran your first Xircuits project template! From here, you should be able to run any project templates. Be sure to checkout the [Xircuits project template section](/docs/project-template/) if you want to see the various project template workflows made by our engineers and open source contributors. \ No newline at end of file