在社交媒体上我们看到了一个非常棒的用AI 来写春联的App,觉得这个创意非常不错:
虽然这是一个开源的项目,但是我思考: 如果是我们的 AIGNE这个产品,能否不需要写任何代码,只写提示词就实现相同的效果呢? 经过晚上一两个小时的实践,实现了一个简单的原型算是对我们 AIGNE 的能力的验证。
最终实现效果#
由于我们的 AIGNE 还是 Private Beta,并不是每一个人都能立刻使用,我们这里把成品部署在 AIKit 站点上作为一个 demo:
实现步骤#
已经有 AIGNE AI Studio 访问的朋友可以按照下面的步骤来尝试,如果还没有的,可以在这里一瞥使用 AIGNE 来开发完整应用的步骤,对AIGNE 有一个大致的了解。
开发 AI 应用#
- 在 AIGNE 的 AI Studio 中创建一个 Prompt Assistant,取名“春联大师”
- 添加一个参数 “question”,类型为默认的 “文本” 类型
- 第一个 prompt role 改为 system,prompt 内容为:
你是一个写春联的大师,请根据我的提示生成复合意境的春联,包括上联、下联、横批和总结。
[Response JSON Format]:
{
"上联": "",
"下联": "",
"横批": "",
"总结": ""
}
[Requirements]:
- 上联和下联的字数必须一致,在 5 到 13 个字之间
- 横批必须是 4 个字
- 不需要标点符号,不要使用生僻字
- 总结必须是一个字,例如:福、喜、财、运、乐
- 必须用 JSON 格式输出
- 新增一个 user role 的 prompt,内容为:(其中
{{ question }}
会在运行时替换为输入参数question
春联提示:
{{ question }}
- 选择运行模型:经测试发现 Google 的 gemini-pro 模型比 Open AI 的 GPT-3.5, GPT-4 生成的对联比较好。 这是一个很有趣的发现,但目前开发大语言模型的应用很多时候就是需要实践和测试。 在 AI Studio里切换不同的大语言模型来进行测试只是一个简单的选择而已 (如图)
- 调试:在 question 变量中输入一些春联提示,点击"send",如图:
- 至此 AI 部分已经完成
制作前端页面#
我们的目标是无代码(或低代码)实现大部分的界面。当然,对于特殊的界面也可以用少量代码来实现。
- 新建一个自定义组件,命名为 “春联大师”,Renderer 选择 React Component(我们用 React 组件来实现“春联大师”的 UI),代码可以参考 :
- 新建一个 Pages 页面,拖拽刚刚创建的 “春联大师” component 到页面的 Outline 中
- 页面配置,点击上图中黄色箭头区域,右侧 "Properties" 面板中可以配置页面的路径/标题/描述等信息
- 预览:点击 Header 中的 Preview 按钮可以预览 draft 版本的页面
- 发布
- 发布到 staging:点击 Header 中的 "Publish to staging" 按钮,选择刚刚创建的页面,发布到 staging
- 点击到 production:点击 Header 中的 Preview 按钮选择 staging 进入 staging 预览页面,点击预览页面 header 中的 "Publish to production" 按钮,选择页面后发布到 production
- 回到 pages editor 页面,点击 header 中的 "Preview" 按钮选择 "Production" 后即可打开正式发布的页面