wps加载项结合大模型应用

1. 大模型的文字能力和word和办公的文字需求相当切合，与wps的加载项结合能较方便的结合wps的文字操作和大模型的文字能力。

1 起步

1.1 开发环境： wps加载项本质是一个前端项目

wps官方文档

wps加载项利用的是wps内置的一个浏览器，需要的环境是node环境 wps2019以上版本 wps提供了wpsjs库用于开发
npm install -g wpsjs 这里-g表示全局安装，安装在node包的公共目录中哦，不是一个项目的node_modules 之后再终端使用wpsjs应该能是能找到该命令 如果没有，检查自己node npm 环境变量path有没有配好 （windows用cmd powelshell不行）

然后用wpsjs create Hellowps 创建第一个项目。加载项类型有文字，表格演示。先选文字。然后会让你选UI框架 可以选Vue或React。推荐的是Vue,就选这个。 之后就生成了一个初始项目。

使用vite作为前端构建工具。wps加载项就是一个前端项目，不过可以集成wps选择文档，操作选中文字，插入，替换等wps操作。
项目用wpsjs debug启动 可以先摸索一下功能。
启动后 会自动拉起wps空白文档 然后如果没有显示HelloWps 就到工具/wps加载项 找到后启用 再不行就多重启几次wps

开发

