Skip to content

Commit 96126bf

Browse files
authored
Merge pull request #34 from XpressAI/paul/remove-img-tags
Use Markdown image embedding syntax instead of image tags
2 parents eb48fc5 + cd01d82 commit 96126bf

28 files changed

+229
-91
lines changed

docs/component-library/library-guides/gpt-agent-toolkit/how-it-works.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ The GPT Agent Toolkit is adopted from [BabyAGI](https://github.com/yoheinakajima
1212

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

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,21 @@ Xircuits provides an user interface to submit Spark applications via [custom rem
2121
<details>
2222
<summary>Video</summary>
2323
<p align="center">
24-
<img src="/img/docs/spark-remote-submit.gif"></img></p>
24+
25+
![Spark remote submit](/img/docs/spark-remote-submit.gif)
26+
27+
</p>
2528
</details>
2629

2730
If you have chosen cluster mode, your application should run in the Spark dashboard at `localhost:8080`.
2831

2932
<details>
3033
<summary>Video</summary>
3134
<p align="center">
32-
<img src="/img/docs/spark-submit-cluster.gif"></img></p>
35+
36+
![Spark submit cluster](/img/docs/spark-submit-cluster.gif)
37+
38+
</p>
3339
</details>
3440

3541

docs/component-library/library-guides/xgboost/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ Now that you've successfully trained an XGBoost model and performed a prediction
6767
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.
6868

6969
<p align="center">
70-
<img width="80%"src="https://github.com/XpressAI/xircuits.io/assets/68586800/f9d355d6-6e8a-42e6-9d27-a67cdd946c7c"></img>
70+
71+
![XGBoost workflow example](https://github.com/XpressAI/xircuits.io/assets/68586800/f9d355d6-6e8a-42e6-9d27-a67cdd946c7c)
72+
7173
</p>
7274

7375
As with the previous example, simply press run. You should see

docs/main/Installation.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ If you're interested in the cutting-edge features of Xircuits (which might inclu
4545
<details>
4646
<summary>Video</summary>
4747
<p align="center">
48-
<img src="/img/docs/download-wheel.gif"></img></p>
48+
49+
![](/img/docs/download-wheel.gif)
50+
51+
</p>
4952
</details>
5053

5154
After downloading, extract the wheel to your working directory and install it with:

docs/main/developer-guide/contributing/contributing-a-xircuits-component-library.md

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -86,20 +86,30 @@ Don't forget that you should prepend `xai_` to the directory name in order for y
8686
</details>
8787

8888
If successful, you should be able to see them staged in git. Commit both the .gitmodules and your component library and push them.
89-
<details>
89+
<details>
9090
<summary><b>VS Code Example</b></summary>
91-
<p align="center">
92-
<img src="/img/docs/vscode-submodule.png"></img></p>
93-
</details>
91+
92+
<p align="center">
93+
94+
![VS Code submodule](/img/docs/vscode-submodule.png)
95+
96+
</p>
97+
98+
</details>
9499

95100
### 4. Create the PR!
96101

97102
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).
98103

99-
<details>
104+
<details>
100105
<summary><b>VS Code Example</b></summary>
101-
<p align="center">
102-
<img src="/img/docs/submit-component-lib-pr.png"></img></p>
103-
</details><br/>
104106

105-
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.
107+
<p align="center">
108+
109+
![Submit component library PR](/img/docs/submit-component-lib-pr.png)
110+
111+
</p>
112+
113+
</details><br/>
114+
115+
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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,12 @@ Navigate to `project-templates/readme.md` and add your project to the list.
4040

4141
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).
4242

43-
<details>
43+
<details>
4444
<summary><b>VS Code Example</b></summary>
45-
<p align="center">
46-
<img src="/img/docs/submit-component-lib-pr.png"></img></p>
47-
</details><br/>
45+
46+
![Submit component library PR](/img/docs/submit-component-lib-pr.png)
47+
48+
</details><br/>
4849

4950

5051
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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ If you have done it correctly, you should end up with a directory tree similar t
3333
<details>
3434
<summary>Video</summary>
3535
<p align="center">
36-
<img src="/img/docs/create-new-component-library.gif"></img></p>
36+
37+
![Create new component library](/img/docs/create-new-component-library.gif)
38+
39+
</p>
3740
</details><br></br>
3841

3942
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
4447
<details>
4548
<summary>Video</summary>
4649
<p align="center">
47-
<img src="/img/docs/collab.gif"></img></p>
50+
51+
![Collaboration](/img/docs/collab.gif)
52+
53+
</p>
4854
</details><br></br>
4955

5056
## Creating a Component Library from the Template

docs/main/faq.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ Nope, the easiest way to install it is by `pip install xircuits`. If you'd like
99
<details>
1010
<summary>Video</summary>
1111
<p align="center">
12-
<img src="/img/docs/download-wheel.gif"></img></p>
12+
13+
![Download wheel](/img/docs/download-wheel.gif)
14+
15+
</p>
1316
</details>
1417

1518
**Q: What's the difference between installing and building Xircuits?**

docs/main/how-tos/branch-and-loops.md

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,19 @@ In Xircuits, we have provided the `controlflow` component library which implemen
1111
The `BranchComponent` allows you to create branches in your workflow based on a condition, similar to an if-else statement in traditional programming.
1212

1313
<p align="center">
14-
<img width="50%" src="/img/docs/BranchComponent.png"></img>
15-
<figcaption class="image-caption">BranchComponent</figcaption>
14+
15+
![](/img/docs/BranchComponent.png)
16+
17+
<figcaption class="image-caption">BranchComponent</figcaption>
1618
</p>
1719

1820
Consider the following workflow:
1921

2022
<p align="center">
21-
<img width="90%" src="/img/docs/BranchComponentExample.png"></img>
22-
<figcaption class="image-caption">BranchComponent Example</figcaption>
23+
24+
![](/img/docs/BranchComponentExample.png)
25+
26+
<figcaption class="image-caption">BranchComponent Example</figcaption>
2327
</p>
2428

2529
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
6266
The `LoopComponent` enables repetitive execution of a workflow segment based on a condition, similar to a while loop.
6367

6468
<p align="center">
65-
<img width="50%" src="/img/docs/LoopComponent.png"></img>
66-
<figcaption class="image-caption">LoopComponent</figcaption>
69+
70+
![](/img/docs/LoopComponent.png)
71+
72+
<figcaption class="image-caption">LoopComponent</figcaption>
6773
</p>
6874

6975
Consider the example `ControlflowLoop.xircuits`:
7076

7177
<p align="center">
72-
<img width="90%" src="/img/docs/ControlflowLoop.xircuits.png"></img>
73-
<figcaption class="image-caption">LoopComponent Example</figcaption>
78+
79+
![](/img/docs/ControlflowLoop.xircuits.png)
80+
81+
<figcaption class="image-caption">LoopComponent Example</figcaption>
7482
</p>
7583

7684
`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
120128
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:
121129

122130
<p align="center">
123-
<img width="90%" src="/img/docs/ForEachComponentExample.png"></img>
124-
<figcaption class="image-caption">ForEachComponent Example</figcaption>
131+
132+
![](/img/docs/ForEachComponentExample.png)
133+
134+
<figcaption class="image-caption">ForEachComponent Example</figcaption>
125135
</p>
126136

127137
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
179189
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:
180190

181191
<p align="center">
182-
<img width="90%" src="/img/docs/ControlflowCounterLoop.xircuits.png"></img>
183-
<figcaption class="image-caption">Comparison Components to Control Loops Example</figcaption>
192+
193+
![](/img/docs/ControlflowCounterLoop.xircuits.png)
194+
195+
<figcaption class="image-caption">Comparison Components to Control Loops Example</figcaption>
184196
</p>
185197

186198
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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ In this tutorial, you will learn how to integrate event-driven functionality int
4242
2. Observe how the `OnEvent` component reacts when the `FireEvent` component triggers the specified event.
4343

4444
<p align="center">
45-
<img width="90%" src="/img/docs/events.gif"></img>
46-
<figcaption class="image-caption">Events Preview</figcaption>
45+
46+
![](/img/docs/events.gif)
47+
48+
<figcaption class="image-caption">Events Preview</figcaption>
4749
</p>
4850

0 commit comments

Comments
 (0)