嫌弃你的牛夫人没有AI？看我教你一招强行给老古董插上AI的翅膀！-CSDN博客

本文链接：https://blog.csdn.net/tyysoft/article/details/145720230

1 嫌弃你的牛夫人没有AI？看我教你一招强行给老古董插上AI的翅膀！

1.1 背景

在AI编程大行其道的背景下，各种AI编程工具：Cursor、VSCode的各种插件、Trae等等搞得不亦乐乎！您是否很苦恼自己使用的工具居然不支持AI，就像作者最爱的文本编辑器EverEdit，它没有原生AI的支持，技术群一片苦苦呼唤而不得？
本着求人不如求己的原则，作者摸索了一天EverEdit的插件语法及AI平台的接口，做出了一个在EverEdit中使用AI的原型，希望通过这个总结，可以启发您给自己的日常工具插上AI的翅膀！

1.2 准备工作

1.2.1 申请AI账号：账号注册

注：注册账号时输入手机号、验证码，其他保持不变。

🕮说明：
为什么选择“硅基流动”平台：该平台提供近30款免费AI模型、和近60款价格不一的付费AI模型，且注册赠送2000万tokens，个人可以使用很久。

1.3 制作EverEdit的AI插件

由于我们希望有一个独立的对话窗口用于输入任务给AI，所以需要使用EverEdit的Web形式插件。

1.3.1 制作1个html页面用于在EverEdit中输入任务及向AI平台发送请求

这个html做了如下几件事：

提供操作界面
读取本地ai_setting.ini文件中密钥、模型等参数
读取html页面中用户输入的任务
将任务描述通过AI平台的API接口发送给平台
接收AI平台的响应并解析
将解析后的内容打印到html页面的日志窗口
将解析后的内容插件到EverEdit当前光标位置

好吧，这个html页面也是AI生成的，我本人也会点html、css、javascript，但不经常用所以荒疏了，要速度把这3者结合起来，生成一个可用的html页面，可能要花个1天，而AI给我生成的这个页面，前后调试加需求修改，只花了不到1小时(时间主要花在我的思考)。
html界面如下：
在这里插入图片描述
注：由于作者只介绍原型和实现原理，界面美观不在演示范围

html文件中的核心函数(向AI平台发送请求，并解析响应报文)

// 处理按钮点击事件
function sendRequest() {
    // 获取文本框中的内容
    var inputText = document.getElementById('inputText').value;
    // 从文件中获取 API 密钥
    //var apiKey = getApiKeyFromFile();
    var apiKey = 'Bearer ' + ReadIniValue("AI", "API");
    var model = ReadIniValue("AI", "MODEL");
    if (!apiKey) {
        return;
    }

    // 获取状态图标元素
    var statusIcon = document.getElementById('status-icon');
    // 切换到运行态图标
    statusIcon.style.backgroundImage = "url('running.gif')";

    // 创建 XMLHttpRequest 对象
    var xhr = createXMLHttpRequest();
    if (xhr === null) {
        // 切换回初始态图标
        statusIcon.style.backgroundImage = "url('initial.png')";
        return;
    }

    
    // 配置请求选项
    var options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': apiKey
        },
        body: '{"model":"' + model +'","stream":false,"messages":[{"role":"user","content":"' + inputText + '"}]}'
    };

    // 初始化请求
    xhr.open(options.method, url, true);

    // 设置请求头
    for (var header in options.headers) {
        xhr.setRequestHeader(header, options.headers[header]);
    }

    // 处理响应
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            // 切换到完成态图标
            statusIcon.style.backgroundImage = "url('completed.png')";
            var logWindow = document.getElementById('logWindow');
            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    // 使用引入的 json2.js 提供的 JSON.parse 方法
                    var response = JSON.parse(xhr.responseText);
                    // 解析出 content 属性的值
                    var content = response.choices && response.choices[0] && response.choices[0].message && response.choices[0].message.content;
                    if (content) {
                        // 将 content 内容显示在日志窗口中
                        logWindow.value += content + '\n';
                        var App = window.external;
                        App.ActiveDoc.Insert(content);
                    } else {
                        logWindow.value += '未找到 content 属性\n';
                    }
                } catch (e) {
                    logWindow.value += 'Error parsing JSON response: ' + e.message + '\n';
                }
            } else {
                logWindow.value += 'Request failed with status: ' + xhr.status + '\n';
            }
        }
    };

    // 发送请求
    xhr.send(options.body);

🕮说明：
说实话，这个函数我自己写不出来，这个函数是AI给我写的！并且没怎么调试，中间读取ini文件的函数是我自己写的，由于读取ini文件使用了EverEdit的API，而AI平台不识别这个API，所以需要我自己操刀。

1.3.2 编写EverEdit的宏脚本调用html弹出窗口

这里写EverEdit的宏脚本就比较简单了，新建一个AI助手.ejs文件，编码使用GB2312. 脚本的内容如下：

htmlFile = "file:///" + SCRIPT_PATH + "\\ai.html"
var dlg=App.ShowHtmlDialog(true, htmlFile, 700, 1120);
dlg.SetTitle("AI助手")

1.3.3 编写`ai_setting.ini`文件

ai_setting.ini文件主要存放AI平台的API密钥、AI模型等配置信息，文件内容如下：

[AI]
API=请粘贴您的硅基流动的API密钥
MODEL=Qwen/Qwen2.5-Coder-7B-Instruct

截图示例：
在这里插入图片描述

参数说明：

API：即AI平台的密钥，获取方式如下：
MODEL：AI平台提供的模型名称(近100种模型)，获取方式如下：

点击模型后，进入弹出页面，单击复制按钮，如下图所示：
在这里插入图片描述

🕮说明：
硅基流动中有近100种模型，免费模型有近30种，可以根据需要自由选择。

1.3.4 完整的AI助手插件下载地址

AI助手下载地址：EverEdit扩展- AI助手0.1
EverEdit插件安装指南：如何安装EverEdit扩展脚本(方法2)

1.4 效果演示

请添加图片描述

1.5 工作原理

读者如果有兴趣，可以下载AI助手后使用任一文本编辑器打开阅读，该插件是源代码形式。
阅读AI平台的接口文档，如下所示：