2025年春节马上到来了，如果有一个专属自己的 AI 春节贺卡生成器，让《相亲相爱一家人》群的每一位家人都能发挥创意，生成自己的春节祝福，那你一定是家族群里最靓的仔。
2024年 AI 应用广泛地被下载使用，其中《Remini》推出的黏土滤镜成功走红社交网络，下载量达到4.5亿次，内购收入突破2亿美元（数据统计自2024年8月）。今天各个领域的大模型百花齐放，本文将指导你如何利用现有资源制作一个《AI 春节贺卡生成器》，获得打造下一个 Remini 的潜在能力。
1.前置准备
从能力上分析，应用依赖两个大模型能力：1、文生图大模型，这是春节贺卡生成的基础；2、语音识别大模型，方便长辈使用语音输入贺卡描述内容。现在我们来获取这两个能力。
1.1. 获取文生图大模型
在生成贺卡场景，我们选择阿里云百炼《文生图 API》[1]，通过两个 HTTP 接口完成。
1. 创建任务接口：发送一个请求创建文生图任务，该请求会返回任务 ID。
POST https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis
curl --location --request POST 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis' \ --header "Authorization: Bearer $DASHSCOPE_API_KEY" \ --data-raw '{}'
2. 根据任务ID查询接口：使用上一步获得的任务ID，查询模型生成的结果。
GET https://dashscope.aliyuncs.com/api/v1/tasks/{task_id}
curl --location --request GET 'https://dashscope.aliyuncs.com/api/v1/tasks/{task_id}' \ --header "Authorization: Bearer $DASHSCOPE_API_KEY"
3. API-KEY 获取（这步是关键）：请求示意的 $DASHSCOPE_API_KEY是阿里云百炼的 API-KEY，由它确定你的身份 ID，记录调用量等信息。
a. 注册账号：如果你还没有阿里云账号，需要先进行注册[2]。
b. 开通百炼：前往百炼控制台[3]，如果页面顶部显示以下消息，您需要开通百炼的模型服务，以获得免费额度。如果未显示该消息，则表示您已经开通。
c. 获取API Key：在控制台的右上角选择 API-KEY，创建 API Key。
4. API 调用示意
这次任务，成功获得了这只拜年猫咪：
1.2. 获取语音识别大模型
与直接使用现有接口的文生图不同，语音识别功能需要在魔搭社区部署一个 FC 应用。接下来我将按步骤进行说明。
1. 账号注册：进入魔搭社区[4]，如果没有账号需要先注册一个账号，同时绑定自己的阿里云账号。
2. 云账号能力授权：授权魔搭使用阿里云相关服务，开通函数计算 FC 与文件储存 NAS。
3. 模型选择：进入模型库，选中语音识别与快速部署进行筛选。在结果列表中选择使用“Paraformer语音识别-中文-通用-16k-离线-large-pytorch”模型。
4. 部署模型：在模型详情界面，部署模型，选择快速部署（SwingDeploy），点击一键部署。
一键部署后将跳转到阿里云函数计算 FC 控制台，点击创建应用。
FC 应用创建成功后，将跳转回魔搭再次进行部署，这个过程大概需要 3 分钟。
等待一会后，模型部署成功：
此时，就可以通过 curl 进行调用了：
curl --location 'https://ms-fc-*********************.cn-hangzhou.fcapp.run/invoke' \ --header 'Content-Type: application/json' \ --data '{ "input": "https://cdn-pre.mobiapp.cloud/171706276418746/api/v1/files/9de28341-0f5f-4070-938a-b6349d05b796" }'
获得语音识别结果：
{ "Code": 200, "Data": { "key": "9de28341-0f5f-4070-938a-b6349d05b796", "text": "正是因为存在绝对正义所以我们接受现实的相对正义但是不要因为现实的相对正义我们就认为这个世界没有正义因为如果当你认为这个世界没有正义" }, "Message": "", "RequestId": "1-6786bade-150b1836-cafae33272b6", "Success": true }
2.使用低代码搭建应用
等等，现在两个大模型的能力有了，我准备好起项目写代码了，为什么跳到了“低代码”环节，它们俩有关系吗？在这里，我们先讨论一个话题：“生产级应用成本”。
2.1. 生产级应用成本
什么是生产级应用？它至少有以下特征：
- 用户体验：提供友好的用户界面，确保用户能快速上手。
- 稳定性：确保在各种条件下都能稳定运行，减少宕机和错误。
- 安全性：必须有安全措施来保护数据和用户隐私，防止数据泄露。
- 便捷性：能够轻松进行维护和升级，而不影响用户使用。
回过头看，要把两个大模型能力融入到我们的贺卡应用中，所需要的业务逻辑：
根据《人月神话：软件项目管理之道》作者 Fred Brooks 的划分，软件开发的复杂度可以划分为本质复杂度（Essential complexity ）和偶然复杂度（Accidental complexity）。前者是解决问题时固有的最小复杂度，与你用什么样的工具、经验是否丰富、架构好不好等都无关，而后者就是除此之外在实际开发过程中引入的复杂度。通常来说，本质复杂度就是业务处理逻辑，因此我把它称为更好理解的“业务复杂度”，这部分复杂度不是任何开发方法或工具能解决的；而偶然复杂度与开发阶段的技术细节强相关，因此我把它称为“技术复杂度”，而这一部分复杂度，恰好就是低代码所擅长且适合解决的。
回到“春节贺卡”场景，在拥有大模型的能力后，技术复杂度是什么，我们从不同视角来看：
- 前端工程师：
- 如何解决大模型接口跨域？
- API-KEY、FC 接口泄露了怎么办？
- 域名怎么部署？https 证书怎么搞？
- 后端工程师
- 我不会 CSS。
- 如何收集语音输入，请求轮询怎么做？
- PC 和 H5 页面如何兼容？
直观的感受一下，我们将查询任务的终端环境的 curl 请求更新为浏览器的 fetch 请求，将产生两个问题：
fetch('https://dashscope.aliyuncs.com/api/v1/tasks/84287277-cce7-4065-babc-55bbe781ad78', { method: 'GET', headers: { 'Authorization': 'Bearer ************' } });
- 跨域错误：
- API-KEY 泄露：
从这个简单的示例可以看出，传统的开发模式将不得不面临业务之外的“技术复杂度”。
2.2. 魔笔低代码的核心职责
为开发者尽可能屏蔽底层技术细节、减少不必要的技术复杂度，并支撑其更好地应对业务复杂度（满足灵活通用的业务场景需求），正是魔笔低代码的核心职责。
将 Pro-Code 与 Low-Code 做一个应用开发全链路的对比：
Pro-Code 纯代码开发 |
LowCode 低代码魔笔 |
|
需求分析 |
|
|
工程环境准备 |
|
|
数据库设计与权限管理 |
|
|
用户界面 |
|
|
业务逻辑 |
|
|
部署与迭代 |
|
|
在 Pro-Code 模式下，面对应用开发不同的生命周期，开发者必须担负业务场景的以外的诸多技术细节。在 Low-Code 模式，魔笔将更多的技术细节收敛、内部闭环，通过成熟的基础设施、现成的标准零件、自动化的装配流水线，开发者只需要专注于最核心的业务价值即可，低代码的发展过程正在将应用软件开发工业化的过程。
3.魔笔搭建《春节贺卡》的技术要点
下面我们将针对《春节贺卡》应用，选取其中的技术要点，来近距离感受魔笔平台的使用方式。您可以结合模板[5]快速创建应用并直接体验。
3.1. 使用 HTTP 集成连接大模型
集成是魔笔平台的重要能力之一，集成的本质是代理转发，魔笔内置了包括 HTTP、MySQL、阿里云函数 FC、阿里云 OpenAPI、百炼大模型等各种集成类型，让您通过简单的配置以实现与各种外部系统的无缝连接。
3.1.1. 连接文生图大模型
- 在应用外创建集成资源：对于文生图 API，因为创建任务与查询任务两个接口具有相同的 hostname，所以在应用外创建一个 HTTP 集成即可。
说明：1、集成名为“百炼 API”；2、Base URL 是接口公共部分，为https://dashscope.aliyuncs.com；3、选择 Bearer Token 类型鉴权协议，在 Token 栏填入百炼 API-KEY，以避免 token 暴露。由于创建任务和查询任务的 pathname 与 header 参数不相同，便不在这里配置，改为调用时传入。备注：记得填入生产环境配置，与开发环境相同。
- 在应用内创建与配置 HTTP 集成操作
在应用内新增集成操作，用于调用应用外的集成资源。
说明：1、将集成操作命名为 text2Image（创建任务）；2、选择前一步所创建的百炼 API 集成资源；3、定义 text2Image 所接收参数，由外部传入；4、定义 POST 请求类型与请求路径；5、定义创建任务的 prompt 参数（与 text2Image 接收参数所关联）。
- 在应用内创建文生图任务
// 创建文生图任务 const startResult = await text2image.trigger({ title: "魔笔祝您春节快乐", sub_title: "家庭团聚，共享天伦之乐", body_text: "春节是中国最重要的传统节日之一，它象征着新的开始和希望", prompt_text_zh: "灯笼，小猫，梅花", wh_ratios: "竖版", lora_name: "折纸工艺", }); // startResult 将包含新任务ID
通过 HTTP 集成资源的定义与集成操作的调用，规避了前文的请求跨域与 API-TOKEN 泄露问题。
3.1.2. 连接语音识别大模型
- 创建集成资源：通过 FC 函数透出的 HTTP 服务不需要鉴权（它的鉴权在链接自身），所以在 HTTP 集成填入 FC 函数链接即可，鉴权协议选择无鉴权。
后续集成操作调用该集成资源的步骤与前面类似，在这里不再赘述。需要注意的是，这个集成接受的语音入参是一个远程资源地址。所以将采用以下链路，获得文字结果：
上面的链路看起来挺麻烦的，有不少的技术细节。对此魔笔提供了语音输入组件聚焦语音采集上传场景。
说明：1、支持一键配置语音文件上传到内置存储；2、透出了开始路由、上传成功等 6 个录音的生命周期，方便相关的业务操作。在当前的场景下，就是在“上传成功”事件内，将远程语音地址作为入参传给语音识别大模型。一下是上传成功的模拟代码：
const text = await audio2txt.trigger({ // 语音转文字大模型 // title_audio 为语音输入组件，在上传到内置文件后，会将远程地址作为入参 audioUrl: title_audio.remoteURL }); const { success, data } = text; if (success && data) { title.setValue(data.slice(0, title.maxLength)); }
- 语音识别接入后的交互效果：
3.2. 定时器
在创建了一个文生图任务后，需要约 30 秒的时间生成一张图片。我们需要定时的查询任务状态，在图片生成后第一时间将结果返回给用户，这就用到了定时器的能力。
- 配置定时器
用一个场景演示定时器能力，上图说明：1、一个文本组件，绑定了 count 变量，在 count 发生变更时，文本组件的渲染将相应发生更新；2、定义一个定时器为 timer1；3、编写定时器内要执行的 JavaScript 逻辑：更新 count 变量值，以消息展示；4、设置执行的时间间隔为 100 毫秒。
- 定时器的启动与停止
// 启动定时器 timer1.start(); // 停止定时器 timer1.stop();
- 场景应用
回到春节贺卡场景，在创建任务后配置一个定时器，查询任务状态即可（模拟数据）：
pollingTaskTimer 定时器，每 2 秒执行一次：
(async() => { const result = await getTaskStatus.trigger(); // 查询任务状态的集成操作 if (!result.success|| result.data?.statusCode?.value !== 200) { pollingTaskTimer.stop(); // 任务异常停止，停止轮询定时器 return; } const { data: { body: { output } } } = result; const { render_urls, task_status } = output; taskStatus.setValue(task_status); switch(task_status) { case 'PENDING': // 排队中，等待前置任务完成 break; case 'RUNNING': // 任务运行时中 break; case 'SUSPENDED': // 任务挂起 case 'FAILED': // 任务失败 case 'SUCCEEDED': // 任务成功 pollingTaskTimer.stop(); // 停止轮询定时器 break; } })();
3.3. 弹层
魔笔定义了弹窗和抽屉两个弹层组件。需要用户处理事务，又不希望跳转页面打断工作流程时，可以使用弹窗或抽屉在当前页面打开一个弹层，承载相应的操作。操作完成后，可以平滑地回到原界面。
- 添加方式：1、从组件列表拖拽，选中弹窗或抽屉组件拖拽到画布；2、框架&组件树面板添加。
- 主要 API
弹窗和抽屉组件共有的 API 主要包括以下两个方法和一个属性：
show 方法：用于展示弹层。
modalFrame.show(); drawerFrame.show();
close 方法：用于关闭弹层。
modalFrame.close(); drawerFrame.close();
hidden 属性：当前弹层是否隐藏。
modalFrame.hidden; // true 或 false drawerFrame.hidden; // true 或 false
- 《春节贺卡》使用的弹层
3.4. PC 端适配
魔笔将页面定义为“桌面页面”与“移动页面”独立维护，而不是采用响应式页面。这种方法允许针对PC和移动设备分别进行设计和构建，以充分考虑不同设备上的用户行为和交互模式，从而提供更为合适的用户体验。比如，PC 端可以利用更大的屏幕空间展示更多信息，而移动端则可以更注重简洁性和触控操作的便利性。
在面向 C 端用户的应用设计中，页面设计优先考虑移动场景，以更好地适应手机的使用和传播需求。因此，在此基础上进行 PC 端适配时，需要采用“渐进增强”的策略。
对此魔笔定义了“页面最大宽度”，《春节贺卡》项目将页面最大宽度设置为 600px，这样手机端展示效果正常（手机宽度不会超过 600px）；在 PC 上展现时则有一个宽度限制，不至于拉伸的过度，以保证 PC 浏览时也有良好的体验效果。
3.5. 调试与发布
- 应用调试：在应用开发阶段（设计器内）支持实时渲染运行，包括连接数据库、服务 API 等，支持代码的实时运行和在线调试，提供极致的所见即所得能力。
- 应用发布：默认提供“开发环境”和“生产环境”两套隔离环境。在测试阶段，使用开发环境（24小时回收），测试完毕后使用生产环境，保证业务的稳定性。
3.6. 应用体验与模板
春节贺卡生成器：https://app.mobiapp.cloud/make-greeting-card，您可以在文章最后点击“阅读阅文”创作您的春节贺卡。由于文生图接口流量限制，应用同时只能处理 5 个任务，所以当你看到任务数量超限的提醒，请稍后再试。
应用模板：上述的代码片段与能力，均取自《春节贺卡生成器模板》[5]，您可以用它快速克隆出自己的应用，定制自己的能力与风格，同时也解锁了流量限制，心动不如行动，不如去试试吧。
魔搭创空间：我们也在魔搭社区（模型即服务共享平台）建立了创空间[6]，将不定期的更新不同形态的 AI 应用能力，欢迎大家关注。
4.结语
通过本文的介绍，我们详细了解了如何获取和利用现有的大模型资源，结合魔笔低代码，低成本、高效率地打造一个 AI 春节贺卡生成器。希望本文激发您对 AI 技术的兴趣和探索的欲望，能在技术的海洋中找到属于自己的乐趣和成就感。祝大家新年快乐，创作愉快！
参考链接：
来源 | 阿里云开发者公众号
作者 | 城危
