当前位置：首页 > wzjs >正文

网站源码怎么预览抚顺网站制作

wzjs 2025/9/13 14:27:50

网站源码怎么预览,抚顺网站制作,注册网站后如何注销账号,成都产品包装设计上一篇博客中，我们知道了文心4.5相关模型的开源信息，在 AI 浪潮汹涌的当下，大模型不断迭代创新，为我们带来前所未有的机遇。百度文心 4.5 开源模型的问世，更是为广大开发者、爱好者开启了一扇全新的大门。今天&#xf…

上一篇博客中，我们知道了文心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