首页 > 其他分享 >js WritableStream

js WritableStream

时间:2024-08-31 10:14:49浏览次数:9  
标签:const WritableStream signal js abort prompt output

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="generate">生成</button>
    <button id="abort">终止</button>
    <textarea id="editor" rows="20"></textarea>
    <div id="previewer"></div>
    <script type="module">
        let abort = null;

        async function generate() {
            if (abort) {
                abort = null;
            }
            abort = new AbortController();
			const signal = abort.signal;
            const output = document.getElementById("editor");

            const prompt = "请回答问题:xxx";
            const options = {
                body: `{"prompt": "${prompt}"}`,
                headers: { "Content-Type": "application/json" },
                method: "POST",
                signal: signal,
            };
            const response = await fetch("/chat", options);
            const decoderStream = new TextDecoderStream("utf-8");
            const writer = new WritableStream({
                write(chunk) {
                    output.innerHTML += chunk;
                    output.scrollTop = output.scrollHeight;
                }
            });
            response.body
                .pipeThrough(decoderStream)
                .pipeTo(writer)
                .catch((error) => {
                    console.log(`Something went wrong with the stream: ${error}`);
                });
        }

        const generateElement = document.getElementById("generate");
        generateElement.onclick = () => {
            generate();
        }

        const abortElement = document.getElementById("abort");
        abortElement.onclick = () => {
            if (abort) {
                abort.abort();
            }
        }
    </script>
</body>

</html>

标签:const,WritableStream,signal,js,abort,prompt,output
From: https://www.cnblogs.com/soarowl/p/18389920

相关文章

  • 基于nodejs+vue潮流数码社区系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着科技的飞速发展,数码产品已成为现代人日常生活中不可或缺的一部分,从智能手机、笔记本电脑到各类智能穿戴设备与智能家居产品,其更新换代速度之快,使得消费......
  • 基于nodejs+vue车辆充电桩[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着全球能源结构的转型和电动汽车产业的迅猛发展,车辆充电桩作为电动汽车普及的关键基础设施,其建设与管理的重要性日益凸显。近年来,电动汽车市场快速增长,但......
  • 基于nodejs+vue车辆道路管理系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着城市化进程的加速和汽车保有量的持续增长,道路交通管理面临着前所未有的挑战。传统的车辆与道路管理方式已难以有效应对日益复杂的交通状况,如交通拥堵、......
  • 基于nodejs+vue车辆管理系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着城市化进程的加速和交通网络的日益完善,车辆管理已成为现代社会中不可或缺的一环。传统的人工车辆管理模式不仅效率低下,而且容易出错,难以满足大规模车辆......
  • js实现队列
    目录一、什么是JavaScript队列数据结构二、创建一个JavaScript队列数据结构三、封装队列方法①向队列添加元素②检查队列是否为空③获取队列的长度④从队列移除元素⑤查看队列头元素⑥清空队列⑦创建toString方法四、使用Queue类一、什么是JavaScript队列数据结构在......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......