手把手打造AI应用：从需求分析到部署上线的全流程指南

前言

本文试图以最短路径、最轻模式实现一个应用，仅需三大步+9小步，以下为手把手教学流程。

需求描述

以产品经理视角进行系统化描述，可参考以下模版：

1. 需求概述：解决什么问题，实现什么功能，整体介绍。
2. 交互界面描述：输入框、输出框功能及交互方式。
3. 提供功能工具：寻找可实现功能的AI模型。

相关模型

生成文章插图可使用以下AI模型，并获取具体的API使用方式：
模型地址

Demo成品示例：点击查看

需求实现步骤

1. 整体需求描述

基于 Gradio 开发应用，实现以下功能：

• 用户输入公众号文章内容后，点击一键生成按钮。
• 自动生成标题、摘要。
• 基于摘要自动生成英文 Prompt，并生成文章配图。

2. 前端核心模块

1. 用户输入框：提醒用户输入公众号文章内容。
2. 标题输出框：
   • 自动生成 5 个适合公众号的标题（64 字以内）。
   • 左右布局，流式输出，思考过程与最终输出分开展示。
3. 摘要输出框：
   • 自动生成适合公众号的摘要（120 字以内）。
   • 左右布局，流式输出，思考过程与最终输出分开展示。
4. 文章配图 Prompt 输出框：
   • 根据摘要自动生成英文 Prompt。
   • 左右布局，流式输出。
   • 可编辑并支持重新生成。
5. 文章配图输出框：
   • 根据生成的英文 Prompt 生成配图。
   • 生成 2 张 1024x500 尺寸的图片。

视觉风格：青色+紫色的科技风。

3. 服务端 API

标题、摘要、Prompt 输出 API

import requests
import json
from PIL import Image
from io import BytesIO
url = 'https://api-inference.modelscope.cn/v1/images/generations'
payload = {
'model': 'djyzcp123/gjerc',  # ModelScope Model-Id, required
'prompt': 'A golden cat'  # required
}
headers = {
'Authorization': 'Bearer 替换为你的魔搭token',
'Content-Type': 'application/json'
}
response = requests.post(url, data=json.dumps(payload, ensure_ascii=False).encode('utf-8'), headers=headers)
response_data = response.json()
image = Image.open(BytesIO(requests.get(response_data['images'][0]['url']).content))
image.save('result_image.jpg')

用 AI 生成代码，并在云端 Notebook 测试打磨

1. 代码生成

• 可使用 Cursor、DeepSeek-R1、QwenMax-QWQ、Claude3.7 等大模型自动生成代码。
• 代码保存为 .py 文件。

2. Notebook 中运行代码

• Notebook 预装环境，开箱即用。
• Notebook 地址
• 运行 .py 文件：

!python /mnt/workspace/文件名.py

3. 测试与优化

前端验收

实测 4 个工具生成的前端界面不同，但均满足需求。

Cursor	DeepSeek-R1
QwenMax-QWQ	Claude3.7

服务端验收

功能均可正常运行，生成的标题、摘要、Prompt 及配图符合预期。

部署上线

1. 创空间基本设置

• 新建创空间
• 使用平台免费 CPU 资源，按默认配置即可。

2. 关键步骤：API Key 保护

• 修改代码，将 API Key 存入环境变量。

修改前：

修改后：

import os
MODEL_API_KEY = os.getenv('MODEL_API_KEY')

3. 上传文件并发布上线

• 将 Notebook 中调试成功的 .py 文件重命名为 app.py 并上传。

完成后，即可获得分享链接：

总结

人人都是应用开发者，用 AI 开启魔法，搭建万千应用！

应用可无限拓展，如：

1. 增加文章润色、微信群发文案。
2. 插图风格可选。

更多可能性等你探索！ 🚀