「源力觉醒 创作者计划」_文心 4.5 开源模型玩出花——教育场景下 Scratch 积木自动化生成的部署实践与优化

小黄编程快乐屋2025-07-05 17:53

上一篇博客中，我们知道了文心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, // 为了简化示例，这里设为false
                        messages: [
                            {
                                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 积木智能生成

拓展应用场景​

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

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

相关推荐
Sherlock Ma1 小时前
百度开源文心一言4.5：论文解读和使用入门
人工智能·百度·自然语言处理·开源·大模型·文心一言·多模态
一支烟一朵花2 小时前
630，百度文心大模型4.5系列开源！真香
人工智能·百度·开源·文心一言
说私域12 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
猫头虎14 小时前
猫头虎 AI工具分享：一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具：Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
特立独行的猫a14 小时前
百度AI文心大模型4.5系列开源模型评测，从安装部署到应用体验
人工智能·百度·开源·文心一言·文心一言4.5
大咖分享课17 小时前
开源模型与商用模型协同开发机制设计
人工智能·开源·ai模型
tinker18 小时前
使用 Syncthing 2.0 搭建私有同步服务器
开源
断剑重铸之日18 小时前
Android开发：GoogleMap电子围栏与联想地址搜索
开源
Sincerelyplz18 小时前
【Temproal】快速了解Temproal的核心概念以及使用
笔记·后端·开源
热门推荐
012024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理02Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面03Coze扣子平台完整体验和实践（附国内和国际版对比）04Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法08华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南09DeepSeek各版本说明与优缺点分析10django中用 InforSuite RDS 替代memcache