「源力觉醒 创作者计划」_文心 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, // 为了简化示例,这里设为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

相关推荐
说私域7 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
猫头虎8 小时前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
特立独行的猫a9 小时前
百度AI文心大模型4.5系列开源模型评测,从安装部署到应用体验
人工智能·百度·开源·文心一言·文心一言4.5
大咖分享课11 小时前
开源模型与商用模型协同开发机制设计
人工智能·开源·ai模型
tinker12 小时前
使用 Syncthing 2.0 搭建私有同步服务器
开源
断剑重铸之日12 小时前
Android开发:GoogleMap电子围栏与联想地址搜索
开源
Sincerelyplz13 小时前
【Temproal】快速了解Temproal的核心概念以及使用
笔记·后端·开源
时序数据说19 小时前
时序数据库IoTDB用户自定义函数(UDF)使用指南
大数据·数据库·物联网·开源·时序数据库·iotdb