Docs: update screenshots with new UI changes (#4579)

* remove-images

* logs-pane

* logs

* more-logs

* langsmith-langwatch

* guides-folder

* quickstart

* follow-image

* getting-started-folder

* share-store-change

* workspace-old-images

* component-folder

* deployment-folder

* configuration-folder

* delete-venv

* favicon-footer-header

* favicon-bw-and-replace-gif

* docs: Update prerequisites and terminology in Getting Started and Workspace documentation

* docs: Update terminology from "New Project" to "New Flow" in starter project documentation

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* docs: Update terminology from "project" to "flow" in starter project documentation

* docs: Update terminology from "project" to "flow" in starter project documentation

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

docs/docs/Components/components-custom-components.md

@@ -90,8 +90,6 @@ class CustomComponent(Component):
 8. Click **Check & Save** to confirm your component works.
 You now have an operational custom component.
 
-![](./238089171.png)
-
 
 ## Add inputs and modify output methods
 
@@ -161,8 +159,6 @@ Since the component outputs a `Message`, you can wire it into a chat and pass me
 
 Your Custom Component accepts the Chat Input message through `MessageTextInput`, fills in the variables with the `process_inputs` method, and finally passes the message `User Username (Age: 49, Gender: Male) sent the following special message: Hello!` to Chat Output.
 
-![](./custom-component-chat.png)
-
 By defining inputs this way, Langflow can automatically handle the validation and display of these fields in the user interface, making it easier to create robust and user-friendly custom components.
 
 All of the types detailed above derive from a general class that can also be accessed through the generic `Input` class.
@@ -427,8 +423,6 @@ The component performs basic text analysis, including character count and senten
 
 Since the component inputs and outputs a `Message`, you can wire the component into a chat and see how the basic custom component logic interacts with your input.
 
-![](./custom-component-inputs-chat.png)
-
 ## Create a Custom Component with Multiple Outputs {#6f225be8a142450aa19ee8e46a3b3c8c}
 
 ---

docs/docs/Components/components-overview.md

@@ -10,7 +10,7 @@ A component is a single building block within a flow. It consists of inputs, o
 During the flow creation process, you will notice handles (colored circles) attached to one or both sides of a component. These handles use distinct colors to indicate the types of inputs and outputs that can be interconnected. Hover over a handle to see connection details.
 
 
-![](./565424296.png)
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
 
 
 On the top right corner of the component, you'll find the a play button to run a component. Once it runs, a status icon appears and you can hover over that to visualize success or error messages. Start interacting with your AI by clicking the **Playground** at the bottom right of the workspace.
@@ -22,14 +22,14 @@ On the top right corner of the component, you'll find the a play button to run a
 Each component is unique, but they all have a menu bar at the top that looks something like this.
 
 
-![](./938852908.png)
+<img src="/img/openai-model-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
 
 
 It consists of options such as:
 
-- **Code** — displays the component's Python code. You can modify the code and save it.
-- **Advanced** — See and adjust all parameters of a component.
-- **Freeze** — After a component runs, lock its previous output state to prevent it from re-running.
+- **Code** — Modify the component's Python code and save it.
+- **Controls** — Adjust all parameters of a component.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
 
 Click **All** (the "..." button) to see all options.
 
@@ -40,9 +40,6 @@ Click **All** (the "..." button) to see all options.
 Langflow includes an output visualizer for components that opens a pop-up screen. This allows you to easily inspect and monitor transmissions between components, providing instant feedback on your workflows.
 
 
-![](./987204819.png)
-
-
 ## Advanced settings {#b6430d4903df44f0ba4618a558c83d7b}
 
 
@@ -66,17 +63,9 @@ Multiple components can be grouped into a single component for reuse. This is us
 4. Double-click the name and description to change them.
 5. Save your grouped component to in the sidebar for later use!
 
-[group video here]
-
-
 ## Component version {#887fd587589448dc8c27336d1c235b9b}
 
-
 A component's state is stored in a database, while sidebar components are like starter templates. As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity.
 
 
 The component will keep the version number it was initialized to the workspace with. Click the **Update Component** icon (exclamation mark) to bring the component up to the `latest` version. This will change the code of the component in place so you can validate that the component was updated by checking its Python code before and after updating it.
-
-
-![](./263391508.png)
-

docs/docs/Configuration/configuration-auto-saving.md

@@ -4,48 +4,45 @@ sidebar_position: 6
 slug: /configuration-auto-save
 ---
 
-Langflow currently supports both manual and auto-saving functionality.
+Langflow supports both manual and auto-saving functionality.
 
 ## Auto-saving {#auto-saving}
 
-When Langflow is in Auto-saving mode, all changes are saved automatically. Auto-save progress is indicated in the left side of the top bar: when a flow is being saved, a Loading icon indicates that the flow is being saved in the database.
+When Langflow is in auto-saving mode, all changes are saved automatically. Auto-save progress is indicated in the left side of the top bar.
 
-![](./saving-header.png)
+* When a flow is being saved, a loading icon indicates that the flow is being saved in the database.
 
-If you try to exit the flow page before auto-save completes, a dialog will appear to confirm you want to exit before the flow has saved.
+* If you try to exit the flow page before auto-save completes, you are prompted to confirm you want to exit before the flow has saved.
 
-![](./flow-saving.png)
+* When the flow has successfully saved, click **Exit**.
 
-When the flow has successfully saved, you can click the 'Exit' button.
+## Disable auto-saving {#environment}
 
-![](./flow-saved.png)
+To disable auto-saving, 
 
-## Manual Saving {#manual-saving}
-
-When auto-saving is disabled, you need to manually save your flow when making changes. You can still run the flow without saving, for testing purposes.
-
-If you make any changes and Langflow detects that the saved flow is different from the current flow, a Save button will be enabled and the last time saved will appear at the left side of the topbar. To save the flow, click the Save button, or hit Ctrl+S or Command+S.
-
-![](./manual-save-button.png)
-
-If you try to exit after making changes and not saving, a confirmation dialog will appear. You can choose to exit anyway or save and exit.
-
-![](./flow-unsaved.png)
-
-## Disable Auto Saving {#environment}
-
-In Langflow, all changes made in the flows are saved automatically. However, you may prefer to disable this functionality, if you want a quick way to prototype and test changes before they are actually saved to the database.
-
-If you wish to disable this functionality, you can run Langflow with an environment variable to tell Langflow to use manual saving.
-
-```shell
-langflow --no-auto-saving
-# or
-python -m langflow --no-auto-saving
-```
-
-If you installed the local version of Langflow, you can set an environment variable and load it automatically by inserting this line into the `.env` file inside the directory.
+1. Set an environment variable in your `.env` file.
 
 ```env
 LANGFLOW_AUTO_SAVING=false
 ```
+
+2. Start Langflow with the values from your `.env` file.
+
+```shell
+python -m langflow run --env-file .env
+```
+
+Alternatively, disable auto-saving by passing the `--no-auto-saving` flag at startup.
+
+```shell
+python -m langflow --no-auto-saving
+```
+
+## Save a flow manually {#manual-saving}
+
+When auto-saving is disabled, you will need to manually save your flow when making changes.
+
+To manually save your flow, click the **Save** button or enter Ctrl+S or Command+S.
+
+If you try to exit after making changes and not saving, a confirmation dialog appears.
+

docs/docs/Configuration/configuration-global-variables.md

@@ -41,8 +41,6 @@ Because values are encrypted, you can't view the actual values of your global va
 In **Settings > Global Variables**, the **Value** column shows the encrypted hash for **Generic** type variables, and shows nothing for **Credential** type variables.
 :::
 
-<ReactPlayer controls url="https://youtu.be/RedPOCsYNAM" />
-
 ## Edit a global variable
 
 1. In the Langflow UI, click your profile icon, and then select **Settings**.

docs/docs/Deployment/cloud_deploy.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
-    <polygon points="20.39 18.24 20.39 8 11.52 2.89 11.52 7.55 16.37 10.32 16.35 15.91 20.39 18.24" style="fill:#4285f4"/>
-    <polygon points="14.79 19.86 14.79 11.23 7.33 6.92 7.33 10.94 11.34 13.23 11.32 17.85 14.79 19.86" style="fill:#669df6"/>
-    <polygon points="9.76 21.15 9.76 14.14 3.69 10.64 3.69 14 6.86 15.81 6.84 19.47 9.76 21.15" style="fill:#aecbfa"/>
-</svg>

docs/docs/Deployment/deployment-gcp.md

@@ -18,7 +18,7 @@ The script will guide you through setting up a Debian-based VM with the Langflow
 
 1. Click below to launch Cloud Shell.
 
-[![GCP Deploy](./cloud_deploy.svg) Deploy to Google Cloud](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial.md)
+[![GCP Deploy](/logos/cloud_deploy.svg) Deploy to Google Cloud](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial.md)
 
 2. Click **Trust repo**. Some gcloud commands might not run in an ephemeral Cloud Shell environment.
 3. Click **Start** and follow the tutorial to deploy Langflow.

docs/docs/Deployment/deployment-hugging-face-spaces.md

@@ -1,5 +1,5 @@
 ---
-title: 🤗 Spaces
+title: HuggingFace Spaces
 sidebar_position: 0
 slug: /deployment-hugging-face-spaces
 ---
@@ -24,8 +24,7 @@ HuggingFace provides a great alternative for running Langflow in their Spaces en
 	- **Visibility Settings**: Choose between Public or Private visibility for your Space.
 	- After setting these parameters, click on **Duplicate Space** to initiate the setup.
 
-![](./257215214.png)
-
+![](/img/hugging-face-deployment.png)
 
 3. **Complete Installation**: The duplication and setup process begins immediately after you click **Duplicate Space**. Once completed, you will be automatically redirected to the main page of your new Space.
 

docs/docs/Deployment/deployment-railway.md

@@ -14,10 +14,8 @@ Deploying Langflow to Railway involves a few simple steps:
 
 1. **Click the Button Below**: Start by clicking the deployment button provided below. This will redirect you to the Railway platform.
 
-   [![Deploy on Railway](./railway-deploy.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
+   [![Deploy on Railway](/logos/railway-deploy.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
 
 2. **Deploy**: Proceed to deploy your Langflow instance. Click Deploy Now to deploy the instance. Railway will handle the rest, including setting up the infrastructure, deploying the Langflow instance, and starting the application.
 
-   ![](./1098199232.png)
-
 By following these steps, your Langflow instance will be successfully deployed on Railway.

docs/docs/Deployment/deployment-render.md

@@ -14,15 +14,11 @@ Deploying Langflow to Render is a straightforward process that can be completed
 
 1. **Click the Button Below**: Start by clicking the deployment button provided below. This will redirect you to the Render platform.
 
-   [![Deploy to Render](./render-deploy.svg)](https://render.com/deploy?repo=https%3A%2F%2Fgithub.com%2Flangflow-ai%2Flangflow%2Ftree%2Fdev)
+   [![Deploy to Render](/logos/render-deploy.svg)](https://render.com/deploy?repo=https%3A%2F%2Fgithub.com%2Flangflow-ai%2Flangflow%2Ftree%2Fdev)
 
 2. **Select the Blueprint Configuration**: Once on the Render platform, you will be prompted to provide a blueprint name and to select the branch for your `render.yaml` file in Langflow. This configuration file includes all the necessary settings and resources to deploy Langflow in Render. The default is `main`.
 3. The `render.yaml` file specifies a `standard` Render instance, because Langflow requires at least 2 GB of RAM to run. This may require a credit card to sign up. Review the pricing details on the Render platform to understand any costs involved before proceeding. If you need to change your plan later, from the Render dashboard, go to **Settings** > **Instance Type**.
 
-   ![](./render-deploy-plan.png)
-
 4. Click **Deploy Blueprint** to deploy Langflow. Render will handle the rest, including setting up the database, deploying the Langflow instance, and starting the application.
 
-   ![](./render-deployed-overview.png)
-
 By following these steps, your Langflow instance will be successfully deployed on Render.

docs/docs/Deployment/render-deploy.svg

@@ -1,6 +0,0 @@
-<svg width="153" height="40" viewBox="0 0 153 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="153" height="40" fill="#8A05FF"/>
-<path d="M17.5001 21L18.2051 21.705L19.5001 20.415V26.5H20.5001V20.415L21.7951 21.705L22.5001 21L20.0001 18.5L17.5001 21Z" fill="white"/>
-<path d="M23.7501 23H23.5001V22H23.7501C24.3468 22.0239 24.9286 21.8097 25.3674 21.4047C25.8062 20.9996 26.0662 20.4368 26.0901 19.84C26.1139 19.2433 25.8998 18.6615 25.4947 18.2227C25.0896 17.7838 24.5268 17.5239 23.9301 17.5H23.5001L23.4501 17.09C23.3391 16.2483 22.926 15.4755 22.2876 14.9157C21.6492 14.3559 20.8291 14.0473 19.9801 14.0473C19.131 14.0473 18.3109 14.3559 17.6725 14.9157C17.0341 15.4755 16.621 16.2483 16.5101 17.09L16.5001 17.5H16.0701C15.4733 17.5239 14.9105 17.7838 14.5054 18.2227C14.1003 18.6615 13.8862 19.2433 13.9101 19.84C13.9339 20.4368 14.1939 20.9996 14.6327 21.4047C15.0715 21.8097 15.6533 22.0239 16.2501 22H16.5001V23H16.2501C15.4483 22.995 14.6766 22.6937 14.0835 22.1541C13.4905 21.6145 13.1178 20.8747 13.0371 20.077C12.9565 19.2792 13.1736 18.4798 13.6467 17.8325C14.1198 17.1851 14.8155 16.7355 15.6001 16.57C15.8159 15.5633 16.3705 14.661 17.1712 14.0138C17.9719 13.3665 18.9704 13.0134 20.0001 13.0134C21.0297 13.0134 22.0282 13.3665 22.8289 14.0138C23.6296 14.661 24.1842 15.5633 24.4001 16.57C25.1846 16.7355 25.8803 17.1851 26.3534 17.8325C26.8265 18.4798 27.0436 19.2792 26.963 20.077C26.8823 20.8747 26.5096 21.6145 25.9166 22.1541C25.3235 22.6937 24.5518 22.995 23.7501 23Z" fill="white"/>
-<path d="M39.0632 25H35.4372V14.99H39.0632C41.8212 14.99 43.5152 16.782 43.5152 20.002C43.5152 23.222 41.8212 25 39.0632 25ZM36.6972 23.88H39.0632C41.6112 23.88 42.1992 21.962 42.1992 20.002C42.1992 18.042 41.6112 16.11 39.0632 16.11H36.6972V23.88ZM51.4309 21.164C51.4309 21.374 51.4309 21.612 51.4169 21.724H45.8309C45.8589 22.984 46.5589 24.244 48.1409 24.244C49.5409 24.244 50.0729 23.306 50.1989 22.802H51.3329C50.9689 24.132 49.9609 25.21 48.1269 25.21C45.8729 25.21 44.6549 23.586 44.6549 21.416C44.6549 19.134 46.0129 17.65 48.1269 17.65C50.2129 17.65 51.4309 19.078 51.4309 21.164ZM45.8309 20.744H50.2409C50.2409 19.568 49.4009 18.616 48.0709 18.616C46.8389 18.616 45.9009 19.498 45.8309 20.744ZM56.1898 17.664C57.9818 17.664 59.4098 19.078 59.4098 21.43C59.4098 23.782 57.9818 25.196 56.1898 25.196C55.0418 25.196 54.3698 24.692 53.9498 24.076H53.9218V27.478H52.8018V17.86H53.9218V18.742H53.9498C54.3698 18.196 55.0418 17.664 56.1898 17.664ZM56.0778 24.216C57.5478 24.216 58.2338 22.83 58.2338 21.43C58.2338 20.03 57.5478 18.644 56.0778 18.644C54.7478 18.644 53.9218 19.75 53.9218 21.43C53.9218 23.11 54.7478 24.216 56.0778 24.216ZM61.9094 25H60.7894V14.99H61.9094V25ZM66.7855 25.21C64.6015 25.21 63.2855 23.656 63.2855 21.43C63.2855 19.204 64.6015 17.65 66.7855 17.65C68.9555 17.65 70.2715 19.204 70.2715 21.43C70.2715 23.656 68.9555 25.21 66.7855 25.21ZM66.7855 24.23C68.3815 24.23 69.0955 22.956 69.0955 21.43C69.0955 19.904 68.3815 18.63 66.7855 18.63C65.1755 18.63 64.4615 19.904 64.4615 21.43C64.4615 22.956 65.1755 24.23 66.7855 24.23ZM72.202 27.506C71.95 27.506 71.782 27.492 71.46 27.436V26.484C71.698 26.512 71.81 26.526 72.02 26.526C72.608 26.526 73.252 26.162 73.56 24.93L70.662 17.86H71.922L74.12 23.544H74.148L76.248 17.86H77.452L74.568 25.21C73.854 27.016 73.168 27.506 72.202 27.506ZM84.237 17.86V18.84H82.837V23.138C82.837 23.894 83.019 24.09 83.649 24.09C83.887 24.09 83.999 24.076 84.237 24.048V25C83.915 25.056 83.747 25.07 83.495 25.07C82.445 25.07 81.717 24.706 81.717 23.082V18.84H80.667V17.86H81.717V15.48H82.837V17.86H84.237ZM88.5095 25.21C86.3255 25.21 85.0095 23.656 85.0095 21.43C85.0095 19.204 86.3255 17.65 88.5095 17.65C90.6795 17.65 91.9955 19.204 91.9955 21.43C91.9955 23.656 90.6795 25.21 88.5095 25.21ZM88.5095 24.23C90.1055 24.23 90.8195 22.956 90.8195 21.43C90.8195 19.904 90.1055 18.63 88.5095 18.63C86.8995 18.63 86.1855 19.904 86.1855 21.43C86.1855 22.956 86.8995 24.23 88.5095 24.23ZM97.98 25H96.72V14.99H100.738C102.936 14.99 104.084 16.026 104.084 17.874C104.084 19.12 103.314 20.072 102.264 20.324V20.352C104.518 20.786 103.692 24.748 104.224 24.916V25H102.866C102.432 24.58 103.384 20.954 100.85 20.954H97.98V25ZM97.98 19.834H100.444C101.97 19.834 102.824 19.148 102.824 17.902C102.824 16.754 102.18 16.11 100.486 16.11H97.98V19.834ZM111.962 21.164C111.962 21.374 111.962 21.612 111.948 21.724H106.362C106.39 22.984 107.09 24.244 108.672 24.244C110.072 24.244 110.604 23.306 110.73 22.802H111.864C111.5 24.132 110.492 25.21 108.658 25.21C106.404 25.21 105.186 23.586 105.186 21.416C105.186 19.134 106.544 17.65 108.658 17.65C110.744 17.65 111.962 19.078 111.962 21.164ZM106.362 20.744H110.772C110.772 19.568 109.932 18.616 108.602 18.616C107.37 18.616 106.432 19.498 106.362 20.744ZM116.833 17.664C118.135 17.664 119.227 18.378 119.227 20.016V25H118.107V20.296C118.107 19.372 117.673 18.644 116.553 18.644C115.293 18.644 114.453 19.442 114.453 20.548V25H113.333V17.86H114.453V18.714H114.481C114.859 18.21 115.615 17.664 116.833 17.664ZM126.047 18.784V14.99H127.167V25H126.047V24.118H126.019C125.599 24.664 124.927 25.196 123.779 25.196C121.987 25.196 120.559 23.782 120.559 21.43C120.559 19.078 121.987 17.664 123.779 17.664C124.927 17.664 125.599 18.168 126.019 18.784H126.047ZM123.891 24.216C125.221 24.216 126.047 23.11 126.047 21.43C126.047 19.75 125.221 18.644 123.891 18.644C122.421 18.644 121.735 20.03 121.735 21.43C121.735 22.83 122.421 24.216 123.891 24.216ZM135.323 21.164C135.323 21.374 135.323 21.612 135.309 21.724H129.723C129.751 22.984 130.451 24.244 132.033 24.244C133.433 24.244 133.965 23.306 134.091 22.802H135.225C134.861 24.132 133.853 25.21 132.019 25.21C129.765 25.21 128.547 23.586 128.547 21.416C128.547 19.134 129.905 17.65 132.019 17.65C134.105 17.65 135.323 19.078 135.323 21.164ZM129.723 20.744H134.133C134.133 19.568 133.293 18.616 131.963 18.616C130.731 18.616 129.793 19.498 129.723 20.744ZM139.816 17.664C140.082 17.664 140.278 17.678 140.474 17.706V18.826C140.306 18.798 140.18 18.784 140.012 18.784C138.696 18.784 137.814 19.82 137.814 21.192V25H136.694V17.86H137.814V19.274H137.842C138.22 18.336 138.794 17.664 139.816 17.664Z" fill="white"/>
-</svg>

docs/docs/Getting-Started/getting-started-quickstart.md

@@ -9,25 +9,14 @@ slug: /getting-started-quickstart
 ## Prerequisites {#b5f154a3a1d242c7bdf57acf0a552732}
 
 
----
+* [Python 3.10 to 3.12](https://www.python.org/downloads/release/python-3100/) installed
+* [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) installed
+* Before installing Langflow, we recommend creating a virtual environment to isolate your Python dependencies with [venv](https://docs.python.org/3/library/venv.html) or [conda](https://anaconda.org/anaconda/conda)
 
-- [Python >=3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/)
-- [OpenAI API key](https://platform.openai.com/)
-- [Langflow installed and running](/getting-started-installation)
-
-## Basic Prompting {#67e7cd59d0fa43e3926bdc75134f7472}
+## Create the basic prompting flow
 
 
----
-
-
-### Create the basic prompting project {#c029603ddb1f42f5b28df92e58426ab3}
-
-
-1. From the Langflow dashboard, click **New Project**. 
-
-
-![](./1835734464.png)
+1. From the Langflow dashboard, click **New Flow**.
 
 
 2. Select **Basic Prompting**.
@@ -36,37 +25,41 @@ slug: /getting-started-quickstart
 3. The **Basic Prompting** flow is created.
 
 
-![](./487525520.png)
+![](/img/starter-flow-basic-prompting.png)
 
 
-This flow allows you to chat with the **OpenAI** component through the **Prompt** component. 
+This flow allows you to chat with the **OpenAI** component through the **Prompt** component.
 
+4. To examine the flow's **Prompt** component, click on the **Template** field of the **Prompt** component.
 
-Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.` This should be interesting...
+```plain
+Answer the user as if you were a pirate.
 
+User: {user_input}
 
-![](./690736575.png)
+Answer:
+```
 
+The **Template** instructs the LLM to accept `{user_input}` and `Answer the user as if you were a pirate.`.
 
-4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
+5. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
 
 	1. In the **Variable Name** field, enter `openai_api_key`.
 	2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
 	3. Click **Save Variable**.
 
-![](./1390293355.png)
 
+## Run the Basic Prompting flow {#ef0e8283bfb646f99bbb825462d8cbab}
 
-### Run {#ef0e8283bfb646f99bbb825462d8cbab}
-
-1. Click the **Playground** button on the control panel (bottom right side of the workspace). This is where you can interact with your AI.
+1. To open the **Playground** pane, click **Playground**.
+This is where you can interact with your AI.
 2. Type a message and press Enter. The bot should respond in a markedly piratical manner!
 
-### Modify the prompt for a different result {#dcea9df0cd51434db76717c78b1e9a94}
+## Modify the prompt for a different result {#dcea9df0cd51434db76717c78b1e9a94}
 
 1. To modify your prompt results, in the **Prompt** template, click the **Template** field. The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Hermione Granger.`
-3. Run the workflow again. The response will be markedly different.
+3. Run the workflow again. The response will be very different.
 
 ## Next steps {#63b6db6cb571489c86b3ae89051f1a4f}
 

docs/docs/Getting-Started/welcome-to-langflow.md

@@ -14,7 +14,7 @@ Langflow empowers developers to rapidly prototype and build AI applications with
 
 Langflow is an intuitive visual flow builder. This drag-and-drop interface allows developers to create complex AI workflows without writing extensive code. You can easily connect different components, such as prompts, language models, and data sources, to build sophisticated AI applications.
 
-![Langflow in action](./1160086633.gif)
+![Langflow in action](/img/playground-response.png)
 
 ## Use cases
 

docs/docs/Guides/guides-chat-memory.md

@@ -15,22 +15,21 @@ In any project, as long as there are [**Chat**](/components-io) being used, memo
 To see and access this history of messages, Langflow features a component called **Chat Memory**. It retrieves previous messages and outputs them in structured format or parsed.
 
 
-![](./403427222.png)
-
-
-To learn the basics about memory in Langflow, check out the [Memory Chatbot ](/starter-projects-memory-chatbot)starter example.
+To learn the basics about memory in Langflow, check out the [Memory Chatbot](/starter-projects-memory-chatbot) starter example.
 
 
 Memories can be visualized and managed directly from the **Playground**. You can edit and remove previous messages to inspect and validate the AI’s response behavior. You can remove or edit previous messages to get your models acting just right.
 
 
-![](./1988919422.png)
+![](/img/playground.png)
 
 
 Modifying these memories will influence the behavior of the chatbot responses, as long as an agent uses them. Here you have the ability to remove or edit previous messages, allowing them to manipulate and explore how these changes affect model responses.
 
+To modify chat memories, click your **Flow Name**, and then click **Logs**.
 
-![](./948333764.png)
+
+![](/img/logs.png)
 
 
 ## Session ID {#4ee86e27d1004e8288a72c633c323703}
@@ -42,20 +41,13 @@ Modifying these memories will influence the behavior of the chatbot responses, a
 Chat conversations store messages categorized by a `Session ID`. A a single flow can host multiple session IDs, and different flows can also share the same one.
 
 
-The **Chat Memory** component also retrieves message histories by `Session ID` which users can change in the advanced settings.
-
-
-![](./207457678.png)
-
-
- 
+The **Chat Memory** component also retrieves message histories by `Session ID`, which users can change in the component's **Controls** pane.
 
+![](/img/chat-input-controls-pane.png)
 
 By default, if the `Session ID`  value is empty, it is set to match the the same value as the `Flow ID`. 
 
-
 You can also display all messages stored across every flow and session by going to **Settings** > **Messages**.
 
-
-![](./1313358839.png)
+![](/img/settings-messages.png)
 

docs/docs/Integrations/integrations-langsmith.md

@@ -25,11 +25,9 @@ or export the environment variables in your terminal:
 
 `export LANGCHAIN_API_KEY="your-api-key"export LANGCHAIN_PROJECT="your-project-name"`
 
-1. Restart Langflow using `langflow run --env-file .env`
-2. Run any project and check the LangSmith dashboard for monitoring and observability.
+3. Restart Langflow using `langflow run --env-file .env`
+4. Run a project in Langflow.
+5. View the Langsmith dashboard for monitoring and observability.
 
-![](./965098683.png)
-
-
-![](./1641825585.png)
+![](/img/langsmith-dashboard.png)
 

docs/docs/Integrations/integrations-langwatch.md

@@ -32,11 +32,9 @@ or export it in your terminal:
 export LANGWATCH_API_KEY="your-api-key"
 ```
 
-1. Restart Langflow using `langflow run --env-file .env`
-2. Run any project and check the LangWatch dashboard for monitoring and observability.
+3. Restart Langflow using `langflow run --env-file .env`
+4. Run a project in Langflow.
+5. View the LangWatch dashboard for monitoring and observability.
 
-![](./505849097.png)
-
-
-![](./1503538843.png)
+![](/img/langwatch-dashboard.png)
 

docs/docs/Starter-Projects/starter-projects-basic-prompting.md

@@ -23,19 +23,10 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Basic Prompting {#1fae0e83ef08453fba017870d6d981bc}
+## Create the basic prompting flow {#19d5305239c841548a695e2bf7839e7a}
 
 
----
-
-
-### Create the basic prompting project {#19d5305239c841548a695e2bf7839e7a}
-
-
-1. From the Langflow dashboard, click **New Project**. 
-
-
-![](./1835734464.png)
+1. From the Langflow dashboard, click **New Flow**.
 
 
 2. Select **Basic Prompting**.
@@ -44,7 +35,7 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
 3. The **Basic Prompting** flow is created.
 
 
-![](./487525520.png)
+![](/img/starter-flow-basic-prompting.png)
 
 
 This flow allows you to chat with the **OpenAI** component through the **Prompt** component. 
@@ -53,24 +44,19 @@ This flow allows you to chat with the **OpenAI** component through the **Prom
 Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.` This should be interesting...
 
 
-![](./690736575.png)
-
-
 4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
 
 	1. In the **Variable Name** field, enter `openai_api_key`.
 	2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
 	3. Click **Save Variable**.
 
-![](./1390293355.png)
 
-
-### Run {#ce52f8e6b491452a9dfb069feb962eed}
+## Run the basic prompting flow {#ce52f8e6b491452a9dfb069feb962eed}
 
 1. Click the **Playground** button on the control panel (bottom right side of the workspace). This is where you can interact with your AI.
 2. Type a message and press Enter. The bot should respond in a markedly piratical manner!
 
-### Modify the prompt for a different result {#3ab045fcbe774c8fb3adc528f9042ba0}
+## Modify the prompt for a different result {#3ab045fcbe774c8fb3adc528f9042ba0}
 
 1. To modify your prompt results, in the **Prompt** template, click the **Template** field. The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Hermione Granger.`

docs/docs/Starter-Projects/starter-projects-blog-writer.md

@@ -4,9 +4,11 @@ sidebar_position: 1
 slug: /starter-projects-blog-writer
 ---
 
+Build a Blog Writer flow for a one-shot application using OpenAI.
 
+This flow extends the Basic Prompting flow with the **URL** and **Parse data** components that fetch content from multiple URLs and convert the loaded data into plain text.
 
-Build a blog writer with OpenAI that uses URLs for reference content.
+OpenAI uses this loaded data to generate a blog post, as instructed by the **Text input** component.
 
 
 ## Prerequisites {#899268e6c12c49b59215373a38287507}
@@ -17,43 +19,41 @@ Build a blog writer with OpenAI that uses URLs for reference content.
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Blog Writer {#ef6e7555a96d4cbab169fbd2d8578bdc}
 
+## Create the blog writer flow {#0c1a9c65b7d640f693ec3aad963416ff}
+
+1. From the Langflow dashboard, click **New Flow**.
+2. Select **Blog Writer**.
+3. The **Blog Writer** flow is created.
+
+![](/img/starter-flow-blog-writer.png)
+
+
+This flow creates a one-shot article generator with **Prompt**, **OpenAI**, and **Chat Output** components, augmented with reference content and instructions from the **URL** and **Text Input** components.
+
+The **URL** component extracts raw text and metadata from one or more web links.
+The **Parse Data** component converts the data coming from the **URL** component into plain text to feed the prompt.
+
+To examine the flow's prompt, click the **Template** field of the **Prompt** component.
+
+```plain
+Reference 1:
+
+{references}
 
 ---
 
+{instructions}
 
-### Create the Blog Writer project {#0c1a9c65b7d640f693ec3aad963416ff}
+Blog:
+```
 
-1. From the Langflow dashboard, click **New Project**.
-2. Select **Blog Writer**.
-3. A workspace for the **Blog Writer** is displayed.
-
-![](./1190998947.png)
+The `{instructions}` value is received from the **Text input** component, and one or more `{references}` are received from a list of URLs parsed from the **URL** component.
 
 
-This flow creates a one-shot article generator with **Prompt**, **OpenAI**, and **Chat Output** components, augmented with reference content and instructions from the **URL** and **Instructions** components.
-
-
-The **Template** field of the **Prompt** looks like this:
-
-
-![](./257920618.png)
-
-
-The `{instructions}` value is received from the **Instructions** component. One or more `{references}`  are received from a list of URLs.
-
-- **URL** extracts raw text and metadata from one or more web links.
-- **Parse Data** converts the data coming from the **URL** component into plain text to feed a prompt.
-
-![](./25156979.png)
-
-
-### Run the Blog Writer {#b93be7a567f5400293693b31b8d0f81a}
+### Run the blog writer flow {#b93be7a567f5400293693b31b8d0f81a}
 
 1. Click the **Playground** button. Here you can chat with the AI that has access to the **URL** content.
 2. Click the **Lighting Bolt** icon to run it.
 3. To write about something different, change the values in the **URL** component and adjust the instructions on the left side bar of the **Playground**. Try again and see what the LLM constructs.
 
-![](./447530731.png)
-

docs/docs/Starter-Projects/starter-projects-document-qa.md

@@ -17,36 +17,24 @@ Build a question-and-answer chatbot with a document loaded from local memory.
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Document QA {#acc90b19d4634c279b3e4e19e4e7ab1d}
 
+## Create the document QA flow {#204500104f024553aab2b633bb99f603}
 
----
-
-
-### Create the Document QA project {#204500104f024553aab2b633bb99f603}
-
-1. From the Langflow dashboard, click **New Project**.
+1. From the Langflow dashboard, click **New Flow**.
 2. Select **Document QA**.
-3. The **Document QA** project is created.
+3. The **Document QA** flow is created.
 
-![](./626991262.png)
+![](/img/starter-flow-document-qa.png)
 
 
 This flow is composed of a standard chatbot with the **Chat Input**, **Prompt**, **OpenAI**, and **Chat Output** components, but it also incorporates a **File** component, which loads a file from your local machine. **Parse Data** is used to convert the data from **File** into the **Prompt** component as `{Document}`. The **Prompt** component is instructed to answer questions based on the contents of `{Document}`. This gives the **OpenAI** component context it would not otherwise have access to.
 
 
-![](./1140665127.png)
-
-
-### Run the Document QA {#f58fcc2b9e594156a829b1772b6a7191}
+### Run the document QA flow {#f58fcc2b9e594156a829b1772b6a7191}
 
 
 1. To select a document to load, in the **File** component, click the **Path** field. Select a local file, and then click **Open**. The file name appears in the field.
 
-
-![](./1073956357.png)
-
-
 2. Click the **Playground** button. Here you can chat with the AI that has access to your document's content.
 
 

docs/docs/Starter-Projects/starter-projects-dynamic-agent.md

@@ -18,11 +18,11 @@ This flow is "dynamic" because it uses the **Chat input** component's text to de
 
 To use this flow, you need an [OpenAI API key](https://platform.openai.com/) and a [Search API key](https://www.searchapi.io/).
 
-## Open Langflow and start a new project
+## Open Langflow and start a new flow
 
-Click **New Project**, and then select the **Dynamic Agent** project.
+Click **New Flow**, and then select the **Dynamic Agent** flow.
 
-This opens a starter project with the necessary components to run an agentic application using CrewAI.
+This opens a starter flow with the necessary components to run an agentic application using CrewAI.
 
 The **Dynamic Agent** flow consists of these components:
 

docs/docs/Starter-Projects/starter-projects-memory-chatbot.md

@@ -6,7 +6,7 @@ slug: /starter-projects-memory-chatbot
 
 
 
-This flow extends the [Basic Prompting](http://localhost:3000/starter-projects/basic-prompting) flow to include a chat memory. This makes the AI remember previous user inputs.
+This flow extends the [basic prompting](/starter-projects-basic-prompting) flow to include a chat memory. This makes the AI remember previous user inputs.
 
 
 ## Prerequisites {#a71d73e99b1543bbba827207503cf31f}
@@ -17,19 +17,14 @@ This flow extends the [Basic Prompting](http://localhost:3000/starter-projects/
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Memory Chatbot {#54073bf7eb1b4ff490c313f5612f0842}
 
+## Create the memory chatbot flow
 
----
-
-
-### Create the memory chatbot project {#70ce99381b7043a1b417a81e9ae74c72}
-
-1. From the Langflow dashboard, click **New Project**.
+1. From the Langflow dashboard, click **New Flow**.
 2. Select **Memory Chatbot**.
-3. The **Memory Chatbot** flow is created .
+3. The **Memory Chatbot** flow is created.
 
-![](./1511598495.png)
+![](/img/starter-flow-memory-chatbot.png)
 
 
 This flow uses the same components as the Basic Prompting one, but extends it with a **Chat Memory** component. This component retrieves previous messages and sends them to the **Prompt** component to fill a part of the **Template** with context.
@@ -38,13 +33,10 @@ This flow uses the same components as the Basic Prompting one, but extends it wi
 By clicking the template, you'll see the prompt editor like below:
 
 
-![](./450254819.png)
-
-
 This gives the **OpenAI** component a memory of previous chat messages.
 
 
-### Run {#a110cad860584c98af1aead006035378}
+## Run the memory chatbot flow
 
 1. Open the Playground.
 2. Type multiple questions. In the **Memories** tab, your queries are logged in order. Up to 100 queries are stored by default. Try telling the AI your name and asking `What is my name?` on a second message, or `What is the first subject I asked you about?` to validate that previous knowledge is taking effect.
@@ -57,11 +49,7 @@ Check and adjust advanced parameters by opening the Advanced Settings of the **
 
 
 
-
-![](./1079168789.png)
-
-
-## Session ID {#4e68c3c0750942f98c45c1c45d7ffbbe}
+## Use Session ID in with the memory chatbot flow {#4e68c3c0750942f98c45c1c45d7ffbbe}
 
 
 ---

docs/docs/Starter-Projects/starter-projects-simple-agent.md

@@ -14,15 +14,15 @@ In this flow, the **Tool-calling agent** reasons using an **Open AI** LLM to sol
 
 To use this flow, you need an OpenAI API key.
 
-## Open Langflow and start a new project
+## Open Langflow and start a new flow
 
-Click **New Project**, and then select the **Simple Agent** project.
+Click **New Flow**, and then select the **Simple Agent** flow.
 
-This opens a starter project with the necessary components to run an agentic application using the Tool-calling agent.
+This opens a starter flow with the necessary components to run an agentic application using the Tool-calling agent.
 
 ## Simple Agent flow
 
-![](./starter-flow-simple-agent.png)
+![](/img/starter-flow-simple-agent.png)
 
 The **Simple Agent** flow consists of these components:
 

docs/docs/Starter-Projects/starter-projects-travel-planning-agent.md

@@ -18,15 +18,15 @@ All agents have access to the **Search API** and **URL Content Fetcher** compone
 
 To use this flow, you need an [OpenAI API key](https://platform.openai.com/) and a [Search API key](https://www.searchapi.io/).
 
-## Open Langflow and start a new project
+## Open Langflow and start a new flow
 
-Click **New Project**, and then select the **Travel Planning Agent** project.
+Click **New Flow**, and then select the **Travel Planning Agent** flow.
 
-This opens a starter project with the necessary components to run an agentic application using multiple Tool-calling agents.
+This opens a starter flow with the necessary components to run an agentic application using multiple Tool-calling agents.
 
-## Travel Planning Agent flow
+## Create the travel planning agent flow
 
-![](./starter-flow-travel-planning-agent.png)
+![](/img/starter-flow-travel-agent.png)
 
 The **Travel Planning Agent** flow consists of these components:
 
@@ -37,7 +37,7 @@ The **Travel Planning Agent** flow consists of these components:
 * The **Chat Output** component prints the flow's output to the chat.
 * The **OpenAI** model component sends the user input and prompt to the OpenAI API and receives a response.
 
-## Run the Travel Planning Agent flow
+## Run the travel planning agent flow
 
 1. Add your credentials to the Open AI and Search API components.
 2. In the **Chat output** component, click ▶️ Play to start the end-to-end application flow.

docs/docs/Starter-Projects/starter-projects-vector-store-rag.md

@@ -15,7 +15,7 @@ RAG is backed by a **vector store**, a vector database which stores embeddings
 This enables **vector search**, a more powerful and context-aware search.
 
 
-We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-a-free-astra-db-account) as the vector database for this starter project, but you can follow along with any of Langflow's vector database options.
+We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-a-free-astra-db-account) as the vector database for this starter flow, but you can follow along with any of Langflow's vector database options.
 
 
 ## Prerequisites {#6aa2c6dff6894eccadc39d4903d79e66}
@@ -29,25 +29,17 @@ We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-p
 	- Application Token
 	- API Endpoint
 
-![](./648489928.png)
 
+## Create the vector store RAG flow
 
-## Vector Store RAG {#1c37d15332f94cfe8f6e11dc6cc8a4ea}
-
-
----
-
-
-### Create the vector store RAG project {#e3ed64193e5e448f81279e1d54ba43cf}
-
-1. From the Langflow dashboard, click **New Project**.
+1. From the Langflow dashboard, click **New Flow**.
 2. Select **Vector Store RAG**.
-3. The **Vector Store RAG** project is created.
+3. The **Vector Store RAG** flowis created.
 
-![](./1946624394.png)
+![](/img/starter-flow-vector-rag.png)
 
 
-The vector store RAG flow is built of two separate flows. Ingestion and query.
+The vector store RAG flow is built of two separate flows for ingestion and query.
 
 
 The **ingestion** part (bottom of the screen) populates the vector store with data from a local file. It ingests data from a file (**File**), splits it into chunks (**Split Text**), indexes it in Astra DB (**Astra DB**), and computes embeddings for the chunks using an embedding model (**OpenAI Embeddings**). 
@@ -86,7 +78,7 @@ The **query** part (top of the screen) allows users to retrieve embedded vecto
 	5. Repeat the above steps for the **API Endpoint** field, pasting your Astra API Endpoint instead (`https://ASTRA_DB_ID-ASTRA_DB_REGION.apps.astra.datastax.com`).
 	6. Add the global variable to both the **Astra DB** and **Astra DB Search** components.
 
-### Run the Vector Store RAG {#815a6536d2d548d987f0f4e375a58b15}
+## Run the Vector Store RAG flow
 
 1. Click the **Playground** button. Here you can chat with the AI that uses context from the database you created.
 2. Type a message and press Enter. (Try something like "What topics do you know about?")

docs/docs/Workspace/workspace-api.md

@@ -9,7 +9,7 @@ import ReactPlayer from "react-player";
 The **API** section presents code templates for integrating your flow into external applications.
 
 
-![](./1862729633.png)
+![](/img/api-pane.png)
 
 
 ### cURL {#4eb287a8424349c4b0b436a6703de5f3}
@@ -36,9 +36,6 @@ The **Python Code** tab displays code to interact with your flow's `.json` f
 The **Tweaks** tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
 
 
-<ReactPlayer controls url="https://youtu.be/ISGKvHzJG8o" />
-
-
 ## Chat Widget {#48f121a6cb3243979a341753da0c2700}
 
 
@@ -57,18 +54,12 @@ You can get the HTML code embedded with the chat by clicking the Code button at
 Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.
 
 
-![](./566212295.png)
-
-
 ### Embed your flow into HTML {#6e84db2f2a0d451db6fa03c57e9bf9a4}
 
 
 The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as demonstrated in the video below.
 
 
-<ReactPlayer controls url="https://youtu.be/cVpNc-osfxQ" />
-
-
 ### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
 
 
@@ -80,7 +71,6 @@ To embed the Chat Widget using React, insert this `<script>` tag into the Reac
 ```
 
 
-
 Declare your Web Component and encapsulate it in a React component.
 
 

docs/docs/Workspace/workspace-logs.md

@@ -5,12 +5,12 @@ slug: /workspace-logs
 ---
 
 
+The **Logs** pane provides a detailed record of all component executions within a workspace. It is designed to help you track actions, debug issues, and understand the flow of data through various components.
 
-The **Logs** page provides a detailed record of all component executions within a workspace. It is designed to help you track actions, debug issues, and understand the flow of data through various components.
+1. To access the **Logs** pane, click your **Flow Name**, and then select **Logs**.
+
+![](/img/logs.png)
+
+2. All cells in the **Logs** view can be opened and inspected.
 
 
-![](./816620192.png)
-
-
-Double click the cells on that table for a detailed view.
-

docs/docs/Workspace/workspace-overview.md

@@ -18,6 +18,8 @@ To connect components, drag a line from the output handle (⚪) of one component
 
 For more information, see [How to build flows with components](/components-overview).
 
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
 ## Playground
 
 The **Playground** executes the current flow in the workspace.
@@ -28,23 +30,25 @@ Any input or output component can be opened in the **Playground** and tested in
 
 For more information, see the [Playground documentation](/workspace-playground).
 
+![](/img/playground.png)
+
 ## API
 
 The **API** pane provides code templates to integrate your flows into external applications.
 
 For more information, see the [API documentation](/workspace-api).
 
-## Collections, folders, and projects
+![](/img/api-pane.png)
 
-The **My Collection** page displays all the flows and components you've created in the Langflow workspace.
+## Projects and folders
 
-Your **collection** is the top-level categorization for all of your projects.
+The **My Projects** page displays all the flows and components you've created in the Langflow workspace.
 
-### My projects
+![](/img/my-projects.png)
 
 **My Projects** is the default folder where all new projects and components are initially stored.
 
-Collections, folders, projects, and flows are exchanged as JSON objects
+Projects, folders, and flows are exchanged as JSON objects.
 
 * To create a new folder, click 📁 **New Folder**.
 

docs/docs/Workspace/workspace-playground.md

@@ -12,7 +12,7 @@ The **Playground** is a dynamic interface designed for real-time interaction w
 As long as you have an [Input or Output](/components-io) component working, you can open it up by clicking the **Playground** button.
 
 
-![](./1109547993.png)
+![](/img/playground.png)
 
 
 :::tip
@@ -22,14 +22,9 @@ Notice how the **Playground's** window arrangement changes depending on what com
 :::
 
 
-
-
 You can also open a flow's **Playground** without entering its workspace. From **My Collections** or **Langflow Store**, click the **Playground** in one of the projects card.
 
 
-<ReactPlayer controls url="https://youtu.be/guaN0DOTxfo" />
-
-
 ## Memory Management {#821a5ee2a8a44d35b49943cba630511c}