Updated Docs for Zetaforge WebPage (#264)

* Updated Docs for Zetaforge WebPage * grammatical fixes to Deploy-a-Pipeline * Update docs/deploy-a-pipeline.md --------- Co-authored-by: Jon Magoon <[email protected]>
zetane · Dec 16, 2024 · 5f0daed · 5f0daed
1 parent 815292a
commit 5f0daed
Show file tree

Hide file tree

Showing 29 changed files with 152 additions and 81 deletions.
diff --git a/docs/assemble-a-pipeline.md b/docs/assemble-a-pipeline.md
@@ -2,7 +2,7 @@
 
 A Pipeline is composed of Blocks. To construct a Pipeline, drag and drop Blocks into your workspace and connect the Blocks by adding links between the output of one Block and the input of the next Block. ZetaForge supports directed acyclic connections between the Blocks.
 
-![drag-drop-blocks-add-links.gif](assets%2Fdrag-drop-blocks-add-links.gif)
+![assemble-pipeline.gif](assets%2Fassemble-pipeline.gif)
 
 The changes made to the workspace are saved in `frontend/.cache`. When the first Block is added to an empty workspace, a new directory (`pipeline-${pipeline_id}`) will be created under `frontend/.cache` for the Pipeline representing the workspace. The information about the pipeline, such as the Blocks making the pipeline and the connections between them, is stored in a JSON file with the same name as the pipeline, i.e., `pipeline-${pipeline_id}.json`. Note that the `${pipeline_id}` is displayed at the top of the window in the ZetaForge app.
 
@@ -33,4 +33,4 @@ Finally, we add the Save Text Block to store the story GPT generated to a file a
 
 We run the Pipeline by clicking on the Run button at the top of the window. Here is a screenshot of the full Pipeline:
 
-![GPT Story Teller Pipeline](assets/gpt-storyteller-pipeline.png)
+![Super Resolution Pipeline](assets/Super-resolution.png)
diff --git a/docs/assets/Super-resolution.png b/docs/assets/Super-resolution.png
diff --git a/docs/assets/assemble-pipeline.gif b/docs/assets/assemble-pipeline.gif
diff --git a/docs/assets/block-editor.png b/docs/assets/block-editor.png
diff --git a/docs/assets/block-example.png b/docs/assets/block-example.png
diff --git a/docs/assets/canny-edge-mona-result.png b/docs/assets/canny-edge-mona-result.png
diff --git a/docs/assets/canny-edge-specs.png b/docs/assets/canny-edge-specs.png
diff --git a/docs/assets/compile-run-block-editor.gif b/docs/assets/compile-run-block-editor.gif
diff --git a/docs/assets/deploy-to-payload.gif b/docs/assets/deploy-to-payload.gif
diff --git a/docs/assets/deployed-payload.png b/docs/assets/deployed-payload.png
diff --git a/docs/assets/drop-a-block.gif b/docs/assets/drop-a-block.gif
diff --git a/docs/assets/executed-pipeline-button.png b/docs/assets/executed-pipeline-button.png
diff --git a/docs/assets/executed-pipelines.png b/docs/assets/executed-pipelines.png
diff --git a/docs/assets/import-files-folder.png b/docs/assets/import-files-folder.png
diff --git a/docs/assets/past-executions.png b/docs/assets/past-executions.png
diff --git a/docs/assets/remove-a-link.png b/docs/assets/remove-a-link.png
diff --git a/docs/assets/remove-block.png b/docs/assets/remove-block.png
diff --git a/docs/assets/rerun-pipeline.gif b/docs/assets/rerun-pipeline.gif
diff --git a/docs/assets/run-a-core-pipeline-example.gif b/docs/assets/run-a-core-pipeline-example.gif
diff --git a/docs/assets/run-test-example.png b/docs/assets/run-test-example.png
diff --git a/docs/assets/selected-executed-pipeline.png b/docs/assets/selected-executed-pipeline.png
diff --git a/docs/assets/user-interface-preview.png b/docs/assets/user-interface-preview.png
diff --git a/docs/assets/view-result-button.png b/docs/assets/view-result-button.png
diff --git a/docs/create-blocks.md b/docs/create-blocks.md
@@ -24,7 +24,7 @@ Parameter Blocks do not have any input nodes; instead, they have a UI element th
 the other hand, Compute Blocks have both input and output nodes. View Blocks have a small box on top that will visualize
 its input based on the implemented logic in that View Block.
 
-Each Block, regardless of its type, is saved in a directory named after the Block in `frontend/core/blocks`. However, 
+Each Block, regardless of its type, is saved in a directory named after the Block in `frontend/core/blocks`. However,
 the content of the directory representing a Block varies depending on its type.
 
 ### Components of Parameter Blocks
@@ -36,9 +36,9 @@ the structural information about a Block and is stored in `frontend/core/blocks/
 
 A directory representing a Compute Block should contain five files:
 
-1. `computations.py`: Includes (at least) `compute(args)` and `test(args)` functions. The `compute` function implements 
-the logic of the Block, while the `test` function is designed to test the compute function. The `compute` function 
-returns a dictionary with keys that match the output node names from the specs file.
+1. `computations.py`: Includes (at least) `compute(args)` and `test(args)` functions. The `compute` function implements
+   the logic of the Block, while the `test` function is designed to test the compute function. The `compute` function
+   returns a dictionary with keys that match the output node names from the specs file.
 
 2. `Dockerfile`: Describes the instructions to build a Docker image. This file should always include `COPY computations.py .`.
 
@@ -49,28 +49,30 @@ returns a dictionary with keys that match the output node names from the specs f
 5. `specs.json`: Includes the structural information about the Block.
 
 ### Components of View Blocks
+
 The role of View Blocks is to create and display visualizations for the computed Block outputs.
 View Blocks have the same five components as the Compute Blocks; i.e., `computations.py`, `Dockerfile`, `requirements.txt`,
 `run_test.py`, and `specs.json`. Using View Blocks, we create HTML-formatted visualizations that will be visualized
-on top of the View Block as the Pipeline runs. 
-
+on top of the View Block as the Pipeline runs.
 
 ## Creating Blocks
 
 To create a Block, use a template Block listed on the sidebar. You can drag and drop a template Block, such as
-`New Python`, and modify its components to build your own Block.
+`Denoising`, and modify its components to build your own Block.
 
 ![drop-a-block.gif](assets%2Fdrop-a-block.gif)
 
 ## Modifying Blocks with the Block Editor
 
 To make any modifications, click on the `</ >` icon to open the Block Editor sidebar on the right.
 
-To modify the compute or view logic, simply edit the `compute` function. You can add as many lines of code as you like to the 
-`computations.py` file. 
+To modify the compute or view logic, simply edit the `compute` function. You can add as many lines of code as you like to the
+`computations.py` file.
+
+[//]: # "You can also write a specific prompt to modify the code with the help of an AI agent, such as GPT-4."
 
-[//]: # (You can also write a specific prompt to modify the code with the help of an AI agent, such as GPT-4.)
 ### Block Templates
+
 The `computations.py` file should follow this template:
 
 ```python
@@ -101,15 +103,15 @@ def compute(in1,...):
     """
     Description
     """
-    
+
     html_template = """
     <!DOCTYPE html>
     <html>
-    ... 
+    ...
     <!-- Some html code... -->
     </html>
     """
-    
+
     unique_id = str(uuid.uuid4())
     html_path = f"viz_{unique_id}.html"
     in1_str = json.dumps(in1)
@@ -131,13 +133,14 @@ compute function should always be a dictionary with keys and values correspondin
 
 ### Saving Changes to Blocks
 
-You can save the changes you made to a Block by compiling that Block inside the Block Editor. Just look for the "compile
-Block files" button as shown below:
+You can save the changes you made to a Block by compiling that Block inside the Block Editor. Just follow instructions as shown
 
-![compile-run-block-editor.png](assets%2Fcompile-run-block-editor.png)
+![compile-run-block-editor.gif](assets%2Fcompile-run-block-editor.gif)
 
+Within the files section you can modify the code, and navigate to the `Test Block` section to compile and `run test` will run the `test` function inside the `computations.py` file
 
-The "compile files and run Block" button will compile the changes and run the test functions specified by the `test` 
-function inside the `computations.py` file.
+<!--
+The "compile files and run test" button will compile the changes and run the test functions specified by the `test`
+function inside the `computations.py` file. -->
 
-To learn more about the Block Editor, please refer to our [user interface guide](user-interface.md/#block-editor).  
+To learn more about the Block Editor, please refer to our [user interface guide](user-interface.md/#block-editor).
diff --git a/docs/deploy-a-pipeline.md b/docs/deploy-a-pipeline.md
@@ -1,3 +1,25 @@
 # Deploy a Pipeline
 
-Coming soon, if you can't wait [get in touch with us](https://zetane.com/contact-us)!
+After the creation or modification of a pipeline, our system stores the information of every previously executed pipelines. After some pipelines have been executed you will be able to navigate through all past pipelines executions, deploy an existing pipeline, and retrieve code examples to call the API for the deployed pipeline.
+
+# Steps to Deploy a Pipeline
+
+1. **Access Past Executions**
+   To begin, you would need to navigate to the past executions section in the interface. This section will display a lis of all the previously executed pipeline, both succesful and unsuccesful executions. To navigate to past executions click on the button as shown below:
+
+   ![executed-pipeline-button.png](assets%2Fexecuted-pipeline-button.png)
+
+   After clicking the button you should be presented with the list of previously executed pipelines as shown below:
+   ![executed-pipelines.png](assets%2Fexecuted-pipelines.png)
+
+2. **Locate your desired pipeline**
+   After the table has been displayed you can now browse through all the previously executed pipelines, and find the one you wish to deploy. Each row would contain information such as the `pipeline ID`, `Date Created`, `Last Execution`, `Host`, `Deployment status`, and `# of executions`. and upon selecting a desired pipeline, you can have access to more information such as the `execution status` refer to the image shown below :
+
+   ![selected-executed-pipeline.png](assets%2Fselected-executed-pipeline.png)
+
+3. **Deploy desired pipeline**
+   Once you have selected your desired pipeline, you can deploy it by simply clicking on the deploy button corresponding to it. The system would process the request, and update the deploy button to **Payload**
+   ![deploy-to-payload.gif](assets%2Fdeploy-to-payload.gif)
+4. **Retrieve Code Examples**
+   After succesfully deploying your pipeline, you can click the **Payload** button, and this will display code examples demonstrating how to call the API for your pipeline. You can utilize these examples to have them integrated into your applications.
+   ![deployed-payload.png](assets%2Fdeployed-payload.png)
diff --git a/docs/run-a-pipeline.md b/docs/run-a-pipeline.md
@@ -2,21 +2,21 @@
 
 Prior to running a Pipeline, you need to ensure that all the necessary Blocks are in the workspace and the links between
 Blocks have been correctly established. Also, when applicable, inputs should be provided. If you have made any changes
-to a Block, make sure to save and compile those changes before running the Pipeline. 
+to a Block, make sure to save and compile those changes before running the Pipeline.
 When everything is in place, run the Pipeline by
 clicking the `Run` button.
 
-![run-a-pipeline-example.gif](assets%2Frun-a-pipeline-example.gif)
+![run-a-core-pipeline-example.gif](assets%2Frun-a-core-pipeline-example.gif)
 
-Once the Pipeline begins running, you can review the logs by clicking on the `Log` button. When you run a Pipeline for 
-the first time, Docker images are built. After that, the containers are executed without rebuilding if 
+Once the Pipeline begins running, you can review the logs by clicking on the `Log` button. When you run a Pipeline for
+the first time, Docker images are built. After that, the containers are executed without rebuilding if
 no changes have been made. Therefore, the first time you build the Docker images usually takes more time.
 
 Upon running a Pipeline, a new directory named `history` is formed within the Pipeline directory under
-`frontend/.cache/pipeline-${pipeline_id}`. Within this directory, there is a unique subdirectory generated 
+`frontend/.cache/pipeline-${pipeline_id}`. Within this directory, there is a unique subdirectory generated
 for each run, identified by a distinct UUID. Each of these subdirectories contains folders for
 `files` and `logs`, where output files and log files are stored, respectively.
 
-Moreover, there's a `pipeline` folder including a `pipeline.json` file that outlines the Pipeline's structure 
+Moreover, there's a `pipeline` folder including a `pipeline.json` file that outlines the Pipeline's structure
 and connections between the Blocks. If the run is successful, a `results.json` file is created in the `results`
-directory, capturing detailed information about the Pipeline execution, including Block inputs and outputs.
+directory, capturing detailed information about the Pipeline execution, including Block inputs and outputs.
diff --git a/docs/run-your-first-pipeline.md b/docs/run-your-first-pipeline.md
@@ -4,11 +4,11 @@ To experience ZetaForge in action, start by dragging and dropping a core pipelin
 
 Follow these step-by-step screenshots to help you run your first pipeline:
 
-1) Load a Pipeline:
-![canny-edge-pipeline.png](assets%2Fquick-start.gif)
-2) Click Run
-![click-run.png](assets%2Fclick-run.png)
-3) View the logs:
-![canny-edge-logs.png](assets%2Fcanny-edge-logs.png)
-4) See the results:
-![canny-edge-results.png](assets%2Fcanny-edge-results.png)
+1. Load and run Pipeline:
+   ![run-a-core-pipeline-example.gif](assets%2Frun-a-core-pipeline-example.gif)
+
+2. View the results:
+   ![view-result-button.png](assets%2Fview-result-button.png)
+
+3. Display results:
+   ![canny-edge-mona-result.png](assets%2Fcanny-edge-mona-result.png)