90分钟从0开始打造你的第一个Coze应用: 证件照 2025年1月18日 副本

90分钟从0开始打造你的第一个Coze应用: 证件照 2025年1月18日 副本 90分钟从0开始打造你的第一个Coze应用: 证件照 2025年1月18日 副本 Modified April 1, 2025 参会人 (264)： user 8885 user 8537 user 7872 user 118 user 6414 user 4389 ... @Jessie @不见青山 @焦峰 @周杰夫 @解睿 @金迦叶 @清语 @锦时 @Jn @juan @郡婕 @konu @Lucky @牛强 @雷斌 @李豪 @又不是不能用 @阿木 @李茂 @随便两点 @李文 @李…… @李笑笑 @蒝菋初露 @简森 @Lillian @林健 @林晚荣 @林雪 @Lindana @AHu @柳一刀 @刘广森 @刘洪峰 @一个懒人 @刘年 @quan @刘新煜 @June🌻 @liuhuo @罗骏 @洛水 @Renegade.L @马博涵 @马泽琳 @梅炎栋 @Melody @裕 @Joan @GenZya @明月 @卡布诺 @哞小哞 @哞小哞 @🌈Zhongliang @南瓜 @Nancy Liu @neverlandrover @🌈OstaraTT @潘杰 @潘淼 @Parker Van @Paul @添碗饭啊 @peng @皮皮 @凌晨猫 @Root @Alex @金色传说大聪明 @Selina @长命百岁的山川 @上山下 @saylor @二健 @signa @sin. @酥采 @苏黎式仰望 @岁月静好 @Sylvia @太空铝 @向往草原的山羊 @🌈二师兄䦜𨶙 @谭永斌 @陶 动画设计师 @Susie @巴雷特 @屠文鑫 @拖拉A兔 @AIGC @王彬彬 @王晨晨 @王冠行 @王鹤雷 @Ken @王沁宁 @王蓉 @王晓峰 @王亚静 @王扬飞 @王宇翔 @媛 @王子丰 @茉卷 @魏奕 @蜗牛AI @吴晶 @蜗牛 @吴学理 @Anny @小刚 @晓涵 @肖立新 @Raymond @小鱿鱼 @熊波 @盖世无双 @压箱底 @爱学习的大老杨 @杨国存 @刘刘刘的人 @阳思勤 @小K @粉色 亦舒文化传播有限公司 @尹东东 @殷方园 @音乐运动品 @莹 @YUYING @袁东华 @Jinan——（袁掌柜） @🥳嘿 @张辉 @访客002 @Larry @皙晨 @张雷 @天涯海阁 @kinddelly @张帅 @爱育 @宇先生 @张旭升 @张岩 @张增骏 @赵铖 @赵冬霞 @阿彪 @智能提分 @AG 鼎辉 @周可佳 @小波 @奇幻城 @6482 飞询 @朱文龙 @紫堇 @🍋 智能纪要 智能会议纪要由 AI 生成，可能不准确，请谨慎甄别后使用 📄 总结 会议讨论了 Code AI 应用等开发及前端页面、证件照应用、一键改图工作流等内容。主要内容包括： • Code AI 应用开发教学 ◦ Code AI 应用背景：智能体开发从最初的 chatbot 只有对话框，到有了更多交互方式，因用户需求扣子推出了 AI 应用，其低代码或零代码的工作流等场景做得较好。 ◦ AI CODING 现状：AI CODING 虽强，但目前适用于小场景和产品的第一个版本，复杂应用可能导致需求理解错误从而使产品出错。 ◦ 证件照应用案例：以证件照为例，说明以前实现成本高，现在有客户端需求并做了相关智能体和交互。 ◦ AI 应用学习过程：创建 AI 应用，学习操作界面、业务逻辑和用户界面，包括布局、搭建工作流、用户界面及调试发布，重点熟悉桌面网页版的用户界面。 • 前端页面布局与组件介绍 ◦ 前端后端概念：前端是页面或界面能看到的部分，包括产品设计、采集用户输入和展示服务输出；后端是服务和对应逻辑，处理用户输入的数据并生成输出响应到前端页面。 ◦ 前端组件类型：包括布局组件（如容器 div）、展示组件（如文本和图片）、输入组件（如文本输入、下拉选项、数字输入和文件上传）、AI 组件（如 chatbot）。 ◦ 模板与结构：模板供参考学习官方布局和排版，结构展示页面组件层级，页面首页通常只有一个容器，子容器受父容器属性影响。 ◦ 组件属性事件：点击容器右边会显示其名字及属性和事件，属性包括位置、尺寸、布局、容器样式、状态和可见性等。 ◦ 页面布局技巧：页面布局先创建固定宽高的底层容器覆盖页面，常见布局有左右和上下，左右布局可通过设置子容器为横向和固定或百分比宽度实现，上下布局可设置子容器高度，父容器内边距和间距会影响排版，溢出有可见、隐藏和滚动三种处理方式。 ◦ 换行与元素分布：当容器内图片需换行时，可设置自动换行，元素分布在父容器设置对子容器生效，可选择不同的分布方式使排版更美观。 • 搭建证件照应用页面 ◦ 创建基础容器：先创建应用并设置第一个 div 容器，为后续操作做准备。 ◦ 页面上下布局：页面分为上中下三块，顶部为标题，中间有原图、过渡和最终结果，底部为展示区域和表单。 ◦ 组件设置调整：对容器的高度、宽度、排列方向进行设置，对文本组件的字体、颜色、加粗等属性进行调整。 ◦ 图片上传处理：介绍图片组件的本地上传和绑定数据功能，提及微信截图可能导致上传问题。 ◦ 页面左右分区：页面分为左右两块，左侧展示区域，右侧为表单，左侧还需嵌套容器处理图片和文字展示。 • 证件照生成应用的前端搭建与业务逻辑设计 ◦ 前端页面搭建技巧：介绍了在 DIV10 中选择子容器、复制搭建元素等前端搭建技巧，包括调整表单组件的尺寸、按钮文案和上传文件类型等设置。 ◦ 业务逻辑流程设计：阐述了证件照生成的业务逻辑，包括用户上传照片、图片理解、图像生成、智能换脸、背景修改等步骤，还提及了各步骤中的参数设置、提示词调整和测试方法。 • 关于一键改图工作流的介绍与设置 ◦ 工作流未用大模型：此过程未消耗 token，因未用到大模型节点。 ◦ 结果保存与生成特点：每次生成结果唯一，无种子概念，无法保存特定结果。 ◦ 创建副本与背景修改：调好后可配东北大花袄等背景，修改名字便于排查问题。 ◦ 变量输出方式选择：用户界面可直接拿到返回变量值，返回文本需手动以 Markdown 格式拼接变量。 ◦ 添加立即生成事件：点击立即生成按钮可添加多种事件，表单默认有点击时事件，表单提交时可调用工作流并传入对应参数。 ◦ 表单提交事件设置：表单有 unsubmit、error 和数据改变时等事件，可设置提交时调用工作流，限制上传文件数量，表单提交时可设置禁用态。 ◦ 数据绑定与效果查看：对左侧图片进行数据绑定，选择工作流和对应颜色，保存刷新查看生成结果。 • 关于工作流配置与相关问题的交流 ◦ 工作流数据绑定：绑定数据时要先清空，避免手动输入变量，选工作流时要注意准确。 ◦ 图片生成方式：调好第一张图片后复制成三张，根据背景颜色区分，通过连接节点选择对应图片输出。 ◦ 预览调试方法：在用户界面不发布也可调试，有预览功能。 ◦ 工作流问题优化：识别图片特征有误时需在工作流里优化提示词，可考虑使用视频模型。 ◦ 与智能体结合：应用界面数据无法直接带到智能体，可尝试左右布局，左边表单右边互动。 ◦ 互动问答环节：解答了关于事件理解、图片筛选与预览、工作流调用等问题。 智能章节 00:00 韦恩将从零开始教学做应用界面，课程含过年相关应用 本章节中，因周围小孩吵闹，AJ让许键主持会议。许键邀请韦恩（“会魔法的大人”）从零开始教大家做应用界面，提到韦恩做了几个有趣应用且备好课件和流程图。还说明今天先基础教学，明天讲过年相关应用。之后韦恩测试声音，许键让其先介绍自己，韦恩介绍了个人创业及软件开发经验 。 03:10 扣子 AI 应用课程介绍及 code AI 应用相关探讨 本章节介绍当前承接业务包括辅导、培训、定制及企业AI落地等。随后说明第一天课程安排，即熟悉扣子应用、认识界面、搭建证件照简单应用，解决表单使用等卡点。还探讨了code AI 应用，讲述此前智能体局限，提到AI应用一直存在及实现方式，最后提及扣子应用但未说明推出时间。 05:46 11 月底应用推出背后：AI 应用呼声与功能需求挖掘 本章节提到应用于 11 月底推出，社区很多不懂代码的设计师和产品经理搭建吃力，对 AI 应用呼声强烈。许键补充，智能体最初聊天界面简单，后补充诸多内容，发现大家对交互界面需求大，进而挖掘出 UI 或 IDE 界面需求，并将其与工作流快速结合，最后许键提议展示活动页 。 07:47 AI应用创建与界面讲解分享 本章节会魔法的大人先感谢许键缓解紧张，接着分享扣子应用和 AI coding 情况。随后介绍今天学习内容是创建 AI 应用，包括其操作界面等流程。还讲解创建应用方式，介绍界面与智能体组件的关联，重点说明桌面网页版用户界面布局及左侧组件类别，并提及应用的前端后端知识 。 14:45 前端与后端基础及界面组件布局讲解 本章节主要讲解前端、后端相关概念。前端是页面可见部分及产品设计，负责采集用户输入和展示输出；后端是服务和逻辑，接收处理用户输入并生成内容输出到前端。还介绍了左侧组件，包括布局、展示、输入、AI 组件等，以及模板和结构的作用，最后提到接下来要讲右侧组件的属性和事件 。 22:15 容器操作与页面布局讲解 本章节主要讲解容器相关知识。点击容器可看到名字，操作数据会用到。容器名字对应属性和事件属性，属性包含位置、尺寸等。尺寸设百分比会受容器关系及默认值影响。还提到创建容器技巧，布局时先创建覆盖页面的底层容器，设固定宽高、边界为 0，有布局文档和教程供参考 。 28:07 页面布局的常见方式与实际操作讲解 本章节主要介绍页面布局。先讲解常见的左右、上下布局及嵌套方法，演示如何设置容器实现左右布局、调整大小分割等，强调外层高度设置的重要性。接着说明溢出处理方式及内边距影响，建议初学者用固定宽高布局。最后介绍换行布局及元素分布设置，用于图片排版。 41:41 讲解证件照应用搭建过程及布局设置 本章节介绍证件照应用搭建。会魔法的大人让大家创建应用、清理页面，先设置第一个 div 容器方便后续操作。提到要 1:1 复刻其应用，讲解证件照基础界面为上下布局，分标题、示例、操作展示三块，需拖三个容器，因排列方向问题可能只看到两个，还提到顶部高度大概 100 。 45:07 证件照应用的用户界面搭建与业务逻辑构建讲解 本章节主要讲解证件照应用的搭建。先介绍用户界面搭建，包括各部分尺寸、布局、组件设置，如文本、图片、表单等；后阐述业务逻辑搭建，创建工作流，添加图片理解、图像生成、智能换脸等插件，设置参数、提示词，并进行测试，还告知文档地址在社区智能体 1.3 共学里 。 01:16:39 图片生成及改背景的方法与对比 本章节会魔法的大人展示原图上传结果，称基本脸型已换，生成效果很帅且与上传照片特征有关。接下来提到改背景取巧利用改图功能，测试发现一键改图效果更好，输出数据类型为图片，便于引用。还指出豆包节点生成的是 URL 地址，与前者不同，在工作流使用有差异，并表示可参考简单的提示词 。 01:18:29 证件照换背景等图片处理操作讲解 本章节主要介绍证件照工作流相关操作。包括通过提示词改背景颜色，设置输出方式为返回变量；讲解消耗token及保存结果相关问题；对按钮、表单添加事件并设置参数，限制上传文件数量；还涉及给表单和图片绑定数据，以及每次操作后刷新界面确保设置生效 。 01:35:57 应用制作：表单设置、图片处理、成果图连接及优化讲解 本章节主要围绕操作讲解与优化展开，介绍了 for meet 的设置，如表单事件操作、图片上传数量修改等，提及编程基础知识。还讲述成果图连接、绑定数据方法及注意事项。展示了基本功能实现情况，分析换性别等问题成因，指出需在工作流优化提示词，也可尝试用视频模型解决，最后进入问答环节 。 01:46:05 智能体应用搭建与问题解答交流 本章节预留 15 分钟给大家提问。chamelyy 询问带数据到智能体的配置方法，得知数据带不过去，可尝试左右布局。爱的天使对事件存疑，得到解答。韩重明咨询图片筛选预览问题，被告知目前不支持多选，可用列表绑定图片解决。最后许键宣布今日结束，提醒明天 8 点有新应用课程 。 Log in or sign up to use this feature. 会议分析 Log in or sign up to use this feature. 会议回顾 • 妙记：01 18 | 90分钟从0开始打造你的第一个Coze应用: 证件照 会议议程 00:00 03:10 05:46 07:47 14:45 22:15 28:07 41:41 45:07 01:16:39 01:18:29 01:35:57 01:46:05 01 18 | 90分钟从0开始打造你的第一个Coze应用: 证件照 参会人 (264)： user 8885 user 8537 user 7872 user 118 user 6414 user 4389 ... @Jessie @不见青山 @焦峰 @周杰夫 @解睿 @金迦叶 @清语 @锦时 @Jn @juan @郡婕 @konu @Lucky @牛强 @雷斌 @李豪 @又不是不能用 @阿木 @李茂 @随便两点 @李文 @李…… @李笑笑 @蒝菋初露 @简森 @Lillian @林健 @林晚荣 @林雪 @Lindana @AHu @柳一刀 @刘广森 @刘洪峰 @一个懒人 @刘年 @quan @刘新煜 @June🌻 @liuhuo @罗骏 @洛水 @Renegade.L @马博涵 @马泽琳 @梅炎栋 @Melody @裕 @Joan @GenZya @明月 @卡布诺 @哞小哞 @哞小哞 @🌈Zhongliang @南瓜 @Nancy Liu @neverlandrover @🌈OstaraTT @潘杰 @潘淼 @Parker Van @Paul @添碗饭啊 @peng @皮皮 @凌晨猫 @Root @Alex @金色传说大聪明 @Selina @长命百岁的山川 @上山下 @saylor @二健 @signa @sin. @酥采 @苏黎式仰望 @岁月静好 @Sylvia @太空铝 @向往草原的山羊 @🌈二师兄䦜𨶙 @谭永斌 @陶 动画设计师 @Susie @巴雷特 @屠文鑫 @拖拉A兔 @AIGC @王彬彬 @王晨晨 @王冠行 @王鹤雷 @Ken @王沁宁 @王蓉 @王晓峰 @王亚静 @王扬飞 @王宇翔 @媛 @王子丰 @茉卷 @魏奕 @蜗牛AI @吴晶 @蜗牛 @吴学理 @Anny @小刚 @晓涵 @肖立新 @Raymond @小鱿鱼 @熊波 @盖世无双 @压箱底 @爱学习的大老杨 @杨国存 @刘刘刘的人 @阳思勤 @小K @粉色 亦舒文化传播有限公司 @尹东东 @殷方园 @音乐运动品 @莹 @YUYING @袁东华 @Jinan——（袁掌柜） @🥳嘿 @张辉 @访客002 @Larry @皙晨 @张雷 @天涯海阁 @kinddelly @张帅 @爱育 @宇先生 @张旭升 @张岩 @张增骏 @赵铖 @赵冬霞 @阿彪 @智能提分 @AG 鼎辉 @周可佳 @小波 @奇幻城 @6482 飞询 @朱文龙 @紫堇 @🍋 @Jessie @不见青山 @焦峰 @周杰夫 @解睿 @金迦叶 @清语 @锦时 @Jn @juan @郡婕 @konu @Lucky @牛强 @雷斌 @李豪 @又不是不能用 @阿木 @李茂 @随便两点 @李文 @李…… @李笑笑 @蒝菋初露 @简森 @Lillian @林健 @林晚荣 @林雪 @Lindana @AHu @柳一刀 @刘广森 @刘洪峰 @一个懒人 @刘年 @quan @刘新煜 @June🌻 @liuhuo @罗骏 @洛水 @Renegade.L @马博涵 @马泽琳 @梅炎栋 @Melody @裕 @Joan @GenZya @明月 @卡布诺 @哞小哞 @哞小哞 @🌈Zhongliang @南瓜 @Nancy Liu @neverlandrover @🌈OstaraTT @潘杰 @潘淼 @Parker Van @Paul @添碗饭啊 @peng @皮皮 @凌晨猫 @Root @Alex @金色传说大聪明 @Selina @长命百岁的山川 @上山下 @saylor @二健 @signa @sin. @酥采 @苏黎式仰望 @岁月静好 @Sylvia @太空铝 @向往草原的山羊 @🌈二师兄䦜𨶙 @谭永斌 @陶 动画设计师 @Susie @巴雷特 @屠文鑫 @拖拉A兔 @AIGC @王彬彬 @王晨晨 @王冠行 @王鹤雷 @Ken @王沁宁 @王蓉 @王晓峰 @王亚静 @王扬飞 @王宇翔 @媛 @王子丰 @茉卷 @魏奕 @蜗牛AI @吴晶 @蜗牛 @吴学理 @Anny @小刚 @晓涵 @肖立新 @Raymond @小鱿鱼 @熊波 @盖世无双 @压箱底 @爱学习的大老杨 @杨国存 @刘刘刘的人 @阳思勤 @小K @粉色 亦舒文化传播有限公司 @尹东东 @殷方园 @音乐运动品 @莹 @YUYING @袁东华 @Jinan——（袁掌柜） @🥳嘿 @张辉 @访客002 @Larry @皙晨 @张雷 @天涯海阁 @kinddelly @张帅 @爱育 @宇先生 @张旭升 @张岩 @张增骏 @赵铖 @赵冬霞 @阿彪 @智能提分 @AG 鼎辉 @周可佳 @小波 @奇幻城 @6482 飞询 @朱文龙 @紫堇 @🍋 智能纪要 智能会议纪要由 AI 生成，可能不准确，请谨慎甄别后使用 智能会议纪要由 AI 生成，可能不准确，请谨慎甄别后使用 📄 总结 会议讨论了 Code AI 应用等开发及前端页面、证件照应用、一键改图工作流等内容。主要内容包括： • Code AI 应用开发教学 ◦ Code AI 应用背景：智能体开发从最初的 chatbot 只有对话框，到有了更多交互方式，因用户需求扣子推出了 AI 应用，其低代码或零代码的工作流等场景做得较好。 ◦ AI CODING 现状：AI CODING 虽强，但目前适用于小场景和产品的第一个版本，复杂应用可能导致需求理解错误从而使产品出错。 ◦ 证件照应用案例：以证件照为例，说明以前实现成本高，现在有客户端需求并做了相关智能体和交互。 ◦ AI 应用学习过程：创建 AI 应用，学习操作界面、业务逻辑和用户界面，包括布局、搭建工作流、用户界面及调试发布，重点熟悉桌面网页版的用户界面。 • 前端页面布局与组件介绍 ◦ 前端后端概念：前端是页面或界面能看到的部分，包括产品设计、采集用户输入和展示服务输出；后端是服务和对应逻辑，处理用户输入的数据并生成输出响应到前端页面。 ◦ 前端组件类型：包括布局组件（如容器 div）、展示组件（如文本和图片）、输入组件（如文本输入、下拉选项、数字输入和文件上传）、AI 组件（如 chatbot）。 ◦ 模板与结构：模板供参考学习官方布局和排版，结构展示页面组件层级，页面首页通常只有一个容器，子容器受父容器属性影响。 ◦ 组件属性事件：点击容器右边会显示其名字及属性和事件，属性包括位置、尺寸、布局、容器样式、状态和可见性等。 ◦ 页面布局技巧：页面布局先创建固定宽高的底层容器覆盖页面，常见布局有左右和上下，左右布局可通过设置子容器为横向和固定或百分比宽度实现，上下布局可设置子容器高度，父容器内边距和间距会影响排版，溢出有可见、隐藏和滚动三种处理方式。 ◦ 换行与元素分布：当容器内图片需换行时，可设置自动换行，元素分布在父容器设置对子容器生效，可选择不同的分布方式使排版更美观。 • 搭建证件照应用页面 ◦ 创建基础容器：先创建应用并设置第一个 div 容器，为后续操作做准备。 ◦ 页面上下布局：页面分为上中下三块，顶部为标题，中间有原图、过渡和最终结果，底部为展示区域和表单。 ◦ 组件设置调整：对容器的高度、宽度、排列方向进行设置，对文本组件的字体、颜色、加粗等属性进行调整。 ◦ 图片上传处理：介绍图片组件的本地上传和绑定数据功能，提及微信截图可能导致上传问题。 ◦ 页面左右分区：页面分为左右两块，左侧展示区域，右侧为表单，左侧还需嵌套容器处理图片和文字展示。 • 证件照生成应用的前端搭建与业务逻辑设计 ◦ 前端页面搭建技巧：介绍了在 DIV10 中选择子容器、复制搭建元素等前端搭建技巧，包括调整表单组件的尺寸、按钮文案和上传文件类型等设置。 ◦ 业务逻辑流程设计：阐述了证件照生成的业务逻辑，包括用户上传照片、图片理解、图像生成、智能换脸、背景修改等步骤，还提及了各步骤中的参数设置、提示词调整和测试方法。 • 关于一键改图工作流的介绍与设置 ◦ 工作流未用大模型：此过程未消耗 token，因未用到大模型节点。 ◦ 结果保存与生成特点：每次生成结果唯一，无种子概念，无法保存特定结果。 ◦ 创建副本与背景修改：调好后可配东北大花袄等背景，修改名字便于排查问题。 ◦ 变量输出方式选择：用户界面可直接拿到返回变量值，返回文本需手动以 Markdown 格式拼接变量。 ◦ 添加立即生成事件：点击立即生成按钮可添加多种事件，表单默认有点击时事件，表单提交时可调用工作流并传入对应参数。 ◦ 表单提交事件设置：表单有 unsubmit、error 和数据改变时等事件，可设置提交时调用工作流，限制上传文件数量，表单提交时可设置禁用态。 ◦ 数据绑定与效果查看：对左侧图片进行数据绑定，选择工作流和对应颜色，保存刷新查看生成结果。 • 关于工作流配置与相关问题的交流 ◦ 工作流数据绑定：绑定数据时要先清空，避免手动输入变量，选工作流时要注意准确。 ◦ 图片生成方式：调好第一张图片后复制成三张，根据背景颜色区分，通过连接节点选择对应图片输出。 ◦ 预览调试方法：在用户界面不发布也可调试，有预览功能。 ◦ 工作流问题优化：识别图片特征有误时需在工作流里优化提示词，可考虑使用视频模型。 ◦ 与智能体结合：应用界面数据无法直接带到智能体，可尝试左右布局，左边表单右边互动。 ◦ 互动问答环节：解答了关于事件理解、图片筛选与预览、工作流调用等问题。 智能章节 00:00 韦恩将从零开始教学做应用界面，课程含过年相关应用 本章节中，因周围小孩吵闹，AJ让许键主持会议。许键邀请韦恩（“会魔法的大人”）从零开始教大家做应用界面，提到韦恩做了几个有趣应用且备好课件和流程图。还说明今天先基础教学，明天讲过年相关应用。之后韦恩测试声音，许键让其先介绍自己，韦恩介绍了个人创业及软件开发经验 。 03:10 扣子 AI 应用课程介绍及 code AI 应用相关探讨 本章节介绍当前承接业务包括辅导、培训、定制及企业AI落地等。随后说明第一天课程安排，即熟悉扣子应用、认识界面、搭建证件照简单应用，解决表单使用等卡点。还探讨了code AI 应用，讲述此前智能体局限，提到AI应用一直存在及实现方式，最后提及扣子应用但未说明推出时间。 05:46 11 月底应用推出背后：AI 应用呼声与功能需求挖掘 本章节提到应用于 11 月底推出，社区很多不懂代码的设计师和产品经理搭建吃力，对 AI 应用呼声强烈。许键补充，智能体最初聊天界面简单，后补充诸多内容，发现大家对交互界面需求大，进而挖掘出 UI 或 IDE 界面需求，并将其与工作流快速结合，最后许键提议展示活动页 。 07:47 AI应用创建与界面讲解分享 本章节会魔法的大人先感谢许键缓解紧张，接着分享扣子应用和 AI coding 情况。随后介绍今天学习内容是创建 AI 应用，包括其操作界面等流程。还讲解创建应用方式，介绍界面与智能体组件的关联，重点说明桌面网页版用户界面布局及左侧组件类别，并提及应用的前端后端知识 。 14:45 前端与后端基础及界面组件布局讲解 本章节主要讲解前端、后端相关概念。前端是页面可见部分及产品设计，负责采集用户输入和展示输出；后端是服务和逻辑，接收处理用户输入并生成内容输出到前端。还介绍了左侧组件，包括布局、展示、输入、AI 组件等，以及模板和结构的作用，最后提到接下来要讲右侧组件的属性和事件 。 22:15 容器操作与页面布局讲解 本章节主要讲解容器相关知识。点击容器可看到名字，操作数据会用到。容器名字对应属性和事件属性，属性包含位置、尺寸等。尺寸设百分比会受容器关系及默认值影响。还提到创建容器技巧，布局时先创建覆盖页面的底层容器，设固定宽高、边界为 0，有布局文档和教程供参考 。 28:07 页面布局的常见方式与实际操作讲解 本章节主要介绍页面布局。先讲解常见的左右、上下布局及嵌套方法，演示如何设置容器实现左右布局、调整大小分割等，强调外层高度设置的重要性。接着说明溢出处理方式及内边距影响，建议初学者用固定宽高布局。最后介绍换行布局及元素分布设置，用于图片排版。 41:41 讲解证件照应用搭建过程及布局设置 本章节介绍证件照应用搭建。会魔法的大人让大家创建应用、清理页面，先设置第一个 div 容器方便后续操作。提到要 1:1 复刻其应用，讲解证件照基础界面为上下布局，分标题、示例、操作展示三块，需拖三个容器，因排列方向问题可能只看到两个，还提到顶部高度大概 100 。 45:07 证件照应用的用户界面搭建与业务逻辑构建讲解 本章节主要讲解证件照应用的搭建。先介绍用户界面搭建，包括各部分尺寸、布局、组件设置，如文本、图片、表单等；后阐述业务逻辑搭建，创建工作流，添加图片理解、图像生成、智能换脸等插件，设置参数、提示词，并进行测试，还告知文档地址在社区智能体 1.3 共学里 。 01:16:39 图片生成及改背景的方法与对比 本章节会魔法的大人展示原图上传结果，称基本脸型已换，生成效果很帅且与上传照片特征有关。接下来提到改背景取巧利用改图功能，测试发现一键改图效果更好，输出数据类型为图片，便于引用。还指出豆包节点生成的是 URL 地址，与前者不同，在工作流使用有差异，并表示可参考简单的提示词 。 01:18:29 证件照换背景等图片处理操作讲解 本章节主要介绍证件照工作流相关操作。包括通过提示词改背景颜色，设置输出方式为返回变量；讲解消耗token及保存结果相关问题；对按钮、表单添加事件并设置参数，限制上传文件数量；还涉及给表单和图片绑定数据，以及每次操作后刷新界面确保设置生效 。 01:35:57 应用制作：表单设置、图片处理、成果图连接及优化讲解 本章节主要围绕操作讲解与优化展开，介绍了 for meet 的设置，如表单事件操作、图片上传数量修改等，提及编程基础知识。还讲述成果图连接、绑定数据方法及注意事项。展示了基本功能实现情况，分析换性别等问题成因，指出需在工作流优化提示词，也可尝试用视频模型解决，最后进入问答环节 。 01:46:05 智能体应用搭建与问题解答交流 本章节预留 15 分钟给大家提问。chamelyy 询问带数据到智能体的配置方法，得知数据带不过去，可尝试左右布局。爱的天使对事件存疑，得到解答。韩重明咨询图片筛选预览问题，被告知目前不支持多选，可用列表绑定图片解决。最后许键宣布今日结束，提醒明天 8 点有新应用课程 。 00:00 03:10 05:46 07:47 14:45 22:15 28:07 41:41 45:07 01:16:39 01:18:29 01:35:57 01:46:05 总结 会议讨论了 Code AI 应用等开发及前端页面、证件照应用、一键改图工作流等内容。主要内容包括： • Code AI 应用开发教学 ◦ Code AI 应用背景：智能体开发从最初的 chatbot 只有对话框，到有了更多交互方式，因用户需求扣子推出了 AI 应用，其低代码或零代码的工作流等场景做得较好。 ◦ AI CODING 现状：AI CODING 虽强，但目前适用于小场景和产品的第一个版本，复杂应用可能导致需求理解错误从而使产品出错。 ◦ 证件照应用案例：以证件照为例，说明以前实现成本高，现在有客户端需求并做了相关智能体和交互。 ◦ AI 应用学习过程：创建 AI 应用，学习操作界面、业务逻辑和用户界面，包括布局、搭建工作流、用户界面及调试发布，重点熟悉桌面网页版的用户界面。 ◦ Code AI 应用背景：智能体开发从最初的 chatbot 只有对话框，到有了更多交互方式，因用户需求扣子推出了 AI 应用，其低代码或零代码的工作流等场景做得较好。 ◦ AI CODING 现状：AI CODING 虽强，但目前适用于小场景和产品的第一个版本，复杂应用可能导致需求理解错误从而使产品出错。 ◦ 证件照应用案例：以证件照为例，说明以前实现成本高，现在有客户端需求并做了相关智能体和交互。 ◦ AI 应用学习过程：创建 AI 应用，学习操作界面、业务逻辑和用户界面，包括布局、搭建工作流、用户界面及调试发布，重点熟悉桌面网页版的用户界面。 • 前端页面布局与组件介绍 ◦ 前端后端概念：前端是页面或界面能看到的部分，包括产品设计、采集用户输入和展示服务输出；后端是服务和对应逻辑，处理用户输入的数据并生成输出响应到前端页面。 ◦ 前端组件类型：包括布局组件（如容器 div）、展示组件（如文本和图片）、输入组件（如文本输入、下拉选项、数字输入和文件上传）、AI 组件（如 chatbot）。 ◦ 模板与结构：模板供参考学习官方布局和排版，结构展示页面组件层级，页面首页通常只有一个容器，子容器受父容器属性影响。 ◦ 组件属性事件：点击容器右边会显示其名字及属性和事件，属性包括位置、尺寸、布局、容器样式、状态和可见性等。 ◦ 页面布局技巧：页面布局先创建固定宽高的底层容器覆盖页面，常见布局有左右和上下，左右布局可通过设置子容器为横向和固定或百分比宽度实现，上下布局可设置子容器高度，父容器内边距和间距会影响排版，溢出有可见、隐藏和滚动三种处理方式。 ◦ 换行与元素分布：当容器内图片需换行时，可设置自动换行，元素分布在父容器设置对子容器生效，可选择不同的分布方式使排版更美观。 ◦ 前端后端概念：前端是页面或界面能看到的部分，包括产品设计、采集用户输入和展示服务输出；后端是服务和对应逻辑，处理用户输入的数据并生成输出响应到前端页面。 ◦ 前端组件类型：包括布局组件（如容器 div）、展示组件（如文本和图片）、输入组件（如文本输入、下拉选项、数字输入和文件上传）、AI 组件（如 chatbot）。 ◦ 模板与结构：模板供参考学习官方布局和排版，结构展示页面组件层级，页面首页通常只有一个容器，子容器受父容器属性影响。 ◦ 组件属性事件：点击容器右边会显示其名字及属性和事件，属性包括位置、尺寸、布局、容器样式、状态和可见性等。 ◦ 页面布局技巧：页面布局先创建固定宽高的底层容器覆盖页面，常见布局有左右和上下，左右布局可通过设置子容器为横向和固定或百分比宽度实现，上下布局可设置子容器高度，父容器内边距和间距会影响排版，溢出有可见、隐藏和滚动三种处理方式。 ◦ 换行与元素分布：当容器内图片需换行时，可设置自动换行，元素分布在父容器设置对子容器生效，可选择不同的分布方式使排版更美观。 • 搭建证件照应用页面 ◦ 创建基础容器：先创建应用并设置第一个 div 容器，为后续操作做准备。 ◦ 页面上下布局：页面分为上中下三块，顶部为标题，中间有原图、过渡和最终结果，底部为展示区域和表单。 ◦ 组件设置调整：对容器的高度、宽度、排列方向进行设置，对文本组件的字体、颜色、加粗等属性进行调整。 ◦ 图片上传处理：介绍图片组件的本地上传和绑定数据功能，提及微信截图可能导致上传问题。 ◦ 页面左右分区：页面分为左右两块，左侧展示区域，右侧为表单，左侧还需嵌套容器处理图片和文字展示。 ◦ 创建基础容器：先创建应用并设置第一个 div 容器，为后续操作做准备。 ◦ 页面上下布局：页面分为上中下三块，顶部为标题，中间有原图、过渡和最终结果，底部为展示区域和表单。 ◦ 组件设置调整：对容器的高度、宽度、排列方向进行设置，对文本组件的字体、颜色、加粗等属性进行调整。 ◦ 图片上传处理：介绍图片组件的本地上传和绑定数据功能，提及微信截图可能导致上传问题。 ◦ 页面左右分区：页面分为左右两块，左侧展示区域，右侧为表单，左侧还需嵌套容器处理图片和文字展示。 • 证件照生成应用的前端搭建与业务逻辑设计 ◦ 前端页面搭建技巧：介绍了在 DIV10 中选择子容器、复制搭建元素等前端搭建技巧，包括调整表单组件的尺寸、按钮文案和上传文件类型等设置。 ◦ 业务逻辑流程设计：阐述了证件照生成的业务逻辑，包括用户上传照片、图片理解、图像生成、智能换脸、背景修改等步骤，还提及了各步骤中的参数设置、提示词调整和测试方法。 ◦ 前端页面搭建技巧：介绍了在 DIV10 中选择子容器、复制搭建元素等前端搭建技巧，包括调整表单组件的尺寸、按钮文案和上传文件类型等设置。 ◦ 业务逻辑流程设计：阐述了证件照生成的业务逻辑，包括用户上传照片、图片理解、图像生成、智能换脸、背景修改等步骤，还提及了各步骤中的参数设置、提示词调整和测试方法。 • 关于一键改图工作流的介绍与设置 ◦ 工作流未用大模型：此过程未消耗 token，因未用到大模型节点。 ◦ 结果保存与生成特点：每次生成结果唯一，无种子概念，无法保存特定结果。 ◦ 创建副本与背景修改：调好后可配东北大花袄等背景，修改名字便于排查问题。 ◦ 变量输出方式选择：用户界面可直接拿到返回变量值，返回文本需手动以 Markdown 格式拼接变量。 ◦ 添加立即生成事件：点击立即生成按钮可添加多种事件，表单默认有点击时事件，表单提交时可调用工作流并传入对应参数。 ◦ 表单提交事件设置：表单有 unsubmit、error 和数据改变时等事件，可设置提交时调用工作流，限制上传文件数量，表单提交时可设置禁用态。 ◦ 数据绑定与效果查看：对左侧图片进行数据绑定，选择工作流和对应颜色，保存刷新查看生成结果。 ◦ 工作流未用大模型：此过程未消耗 token，因未用到大模型节点。 ◦ 结果保存与生成特点：每次生成结果唯一，无种子概念，无法保存特定结果。 ◦ 创建副本与背景修改：调好后可配东北大花袄等背景，修改名字便于排查问题。 ◦ 变量输出方式选择：用户界面可直接拿到返回变量值，返回文本需手动以 Markdown 格式拼接变量。 ◦ 添加立即生成事件：点击立即生成按钮可添加多种事件，表单默认有点击时事件，表单提交时可调用工作流并传入对应参数。 ◦ 表单提交事件设置：表单有 unsubmit、error 和数据改变时等事件，可设置提交时调用工作流，限制上传文件数量，表单提交时可设置禁用态。 ◦ 数据绑定与效果查看：对左侧图片进行数据绑定，选择工作流和对应颜色，保存刷新查看生成结果。 • 关于工作流配置与相关问题的交流 ◦ 工作流数据绑定：绑定数据时要先清空，避免手动输入变量，选工作流时要注意准确。 ◦ 图片生成方式：调好第一张图片后复制成三张，根据背景颜色区分，通过连接节点选择对应图片输出。 ◦ 预览调试方法：在用户界面不发布也可调试，有预览功能。 ◦ 工作流问题优化：识别图片特征有误时需在工作流里优化提示词，可考虑使用视频模型。 ◦ 与智能体结合：应用界面数据无法直接带到智能体，可尝试左右布局，左边表单右边互动。 ◦ 互动问答环节：解答了关于事件理解、图片筛选与预览、工作流调用等问题。 ◦ 工作流数据绑定：绑定数据时要先清空，避免手动输入变量，选工作流时要注意准确。 ◦ 图片生成方式：调好第一张图片后复制成三张，根据背景颜色区分，通过连接节点选择对应图片输出。 ◦ 预览调试方法：在用户界面不发布也可调试，有预览功能。 ◦ 工作流问题优化：识别图片特征有误时需在工作流里优化提示词，可考虑使用视频模型。 ◦ 与智能体结合：应用界面数据无法直接带到智能体，可尝试左右布局，左边表单右边互动。 ◦ 互动问答环节：解答了关于事件理解、图片筛选与预览、工作流调用等问题。 智能章节 00:00 韦恩将从零开始教学做应用界面，课程含过年相关应用 00:00 本章节中，因周围小孩吵闹，AJ让许键主持会议。许键邀请韦恩（“会魔法的大人”）从零开始教大家做应用界面，提到韦恩做了几个有趣应用且备好课件和流程图。还说