diff --git a/docs/docs/components/inputs.mdx b/docs/docs/components/inputs.mdx index de46f3ad7..fe8804e43 100644 --- a/docs/docs/components/inputs.mdx +++ b/docs/docs/components/inputs.mdx @@ -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" }} /> diff --git a/docs/docs/examples/buffer-memory.mdx b/docs/docs/examples/buffer-memory.mdx index 3167081a5..b196f9031 100644 --- a/docs/docs/examples/buffer-memory.mdx +++ b/docs/docs/examples/buffer-memory.mdx @@ -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", + }} /> #### Download Flow diff --git a/docs/docs/examples/conversation-chain.mdx b/docs/docs/examples/conversation-chain.mdx index 1cd59ca55..294d1b440 100644 --- a/docs/docs/examples/conversation-chain.mdx +++ b/docs/docs/examples/conversation-chain.mdx @@ -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", + }} /> #### Download Flow diff --git a/docs/docs/examples/csv-loader.mdx b/docs/docs/examples/csv-loader.mdx index 351e99440..25f3bb444 100644 --- a/docs/docs/examples/csv-loader.mdx +++ b/docs/docs/examples/csv-loader.mdx @@ -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", + }} /> #### Download Flow diff --git a/docs/docs/examples/flow-runner.mdx b/docs/docs/examples/flow-runner.mdx index 38466e4b3..8a07adb0a 100644 --- a/docs/docs/examples/flow-runner.mdx +++ b/docs/docs/examples/flow-runner.mdx @@ -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"; - diff --git a/docs/docs/examples/python-function.mdx b/docs/docs/examples/python-function.mdx index 9eadd7273..2bb4b93e1 100644 --- a/docs/docs/examples/python-function.mdx +++ b/docs/docs/examples/python-function.mdx @@ -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", + }} /> #### Download Flow diff --git a/docs/docs/examples/serp-api-tool.mdx b/docs/docs/examples/serp-api-tool.mdx index 7e8d95936..175b6f1be 100644 --- a/docs/docs/examples/serp-api-tool.mdx +++ b/docs/docs/examples/serp-api-tool.mdx @@ -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", + }} /> #### Download Flow diff --git a/docs/docs/getting-started/creating-flows.mdx b/docs/docs/getting-started/creating-flows.mdx index 9c16d225f..585117881 100644 --- a/docs/docs/getting-started/creating-flows.mdx +++ b/docs/docs/getting-started/creating-flows.mdx @@ -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. - -
diff --git a/docs/docs/index.mdx b/docs/docs/index.mdx index d19c28e4b..bfbe171c4 100644 --- a/docs/docs/index.mdx +++ b/docs/docs/index.mdx @@ -8,6 +8,8 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; {" "} +{" "} + 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! diff --git a/docs/docs/starter-projects/rag-with-astradb.mdx b/docs/docs/starter-projects/rag-with-astradb.mdx index 54aebd2d2..01daa7b6f 100644 --- a/docs/docs/starter-projects/rag-with-astradb.mdx +++ b/docs/docs/starter-projects/rag-with-astradb.mdx @@ -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.