WordPress 简单实现 chatGPT 文章摘要

chatgpt、wordpress 2465°C 24-04-2023

^{最近更新于：2024-03-01 11:17:59}

文章摘要chatGPT
standby chatGPT responsing..

文章目录

准备工作
反代 API
实现流程
后端
前端
扩展内容
集成特性
4月29更新
参考链接

灵感来源于之前在浏览 HEO 博文时候偶然看到文章前有一段 AI 摘要，第三人称以打字形式来简述文章内容还是蛮酷的~ 于是拟了个把这个功能集成到 2BLOG 主题的计划。之前也用过 chatGPT，感觉这个需求应该不是很难，毕竟直接在 chat.openai.com 提问也可以拿到结果。因 eventStream 流式传输比较繁杂的原因（懒），故本文主要方式为简单粗暴的直接请求 chatGPT 返回响应结果。

近期本地测试的差不多了，所以发一篇 chatGPT 具体实现思路顺便也好做个首次AI应用的记录，鉴于请求付费问题，目前仅用于日志记录文章页面（本文例外）。

注：文章仅作个人记录，部分内容尚未开发完善，代码仅供参考，可能无法适用部分情况

准备工作

一切操作的起源，所有数据均由 chatGPT 生成后进行调用，故需注册一枚 OPENAI 账号（注册流程自行检索，我这里用的接?平台是比较熟悉的 sms-activate，充了2刀，当时选的号段是印度尼西亚的，直接过了），注册后进入账号设置中获取 API Keys。

需要注意的是，每个免费账号只有5美刀的有限期内额度，留意：chatGPT 目前已于4月13日对免费账号进行限速处理，参考：

最近速度慢是因为 OpenAI 对于免费账号限速了，在 platform.openai.com 绑定了信用卡的才是之前的正常速度；

限速指的是流式请求时，首个 token 返回需要 20 秒左右，而绑定了信用卡的账号，在 2 秒左右；

反代 API

默认情况下使用 chatGPT 官方文档中提供的 api 调用地址 https://api.openai.com/v1/completions 在大陆是调不通的，所以我们需要另外自行准备一台国外VPS服务器来做反向代理我们自定义的域名（其中宝塔 nginx 环境参考配置如下：（要把伪静态啥的先关掉

location ^~ / {
    proxy_pass https://api.openai.com;
    proxy_set_header Host api.openai.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_ssl_server_name on; #注意此行为开启HTTPS后必填
    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    set $static_filebZf74aXt 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" ){
    	set $static_filebZf74aXt 1;
    	expires 12h;
    }
    if ( $static_filebZf74aXt = 0 ){
        add_header Cache-Control no-cache;
    }
}

自此，我们手里应该已经有了 chatGPT 的 API Keys 和自定义反代的的 API 的地址。

实现流程

其实思路很简单，甚至你可以注册账号后直接在 chat.openai.com 提问即可，这里的实现思路仅供参考。首先是运行环境，我目前使用的博客是 wordpress 平台，所以在 php 环境搭建，这里的实现方式和之前实现企业微信推送评论提醒略有相似之处，比如本地缓存等。

在 chatGPT API 文档中提到有多种对话模式，text-davinci-003、gpt-3.5-turbo 等（具体花费金额也不同，可在官网查看），~~像实现文章摘要这种无需交互的功能，使用 text-davinci-003 就可以，~~最好别使用这个接口，太tm费token了！相比之下用 gpt-3.5-turbo 会好很多倍，体验基本都一样（有时甚至更好）。先在后台预置好 php 接口，然后在前端异步调用 php 文件接口返回数据即可（前端模拟打字效果）。

后端

首先获取GET、POST接收请求数据为文章 $post->ID（后设置具体请求数据），拿到 id 后组合chatGPT请求数据内容，再通过 curl 发送 chatGPT 反代 API 请求以获取 chatGPT 返回数据（发送请求后随即将请求记录到本地防止并发同一请求），拿到数据后再将实际返回数据覆写到本地记录，最后返回过滤结果到前端操作。

执行 chatGPT 请求后会在同目录生成名为 chat_data.php 文件，该文件为本地缓存，首次请求写入后续将直接从文件读取数据以避免 chatGPT 重复请求造成多次付费。如需更新摘要内容需要手动定位文章id进行删除，~~暂无集成删除控件计划到主题~~（已实现，~~正在集成中..~~，已集成至 beta-v1.3.7.8），尚未挂载 wp 文章发布更新 hook。

