remove-unused-pages
This commit is contained in:
Mendon Kissling
parent
774de98c70
commit
2a21e2de30
4 changed files with 0 additions and 195 deletions
|
|
@ -1,56 +0,0 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Chat Interface
|
||||
|
||||
Langflow’s chat interface provides a user-friendly experience and functionality to interact with the model and customize the prompt. The sidebar brings options that allow users to view and edit pre-defined prompt variables. This feature facilitates quick experimentation by enabling the modification of variable values right in the chat.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface.png"),
|
||||
dark: useBaseUrl("img/chat_interface.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
Notice that editing variables in the chat interface take place temporarily and won’t change their original value in the components once the chat is closed.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface2.png"),
|
||||
dark: useBaseUrl("img/chat_interface2.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
To view the complete prompt in its original, structured format, click the "Display Prompt" option. This feature lets you see the prompt exactly as it entered the model.
|
||||
|
||||
{" "}
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface3.png"),
|
||||
dark: useBaseUrl("img/chat_interface3.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
In the chat interface, you can redefine which variable should be interpreted as the chat input. This gives you control over these inputs and allows dynamic and creative interactions.
|
||||
|
||||
{" "}
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface4.png"),
|
||||
dark: useBaseUrl("img/chat_interface4.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ReactPlayer from 'react-player';
|
||||
|
||||
# Collection
|
||||
|
||||
A collection is a snapshot of the flows available in the database. You can download your entire collection for local storage and upload it anytime for future use.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Component
|
||||
|
||||
Components are the building blocks of the flows. They are made of inputs, outputs, and parameters that define their functionality, providing a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components) section.
|
||||
|
||||
### Component's Features
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
During the flow creation process, you will notice handles (colored circles)
|
||||
attached to one or both sides of a component. These handles represent the
|
||||
availability to connect to other components, while their colors are type hints
|
||||
(hover over a handle to see connection details).
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
For example, if you select a <code>ConversationChain</code> component, you
|
||||
will see orange <span style={{ color: "orange" }}>o</span> and purple{" "}
|
||||
<span style={{ color: "purple" }}>o</span> input handles. They indicate that
|
||||
this component accepts an LLM and a Memory component as inputs. The red
|
||||
asterisk <span style={{ color: "red" }}>*</span> means that at least one input
|
||||
of that type is required.
|
||||
</div>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/single-compenent.png"),
|
||||
dark: useBaseUrl("img/single-compenent.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
On the top right corner, you will find the component status icon 🔴. Make the
|
||||
necessary connections, build the flow (⚡ zap icon on the bottom right of the
|
||||
canvas) and once the validation is completed, the status of each validated
|
||||
component should light green 🟢. Hover over the component status to reveal the
|
||||
outputs going through it in case of success, or the detected error in case of
|
||||
failure.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Component's Parameters
|
||||
|
||||
Langflow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
|
||||
</div>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
# Features
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
When you click for New Project, you will see on the top left corner of the
|
||||
screen, some options such as <strong>Import</strong>, <strong>Export</strong>,{" "}
|
||||
<strong>Code</strong> and <strong>Save</strong>, as displayed in the image
|
||||
below:
|
||||
</div>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/features.png"),
|
||||
dark: useBaseUrl("img/features.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
Further down, we will explain each of these options.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Import and Export
|
||||
|
||||
Flows can be exported and imported as JSON files.
|
||||
|
||||
<Admonition type="caution">
|
||||
Watch out for API keys being stored in local files.
|
||||
|
||||
</Admonition>
|
||||
|
||||
---
|
||||
|
||||
### Code
|
||||
|
||||
The Code button shows snippets to use your flow as a Python object or an API.
|
||||
|
||||
**Python Code**
|
||||
|
||||
Through the Langflow package, you can run your flow from a JSON file. The example below shows how to run a flow from a JSON file.
|
||||
|
||||
```python
|
||||
from langflow.load import run_flow_from_json
|
||||
|
||||
results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
|
||||
```
|
||||
|
||||
**API**
|
||||
|
||||
Once you save a flow, the API endpoint is created with your latest changes. Click the "code" button to use that flow as an API. You can post-adjust component parameters using the global variable TWEAKS.
|
||||
|
||||
The example below shows a Python script making a POST request to a local API endpoint, which gets a prediction based on the message input.
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
|
||||
</div>
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
import Admonition from "@theme/Admonition";
|
||||
Loading…
Add table
Add a link
Reference in a new issue