open webui-二次开发-源码启动前后端工程-【超简洁步骤】

参考资料

openwebui docs

获取源码

git clone https://github.com/open-webui/open-webui && cd open-webui

启动后端服务

cd backend
conda create --name open-webui python=3.11
conda activate open-webui
pip install -r requirements.txt -U
sh dev.sh

没有conda的要先安装下,启动成功会后监听8080端口。

启动前端服务

回到代码根目录

npm i
npm run dev

启动成功后会监听5173端口,在浏览器就可以访问http://127.0.0.1:5173

常见问题解决

1.在访问前端服务时显示logo后会显示空白页面

这个问题是因为后端在获取模型列表,在获取模型列表时会访问openai,在国内无法访问,可以通过修改后端代码屏蔽掉这个逻辑,代码如下:

代码路径 backend/open_webui/utils/models.py

在这里插入图片描述
注释掉以上代码后可进入webui界面。

2.在相关界面有可能会遇到跨域问题,导致无法访问后端工程服务

解决问题思路是避免跨域,可以使用nginx代理合并端口,把80805173合并到8888进行访问,这样就规避了跨域问题。nginx配置参考如下:

    server {
        listen       8888;
        server_name  localhost;

        location / {
             proxy_pass http://127.0.0.1:5173/;
        }

        location /api/ {
          proxy_pass http://127.0.0.1:8080/api/;
        }

        location /ollama/ {
          proxy_pass http://127.0.0.1:8080/ollama/;
        }

        location /openai/ {
          proxy_pass http://127.0.0.1:8080/openai/;
        }
    }

如何修改ollama监听地址和端口

vi /etc/profile
添加如下一行
export OLLAMA_HOST=http://0.0.0.0:11434
source /etc/profile
然后重启ollama服务

插入个人广告,不喜欢可以不用往下看了

搭建属于你自己的WEB堡垒机系统,只要有浏览器就可以远程控制你的电脑,协议支持rdp,vnc,ssh
官方地址:百百WEB堡垒机 http://bb.yun-api.com/

### OpenWebUI 页面二次开发方法 对于希望对 OpenWebUI 进行定制化修改或扩展功能的开发者来说,掌握其架构和技术栈至关重要。通常情况下,OpenWebUI 是基于 Web 技术构建的人机交互界面。 #### 准备工作环境 确保本地已安装 Node.js 和 npm (Node Package Manager),因为大多数现代前端项目依赖这些工具来管理依赖项和执行脚本[^1]。 #### 获取源码并设置项目 从官方仓库克隆最新版本的 OpenWebUI 源代码到本地机器上: ```bash git clone https://github.com/OpenWebif/openwebif.git cd openwebif npm install ``` 这一步骤会下载所有必要的库文件,并准备好开发所需的资源[^2]。 #### 修改现有组件或创建新模块 要实现特定业务逻辑的功能增强,可以考虑以下几个方面: - **HTML/CSS/JavaScript**: 对现有的 HTML 文件进行结构调整;通过 CSS 自定义样式表单设计;利用 JavaScript 实现动态效果以及事件处理程序。 - **React 或 Vue 组件** : 如果应用程序采用了 React 或者 Vue 构建,则可以通过编写新的组件或者调整已有组件属性来进行更深层次的自定义操作[^3]. 为了更好地理解如何着手改造 UI ,建议先熟悉框架本身的结构布局及其所使用的模板引擎(如果有的话)。同时也可以参考一些开源社区贡献者的案例学习最佳实践方式[^4]。 #### 测试与调试 完成编码之后,在浏览器中预览更改的效果之前,应该运行测试套件验证一切正常运作无误。许多大型应用都会配备单元测试、集成测试甚至端到端自动化测试以保障质量控制水平达到预期标准[^5]。 ```javascript // 示例:简单的 Jest 单元测试函数 test('renders learn react link', () => { render(<App />); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值