chatgpt中文站开源版（开发文档）

源码留在底部

引子

现在ChatGPT很火，但是注册账号还得有国外的手机号，这难倒了不少人。

于是很多人自己封装了一下ChatGPT的API，做了一个简单的转发，把要问的问题通过调用ChatGPT API的方式获取答案。

不过好像通过API获取的答案没有直接用网页获取的详细，其中的原因就不知道了。

现在这样的应用、网站到处都是，但是作为一个有追求的程序员，怎么能不自己实现一下呢？

下面我们来做个最简单的页面，只实现一问一答的功能：

账号和秘钥

好，我们这就开始。

首先我们要有一个ChatGPT的账号，注册账号的方法网上很多，你可以自己去找，也可以直接去买一个现成的。

注册好了之后，点击右上角的View API keys，然后生成一个秘钥就行了，这个是调用API的私钥，一定要保管好，不要泄露给别人。

看一下文档，里面有API请求和返回的数据格式：

后端

我们开始写代码，无非就是调用一个API接口，用什么语言都行，这里我就用Java了。

主要就是下面这段代码，其他代码就是对这段代码的调用，值得注意的是，只能用post方式调用，不能用get方式。

    /**
  * 调用ChatGPTAPI
  * @param question
  * @return
  */
 public static String postChatGPT(String question) {

  StringBuffer receive = new StringBuffer();
  BufferedWriter dos = null;
  BufferedReader rd = null;
  HttpURLConnection URLConn = null;

  try {

   // API的地址
   URL url = new URL("https://api.openai.com/v1/completions");
   URLConn = (HttpURLConnection) url.openConnection();
   URLConn.setReadTimeout(readTimeout);
   URLConn.setConnectTimeout(connectTimeout);
   URLConn.setDoOutput(true);
   URLConn.setDoInput(true);
   URLConn.setRequestMethod("POST");
   URLConn.setUseCaches(false);
   URLConn.setAllowUserInteraction(true);
   URLConn.setInstanceFollowRedirects(true);

   URLConn.setRequestProperty("Content-Type", "application/json");
   // 这里填秘钥，最前面得加"Bearer "
   URLConn.setRequestProperty("Authorization", "Bearer sk********");

   JSONObject sendParam = new JSONObject();
   // 语言模型
   sendParam.put("model", "text-davinci-003");
   // 要问的问题
   sendParam.put("prompt", question);
   // 温度，即随机性，0表示随机性最低，2表示随机性最高
   sendParam.put("temperature", 0.8);
   // 返回最大的字数
   sendParam.put("max_tokens", 2048);

   URLConn.setRequestProperty("Content-Length", String.valueOf(sendParam.toString().getBytes().length));
   dos = new BufferedWriter(new OutputStreamWriter(URLConn.getOutputStream(), "UTF-8"));
   dos.write(sendParam.toString());
   dos.flush();

   rd = new BufferedReader(new InputStreamReader(URLConn.getInputStream(), "UTF-8"));
   String line;
   while ((line = rd.readLine()) != null) {
    receive.append(line);
   }

  } catch (IOException e) {
   receive.append("访问产生了异常-->").append(e.getMessage());
   e.printStackTrace();
  } finally {
   if (dos != null) {
    try {
     dos.close();
    } catch (IOException ex) {
     ex.printStackTrace();
    }
   }

   if (rd != null) {
    try {
     rd.close();
    } catch (IOException ex) {
     ex.printStackTrace();
    }
   }

   URLConn.disconnect();
  }

  String content = receive.toString();
  LOGGER.info("content = "+content);
  return content;
 }

Controller

@RestController@EnableAutoConfiguration@RequestMapping("/api/ask")@ApiIgnorepublic class AskController {    @Autowired    AskService askService;    /**     * 获取chatGPT返回的数据     * @param question     * @return     */    @PostMapping("/chatGPT")    public ApiResult chatGPT(String question) {        ApiResult apiResult = new ApiResult();        String result = askService.getResultFromChatGPT(question);        return apiResult.success(result);    }}

Service

@Servicepublic class AskService {    private static final Logger LOGGER = LoggerFactory.getLogger(AskService.class);    /**     * 获取chatGPT返回的数据     * @param question     * @return     */    public String getResultFromChatGPT(String question) {        // 调用API接口        String returnContent = HttpService.postChatGPT(question);        LOGGER.info("returnContent = " + returnContent);        // 解析返回的数据        JSONObject returnContentObject = JSONObject.parseObject(returnContent);        JSONArray choicesArray = returnContentObject.getJSONArray("choices");        if(choicesArray != null && !choicesArray.isEmpty()) {            JSONObject choicesObject = choicesArray.getJSONObject(0);            if(choicesObject != null) {                return choicesObject.getString("text");            }        }        return "";    }}

好了，后端代码就这些了。

前端

前端的页面很简单，就直接用HTML和jQuery好了，为了美观一点再加个bootstrap5吧。

    

    
    
    
    
    

    

    

    

    
    
    
    

    

    
    





    

        

            
                
                随便问问
            
        
    




    

        

            随便问些什么
            
        
        

            回复
            
        
        

            
                
                请耐心等待...
            
            问一问
        
    



    

        
有问题请百度微酸云，关注微酸云影视公众号
    

js代码

$(function(){    // 微信内置浏览器不支持onclick事件，在这里绑定    $(".submit-btn").attr('onclick','getResultFromChatGPT()')})// 新增用户访问数据function getResultFromChatGPT() {    if($("#question").val() === '') {        alert('问题不能为空')        return    }    $(".loading-btn").show()    $(".submit-btn").hide()    $("#answer").text('')    //获取商机状态列表    $.ajax({        type:"post",        url:"/api/ask/chatGPT",        data:{            question: $("#question").val()        },        success:function(result){            console.log(result)            $("#answer").text(result.data)            $(".loading-btn").hide()            $(".submit-btn").show()        }    })}

有一个坑就是，如果在微信中直接打开这个网页，微信自带的浏览器是无法识别html的onclick方法的，点击事件只能在js里绑定。

$(".submit-btn").attr('onclick','getResultFromChatGPT()')

还有，调用API的时间可能需要很久，一定要做个请耐心等待的提示，不然用户会以为系统没反应了。

运行

好了，代码写完了，我们运行下程序，看看效果：

嗯，这个建议不错。

如果开以的话请关注”微酸云影视“公众号

下载一个本人运营的app,纯净无广告（聚合影视漫画小说，chatgpt,以及其他各类工具）：

直链：myapp.weiyunyingshi.apk

https://wwxm.lanzouo.com/i83vG0qje00f

密码:3062

源码下载：chatgpt.educlub.icu_stfBSc.tar.gz