项目github地址：https://github.com/langchain-ai/open-canvas

        2024年10月chatgpt发布了Canvas，一个与ChatGPT合作写作和编程的新界面。 在Canvas模式之下，就不仅仅是简单对话的过程了，而是允许用户可以对生成的内容进行二次创作和编排，用官方的话来说就是：就像文案、代码编辑器一样。

        langchain.ai也开源了相同功能的open-canvas。项目编写是通过typescript实现的，看了一下代码，简单介绍一下实现逻辑。

 项目使用langgraph，先看下langgraph的流程图：

        从上图可以看到，首先通过generatePath节点路由大模型写作的各个节点这里一共有6个，包括了updateArtitact、rewriteCodeArtitactTheme、rewriteArtifact、rewriteArtifactTheme、generateArtifact、respondToQuery。以上除了respondToquery是生成用户对话query的回复以外，其他的五个操作都是对写作输出(Atifact)的修改更新。所以在这5个节点结束之后会流到gengerateFollowup，主要是在聊天页面输出写作之后的返回。reflect是对用户风格和写作风格的反思，会以异步的方式在对话闲置时间运行，其余节点都会依赖该节点生成的flection进行生成任务。

以下是open-canvas的ui页面：

接下来再简单介绍一下节点之前流向的判断逻辑，和进行大模型生成时模型的输入和对应的输出。

首先根据用户操作分为
1.高亮选择 highlight
        updateArtitact
        高亮选择是选择已经生成的内容artifact，并可以输入针对性的query要求。
        对应的输入输出为：
        input：highlightText，reflection，last message(用户修改要求)
        output： hightlightUpdataText

2.页面右下角theme按钮的选择
         这边根据artifact的type可以分为code和text。

        a.rewriteCodeArtitactTheme
        code的theme按钮包括：注释command, 日志log, 编程语言language, bug修复。
        对应的输入输出为：
        input：reflection， artifact， command/log/language/bug
        output： newartifact

        b.rewriteArtifactTheme
        text的theme按钮包括：语言，表情，文本长度，阅读等级。
        对应的输入输出为：
        input：reflection， artifact， language/emoji/length/readLevel
        output： newartifact

3.左下角input query的输入
        ROUTE_QUERY首先需要判断该步是进行回复query还是生成artifact
        该处路由需要调用大模型。
        对应的输入输出为：
        input：last 3 message(三条历史对话)，artifact(如果有) 
        output: respondToquery  or   输出artifact

        a.respondToQuery
               对应的输入输出为：
               input：message(所有历史对话)，reflection， artifact(如果有)
               output：对话框回复

        b.输出artifact
                如果当前没有artifact，则从头生成。
                generateArtifact
                    对应的输入输出为：
                    input：type(code/text内部判断), reflection, message
                    output：artifact(title, content)

                如果当前有artifact，则进行改写。
                rewriteArtifact
                    这边会进行两步，先判断type(content或者code)和对应的title，再进行artifact的生成。
                    第一步： 
                    对应的输入输出为：
                    input：type(code/text内部判断), lastmessage, artifact(:500)
                    output：type, title
                    第二步：
                    对应的输入输出为：
                    input：artifact, reflection, if newtype(type,titile), last message
                    output： new artifact

gengerateFollowup 对话框回复
        对应的输入输出为：
        input：artifact  mssage  reflection
        output：message return

relection（异步更新）
        对应的输入输出为：
        input：artifact  message  reflection
        output： reflection （style  user）

以上就是langchain-ai的opena-canvas的开源实现介绍，具体的细节和大模型pompt的编写需要项目github浏览。