前端Javascript中Fetch请求Coze API并流式展示请求结果

最新推荐文章于 2025-02-25 09:32:32 发布
最新推荐文章于 2025-02-25 09:32:32 发布
阅读量1.8k 收藏 12
点赞数 39
分类专栏： Javascript 人工智能 项目 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55049655/article/details/145720855
版权

01 思路技术选型Fetch

用户现在的问题是如何将coze API返回的流式响应展示出来。之前已经帮忙封装了axios请求，现在需要处理流式数据。我需要回想一下流式请求的处理方式，通常SSE（Server-Sent Events）或者使用fetch的流式读取，但用户使用的是axios，可能需要配置responseType为stream或者处理分块数据。

首先，用户之前的代码中设置了stream: true，这可能意味着API返回的是流式数据，比如每个chunk逐步返回。但axios默认情况下可能不会处理这种流式响应，可能需要调整配置。例如，使用fetch的话，可以监听chunk，但axios是否支持呢？

根据之前的知识，处理流式响应通常可以使用EventSource，但需要服务器支持SSE。如果API返回的是普通的分块数据流，可能需要使用responseType: ‘stream’（在Node.js中）或者在前端使用ReadableStream。不过在前端浏览器环境中，axios可能无法直接处理流式数据，或者需要特定的配置。

用户现在用的是浏览器环境吗？假设是前端项目，比如Vue或React。这时候可能需要使用fetch API，因为fetch可以处理流式数据，而axios在这方面的支持可能有限。或者，检查coze的API文档，确认流式返回的数据格式，比如是否每个chunk是一个JSON对象或特定格式的数据。

例如，如果API使用SSE，每个事件是一个数据块，那么在前端应该使用EventSource来监听事件。但如果API是普通的流式HTTP响应，分块发送数据，那么可能需要使用fetch并逐步读取响应体。

在用户之前的封装中，使用的是axios.post，并且设置了stream: true。但可能没有正确配置axios来处理流式响应。因此，可能需要改用fetch，或者调整axios的配置，比如设置responseType为’stream’（但浏览器中可能不支持），或者使用onDownloadProgress回调来处理接收到的数据片段。

查阅资料发现，axios在浏览器中的responseType支持’arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’（stream仅在Node.js环境中有效）。因此，在浏览器中，可能无法直接使用stream类型。这时可能需要使用text类型，并手动处理分块数据。但这种方式可能不可靠，因为axios会等待整个响应完成后再触发then。

因此，正确的做法应该是使用fetch API，因为fetch支持流式读取响应体。例如，使用fetch并设置body为可读流，然后通过reader来逐步读取数据。

或者，如果服务器支持SSE，则使用EventSource。但需要确认coze的API是否使用SSE格式，即返回的数据格式是否符合text/event-stream，并且每个事件由开头。

假设用户需要处理的是普通的流式JSON数据，每个chunk是一个JSON对象，那么可能需要使用fetch来获取响应体，并通过读取器逐步处理数据块。

总结处理步骤：

  1. 使用fetch代替axios，因为fetch支持流式读取。
  2. 设置请求参数，包括method: ‘POST’, headers, body等。
  3. 读取响应体流，使用ReadableStream.getReader()。
  4. 循环读取每个chunk，处理并更新UI。

接下来需要编写示例代码，展示如何发起请求并处理流式响应，逐步将数据展示在页面上。同时，注意处理文本的拼接和解析，特别是如果每个chunk可能包含部分数据，需要正确拼接成完整的JSON对象或文本内容。

可能的实现方式：

  • 使用fetch发起POST请求。
  • 获取响应体的reader。
  • 创建解码器来处理Uint8Array数据为文本。
  • 循环读取chunk，直到done为true。
  • 处理每个chunk的文本，可能按特定分隔符（如\n\n）分割，解析每个事件的数据。

如果coze的API返回的是类似OpenAI的流式响应，每个chunk是一个{…}\n\n的结构，那么需要按行分割处理。

最后，将处理后的数据逐步显示在页面上，比如通过React的state更新，或者直接操作DOM。

在代码中，需要注意错误处理，比如网络错误或流读取中的错误，以及如何中止请求（例如用户取消操作）。

现在，将这些思路整理成步骤化的解答，并提供示例代码，指导用户如何修改之前的封装以支持流式展示。

要实现从 coze API 获取流式数据并实时展示，可以使用 fetch API 处理流式响应，逐步读取并渲染数据。以下是完整实现方案：

