实现ChatGPT的文字输出效果

这篇具有很好参考价值的文章主要介绍了实现ChatGPT的文字输出效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原文发表于zhu's Blog

      阿猪是计算机业余爱好者,把网页做得美观高大上对阿猪是一种折磨和挑战,所以阿猪做出来的网页都是清一色的word文档风格。为了给low逼的网页提升点儿逼格,阿猪决定模仿一下ChatGPT的文字输出效果。

      先上效果图::

实现ChatGPT的文字输出效果

      以下是完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT Typing Effect</title>
  <style>
    #output {
      display: inline;
    }

    .cursor {
      display: inline-block;
      width: 10px;
      height: 20px;
      background-color: black;
      vertical-align: text-bottom;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      50% {
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <h1>ChatGPT Typing Effect</h1>
  <div id="output"></div><span class="cursor" id="cursor"></span>
  <div id="givenText" style="display: none;">
    <strong>加粗文本-Bold Text</strong><br>
    <em>斜体文本-Italic Text</em><br>
    <u>下划线文本-Underline Text</u><br>
    <span style="color: red;">红色文本-Red Text</span><br>
    <span style="font-size: 24px;">大字体文本-Large Text</span><br>
    <a href="https://github.com/azhu021/">链接示例-Link Example</a>
  </div>

  <script>
    const outputElement = document.getElementById("output");
    const cursorElement = document.getElementById("cursor");
    const givenTextElement = document.getElementById("givenText");
    const givenText = givenTextElement.innerHTML;
    let currentIndex = 0;
    let currentHTML = "";

    function typeText() {
      if (currentIndex < givenText.length) {
        const currentChar = givenText.charAt(currentIndex);

        if (currentChar === "<") {
          const closingTagIndex = givenText.indexOf(">", currentIndex);
          currentHTML += givenText.slice(currentIndex, closingTagIndex + 1);
          currentIndex = closingTagIndex + 1;
        } else {
          currentHTML += currentChar;
          currentIndex++;
        }

        outputElement.innerHTML = currentHTML;
        setTimeout(typeText, 100); // 设置打字速度,单位为毫秒
      } else {
        // 当打印完成时,移除光标的闪烁效果
        cursorElement.classList.remove("cursor");
      }
    }

    typeText();
  </script>
</body>
</html>

      这段代码中:

(1)`<div id="output"></div>`用于显示输出文本内容。

(2)`<span class="cursor" id="cursor"></span>`用于显示闪烁的光标。

(3)`<style></style>`中通过CSS控制光标闪烁的效果。

(4)`<script></script>`中通过javascript控制文字的输出。

(5)`<div id="givenText" style="display: none;">`中的内容不会显示,只用于向javascript中的givenTextElement变量赋值。

(6)文字输出的效果是通过拆分`givenTextElement`变量中的内容向`currentHTML`变量传递,然后使用`innerHTML`方法以覆盖显示的方式不断输出显示。

(7)可以通过修改`setTimeout(typeText, 100)`来控制文字输出的速度。

(8)这段代码只是在实现了与ChatGPT相似的视觉效果,但是原理与ChatGPT并不相同。这段代码需要提前获取需要显示的全部文本内容,然后逐渐输出显示;而ChatGPT则使用了类似stream传输的技术,并不依赖于提前获取需要显示的全部文本内容。文章来源地址https://www.toymoban.com/news/detail-433908.html

到了这里,关于实现ChatGPT的文字输出效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于express调用chatgpt文字流输出和有道智云语音合成

    express是基于node.js的一个web框架,可以更加简洁的去创建一个后台服务,由于项目的需要,引入和typescript,经过几天的努力实现了chatgpt文字流输出+有道智云语音合成的结合(略有遗憾),下面我记载以下,以供参考     要出现chatgpt原生接口的流式效果(也就是一个字一个字

    2024年02月15日
    浏览(40)
  • 文字效果 用背景渐变实现 波浪背景文字

    1. 实现波浪背景 原理:透明到纯色的径向渐变,然后复制该渐变背景,最后加上背景水平方向移动的无限循环动画 2. 文字波浪背景 将该渐变应用在文本标签上,并添加一下css属性 最后,在做一些适当调整,比如弧度衔接处 动画时间等 。搞定 3. 总结 波浪的本质上是一个曲

    2024年02月08日
    浏览(52)
  • java集成chatGpt完整案例代码(效果和官网一样逐字输出)

    背景 要集成chatGpt参考我上一篇文章即可。但是,如果要实现官网一样的效果,逐字输出,难度就提升了不少了。经过在官网的研究发现它应该是采用了SSE技术,这是一种最新的HTTP交互技术。SSE(Server-Sent Events):通俗解释起来就是一种基于HTTP的,以流的形式由服务端持续向客户

    2024年02月08日
    浏览(56)
  • 记录-css实现交融文字效果

    CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定。 以上是基础代码结构,通过调整letter-spacing的值,我们可以控制他的展开与收起。值越小为负数时文字就可以挤在一起,越大文字间距就越大。 默认值为0时正常显示的效果   小于正常值的效果

    2023年04月11日
    浏览(62)
  • css如何实现文字两端对齐效果

    想要实现文字两端对齐效果,可以使用CSS的text-align属性。设置text-align: justify;即可实现文字两端对齐效果。 方法1 : 给元素设置 text-align: justify; text-align-last: justify;并且加上 text-justify: distribute-all-line; 目的是兼容ie浏览器 p{             width: 130px;             te

    2024年02月01日
    浏览(59)
  • CSS实现文字描边效果

    一、介绍 最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是

    2023年04月09日
    浏览(75)
  • CSS中如何实现文字跑马灯效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月09日
    浏览(59)
  • C#使用迭代器实现文字的动态效果

    目录 一、涉及到的知识点 1.GDI+ 2.Thread类 3.使用IEnumerable()迭代器 二、实例 1.源码 2.生成效果:         GDI+主要用于在窗体上绘制各种图形图像。         GDI+的核心是Graphics类,该类表示GDI+绘图表面,它提供将对象绘制到显示设备的方法。Graphics类封装了绘制直线、曲

    2024年02月19日
    浏览(34)
  • Android 实现阅读用户协议的文字控件效果

    开发中,经常要用到一些阅读隐私协议的场景,原生的textview控件很难做到在一个控件里有两个点击事件,那现在就来安利一个强大的组件——SpannableStringBuilder。 先看看效果:  直接上代码,布局文件: 布局文件很容易理解,一个checkbox实现选中效果,旁边加一个textview。

    2024年02月15日
    浏览(49)
  • 微信小程序实现左边图片右边文字效果

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月01日
    浏览(93)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包