仿chatgpt简约前后端_仿chatgpt的前端界面-优快云博客

该文章面向小白非常友好，原生html+css+js，后端采用flask

而且借用了开源项目的api接口，不必在去chatgpt买自己的接口（又省一笔，这不得来个点赞收藏加关注）

效果图

部署前端

<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Chat GPT客服</title>
</head>

<body>
    <div class="rightSide">
        <div class="header">
            <div class="imgText">
                <div class="userimg">
                    <img src="https://image.51uhj.com/wx/676e4ff60ad46337f9b39d8757766bf581b9b89f5927b1bdf4766a456efdd3d3.png"
                        class="cover">
                </div>
                <h4>梯梯助手Chat GPT客服<br><span>在线</span></h4>
            </div>
        </div>
        <!--chatbox-->
        <div id="chatBox" class="chatBox">
            <div class="message frnd_message">
                <p>欢迎使用梯梯助手Chat GPT客服，有什么问题都可以问我。</span><br><span id="time"></span> </p>
            </div>
        </div>

        <!--chat input-->
        <div class="chatbox_input">
            <div class="chatbox_input_div">
                <input id="chatInput" type="text">
                <button id="chatbox_input_send" class="chatbox_input_send">发送</button>
            </div>
        </div>
    </div>
</body>
<script>
    document.getElementById('time').innerHTML = new Date().toLocaleString();

    var defuleValue = ''

    function debounce(fn, delay = 2000) {
        // 是闭包中的
        let timer
        let changeDom = document.getElementById('chatbox_input_send')
        // input事件调用的函数，相当于obj调用函数 this指向Input
        return function () {
            defuleValue = document.getElementById('chatInput').value
            // 这个if 判断不做也没关系，判断