基于浏览器运行的 Ollama WEB客户端开源发布

最新推荐文章于 2025-04-24 14:42:25 发布

原创最新推荐文章于 2025-04-24 14:42:25 发布 · 1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#前端

LocalAPI.ai 是一个开源的在线调用系统，专注于提供基于浏览器的 Ollama WEB UI客户端。该系统致力于为用户提供便捷、安全的 AI 服务体验，允许用户无需安装第三方软件即使用可进行智能对话、文本生成、模型管理等功能，并且支持在移动端（手机）进行远程使用。

在线体验： http://www.LocalAPI.ai

Github地址：https://github.com/vam876/LocalAPI.AI/

主要功能

• 远程调用：支持通过 API 远程调用 Ollama 模型，实现云端计算资源的高效利用。

• 兼容移动端：优化了浏览器的适配，用户可以在手机等移动设备上流畅地访问系统，进行远程模型调用和相关操作。

• 安全性增强：提供身份验证和访问控制机制，确保模型调用的安全性。

• 多模型支持：支持多种 Ollama 模型，满足不同场景下的需求。

• 代码高亮显示：在交互界面中，代码片段会自动进行语法高亮显示，提升代码可读性和编写效率。

快速部署

方式一

可直接下载集成LocalAPI.ai的Nginx，修改nginx.conf配置文件中的的Ollama API地址既可以一键启动 https://github.com/vam876/LocalAPI.AI/releases/tag/Bete

方式二

将以下文件部署到 web 服务即可快速访问：

│  index.html
│
└─assets
        index-6T7dvEla.js
        index-Bu-ZNHg4.css

使用 Nginx 反向代理（推荐）

利用 Nginx 的反向代理功能可以无需解决跨域限制，快速启动服务。以下是一个示例配置：

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;

    sendfile on;
    keepalive_timeout 65;

    # 禁用缓冲以支持流式响应
    proxy_buffering off;

    # 增大缓冲区设置，避免 502 Bad Gateway
    proxy_buffer_size 256k;
    proxy_buffers 4 256k;
    proxy_busy_buffers_size 512k;

    server {
        listen 80;  # 绑定80端口
        server_name your_domain_or_ip;  

        # 代理 Ollama 服务到 /api/
        location /api/ {
            proxy_pass http://127.0.0.1:11434/api/;  # 这里填写Ollama API服务的地址
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 处理 OPTIONS 请求
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
        }

        # 自定义 404 错误页面，重定向到首页
        error_page 404 /;
        location = / {
            internal;
        }

        # 可选：处理其他静态资源请求
        location / {
            try_files $uri $uri/ /;
        }
    }
}

请将 your_domain_or_ip 替换为你的实际域名或IP地址。