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

相关推荐
学不动CV了6 分钟前
单片机ADC采集机理层面详细分析（二）
c语言·arm开发·stm32·单片机·嵌入式硬件·开源·51单片机
阿坡RPA4 小时前
coze 开源版本地部署及踩过的坑【喂饭级教程】
开源·aigc
kymjs张涛4 小时前
零一开源｜前沿技术周刊 #9
前端框架·开源·github
HelloGitHub4 小时前
《HelloGitHub》第 112 期
开源·github
Olrookie5 小时前
若依前后端分离版学习笔记（一）——本地部署
笔记·后端·开源
草梅友仁14 小时前
草梅 Auth 1.1.0 发布与最新动态 | 2025 年第 30 周草梅周报
开源·github·ai编程
Xi_Xu1 天前
Xget：下一代开源资源获取加速引擎，让你的文件下载、储存库克隆和镜像拉取快如闪电
开源·github
不摸鱼1 天前
创业找不到方向？不妨从行业卧底开始 | 不摸鱼的独立开发者日报（第66期）
人工智能·开源·资讯
未来智慧谷1 天前
阿里开源Qwen3-Coder，编程大模型进入高效时代
开源·qwen3-coder
DisonTangor1 天前
商汤InternLM发布最先进的开源多模态推理模型——Intern-S1
人工智能·深度学习·开源·aigc
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02扣子开源本地部署教程 丨Coze智能体小白喂饭级指南03全球最强模型Grok4，国内已可免费使用！（附教程）04Coze 开源了，送上保姆级私有化部署方案【建议收藏】05vue数据变化但页面不变06KGG转MP3工具|非KGM文件|解密音频07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09sqli-labs 靶场 less-8、9、10 第八关到第十关详解：布尔注入，时间注入10腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）