哥伦布即时设计平台ChatGPT落地实践

‍‍【 1.1 平台能力 】

3.数据接口配置能力：即时设计平台支持与数据接口的绑定，可以通过配置数据接口来实现页面内容的动态展示，提高页面的灵活性和可扩展性。

4.交互事件配置能力：即时设计平台支持对页面元素的交互事件进行配置，包括点击、滑动、弹窗等，可以实现页面的交互效果，提升用户体验。

5.预览和下载能力：即时设计平台提供了在线预览和下载代码的功能，可以实时查看页面效果，并将设计的页面代码下载到本地进行进一步开发和调试。



【1.2 chatGPT x 即时设计平台能做些什么？】



【 2.1 问答助手 】

什么是即时设计平台

在哥伦布即时设计中，即时设计平台是一个用于即时搭建C端页面的开发平台。它提供了编辑样式、创建数据源、绑定数据源、绑定交互事件、下载代码、在线预览等功能。你可以通过即时设计平台来创建和编辑页面的样式和内容，配置数据接口和交互事件，并最终生成可下载的代码或在线预览页面。即时设计平台可以帮助开发人员快速搭建页面，提高开发效率。

如何创建数据源

在哥伦布即时设计中，创建数据源的步骤如下：

1.打开即时设计平台，进入画布编辑界面。

3.在数据源页面级弹窗中，点击“新建接口”按钮，创建一个新的数据接口。

4.在接口配置中，填写接口名称、请求方式（GET或POST）、接口URL等信息。

5.在属性参数配置中，根据接口的需求，添加相应的参数，包括Query、Header、Body等。

6.在响应信息配置中，可以配置接口返回的数据处理，如对返回的数组进行过滤等。

7.点击保存按钮，保存数据源配置。

以上是创建数据源的基本步骤，具体的操作可以参考哥伦布即时设计的官方文档。

【 2.2 智能楼层创建&修改 】

帮我修改商品名称内容为618大麦、字体为蓝色、价格字号20，价格字体颜色为红色，头图显示

创建&修改整体流程为根据用户的需求描述，服务器请求(创建)或者获取schema（修改）组织prompt，多次调用openai接口，最后整合GPT返回与实际交付前端的DSL，前端根据DSL进行渲染：

【 3.1 智能问答助手 】

向量化：

流式处理：

res.body.on('data',data=>{ const lines = data.toString().split('\n').filter(line=> line.trim()!==''); for(const line of lines){      const message = line.replace(/^data: /,'');     if(message ==='[DONE]'){      stream.end();      return;// Stream finished      } try{     const parsed =JSON.parse(message);     if(parsed.choices[0].finish_reason !=='stop'){          stream.write(parsed.choices[0].delta.content);     }  }catch(error){}}});

【 3.2 智能创建 】

【 3.3 智能修改 】



【 3.4 GPT prompt与核心实现 】



【 4.1 目前存在的问题与目标 】

【 4.2 开发环境效果演示 】

【 4.3 任务拆分执行架构 】

【 4.4 连续对话tokens计算 与 GPT prompt 】

连续对话实现比较容易，只要每次访问GPT携带之前的聊天记录即可，那么问题来了，连续对话是占用tokens，多轮对话后tokens巨大，GPT接口只有max_token来指定返回的最大token数，对话记录的token数占用需要自己统计。也就是max_token = 模型token数 - 已占用token数。

如何统计已占用token数呢？

OpenAi官方：tiktoken 但不幸的是不支持node，开源社区有一个dpbd/tiktoken 但是使用起来比较麻烦。

这里有一个笔者自己基于dpbd/tiktoken进行二次封装的@mfe/get-gpt-tokens，方便tokens的计算、只有message时非常精准、有functions会有40左右token大于真实tokens，其实，够用了。