README.md 11.7 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
# Ollama Web UI: A User-Friendly Web Interface for Chat Interactions 👋
Timothy J. Baek's avatar
Timothy J. Baek committed
2

Timothy J. Baek's avatar
Timothy J. Baek committed
3
4
5
![GitHub stars](https://img.shields.io/github/stars/ollama-webui/ollama-webui?style=social)
![GitHub forks](https://img.shields.io/github/forks/ollama-webui/ollama-webui?style=social)
![GitHub watchers](https://img.shields.io/github/watchers/ollama-webui/ollama-webui?style=social)
Timothy J. Baek's avatar
Timothy J. Baek committed
6
7
8
9
![GitHub repo size](https://img.shields.io/github/repo-size/ollama-webui/ollama-webui)
![GitHub language count](https://img.shields.io/github/languages/count/ollama-webui/ollama-webui)
![GitHub top language](https://img.shields.io/github/languages/top/ollama-webui/ollama-webui)
![GitHub last commit](https://img.shields.io/github/last-commit/ollama-webui/ollama-webui?color=red)
Timothy J. Baek's avatar
Timothy J. Baek committed
10
![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Follama-webui%2Follama-wbui&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)
Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
11
[![Discord](https://img.shields.io/badge/Discord-Ollama_Web_UI-blue?logo=discord&logoColor=white)](https://discord.gg/5rJgQTnV4s)
Timothy J. Baek's avatar
Timothy J. Baek committed
12
[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/tjbck)
Timothy J. Baek's avatar
Timothy J. Baek committed
13

Timothy J. Baek's avatar
Timothy J. Baek committed
14
15
16
17
ChatGPT-Style Web Interface for Ollama 🦙

![Ollama Web UI Demo](./demo.gif)

Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
18
19
Also check our sibling project, [OllamaHub](https://ollamahub.com/), where you can discover, download, and explore customized Modelfiles for Ollama! 🦙🔍

Timothy J. Baek's avatar
Timothy J. Baek committed
20
21
22
## Features ⭐

- 🖥️ **Intuitive Interface**: Our chat interface takes inspiration from ChatGPT, ensuring a user-friendly experience.
23

Timothy J. Baek's avatar
Timothy J. Baek committed
24
- 📱 **Responsive Design**: Enjoy a seamless experience on both desktop and mobile devices.
25

Timothy J. Baek's avatar
Timothy J. Baek committed
26
-**Swift Responsiveness**: Enjoy fast and responsive performance.
27

Timothy J. Baek's avatar
Timothy J. Baek committed
28
- 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience.
29

Timothy J. Baek's avatar
Timothy J. Baek committed
30
31
32
33
- 💻 **Code Syntax Highlighting**: Enjoy enhanced code readability with our syntax highlighting feature.

- ✒️🔢 **Full Markdown and LaTeX Support**: Elevate your LLM experience with comprehensive Markdown and LaTeX capabilities for enriched interaction.

34
35
- 📥🗑️ **Download/Delete Models**: Easily download or remove models directly from the web UI.

Timothy J. Baek's avatar
Timothy J. Baek committed
36
- 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions.
37

Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
38
39
- 🗃️ **Modelfile Builder**: Easily create Ollama modelfiles via the web UI. Create and add your own character to Ollama by customizing system prompts, conversation starters, and more.

Timothy J. Baek's avatar
Timothy J. Baek committed
40
- ⚙️ **Many Models Conversations**: Effortlessly engage with various models simultaneously, harnessing their unique strengths for optimal responses. Enhance your experience by leveraging a diverse set of models in parallel.
Timothy J. Baek's avatar
Timothy J. Baek committed
41

Timothy J. Baek's avatar
Timothy J. Baek committed
42
43
- 🤝 **OpenAI Model Integration**: Seamlessly utilize OpenAI models alongside Ollama models for a versatile conversational experience.

Timothy J. Baek's avatar
Timothy J. Baek committed
44
45
- 🔄 **Regeneration History Access**: Easily revisit and explore your entire regeneration history.

46
- 📜 **Chat History**: Effortlessly access and manage your conversation history.
47

Timothy J. Baek's avatar
Timothy J. Baek committed
48
- 📤📥 **Import/Export Chat History**: Seamlessly move your chat data in and out of the platform.
49

Timothy J. Baek's avatar
Timothy J. Baek committed
50
- 🗣️ **Voice Input Support**: Engage with your model through voice interactions; enjoy the convenience of talking to your model directly. Additionally, explore the option for sending voice input automatically after 3 seconds of silence for a streamlined experience.
Timothy J. Baek's avatar
Timothy J. Baek committed
51

Timothy J. Baek's avatar
Timothy J. Baek committed
52
- ⚙️ **Fine-Tuned Control with Advanced Parameters**: Gain a deeper level of control by adjusting parameters such as temperature and defining your system prompts to tailor the conversation to your specific preferences and needs.
53

Timothy J. Baek's avatar
Timothy J. Baek committed
54
55
- 🔐 **Auth Header Support**: Effortlessly enhance security by adding Authorization headers to Ollama requests directly from the web UI settings, ensuring access to secured Ollama servers.

Timothy J. Baek's avatar
Timothy J. Baek committed
56
- 🔗 **External Ollama Server Connection**: Seamlessly link to an external Ollama server hosted on a different address by configuring the environment variable during the Docker build phase. Additionally, you can also set the external server connection URL from the web UI post-build.
57

Timothy J. Baek's avatar
Timothy J. Baek committed
58
- 🔒 **Backend Reverse Proxy Support**: Strengthen security by enabling direct communication between Ollama Web UI backend and Ollama, eliminating the need to expose Ollama over LAN.
59

Timothy J. Baek's avatar
Timothy J. Baek committed
60
61
- 🌟 **Continuous Updates**: We are committed to improving Ollama Web UI with regular updates and new features.

Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
62
63
64
65
## 🔗 Also Check Out OllamaHub! 

Don't forget to explore our sibling project, [OllamaHub](https://ollamahub.com/), where you can discover, download, and explore customized Modelfiles. OllamaHub offers a wide range of exciting possibilities for enhancing your chat interactions with Ollama! 🚀

Timothy J. Baek's avatar
Timothy J. Baek committed
66
67
## How to Install 🚀

68
### Installing Both Ollama and Ollama Web UI Using Docker Compose
Timothy J. Baek's avatar
Timothy J. Baek committed
69

70
If you don't have Ollama installed yet, you can use the provided Docker Compose file for a hassle-free installation. Simply run the following command:
Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
71
72

```bash
Timothy J. Baek's avatar
Timothy J. Baek committed
73
docker compose up -d --build
Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
74
75
```

Timothy J. Baek's avatar
Timothy J. Baek committed
76
This command will install both Ollama and Ollama Web UI on your system. Ensure to modify the `compose.yaml` file for GPU support and Exposing Ollama API outside the container stack if needed.
Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
77

78
79
80
81
82
83
84
### Installing Ollama Web UI Only

#### Prerequisites

Make sure you have the latest version of Ollama installed before proceeding with the installation. You can find the latest version of Ollama at [https://ollama.ai/](https://ollama.ai/).

##### Checking Ollama
Timothy J. Baek's avatar
Timothy J. Baek committed
85

86
After installing Ollama, verify that Ollama is running by accessing the following link in your web browser: [http://127.0.0.1:11434/](http://127.0.0.1:11434/). Note that the port number may differ based on your system configuration.
Timothy J. Baek's avatar
Timothy J. Baek committed
87

88
#### Using Docker 🐳
Timothy J. Baek's avatar
Timothy J. Baek committed
89

90
If Ollama is hosted on your local machine and accessible at [http://127.0.0.1:11434/](http://127.0.0.1:11434/), run the following command:
Timothy J. Baek's avatar
Timothy J. Baek committed
91
92

```bash
93
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway --name ollama-webui --restart always ghcr.io/ollama-webui/ollama-webui:main
Timothy J. Baek's avatar
Timothy J. Baek committed
94
95
```

96
Alternatively, if you prefer to build the container yourself, use the following command:
Timothy J. Baek's avatar
Timothy J. Baek committed
97
98

```bash
99
100
docker build -t ollama-webui .
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway --name ollama-webui --restart always ollama-webui
Timothy J. Baek's avatar
Timothy J. Baek committed
101
102
```

103
Your Ollama Web UI should now be hosted at [http://localhost:3000](http://localhost:3000) and accessible over LAN (or Network). Enjoy! 😄
Timothy J. Baek's avatar
Timothy J. Baek committed
104

105
#### Accessing External Ollama on a Different Server
106

Timothy J. Baek's avatar
Timothy J. Baek committed
107
Change `OLLAMA_API_BASE_URL` environment variable to match the external Ollama Server url:
Timothy J. Baek's avatar
Timothy J. Baek committed
108
109

```bash
Timothy J. Baek's avatar
Timothy J. Baek committed
110
111
112
113
114
115
116
117
docker run -d -p 3000:8080 -e OLLAMA_API_BASE_URL=https://example.com/api --name ollama-webui --restart always ghcr.io/ollama-webui/ollama-webui:main
```

Alternatively, if you prefer to build the container yourself, use the following command:

```bash
docker build -t ollama-webui .
docker run -d -p 3000:8080 -e OLLAMA_API_BASE_URL=https://example.com/api --name ollama-webui --restart always ollama-webui
Timothy J. Baek's avatar
Timothy J. Baek committed
118
119
```

120
## How to Install Without Docker
121

122
123
While we strongly recommend using our convenient Docker container installation for optimal support, we understand that some situations may require a non-Docker setup, especially for development purposes. Please note that non-Docker installations are not officially supported, and you might need to troubleshoot on your own.

124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
### TL;DR

Run the following commands to install:

```sh
git clone https://github.com/ollama-webui/ollama-webui.git
cd ollama-webui/

# Building Frontend
cp -RPp example.env .env
npm i
npm run build

# Serve Frontend with the Backend
cd ./backend
pip install -r requirements.txt
sh start.sh
```
You should have the Ollama Web UI up and running at http://localhost:8080/. Enjoy! 😄

144
145
146
147
148
149
150
### Project Components

The Ollama Web UI consists of two primary components: the frontend and the backend (which serves as a reverse proxy, handling static frontend files, and additional features). Both need to be running concurrently for the development environment using `npm run dev`. Alternatively, you can set the `PUBLIC_API_BASE_URL` during the build process to have the frontend connect directly to your Ollama instance or build the frontend as static files and serve them with the backend.

### Prerequisites

1. **Clone and Enter the Project:**
151
152

   ```sh
153
   git clone https://github.com/ollama-webui/ollama-webui.git
154
   cd ollama-webui/
155
156
   ```

157
2. **Create and Edit `.env`:**
158
159

   ```sh
160
   cp -RPp example.env .env
161
   ```
162

163
164
165
### Building Ollama Web UI Frontend

1. **Install Node Dependencies:**
166

167
   ```sh
168
   npm install
169
   ```
170

171
2. **Run in Dev Mode or Build for Deployment:**
172

173
   - Dev Mode (requires the backend to be running simultaneously):
174

175
176
177
     ```sh
     npm run dev
     ```
178

179
   - Build for Deployment:
180

181
     ```sh
182
     # `PUBLIC_API_BASE_URL` overwrites the value in `.env`
183
184
     PUBLIC_API_BASE_URL='https://example.com/api' npm run build
     ```
185

186
3. **Test the Build with `Caddy` (or your preferred server):**
187
188
189
190
191
192
193
194

   ```sh
   curl https://webi.sh/caddy | sh

   PUBLIC_API_BASE_URL='https://localhost/api' npm run build
   caddy run --envfile .env --config ./Caddyfile.localhost
   ```

195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
### Running Ollama Web UI Backend

If you wish to run the backend for deployment, ensure that the frontend is built so that the backend can serve the frontend files along with the API route.

#### Setup Instructions

1. **Install Python Requirements:**

   ```sh
   cd ./backend
   pip install -r requirements.txt
   ```

2. **Run Python Backend:**

   - Dev Mode with Hot Reloading:

     ```sh
     sh dev.sh
     ```

   - Deployment:

     ```sh
     sh start.sh
     ```

Now, you should have the Ollama Web UI up and running at [http://localhost:8080/](http://localhost:8080/). Feel free to explore the features and functionalities of Ollama! If you encounter any issues, please refer to the instructions above or reach out to the community for assistance.

224
225
## Troubleshooting

226
See [TROUBLESHOOTING.md](/TROUBLESHOOTING.md) for information on how to troubleshoot and/or join our [Ollama Web UI Discord community](https://discord.gg/5rJgQTnV4s).
227

Timothy J. Baek's avatar
Timothy J. Baek committed
228
229
## What's Next? 🚀

Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
230
### Roadmap 📝
Timothy J. Baek's avatar
Timothy J. Baek committed
231

Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
232
Here are some exciting tasks on our roadmap:
Timothy J. Baek's avatar
Timothy J. Baek committed
233

Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
234
235
236

- 🔄 **Multi-Modal Support**: Seamlessly engage with models that support multimodal interactions, including images (e.g., LLava).
- 📚 **RAG Integration**: Experience first-class retrieval augmented generation support, enabling chat with your documents.
Timothy J. Baek's avatar
Timothy J. Baek committed
237
- 🔐 **Access Control**: Securely manage requests to Ollama by utilizing the backend as a reverse proxy gateway, ensuring only authenticated users can send specific requests.
Timothy J. Baek's avatar
Timothy J. Baek committed
238
239
- 🧪 **Research-Centric Features**: Empower researchers in the fields of LLM and HCI with a comprehensive web UI for conducting user studies. Stay tuned for ongoing feature enhancements (e.g., surveys, analytics, and participant tracking) to facilitate their research.
- 📈 **User Study Tools**: Providing specialized tools, like heat maps and behavior tracking modules, to empower researchers in capturing and analyzing user behavior patterns with precision and accuracy.
Timothy J. Baek's avatar
Timothy J. Baek committed
240
241
242
243
- 📚 **Enhanced Documentation**: Elevate your setup and customization experience with improved, comprehensive documentation.

Feel free to contribute and help us make Ollama Web UI even better! 🙌

244
245
246
## Supporters ✨

A big shoutout to our amazing supporters who's helping to make this project possible! 🙏
Timothy J. Baek's avatar
Timothy J. Baek committed
247

248
### Platinum Sponsors 🤍
Timothy J. Baek's avatar
Timothy J. Baek committed
249

250
- [Prof. Lawrence Kim @ SFU](https://www.lhkim.com/)
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253

## License 📜

Timothy J. Baek's avatar
Timothy J. Baek committed
254
This project is licensed under the [MIT License](LICENSE) - see the [LICENSE](LICENSE) file for details. 📄
Timothy J. Baek's avatar
Timothy J. Baek committed
255
256
257

## Support 💬

Timothy J. Baek's avatar
Timothy J. Baek committed
258
If you have any questions, suggestions, or need assistance, please open an issue or join our
Timothy Jaeryang Baek's avatar
Timothy Jaeryang Baek committed
259
[Ollama Web UI Discord community](https://discord.gg/5rJgQTnV4s) or
Timothy J. Baek's avatar
Timothy J. Baek committed
260
[Ollama Discord community](https://discord.gg/ollama) to connect with us! 🤝
Timothy J. Baek's avatar
Timothy J. Baek committed
261
262
263

---

264
Created by [Timothy J. Baek](https://github.com/tjbck) - Let's make Ollama Web UI even more amazing together! 💪