「源力觉醒 创作者计划」_文心 4.5 开源模型玩出花——教育场景下 Scratch 积木自动化生成的部署实践与优化
上一篇博客中,我们知道了文心4.5相关模型的开源信息,在 AI 浪潮汹涌的当下,大模型不断迭代创新,为我们带来前所未有的机遇。百度文心 4.5 开源模型的问世,更是为广大开发者、爱好者开启了一扇全新的大门。今天,就带大家深入探索如何零代码部署文心 4.5 开源模型,并利用其强大能力实现 Scratch 积木的智能生成,即便你是技术小白,也能轻松上手,玩转出属于自己的创意天地!
在 AI 浪潮汹涌的当下,大模型不断迭代创新,为我们带来前所未有的机遇。百度文心 4.5 开源模型的问世,更是为广大开发者、爱好者开启了一扇全新的大门。今天,就带大家深入探索如何零代码部署文心 4.5 开源模型,并利用其强大能力实现 Scratch 积木的智能生成,即便你是技术小白,也能轻松上手,玩转出属于自己的创意天地!
一、文心 4.5 开源模型:开启无限可能
(一)强大阵容,覆盖多元需求
文心 4.5 系列开源模型共 10 款,涵盖了激活参数规模分别为 47B 和 3B 的混合专家(MoE)模型(最大的模型总参数量为 424B),以及 0.3B 的稠密参数模型。从大规模的复杂任务处理到轻量级的便捷应用,不同参数规模的模型为我们提供了丰富的选择,无论是追求极致性能还是注重资源节约,都能找到最适配的那一款。
(二)创新架构,提升多模态实力
针对 MoE 架构,百度提出了创新性的多模态异构模型结构。通过跨模态参数共享机制,实现了文本、图像等模态间的知识融合,同时又为各单一模态保留了专用参数空间。这种架构非常适用于从大语言模型向多模态模型的持续预训练范式,使得模型在保持甚至提升文本任务性能的基础上,显著增强了多模态理解能力,能够轻松应对图像理解、图文推理等复杂多模态任务。
(三)开源开放,推动生态繁荣
本次发布的全部模型(包括预训练权重和推理代码)和项目均已完全开源至 Hugging Face、GitHub、飞桨星河社区等平台,模型权重按照 Apache 2.0 协议开源,支持开展学术研究和产业应用。这意味着全球开发者都能免费获取这些资源,基于文心 4.5 进行二次开发、创新应用,极大地降低了开发门槛,推动 AI 生态蓬勃发展。
二、零代码部署文心 4.5 模型:轻松上手
我们本次使用的是飞桨星河社区平台的部署,因为本地部署的话对电脑硬件的配置要求有点过高,小黄的电脑并不支持。所以我们选择使用fastdeploy在星河社区部署。
1.进入部署页面:飞桨AI Studio星河社区-人工智能学习与实训社区
进到页面进行注册登录即可。之后选择新建部署
之后等待部署,部署成功后我们点击详情即可看到对应的调用信息类似下面的页面,有python和CURL的对应信息。大家按需选择即可。小黄选择的是CURL的。
2网页测试调用
因为我们本次的想法是在scratch中接入文心大模型,所以我们需要根据CURL中的api以及apikey去实现一个测试网页。
大家可以自己写一个测试网页或者直接叫文心帮忙写一个。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>API测试工具</title><style>body {font-family: Arial, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;line-height: 1.6;}.container {display: flex;flex-direction: column;gap: 20px;}textarea, pre {width: 100%;min-height: 100px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;font-family: monospace;}button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}label {font-weight: bold;margin-bottom: 5px;display: block;}.form-group {margin-bottom: 15px;}</style>
</head>
<body><h1>API测试工具</h1><div class="container"><div class="form-group"><label for="apiKey">API Key:</label><input type="text" id="apiKey" value="你的ApiKey" style="width: 100%; padding: 8px;"></div><div class="form-group"><label for="userMessage">输入消息:</label><textarea id="userMessage">你好,请介绍一下你自己</textarea></div><div class="form-group"><label for="temperature">Temperature (0-1):</label><input type="number" id="temperature" min="0" max="2" step="0.1" value="0.6" style="width: 100px; padding: 8px;"></div><button id="sendButton">发送请求</button><div class="form-group"><label>响应结果:</label><pre id="responseOutput">等待发送请求...</pre></div></div><script>document.getElementById('sendButton').addEventListener('click', async function() {const apiKey = document.getElementById('apiKey').value;const userMessage = document.getElementById('userMessage').value;const temperature = parseFloat(document.getElementById('temperature').value);const output = document.getElementById('responseOutput');output.textContent = "发送请求中...";try {const response = await fetch('你的网址调用', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${apiKey}`},body: JSON.stringify({model: "default",temperature: temperature,stream: false, // 为了简化示例,这里设为falsemessages: [{role: "user",content: userMessage}]})});if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();output.textContent = JSON.stringify(data, null, 2);// 如果有回复内容,显示出来if (data.choices && data.choices[0].message) {output.textContent += "\n\n回复内容: " + data.choices[0].message.content;}} catch (error) {output.textContent = "请求出错: " + error.message;console.error('Error:', error);}});</script>
</body>
</html>
但是写完测试小黄发现会直接在浏览器中调用会存在跨域问题,为了解决这个问题,小黄选择使用node 创建一个简单的 Node.js 代理服务器。
代理创建步骤创建一个文件夹
1.npm init 初始化一下
2.下载对应的包
npm install express cors axios
3.创建server.js
const express = require('express');
const cors = require('cors');
const axios = require('axios');const app = express();
app.use(cors());
app.use(express.json());app.post('/chat', async (req, res) => {try {const response = await axios.post('换成您自己的api地址', // 更新API地址req.body,{headers: {'Content-Type': 'application/json','Authorization': req.headers.authorization,},});res.json(response.data);} catch (error) {console.error('API Error:', error.response?.data || error.message);res.status(500).json({ error: error.message,details: error.response?.data });}
});app.listen(3000, () => console.log('Proxy server running on http://localhost:3000'));
4.执行node server.js这样
OK,我们再次写一个网页进行测试
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>API 测试页面</title><style>body {font-family: Arial, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;}.container {display: flex;flex-direction: column;gap: 15px;}textarea, pre {width: 100%;min-height: 100px;padding: 10px;border: 1px solid #ddd;border-radius: 4px;}button {padding: 10px 15px;background-color: #4285f4;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #3367d6;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: bold;}</style>
</head>
<body><h1>API 测试页面</h1><div class="container"><div class="form-group"><label for="apiKey">API Key:</label></div><div class="form-group"><label for="userMessage">输入消息:</label><textarea id="userMessage">你好,请介绍一下你自己</textarea></div><div class="form-group"><label for="temperature">Temperature (0-2):</label><input type="number" id="temperature" min="0" max="2" step="0.1" value="0.6" style="width: 60px; padding: 8px;"></div><button id="sendButton">发送请求</button><div class="form-group"><label>响应结果:</label><pre id="responseOutput">等待请求...</pre></div></div><script>document.getElementById('sendButton').addEventListener('click', async function() {const apiKey = "你的ApiKey";const userMessage = document.getElementById('userMessage').value;const temperature = document.getElementById('temperature').value;const output = document.getElementById('responseOutput');output.textContent = "请求发送中...";try {const response = await fetch('http://localhost:3000/chat', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${apiKey}`},body: JSON.stringify({model: "default",temperature: parseFloat(temperature),messages: [{role: "user",content: userMessage}]})});if (!response.ok) {throw new Error(`HTTP 错误! 状态码: ${response.status}`);}const data = await response.json();output.textContent = JSON.stringify(data, null, 2);// 如果有回复内容,提取显示if (data.choices && data.choices[0] && data.choices[0].message) {const reply = data.choices[0].message.content;output.textContent += `\n\nAI 回复:\n${reply}`;}} catch (error) {output.textContent = `请求失败: ${error.message}`;console.error('Error:', error);}});</script>
</body>
</html>
测试结果,已经可以成功请求到了。
三、将部署的文心 4.5 模型接入scratch中
一、Scratch 是什么?
Scratch 是由麻省理工学院(MIT)媒体实验室开发的一款图形化编程工具,主要面向青少年和编程初学者。它通过 “拖拽积木块” 的方式替代传统代码编写,让用户无需记忆复杂语法,就能轻松创作交互式故事、游戏、动画等作品,被誉为 “编程启蒙的最佳工具之一”。
二、Scratch 的核心特点
-
图形化界面,零门槛入门
- 无需输入代码,通过拖拽不同功能的 “积木块”(如移动、旋转、判断条件等)即可完成逻辑编写,对零基础用户非常友好。
- 界面分为 “角色区”“舞台区”“积木区”“脚本区”,布局清晰,操作直观。
-
丰富的创作元素
- 角色系统:支持导入内置角色、绘制自定义角色或上传图片,每个角色可独立编写脚本。
- 背景与场景:内置多种背景模板,也可通过绘图工具或上传图片自定义场景。
- 多媒体支持:可添加音效、录制声音或导入音乐,实现视听结合的作品。
小黄的想法是调用文心大模型让其自动生成这种积木块,我们只需要说需求即可。
因为之前的博客小黄已经说过scratch的相关项目的编译以及基本介绍了。我们现在就不多赘述。
积木块的底层原理就是生成对应的xml代码,然后导入即可在工作区自动生成积木块,导入导出的方法我们已经获取到了。接下来就是对AI的设定。我给的设定是
我给的设定是:
你是一个Scratch代码生成专家,请将以下自然语言描述转换为Scratch积木块xml表示:
描述:让小猫向右移动10步,然后说"你好!"2秒
要求:
1. 使用Scratch 3.0的积木格式
2. 输出规范的xml格式
3. 包含必要的积木连接关系
AI的回答格式是:我们只需要把<xml>的那段代码截出来即可。
核心逻辑代码:
const xmlStart = reply.indexOf('<xml');
const xmlEnd = reply.indexOf('</xml>') + 6;
const xmlContent = reply.slice(xmlStart, xmlEnd);
const xmlDom = Blockly.Xml.textToDom(xmlContent);
workspace.clear(); // 清空当前工作区
Blockly.Xml.domToWorkspace(xmlDom, workspace);
OK,大功告成,我们看看效果,从视频上我们可以看到,是可以实现自动生成我们定义的积木块的。
文心 4.5模型玩出花! Scratch 积木智能生成
拓展应用场景
- 教育领域:与在线编程教育平台结合,为学生提供智能编程辅助。当学生在平台上描述想要实现的编程效果时,自动生成 Scratch 积木,帮助学生快速实现创意,降低编程学习门槛,激发学习兴趣。
- 创意设计:在创意设计工作中,设计师可以通过自然语言描述想要的动画效果、交互逻辑等,利用文心 4.5 和 Scratch 积木生成功能,快速搭建原型,验证创意,提高设计效率。
- 游戏开发:独立游戏开发者可以借助这一技术,快速生成游戏中的一些基础逻辑模块(如角色移动、碰撞检测等对应的 Scratch 积木),加速游戏开发进程,将更多精力投入到游戏创意和美术设计上。
一起来轻松玩转文心大模型吧一文心大模型免费下载地址:https://ai.gitcode.com/theme/1939325484087291906