一个在vscode中使用OpenAI的API的扩展插件,Lenovo-OpenAI,vscodeAPI + OpenAIApi + js + html + css。
vscode扩展市场发布名称:TDP-OpenAI
项目背景:本人在北京某想公司实习期间,部门主要业务的低代码平台开发需要用到ChatGPT组件,leader让我首先去实现一个在vscode中使用OpenAI的API的扩展插件。
项目内容:开发一个vscode中使用OpenAI的API的扩展插件,能够让用户通过命令使用、右键菜单以及webview视图交互式UI进行ChatGPT的使用。
技术方案:在vscode插件交互方面,首先用vscode插件开发脚手架初始化项目,配置package.json(插件发布信息,命令注册,menu注册,webview注册),然后写入口文件的activate函数(使用vscode扩展的API,写的逻辑主要是命令的回调函数),这里将回调函数的逻辑全部写在webview-provider里统一管理,防止activate函数臃肿。技术难点在于webview的编写。webview里编写一些属性和方法,具体包括:
在openAIApi调用方面,封装request网络请求,暴露一个APIKey和用户输入UserQuery。
项目目录结构:
项目成果:ctrl+shift+p输入Lenovo即可出现多条功能命令,右键菜单也有多条功能命令,扩展webview视图交互UI(设置APIkey,清空面板,询问OpenAI)。用户能够成功通过命令使用、右键菜单以及webview视图交互式UI进行ChatGPT的使用。相较于v1版本的微服务代理,有更好的用户交互体验,并且响应速度提升了550%。
备注:使用功能命令之前,如果没有选取代码块将询问整个文件。
插件的运行原理架构:
github源码地址:https://github.com/axing521/Lenovo-OpenAI-vscExtension
An extension that uses OpenAI's API in vscode. 2023.4.4 I started to develop.
一个在vscode中使用OpenAI的API的扩展插件。
- ctrl+shift+p输入Lenovo即可出现多条功能命令
- 右键菜单也有多条功能命令
- 扩展webview视图交互UI(设置APIkey,清空面板,询问OpenAI)
备注:使用功能命令之前,如果没有选取代码块将询问整个文件
安装此插件后,可以在文件中用鼠标选取一部分文本,然后ctrl+shift+p输入openAI: chat命令,即可等待chatGPT对你的回复。
vscode + install this extension
不需要OpenAI账户APIkey,Enjoy!
(最新的v2需要APIKey)
2023.4.17 询问方式全部转成中文,以便结果也是中文
2023.4.17 new version, 可视化交互UI,右键菜单,用户自设置APIKey
2023.4.14 updated, 右键菜单,新文件打开
2023.4.10 patched,内部使用
2023.4.7 Initial,chat功能