草庐IT

实现ChatGPT的文字输出效果

猪哥哥021 2023-07-15 原文

原文发表于zhu's Blog

      阿猪是计算机业余爱好者，把网页做得美观高大上对阿猪是一种折磨和挑战，所以阿猪做出来的网页都是清一色的word文档风格。为了给low逼的网页提升点儿逼格，阿猪决定模仿一下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传输的技术，并不依赖于提前获取需要显示的全部文本内容。

ChatGPT实现ltgtxffhtml

有关实现ChatGPT的文字输出效果的更多相关文章

  1. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  2. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  3. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  4. ruby - 如何进行排列以有效地定制输出 - 2

    这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][

  5. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  6. ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2

    对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一

  7. ruby - 将 spawn() 的标准输出/标准错误重定向到 Ruby 中的字符串 - 2

    我想使用spawn(针对多个并发子进程)在Ruby中执行一个外部进程，并将标准输出或标准错误收集到一个字符串中，其方式类似于使用Python的子进程Popen.communicate()可以完成的操作。我尝试将:out/:err重定向到一个新的StringIO对象，但这会生成一个ArgumentError，并且临时重新定义$stdxxx会混淆子进程的输出。 最佳答案 如果你不喜欢popen，这是我的方法:r,w=IO.pipepid=Process.spawn(command,:out=>w,:err=>[:child,:out])

  8. 亚特兰蒂斯的回声（中文版): chatGPT 的杰作 - 2

    英文版英文链接关注公众号在“亚特兰蒂斯的回声”中踏上一段难忘的冒险之旅，深入未知的海洋深处。足智多谋的考古学家AriaSeaborne偶然发现了一件古代神器，揭示了一张通往失落之城亚特兰蒂斯的隐藏地图。在她神秘的导师内森·兰登教授的指导和勇敢的冒险家亚历克斯·默瑟的帮助下，阿丽亚开始了一段危险的旅程，以揭开这座传说中城市的真相。他们的冒险之旅带领他们穿越险恶的大海、神秘的岛屿和充满陷阱和谜语的致命迷宫。随着Aria潜在的魔法能力的觉醒，她被睿智勇敢的QueenNeria的幻象所指引，她让她为即将到来的挑战做好准备。三人组揭开亚特兰蒂斯令人惊叹的隐藏文明，并了解到邪恶的巫师马拉卡勋爵试图利用其古

  9. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  10. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

随机推荐