欢迎关注【AI技术开发者】
上次，我们开发了一个对话形式的头像生成器智能体（Agents），广受大家欢迎。
同时也接收到一些用户的反馈，生成前无法看到头像样式、初次使用不会用等等。
对此，我准备使用Coze开发一个应用，以可视化的形式生成头像，降低学习成本。
同时，我也会将开发过程分享给大家，帮助大家学习使用扣子Coze，将AI融入自己的生活，提升自己的竞争力。
首先，我们登录扣子（coze.cn）
点击左侧边栏的“工作空间”-“项目开发”-“创建”-“创建应用”
点击“创建空白应用”
输入名称，应用介绍和图标可根据自己喜爱进行修改
创建成功后可以看到下面这张图，我们先点击“用户界面”将用户看到的页面布置好
这里根据自己的要求选择，为了方便大家的使用，我选择了“小程序和H5” 点击 “开始搭建”
此时，会看到下面这个页面，左边的是可以添加的组件，包括文本、图片、表单等
中间是用户看到的页面内容，右边是当前组件的属性，比如这个图片显示什么内容、如何显示等。
下面是我们的显示图，上面是用户可以选择生成的头像，中间由用户输入姓氏、祝福语等。下面是用户定制的头像
我们开始实现这张图
首先，我们点击左边的容器组件，拖动到页面的上部，然后点击该组件，修改组件的属性
宽度为 百分比 100%
高度为 固定 260px
排列方向 换行
溢出 滚动
然后我们放入一个 “图片” 组件，拖到刚才的 "容器"组件里面，点击“图片”组件，修改它的属性
宽度 百分比 47%
高度 百分比 60%
这里重点说下为什么宽度是47%的百分比而不是50%，因为两个组件之间它们并不是紧紧挨着，他们是有间距的，如果它的宽度是50%的话，加上他们自身的宽度就会超出100%，导致第二个图片被挤到第二行。
而高度可以设置大点，超出100%后，会自动隐藏，并提供一个滚动条，供用户滑动选择
然后点击上方的 “上传” 按钮，上传模板图片。
然后重复3次，这里放四个图片。
然后放置“文本”组件，放在图片下方，写上头像编号，供用户选择
文本内容填写头像的编号
宽度为47%，与图片保存一致
高度为10%
做完这步后，应该是这样的。
为了教学，我只放了4个模板，实际应用中可以多放几个。
下面，我们再放置一个“容器”组件，让用户输入姓氏和选择头像模板
里面放一个“文本组件”，用于让用户输入姓氏
标签内容为输入框上面的文字
占位文案为输入框内显示的文字
其他的不用修改
接下来 放置一个下拉选择组件
点击右方“+”号可以添加选项
然后单击“选项”
修改选项名称和选项值（一会要用）
注意，这里一定要选择一个默认值，不然如果用户没有选择内容的话，会报错
最后，放一个按钮
内容写“立即生成”，其他不用改
我们用户页面的配置就到这里了，下篇文章告诉大家如何配置工作流，成功生成定制头像
欢迎大家关注【AI技术开发者】
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
