您的位置 首页 技术开发

使用jQuery写一个ChatGPT打字效果

近年来,随着技术的不断发展,人工智能(AI)已经逐步成为了热门话题。其中,作为大型语言模型,ChatGPT已经在国内日渐火了起来,其自然语言处理功能可以让用户进行更为自然的交流,同时也可以作为各种AI产品和服务中的核心算法。

AI得到了广泛的应用并且发展迅速,从智能家居到自动驾驶、医疗等领域,比如麻省理工学院的研究人员使用AI系统发现了一种超强抗生素halicin,展示了前所未有的广谱抗菌能力,随着计算机性能和算法的改进,AI的能力也将会得到进一步提升。

尽管有些人担心AI会对人类工作产生消极影响,但是在实际应用过程中,可以看到AI逐渐地成为了各个领域的重要支撑与技术引擎,其他企业也陆续发布了新的AI产品,比如专注绘画的Stable Diffusion,通过输入文本生成近乎真实的语音Bark(SonoAI)。

AI本身作为一种语言模型而存在,可以配合各种AI产品和服务使用,比如用孙燕姿的声音唱《需要人陪》,用周杰伦的声音唱《乌梅子酱》,甚至还可以模拟和自己完全相同的声音,做视频开直播让自己化身二次元人物等。

在使用ChatGPT时看到给出的结果以打字机的形式展现出来,于是我用少量的jQuery写了一个ChatGPT打字效果。

具体代码如下:

HTML:

<div class="textbox"><span id="content"></span><span id="cursor"></span></div>

CSS:

.textbox { width:750px; margin:100px auto; padding:20px 30px; font-size:16px; color:#333; white-space:pre-wrap; line-height:30px; border:2px solid #e8e8e8; box-sizing:border-box; background:#f8f8f8; }

#cursor { width:0.2em; height:17px; margin:7px 0 0 0.1em; background-color:#000; display:inline-block; vertical-align:top; animation:blink 0.8s infinite; }

@keyframes blink {

    from, to { opacity:1; }

    50% { opacity:0; }

}

jQuery(引入jQuery库):

$(function() {

    var text = "元丰六年十月十二日夜,解衣欲睡,月色入户,欣然起行。念无与为乐者,遂至承天寺寻张怀民。怀民亦未寝,相与步于中庭。庭下如积水空明,水中藻、荇交横,盖竹柏影也。何夜无月?何处无竹柏?但少闲人如吾两人者耳。\n————宋 · 苏轼《记承天寺夜游》"; // 需要打印的文本

    var delay = 50; // 打字速度,以毫秒为单位

    printText(text, delay);

});

function printText(text, delay){

    var chars = text.split("");

    var i = 0;

    var intervalId = setInterval(function(){

        if(i < chars.length){

            var newText = $('#content').text() + chars[i];

            $('#content').text(newText);

            i++;

        }else{

            clearInterval(intervalId);

            $('#cursor').remove();    //内容展示结束时移除文字结尾的光标,若保留光标删除或使用//注释此行

        }

    }, delay);

}

效果如下:

ChatGPT打字效果.gif

来源链接:https://www.toyean.com/post/448.html
免责声明:本文由静落凝封整理发布,版权归原作者所有,转载请注明出处,如有侵权请联系管理员删除

热门文章

腾讯元宝派电脑版上线,打造高效AI协作空间

腾讯元宝派电脑版上线,打造高效AI协作空间

3月25日 腾讯宣布,旗下AI原生应用元宝,正式推出“元宝派”电脑版。在电脑端的大屏环境中,用户可以边参与共享屏幕,边在单独窗口与派友或元宝聊天互动。同时,元宝派电脑版还支持多端消息...

什么是AI Agent?AI Agent(智能体) 的原理是什么?

什么是AI Agent?AI Agent(智能体) 的原理是什么?

AI Agent(人工智能代理) 是一个能够感知环境、进行决策并执行行动,以达成特定目标的智能软件实体,它不仅仅是回答问题的聊天机器人,更是能够动手做事的智能执行者。...

国内爬虫工具与OpenClaw功能有何区别?

国内爬虫工具与OpenClaw功能有何区别?

OpenClaw不是网络爬虫工具,而是一个AI智能体/个人助理平台。它与传统爬虫软件有本质区别。...

openclaw是什么,国内有哪些类openclaw工具?

openclaw是什么,国内有哪些类openclaw工具?

OpenClaw是一个AI智能体/个人助理平台,。它本质上是一个"AI Agent 网关 + 多平台聊天入口",可以将WhatsApp、Telegram、Discord、iMessage等常见聊天工具桥接到各种大模型和工具链...

什么是GEO?如何进行GEO优化?GEO优化有哪些方法?

什么是GEO?如何进行GEO优化?GEO优化有哪些方法?

GEO(Generative Engine Optimization)是针对生成式人工智能引擎(如ChatGPT、DeepSeek、豆包等AI问答工具)的优化技术体系,旨在通过技术适配与内容重构,提升品牌或产品在AI生成答案中的...