mirror of
https://github.com/open-webui/docs
synced 2025-06-16 03:18:14 +00:00
doc: intro update
This commit is contained in:
Timothy J. Baek
parent
4bac7145f2
commit
25eb3e3341
@ -1,48 +1,57 @@
|
||||
---
|
||||
sidebar_position: 0
|
||||
slug: /
|
||||
sidebar_position: 1
|
||||
title: 🏡 Home
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
# Open WebUI
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
**Open WebUI is ChatGPT-Style WebUI for various LLM runners**, supported LLM runners include Ollama and OpenAI-compatible APIs.
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://discord.gg/5rJgQTnV4s)
|
||||
[](https://github.com/sponsors/tjbck)
|
||||
|
||||
Get started by **creating a new site**.
|
||||
#### Installing with Docker 🐳
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
- **Important:** When using Docker to install Open WebUI, make sure to include the `-v open-webui:/app/backend/data` in your Docker command. This step is crucial as it ensures your database is properly mounted and prevents any loss of data.
|
||||
|
||||
### What you'll need
|
||||
- **If Ollama is on your computer**, use this command:
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
```bash
|
||||
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main
|
||||
```
|
||||
|
||||
## Generate a new site
|
||||
- **To build the container yourself**, follow these steps:
|
||||
|
||||
Generate a new Docusaurus site using the **classic template**.
|
||||
```bash
|
||||
docker build -t open-webui .
|
||||
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always open-webui
|
||||
```
|
||||
|
||||
The classic template will automatically be added to your project after you run the command:
|
||||
- After installation, you can access Open WebUI at [http://localhost:3000](http://localhost:3000).
|
||||
|
||||
```bash
|
||||
npm init docusaurus@latest my-website classic
|
||||
```
|
||||
#### Using Ollama on a Different Server
|
||||
|
||||
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
|
||||
- To connect to Ollama on another server, change the `OLLAMA_API_BASE_URL` to the server's URL:
|
||||
|
||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
||||
```bash
|
||||
docker run -d -p 3000:8080 -e OLLAMA_API_BASE_URL=https://example.com/api -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main
|
||||
```
|
||||
|
||||
## Start your site
|
||||
Or for a self-built container:
|
||||
|
||||
Run the development server:
|
||||
```bash
|
||||
docker build -t open-webui .
|
||||
docker run -d -p 3000:8080 -e OLLAMA_API_BASE_URL=https://example.com/api -v open-webui:/app/backend/data --name open-webui --restart always open-webui
|
||||
```
|
||||
|
||||
```bash
|
||||
cd my-website
|
||||
npm run start
|
||||
```
|
||||
|
||||
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
|
||||
|
||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
||||
|
||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
||||
Continue with the full [getting started guide](./getting-started.md).
|
||||
|
||||
@ -4,27 +4,582 @@
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #2e8555;
|
||||
--ifm-color-primary-dark: #29784c;
|
||||
--ifm-color-primary-darker: #277148;
|
||||
--ifm-color-primary-darkest: #205d3b;
|
||||
--ifm-color-primary-light: #33925d;
|
||||
--ifm-color-primary-lighter: #359962;
|
||||
--ifm-color-primary-lightest: #3cad6e;
|
||||
--ifm-color-primary: #327eff;
|
||||
--ifm-color-primary-dark: #2a2978;
|
||||
--ifm-color-primary-darker: #362771;
|
||||
--ifm-color-primary-darkest: #000000;
|
||||
--ifm-color-primary-light: hwb(216 27% 39%);
|
||||
--ifm-footer-background-color: #111;
|
||||
--ifm-color-primary-lighter: #7062c8;
|
||||
--ifm-color-primary-lightest: #6c87c5;
|
||||
--ifm-link-color: #333;
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
--ifm-hover-overlay: #fafafa;
|
||||
--ifm-heading-color: #111;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--ifm-menu-color: #000;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-container {
|
||||
border-width: 0px !important;
|
||||
}
|
||||
|
||||
/* .hiring-link {
|
||||
color: #fff;
|
||||
background-color: #3c8957;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.hiring-link:hover {
|
||||
color: #fff;
|
||||
background-color: #2a623e;
|
||||
} */
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
[data-theme="dark"] {
|
||||
--ifm-color-primary: #5693fc;
|
||||
--ifm-color-primary-dark: #21af90;
|
||||
--ifm-color-primary-darker: #1fa588;
|
||||
--ifm-color-primary-darkest: #1a8870;
|
||||
--ifm-color-primary-light: #29d5b0;
|
||||
--ifm-color-primary-lighter: #32d8b4;
|
||||
--ifm-color-primary-lightest: #4fddbf;
|
||||
--ifm-link-color: #ccc;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
--ifm-heading-color: #fff;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #eb5757;
|
||||
border-width: 0px;
|
||||
padding: 3px 8px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
[data-theme="light"] code {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
[data-theme="dark"] code {
|
||||
background-color: #111;
|
||||
}
|
||||
.theme-code-block {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.theme-code-block .token {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
}
|
||||
[data-theme="light"] .theme-code-block pre {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/* hide breadcrumbs from top of posts */
|
||||
.theme-doc-breadcrumbs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-menu.menu__list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
nav.menu {
|
||||
margin-right: 1px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
nav.menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
transition-property: none;
|
||||
line-height: 1.5;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
padding-left: 20px;
|
||||
/* word-spacing: 7px; */
|
||||
margin: 0px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 20px 30px;
|
||||
border-radius: 3px;
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
[data-theme="light"] blockquote {
|
||||
background-color: #f0f0f0;
|
||||
color: #000;
|
||||
}
|
||||
[data-theme="dark"] blockquote {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
[data-theme="light"] .pagination-nav__link:hover {
|
||||
border-color: #000;
|
||||
}
|
||||
[data-theme="dark"] .pagination-nav__link:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.navbar__logo {
|
||||
width: 3em;
|
||||
}
|
||||
[data-theme="light"] .navbar__brand:hover {
|
||||
color: #000;
|
||||
}
|
||||
[data-theme="dark"] .navbar__brand:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module {
|
||||
display: none;
|
||||
}
|
||||
/* .navbar__items svg {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
.pagination-nav__link {
|
||||
border-radius: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
[data-theme="light"] .pagination-nav__link {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
[data-theme="dark"] .pagination-nav__link {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
[data-theme="light"] .pagination-nav__link:hover {
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
[data-theme="dark"] .pagination-nav__link:hover {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.hero__subtitle {
|
||||
font-weight: 600;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
[data-theme="light"] .hero__subtitle {
|
||||
color: #000;
|
||||
}
|
||||
[data-theme="dark"] .hero__subtitle {
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn--black {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.btn--black:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.iconExternalLink_nPIU {
|
||||
display: none;
|
||||
}
|
||||
.btn--landing {
|
||||
border-radius: 0px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
[data-theme="light"] .hero--bg {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
[data-theme="dark"] .hero--bg {
|
||||
background-color: #111 !important;
|
||||
}
|
||||
|
||||
.hero--banner {
|
||||
padding: 10px !important;
|
||||
}
|
||||
.hero--banner,
|
||||
.hero--banner a {
|
||||
margin: 0px;
|
||||
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.homepage-svg svg {
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
padding: 20px;
|
||||
max-width: 200px;
|
||||
}
|
||||
[data-theme="light"] .homepage-svg svg {
|
||||
background-color: #fafafa;
|
||||
color: #000;
|
||||
}
|
||||
[data-theme="dark"] .homepage-svg svg {
|
||||
background-color: #111 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
[data-theme="dark"] .homepage-svg path {
|
||||
filter: invert(1);
|
||||
}
|
||||
.index-buttons {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.hero--container-small img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.footer__item .hiring-link {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.hiring-link {
|
||||
background-color: #ffde2d;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 997px) {
|
||||
.hero--container {
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.hero--container-small {
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 996px) {
|
||||
.hero--container {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.hero--container h2,
|
||||
.hero--container-small h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.hero--container-small {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.index-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.index-buttons a {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.hero--banner a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.hero__subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.homepage-svg svg {
|
||||
max-width: 120px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
article a {
|
||||
/* background-color: #f6f3d2; */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
article p a {
|
||||
text-decoration: underline;
|
||||
font-weight: 600;
|
||||
text-underline-position: under;
|
||||
margin-bottom: 5px;
|
||||
/* display: block; */
|
||||
}
|
||||
[data-theme="light"] article p a {
|
||||
color: #333;
|
||||
text-decoration-color: #bfbfbf;
|
||||
}
|
||||
[data-theme="dark"] article p a {
|
||||
color: #ccc;
|
||||
text-decoration-color: #454545;
|
||||
}
|
||||
[data-theme="light"] article p a:hover {
|
||||
color: #111;
|
||||
}
|
||||
[data-theme="dark"] article p a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu__link--active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.margin-bottom--sm {
|
||||
margin-top: 200px !important;
|
||||
margin-bottom: 200px !important;
|
||||
}
|
||||
|
||||
.footer__title {
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="light"] a.footer__link-item {
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="dark"] a.footer__link-item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="light"] .menu__link--active {
|
||||
color: #000;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
[data-theme="dark"] .menu__link--active {
|
||||
color: #fff;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 997px) {
|
||||
.menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.menu__list-item:not(:first-child) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
|
||||
border-right-width: 0px !important;
|
||||
}
|
||||
|
||||
/* from here - https://theochu.com/docusaurus/styling/ */
|
||||
@media screen and (max-width: 996px) {
|
||||
:root {
|
||||
--ifm-font-size-base: 18px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.hero .hero__title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 997px) {
|
||||
:root {
|
||||
--ifm-font-size-base: 17px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
article {
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--ifm-font-family-base: "Inter";
|
||||
}
|
||||
|
||||
/* Header Dropdown Menu */
|
||||
.dropdown__link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Remove shadow on the left */
|
||||
:root {
|
||||
--ifm-global-shadow-md: 0px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 997px) {
|
||||
/* Show inline table of contents on mobile only */
|
||||
div[class^="tableOfContentsInline"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
}
|
||||
|
||||
.tabs__item {
|
||||
padding: 3px 15px 2px 15px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
border-radius: 30px;
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.tabs__item:hover {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
.tabs__item--active {
|
||||
border-bottom: 0px;
|
||||
background-color: rgb(50 125 255);
|
||||
border-radius: 30px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.tabs__item--active:hover {
|
||||
background-color: rgb(50 125 255);
|
||||
}
|
||||
|
||||
.tabs + .margin-top--md {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
.tabs + .margin-top--md pre {
|
||||
border-top-right-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.hideTabSwitcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
background-color: rgba(120, 120, 120, 0.2);
|
||||
}
|
||||
|
||||
div.special_table + table {
|
||||
border: none;
|
||||
|
||||
/* border-collapse: separate; */
|
||||
/* border-spacing: 0px; */
|
||||
}
|
||||
|
||||
div.special_table + table thead {
|
||||
background: rgba(120, 120, 120, 0.1);
|
||||
border-top-right-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.special_table + table thead tr {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border-top: 0px;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
div.special_table + table tr th {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
div.special_table + table tr td {
|
||||
padding: 5px 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.special_table + table tr:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
div.special_table + table,
|
||||
th,
|
||||
td {
|
||||
border-width: 0px !important;
|
||||
}
|
||||
|
||||
.custom-tag {
|
||||
display: inline;
|
||||
background-color: #f0f0f0;
|
||||
padding: 3px 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7em;
|
||||
/* text-transform: uppercase; */
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.custom-tag:hover {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.select-language {
|
||||
font-size: 1em;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.navbar__link:has(div.custom-tag) {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.notbold a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.category-header .menu__list-item-collapsible {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.category-header .menu__link--sublist {
|
||||
text-transform: uppercase;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.category-header .menu__link--sublist-caret:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-link a::after {
|
||||
content: "\2192";
|
||||
font-size: 20px;
|
||||
margin-left: 5px; /* for spacing */
|
||||
transform: scaleX(-1) rotate(180deg);
|
||||
margin-left: 9px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user