Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 56db1f4

Browse files
HomunMageHomunMage
committedJul 19, 2024·
doc
1 parent b3b1462 commit 56db1f4

File tree

15 files changed

+149
-50
lines changed

15 files changed

+149
-50
lines changed
 

‎.gitmodules

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,7 @@
66
path = assets
77
url = https://github.com/PosetMage/jekyll_assets.git
88
branch = main
9+
[submodule "_layouts/page"]
10+
path = _layouts/page
11+
url = https://github.com/PosetMage/jekyll_layouts.git
12+
branch = main

‎About/index.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,20 @@
44

55
![LangGraph-GUI](/cover.webp)
66

7+
## Docker Compose
8+
To run LangGraph-GUI using Docker Compose, refer to the detailed instructions available in the [LangGraph-GUI Docker Compose Setup](https://github.com/LangGraph-GUI/LangGraph-GUI?tab=readme-ov-file#getting-started).
9+
710
## Components
811

912
LangGraph-GUI comprises the following main components:
1013

11-
- [**Frontend**](https://github.com/LangGraph-GUI/LangGraph-GUI-frontend): The default frontend is built with ReactFlow, providing an intuitive interface for graph editing.
14+
- **Frontend**: The default frontend is built with ReactFlow, providing an intuitive interface for graph editing.
1215
- for more info, please view [Frontend](/Frontend)
13-
- [**Backend**](https://github.com/LangGraph-GUI/LangGraph-GUI-backend): The backend is implemented using Flask, offering a robust and scalable server-side solution.
16+
- **Backend**: The backend is implemented using Flask, offering a robust and scalable server-side solution.
1417
- for more info, please view [Backend](/Backend)
1518
- AI-end
1619
- For running local language models with Ollama AI service, we recommend using NVIDIA Docker.
1720

18-
19-
## Docker COmpose
20-
To run LangGraph-GUI using Docker Compose, refer to the detailed instructions available in the [LangGraph-GUI repository](https://github.com/LangGraph-GUI/LangGraph-GUI).
21-
2221
## Electron wrapper
2322

2423
For those who prefer a desktop application, we also provide an [Electron wrapper](https://github.com/LangGraph-GUI/LangGraph-GUI?tab=readme-ov-file#electron-wrapper).

‎Frontend/Graph.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: frontend
3+
4+
---
5+
6+
# GUI Graph
7+
8+
## Explanation
9+
10+
#### Start Node
11+
A graph(json) only have one start node, this will mapping to LangGraph START
12+
13+
![](images/start.webp)
14+
15+
#### Step Node
16+
Step Node will mapping to LangGraph add_node, you can drag edge from left node(right port) to right node(left port)
17+
18+
![](images/step.webp)
19+
20+
if you drag two node toward to each other, can create cycle.
21+
22+
#### Step Node with tool
23+
Step node fill tool will call function, the tool definition need a tool node
24+
25+
![](images/use_tool.webp)
26+
27+
#### Tool Node
28+
Tool node need write real python function code, and need `@tool` decorator like LangChain Custom Tools
29+
30+
![](images/tool.webp)
31+
32+
#### Contition Node
33+
CONDITION node will mapping to LangGraph conditional_edge
34+
35+
* green edge is true case path
36+
* red edge is false case path
37+
38+
![](images/condition.webp)
39+
40+
## Other Resource
41+
*If you want to learn more about LangGraph, we have LangGraph for dummy : [LangGraph-learn](https://github.com/LangGraph-GUI/LangGraph-learn)*
42+

‎Frontend/Run.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
layout: frontend
3+
4+
---
5+
6+
# Run Graph
7+
This will Run graph.json on server.
8+
That is, you need upload graph.json first.
9+
10+
![](./images/run.webp)
11+
12+
## Run
13+
Execute graph.json into LangGraph with Ollama.
14+
After Run, recommand download files.
15+
16+
## Stop
17+
To terminal remote running server. (Currently, many bugs. If stuck, plese restart docker compose)
18+
19+
## Cancel
20+
Leave run menu
21+
22+
## Text Space
23+
Show infomation when server running

‎Frontend/UI.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
layout: frontend
3+
4+
---
5+
6+
7+
# UI
8+
9+
There are several buttoms
10+
![](./images/button.webp)
11+
12+
## New
13+
14+
New will clean the canvas.
15+
16+
## Save
17+
18+
Save the graph into json to your computer.
19+
20+
## Load
21+
Read the graph json from your computer.
22+
23+
## Run
24+
Run graph.json on server, for more info, see [Run](./Run)
25+
26+
## Upload
27+
a file to server env, for Run.
28+
* upload graph.json for Run on server
29+
* upload other file for workflow data
30+
31+
## Download
32+
download all files from server such generated files and log file

‎Frontend/images/button.webp

2.62 KB
Binary file not shown.

‎Frontend/images/run.webp

25.7 KB
Binary file not shown.

‎Frontend/index.md

Lines changed: 7 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,14 @@
1-
# LangGraph-GUI Frontend
1+
---
2+
layout: frontend
23

4+
---
35

4-
![](https://raw.githubusercontent.com/LangGraph-GUI/LangGraph-GUI-frontend/main/cover.webp)
56

6-
LangGraph-GUI is a user-friendly interface for managing and visualizing Node-Edge workflows with LangGraph. It supports creating, editing, and running workflows locally using language models by Ollama.
7+
# About Frontend
78

8-
This is node-edge based gui will export to json as saved graph. To execute json by LangGraph, you need to run [LangGraph-GUI-backend](https://github.com/LangGraph-GUI/LangGraph-GUI-backend)
9+
This is node-edge based gui will export to json as saved graph.
910

10-
*This is LangGraph-GUI ReactFlow frontend, If you want to run in docker compose, see [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI)*
11-
12-
*If you want to learn more about LangGraph, we have LangGraph for dummy : [LangGraph-learn](https://github.com/LangGraph-GUI/LangGraph-learn)*
13-
14-
15-
16-
17-
## Explanation
18-
19-
#### Start Node
20-
A graph(json) only have one start node, this will mapping to LangGraph START
21-
22-
![](images/start.webp)
23-
24-
#### Step Node
25-
Step Node will mapping to LangGraph add_node, you can drag edge from left node(right port) to right node(left port)
11+
![](/cover.webp)
2612

27-
![](images/step.webp)
28-
29-
if you drag two node toward to each other, can create cycle.
30-
31-
#### Step Node with tool
32-
Step node fill tool will call function, the tool definition need a tool node
33-
34-
![](images/use_tool.webp)
35-
36-
#### Tool Node
37-
Tool node need write real python function code, and need `@tool` decorator like LangChain Custom Tools
38-
39-
![](images/tool.webp)
40-
41-
#### Contition Node
42-
CONDITION node will mapping to LangGraph conditional_edge
43-
44-
* green edge is true case path
45-
* red edge is false case path
13+
*This is LangGraph-GUI ReactFlow frontend, If you want to run in docker compose, see [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI)*
4614

47-
![](images/condition.webp)

‎Frontend/outline.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<h2>Frontend</h2>
2+
3+
<a href="/Frontend/">About</a></br>
4+
<a href="/Frontend/UI">UI</a></br>
5+
<a href="/Frontend/Graph">Graph</a></br>
6+
<a href="/Frontend/Run">Run</a></br>

‎Others/index.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,8 @@
22

33
If you want to learn more about LangGraph, we also have [learning LangGraph for dummy](https://github.com/LangGraph-GUI/LangGraph-learn)
44

5-
## Side project
5+
## deprecated projects
6+
7+
We have Qt version: [LangGraph-GUI-Qt](https://github.com/LangGraph-GUI/LangGraph-GUI-Qt)
8+
69
We also have Qt version of [CrewAI-GUI](https://github.com/LangGraph-GUI/CrewAI-GUI)

‎_config.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ defaults:
3131
scope:
3232
path: ""
3333
values:
34-
layout: "base"
34+
layout: "page/note/basic"
35+
3536

3637

3738
exclude:

‎_layouts/base.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525

2626
<div class="trigger">
2727
<a class="page-link" href="/About/">About</a>
28-
<a class="page-link" href="/Usage/">Usage</a>
2928
<a class="page-link" href="/Frontend/">Frontend</a>
3029
<a class="page-link" href="/Backend/">Backend</a>
3130
<a class="page-link" href="/Others/">Others</a>

‎_layouts/frontend.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
layout: base
3+
---
4+
5+
{% include sidebar.html%}
6+
7+
<script>
8+
document.addEventListener('DOMContentLoaded', function() {
9+
fetch('/Frontend/outline.html')
10+
.then(response => response.text())
11+
.then(data => {
12+
document.getElementById('outline').innerHTML = data;
13+
});
14+
});
15+
</script>
16+
17+

‎_layouts/page

Submodule page added at 3e348b5

‎index.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
---
2+
layout: base
3+
4+
---
5+
16
# LangGraph-GUI
27

38
Welcome to the LangGraph-GUI project documentation!
49

510
- To understand more about this project, visit the [About](/About) page.
6-
- For instructions on using the GUI frontend, check out the [Frontend](/Frontend) documentation.
11+
- For steps on using the GUI frontend, check out the [Frontend](/Frontend) documentation.
712
- To explore backend details, see the [Backend](/Backend) documentation.
813
- For additional resources and related side projects, visit the [Others](/Others) page.
914

0 commit comments

Comments
 (0)
Please sign in to comment.