一种流式数据的打字机效果展示方法与流程

    专利查询2025-03-23  35


    本发明涉及打字机领域,尤其涉及一种流式数据的打字机效果展示方法。


    背景技术:

    1、1)相关技术的背景介绍:随着互联网的发展,前端开发技术已经成为了现代软件开发的重要组成部分。前端开发主要负责用户界面的设计和实现,包括网页的布局、样式和交互方式等。同时,数据处理技术也在不断发展,各种大数据处理技术和算法被广泛应用于数据分析和处理。此外,视觉效果展示技术也在不断进步,各种动态效果和交互设计被广泛应用于用户体验设计中。

    2、2)现有技术的解决方案:在现有的技术中,前端开发主要通过编写html、css和javascript等语言来实现用户界面的设计和实现。同时,后端服务器会通过http协议向前端发送数据,前端再通过解析这些数据来实现页面的动态更新。在数据处理方面,通常会使用各种大数据处理技术和算法来对数据进行清洗、整合和分析。在视觉效果展示方面,通常会使用css3、javascript和canvas等技术来实现各种动态效果和交互设计。

    3、3)现有技术问题:然而,现有的技术在处理大规模数据时,往往会出现性能瓶颈。这是因为传统的http协议是单向的,每次请求都需要重新建立连接,这会导致大量的网络开销。同时,现有的数据处理技术和算法往往无法满足实时处理的需求,这会导致数据的延迟显示。此外,现有的视觉效果展示技术虽然实现各种动态效果和交互设计,但是在处理大量数据时,可能会导致页面的渲染速度变慢,影响用户体验。


    技术实现思路

    1、鉴于上述问题,提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种流式数据的打字机效果展示方法。

    2、根据本发明的一个方面,提供了一种流式数据的打字机效果展示方法,所述打字机效果展示方法包括:

    3、步骤s1:配置大模型接口;

    4、步骤s2:在前端项目中引入markdown-it依赖包,用于实时把markdown文本翻译成html语言;

    5、步骤s3:系统使用prismjs和escape-html进行代码高亮处理,通过highlight函数来适配多种编程语言的高亮需求;

    6、步骤s4:在项目中创建一个名为"markdownparse"的组件,用于实现前端打字机效果展示;

    7、步骤s5:运行项目,在页面上看到实时的前端打字机效果展示。

    8、可选的,所述步骤s1:配置大模型接口具体包括:设置每秒返回数据的频率为10次,每次返回的数据量为100kb。

    9、可选的,所述步骤s2:在前端项目中引入markdown-it依赖包,用于实时把markdown文本翻译成html语言具体包括:

    10、在前端项目中引入markdown-it依赖包,实时把markdown文本翻译成html语言;

    11、具体操作是系统初始化一个markdownit实例,并根据传入的配置项设置各种选项;

    12、系统使用多种插件增强markdown的功能;

    13、系统使用自定义插件处理html块、图像、段落、行号和代码块包装;

    14、所有设置和插件共同作用,使得markdown内容能够被实时渲染为高质量的html。

    15、可选的,所述根据传入的配置项设置各种选项具体包括:是否支持换行、是否允许html标签、代码高亮、语言前缀、链接解析、引号样式、排版优化和xhtml输出。

    16、可选的,所述系统使用多种插件增强markdown的功能具体包括:支持缩写、锚点、定义列表、脚注、插入文本、标记文本、下标、上标和任务列表。

    17、可选的,所述步骤s3:系统使用prismjs和escape-html进行代码高亮处理,通过highlight函数来适配多种编程语言的高亮需求具体包括:

    18、系统使用prismjs和escape-html进行代码高亮处理,通过highlight函数来适配不同编程语言的高亮需求;

    19、根据编程语言的不同,系统会自动调整代码的显示样式,确保不同语言的代码块都能得到正确的高亮展示;

    20、系统还提供了一种在代码块上增加复制按钮的功能,用户通过点击按钮轻松复制代码;

    21、具体实现中,系统在页面加载后查找所有代码块的复制按钮,并为按钮绑定点击事件,当用户点击按钮时,系统会将对应的代码块内容复制到剪贴板,并显示复制成功的提示信息。

    22、可选的,所述步骤s4:在项目中创建一个名为"markdownparse"的组件,用于实现前端打字机效果展示具体包括:

    23、在组件中定义一个名为"render"的方法,该方法接受一个字符串参数;

    24、通过调用大模型接口获取对应的markdown数据,接着通过markdown-it依赖包将markdown数据翻译成html语言,最后在页面上渲染出对应的效果。

    25、可选的,所述步骤s5:运行项目,在页面上看到实时的前端打字机效果展示具体包括:

    26、系统通过定义css动画来控制文本的显示速度和效果,并在javascript中动态调整文本内容,逐步呈现;

    27、系统根据需要调整打字速度和样式,以适应多种使用场景和用户需求。

    28、本发明提供的一种流式数据的打字机效果展示方法,所述打字机效果展示方法包括:步骤s1:配置大模型接口;步骤s2:在前端项目中引入markdown-it依赖包,用于实时把markdown文本翻译成html语言;步骤s3:系统使用prismjs和escape-html进行代码高亮处理,通过highlight函数来适配多种编程语言的高亮需求;步骤s4:在项目中创建一个名为"markdownparse"的组件,用于实现前端打字机效果展示;步骤s5:运行项目,在页面上看到实时的前端打字机效果展示。实现前端大模型接口流式返回数据的前端打字机效果展示,提高用户体验。

    29、上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。



    技术特征:

    1.一种流式数据的打字机效果展示方法,其特征在于,所述打字机效果展示方法包括:

    2.根据权利要求1所述的一种流式数据的打字机效果展示方法,其特征在于,所述步骤s1:配置大模型接口具体包括:设置每秒返回数据的频率为10次,每次返回的数据量为100kb。

    3.根据权利要求1所述的一种流式数据的打字机效果展示方法,其特征在于,所述步骤s2:在前端项目中引入markdown-it依赖包,用于实时把markdown文本翻译成html语言具体包括:

    4.根据权利要求3所述的一种流式数据的打字机效果展示方法,其特征在于,所述根据传入的配置项设置各种选项具体包括:是否支持换行、是否允许html标签、代码高亮、语言前缀、链接解析、引号样式、排版优化和xhtml输出。

    5.根据权利要求3所述的一种流式数据的打字机效果展示方法,其特征在于,所述系统使用多种插件增强markdown的功能具体包括:支持缩写、锚点、定义列表、脚注、插入文本、标记文本、下标、上标和任务列表。

    6.根据权利要求1所述的一种流式数据的打字机效果展示方法,其特征在于,所述步骤s3:系统使用prismjs和escape-html进行代码高亮处理,通过highlight函数来适配多种编程语言的高亮需求具体包括:

    7.根据权利要求1所述的一种流式数据的打字机效果展示方法,其特征在于,所述步骤s4:在项目中创建一个名为"markdownparse"的组件,用于实现前端打字机效果展示具体包括:

    8.根据权利要求1所述的一种流式数据的打字机效果展示方法,其特征在于,所述步骤s5:运行项目,在页面上看到实时的前端打字机效果展示具体包括:


    技术总结
    本发明公开了一种流式数据的打字机效果展示方法,所述打字机效果展示方法包括:步骤S1:配置大模型接口;步骤S2:在前端项目中引入markdown‑it依赖包,用于实时把markdown文本翻译成HTML语言;步骤S3:系统使用prismjs和escape‑html进行代码高亮处理,通过highlight函数来适配多种编程语言的高亮需求;步骤S4:在项目中创建一个名为"markdownParse"的组件,用于实现前端打字机效果展示;步骤S5:运行项目,在页面上看到实时的前端打字机效果展示。实现前端大模型接口流式返回数据的前端打字机效果展示,提高用户体验。

    技术研发人员:张恒
    受保护的技术使用者:北银金融科技有限责任公司
    技术研发日:
    技术公布日:2024/11/26
    转载请注明原文地址:https://tc.8miu.com/read-26755.html

    最新回复(0)