Use Markdown image embedding syntax instead of image tags

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
 
 <div align="center">
   <a href="https://github.com/yoheinakajima/babyagi">
-  <img src="https://user-images.githubusercontent.com/21254008/235015461-543a897f-70cc-4b63-941a-2ae3c9172b11.png" />
+
+  ![BabyAGI workflow diagram](https://user-images.githubusercontent.com/21254008/235015461-543a897f-70cc-4b63-941a-2ae3c9172b11.png)
+
   <p style={{color: 'gray', fontSize: '12px'}}>Read more here.</p>
   </a>
 </div>

docs/component-library/library-guides/spark/spark-submit.md

@@ -21,15 +21,21 @@ Xircuits provides an user interface to submit Spark applications via [custom rem
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/spark-remote-submit.gif"></img></p>
+
+  ![Spark remote submit](/img/docs/spark-remote-submit.gif)
+
+  </p>
 </details>
 
 If you have chosen cluster mode, your application should run in the Spark dashboard at `localhost:8080`.
 
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/spark-submit-cluster.gif"></img></p>
+
+  ![Spark submit cluster](/img/docs/spark-submit-cluster.gif)
+
+  </p>
 </details>
 
 

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.
 
 <p align="center">
-  <img width="80%"src="https://github.com/XpressAI/xircuits.io/assets/68586800/f9d355d6-6e8a-42e6-9d27-a67cdd946c7c"></img>
+
+![XGBoost workflow example](https://github.com/XpressAI/xircuits.io/assets/68586800/f9d355d6-6e8a-42e6-9d27-a67cdd946c7c)
+
 </p>
 
 As with the previous example, simply press run. You should see 

docs/main/Installation.md

@@ -45,7 +45,10 @@ If you're interested in the cutting-edge features of Xircuits (which might inclu
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/download-wheel.gif"></img></p>
+
+  ![](/img/docs/download-wheel.gif)
+
+  </p>
 </details>
 
 After downloading, extract the wheel to your working directory and install it with:

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
   </details>
 
   If successful, you should be able to see them staged in git. Commit both the .gitmodules and your component library and push them.  
-  <details>
+<details>
   <summary><b>VS Code Example</b></summary>
-    <p align="center">
-    <img src="/img/docs/vscode-submodule.png"></img></p>
-  </details>
+
+  <p align="center">
+
+  ![VS Code submodule](/img/docs/vscode-submodule.png)
+
+  </p>
+
+</details>
 
 ### 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). 
 
-  <details>
+<details>
   <summary><b>VS Code Example</b></summary>
-    <p align="center">
-    <img src="/img/docs/submit-component-lib-pr.png"></img></p>
-  </details><br/>
 
-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. 
+  <p align="center">
+
+  ![Submit component library PR](/img/docs/submit-component-lib-pr.png)
+
+  </p>
+
+</details><br/>
+
+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. 

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). 
 
-  <details>
+<details>
   <summary><b>VS Code Example</b></summary>
-    <p align="center">
-    <img src="/img/docs/submit-component-lib-pr.png"></img></p>
-  </details><br/>
+
+  ![Submit component library PR](/img/docs/submit-component-lib-pr.png)
+
+</details><br/>
 
 
 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!

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
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/create-new-component-library.gif"></img></p>
+
+  ![Create new component library](/img/docs/create-new-component-library.gif)
+
+  </p>
 </details><br></br>
 
 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
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/collab.gif"></img></p>
+
+  ![Collaboration](/img/docs/collab.gif)
+
+  </p>
 </details><br></br>
 
 ## Creating a Component Library from the Template

docs/main/faq.md

@@ -9,7 +9,10 @@ Nope, the easiest way to install it is by `pip install xircuits`. If you'd like
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/download-wheel.gif"></img></p>
+
+  ![Download wheel](/img/docs/download-wheel.gif)
+
+  </p>
 </details>
 
 **Q: What's the difference between installing and building Xircuits?**

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. 
 
 <p align="center">
-  <img width="50%" src="/img/docs/BranchComponent.png"></img>
-  <figcaption class="image-caption">BranchComponent</figcaption>
+
+![](/img/docs/BranchComponent.png)
+
+<figcaption class="image-caption">BranchComponent</figcaption>
 </p>
 
 Consider the following workflow:
 
 <p align="center">
-  <img width="90%" src="/img/docs/BranchComponentExample.png"></img>
-  <figcaption class="image-caption">BranchComponent Example</figcaption>
+
+![](/img/docs/BranchComponentExample.png)
+
+<figcaption class="image-caption">BranchComponent Example</figcaption>
 </p>
 
 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.
 
 <p align="center">
-  <img width="50%" src="/img/docs/LoopComponent.png"></img>
-  <figcaption class="image-caption">LoopComponent</figcaption>
+
+![](/img/docs/LoopComponent.png)
+
+<figcaption class="image-caption">LoopComponent</figcaption>
 </p>
 
 Consider the example `ControlflowLoop.xircuits`:
 
 <p align="center">
-  <img width="90%" src="/img/docs/ControlflowLoop.xircuits.png"></img>
-  <figcaption class="image-caption">LoopComponent Example</figcaption>
+
+![](/img/docs/ControlflowLoop.xircuits.png)
+
+<figcaption class="image-caption">LoopComponent Example</figcaption>
 </p>
 
 `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:
 
 <p align="center">
-  <img width="90%" src="/img/docs/ForEachComponentExample.png"></img>
-  <figcaption class="image-caption">ForEachComponent Example</figcaption>
+
+![](/img/docs/ForEachComponentExample.png)
+
+<figcaption class="image-caption">ForEachComponent Example</figcaption>
 </p>
 
 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:
 
 <p align="center">
-  <img width="90%" src="/img/docs/ControlflowCounterLoop.xircuits.png"></img>
-  <figcaption class="image-caption">Comparison Components to Control Loops Example</figcaption>
+
+![](/img/docs/ControlflowCounterLoop.xircuits.png)
+
+<figcaption class="image-caption">Comparison Components to Control Loops Example</figcaption>
 </p>
 
 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`.

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.
 
 <p align="center">
-  <img width="90%" src="/img/docs/events.gif"></img>
-  <figcaption class="image-caption">Events Preview</figcaption>
+
+![](/img/docs/events.gif)
+
+<figcaption class="image-caption">Events Preview</figcaption>
 </p>
 

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.
 
 <p align="center">
-  <img width="50%" src="/img/docs/workflow_component.png"></img>
-  <figcaption class="image-caption">Workflow Components</figcaption>
+
+![Workflow Components](/img/docs/workflow_component.png)
+
+<figcaption class="image-caption">Workflow Components</figcaption>
 </p>
 
 ## Creating a Workflow Component

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`.
 
 <p align="center">
-  <img width="50%" src="/img/docs/ParallelExecutionComponents.png"></img>
-  <figcaption class="image-caption">Parallel Execution Components</figcaption>
+
+![](/img/docs/ParallelExecutionComponents.png)
+
+<figcaption class="image-caption">Parallel Execution Components</figcaption>
 </p>
 
 ### Step 3: Use Branch Components
@@ -47,8 +49,10 @@ Common branch components include:
 Let's look at the `RunParallelExample.xircuits` workflow:
 
 <p align="center">
-  <img width="90%" src="/img/docs/RunParallelExample.png"></img>
-  <figcaption class="image-caption">RunParallelThread Example</figcaption>
+
+![](/img/docs/RunParallelExample.png)
+
+<figcaption class="image-caption">RunParallelThread Example</figcaption>
 </p>
 
 In this example:

docs/main/how-tos/using-variables.md

@@ -11,8 +11,10 @@ If you would like to manage variables within your workflows, variable components
 - `DefineVariableComponent`
 
 <p align="center">
-  <img width="50%" src="/img/docs/VariableComponents.png"></img>
-  <figcaption class="image-caption">Variable Components</figcaption>
+
+![](/img/docs/VariableComponents.png)
+
+<figcaption class="image-caption">Variable Components</figcaption>
 </p>
 
 ## Steps to Use Variable Components
@@ -25,8 +27,10 @@ Using `Variable Components` is simple:
 Consider the following workflow. 
 
 <p align="center">
-  <img width="90%" src="/img/docs/VariableComponentsExample.png"></img>
-  <figcaption class="image-caption">Variable Component Example</figcaption>
+
+![](/img/docs/VariableComponentsExample.png)
+
+<figcaption class="image-caption">Variable Component Example</figcaption>
 </p>
 
 You can define a variable at any point of the workflow using `SetVariableComponent`, and then retrieve the value at the end using `GetVariableComponent`.

docs/main/overview.md

@@ -17,16 +17,28 @@ It is created by data scientists for data scientists.
   <summary><b>Rich Xircuits Canvas Interface</b></summary>
   <br></br>
   <p align="center">Unreal Engine-like Chain Component Interface<br></br>
-  <img src="/img/docs/interface-chain.gif" width="600"></img></p>
+
+  ![](/img/docs/interface-chain.gif)
+
+  </p>
 
   <p align="center">Custom Nodes and Ports<br></br>
-  <img src="/img/docs/interface-custom-ports.gif" width="600"></img></p>
+
+  ![](/img/docs/interface-custom-ports.gif)
+
+  </p>
 
   <p align="center">Smart Link and Type Check Logic<br></br>
-  <img src="/img/docs/interface-smart-link.gif" width="600"></img></p>
+
+  ![](/img/docs/interface-smart-link.gif)
+
+  </p>
 
   <p align="center">Component Tooltips<br></br>
-  <img src="/img/docs/interface-tooltips.gif" width="600"></img></p>
+
+  ![](/img/docs/interface-tooltips.gif)
+
+  </p>
 </details>
 
 <details>

docs/main/references/components/comment-component.md

@@ -8,7 +8,10 @@ The comment component is a component that displays messages. Unlike normal libra
 <details>
   <summary>Video</summary>
   <p align="center">
-  <img src="/img/docs/comment-component.gif"></img></p>
+
+  ![](/img/docs/comment-component.gif)
+
+  </p>
 </details>
 
 Execution-wise, the Comment component has no effect, it's purely a tooltip to help Xircuits users understand the workflow.

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.
 
 <p align="center">
-  <img width="90%" src="/img/docs/events.gif"></img>
-  <figcaption class="image-caption">Events Preview</figcaption>
+
+![](/img/docs/events.gif)
+
+<figcaption class="image-caption">Events Preview</figcaption>
 </p>

docs/main/references/components/index.md

@@ -18,7 +18,9 @@ Component library nodes are the workhorses of your workflow. They perform action
 <details>
 <summary><b>Preview</b></summary>
 <p align="center">
-<img width="75%" src="/img/docs/component-nodes.gif"></img>
+
+![](/img/docs/component-nodes.gif)
+
 <figcaption class="image-caption">Component Nodes</figcaption>
 </p>
 </details>
@@ -56,7 +58,9 @@ Parameter nodes, found in the GENERAL tab, supply values to other components, in
 <details>
 <summary><b>Preview</b></summary>
 <p align="center">
-<img width="75%" src="/img/docs/interface-custom-ports.gif"></img>
+
+![](/img/docs/interface-custom-ports.gif)
+
 <figcaption class="image-caption">Parameter Nodes</figcaption>
 </p>
 </details>

docs/main/references/components/variable-components.md

@@ -11,8 +11,10 @@ Variable components are components that act like variables in workflows. We have
 - `GetVariableComponent`
 
 <p align="center">
-  <img width="50%" src="/img/docs/VariableComponents.png"></img>
-  <figcaption class="image-caption">Variable Components</figcaption>
+
+![](/img/docs/VariableComponents.png)
+
+<figcaption class="image-caption">Variable Components</figcaption>
 </p>
 
 ## DefineVariableComponent