jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🎨 style(docs): update image rendering in examples and guidelines files for better readability and consistency

Browse source 
🔧 chore(docs): fix formatting in chat-widget.mdx file

🎨 style(components.mdx): Remove unnecessary div wrapper and fix indentation
🎨 style(features.mdx): Remove unnecessary div wrapper and fix indentation
🎨 style(prompt-customization.mdx): Remove unnecessary div wrappers and fix indentation
🎨 style(index.mdx): Remove unnecessary div wrapper and fix indentation
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-28 12:44:44 -03:00
commit 231978d1df
8 changed files with 156 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/docs/examples/how-upload-examples.mdx
View file

@ -7,16 +7,14 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
We welcome all examples that can help our community learn and explore Langflow's capabilities.
Langflow Examples is a repository on [GitHub](https://github.com/logspace-ai/langflow_examples) that contains examples of flows that people can use for inspiration and learning.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/community-examples.png",
}}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/community-examples.png",
}}
style={{ width: "100%" }}
/>
To upload examples, please follow these steps:

19
docs/docs/getting-started/hugging-face-spaces.mdx
View file

@ -6,15 +6,14 @@ import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/hugging-face.png",
}}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/hugging-face.png",
}}
style={{ width: "100%" }}
/>
Check out Langflow on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/Langflow).

78
docs/docs/guidelines/chat-interface.mdx
View file

@ -7,58 +7,46 @@ import ReactPlayer from "react-player";
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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface2.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface3.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface4.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface4.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

75
docs/docs/guidelines/chat-widget.mdx
View file

@ -2,14 +2,15 @@ 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';
import Admonition from "@theme/Admonition";
# Chat Widget
<div style={{ marginBottom: "20px" }}>
The <b>Langflow Chat Widget</b> is a powerful web component that enables
communication with a Langflow project. This widget allows for a chat interface embedding,
allowing the integration of Langflow into web applications effortlessly.
communication with a Langflow project. This widget allows for a chat interface
embedding, allowing the integration of Langflow into web applications
effortlessly.
</div>
## Features
@ -31,32 +32,30 @@ import Admonition from '@theme/Admonition';
at the Sidebar after building a flow.
</div>
<div
style={{ marginBottom: "20px", width: "100%", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/widget-sidebar.png"),
}}
style={{ width: "100%", maxWidth: "600px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/widget-sidebar.png"),
}}
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
/>
<div style={{ marginBottom: "20px" }}>
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.
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.
</div>
<div style={{ marginBottom: "20px" }}>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/widget-code.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/widget-code.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
---
@ -74,7 +73,7 @@ The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as
### React
To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React *index.html* file, inside the _`<body>`_ tag:
To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
```html
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
@ -111,7 +110,7 @@ Finally, you can place the component anywhere in your code to display the Chat W
### Angular
To use it in Angular, first add this _`<script>`_ tag into the Angular *index.html* file, inside the _`<body>`_ tag.
To use it in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
```html
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
@ -119,7 +118,7 @@ To use it in Angular, first add this _`<script>`_ tag into the Angular *index.ht
When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add _`CUSTOM_ELEMENTS_SCHEMA`_ to the module's _`@NgModule.schemas`_.
- Open the module file (it typically ends with *.module.ts*) where you'd add the _`langflow-chat`_ web component.
- Open the module file (it typically ends with _.module.ts_) where you'd add the _`langflow-chat`_ web component.
- Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
```ts
@ -156,9 +155,19 @@ In your Angular project, find the component belonging to the module where _`CUST
<Admonition type="info">
<ul>
<li>_`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to recognize custom elements.</li>
<li>Adding _`CUSTOM_ELEMENTS_SCHEMA`_ tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like _`langflow-chat`_.</li>
<li>Notice that you can only use the Chat Widget in components that are part of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.</li>
<li>
_`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to
recognize custom elements.
</li>
<li>
Adding _`CUSTOM_ELEMENTS_SCHEMA`_ tells Angular to allow custom elements
in your templates, and it will suppress the warning related to unknown
elements like _`langflow-chat`_.
</li>
<li>
Notice that you can only use the Chat Widget in components that are part
of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.
</li>
</ul>
</Admonition>
@ -169,10 +178,10 @@ In your Angular project, find the component belonging to the module where _`CUST
Use the widget API to customize your Chat Widget:
<Admonition type="caution">
Props with the type JSON need to be passed as Stringified JSONs, with the format &#123;<span>"key":"value"</span>&#125;.
Props with the type JSON need to be passed as Stringified JSONs, with the
format &#123;<span>"key":"value"</span>&#125;.
</Admonition>
| Prop | Type | Required | Description |
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bot_message_style | JSON | No | Applies custom formatting to bot messages. |

19
docs/docs/guidelines/components.mdx
View file

@ -25,17 +25,14 @@ Components are the building blocks of the flows. They are made of inputs, output
of that type is required.
</div>
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/single-compenent.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/single-compenent.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
<div style={{ marginBottom: "20px" }}>
On the top right corner, you will find the component status icon 🔴. Make the

19
docs/docs/guidelines/features.mdx
View file

@ -13,17 +13,14 @@ import Admonition from "@theme/Admonition";
below:
</div>
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/features.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/features.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
<div style={{ marginBottom: "20px" }}>
Further down, we will explain each of these options.

101
docs/docs/guidelines/prompt-customization.mdx
View file

@ -7,80 +7,59 @@ import ReactPlayer from "react-player";
The prompt template allows users to create prompts and define variables that provide control over instructing the model.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
Variables can be used to define instructions, questions, context, inputs, or examples for the model and can be created with any chosen name in curly brackets, e.g., `{variable_name}`. They act as placeholders for parts of the text that can be easily modified.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization2.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization2.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you can define their values within the component itself or leave a field empty to be adjusted over the chat interface.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization3.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization3.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
You can also use documents or output parsers as prompt variables. By plugging them into prompt handles, they’ll disable and feed that input field.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization4.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization4.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
With this, users can interact with documents, webpages, or any other type of content directly from the prompt, which allows for seamless integration of external resources with the language model.
If working with an interactive (chat-like) flow, remember to keep one of the input variables empty to behave as the chat input.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization5.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/prompt_customization5.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

18
docs/docs/index.mdx
View file

@ -6,13 +6,11 @@ import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/new_langflow2.gif",
}}
/>
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/new_langflow2.gif",
}}
style={{ width: "100%" }}
/>