📝 (inputs.mdx): add margin to image style to improve spacing and center alignment
📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (inputs.mdx): add margin to image style to improve spacing and center alignment 📝 (rag-with-astradb.mdx): add margin to image styles to improve spacing and readability
This commit is contained in:
cristhianzl
parent
477f7e8e73
commit
1616cdd000
10 changed files with 61 additions and 26 deletions
|
|
@ -33,7 +33,7 @@ When you get it from the sidebar, it will look like the image below but that is
|
|||
light: "img/chat-input.png",
|
||||
dark: "img/chat-input.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
If you expose all its fields, it will look like the image below.
|
||||
|
|
@ -44,7 +44,7 @@ If you expose all its fields, it will look like the image below.
|
|||
light: "img/chat-input-expanded.png",
|
||||
dark: "img/chat-input-expanded.png",
|
||||
}}
|
||||
style={{ width: "40%" }}
|
||||
style={{ width: "40%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
One key capability of the Chat Input component is how it transforms the Interaction Panel into a chat window. This feature is particularly useful for scenarios where user input is required to initiate or influence the flow.
|
||||
|
|
@ -55,7 +55,7 @@ One key capability of the Chat Input component is how it transforms the Interact
|
|||
light: "img/interaction-panel-with-chat-input.png",
|
||||
dark: "img/interaction-panel-with-chat-input.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
---
|
||||
|
|
@ -83,7 +83,7 @@ Here is how it looks when you get it from the sidebar.
|
|||
light: "img/prompt.png",
|
||||
dark: "img/prompt.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
And here when you add a Template with the value _`Hello {name}, how are you?`_.
|
||||
|
|
@ -94,7 +94,7 @@ And here when you add a Template with the value _`Hello {name}, how are you?`_.
|
|||
light: "img/prompt-with-template.png",
|
||||
dark: "img/prompt-with-template.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
---
|
||||
|
|
@ -124,7 +124,7 @@ It should look like this when dropped directly from the sidebar.
|
|||
light: "img/text-input.png",
|
||||
dark: "img/text-input.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
And when you expose all its fields, it will look like the image below.
|
||||
|
|
@ -149,7 +149,7 @@ You can use a template like this: _`"Name: {name}, Age: {age}"`_ to convert the
|
|||
light: "img/text-input-expanded.png",
|
||||
dark: "img/text-input-expanded.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
The Text Input component gives you the possibility to add an Input field on the Interaction Panel. This is useful because it allows you to define parameters while running and testing your flow.
|
||||
|
|
@ -160,5 +160,5 @@ The Text Input component gives you the possibility to add an Input field on the
|
|||
light: "img/interaction-panel-text-input.png",
|
||||
dark: "img/interaction-panel-text-input.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
light: "img/buffer-memory.png",
|
||||
dark: "img/buffer-memory.png",
|
||||
}}
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Buffer_Memory.json" download>Download Flow</a>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,13 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
light: "img/basic-chat.png",
|
||||
dark: "img/basic-chat.png",
|
||||
}}
|
||||
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Basic_Chat.json" download>Download Flow</a>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
light: "img/csv-loader.png",
|
||||
dark: "img/csv-loader.png",
|
||||
}}
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/CSV_Loader.json" download>Download Flow</a>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ description: Custom Components
|
|||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
|
||||
# FlowRunner Component
|
||||
|
||||
The CustomComponent class allows us to create components that interact with Langflow itself. In this example, we will make a component that runs other flows available in "My Collection".
|
||||
|
|
@ -16,7 +15,7 @@ The CustomComponent class allows us to create components that interact with Lang
|
|||
}}
|
||||
style={{
|
||||
width: "30%",
|
||||
margin: "0 auto",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
|
|
@ -367,4 +366,3 @@ Done! This is what our script and custom component looks like:
|
|||
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
light: "img/python-function.png",
|
||||
dark: "img/python-function.png",
|
||||
}}
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Python_Function.json" download>Download Flow</a>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
light: "img/serp-api-tool.png",
|
||||
dark: "img/serp-api-tool.png",
|
||||
}}
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/SerpAPI_Tool.json" download>Download Flow</a>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,13 @@ Langflow provides a range of Components to choose from, including **Chat Input**
|
|||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/langflow_canvas.png",
|
||||
dark: "img/langflow_canvas.png"
|
||||
dark: "img/langflow_canvas.png",
|
||||
}}
|
||||
style={{
|
||||
width: "70%",
|
||||
margin: "20px auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
@ -42,8 +48,6 @@ The **Outputs** components define the outputs of the flow and work similarly to
|
|||
|
||||
Both Inputs and Outputs components can be connected to other components on the canvas and are used to define how the API works too.
|
||||
|
||||
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
|
||||
{" "}
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
|
|
@ -65,7 +67,7 @@ Remember to use a Chromium-based browser for the best experience. You'll be pres
|
|||
light: "img/duplicate-space.png",
|
||||
dark: "img/duplicate-space.png",
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
style={{ width: "100%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
From here, just name your Space, define the visibility (Public or Private), and click on `Duplicate Space` to start the installation process. When that is done, you'll be redirected to the Space's main page to start using Langflow right away!
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Once you have created an account, you will be taken to the Astra DB dashboard. C
|
|||
light: "img/astra-create-database.png",
|
||||
dark: "img/astra-create-database.png",
|
||||
}}
|
||||
style={{ width: "80%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Now you will need to configure your database. Choose the **Serverless (Vector)** deployment type, and pick a Database name, provider and region.
|
||||
|
|
@ -55,7 +55,7 @@ After you have configured your database, click on the **Create Database** button
|
|||
light: "img/astra-configure-deployment.png",
|
||||
dark: "img/astra-configure-deployment.png",
|
||||
}}
|
||||
style={{ width: "70%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Once your database is initialized, to the right of the page, you will see the _Database Details_ section which contains a button for you to copy the **API Endpoint** and another to generate a **Token**.
|
||||
|
|
@ -66,7 +66,7 @@ Once your database is initialized, to the right of the page, you will see the _D
|
|||
light: "img/astra-generate-token.png",
|
||||
dark: "img/astra-generate-token.png",
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Now we are all set to start building our RAG application using Astra DB and Langflow.
|
||||
|
|
@ -85,7 +85,7 @@ To get started, click on the **New Project** button and look for the **Vector St
|
|||
light: "img/drag-and-drop-flow.png",
|
||||
dark: "img/drag-and-drop-flow.png",
|
||||
}}
|
||||
style={{ width: "90%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
This project consists of two flows. The simpler one is the **Ingestion Flow** which is responsible for ingesting the documents into the Astra DB database.
|
||||
|
|
@ -105,7 +105,7 @@ The ingestion flow consists of:
|
|||
light: "img/astra-ingestion-flow.png",
|
||||
dark: "img/astra-ingestion-flow.png",
|
||||
}}
|
||||
style={{ width: "90%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Now, let's update the **Astra DB** and **Astra DB Search** components with the **Token** and **API Endpoint** that we generated earlier, and the OpenAI Embeddings components with your OpenAI API key.
|
||||
|
|
@ -116,7 +116,7 @@ Now, let's update the **Astra DB** and **Astra DB Search** components with the *
|
|||
light: "img/astra-ingestion-fields.png",
|
||||
dark: "img/astra-ingestion-fields.png",
|
||||
}}
|
||||
style={{ width: "90%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
And run it! This will ingest the Text data from your file into the Astra DB database.
|
||||
|
|
@ -127,7 +127,7 @@ And run it! This will ingest the Text data from your file into the Astra DB data
|
|||
light: "img/astra-ingestion-run.png",
|
||||
dark: "img/astra-ingestion-run.png",
|
||||
}}
|
||||
style={{ width: "90%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Now, on to the **RAG Flow**. This flow is responsible for generating responses to your queries. It will define all of the steps from getting the User's input to generating a response and displaying it in the Interaction Panel.
|
||||
|
|
@ -149,7 +149,7 @@ The RAG flow is a bit more complex. It consists of:
|
|||
light: "img/astra-rag-flow.png",
|
||||
dark: "img/astra-rag-flow.png",
|
||||
}}
|
||||
style={{ width: "90%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
To run it all we have to do is click on the ⚡ _Run_ button and start interacting with your RAG application.
|
||||
|
|
@ -160,7 +160,7 @@ To run it all we have to do is click on the ⚡ _Run_ button and start interacti
|
|||
light: "img/astra-rag-flow-run.png",
|
||||
dark: "img/astra-rag-flow-run.png",
|
||||
}}
|
||||
style={{ width: "90%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
This opens the Interaction Panel where you can chat your data.
|
||||
|
|
@ -173,7 +173,7 @@ Because this flow has a **Chat Input** and a **Text Output** component, the Pane
|
|||
light: "img/astra-rag-flow-interaction-panel.png",
|
||||
dark: "img/astra-rag-flow-interaction-panel.png",
|
||||
}}
|
||||
style={{ width: "80%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Once we interact with it we get a response and the Extracted Chunks section is updated with the retrieved records.
|
||||
|
|
@ -184,7 +184,7 @@ Once we interact with it we get a response and the Extracted Chunks section is u
|
|||
light: "img/astra-rag-flow-interaction-panel-interaction.png",
|
||||
dark: "img/astra-rag-flow-interaction-panel-interaction.png",
|
||||
}}
|
||||
style={{ width: "80%" }}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
And that's it! You have successfully ran a RAG application using Astra DB and Langflow.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue