Ubuntu24.04/Open WebUI+Ollama 本地部署

Ubuntu24.04/Open WebUI+Ollama 本地部署

官方文档

🏡 首页 | Open WebUI 文档

本地部署

  • 连接本地 Ollama 服务:

使用服务器测试了下:初次对话耗时较长,后续效率还不错;目前无法联网(废话)

[图片]

对话中即可选择模型:不过我的硬件不支持,所以就先不做测试了

[图片]

修改 Ollama 配置:宿主机 Ollama 服务地址:http://host.docker.internal:11434(我猜你不想一个一个字母敲,就直接大胆使用“cv大法”吧)

[图片]


[图片]

查看本地模型 ID:

[图片]

管理员面板/设置/外部连接

[图片]

运行页面:

[图片]

使用 Docker Compose 封装运行:其中镜像拉取速度比较慢

docker compose up -d 

修改配置文件:由于本地已经运行了 Ollama 服务,所以需要修改docker-compose.yaml以及.env文件中关于 Ollama 的配置

cd open-webui cp .env.example .env 
# .env # Ollama URL for the backend to connect The path '/ollama' will be redirected to the specified # backend URL OLLAMA_BASE_URL='http://host.docker.internal:11434' # AUTOMATIC1111_BASE_URL="http://localhost:7860" # For production, you should only need one host as # fastapi serves the svelte-kit built frontend and backend from the same host and port. # To test with CORS locally, you can set something like # CORS_ALLOW_ORIGIN='http://localhost:5173;http://localhost:8080' CORS_ALLOW_ORIGIN='*' # For production you should set this to match the proxy configuration (127.0.0.1) FORWARDED_ALLOW_IPS='*' # DO NOT TRACK SCARF_NO_ANALYTICS=true DO_NOT_TRACK=true ANONYMIZED_TELEMETRY=false 
# docker-compose.yml# 删除 Ollama 服务的配置以及 open-webui 的依赖,修改环境变量中的 Ollama 地址services:open-webui:build:context: . dockerfile: Dockerfile image: ghcr.io/open-webui/open-webui:${WEBUI_DOCKER_TAG-main}container_name: open-webui volumes:- open-webui:/app/backend/data ports:- ${OPEN_WEBUI_PORT-3000}:8080environment:-'OLLAMA_BASE_URL=http://host.docker.internal:11434'-'WEBUI_SECRET_KEY='extra_hosts:- host.docker.internal:host-gateway restart: unless-stopped volumes:ollama:{}open-webui:{}

Git 拉取项目:

git clone https://ghfast.top/https://github.com/open-webui/open-webui.git 

联网搜索

  • 本地部署 SearXNG(如有需要或者作者心情好,后续会详细开篇文章;不过根据 Open WebUI 官方文档,相信你也可以);优化部分参考官方文档:SearXNG | Open WebUI 文档
    注意
    • 配置 SearXNG 的搜索引擎,禁用 Brave、DuckDuckGo、Google、Wikipedia等国外搜索引擎(莫怪作者懒得“科学上网”),启用 360search、Bing、Sogou、Baidu(百度可能会触发反爬机制,抛出验证码限制搜索访问;一旦被抓,就是同一 IP 被禁 24h;作者目前还没有解禁『悲』)

开启联网搜索:由于硬件以及模型的限制,虽然进行了联网搜索,但是结果不尽人意;换了好设备和模型,效果就很好了(旧的呢,继续用呗,还能撇了?)

[图片]


[图片]


[图片]

配置 Open WebUI 的页面搜索配置:注意开启最上面的联网搜索、配置宿主机中的 SearXNG 访问地址:http://host.docker.internal:8080/search?q=<query>;否则在对话窗口中无法开启联网搜索、无法连接到 SearXNG 的服务

[图片]

配置 docker-compose.yaml 中的 Caddy 端口映射以及取消 host 网络模式,否则被 Firefox 浏览器占用端口

# docker-compose.yamlcaddy:container_name: caddy image: docker.io/library/caddy:2-alpine # network_mode: hostrestart: unless-stopped ports:-"8081:8081"volumes:- ./Caddyfile:/etc/caddy/Caddyfile:ro - caddy-data:/data:rw - caddy-config:/config:rw environment:- SEARXNG_HOSTNAME=${SEARXNG_HOSTNAME:-http://localhost}- SEARXNG_TLS=${LETSENCRYPT_EMAIL:-internal}logging:driver:"json-file"options:max-size:"1m"max-file:"1"

注意事项

  • 使用 SearXNG 联网时,注意按照官方文档配置搜索引擎以及添加 json 格式
  • 所有系统级配置均在管理员面板/设置中管理
  • 连 1.7B 的大模型都运行乏力,哈基机你这家伙,这就燃尽了么

每次启用 Docker 容器时,需要一些加载时间,当出现下图最后几段日志的时候就是加载完成了:

[图片]

Read more

技术拆解:《从音频到动效:我是如何用 Web Audio API 拆解音乐的?》

技术拆解:《从音频到动效:我是如何用 Web Audio API 拆解音乐的?》

🎵 从音频到动效:我是如何用 Web Audio API 拆解音乐的? 「家人们谁懂啊!写完音乐可视化项目后,我终于搞懂了电脑是怎么『听懂』音乐的!今天就把最硬核的『音频解析』部分扒得干干净净,连代码带原理一起唠明白~」 做这个 HTML5 实时音频可视化项目时,参考了 ZEEKLOG 上《基于 HTML5 Canvas 与 Web Audio API 的实时音频可视化工具开发》这篇文章的核心技术框架,主要借鉴了 Web Audio API 中 AnalyserNode 的基础使用、FFT 频域转换的流程以及 Canvas 实时渲染的基础思路,帮我快速搭好了项目的底层骨架。 但在实际开发中,我在原基础上做了不少可视化效果的扩展和细节设计的打磨,新增了自己想要的可视化表现形式,也针对实际使用中的小问题做了定制化优化,让整个工具的视觉效果和使用体验更贴合自己的设计需求,下面具体说说我做的这些扩展和优化。 一、先看效果:

Git-RSCLIP智能相册开发:Vue前端+Node.js后端全栈实现

Git-RSCLIP智能相册开发:Vue前端+Node.js后端全栈实现 你是不是也有过这样的经历?手机里存了几千张照片,想找一张“去年夏天在海边拍的、有红色遮阳伞和狗狗”的照片,结果翻了半小时也没找到。传统的相册应用只能按时间、地点或手动添加的标签来搜索,一旦标签没打好,照片就像石沉大海。 现在,情况不一样了。想象一下,你只需要在搜索框里输入“红色汽车的照片”,或者“有彩虹的风景照”,系统就能瞬间从成千上万张照片中精准地找到它们。这听起来像是科幻电影里的场景,但今天,我们就要用Git-RSCLIP模型,结合Vue3和Node.js,亲手把它变成现实。 这篇文章,我就带你一步步搭建一个基于自然语言搜索的智能相册系统。我们不用去理解复杂的深度学习算法,而是聚焦于如何将前沿的AI能力,通过一套清晰、可落地的全栈技术方案,变成一个真正能用的产品。无论你是前端开发者想了解如何接入AI能力,还是后端工程师想学习向量数据库的应用,都能在这里找到答案。 1. 为什么我们需要智能相册? 在开始敲代码之前,我们先聊聊为什么传统的相册管理方式已经不够用了。 我自己的手机里大概有8000多张照

用一篇文章带你搞懂 WebRTC + Java 信令服务器 + Vue 实时视频聊天

很多同学用过微信、QQ 视频聊天,但一问到底层怎么实现,十有八九只会说一句:“应该是 WebSocket / WebRTC 吧?”——但是: * WebRTC 到底负责什么? * WebSocket / Netty 在里面干嘛? * STUN / ICE / SDP 是啥?为什么一上来就一堆名词? 这篇文章会用一套完整的小项目,从 0 到 1 带你实现一个: 基于 WebRTC + Java(SpringBoot + Netty)+ Vue 的点对点视频聊天 Demo 重点是: 不是只给你一堆代码,而是把每个概念都讲清楚,让小白也能看懂、改得动、举一反三。 一、整体架构总览:谁负责干什么? 先看一张逻辑图(可以脑补成 PPT): ┌────────────────────────────────────────────┐ │ 后端(Java) │ │ │ │ SpringBoot 负责: