nextjs-ollama-llm-ui

项目介绍：nextjs-ollama-llm-ui

nextjs-ollama-llm-ui 是一个功能齐全且美观的网页界面，专为 Ollama 大语言模型 (LLM) 设计。项目的目标是让用户能够快速、简单地本地甚至离线运行大语言模型，而不需要繁琐的设置步骤。

项目特点 ✨

• 美观且直观的用户界面：界面设计灵感来源于 ChatGPT，旨在提供相似的用户体验。
• 完全本地化：聊天记录储存在本地存储中，无需运行数据库，使用更加便捷。
• 响应式设计：在手机上可以像在桌面上一样轻松聊天。
• 简单安装：无需复杂的安装步骤，只需克隆仓库代码即可使用。
• 代码语法高亮：对于包含代码的消息，支持语法高亮，便于阅读。
• 便捷复制代码块：一键即可复制高亮代码。
• 模型下载、删除功能：可以直接从界面下载或删除模型。
• 快速切换模型：快速单击即可切换不同的模型。
• 聊天记录管理：聊天记录被保存，便于访问和管理。
• 明暗模式切换：支持明暗模式之间切换，适应不同的使用环境。

使用预览

项目还提供了一个展示视频，可以在 GitHub 页面 观看。

使用要求 ⚙️

要使用该网页界面，需要满足以下条件：

1. 下载并运行 Ollama，也可以在 Docker 容器中运行。详细安装说明见 Ollama 文档。
2. 需要安装 Node.js (版本18以上) 和 npm，点击这里下载。

部署到 Vercel 或 Netlify ✨

使用一键部署功能，用户可以轻松将应用部署到 Vercel 或 Netlify 上：

• 在 Vercel 上部署
• 在 Netlify 上部署

在运行 Ollama 的机器上，需要设置环境变量 OLLAMA_ORIGINS：

OLLAMA_ORIGINS="https://your-app.vercel.app/"

安装指南 📖

可以通过支持的包管理器使用预构建包来运行该项目的本地环境，也可以按照以下步骤从源码安装：

从源码安装

1. 克隆代码仓库到本地目录：

   git clone https://github.com/jakobhoeg/nextjs-ollama-llm-ui
   

2. 打开项目文件夹：

   cd nextjs-ollama-llm-ui
   

3. 重命名环境配置文件：

   mv .example.env .env
   

4. 如果 Ollama 实例没有运行在默认 IP 地址和端口，需要修改 .env 文件中的变量以适应具体情况：

   NEXT_PUBLIC_OLLAMA_URL="http://localhost:11434"
   

5. 安装依赖：

   npm install
   

6. 启动开发服务器：

   npm run dev
   

然后可以在浏览器中访问 localhost:3000 开始与自己喜欢的模型聊天。

未来功能计划

即将新增的功能包括：

• ✅ 语音输入支持
• ✅ 代码语法高亮
• ✅ 在提示中发送图片以利用视觉语言模型的能力
• ✅ 能够重新生成响应
• ⬜️ 导入和导出聊天记录

技术栈

• NextJS - Web 开发的 React 框架
• TailwindCSS - 实用优先的 CSS 框架
• shadcn-ui - 基于 Radix UI 和 Tailwind CSS 构建的 UI 组件
• shadcn-chat - 用于 NextJS/React 项目的聊天组件
• Framer Motion - 用于 React 的动画库
• Lucide Icons - 图标库

相关链接

• Medium 文章 - Bartek Lewicz 分享的关于如何在 Google Colab 上免费快速部署 ChatGPT 克隆的教程。
• Lobehub 推荐 - 五个优秀免费的 Ollama WebUI 客户端推荐之一。