仿chatgpt简约前后端

最新推荐文章于 2025-02-13 11:10:37 发布

extern__

最新推荐文章于 2025-02-13 11:10:37 发布

阅读量529

点赞数 9

CC 4.0 BY-SA版权

文章标签： chatgpt 前端 css javascript html flask

本文链接：https://blog.youkuaiyun.com/extern__/article/details/137574776

本文介绍了如何使用原生HTML、CSS和JavaScript创建一个简单的ChatGPT客服Demo，配合Flask后端处理API请求，同时展示了前端与后端交互的代码片段和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

该文章前端借鉴【ChatGPT】原生JS实现ChatGPT小型Demo

效果图

部署前端

<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 () {

最低0.47元/天解锁文章