【亲测免费】 Ollama WebUI 安装与使用指南

Ollama WebUI 安装与使用指南

【免费下载链接】ollama-webui ChatGPT-Style Web UI Client for Ollama 🦙 项目地址: https://gitcode.com/gh_mirrors/ol/ollama-webui

1. 项目目录结构及介绍

Ollama WebUI 的目录结构是这样的：

ollama-webui/
├── README.md          # 项目简介
├── vite.config.ts      # Vite 构建配置
├── package.json        # 项目依赖和脚本
├── public/             # 静态资源目录
│   └── index.html       # 主页模板
├── src/                # 源代码目录
│   ├── components/     # 组件库
│   ├── views/          # 视图路由
│   ├── store/           # Vuex 状态管理
│   ├── api/             # 接口调用模块
│   └── ...              # 其他源码文件
├── .env.example         # 环境变量示例
└── docker-compose.yml   # Docker Compose 配置文件

这个目录结构中，src/ 是主要的代码仓库，包含了应用的核心逻辑；public/ 存放静态资源，如 HTML 文件；.env.example 提供了环境变量的示例，用于在运行时配置应用。

2. 项目启动文件介绍

启动 Ollama WebUI 可以通过执行 npm run serve 来进行本地开发模式，这将使用 Vite 进行热加载和编译。生产环境下，可以使用 npm run build 编译项目，然后使用 Docker 或者 Docker Compose 部署。

在 docker-compose.yml 文件中，你可以找到关于如何使用 Docker 部署项目的配置，包括映射本地卷到容器内以持久化数据，以及设置端口映射。

3. 项目的配置文件介绍

.env 文件

在实际运行时，你需要创建一个 .env 文件（基于 .env.example），并在此处定义你的环境变量，例如：

VUE_APP_API_ENDPOINT=http://your-api-endpoint.com
VUE_APP_OLLAMA_PATH=/path/to/your/ollama/models

这些变量会被应用在 Vue 应用中，以便连接到你的 LLM runner 和指向模型文件的路径。

docker-compose.yml 文件

在 docker-compose.yml 文件中，你可以配置服务（如 webui）的相关参数，比如容器内的环境变量、挂载的卷、暴露的端口等：

version: '3'
services:
  webui:
    image: ghcr.io/open-webui/open-webui:latest
    restart: always
    volumes:
      - ./data:/app/backend/data
      - /path/to/your/ollama:/root/ollama
    ports:
      - "3000:8080"
    environment:
      - OLLAMA_PATH=/root/ollama

在这个例子中，OLLAHA_PATH 设置了 Ollama 模型的路径，而 ./data 则是用来存储应用数据的本地目录。

请注意，这些配置仅作为指导，您可能需要根据您的具体环境进行调整。在部署前，请确保所有路径和端口正确无误。

以上就是 Ollama WebUI 的安装和基本配置步骤，祝你使用愉快！

【免费下载链接】ollama-webui ChatGPT-Style Web UI Client for Ollama 🦙 项目地址: https://gitcode.com/gh_mirrors/ol/ollama-webui