// 封装流式请求方法
export const streamRequestTxt = async (content: string, onDataReceived: (string) => void) => {
  try {
    const response = await fetch('https://api.coze.cn/v3/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer pat_4cFLXH9NmmysAeyFMSVrZJXzCP8FywZlIqWWFFrQSS4x5DpYxXqmBXLfjzUmU242'
      },
      body: JSON.stringify({
        bot_id: "7472376009968042021",
        user_id: "123456",
        stream: true,
        auto_save_history: true,
        additional_messages: [{
          role: "user",
          content: content,
          content_type: "text"
        }]
      })
    });

    // 处理非200响应
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 获取可读流和读取器
    const reader = response.body?.getReader();
    const decoder = new TextDecoder('utf-8');
    let partialData = '';

    if (!reader) return;

    // 持续读取流数据
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      // 解码并处理数据块
      const chunk = decoder.decode(value, { stream: true });
      partialData += chunk;

      // 处理可能的多个事件（按换行分割）
      const lines = partialData.split('\n');
      partialData = lines.pop() || ''; // 保留未完成的行

      for (const line of lines) {
        if (line.startsWith('')) {
          const jsonData = line.replace('', '');
          try {
            const parsed = JSON.parse(jsonData);
            if (parsed.content) {
              onDataReceived(parsed.content); // 触发回调更新UI
            }
          } catch (e) {
            console.error('JSON解析失败:', e);
          }
        }
      }
    }
  } catch (error) {
    console.error('流式请求失败:', error);
    throw error; // 向上传递错误
  }
};

React 组件使用示例：

import { useState } from 'react';

