khanh.pndc/open-webui-docs
1
0
Fork 0
mirror of https://github.com/open-webui/docs.git synced 2026-01-03 02:09:51 +07:00
Code Issues Packages Projects Releases Wiki Activity

New Apache Tika & Artifacts Docs Pages

Browse Source 
New Apache Tika & Artifacts Docs Pages
This commit is contained in:
Silentoplayz
2024-12-21 12:47:50 -05:00
parent 1c83f95c88
commit 0bdca8cede
35 changed files with 418 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
docs/features/code-execution/artifacts.md Normal file
View File

@@ -0,0 +1,103 @@
---
sidebar_position: 1
title: "🏺 Artifacts"
---
# What are Artifacts and how do I use them in Open WebUI?
Artifacts in Open WebUI are an innovative feature inspired by Claude.AI's Artifacts, allowing you to interact with significant and standalone content generated by an LLM within a chat. They enable you to view, modify, build upon, or reference substantial pieces of content separately from the main conversation, making it easier to work with complex outputs and ensuring that you can revisit important information later.
## When does Open WebUI use Artifacts?
Open WebUI creates an Artifact when the generated content meets specific criteria tailored to our platform:
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.
Other content types like Documents (Markdown or Plain Text), Code snippets, and React components are not rendered as Artifacts by Open WebUI.
## How does Open WebUI's model create Artifacts?
To use artifacts in Open WebUI, a model must provide content that triggers the rendering process to create an artifact. This involves generating valid HTML, SVG code, or other supported formats for artifact rendering. When the generated content meets the criteria mentioned above, Open WebUI will display it as an interactive Artifact.
## How do I use Artifacts in Open WebUI?
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 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'."
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."
**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.
## 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.
## 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.
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.
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.
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.
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.
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.

6
docs/features/code-execution/index.md Normal file
View File

@@ -0,0 +1,6 @@
---
sidebar_position: 5
title: "🐍 Code Execution"
---
COMING SOON!

58
docs/features/code-execution/mermaid.md Normal file
View File

@@ -0,0 +1,58 @@
---
sidebar_position: 3
title: "🌊 MermaidJS Rendering"
---
# 🌊 MermaidJS Rendering Support in Open WebUI
## Overview
Open WebUI supports rendering of visually appealing MermaidJS diagrams, flowcharts, pie charts and more, directly within the chat interface. MermaidJS is a powerful tool for visualizing complex information and ideas, and when paired with the capabilities of a large language model (LLM), it can be a powerful tool for generating and exploring new ideas.
## Using MermaidJS in Open WebUI
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."
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.
## Visualizing MermaidJS Code Directly in the Chat
When you request a MermaidJS visualization, the Large Language Model (LLM) will generate the necessary code. Open WebUI will automatically render the visualization directly within the chat interface, as long as the code uses valid MermaidJS syntax.
If the model generates MermaidJS syntax, but the visualization does not render, it usually indicates a syntax error in the code. Don't worry – you'll be notified of any errors once the response has been fully generated. If this happens, try referencing the [MermaidJS documentation](https://mermaid.js.org/intro/) to identify the issue and revise the prompt accordingly.
## Interacting with Your Visualization
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.
### Example
```mermaid
graph TD;
A-->B;
B-->C{Decision};
C--Yes-->D;
C--No-->E;
D-->F;
E-->F;
```
This will generate a flowchart like the following:
```markdown
startAncestor [ start ]
A[A] --> B[B]
B --> C[Decision]
C -->| Yes | D[D]
C -->| No | E[E]
D --> F[F]
E --> F[F]
```
Experimenting with different types of diagrams and charts can help you develop a more nuanced understanding of how to effectively leverage MermaidJS within Open WebUI. For smaller models, consider referencing the [MermaidJS documentation](https://mermaid.js.org/intro/) to provide guidance for the LLM, or have it summarize the documentation into comprehensive notes or a system prompt. By following these guidelines and exploring the capabilities of MermaidJS, you can unlock the full potential of this powerful tool in Open WebUI.

71
docs/features/code-execution/python.md Normal file
View File

@@ -0,0 +1,71 @@
---
sidebar_position: 2
title: "🐍 Python Code Execution"
---
# 🐍 Python Code Execution
## Overview
Open WebUI allows for the client-side execution of Python code in the browser, utilizing Pyodide to run scripts within a code block in a chat. This feature enables Large Language Models (LLMs) to generate Python scripts that can be executed directly in the browser, leveraging a range of libraries supported by Pyodide.
To maintain user privacy and flexibility, Open WebUI mirrors PyPI packages, avoiding direct external network requests. This approach also enables the use of Pyodide in environments without internet access.
The Open WebUI frontend includes a self-contained WASM (WebAssembly) Python environment, powered by Pyodide, which can execute basic Python scripts generated by LLMs. This environment is designed for ease of use, requiring no additional setup or installation.
## Supported Libraries
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
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.
## Invoking Python Code Execution
To execute Python code, ask an LLM within a chat to write a Python script for you. Once the LLM has generated the code, a `Run` button will appear at the top right-hand side of the code block. Clicking this button will execute the code using Pyodide. To display the result at the bottom of a code block, ensure there is at least a single print statement within the code to display a result.
## 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.
## Pyodide Documentation
* [Pyodide Documentation](https://pyodide.org/en/stable/)
## Code Example
Here is an example of a simple Python script that can be executed using Pyodide:
```python
import pandas as pd
# Create a sample DataFrame
data = {'Name': ['John', 'Anna', 'Peter'],
'Age': [28, 24, 35]}
df = pd.DataFrame(data)
# Print the DataFrame
print(df)
```
This script will create a sample DataFrame using pandas and print it below the code block within your chat.
## Extending the List of Supported Libraries
Want to push the boundaries of what's possible? To extend the list of supported libraries, follow these steps:
1. **Fork the Pyodide repository** to create your own version.
2. **Choose new packages** from the existing list of packages within Pyodide or explore high-quality packages that Open WebUI currently lacks.
3. **Integrate the new packages** into your forked repository to unlock even more possibilities.