当前位置: 首页 > news >正文

「源力觉醒 创作者计划」_文心 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 的核心特点

  1. 图形化界面,零门槛入门

    • 无需输入代码,通过拖拽不同功能的 “积木块”(如移动、旋转、判断条件等)即可完成逻辑编写,对零基础用户非常友好。
    • 界面分为 “角色区”“舞台区”“积木区”“脚本区”,布局清晰,操作直观。
  2. 丰富的创作元素

    • 角色系统:支持导入内置角色、绘制自定义角色或上传图片,每个角色可独立编写脚本。
    • 背景与场景:内置多种背景模板,也可通过绘图工具或上传图片自定义场景。
    • 多媒体支持:可添加音效、录制声音或导入音乐,实现视听结合的作品。

小黄的想法是调用文心大模型让其自动生成这种积木块,我们只需要说需求即可。

因为之前的博客小黄已经说过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 积木智能生成

拓展应用场景​

  1. 教育领域:与在线编程教育平台结合,为学生提供智能编程辅助。当学生在平台上描述想要实现的编程效果时,自动生成 Scratch 积木,帮助学生快速实现创意,降低编程学习门槛,激发学习兴趣。​
  2. 创意设计:在创意设计工作中,设计师可以通过自然语言描述想要的动画效果、交互逻辑等,利用文心 4.5 和 Scratch 积木生成功能,快速搭建原型,验证创意,提高设计效率。​
  3. 游戏开发:独立游戏开发者可以借助这一技术,快速生成游戏中的一些基础逻辑模块(如角色移动、碰撞检测等对应的 Scratch 积木),加速游戏开发进程,将更多精力投入到游戏创意和美术设计上。

一起来轻松玩转文心大模型吧一文心大模型免费下载地址:https://ai.gitcode.com/theme/1939325484087291906

http://www.dtcms.com/a/266613.html

相关文章:

  • 【算法刷题记录001】整型数组合并(java代码实现)
  • 转Go学习笔记
  • RT‑DETRv2 详解:Real‑Time DETR 的 Bag‑of‑Freebies 与部署优化
  • PNG图像压缩优化工具
  • 钉钉小程序开发技巧:getSystemInfo 系统信息获取全解析
  • IRIV算法详解 | 变量选择的迭代保留法
  • 全星稽核管理软件系统——企业智能化稽核管理的最佳解决方案
  • zxing去白边
  • 督皇口粮酱酒 平价不平质
  • 第十五节:第三部分:特殊文件:XML概述、解析
  • C语言中的输入输出函数:构建程序交互的基石
  • Linux的压缩与解压缩
  • WPF 右键菜单 MenuItem 绑定图片时只显示最后一个 Icon
  • OpenCV 相机标定中的畸变系数及调试硬件
  • 前端渲染大量图片的首屏加载优化方案
  • 刷题笔记--串联所有单词的子串
  • [附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
  • [附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的电影小说网站管理系统,推荐!
  • 儿童益智玩具+AI大模型能不能原地起飞?
  • Unity URP法线贴图实现教程
  • 三、jenkins使用tomcat部署项目
  • RK-Android11-性能优化-限制App内存上限默认512m
  • 利用TCP协议,创建一个多人聊天室
  • 使用reactor-rabbitmq库监听Rabbitmq
  • Go中使用Google Authenticator
  • 东软8位MCU低功耗调试总结
  • 如何使用python识别出文件夹中全是图片合成的的PDF,并将其移动到指定文件夹
  • 【ASP.NET Core】REST与RESTful详解,从理论到实现
  • 当前主流AI智能代理框架对比分析报告
  • 分布式光伏监控系统防孤岛保护装置光功率预测