doc

.gitmodules

@@ -6,3 +6,7 @@
 	path = assets
 	url = https://github.com/PosetMage/jekyll_assets.git
 	branch = main
+[submodule "_layouts/page"]
+	path = _layouts/page
+	url = https://github.com/PosetMage/jekyll_layouts.git
+	branch = main

About/index.md

@@ -4,21 +4,20 @@
 
 ![LangGraph-GUI](/cover.webp)
 
+## Docker Compose
+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).
+
 ## Components
 
 LangGraph-GUI comprises the following main components:
 
-- [**Frontend**](https://github.com/LangGraph-GUI/LangGraph-GUI-frontend): The default frontend is built with ReactFlow, providing an intuitive interface for graph editing.
+- **Frontend**: The default frontend is built with ReactFlow, providing an intuitive interface for graph editing.
   - for more info, please view [Frontend](/Frontend)
-- [**Backend**](https://github.com/LangGraph-GUI/LangGraph-GUI-backend): The backend is implemented using Flask, offering a robust and scalable server-side solution.
+- **Backend**: The backend is implemented using Flask, offering a robust and scalable server-side solution.
   - for more info, please view [Backend](/Backend)
 - AI-end
   - For running local language models with Ollama AI service, we recommend using NVIDIA Docker. 
 
-
-## Docker COmpose
-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).
-
 ## Electron wrapper
 
 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

@@ -0,0 +1,42 @@
+---
+layout: frontend
+
+---
+
+# GUI Graph
+
+## Explanation
+
+#### Start Node
+A graph(json) only have one start node, this will mapping to LangGraph START
+
+![](images/start.webp)
+
+#### Step Node
+Step Node will mapping to LangGraph add_node, you can drag edge from left node(right port) to right node(left port)
+
+![](images/step.webp)
+
+if you drag two node toward to each other, can create cycle.
+
+#### Step Node with tool
+Step node fill tool will call function, the tool definition need a tool node
+
+![](images/use_tool.webp)
+
+#### Tool Node
+Tool node need write real python function code, and need `@tool` decorator like LangChain Custom Tools
+
+![](images/tool.webp)
+
+#### Contition Node
+CONDITION node will mapping to LangGraph conditional_edge
+
+* green edge is true case path
+* red edge is false case path
+
+![](images/condition.webp)
+
+## Other Resource
+*If you want to learn more about LangGraph, we have LangGraph for dummy : [LangGraph-learn](https://github.com/LangGraph-GUI/LangGraph-learn)*
+

Frontend/Run.md

@@ -0,0 +1,23 @@
+---
+layout: frontend
+
+---
+
+# Run Graph
+This will Run graph.json on server.
+That is, you need upload graph.json first.
+
+![](./images/run.webp)
+
+## Run
+Execute graph.json into LangGraph with Ollama.
+After Run, recommand download files.
+
+## Stop
+To terminal remote running server. (Currently, many bugs. If stuck, plese restart docker compose)
+
+## Cancel
+Leave run menu
+
+## Text Space
+Show infomation when server running

Frontend/UI.md

@@ -0,0 +1,32 @@
+---
+layout: frontend
+
+---
+
+
+# UI
+
+There are several buttoms  
+![](./images/button.webp)
+
+## New
+
+New will clean the canvas.
+
+## Save
+
+Save the graph into json to your computer.
+
+## Load
+Read the graph json from your computer.
+
+## Run
+Run graph.json on server, for more info, see [Run](./Run)
+
+## Upload 
+a file to server env, for Run.
+* upload graph.json for Run on server
+* upload other file for workflow data
+
+## Download
+download all files from server such generated files and log file

Frontend/index.md

@@ -1,47 +1,14 @@
-# LangGraph-GUI Frontend
+---
+layout: frontend
 
+---
 
-![](https://raw.githubusercontent.com/LangGraph-GUI/LangGraph-GUI-frontend/main/cover.webp)
 
-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.
+# About Frontend
 
-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)
+This is node-edge based gui will export to json as saved graph.
 
-*This is LangGraph-GUI ReactFlow frontend, If you want to run in docker compose, see [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI)*
-
-*If you want to learn more about LangGraph, we have LangGraph for dummy : [LangGraph-learn](https://github.com/LangGraph-GUI/LangGraph-learn)*
-
-
-
-
-## Explanation
-
-#### Start Node
-A graph(json) only have one start node, this will mapping to LangGraph START
-
-![](images/start.webp)
-
-#### Step Node
-Step Node will mapping to LangGraph add_node, you can drag edge from left node(right port) to right node(left port)
+![](/cover.webp)
 
-![](images/step.webp)
-
-if you drag two node toward to each other, can create cycle.
-
-#### Step Node with tool
-Step node fill tool will call function, the tool definition need a tool node
-
-![](images/use_tool.webp)
-
-#### Tool Node
-Tool node need write real python function code, and need `@tool` decorator like LangChain Custom Tools
-
-![](images/tool.webp)
-
-#### Contition Node
-CONDITION node will mapping to LangGraph conditional_edge
-
-* green edge is true case path
-* red edge is false case path
+*This is LangGraph-GUI ReactFlow frontend, If you want to run in docker compose, see [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI)*
 
-![](images/condition.webp)

Frontend/outline.html

@@ -0,0 +1,6 @@
+<h2>Frontend</h2>
+
+<a href="/Frontend/">About</a></br>
+<a href="/Frontend/UI">UI</a></br>
+<a href="/Frontend/Graph">Graph</a></br>
+<a href="/Frontend/Run">Run</a></br>

Others/index.md

@@ -2,5 +2,8 @@
 
 If you want to learn more about LangGraph, we also have [learning LangGraph for dummy](https://github.com/LangGraph-GUI/LangGraph-learn)
 
-## Side project
+## deprecated projects
+
+We have Qt version: [LangGraph-GUI-Qt](https://github.com/LangGraph-GUI/LangGraph-GUI-Qt)
+
 We also have Qt version of [CrewAI-GUI](https://github.com/LangGraph-GUI/CrewAI-GUI)

_config.yml

@@ -31,7 +31,8 @@ defaults:
     scope:
       path: ""
     values:
-      layout: "base"
+      layout: "page/note/basic"
+
 
 
 exclude:

_layouts/base.html

@@ -25,7 +25,6 @@
 
             <div class="trigger">
               <a class="page-link" href="/About/">About</a>
-              <a class="page-link" href="/Usage/">Usage</a>
               <a class="page-link" href="/Frontend/">Frontend</a>
               <a class="page-link" href="/Backend/">Backend</a>
               <a class="page-link" href="/Others/">Others</a>

_layouts/frontend.html

@@ -0,0 +1,17 @@
+---
+layout: base
+---
+
+{% include sidebar.html%}
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('/Frontend/outline.html')
+      .then(response => response.text())
+      .then(data => {
+        document.getElementById('outline').innerHTML = data;
+      });
+  });
+</script>
+
+

index.md

@@ -1,9 +1,14 @@
+---
+layout: base
+
+---
+
 # LangGraph-GUI
 
 Welcome to the LangGraph-GUI project documentation!
 
 - To understand more about this project, visit the [About](/About) page.
-- For instructions on using the GUI frontend, check out the [Frontend](/Frontend) documentation.
+- For steps on using the GUI frontend, check out the [Frontend](/Frontend) documentation.
 - To explore backend details, see the [Backend](/Backend) documentation.
 - For additional resources and related side projects, visit the [Others](/Others) page.