专栏名称: 阿里开发者
阿里巴巴官方技术号,关于阿里的技术创新均将呈现于此
目录
相关文章推荐
白鲸出海  ·  点点互动SLG新作上线,登上韩国畅销榜74名 ·  3 天前  
51好读  ›  专栏  ›  阿里开发者

过年啦!做一个春节贺卡生成器?

阿里开发者  · 公众号  · 科技公司  · 2025-01-17 18:00

主要观点总结

本文介绍了如何利用现有的大模型资源,结合魔笔低代码,打造一个AI春节贺卡生成器。文章详细阐述了前置准备、使用低代码搭建应用、技术要点以及魔笔的核心职责等。

关键观点总结

关键观点1: 获取和利用现有的大模型资源

介绍如何获取文生图大模型和语音识别大模型,并介绍了它们的用途。

关键观点2: 使用魔笔低代码搭建应用

介绍魔笔低代码的核心职责,以及如何借助魔笔低代码平台来搭建春节贺卡生成器。

关键观点3: 技术要点

详细介绍在使用魔笔平台时所需关注的技术要点,包括HTTP集成连接大模型、定时器、弹层、PC端适配、调试与发布等。

关键观点4: 应用体验与模板

提供春节贺卡生成器的体验链接,并介绍应用模板和魔搭创空间。


正文

阿里妹导读


本文介绍了如何获取和利用现有的大模型资源,结合魔笔低代码,低成本、高效率地打造一个 AI 春节贺卡生成器。

2025年春节马上到来了,如果有一个 专属自己 的 AI 春节贺卡生成器,让《相亲相爱一家人》群的每一位家人都能发挥创意,生成自己的春节祝福,那你一定是家族群里 最靓的仔

贺卡预览

2024年 AI 应用广泛地被下载使用,其中《Remini》推出的黏土滤镜成功走红社交网络,下载量达到 4.5亿次 ,内购收入突破 2亿美元 (数据统计自2024年8月)。今天各个领域的大模型百花齐放,本文将指导你如何利用 现有资源 制作一个《AI 春节贺卡生成器》,获得打造 下一个 Remini 的潜在能力。

一、前置准备

从能力上分析,应用依赖两个大模型能力: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 调用示意

创建图片生成任务,获得任务 ID

查询任务进度,获得图片渲染结果

这次任务,成功获得了这只拜年猫咪:

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.1. 生产级应用成本

什么是生产级应用?它至少有以下特征:

  1. 用户体验: 提供友好的用户界面,确保用户能快速上手。

  2. 稳定性: 确保在各种条件下都能稳定运行,减少宕机和错误。

  3. 安全性: 必须有安全措施来保护数据和用户隐私,防止数据泄露。

  4. 便捷性: 能够轻松进行维护和升级,而不影响用户使用。

回过头看,要把两个大模型能力融入到我们的贺卡应用中,所需要的业务逻辑:

根据《人月神话:软件项目管理之道》作者 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 ************'  }});
  1. 跨域错误:

  1. API-KEY 泄露:

从这个简单的示例可以看出,传统的开发模式将不得不面临业务之外的“ 技术复杂度 ”。

2.2. 魔笔低代码的核心职责

为开发者尽可能 屏蔽 底层技术细节、 减少 不必要的技术复杂度,并支撑其更好地 应对 业务复杂度(满足灵活通用的业务场景需求),正是魔笔低代码的 核心职责

将 Pro-Code 与 Low-Code 做一个应用开发全链路的对比:


Pro-Code 纯代码开发

LowCode 低代码魔笔

需求分析

  • 收集和分析用户需求

  • 确定功能目标

  • 设计系统架构和技术栈选型

  • 收集和分析用户需求

  • 确定功能目标

  • 使用平台 标准 能力支持应用

工程环境准备

  • 前端:React 或 Vue 框架选择;Webpack、Vite 开发热更新、构建、npm 依赖管理

  • 后端:Spring 或 Django 框架选择;Java 或 Python 环境配置;数据库连接配置

  • 所见即所得 的搭建体验、支持三方库引入

  • 集成流 可视化逻辑设计 HTTP 接口、 FC 函数、 数据库 (MySQL、PostgreSQL)集成能力

数据库设计与权限管理

  • 阿里云 RDS 云数据库管理

  • 数据模型设计

  • 内置数据库 管理

用户界面

  • HTML、CSS 编写

  • PC 与 H5 兼容性适配

  • Redux 或 Vuex 状态管理

  • 组件 拖拽 式的界面实现,支持网格与弹性布局

  • 支持弹窗、表单、图表、表格等各类型组件

  • 内置的 数据驱动 能力, UI 自更新 能力

  • 支持变量、函数、 定时器 、事件等各种基础能力

业务逻辑

  • 用户认证与授权

  • 设计 API 接口,定义数据传输格式

  • 前后端进行集成和测试

  • 内置 权限配 置能力,包括权限组、身份源(钉钉、微信)管理,支持 匿名访问

  • HTTP 集成连接:解决跨域、Token 泄露等问题

  • MySQL 集成连接:支持在 设计器 编写 SQL 业务逻辑

部署与迭代

  • 阿里云 ECS 主机管理

  • 使用容器化技术和CI/CD工具进行自动化部署

  • 迭代开发新功能和改进现有功能

  • 开发环境与生产环境 隔离 ,满足测试需要与线上稳定。

  • 提供 一键式 应用 上线 下线 能力

在 Pro-Code 模式下,面对应用开发不同的生命周期,开发者必须 担负 业务场景的以外的诸多技术细节。在 Low-Code 模式,魔笔将更多的技术细节收敛、内部闭环,通过成熟的 基础设施 、现成的 标准零件 、自动化的 装配流水线 ,开发者只需要专注于最核心的业务价值即可,低代码的发展过程正在将 应用软件开发工业化 的过程。

三、魔笔搭建《春节贺卡》的技术要点

下面我们将针对《 春节贺卡 》应用,选取其中的技术要点,来近距离感受魔笔平台的使用方式。您可以结合 模板[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();

支持 GUI 配置的定时器调用

  • 场景应用







请到「今天看啥」查看全文