主要的几个文件一个是public/ribbon.xml 对应上面 弹出消息框等按钮 然后对应的js实现在ribbon.js 页面的实现有两种方式，一种是对话窗格对应dialog.vue 一种是侧边窗格 对应taskpane。
如果只用大模型的对话生成接口，可以直接创建一个api.js 然后用fetch或者axios方式实现一些简单的大模型文字类接口。
如果有后端则用自己的后端
涉及到浏览器跨域的问题（没有返回，或者返回200但是没有响应内容）用vite的vite.config.js加上
server: {
host: ‘0.0.0.0’,
proxy: {
// ‘/v1’: ‘https://api.siliconflow.cn’ //这里用了硅基流动的接口
}
那么你发送的请求只要是以/v1开头的url都会代理成https://api.siliconflow.cn/v1 并且不会有跨域问题
之后就用wpsjs debug 命令不断测试完善即可

部署

部署分为在线部署和离线部署
离线部署的话就是不需要服务器 直接把对应离线部署的文件放在对应文件夹就行 在线部署就是在服务器上部署项目，然后访问对应的网址，拉取wps加载项。
wpsjs提供了部署的命令 wpsjs build 进行打包和 wpsjs publish 生成发布文件publish.html
两个命令都要选择是在线部署还是离线部署

离线部署

选择离线部署 离线部署即把打包好的文件放在用户本地的目录下
这个目录是wps设定好的读取加载项的目录
对应windows在appdata里面roaming 用下面命令在cmd中回车可以用资源管理器打开这个文件夹

start %Appdata%\kingsoft\wps\jsaddons

放入离线部署对应的两个文件，一个是wpsjs build打包的文件 一个是wpsjs publish 的发布文件 把这两个放入上面打开的目录中用户就可以使用了。适合纯前端项目，没有用到自己的后端的加载项。

在线部署

1. 在线部署需要用到服务器，流程和正常部署前端项目相同。 这里介绍用docker环境进行部署的流程。 首先需要服务器 然后下载docker。docker部署可以用docker-compose控制多个容器的启停。我们这里只有一个前端项目，所以也可以不用docker-compose。

2. 我们通过在线部署后有两个文件夹
   wps-addon-build -----(1)
   wps-addon-publish------(2)
   （1）是产物文件夹 相当于npm build得到的dist (2) 中只有一个发布文件 publish.html
   在输命令时需要输入你的服务器地址 直接输入http/https:ip:port/即可 也可以先随意输入地址，然后打开publish.html编辑 搜索curlist 然后可以修改服务器地址和加载项的名字。
   然后我们把publish.html放入wps-addon-build文件夹中，然后改名dist。
   之后就是正常部署前端项目。之前我们本地起项目用的是vite的代理，现在在服务器上我们使用nginx作为代理。
   
   文件目录是这样

 # nginx.conf
server {
    listen 80;
    server_name localhost; # 或你的域名

    location / {
        root /usr/share/nginx/html; # Docker 容器内 Nginx 服务静态文件的默认路径
        index index.html index.htm; # 当请求的是一个目录路径时（/结尾）时自动跳index按顺序会找目录下的index.html文件 index.htm文件 
        try_files $uri $uri/ /index.html; # 文件查找机制 先找url对应的文件，再找url目录下
    }

   # 可选：代理 API 请求到后端服务
    location /v1/ {
        proxy_pass https://api.siliconflow.cn/v1/;  #这里换成自己使用的api或者自己的后端
        proxy_set_header Host $proxy_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;
    }
    
    # 添加CORS头解决跨域问题
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

 #dockerfile

# 使用官方 Nginx 镜像作为基础镜像
FROM nginx:latest

# 将自定义的 Nginx 配置文件(上面的同目录nginx.conf)复制到容器中，覆盖默认配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 将前端构建的静态文件复制到 Nginx 的默认服务目录
COPY dist /usr/share/nginx/html

# 暴露 80 端口（Nginx 默认监听端口）
EXPOSE 80

# 启动 Nginx（使用 daemon off 以在前台运行，便于 Docker 管理）
CMD ["nginx", "-g", "daemon off;"]

```yaml
# docker-compose.yml
version: '3'  
services:
  web:
    build: .
    ports:
      - "8090:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    restart: always

• yaml配置文件大小写敏感，缩进使用空格，冒号后必须要有空格。 这里version表示指定 Docker Compose
  文件格式的版本，一般有2,3,3.x
• serices 是服务
  因为docker-compose是用来组织一个服务的，这个服务可能会包含多个容器，比如前端，后端，模型端，数据库，中间件，监控服务等等。这些容器会有依赖关系，可以设置depends_on,
  会连接在同一个网络，直接通过名称访问，代替主机名，可以设置network。然后可以通过environment设置一些环境变量。
• 给出的这个文件是单容器，build: . 用当前目录的dockerfile构建镜像，
  ports端口映射，把服务器的8090端口映射到容器的80端口。
• volumes 卷挂载，将服务器的目录与容器内目录双向绑定，方便修改。这里绑定了配置文件和打包产物。
• restart: 设定为always总是重启 还可以选择unless-stopped手动停止之外重启或者restart: on-failure: n非正常退出重启（最多n次）定时任务容器执行完成退出为正常退出。

在完成了文件目录的构建之后就是放在服务器上 然后用docker跑起来
首先安装docker和docker-compose 然后将docker的镜像源换成国内的镜像源，/etc/docker/daemon.json修改这个文件（没有就自己创建）加上

{
“registry-mirrors”: [
“docker-0.unsee.tech”,
“docker.1panel.live”
]

对于服务器一般都是linux系统，如果是windows直接修改docker desktop的setting。
然后可以自己拉取nginx镜像试一试
(sudo) docker pull nginx:latest
将服务跑起来只需要两步：1.构建镜像 (docker build)2. 命令行参数运行(docker run)/docker-compose运行（参数在docker-compose.yml文件里面）

1. 进入到上图的服务器目录（你已经把它放在服务器的某个位置，例如/home/my-app）
2. (sudo) docker build -t my-app-image:1.0 . (注意结尾有个点 . 表示从当前目录的dockerfile构建 有多个用 -f 加文件名)
   执行完可以用docker images | grep my 来查看 用docker rmi my-app-image:1.0/镜像id 来删除 用docker tag my-app-image:1.0 new-image-name: new 来更新标签
3. （sudo）docker run -d(后台) -p(端口映射) 8090:80 --name(容器名) my-app my-app-image:1.0(用的什么镜像)
   执行完可以用docker ps 查看所有运行的容器 docker ps -a查看所有容器 用|grep my-app 过滤即可。docker stop my-app/容器id 停止 start/restart重启 rm 删除
4. 可以用docker-compose命令替代上面的第二第三步。docker-compose up -d 会找到当前目录的docker-compose.yml文件执行，docker-compose down 停止
5. 运行起来之后可以用docker logs my-app查看日志 也可以docker logs -f --tail 20挂着实时看最新20行日志。

使用wps加载项
访问 https(http):ip:port(8090)/
会进入到index目录 看到访问成功后
进入/publish.html 加载项管理页面 点击安装即可（会拉起wps(需要2019以上wps版本)）
打开wps 如果是文本加载项，打开文字文稿，稍微等待就会和示例项目一样在工具旁边出现你的加载项了(*￣︶￣)。