接受参数为 pid，已做错误处理，代码仅供参考，其中部分内容为 wordpress 主题集成所用，不保证兼容及实际可行性。

<?php
    parse_str($_SERVER['QUERY_STRING'], $Params);
    // 判断url传参或form表单参数
    $pid = array_key_exists('pid', $Params) ? $Params['pid'] : $_POST['pid'];
    if($pid){
        define('WP_USE_THEMES', false);  // No need for the template engine
        require_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');  // Load WordPress Core 
        $pids = get_post($pid);
        $title = $pids->post_title;
        $author =  get_the_author_meta('display_name', get_post_field('post_author', $pid));
        $content = str_replace(array("\r\n", "\r", "\n"), " ", wp_strip_all_tags($pids->post_content));
        $post_type = $pids->post_type;
        $post_exist = get_post_status($pid);
        $requirements = '标题：'.$title.'，作者：'.$author.'，内容：'.$content; 
        define('OPENAI_API_KEY', 'apikey');  //替换 API Keys
        define('OPENAI_PROXY', 'https://api.openai.com');  //替换代理API
        define('OPENAI_MODEL', 'text-davinci-003');  //可选 gpt-3.5-turbo
        
        function curlRequest($question, $maxlen=1024) {
            $gpt_turbo = OPENAI_MODEL==='gpt-3.5-turbo';
            $post_data = array(
                "model" => OPENAI_MODEL,
                'temperature' => 0.8,
                "max_tokens" => $maxlen,  // works for completion_tokens only
                "prompt" => $question.'。分析上述内容，简述文章用意，注意精简字数',
            );
            if($gpt_turbo){
                unset($post_data['prompt']);
                $post_data = array_merge($post_data, array('messages' => [["role" => "system", "content" => '分析文章内容，简述文章用意，注意精简字数'],["role" => "user", "content" => $question]]));
            }
            $curl = curl_init();
            curl_setopt_array($curl, array(
              CURLOPT_URL => $gpt_turbo ? OPENAI_PROXY.'/v1/chat/completions' : OPENAI_PROXY.'/v1/completions', //聊天模型
              CURLOPT_RETURNTRANSFER => true,
              CURLOPT_ENCODING => "",
              CURLOPT_MAXREDIRS => 10,
              CURLOPT_TIMEOUT => 0,
              CURLOPT_FOLLOWLOCATION => true,
              CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
              CURLOPT_CUSTOMREQUEST => "POST",
              CURLOPT_POSTFIELDS => json_encode($post_data),
              CURLOPT_HTTPHEADER => array(
                "Content-Type: application/json",
                "Authorization: Bearer " . OPENAI_API_KEY
              ),
            ));
            $res = curl_exec($curl);
            curl_close($curl);
            return $res;
        }
        
        header("Content-type:text/html;charset=utf-8");  // 声明页面header
        $cached_post = array();
        $cached_path = './chat_data.php';
        // 初始化php文件，返回记录
        function chatGPT_init($caches, $new=false){
            global $pid, $requirements, $cached_path, $response, $post_exist, $post_type;
            switch (true) {
                case !$post_exist:
                    $err_msg = 'Unabled to reach request post: not found';
                    break;
                case $post_type!=='post':
                    $err_msg = 'Unsupported request post type found: pid';
                    break;
                default:
                    $err_msg = NULL;
                    break;
            }
            $request_ip = $_SERVER["REMOTE_ADDR"];
            $request_ua = $_SERVER["HTTP_USER_AGENT"];
            // 创建临时记录，防止多请求并发
                $caches['chat_pid_'.$pid] = array('error' => array ('message' => 'standby, another requesting in busy..','type' => 'request_inqueue_busy','created'=>time(),'ip'=>$request_ip,'ua'=>$request_ua));
                $temp = '<?php'.PHP_EOL.'$cached_post = '.var_export($caches,true).';'.PHP_EOL.'?>';
                $newfile = fopen($cached_path,"w");
                fwrite($newfile, $temp);
                fclose($newfile);
            // 生成 chatGPT 请求数据
            $caches['chat_pid_'.$pid] = $post_exist&&$post_type==='post' ? json_decode(curlRequest($requirements, 256), true) : array('error' => array ('message' => $err_msg,'type' => 'invalid_request_param','created'=>time(),'ip'=>$request_ip,'ua'=>$request_ua));
            $arr = '<?php'.PHP_EOL.'$cached_post = '.var_export($caches,true).';'.PHP_EOL.'?>';
            $arrfile = fopen($cached_path,"w");
            fwrite($arrfile, $arr);
            fclose($arrfile);
            // 读取临时/已请求记录
            $response = json_encode($caches['chat_pid_'.$pid]); //$caches['chat_pid_'.$pid]
        }
        
        //overwrite response record
        if(!file_exists($cached_path)){
            chatGPT_init($cached_post);  // 文件不存在，创建文件后新增记录
        }else{
            include $cached_path;  // 读取文件记录
            if(array_key_exists('chat_pid_'.$pid, $cached_post)){
                $response = json_encode($cached_post['chat_pid_'.$pid]); //$cached_post['chat_pid_'.$pid]
            }else{
                chatGPT_init($cached_post);  // 记录不存在，新增记录
            }
        }
        // formart responses text-result
        $response = json_decode($response);
        if(array_key_exists('error', $response)){
            $response = $response->error->message;
        }else{
            $choices = $response->choices[0];
            $response = array_key_exists('message', $choices) ? $choices->message->content : $choices->text;
            $response = preg_replace('/.*\n/','', $response);
        }
    }else{
        $response = 'arguments [pid] err';
    }
    print_r($response);