export function ChatStream() {
  const [message, setMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleStream = async (input: string) => {
    setIsLoading(true);
    try {
      await streamRequestTxt(input, (chunk) => {
        setMessage(prev => prev + chunk); // 增量更新消息
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <button 
        onClick={() => handleStream('你好')}
        disabled={isLoading}
      >
        {isLoading ? '请求中...' : '发送流式请求'}
      </button>
      <div style={{ whiteSpace: 'pre-wrap' }}>
        {message}
      </div>
    </div>
  );
}

核心实现原理：

  1. 流式协议处理

    • 使用 fetch 原生API获取可读流（ReadableStream）
    • 通过 TextDecoder 处理二进制流为文本
    • 按 \n 分割数据行，处理服务端可能合并发送的多条消息

  2. 数据格式解析

    • 假设服务端采用 JSON 格式发送事件
    • 自动过滤非数据行（如心跳检测的空行）
    • 使用 JSON.parse 严格解析数据格式

  3. 实时渲染优化

    • 通过回调函数逐块传递数据
    • 前端框架中通过状态合并（如React的setState）优化渲染性能
    • 保留未完成数据块实现断包续传

高级功能扩展建议：

  1. 中断控制
// 创建AbortController
const controller = new AbortController();

// 在fetch配置中添加
signal: controller.signal,

// 暴露中断方法
return {
  abort: () => controller.abort()
};
  1. 性能优化
// 使用防抖渲染（每秒更新不超过60次）
let renderQueue = '';
const debouncedUpdate = useRef(debounce(() => {
  setMessage(prev => prev + renderQueue);
  renderQueue = '';
}, 16)).current;

// 在回调中累积数据
onDataReceived: (chunk) => {
  renderQueue += chunk;
  debouncedUpdate();
}
  1. 错误重试机制
let retries = 0;
const MAX_RETRIES = 3;

try {
  // ...原有逻辑
} catch (error) {
  if (retries < MAX_RETRIES) {
    retries++;
    await new Promise(r => setTimeout(r, 1000 * retries));
    handleStream(input);
  }
}

不同技术栈的适配方案：

  1. Vue3 Composition API
<script setup>
import { ref } from 'vue';

const message = ref('');
const isLoading = ref(false);

const handleStream = async (input) => {
  isLoading.value = true;
  try {
    await streamRequestTxt(input, (chunk) => {
      message.value += chunk;
    });
  } finally {
    isLoading.value = false;
  }
};
</script>
  1. Node.js 服务端转发
import express from 'express';
const app = express();

app.post('/chat-proxy', async (req, res) => {
  const upstreamRes = await fetch('https://api.coze.cn/v3/chat', {
    // ...相同配置
  });

  // 保持流式特性
  res.setHeader('Content-Type', 'text/event-stream');
  upstreamRes.body.pipe(res);
});

调试技巧：

  1. 在Chrome开发者工具中开启「保留日志」查看完整流式请求
  2. 使用 curl -N URL 验证原始API的流式特性
  3. 添加调试日志记录原始数据块：
console.log('[Raw Chunk]', chunk);

02 过程分析

用户现在想要在前端项目中实现流式接收并展示数据，特别是在对话框中使用类似setHistoryContent这样的状态更新函数。用户给出的代码片段显示他们正在使用React的状态管理，将消息添加到历史记录中。用户可能已经有一个基本的聊天界面，现在需要集成Coze API的流式响应。

首先，我需要理解用户的具体需求。他们可能已经能够发送消息到后端，但接收响应时是流式的，需要逐步显示数据，而不是等待整个响应完成。这可能涉及到使用Fetch API的流式处理功能，或者WebSocket，但根据之前的对话，用户使用的是Fetch。

接下来，用户提供的代码示例中，使用setHistoryContent来更新消息历史。当前的实现可能是在接收到完整响应后一次性添加消息，但现在需要改为每收到一个数据块就更新一次。这需要处理流式数据，逐步拼接内容，并更新对应的消息条目。

需要考虑的问题包括：

  1. 如何正确处理流式数据，确保每个数据块都能被及时处理。
  2. 如何管理React的状态，特别是当需要更新现有消息而不是添加新消息时。
  3. 如何处理可能的并发请求，避免状态混乱。
  4. 错误处理和加载状态的显示。

用户之前的例子中，每次接收到新的内容，都会添加一个新的消息对象到历史记录中。但流式响应应该是逐步更新同一个消息的内容，而不是创建多个消息。因此，可能需要调整状态结构，使得可以更新特定消息的文本内容。

例如，初始时添加一个带有临时ID的消息对象，表示机器人的响应正在加载，然后随着数据块的到来，不断更新该消息的text属性。完成后再标记为完成。

可能的实现步骤：

  1. 用户发送消息时，立即将用户的消息添加到历史记录中。
  2. 发送请求到Coze API，开始接收流式响应。
  3. 在接收到第一个数据块时，创建一个新的消息对象，标记为机器人，并开始填充text。
  4. 后续的数据块不断追加到该消息的text中。
  5. 流式结束时，可能标记该消息为完成，或处理可能的错误。

需要处理的技术点包括使用Fetch API的ReadableStream，正确读取数据块，并在React中高效更新状态。同时，需要确保在组件卸载时取消请求，避免内存泄漏。

另外，用户可能需要处理消息的ID管理，确保在更新时能找到正确的消息条目。例如，使用唯一ID来标识每个消息，并在流式响应开始时生成一个ID，后续更新都针对该ID。

可能的代码结构：

  • 发送用户消息时，添加到历史记录。
  • 发起Fetch请求，获取响应流。
  • 读取流中的数据，逐步更新对应的机器人消息内容。
  • 使用useState或useReducer管理消息历史状态。
  • 使用AbortController来允许取消请求。

需要确保在React的严格模式下，状态更新不会导致问题，尤其是在异步处理流时。可能需要使用ref来保持最新状态的引用，避免闭包问题。

最后，测试流式响应是否正确，确保每个数据块都能实时显示，并且界面不会因为频繁的状态更新而卡顿。可能需要优化渲染性能，比如使用React.memo或适当的状态结构。

以下是针对对话框场景的流式数据接收和展示完整实现方案：

import { useState } from 'react';

interface Message {
  id: string;
  author: 'User' | 'Bot';
  text: string;
  isStreaming?: boolean;
}

export default function ChatDialog() {
  const [history, setHistory] = useState<Message[]>([]);
  const [currentStreamId, setCurrentStreamId] = useState<string | null>(null);

  // 生成唯一ID的工具函数
  const generateId = () => Date.now().toString(36) + Math.random().toString(36).substr(2);

  // 处理流式响应
  const handleStreamResponse = async (userInput: string) => {
    // 添加用户消息
    setHistory(prev => [
      ...prev,
      { id: generateId(), author: 'User', text: userInput }
    ]);

    // 创建机器人消息占位符
    const botMessageId = generateId();
    setHistory(prev => [
      ...prev,
      { 
        id: botMessageId, 
        author: 'Bot', 
        text: '', 
        isStreaming: true 
      }
    ]);
    setCurrentStreamId(botMessageId);

    try {
      const response = await fetch('/api/coze-stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: userInput })
      });

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      let done = false;

      if (!reader) return;

      while (!done) {
        const { value, done: streamDone } = await reader.read();
        done = streamDone;
        
        if (value) {
          const chunk = decoder.decode(value);
          setHistory(prev => prev.map(msg => 
            msg.id === botMessageId 
              ? { ...msg, text: msg.text + chunk } 
              : msg
          ));
        }
      }
    } catch (error) {
      setHistory(prev => prev.map(msg => 
        msg.id === botMessageId 
          ? { ...msg, text: '请求失败，请重试', isStreaming: false } 
          : msg
      ));
    } finally {
      setCurrentStreamId(null);
      setHistory(prev => prev.map(msg => 
        msg.id === botMessageId 
          ? { ...msg, isStreaming: false } 
          : msg
      ));
    }
  };

  return (
    <div className="chat-container">
      {history.map(message => (
        <div 
          key={message.id}
          className={`message ${message.author.toLowerCase()}`}
        >
          <div className="author">{message.author}</div>
          <div className="text">
            {message.text}
            {message.isStreaming && <span className="stream-cursor">▋</span>}
          </div>
        </div>
      ))}
      
      <button
        onClick={() => handleStreamResponse('你好，有什么可以帮助的？')}
        disabled={!!currentStreamId}
      >
        {currentStreamId ? '回复中...' : '发送消息'}
      </button>
    </div>
  );
}

实现说明：

  1. 消息状态管理：
// 使用数组存储对话历史
const [history, setHistory] = useState<Message[]>([]);

// 当前正在流式接收的消息ID
const [currentStreamId, setCurrentStreamId] = useState<string | null>(null);
  1. 流式处理核心逻辑：
// 创建机器人消息占位符
const botMessageId = generateId();
setHistory(prev => [
  ...prev,
  { 
    id: botMessageId, 
    author: 'Bot', 
    text: '', 
    isStreaming: true 
  }
]);

// 逐步更新消息内容
setHistory(prev => prev.map(msg => 
  msg.id === botMessageId 
    ? { ...msg, text: msg.text + chunk } 
    : msg
));
  1. UI 优化功能：
// 流式输入时的闪烁光标
{message.isStreaming && <span className="stream-cursor">▋</span>}

// 禁用按钮防止重复请求
<button disabled={!!currentStreamId}>
  1. 错误处理机制：
catch (error) {
  setHistory(prev => prev.map(msg => 
    msg.id === botMessageId 
      ? { ...msg, text: '请求失败，请重试', isStreaming: false } 
      : msg
  ));
}

配套样式建议：

.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.message {
  margin: 10px 0;
  padding: 12px;
  border-radius: 8px;
}

.message.user {
  background: #e3f2fd;
  margin-left: 20%;
}

.message.bot {
  background: #f5f5f5;
  margin-right: 20%;
}

.stream-cursor {
  animation: blink 1s infinite;
  margin-left: 4px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

优化建议：

  1. 添加消息分块缓冲：
let buffer = '';
const processChunk = (chunk: string) => {
  buffer += chunk;
  const sentences = buffer.split(/(?<=[。！？\n])/);
  buffer = sentences.pop() || '';
  
  if (sentences.length > 0) {
    setHistory(prev => prev.map(msg => 
      msg.id === botMessageId 
        ? { ...msg, text: msg.text + sentences.join('') } 
        : msg
    ));
  }
};

// 在循环中调用
processChunk(chunk);
  1. 性能优化：
// 使用防抖更新
const updateText = debounce((newText: string) => {
  setHistory(prev => prev.map(msg => 
    msg.id === botMessageId 
      ? { ...msg, text: newText } 
      : msg
  ));
}, 50);

// 在循环中
updateText(currentText + chunk);
  1. 支持Markdown渲染：
import ReactMarkdown from 'react-markdown';

// 替换原有文本展示
<div className="text">
  <ReactMarkdown>{message.text}</ReactMarkdown>
  {message.isStreaming && <span className="stream-cursor">▋</span>}
</div>
  1. 添加消息撤回功能：
const handleRetract = (messageId: string) => {
  setHistory(prev => 
    prev.filter(msg => msg.id !== messageId)
  );
};

// 在消息组件中添加
<button 
  className="retract-btn"
  onClick={() => handleRetract(message.id)}
>
  ×
</button>

该方案实现了以下核心功能：

  • 完整的对话历史管理
  • 实时流式消息展示
  • 自动滚动支持
  • 错误状态处理
  • 流畅的交互反馈
  • 防止重复请求

可根据实际需求添加以下扩展功能：

  • 消息编辑功能
  • 对话持久化存储
  • 消息类型支持（图片/文件）
  • 打字机滚动效果
  • 消息翻译功能

03 简单代码应用

import { useState } from 'react';

export default function ChatApp() {
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const fetchStream = async (inputText) => {
    setLoading(true);
    try {
      const response = await fetch('http://localhost:3001/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: inputText })
      });

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        setMessage(prev => prev + chunk); // 实时更新消息
      }
    } catch (error) {
      console.error('请求失败:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button 
        onClick={() => fetchStream('你好')}
        disabled={loading}
      >
        {loading ? '发送中...' : '开始对话'}
      </button>
      <div style={{ border: '1px solid #ccc', padding: '1rem' }}>
        {message}
      </div>
    </div>
  );
}
【Coze】把 AI 嵌入到自己网站的网页中
m0_56699208的博客
05-20 8116
最近coze国际版升级了，支持通过类似chatgpt的api来调用你创建的bot机器人了，而且还支持将你创建的机器人嵌入到你自己网站的网页中，非常强大，每个用户都有免费的额度。
SSE/Fetch API+Stream/WebSocket实时流式接收Node后端传来的处理过后的Coze API数据
警警的博客
02-21 1334
字节青训对话框项目：SSE/Fetch API+Stream/WebSocket实时流式接收Node后端传来的处理过后的Coze API数据，数据流Coze API->(Model->Service->Controller)Node服务转发->浏览器端（客户端）
前端对话框项目——调用字节Coze API
警警的博客
02-05 5256
用Coze构建智能体，然后在前端调用它的API。首先，我得确认Coze是什么，可能是一个类似Dialogflow或者Rasa的AI平台，提供自然语言处理或者对话管理服务。用户可能是开发者，想在自己的前端应用里集成这个智能体，比如网站或者移动应用。需要先了解Coze的API文档，看看认证方式、可用端点、请求和响应的格式。接下来，用户可能对API调用流程不太熟悉，需要分步骤讲解。首先是注册和获取API密钥，这通常是第一步，每个API服务都需要认证。然后创建智能体，可能是在Coze平台上配置意图、实体、回复等。
Coze平台智能开发：前端代码与API调用攻略
lgf228的专栏
02-24 3350
本文深入解析Coze平台最新推出的前端代码自动生成系统，基于微调大模型技术实现UI组件智能构建与自建JavaScript API的无缝调用。创新性地融合计算机视觉识别（CV）、知识蒸馏（Knowledge Distillation）和动态行为建模技术，突破传统低代码平台"设计稿转代码"的局限性。通过三阶段工作流设计，开发者可在保留完整代码控制权的同时，实现效率提升300%的突破性进展。关键技术覆盖组件智能识别、API安全调用、跨框架适配等核心场景，为全栈开发提供标准化解决方案
【GPT】Coze使用开放平台接口-【5】API 调用
非晓为骁的博客
08-30 8625
我们在机器人里面引用工作流，当然也可以通过 API 直接调用工作流，coze 也提供了这一套的 API 接口。coze 的 API 接口肯定也不只是接入工作流，Bots，文件，知识库等，都有相关接口。这个文档我们也只专注在工作流的 API 接口调用上，我们之后也会补充其他形式的 API 接口调用，尤其是对话的。
Coze接入微信公众号以及Python调用API保姆级教程
Python_Ai_Road的博客
06-30 6182
coze是字节跳动旗下的零代码大模型Agent定制平台~具有以下主要功能特点：⚫️ 1，零成本发布: 可非常简单发布自己定制的bot到 豆包，公众后订阅号，微信客服，掘金等平台。⚫️ 2，多种模型选择：包括 kimi，豆包，baichuan4, 通义千问，MiniMax，GLM4等均可使用...⚫️ 3，丰富的插件工具：必应搜索，文生图，图片理解，图片OCR，wolfram alpha，网页解析，...
【GPT】Coze使用开放平台接口-【6】Dify 也来一遍
非晓为骁的博客
08-30 4977
本节用 Dify 也会创建插件，工具，工作流，API 调用
万字实践教程，全面入门 Coze 工作流｜用 Coze 打造 AI 精读专家，复刻 10 万粉公众号的创作生产力...
easylife206的专栏
09-19 1145
公众号关注「奇妙的 Linux 世界」设为「星标」，每天带你玩转 Linux ！可能是全网最好的 Coze 教程（之一），带你一次性入门 Coze 工作流。即使是非技术出身的爱好者，也能上手跟学，一站式学会 AI Agent 从设计到落地的全流程方法论。写在开头这篇文章其实是世界线的收束，总算是把我入坑 AI 后的第一个 idea 给填平了。想法诞生于一个很优秀、勤奋、日更的英文精读公众号。Le...
Js调用cozeAPI（v2和v3版本）
weixin_62547918的博客
02-24 328
2.V3中增加DeepSeek R1的深度思考内容（使用v2请求相同coze，获取不到思考的内容）1.请求体：user_id和user， additional_messages和query。
sse 将coze流式数据返给前端
最新发布
04-02
### 如何通过 Server-Sent Events (SSE) 将 Coze 流式数据传递到前端 Server-Sent Events (SSE) 是一种允许服务器向浏览器推送实时更新的技术。它基于 HTTP 协议，适合用于单向通信场景（服务器推送到客户端）。...
前端fetch 实现流式接口
weixin_44405693的博客
05-23 5217
先说说传统传输吧，我们日常接触的大多数是传统传输方式，就也是整段传输，前后端将数据一次性传送给对方；相比于传统传输方式，流式传输则采用分段的方式将要传输的数据分层n段，后端一次性传一段给前端，直到传输完成为止，当然在传输的过程中，前端也可以提前中断传输，后端收到中断传输的消息后，也不再继续往前端传输剩下没传完的数据段。当然，前端流式传输需要在后端支持分块传输的情况下才能实现。简单来说fetch 是一种 HTTP 数据请求的方式， XMLHttpRequest（以下简称 XHR）的一种替代方案。
用 Coze(扣子) 打造 _最强_ 浏览器书签助手（上）
Coder-Pig的猪栏
05-20 4872
😆 好久没耍Coze，更新了不少东西啊，先快速过一下都有啥，知道有什么工具，方好有的放矢搭Bot。然后写一个简陋的Bot，支持浏览器书签自动分析 + AI 搜索，也踩了一些坑...
【JavaScript】fetch 处理流式数据，实现类 chatgpt 对话
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-16 1286
本文只包含最基础的请求后端大佬给得对话接口，大部分模型的传参是差不多的，
AI实践：2小时带你使用 coze+windsurf 打造一个网站内容提取谷歌插件
战场小包的博客
11-29 6204
工作转眼就接近半年之久，潇洒生活一去不复返，充裕的时间变得捉襟见肘，不由得感到一丝丝焦虑，有些时候连阅读blog的时间都很难抽出来。作为一个程序员，为了保持技术的敏感度，以及对于日常实事的了解，文章阅读是必不可少的，如何快速的筛选优质文章并进行高效阅读，成为这一段时间我苦思冥想的梦魇。起初解决方案是压力自己，提高工作效率，这样就能实现早下班，抽时间来进行学习，但是作为一个AI时代的程序员，压力已经够大了，不能再自我pua了～。这段时间。
TensorFlow相关组件的安装
AAI666666的博客
01-11 2484
TensorFlow相关组件的安装
[React]流式响应代码数据，处理转换为支持Markdown渲染和可复制性功能的实现
警警的博客
02-25 1746
React代码从流式API响应处理转换为支持Markdown渲染和可复制性的实现。用户之前提供的代码是使用fetch进行流式请求，并通过正则表达式提取内容更新状态。现在他们希望展示Markdown格式，包括图片，并且内容可以复制。首先，我需要理解用户现有的代码结构。他们使用fetch POST请求Coze的API，设置stream为true，这意味着数据会分块返回。然后使用reader读取流，解码每个chunk，用正则表达式提取content字段，并更新historyContent状态来实时显示内容。
AI智能体 | 扣子Coze 工作流中如何嵌入代码，看这一篇就够了
xx_nm98的博客
08-14 5322
Coze的工作流中除了能嵌入大模型，插件，图像流，其他工作流外，还能嵌入代码。嵌入代码的好处是对一些复杂的返回结果进行二次处理。Coze的代码支持js和python两种语言。这次用python来做演示介绍在节点中选择代码弹出对话框如下，有输入框，可以是引用也可以是自己输入。另外提供了一个demo的代码片段。点击在IDE中编辑 可以进入编辑页面在代码中，获取到输入通过如下方式代码返回给下游模块的是一个字典在这个demo代码中ret是一个字典, 里面包含了key0,key1,key2三个键值。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GISer_Jinger

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值