[Docs] - Refactor folders and leftnav (#1781)
* refactor-leftnav * bump-whats-new * comment-out-some-tutorials * links * guidelines * comma * starter-projects * try-links * add-new-component-location
This commit is contained in:
Mendon Kissling
GitHub
parent
a812b6ce48
commit
cc70a11572
27 changed files with 83 additions and 97 deletions
77
docs/docs/tutorials/chatprompttemplate_guide.mdx
Normal file
77
docs/docs/tutorials/chatprompttemplate_guide.mdx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Building chatbots with System Message
|
||||
|
||||
## Overview
|
||||
|
||||
In this guide, we will modify the "Basic Chat with Prompt and History" example, integrating the ChatPromptTemplate with the SystemMessagePromptTemplate and HumanMessagePromptTemplate components. By following these steps, you'll be able to build a personalized chatbot that can interpret and respond based on user-defined System messages.
|
||||
|
||||
## Interactive Guide
|
||||
|
||||
<iframe
|
||||
src="https://app.tango.us/app/embed/f05bb3a7-4ceb-4b61-921f-628563b562f6?iframe=true"
|
||||
sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-same-origin"
|
||||
security="restricted"
|
||||
title="Step-by-Step Instructions to Customize and Build a Chatbot with custom System Message"
|
||||
width="100%"
|
||||
height="800px"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
frameborder="0"
|
||||
webkitallowfullscreen="webkitallowfullscreen"
|
||||
mozallowfullscreen="mozallowfullscreen"
|
||||
allowfullscreen="allowfullscreen"
|
||||
></iframe>
|
||||
|
||||
## Step-by-Step Instructions
|
||||
|
||||
1. Navigate to the "Community Examples" section.
|
||||
|
||||
2. Locate the "Basic Chat with Prompt and History" example, and click on "Fork Example".
|
||||
|
||||
3. Once in the editor, find the "PromptTemplate" component and remove it.
|
||||
|
||||
4. Now, add these three components: ChatPromptTemplate, SystemMessagePromptTemplate, and HumanMessagePromptTemplate.
|
||||
|
||||
> **Note:** Remember to set the model to gpt-3.5-turbo-0613 or the most up-to-date version. The latest models have improved capabilities to comprehend System messages.
|
||||
|
||||
5. Open the "Prompt" field on the SystemMessagePromptTemplate component.
|
||||
|
||||
6. Enter the text: _`You are a {role} that {behavior}.`_
|
||||
7. Save your changes by clicking on "Check & Save".
|
||||
|
||||
8. Define the 'role' variable by typing "obedient assistant".
|
||||
|
||||
9. Next, navigate to the HumanMessagePromptTemplate and open the "Prompt" field.
|
||||
|
||||
10. Here, simply enter `{input}`.
|
||||
|
||||
11. Save these changes by clicking on "Check & Save".
|
||||
|
||||
12. Now, you should see your flow populated with the variables you defined.
|
||||
|
||||
13. In the Memory component, set the 'Input Key' to "input".
|
||||
|
||||
> **Tip:** When using a Memory component with multiple variables, it's crucial to specify which variable should be used to generate the conversation history.
|
||||
|
||||
14. Click on the "Build" button to implement your changes.
|
||||
|
||||
15. Open the chat interface to test your modifications.
|
||||
|
||||
16. You should now be able to see and use the defined variables in the chat interface.
|
||||
|
||||
17. Click on 'role' to examine the variable you established in the canvas.
|
||||
|
||||
18. Now, let's define the 'behavior' variable.
|
||||
|
||||
19. Enter the text: "writes the word 'Langflow' at the end of every sentence."
|
||||
|
||||
20. Test your chatbot by typing "How can you help me?"
|
||||
|
||||
21. If everything was set up correctly, your chatbot should respond appropriately, following the defined behavior.
|
||||
|
||||
22. Congratulations! You have successfully customized and built your chatbot.
|
||||
|
||||
By following these instructions, you have created a dynamic chatbot capable of understanding and responding based on custom system messages, enhancing the user experience and interaction. Enjoy your personalized assistant!
|
||||
64
docs/docs/tutorials/loading_document.mdx
Normal file
64
docs/docs/tutorials/loading_document.mdx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Integrating documents with prompt variables
|
||||
|
||||
## Overview
|
||||
|
||||
This guide takes you through the process of augmenting the "Basic Chat with Prompt and History" example. You'll learn how to embed documents as context into the PromptTemplate component utilizing a WebBaseLoader.
|
||||
|
||||
## Interactive Guide
|
||||
|
||||
<iframe
|
||||
src="https://app.tango.us/app/embed/76578e84-a700-4b3b-a6ef-8a0350472781?iframe=true"
|
||||
sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-same-origin"
|
||||
security="restricted"
|
||||
title="Loading a document into a PromptTemplate variable"
|
||||
width="100%"
|
||||
height="800px"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
frameborder="0"
|
||||
webkitallowfullscreen="webkitallowfullscreen"
|
||||
mozallowfullscreen="mozallowfullscreen"
|
||||
allowfullscreen="allowfullscreen"
|
||||
></iframe>
|
||||
|
||||
## Step-by-Step Instructions
|
||||
|
||||
1. Start by navigating to the "Community Examples" section.
|
||||
|
||||
2. Find the "Basic Chat with Prompt and History" example and click on "Fork Example".
|
||||
|
||||
3. In the editor, open the "Template" field.
|
||||
|
||||
4. Here, introduce the `{context}` variable, placing it somewhere before the "Current conversation:" text.
|
||||
|
||||
5. Once done, save your changes by clicking on "Check & Save".
|
||||
|
||||
6. Next, open the search bar and type "web".
|
||||
|
||||
7. Drag and drop a WebBaseLoader (or any other loader of your choice) onto the canvas.
|
||||
|
||||
8. Connect this loader to the `{context}` variable that we just added.
|
||||
|
||||
9. In the "Web Page" field, enter "https://docs.langflow.org/how-upload-examples".
|
||||
|
||||
10. Now, click on "ConversationBufferMemory".
|
||||
|
||||
11. In the "Input Key" field, enter "text" to define the Chat variable.
|
||||
|
||||
> **Tip:** When defining more than one variable and using a Memory component, it's crucial to specify which variable should be used to create the conversation history.
|
||||
|
||||
12. Click on the "Build" button to implement your changes.
|
||||
|
||||
13. Open the chat interface to test your modifications.
|
||||
|
||||
14. Try asking something like, "How do I upload examples?"
|
||||
|
||||
15. Click on "Display Prompt" to view your template.
|
||||
|
||||
16. Now, you can see what the model used as a basis to generate its response.
|
||||
|
||||
By following these instructions, you have successfully loaded a document into a PromptTemplate variable, allowing for more enriched and context-aware chat responses. This customization enhances user interaction by integrating relevant document content into the chat flow.
|
||||
186
docs/docs/tutorials/rag-with-astradb.mdx
Normal file
186
docs/docs/tutorials/rag-with-astradb.mdx
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
# 🌟 RAG with Astra DB
|
||||
|
||||
This guide will walk you through how to build a RAG (Retrieval Augmented Generation) application using **Astra DB** and **Langflow**.
|
||||
|
||||
[Astra DB](https://www.datastax.com/products/datastax-astra?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=astradb) is a cloud-native database built on Apache Cassandra that is optimized for the cloud. It is a fully managed database-as-a-service that simplifies operations and reduces costs. Astra DB is built on the same technology that powers the largest Cassandra deployments in the world.
|
||||
|
||||
In this guide, we will use Astra DB as a vector store to store and retrieve the documents that will be used by the RAG application to generate responses.
|
||||
|
||||
<Admonition type="tip">
|
||||
This guide assumes that you have Langflow up and running. If you are new to
|
||||
Langflow, you can check out the [Getting Started](/) guide.
|
||||
</Admonition>
|
||||
|
||||
TLDR;
|
||||
|
||||
- [Create a free Astra DB account](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)
|
||||
- Duplicate our [Langflow 1.0 Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
|
||||
- Create a new database, get a **Token** and the **API Endpoint**
|
||||
- Click on the **New Project** button and look for Vector Store RAG. This will create a new project with the necessary components
|
||||
- Import the project into Langflow by dropping it on the Canvas or My Collection page
|
||||
- Update the **Token** and **API Endpoint** in the **Astra DB** components
|
||||
- Update the OpenAI API key in the **OpenAI** components
|
||||
- Run the ingestion flow which is the one that uses the **Astra DB** component
|
||||
- Click on the ⚡ _Run_ button and start interacting with your RAG application
|
||||
|
||||
# First things first
|
||||
|
||||
## Create an Astra DB Database
|
||||
|
||||
To get started, you will need to [create an Astra DB database](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-an-astradb-database).
|
||||
|
||||
Once you have created an account, you will be taken to the Astra DB dashboard. Click on the **Create Database** button.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-create-database.png",
|
||||
dark: "img/astra-create-database.png",
|
||||
}}
|
||||
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.
|
||||
|
||||
After you have configured your database, click on the **Create Database** button.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-configure-deployment.png",
|
||||
dark: "img/astra-configure-deployment.png",
|
||||
}}
|
||||
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**.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-generate-token.png",
|
||||
dark: "img/astra-generate-token.png",
|
||||
}}
|
||||
style={{ width: "50%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
Now we are all set to start building our RAG application using Astra DB and Langflow.
|
||||
|
||||
## (Optional) Duplicate the Langflow 1.0 HuggingFace Space
|
||||
|
||||
If you haven't already, now is the time to launch Langflow. To make things easier, you can duplicate our [Langflow 1.0 Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) which sets up a Langflow instance just for you.
|
||||
|
||||
## Open the Vector Store RAG Project
|
||||
|
||||
To get started, click on the **New Project** button and look for the **Vector Store RAG** project. This will open a starter project with the necessary components to run a RAG application using Astra DB.
|
||||
|
||||
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.
|
||||
|
||||
Your first step should be to understand what each flow does and how they interact with each other.
|
||||
|
||||
The ingestion flow consists of:
|
||||
|
||||
- **Files** component that uploads a text file to Langflow
|
||||
- **Recursive Character Text Splitter** component that splits the text into smaller chunks
|
||||
- **OpenAIEmbeddings** component that generates embeddings for the text chunks
|
||||
- **Astra DB** component that stores the text chunks in the Astra DB database
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-ingestion-flow.png",
|
||||
dark: "img/astra-ingestion-flow.png",
|
||||
}}
|
||||
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.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-ingestion-fields.png",
|
||||
dark: "img/astra-ingestion-fields.png",
|
||||
}}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
And run it! This will ingest the Text data from your file into the Astra DB database.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-ingestion-run.png",
|
||||
dark: "img/astra-ingestion-run.png",
|
||||
}}
|
||||
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.
|
||||
|
||||
The RAG flow is a bit more complex. It consists of:
|
||||
|
||||
- **Chat Input** component that defines where to put the user input coming from the Interaction Panel
|
||||
- **OpenAI Embeddings** component that generates embeddings from the user input
|
||||
- **Astra DB Search** component that retrieves the most relevant Records from the Astra DB database
|
||||
- **Text Output** component that turns the Records into Text by concatenating them and also displays it in the Interaction Panel
|
||||
- One interesting point you'll see here is that this component is named `Extracted Chunks`, and that is how it will appear in the Interaction Panel
|
||||
- **Prompt** component that takes in the user input and the retrieved Records as text and builds a prompt for the OpenAI model
|
||||
- **OpenAI** component that generates a response to the prompt
|
||||
- **Chat Output** component that displays the response in the Interaction Panel
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-rag-flow.png",
|
||||
dark: "img/astra-rag-flow.png",
|
||||
}}
|
||||
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.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-rag-flow-run.png",
|
||||
dark: "img/astra-rag-flow-run.png",
|
||||
}}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
This opens the Interaction Panel where you can chat your data.
|
||||
|
||||
Because this flow has a **Chat Input** and a **Text Output** component, the Panel displays a chat input at the bottom and the Extracted Chunks section on the left.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-rag-flow-interaction-panel.png",
|
||||
dark: "img/astra-rag-flow-interaction-panel.png",
|
||||
}}
|
||||
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.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/astra-rag-flow-interaction-panel-interaction.png",
|
||||
dark: "img/astra-rag-flow-interaction-panel-interaction.png",
|
||||
}}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
And that's it! You have successfully ran a RAG application using Astra DB and Langflow.
|
||||
|
||||
# Conclusion
|
||||
|
||||
In this guide, we have learned how to run a RAG application using Astra DB and Langflow.
|
||||
We have seen how to create an Astra DB database, import the Astra DB RAG Flows project into Langflow, and run the ingestion and RAG flows.
|
||||
Loading…
Add table
Add a link
Reference in a new issue