Merge pull request #19 from zvictor/main

move `./assets` to .github project

.cursorrules

@@ -56,7 +56,7 @@ Agentic Coding should be a collaboration between Human System Design and Agent I
 
 3. **Utilities**: Based on the Flow Design, identify and implement necessary utility functions.
     - Think of your AI system as the brain. It needs a body—these *external utility functions*—to interact with the real world:
-        <div align="center"><img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/utility.png?raw=true" width="400"/></div>
+        <div align="center"><img src="https://github.com/the-pocket/.github/raw/main/assets/utility.png?raw=true" width="400"/></div>
 
         - Reading inputs (e.g., retrieving Slack messages, reading emails)
         - Writing outputs (e.g., generating reports, sending emails)
@@ -127,7 +127,7 @@ Agentic Coding should be a collaboration between Human System Design and Agent I
 
    - > **You'll likely iterate a lot!** Expect to repeat Steps 3–6 hundreds of times.
      >
-     > <div align="center"><img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/success.png?raw=true" width="400"/></div>
+     > <div align="center"><img src="https://github.com/the-pocket/.github/raw/main/assets/success.png?raw=true" width="400"/></div>
      {: .best-practice }
 
 8. **Reliability**  
@@ -244,7 +244,7 @@ A [100-line](https://github.com/the-pocket/PocketFlow/blob/main/pocketflow/__ini
 - **Agentic-Coding**: Intuitive enough for AI agents to help humans build complex LLM applications.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/meme.jpg?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/meme.jpg?raw=true" width="400"/>
 </div>
 
 ## Core Abstraction
@@ -259,7 +259,7 @@ We model the LLM workflow as a **Graph + Shared Store**:
 - [(Advanced) Parallel](./core_abstraction/parallel.md) nodes/flows handle I/O-bound tasks.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/abstraction.png" width="500"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/abstraction.png" width="500"/>
 </div>
 
 ## Design Pattern
@@ -274,7 +274,7 @@ From there, it’s easy to implement popular design patterns:
 - [(Advanced) Multi-Agents](./design_pattern/multi_agent.md) coordinate multiple agents.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/design.png" width="500"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/design.png" width="500"/>
 </div>
 
 ## Utility Function
@@ -794,7 +794,7 @@ nav_order: 1
 A **Node** is the smallest building block. Each Node has 3 steps `prep->exec->post`:
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/node.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/node.png?raw=true" width="400"/>
 </div>
 
 1. `prep(shared)`
@@ -964,7 +964,7 @@ nav_order: 1
 Agent is a powerful design pattern in which nodes can take dynamic actions based on the context.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/agent.png?raw=true" width="350"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/agent.png?raw=true" width="350"/>
 </div>
 
 ## Implement Agent with Graph
@@ -1122,7 +1122,7 @@ MapReduce is a design pattern suitable when you have either:
 and there is a logical way to break the task into smaller, ideally independent parts. 
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/mapreduce.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/mapreduce.png?raw=true" width="400"/>
 </div>
 
 You first break down the task using [BatchNode](../core_abstraction/batch.md) in the map phase, followed by aggregation in the reduce phase.
@@ -1192,7 +1192,7 @@ nav_order: 3
 For certain LLM tasks like answering questions, providing relevant context is essential. One common architecture is a **two-stage** RAG pipeline:
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/rag.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/rag.png?raw=true" width="400"/>
 </div>
 
 1. **Offline stage**: Preprocess and index documents ("building the index").
@@ -1475,7 +1475,7 @@ nav_order: 2
 Many real-world tasks are too complex for one LLM call. The solution is to **Task Decomposition**: decompose them into a [chain](../core_abstraction/flow.md) of multiple Nodes.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/workflow.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/workflow.png?raw=true" width="400"/>
 </div>
 
 > - You don't want to make each task **too coarse**, because it may be *too complex for one LLM call*.

README.md

@@ -1,6 +1,6 @@
 
 <div align="center">
-  <img src="./assets/title.png" width="600"/>
+  <img src="https://github.com/The-Pocket/.github/raw/main/assets/title.png" width="600"/>
 </div>
 
 
@@ -29,7 +29,7 @@ Pocket Flow is a [100-line](pocketflow/__init__.py) minimalist LLM framework
 Current LLM frameworks are bloated... You only need 100 lines for LLM Framework!
 
 <div align="center">
-  <img src="./assets/meme.jpg" width="400"/>
+  <img src="https://github.com/The-Pocket/.github/raw/main/assets/meme.jpg" width="400"/>
 
 
   |                | **Abstraction**          | **App-Specific Wrappers**                                      | **Vendor-Specific Wrappers**                                    | **Lines**       | **Size**    |
@@ -48,14 +48,14 @@ Current LLM frameworks are bloated... You only need 100 lines for LLM Framework!
 The [100 lines](pocketflow/__init__.py) capture the core abstraction of LLM frameworks: Graph!
 <br>
 <div align="center">
-  <img src="./assets/abstraction.png" width="900"/>
+  <img src="https://github.com/The-Pocket/.github/raw/main/assets/abstraction.png" width="900"/>
 </div>
 <br>
 
 From there, it's easy to implement popular design patterns like ([Multi-](https://the-pocket.github.io/PocketFlow/design_pattern/multi_agent.html))[Agents](https://the-pocket.github.io/PocketFlow/design_pattern/agent.html), [Workflow](https://the-pocket.github.io/PocketFlow/design_pattern/workflow.html), [RAG](https://the-pocket.github.io/PocketFlow/design_pattern/rag.html), etc.
 <br>
 <div align="center">
-  <img src="./assets/design.png" width="900"/>
+  <img src="https://github.com/The-Pocket/.github/raw/main/assets/design.png" width="900"/>
 </div>
 <br>
 ✨ Below are basic tutorials:
@@ -88,7 +88,7 @@ From there, it's easy to implement popular design patterns like ([Multi-](https:
 <br>
 <div align="center">
   <a href="https://youtu.be/Cf38Bi8U0Js" target="_blank">
-    <img src="./assets/tutorial.png" width="500" alt="IMAGE ALT TEXT" style="cursor: pointer;">
+    <img src="https://github.com/The-Pocket/.github/raw/main/assets/tutorial.png" width="500" alt="IMAGE ALT TEXT" style="cursor: pointer;">
   </a>
 </div>
 <br>

docs/core_abstraction/node.md

@@ -10,7 +10,7 @@ nav_order: 1
 A **Node** is the smallest building block. Each Node has 3 steps `prep->exec->post`:
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/node.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/node.png?raw=true" width="400"/>
 </div>
 
 1. `prep(shared)`

docs/design_pattern/agent.md

@@ -10,7 +10,7 @@ nav_order: 1
 Agent is a powerful design pattern in which nodes can take dynamic actions based on the context.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/agent.png?raw=true" width="350"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/agent.png?raw=true" width="350"/>
 </div>
 
 ## Implement Agent with Graph

docs/design_pattern/mapreduce.md

@@ -14,7 +14,7 @@ MapReduce is a design pattern suitable when you have either:
 and there is a logical way to break the task into smaller, ideally independent parts. 
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/mapreduce.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/mapreduce.png?raw=true" width="400"/>
 </div>
 
 You first break down the task using [BatchNode](../core_abstraction/batch.md) in the map phase, followed by aggregation in the reduce phase.

docs/design_pattern/rag.md

@@ -10,7 +10,7 @@ nav_order: 3
 For certain LLM tasks like answering questions, providing relevant context is essential. One common architecture is a **two-stage** RAG pipeline:
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/rag.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/rag.png?raw=true" width="400"/>
 </div>
 
 1. **Offline stage**: Preprocess and index documents ("building the index").

docs/design_pattern/workflow.md

@@ -10,7 +10,7 @@ nav_order: 2
 Many real-world tasks are too complex for one LLM call. The solution is to **Task Decomposition**: decompose them into a [chain](../core_abstraction/flow.md) of multiple Nodes.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/workflow.png?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/workflow.png?raw=true" width="400"/>
 </div>
 
 > - You don't want to make each task **too coarse**, because it may be *too complex for one LLM call*.

docs/guide.md

@@ -56,7 +56,7 @@ Agentic Coding should be a collaboration between Human System Design and Agent I
 
 3. **Utilities**: Based on the Flow Design, identify and implement necessary utility functions.
     - Think of your AI system as the brain. It needs a body—these *external utility functions*—to interact with the real world:
-        <div align="center"><img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/utility.png?raw=true" width="400"/></div>
+        <div align="center"><img src="https://github.com/the-pocket/.github/raw/main/assets/utility.png?raw=true" width="400"/></div>
 
         - Reading inputs (e.g., retrieving Slack messages, reading emails)
         - Writing outputs (e.g., generating reports, sending emails)
@@ -127,7 +127,7 @@ Agentic Coding should be a collaboration between Human System Design and Agent I
 
    - > **You'll likely iterate a lot!** Expect to repeat Steps 3–6 hundreds of times.
      >
-     > <div align="center"><img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/success.png?raw=true" width="400"/></div>
+     > <div align="center"><img src="https://github.com/the-pocket/.github/raw/main/assets/success.png?raw=true" width="400"/></div>
      {: .best-practice }
 
 8. **Reliability**  

docs/index.md

@@ -13,7 +13,7 @@ A [100-line](https://github.com/the-pocket/PocketFlow/blob/main/pocketflow/__ini
 - **Agentic-Coding**: Intuitive enough for AI agents to help humans build complex LLM applications.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/meme.jpg?raw=true" width="400"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/meme.jpg?raw=true" width="400"/>
 </div>
 
 
@@ -29,7 +29,7 @@ We model the LLM workflow as a **Graph + Shared Store**:
 - [(Advanced) Parallel](./core_abstraction/parallel.md) nodes/flows handle I/O-bound tasks.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/abstraction.png" width="500"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/abstraction.png" width="500"/>
 </div>
 
 ## Design Pattern
@@ -44,7 +44,7 @@ From there, it’s easy to implement popular design patterns:
 - [(Advanced) Multi-Agents](./design_pattern/multi_agent.md) coordinate multiple agents.
 
 <div align="center">
-  <img src="https://github.com/the-pocket/PocketFlow/raw/main/assets/design.png" width="500"/>
+  <img src="https://github.com/the-pocket/.github/raw/main/assets/design.png" width="500"/>
 </div>
 
 ## Utility Function