Ollama Web UI Lite 全面使用指南

一、功能解析：核心能力概览

开始使用前需了解，Ollama Web UI Lite 是一款基于 [Svelte] 框架构建的轻量级界面工具，专为本地 [LLM]（大语言模型）交互设计。它通过简洁的界面提供模型选择、对话管理和高级参数配置功能，技术栈包含 [TypeScript] 类型系统和 [Vite] 构建工具，确保开发体验与运行性能的平衡。

二、快速上手：从安装到启动

2.1 环境准备

📌 前提条件：确保已安装 Node.js (v14+) 和 npm 包管理器。

2.2 项目获取与依赖安装

🔍 获取代码库：

git clone https://gitcode.com/gh_mirrors/ol/ollama-webui-lite
cd ollama-webui-lite

📌 安装依赖：

npm ci

2.3 启动应用

🔍 开发模式启动：

npm run dev

应用将运行在 http://localhost:3000，支持代码热更新。

三、核心模块：文件布局与功能解析

掌握这些文件即可自定义界面与功能，项目采用模块化架构设计，关键目录结构如下：

.
├── src/                      # 应用源代码根目录
│   ├── app.html              # 应用入口 HTML 文件
│   ├── lib/                  # 共享库模块
│   │   ├── components/       # UI组件库（对话/布局等）
│   │   ├── constants.ts      # 应用常量定义
│   │   ├── stores/           # [状态管理] 存储模块
│   │   └── utils/            # 工具函数集合
│   ├── routes/               # [路由系统] 页面定义
│   │   ├── (app)/            # 主应用路由分组
│   │   └── +layout.svelte    # 全局布局组件
│   └── tailwind.css          # Tailwind CSS 入口文件
├── static/                   # 静态资源目录
│   ├── assets/fonts/         # 字体资源
│   └── favicon.png           # 网站图标
├── package.json              # 项目元数据与依赖配置
├── vite.config.ts            # Vite 构建配置
└── tsconfig.json             # TypeScript 编译配置

四、核心配置系统解析

4.1 项目配置文件

📌 package.json
定义项目依赖与开发脚本，核心脚本说明：

{
  "scripts": {
    "dev": "vite dev",        // 启动开发服务器
    "build": "vite build",    // 生产环境构建
    "preview": "vite preview" // 预览构建结果
  }
}

📌 vite.config.ts
Vite 构建工具配置，控制开发服务器端口、构建输出等：

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
  plugins: [sveltekit()],
  server: {
    port: 3000 // 开发服务器端口
  }
};

export default config;

📌 tsconfig.json
TypeScript 编译配置，定义类型检查规则与模块解析方式。

五、典型场景应用示例

场景1：自定义模型选择列表

1. 打开 src/lib/constants.ts 文件
2. 在 MODELS 常量数组中添加新模型定义：

export const MODELS = [
  { value: "llama2", label: "Llama 2" },
  { value: "mistral", label: "Mistral" },
  { value: "custom", label: "自定义模型" } // 新增模型
];

场景2：调整对话界面样式

1. 打开 src/app.css 文件
2. 添加自定义 CSS 规则修改对话气泡样式：

/* 自定义用户消息气泡 */
.message.user {
  background-color: #3b82f6;
  border-radius: 18px 18px 4px 18px;
}

/* 自定义助手消息气泡 */
.message.assistant {
  background-color: #1e293b;
  border-radius: 18px 18px 18px 4px;
}

六、常见问题速查

Q1：启动时报端口占用错误？

🔍 解决方案：修改 vite.config.ts 中的 server.port 配置，指定未被占用的端口号（如 3001）。

Q2：如何清除对话历史记录？

🔍 解决方案：在界面点击右上角「设置」图标，选择「清除对话历史」选项，或直接删除 localStorage 中的 chatHistory 键值对。

Q3：修改代码后界面无变化？

🔍 解决方案：检查是否保存文件，若使用开发服务器 (npm run dev) 仍无变化，可尝试停止服务器后重新启动。

七、高级配置：深度自定义指南

7.1 调整 API 连接参数

修改 src/lib/utils/index.ts 中的 API 基础 URL：

// 修改 Ollama API 基础路径
export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:11434/api";

7.2 添加环境变量

1. 在项目根目录创建 .env 文件
2. 添加自定义环境变量：

VITE_API_URL=http://your-ollama-server:11434/api
VITE_DEFAULT_MODEL=llama2

3. 在代码中通过 import.meta.env.VITE_* 访问

图：Ollama Web UI Lite 主界面预览