?>

前端

这里直接发送 xhr/ajax/fetch 等请求到后端接口（上述后端文件路径），传入 pid 参数为文章 id 即可。前端样式效果可根据个人喜欢定制，这里主要写个简单打字机的效果，该方法接受三个参数：输出的dom元素、接口返回的字符串以及打字速度ms。

function words_typer(el, str, speed=100){
    try{
        if(!str||typeof(str)!='string'||str.replace(/^\s+|\s+$/g,"").replace( /^\s*/, '')=="") throw new Error("invalid string");
        new Promise(function(resolve,reject){
            setTimeout(() => {
                el.classList.remove('load');
                for(let i=0,textLen=el.innerText.length;i<textLen;i++){
                    // real-time data stream
                    let elText = el.innerText,
                        elLen = elText.length-1;
                    setTimeout(() => {
                        el.innerText = elText.slice(0, elLen-i); // console.log(i+'-'+elLen);
                        if(i===elLen) resolve(el);
                    }, i*5);
                }
            }, 700);
        }).then((res)=>{
            setTimeout(() => {
                res.classList.remove('load');
                for(let i=0,strLen=str.length;i<strLen;i++){
                    setTimeout(() => {
                        res.innerText += str[i]; // console.log(str[i]);
                        if(i+1===strLen) res.classList.add('done');
                    }, i*speed);
                }
            }, 300);
        }).catch(function(err){
            console.log(err)
        });
    }catch(err){
        console.log(err);
    }
};
// 示例 fetch 请求，修改 dom 为输出元素，pid 为文章 id
fetch('https://xxx.com/gpt.php?pid=xxx').then(res=>{
    words_typer(document.querySelector('dom'), res, 25);
});

扩展内容

出于安全考量还是建议在 api 上再套一层 cdn（如 cloudflare 等）用作 api 请求缓存设置请求鉴权限制等。

另外还有个已知问题：当文章过于冗长时，发送请求会触发最大 max_tokens 限制，需要额外做分段请求后进行拼接处理，包括请求字段过长时被截断的问题，这里由于请求付费等原因，暂且搁置。

集成特性

将该功能集成到 wordpress 主题控件后支持了以下两个特性：可自定义分类文章是否开启数据调用以及可选的 chatGPT 对话模型。0426更新：新增 api 文件中转鉴权域名请求 api，适用前端 xhr 校验，可配合 nginx 配置域名请求路径。0509更新：集成本地缓存控制到后台管理面板，已做WP鉴权。

4月29更新

现已支持长篇文章摘要，具体实现为当文章字符请求总数所需 token 超过 4096 时将分割文章为上下文两段并分别请求摘要，完成后再合并上下文摘要请求全文综合摘要。控件目前已集成到 2BLOG 主题面板，~~相关 gpt 更新内容后续推送至 github~~，已更新至 beta-v1.3.7.5（现已支持当文章过于冗长导致下半段请求失败时，可选仅摘要首次+文章尾段综合摘要）

增强 api 调用安全逻辑，集成 CDN 请求验证等。