«

Web版本的ChatGPT HTML源码以及设计思路

时间:2023-2-28 13:17     作者:Anglei     分类: 大数据AI


<!doctype html>
<html class="no-js" lang="">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>ChatGPT For Web</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>#chatgpt-response { font-family: "宋体"; font-size: 20px; color: #0000FF; font-weight: bold; }</style>
    <!-- favicon icon -->
    <link rel="icon" href="img/favicon.png">
    <!-- All CSS Files Here -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/et-line-fonts.css">
    <link rel="stylesheet" href="css/ionicons.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/meanmenu.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script>
        async function callCHATGPT() {
        var responseText1 = document.getElementById("chatgpt-response");
        responseText1.innerHTML = ""
        function printMessage(message) {
          var responseText = document.getElementById("chatgpt-response");
          var index = 0;

          // 创建一个定时器,每隔一段时间打印一个字符
          var interval = setInterval(function() {
            responseText.innerHTML += message[index];
            index++;

            // 当打印完成时,清除定时器
            if (index >= message.length) {
              clearInterval(interval);
            }
          },
          150); // 每隔50毫秒打印一个字符
        }
        var xhr = new XMLHttpRequest();
        var url = "https://api.openai.com/v1/completions";
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("Authorization", "Bearer Openai上获得的AccessKey");
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var json = JSON.parse(xhr.responseText);
            var response = json.choices[0].text;

            // 将CHATGPT的返回值输出到文本框
            var responseText = document.getElementById("chatgpt-response");
            var index = 0;

            // 创建一个定时器,每隔一段时间打印一个字符
            var interval = setInterval(function() {
              responseText.innerHTML += response[index];
              index++;

              // 当打印完成时,清除定时器
              if (index >= response.length) {
                clearInterval(interval);
              }
            },
            50); // 每隔50毫秒打印一个字符
          }
        };

        var data = JSON.stringify({
          "prompt": document.getElementById("chat-gpt-input").value,
          "max_tokens": 2048,
          "temperature": 0.5,
          "top_p": 1,
          "frequency_penalty": 0,
          "presence_penalty": 0,
          "model": "text-davinci-003"
        });
        console.log(data);
        await printMessage('正在加载,请等待......');
        await xhr.send(data);
      }
    </script>
  </head>

  <body>
    <div class="page-loader">
    <header id="sticky-header">
      <div class="header-area">
        <div class="container sm-100">
          <div class="row">
            <div class="col-md-3 col-sm-2">
              <div class="logo text-upper">
                <h4>
                  <a>OpenAi -ChatGPT</a></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="basic-portfolio-area ptb-10">
      <div class="filter-menu text-center mb-40">
        <h4>与ChatGPT对话,要做好心理准备,请勿频繁调戏ChatGPT.</h4>
      </div>
      <div class="call-to-action-area gray-bg ptb-60">
        <div class="container">
          <div class="row">
            <div class="col-md-9 col-sm-9 col-xs-12">
              <div class="form-group">
                <label></label>
                <textarea class="form-control" id="chat-gpt-input" placeholder="输入问题" rows="3" resize="none" style="width: 98%; margin: 1 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 12px;"></textarea>
              </div><br>
              <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="call-to-action">
                  <button onclick="callCHATGPT()" autocomplete="off" class="btn btn-large" href="#" style="background-color: #333; color: #f4f4f4; border-radius: 10px">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>发送
                    </button>(未收到回复前,请勿再次发送,多等等!)</div><br>
              </div>
              <div class="col-md-9 col-sm-9 col-xs-12">
                <div class="form-group">
                  <label></label>
                  <textarea class="form-control" id="chatgpt-response" placeholder="横跨太平洋的访问,请耐心等待ChatGPT回答,通常内容越长等待越久" rows="25" resize="none" style="width: 98%;height: auto; margin: 1 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 10px; overflow: scroll;" readonly="true"></textarea>
                </div>
              </div>

以上代码正在跑我的相关程序,已经验证过了,使用上没什么问题,后期想与其他页面功能做一个整合,并建立数据库,存储ChatGTP返回的信息,大家如果有思路也可以一起交流~

更新:
1.目前openai已经设定了中国地区的IP禁止访问API地址了,请知悉。

本文完结,相关标签: chatgpt

 版权所有:Anglei
 文章标题:Web版本的ChatGPT HTML源码以及设计思路
 除非注明,本站文章如未特殊说明均为 MAXADA社区知识库 原创,且版权所有,请勿用于任何商业用途。

推荐阅读:

看完后感想如何?

路过(0)

雷人(0)

握手(0)

鲜花(0)

鸡蛋(0)
分享到: