开始
我们需要一个gpt账号，最好开通了plus通过率会高一点，然后去openai.com/blog/chatgp… 申请plugin 开发者权限，尽量填写公司非个人， 原因详细， 虽然通过率不高， 笔者 插件通过了，后来因为淘宝批量付费被封了（3个账号），好惨，所以大家不要用淘宝去开通gpt4，最好用独立的信用卡
插件功能
这个插件主要是开发通过一个地址去查询web3的链上数据，然后生成一张图，最后显示在gpt上
plugin 概要
首先插件是个服务端的东西， 他是gpt开放一个把我们业务的接口对接到gpt的功能，gpt 可以通过ai 把自然语言解析成request 然后通过场景去匹配插件，最后通过我们的接口返回我们的result的过程,只有申请成功了 才能看到develop your own plugin， 他会弹出一个窗，可以选择2种模式，本地调试，填写localhsot地址，就跟正常开发一样，去调试你的接口release版本（填写https地址），貌似好像支持十几个测试人员，
开发流程
建一个开发目录，内容如下，我们使用nextjs 实现的，主要是定义好public的内容，最好描述清楚这是一个什么，ai-plugin.json 是用来定义插件的名称，描述，api白名单，logo等 ,spec.yaml主要是定义接口类型，接口描述等。
定义ai-plugin.json， 我开发者模式下，gpt能够访问我们本地的接口这里就写localhost就好了，注意发布release 需要换成https
{ "schema_version": "v1", "name_for_human": "KNN3", "name_for_model": "knn3", "description_for_human": "Input address to render web3 data image by knn3 sdk.", "description_for_model": "Input address to render web3 data image by knn3 sdk.", "auth": { "type": "none" }, "api": { "type": "openapi", "url": "http://localhost:3000/spec.yaml" }, "logo_url": "http://localhost:3000/logo.png", "contact_email": "wen.he@knn3.xyz", "legal_info_url": ""}
spec.yaml
openapi: 3.0.0info: title: wallet address to Image Link API version: 1.0.0#servers: #- url: https://f10e-58-19-2-216.ngrok-free.apppaths: /api/render: post: summary: Render wallet address to a image link operationId: renderPage requestBody: required: true content: application/json: schema: type: object properties: address: type: string description: The address to be rendered as an image. required: - address responses: "200": description: Successfully rendered the address as a markdown image link. content: application/json: schema: type: object properties: markdownImageLink: type: string description: The markdown image link containing the rendered address as a base64-encoded image. "400": description: Bad request. HTML and CSS are required. content: application/json: schema: type: object properties: message: type: string "500": description: Internal server error. content: application/json: schema: type: object properties: message: type: string
接口实现
-
我们要在Gpt上展示图片，其实gpt 上是可以展示图片的，但是接口怎么把用户的自然语言返回一张图，就是文生图（牛逼）
-
gpt 解析用户自然语言，生成request， 服务端接受参数，，比如是一个地址
-
根据参数生成一个html， 放到了ifrmae中
-
调用 launchChromium，并且通过const browser = await launchChromium();
-
const page = await browser.newPage() 新打开一个tab
-
page.screenshot 截屏
-
上传到云上或者s3这种 返回 {img: xxxx} 的格式，这样gpt就可以识别然后展示这张图了
export const renderImage = async (address: string): Promise => { const browser = await launchChromium(); const page = await browser.newPage(); // const addr = await getAddr(address); await page.setViewportSize({ width: 500, height: 500 }); await page.setContent(
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>KNN3</title> </head> <body style=" background: url(https://static.wixstatic.com/media/0f998e_c0d2e2a6b408474c840ae228cdf5faecf000.jpg); background-position: center center; background-size: contain; width:100%; height:100%; " > <div style=" width:100%; height:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-size: 14px; " > <h5 style="margin-bottom: 30px">-> ${address}</h5> <div style="display: flex; width: 100%; justify-content: space-around;"> <div style="display: flex; width:300px; flex-direction: column; padding-left: 30px;"> <span style="font-weight: 500; padding-bottom: 20px; font-size: 16px;">Profile</span> <div style="display: flex; align-items: center;"> <img width="25px" style="margin-left: -3px;" src="https://knn3-images.s3.us-west-2.amazonaws.com/twitter.png"/> <span style="margin-left: 5px;">988064388702650370</span> </div> <div style="display: flex; align-items: center; margin-top: 10px;"> <img width="20px" src="https://aui.atlassian.com/aui/8.8/docs/images/avatar-person.svg"/> <span style="margin-left: 5px;">shadow88sky</span> </div> <div style="display: flex; align-items: center; margin-top: 10px;"> <img width="27px" style="margin-left: -3px;" src="https://chat.ens.domains/static/ENSLogo.svg"/> <span style="margin-left: 5px;">shadow88sky.eth</span> </div> <div style="display: flex; align-items: center; margin-top: 10px;"> <img width="20px" src="https://knn3-images.s3.us-west-2.amazonaws.com/logo.svg"/> <span style="margin-left: 5px;">shadow88sky</span> </div> <div style="display: flex; align-items: center; margin-top: 10px;"> <img width="32px" style="margin-left: -6px;" src="https://www.freepnglogos.com/uploads/email-png/email-western-libraries-12.png"/> <span style="margin-left: 5px;">wen.he@knn3.xyz</span> </div> </div> <div style="display: flex; width:300px; flex-direction: column;white-space: nowrap; "> <span style="font-weight: 500; padding-bottom: 20px;font-size: 16px;">Activity (ethereum)</span> <span>Poap: [dappcon 2019], ethberlin</span> <span style=" margin-top: 10px;">Hold NFT: 1</span> <span style=" margin-top: 10px;">Hold token: [Bankless Token, Aave Token, ]</span> <span style=" margin-top: 10px;">SpaceId: [hadow88sky.bnb, Aave Token, ]</span> <span style=" margin-top: 10px;">Vote: more then 3 times</span> </div> </div> <div style="margin-top: 25px; display: flex; align-items: center;"> <img height="50px" src="https://imusae-static.90sheji.com/imusae/static/2020/12/05/abed703c848cc9735165dac0befd20a4.png?imageMogr2/thumbnail/324x/crop/!x476-10a0/auto-orient/interlace/1/quality/85/format/webp"/> <H1>Heat value: 30</H1> </div> <div style="display:flex; width:95%; justify-content: space-between; position: absolute; bottom:10px ; color: white; align-items: center;"> <img height="15px" src="https://static.wixstatic.com/media/0f998e_7ea545ad9b85433ab16e57869a8be59b~mv2.png"></p> <p style="font-size: 12px;">©2022 by KNN3 Network.</p> </div> </div> </body></html>); const screenshotBuffer = await page.screenshot({ type: "png" }); const imageUrl = await uploadToImgBB(screenshotBuffer); return imageUrl;};
效果如图
