我们用扣子Coze搭建了个 AI 公益应用（详细技术拆解教程）

我们用扣子Coze搭建了个 AI 公益应用（详细技术拆解教程） 我们用扣子Coze搭建了个 AI 公益应用（详细技术拆解教程） Modified March 23, 2025 然后在让我们切换到「HTP测试」页面。 功能页 这个页面相对复杂，当用户上传完图片进入分析，分析后会显示具体分析结果。 布局组件：容器（Div）、Markdown、图片（Image）、按钮（Button）、图片上传（ImageUpload） 组合方式： 最上面是导航组件可以直接复制上个页面的布局 接下来是一个容器组件包含一个图片组件显示的banner部分 功能区域为两个容器横向排列： 左边的容器是包含 Markdown组件内容： Code block Plain Text Copy HTP测试 这是最常见的名称，全称为“House Tree Person Test”，通过绘画（尤其是房子、树和人）来评估儿童心理状态和发展水平的测试方法 上传图片组件（默认配置），提交按钮配置： • 属性设置： ◦ 宽度百分比 95% ◦ 高度固定 50px ◦ 颜色填充 295DC1 ◦ 圆角 12 ◦ 加载状态 {{ psy ai.loading }} {{ psy ai.loading }} 解释：工作流的加载中状态，如果在执行工作为则值为true否则为false，执行中按钮就会有个加载中的状态，这个状态就是为了防止重复点击，造成没必要的工作流调用。 • 事件配置： ◦ 事件类型 点击时 ◦ 执行动作 调用工作流 ◦ WorkFlow（工作流） psy ai ◦ 入参配置 {{ImageUpload1.value[0]}} ◦ 失败提示 工作流调用失败，原因：{{psy ai.error}} 参数解释： • {{ ImageUpload1.value[0] }} 是获取图片上传组件的第一张图片，因为组件是可以上传多张图片的所以需要通过下标数来获取，数组的下标是从0开始的。 • {{psy ai.error}}是工作流的报错信息。 当用户上传图片点击按钮的时候会进入一个在家中的状态所以右边的内容显示容器里面有两个组件 • 图片组件显示加载中的gif图片（默认隐藏） • Markdown 组件显示分析内容 图片配置： 来源本地上传加载中gif图 尺寸 宽度：百分比 100%，高度：适应内容 可见性 隐藏：{{!psy ai.loading }} ，当loading为true的时候就隐藏，但是前面加了「!」就是取反（true= false），也就是工作流运行中不隐藏（代表显示）。 Markdown 配置： 内容显示是 psy ai 工作流输出的结果 隐藏根据 {{psy ai.loading}} ，psy ai工作流运行完了就显示 到这里页面所有的布局和数据交互就全部完成了。 介绍页 这个页面就最简单了全部都是文字介绍 然后在让我们切换到「HTP测试」页面。 功能页 这个页面相对复杂，当用户上传完图片进入分析，分析后会显示具体分析结果。 布局组件：容器（Div）、Markdown、图片（Image）、按钮（Button）、图片上传（ImageUpload） 组合方式： 最上面是导航组件可以直接复制上个页面的布局 接下来是一个容器组件包含一个图片组件显示的banner部分 功能区域为两个容器横向排列： 左边的容器是包含 Markdown组件内容： 上传图片组件（默认配置），提交按钮配置： • 属性设置： ◦ 宽度百分比 95% ◦ 高度固定 50px ◦ 颜色填充 295DC1 ◦ 圆角 12 ◦ 加载状态 {{ psy ai.loading }} ◦ 宽度百分比 95% ◦ 高度固定 50px ◦ 颜色填充 295DC1 ◦ 圆角 12 ◦ 加载状态 {{ psy ai.loading }} {{ psy ai.loading }} 解释：工作流的加载中状态，如果在执行工作为则值为true否则为false，执行中按钮就会有个加载中的状态，这个状态就是为了防止重复点击，造成没必要的工作流调用。 • 事件配置： ◦ 事件类型 点击时 ◦ 执行动作 调用工作流 ◦ WorkFlow（工作流） psy ai ◦ 入参配置 {{ImageUpload1.value[0]}} ◦ 失败提示 工作流调用失败，原因：{{psy ai.error}} ◦ 事件类型 点击时 ◦ 执行动作 调用工作流 ◦ WorkFlow（工作流） psy ai ◦ 入参配置 {{ImageUpload1.value[0]}} ◦ 失败提示 工作流调用失败，原因：{{psy ai.error}} 参数解释： • {{ ImageUpload1.value[0] }} 是获取图片上传组件的第一张图片，因为组件是可以上传多张图片的所以需要通过下标数来获取，数组的下标是从0开始的。 • {{psy ai.error}}是工作流的报错信息。 当用户上传图片点击按钮的时候会进入一个在家中的状态所以右边的内容显示容器里面有两个组件 • 图片组件显示加载中的gif图片（默认隐藏） • Markdown 组件显示分析内容 图片配置： 来源本地上传加载中gif图 尺寸 宽度：百分比 100%，高度：适应内容 可见性 隐藏：{{!psy ai.loading }} ，当loading为true的时候就隐藏，但是前面加了「!」就是取反（true= false），也就是工作流运行中不隐藏（代表显示）。 Markdown 配置： 内容显示是 psy ai 工作流输出的结果 隐藏根据 {{psy ai.loading}} ，psy ai工作流运行完了就显示 到这里页面所有的布局和数据交互就全部完成了。 介绍页 这个页面就最简单了全部都是文字介绍 顶部导航直接复制第一个页面的，接下来就是一个容器里面包裹着 6 个 MarkDown 组件来展示内容。 具体设置：圆角 15，内边距 20。 在此解释一下，明明用一个 Markdown 就可以完整呈现全部内容，为何我们却用了 6 个呢？ 这是考虑到合理留白能提升阅读与视觉体验。通过将内容分散在 6 个 Markdown 中，能留出恰到好处的空白区域，避免信息过度集中，让整体布局看起来更加舒适美观，大大优化大家的阅读感受 。 总结 此次参与开发这个公益项目，让我切实感受到技术与公益融合的力量。从最初看到视频受到触动，到和伙伴们分工协作完成项目，过程虽充满挑战，但团队的努力让项目顺利上线。 这只是一个起点，未来我们期待更多力量加入，一起优化推广项目，让更多留守儿童能得到专业心理支持。 感谢一路支持的朋友们，我们会继续努力，用技术为孩子们带去温暖和希望 。 🔗 原文链接： https://mp.weixin.qq.com/s/GQPwiLEC... https://mp.weixin.qq.com/s/GQPwiLEC... 原创 陈宇明&朱一鸣 码个蛋 2025年03月17日 14:46 湖南 起因 在2024年12月的某一天晚上我躺在床上无聊的刷着朋友圈，突然看到好友 yiming（朱一鸣） 发的朋友圈。 我点进去看了下 林亦LYi 发布的《AI读心术？我们花了5个月，给乡村孩子开源了一套房树人心理测试系统》的b站视频。 https://www.bilibili.com/video/BV1Hmk2Y1EJq 作者花了5个月的时间做的给乡村孩子开源了一套房树人心理测试系统，并且写了一篇论文以及开源的项目代码。 论文：https://arxiv.org/abs/2412.14769 项目：https://github.com/LYiHub/psydraw PsyDraw: 面向留守儿童心理健康检测的多智能体多模态系统 项目概述： 在中国，超过6600万留守儿童由于父母外出务工面临严重的心理健康挑战。早期筛查和识别高风险留守儿童至关重要，但由于心理健康专业人员严重短缺（尤其是在农村地区），这项工作面临巨大挑战。 虽然房树人测验（HTP）显示出较高的儿童参与度，但其对专业解释的需求限制了其在资源匮乏地区的应用。为解决这一挑战，我们提出了PsyDraw，一个基于多模态大语言模型的多智能体系统，用于协助心理健康专业人员分析HTP绘画。该系统采用专门的智能体进行特征提取和心理解释，分两个阶段运作：全面特征分析和专业报告生成。对290名小学生的HTP绘画评估显示，71.03%的分析与专业评估达到高度一致，26.21%达到中度一致，仅2.41%为低度一致。系统识别出31.03%的案例需要专业关注，展示了其作为初步筛查工具的有效性。 目前已在试点学校部署的PsyDraw显示出在支持心理健康专业人员方面的潜力，特别是在资源有限的地区，同时保持心理评估的高专业标准。 免责声明 PsyDraw严格作为专业筛查辅助工具。它不得作为独立的诊断工具或替代专业医疗评估。该系统旨在支持而非取代合格心理健康专业人员的专业知识。任何系统的实施或使用都必须在专业监督下进行。 看完视频我挺有感触的，再加上我对扣子Coze搭建平台比较熟悉，于是我就报名参与了。yiming（朱一鸣）作为发起人，写好了项目文档以及组织了一次线上会议，明确了各自的分工，我负责用户界面他负责业务逻辑。 花了几天时间我们完成了v0.1版本，主要分为三个模块： 首页：主要是现有产品的介绍，考虑到未来不仅只有一个项目所以做了其他位置预留。 HTP测试：用户只需要上传图片即可辅助分析儿童心理状况结果。 项目介绍：介绍项目背景与意义 项目地址： https://www.coze.cn/s/4FtkdYhEGx0/ 这个 AI 公益项目的开发工作由我们两人负责推进，但项目成员远不止于此。还有许多小伙伴在设计、提示词撰写、宣传推广等各个方面，都给予了大力支持与帮助，为项目的顺利开展贡献了不可或缺的力量 。 搭建拆解 今天我们站在技术实现的角度来给大家分享下这个项目的实现过程，一共分为两个部分： • 用户界面 • 业务逻辑 首页进入扣子（coze.cn）选中「创建应用」选中「创建空白应用」然后输入「应用名称」进入项目搭建页面。 coze.cn 进入项目搭建页面我们首先是需要先搭建「业务逻辑」部分 业务逻辑 先新增一个工作流，工作流名称叫做 psy ai 这个项目主要的业务逻辑是通过上传儿童的绘画作品分析心理状态，在《PsyDraw: A Multi Agent Multimodal System for Mental Health Screening in Left Behind Children》论文中提到为了提高分析结果的准确性，需要把这个分析过程分为多个步骤来实现。 工作流的编排流程图： 上传作品 多个多模态大模型识别不同元素 分别提取特种并分析 综合分析结果 给出评估与建议 所以最后得出了以下工作流结构： 接下来从左到右分为三组大模型给大家一一拆解： 第一组多模态大模型主要作用是分析图片元素：整体特征、房屋特征、树木特征、人物特征 第二组通用大模型主要是对提取到的信息进行对应内容的总结分析 第三组通用大模型先汇总结果，然后再分别提取不同（诊断评估与建议）的结果。 以上所有大模型节点对应的 prompt（提示词）： 文档地址：https://vcn5grhrq8y0.feishu.cn/wiki/Z3NzwrtEKi9h5mk0rTOcAT0xnTc 当搭建完工作流后就开始进行「用户界面」的搭建，选择「桌面网页」类型。 交互流程 在做用户界面之前我先简单说下整个项目页面之间的交互 主页面 HTP功能 产品文档 HTP功能 上传作品 提交分析（调用工作流） 生成分析 显示分析结果（工作流结果） 产品文档 介绍内容 用户界面 进入后我们可以看到搭建详情页面从左到边，左边分为组件、模版、结构，中间为预览界面区域右侧则会根据不同组件显示不同的设置。 主页： 我们先以最终效果图来分析主页该如何实现，一共分为两大块： 1. 顶部导航 2. 功能区域 一共用到了 5 种组件： 布局组件：容器（Div），展示组件：文本（Text）、Markdown、图片（Image），输入组件：按钮（Button）。 首先我们要找到一个通用的导航栏，在最左侧切换到「模版」找到导航组件，选择组件后最右侧可以设置导航组件属性的布局、位置、尺寸、样式。 模版是由多个组件组合而成，我们可以将左侧区域切换到「结构」来进行分析。 导航模版是由一个容器（Div1）包含两个容器横向排列，然后分别第一个容器（Div2）里面包含图片组件（logo）和文本组件（产品名称），第二个容器分别包含4个按钮组件（功能一、功能二、功能三、功能四）。 想要修改某个组件的内容只需要选中具体组件即可在右侧设置栏中进行修改，以下我分别选中了图片和产品名称。 我们只需要对导航的具体组件进行内容上的修改即可完成导航部分，那么下面功能区域有一个大容器包裹两个容器组成，最外层的容器横向排列包裹来两个容器。 第一个容器是HTP心理测试功能区域纵向排列： 头图、容器包含： • 标题：设置字号大小（24px）与加粗 • 介绍：通过 Markdown 语法来调整样式 • 按钮：设置按钮颜色（ 295DC1）、宽度（百分比100%）高度（50px）、圆角（12px） 第二容器就是包含了一张图片。 并且都设置了容器的圆角属性（15px），到这里我们的主页就已经完成了。 当第一个页面制作完成后需要新增一个页面，可以在左侧结构「+」进行添加。 添加后选择页面双击页面可以改名，我们改成“HTP测试”。 还需要配置下第一个页面跳转到第二个页面，首先回到主页，选中你需要点击跳转到按钮，右侧切换到「事件」然后新建事件，事件配置： • 事件类型：点击时 • 执行动作：页面跳转 • 页面类型：内部页面 • 选中页面：HPT测试