Skip to main content

3 posts tagged with "AI"

AI tag description

View All Tags

深度思考扩展

· 3 min read
marvin-season
marvin-season
Maintainer of Docusaurus

S​

DeepSeek 的爆火带来的深度思考模式，需要在已有流式对话中实现【前端】

T​

在原有的对话基础上加入深度思考的交互，并支持不同的思考风格

A​

解析深度思考内容，开发新的深度思考组件，尽可能不改变原有组件实现深度思考的功能扩展，=> HOC正是这一思想

R​

扩展原有组件，实现深度思考功能

Concrete​

原有组件​

function Content({content}) {
    return <div>{content}</div>
}

目标组件​

错误的方式：直接修改原组件​

function ContentWithThink({content, think}) {
    return <div>
        <div>{think}</div>
        <div>{content}</div>
    </div>
}

推荐的方式:HOC​


const withThink = <P extends object>(
    Component: ComponentType<P>, 
    ThinkComponent: FunctionComponent<ThinkContentStyleProps>) => 
{
  return (props: P & { content: string }) => {
    const { 
        content, 
        think_content, 
        closedMatch, 
        openMatch 
    } = parseThinkContent(props.content)

    return (
      <>
        <Think 
            closedMatch={!!closedMatch} 
            openMatch={!!openMatch} 
            think_content={think_content} 
            ThinkComponent={ThinkComponent} />
        <Component {...props} content={content} />
      </>
    )
  }
}

export const ContentWithThink = memo(withThink(Content, ThinkContentStyle), (prev, next) => {
  return prev.content === next.content
})

withThink是一个HOC组件，用于扩展传入的Content组件,其中ThinkContentStyle为配置思考组件的风格提供了入口， HOC中的Think组件则定一个思考组件的逻辑以及布局

const Think = ({ closedMatch, openMatch, think_content, ThinkComponent }: ThinkProps) => {
  const [status, setStatus] = useState<ThinkStatus>(ThinkStatus.completed)

  const match = useMemo(() => {
    return openMatch || closedMatch
  }, [openMatch, closedMatch])

  useEffect(() => {
    if (openMatch) {
      setStatus(ThinkStatus.thinking)
    }
  }, [openMatch])

  useEffect(() => {
    if (closedMatch) {
      setStatus(ThinkStatus.completed)
    }
  }, [closedMatch])

  useEffect(() => {
    EE.on(ThinkEvent, ({ thinkStatus }: { thinkStatus: ThinkStatus; }) => {
      // 完整匹配到了
      if (closedMatch) {
        setStatus(ThinkStatus.completed)
        return
      }
      setStatus(thinkStatus)
    })
    return () => {
      EE.off(ThinkEvent)
    }
  }, [status])

  return <>{match && <ThinkComponent think_content={think_content} status={status} />}</>
}

How To Use​

直接替换原来的组件为高阶组件

() => <ContentWithThink content={content} className={className}/>

Recap​

  • 使用高阶组件扩展了业务功能，尽可能的没有操作原有的代码
  • 将新功能全部聚合在HOC中

流数据渲染优化

· 3 min read
marvin-season
marvin-season
Maintainer of Docusaurus

切入点​

如何对流失数据优化，提高渲染性能。从以下两点切入:

懒加载渲染： 可视区外部的信息不用渲染，当滚动到可视区时再渲染。 注意，此时需要一个buff来缓冲渲染到页面的信息，防止给用户造成流暂停的假象。

增量式渲染： 已经渲染到页面上的数据不用重复渲染，只渲染新增的数据。

AI Chat

· 4 min read
marvin-season
marvin-season
Maintainer of Docusaurus

概要​

核心数据结构： 消息列表 (messages)

核心操作：调用模型接口，生成消息

次要操作：复制、引用、重新生成、编辑、参考附件选择

UI：聚合上操作以及数据

class CoreUI {
    useMessage(){
        // connect to message
        return this
    }
    useHandle(){
        // connect to handle
        return this
    }
    useChat(){
        // connect to AI
        return this
    }
    render(){
        // render ui
        return <></>
    }
}
new CoreUI().useMessage().useHandle().useChat().render();

Concept​

S-S-E​

Server-Send-Event: data is flowing from server to client format: tag:string for example:

data: "{ name: 'marvin', age: 20 }"

在SSE中 数据以固定的格式传输到客户端，在使用之前客户端或许需要先进行解析。