Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions docs/features/banners.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,29 +36,29 @@ For more information on configuring environment variables in Open WebUI, see [En
Environment Variable Description
---------------------------------

* `WEBUI_BANNERS`:
* Type: list of dict
* Default: `[]`
* Description: List of banners to show to users.
- `WEBUI_BANNERS`:
- Type: list of dict
- Default: `[]`
- Description: List of banners to show to users.

Banner Options
----------------

* `id`: Unique identifier for the banner.
* `type`: Background color of the banner (info, success, warning, error).
* `title`: Title of the banner.
* `content`: Content of the banner.
* `dismissible`: Whether the banner is dismissible or not.
* `timestamp`: Timestamp for the banner (optional).
- `id`: Unique identifier for the banner.
- `type`: Background color of the banner (info, success, warning, error).
- `title`: Title of the banner.
- `content`: Content of the banner.
- `dismissible`: Whether the banner is dismissible or not.
- `timestamp`: Timestamp for the banner (optional).

FAQ
----

* Q: Can I configure banners through the admin panel?
- Q: Can I configure banners through the admin panel?
A: Yes, you can configure banners through the admin panel by navigating to `Admin Panel` -> `Settings` -> `Interface` and clicking on the `+` icon to add a new banner.
* Q: Can I configure banners through environment variables?
- Q: Can I configure banners through environment variables?
A: Yes, you can configure banners through environment variables by setting the `WEBUI_BANNERS` environment variable with a list of dictionaries.
* Q: What is the format for the `WEBUI_BANNERS` environment variable?
- Q: What is the format for the `WEBUI_BANNERS` environment variable?
A: The format for the `WEBUI_BANNERS` environment variable is a list of dictionaries with the following keys: `id`, `type`, `title`, `content`, `dismissible`, and `timestamp`.
* Q: Can I make banners dismissible?
- Q: Can I make banners dismissible?
A: Yes, you can make banners dismissible by setting the `dismissible` key to `True` in the banner configuration or by toggling dismissibility for a banner within the UI.
26 changes: 13 additions & 13 deletions docs/features/chat-features/chatshare.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ To share a chat:

When you select `Share to Open WebUI Community`:

* A new tab will open, allowing you to upload your chat as a snapshot to the Open WebUI community website (https://openwebui.com/chats/upload).
* You can control who can view your uploaded chat by choosing from the following access settings:
* **Private**: Only you can access this chat.
* **Public**: Anyone on the internet can view the messages displayed in the chat snapshot.
* **Public, Full History**: Anyone on the internet can view the full regeneration history of your chat.
- A new tab will open, allowing you to upload your chat as a snapshot to the Open WebUI community website (https://openwebui.com/chats/upload).
- You can control who can view your uploaded chat by choosing from the following access settings:
- **Private**: Only you can access this chat.
- **Public**: Anyone on the internet can view the messages displayed in the chat snapshot.
- **Public, Full History**: Anyone on the internet can view the full regeneration history of your chat.

:::note
Note: You can change the permission level of your shared chats on the community platform at any time from your openwebui.com account.
Expand All @@ -50,12 +50,12 @@ When you select `Copy Link`, a unique share link is generated that can be shared

**Important Considerations:**

* The shared chat will only include messages that existed at the time the link was created. Any new messages sent within the chat after the link is generated will not be included, unless the link is deleted and updated with a new link.
* The generated share link acts as a static snapshot of the chat at the time the link was generated.
* To view the shared chat, users must:
- The shared chat will only include messages that existed at the time the link was created. Any new messages sent within the chat after the link is generated will not be included, unless the link is deleted and updated with a new link.
- The generated share link acts as a static snapshot of the chat at the time the link was generated.
- To view the shared chat, users must:
1. Have an account on the Open WebUI instance where the link was generated.
2. Be signed in to their account on that instance.
* If a user tries to access the shared link without being signed in, they will be redirected to the login page to log in before they can view the shared chat.
- If a user tries to access the shared link without being signed in, they will be redirected to the login page to log in before they can view the shared chat.

### Viewing Shared Chats

Expand All @@ -77,10 +77,10 @@ To update a shared chat:

The **Share Chat** Modal includes the following options:

* **before**: Opens a new tab to view the previously shared chat from the share link.
* **delete this link**: Deletes the shared link of the chat and presents the initial share chat modal.
* **Share to Open WebUI Community**: Opens a new tab for https://openwebui.com/chats/upload with the chat ready to be shared as a snapshot.
* **Update and Copy Link**: Updates the snapshot of the chat of the previously shared chat link and copies it to your device's clipboard.
- **before**: Opens a new tab to view the previously shared chat from the share link.
- **delete this link**: Deletes the shared link of the chat and presents the initial share chat modal.
- **Share to Open WebUI Community**: Opens a new tab for https://openwebui.com/chats/upload with the chat ready to be shared as a snapshot.
- **Update and Copy Link**: Updates the snapshot of the chat of the previously shared chat link and copies it to your device's clipboard.

### Deleting Shared Chats

Expand Down
62 changes: 31 additions & 31 deletions docs/features/code-execution/artifacts.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ Open WebUI creates an Artifact when the generated content meets specific criteri

1. **Renderable**: To be displayed as an Artifact, the content must be in a format that Open WebUI supports for rendering. This includes:

* Single-page HTML websites
* Scalable Vector Graphics (SVG) images
* Complete webpages, which include HTML, Javascript, and CSS all in the same Artifact. Do note that HTML is required if generating a complete webpage.
* ThreeJS Visualizations and other JavaScript visualization libraries such as D3.js.
- Single-page HTML websites
- Scalable Vector Graphics (SVG) images
- Complete webpages, which include HTML, Javascript, and CSS all in the same Artifact. Do note that HTML is required if generating a complete webpage.
- ThreeJS Visualizations and other JavaScript visualization libraries such as D3.js.

Other content types like Documents (Markdown or Plain Text), Code snippets, and React components are not rendered as Artifacts by Open WebUI.

Expand All @@ -29,75 +29,75 @@ To use artifacts in Open WebUI, a model must provide content that triggers the r

When Open WebUI creates an Artifact, you'll see the content displayed in a dedicated Artifacts window to the right side of the main chat. Here's how to interact with Artifacts:

* **Editing and iterating**: Ask an LLM within the chat to edit or iterate on the content, and these updates will be displayed directly in the Artifact window. You can switch between versions using the version selector at the bottom left of the Artifact. Each edit creates a new version, allowing you to track changes using the version selector.
* **Updates**: Open WebUI may update an existing Artifact based on your messages. The Artifact window will display the latest content.
* **Actions**: Access additional actions for the Artifact, such as copying the content or opening the artifact in full screen, located in the lower right corner of the Artifact.
- **Editing and iterating**: Ask an LLM within the chat to edit or iterate on the content, and these updates will be displayed directly in the Artifact window. You can switch between versions using the version selector at the bottom left of the Artifact. Each edit creates a new version, allowing you to track changes using the version selector.
- **Updates**: Open WebUI may update an existing Artifact based on your messages. The Artifact window will display the latest content.
- **Actions**: Access additional actions for the Artifact, such as copying the content or opening the artifact in full screen, located in the lower right corner of the Artifact.

## Editing Artifacts

1. **Targeted Updates**: Describe what you want changed and where. For example:

* "Change the color of the bar in the chart from blue to red."
* "Update the title of the SVG image to 'New Title'."
- "Change the color of the bar in the chart from blue to red."
- "Update the title of the SVG image to 'New Title'."

2. **Full Rewrites**: Request major changes affecting most of the content for substantial restructuring or multiple section updates. For example:

* "Rewrite this single-page HTML website to be a landing page instead."
* "Redesign this SVG so that it's animated using ThreeJS."
- "Rewrite this single-page HTML website to be a landing page instead."
- "Redesign this SVG so that it's animated using ThreeJS."

**Best Practices**:

* Be specific about which part of the Artifact you want to change.
* Reference unique identifying text around your desired change for targeted updates.
* Consider whether a small update or full rewrite is more appropriate for your needs.
- Be specific about which part of the Artifact you want to change.
- Reference unique identifying text around your desired change for targeted updates.
- Consider whether a small update or full rewrite is more appropriate for your needs.

## Use Cases

Artifacts in Open WebUI enable various teams to create high-quality work products quickly and efficiently. Here are some examples tailored to our platform:

* **Designers**:
* Create interactive SVG graphics for UI/UX design.
* Design single-page HTML websites or landing pages.
* **Developers**: Create simple HTML prototypes or generate SVG icons for projects.
* **Marketers**:
* Design campaign landing pages with performance metrics.
* Create SVG graphics for ad creatives or social media posts.
- **Designers**:
- Create interactive SVG graphics for UI/UX design.
- Design single-page HTML websites or landing pages.
- **Developers**: Create simple HTML prototypes or generate SVG icons for projects.
- **Marketers**:
- Design campaign landing pages with performance metrics.
- Create SVG graphics for ad creatives or social media posts.

## Examples of Projects you can create with Open WebUI's Artifacts

Artifacts in Open WebUI enable various teams and individuals to create high-quality work products quickly and efficiently. Here are some examples tailored to our platform, showcasing the versatility of artifacts and inspiring you to explore their potential:

1. **Interactive Visualizations**

* Components used: ThreeJS, D3.js, and SVG
* Benefits: Create immersive data stories with interactive visualizations. Open WebUI's Artifacts enable you to switch between versions, making it easier to test different visualization approaches and track changes.
- Components used: ThreeJS, D3.js, and SVG
- Benefits: Create immersive data stories with interactive visualizations. Open WebUI's Artifacts enable you to switch between versions, making it easier to test different visualization approaches and track changes.

Example Project: Build an interactive line chart using ThreeJS to visualize stock prices over time. Update the chart's colors and scales in separate versions to compare different visualization strategies.

2. **Single-Page Web Applications**

* Components used: HTML, CSS, and JavaScript
* Benefits: Develop single-page web applications directly within Open WebUI. Edit and iterate on the content using targeted updates and full rewrites.
- Components used: HTML, CSS, and JavaScript
- Benefits: Develop single-page web applications directly within Open WebUI. Edit and iterate on the content using targeted updates and full rewrites.

Example Project: Design a to-do list app with a user interface built using HTML and CSS. Use JavaScript to add interactive functionality. Update the app's layout and UI/UX using targeted updates and full rewrites.

3. **Animated SVG Graphics**

* Components used: SVG and ThreeJS
* Benefits: Create engaging animated SVG graphics for marketing campaigns, social media, or web design. Open WebUI's Artifacts enable you to edit and iterate on the graphics in a single window.
- Components used: SVG and ThreeJS
- Benefits: Create engaging animated SVG graphics for marketing campaigns, social media, or web design. Open WebUI's Artifacts enable you to edit and iterate on the graphics in a single window.

Example Project: Design an animated SVG logo for a company brand. Use ThreeJS to add animation effects and Open WebUI's targeted updates to refine the logo's colors and design.

4. **Webpage Prototypes**

* Components used: HTML, CSS, and JavaScript
* Benefits: Build and test webpage prototypes directly within Open WebUI. Switch between versions to compare different design approaches and refine the prototype.
- Components used: HTML, CSS, and JavaScript
- Benefits: Build and test webpage prototypes directly within Open WebUI. Switch between versions to compare different design approaches and refine the prototype.

Example Project: Develop a prototype for a new e-commerce website using HTML, CSS, and JavaScript. Use Open WebUI's targeted updates to refines the navigation, layout, and UI/UX.

5. **Interactive Storytelling**

* Components used: HTML, CSS, and JavaScript
* Benefits: Create interactive stories with scrolling effects, animations, and other interactive elements. Open WebUI's Artifacts enable you to refine the story and test different versions.
- Components used: HTML, CSS, and JavaScript
- Benefits: Create interactive stories with scrolling effects, animations, and other interactive elements. Open WebUI's Artifacts enable you to refine the story and test different versions.

Example Project: Build an interactive story about a company's history, using scrolling effects and animations to engage the reader. Use targeted updates to refine the story's narrative and Open WebUI's version selector to test different versions.
8 changes: 4 additions & 4 deletions docs/features/code-execution/mermaid.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ Open WebUI supports rendering of visually appealing MermaidJS diagrams, flowchar

To generate a MermaidJS diagram, simply ask an LLM within any chat to create a diagram or chart using MermaidJS. For example, you can ask the LLM to:

* "Create a flowchart for a simple decision-making process for me using Mermaid. Explain how the flowchart works."
* "Use Mermaid to visualize a decision tree to determine whether it's suitable to go for a walk outside."
- "Create a flowchart for a simple decision-making process for me using Mermaid. Explain how the flowchart works."
- "Use Mermaid to visualize a decision tree to determine whether it's suitable to go for a walk outside."

Note that for the LLM's response to be rendered correctly, it must begin with the word `mermaid` followed by the MermaidJS code. You can reference the [MermaidJS documentation](https://mermaid.js.org/intro/) to ensure the syntax is correct and provide structured prompts to the LLM to guide it towards generating better MermaidJS syntax.

Expand All @@ -28,8 +28,8 @@ If the model generates MermaidJS syntax, but the visualization does not render,

Once your visualization is displayed, you can:

* Zoom in and out to examine it more closely.
* Copy the original MermaidJS code used to generate the visualization by clicking the copy button at the top-right corner of the display area.
- Zoom in and out to examine it more closely.
- Copy the original MermaidJS code used to generate the visualization by clicking the copy button at the top-right corner of the display area.

### Example

Expand Down
28 changes: 14 additions & 14 deletions docs/features/code-execution/python.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ The Open WebUI frontend includes a self-contained WASM (WebAssembly) Python envi

Pyodide code execution is configured to load only packages configured in scripts/prepare-pyodide.js and then added to "CodeBlock.svelte". The following Pyodide packages are currently supported in Open WebUI:

* micropip
* packaging
* requests
* beautifulsoup4
* numpy
* pandas
* matplotlib
* scikit-learn
* scipy
* regex
- micropip
- packaging
- requests
- beautifulsoup4
- numpy
- pandas
- matplotlib
- scikit-learn
- scipy
- regex

These libraries can be used to perform various tasks, such as data manipulation, machine learning, and web scraping. If the package you're wanting to run is not compiled inside of the Pyodide we ship with Open WebUIm, the package will not be able to be used.

Expand All @@ -36,13 +36,13 @@ To execute Python code, ask an LLM within a chat to write a Python script for yo

## Tips for Using Python Code Execution

* When writing Python code, keep in mind that the code would be running in a Pyodide environment when executed. You can inform the LLM of this by mentioning "Pyodide environment" when asking for code.
* Research the Pyodide documentation to understand the capabilities and limitations of the environment.
* Experiment with different libraries and scripts to explore the possibilities of Python code execution in Open WebUI.
- When writing Python code, keep in mind that the code would be running in a Pyodide environment when executed. You can inform the LLM of this by mentioning "Pyodide environment" when asking for code.
- Research the Pyodide documentation to understand the capabilities and limitations of the environment.
- Experiment with different libraries and scripts to explore the possibilities of Python code execution in Open WebUI.

## Pyodide Documentation

* [Pyodide Documentation](https://pyodide.org/en/stable/)
- [Pyodide Documentation](https://pyodide.org/en/stable/)

## Code Example

Expand Down
Loading