Grok 3 beta在自然语言和代码理解、代码生成上的表现远超其它大模型
但切换到chatgpt, gemini, deepseek r1/v3, QwQ之类的其他大模型之后，全部都会出各种状况。对于稍微复杂一点的代码，跟Grok 3 beta的互动良好。
·
对于稍微复杂一点的代码，跟Grok 3 beta的互动良好。
得到下面的表格生成html代码，主要是需要借助两个不同的开源项目的javascript代码。一个是hanzi-writer中9000多个汉字的笔画笔顺的数据和图片信息及读取和显示的javascript代码（文鼎+hanziwriter,了解这些之后才知道“文鼎”相关工作有那么多优秀的中外人士参与；但我不理解的是为什么stroke.com上的数据怎么比hanzi-writer的明显要多，以及文鼎的开源的楷体字体对应的字符也明显比hanzi-writer中json字符更多，以及如果自己根据新的汉字的矢量图获取同样好用的JSON文件时需要哪些深入的工作–也许可以问问大语言模型），再就是阿里巴巴一位前端专家写的汉字拼音相关的数据集和javascript函数。——把两个项目中需要借鉴的开源的内容整合在一起，一个使用字符集、字体和笔画笔顺信息及javascript函数，另一个使用拼音声调字符集和javascript函数，然后代码理解和整理的主力是大模型，我主要负责反馈和把要求描述给大模型。
这样打包的结果可以在微信小程序或者其它网页上应用。而且我已经注意到有更加完善的这样的apk文件和微信小程序存在了。——我借助大模型，从零基础完成这些，目前来看只有Grok 3 beta跟我配合能够顺利完成任务。听说Claude在写代码方面的能力也行，包括阿里的QwQ最新版据说代码方面能力都有提升，但我一直没找到合适的试用途径就没有尝试，但从数学题推理的结果输给DeepSeek R1/V3，我并不看好claude，而通义千问的表现明显比Grok 3 beta低一个档次，在DeepSeek ChatGpt Gemini等这个档次的末流。——这些只是我个人目前根据能够访问的公开免费的大模型的经验；只是局部的经验，看不到全貌，而且经验有限，不是标准测试，大模型都在进化，未来如何就难说。
但切换到chatgpt, gemini, deepseek r1/v3, QwQ之类的其他大模型之后，全部都会出各种状况。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>汉字笔画展示</title>
<!-- 引用网络上的 hanzi-writer 最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.6.0/dist/hanzi-writer.min.js"></script>
<!-- 引用本地的 pinyinjs 相关文件 -->
<script type="text/javascript" src="./pinyin_dict_withtone.js"></script>
<script type="text/javascript" src="./pinyinUtil.js"></script>
<!-- 引入 jsPDF 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- 引入 html2canvas 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
.input-container {
margin: 20px;
}
.main-container {
display: flex;
align-items: flex-start;
margin: 20px;
}
.character-container {
position: relative;
width: 250px;
height: 250px;
margin-right: 20px;
flex-shrink: 0; /* 防止左侧区域被压缩 */
}
.character {
font-size: 250px;
font-family: 'KaiTi', '楷体', serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.mizige-main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border: 1px solid red;
}
.stroke-section {
flex: 1;
min-width: 0; /* 防止溢出 */
}
.stroke-info {
display: flex;
align-items: center;
font-size: 24px;
margin-bottom: 10px;
}
.stroke-container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 米字格之间的间距 */
}
.stroke-step {
position: relative;
width: 85px; /* 固定宽度，确保换行计算准确 */
height: 85px;
flex-shrink: 0; /* 防止米字格被压缩 */
}
.error-message {
color: red;
margin: 20px;
}
/* 打印样式调整为 A4 尺寸 */
@media print {
body {
width: 210mm;
height: 297mm;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.character-container {
width: 100%;
height: auto;
margin: 0;
}
.stroke-section {
width: 100%;
}
.stroke-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.stroke-step {
width: 85px;
height: 85px;
margin: 5px;
}
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="characterInput" placeholder="输入汉字">
<button onclick="displayCharacterStrokes()">显示笔画笔顺</button>
<button id="print-btn">打印到 PDF</button>
</div>
<div class="main-container">
<div class="character-container">
<div id="characterDisplay" class="character">爨</div>
<svg class="mizige-main" viewBox="0 0 100 100">
<path d="M50 0 L50 100 M0 50 L100 50" stroke="red" stroke-opacity="1" fill="none" stroke-dasharray="5,5" />
<path d="M0 0 L100 100 M100 0 L0 100" stroke="red" stroke-opacity="1" stroke-dasharray="5,5" fill="none" />
</svg>
</div>
<div class="stroke-section">
<div class="stroke-info">
<span>拼音：<span id="pinyinOutput">cuàn</span></span>
|
<span>笔画数：<span id="strokeCount">30</span></span>
</div>
<div class="stroke-container" id="strokeContainer"></div>
</div>
</div>
<div id="errorMessage" class="error-message"></div>
<script>
// 默认汉字
let defaultCharacter = '爨';
// 查找字符串中的第一个汉字
function findFirstChineseCharacter(str) {
for (let char of str) {
if (/[\u4e00-\u9fff]/.test(char)) {
return char;
}
}
return null;
}
// 创建 HanziWriter 实例
const writer = new HanziWriter('characterDisplay', {
width: 250,
height: 250,
padding: 5,
showOutline: true
});
// 显示汉字的笔画和拼音
function displayCharacterStrokes() {
const input = document.getElementById('characterInput').value;
const character = findFirstChineseCharacter(input) || defaultCharacter;
document.getElementById('characterInput').value = character;
document.getElementById('characterDisplay').textContent = character;
document.getElementById('errorMessage').textContent = '';
// 获取拼音（带声调，支持多音字）
const pinyinString = pinyinUtil.getPinyin(character, ' ', true, true);
document.getElementById('pinyinOutput').textContent = pinyinString;
// 设置字符并加载数据
writer.setCharacter(character).then(() => {
const characterData = writer._character;
const strokes = characterData.strokes;
const strokeCount = strokes.length;
// 更新笔画数
document.getElementById('strokeCount').textContent = strokeCount;
// 清空笔画容器
const container = document.getElementById('strokeContainer');
container.innerHTML = '';
// 逐步显示笔画
for (let i = 0; i < strokeCount; i++) {
const div = document.createElement('div');
div.className = 'stroke-step';
// 创建单一的 SVG 元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "85");
svg.setAttribute("height", "85");
svg.setAttribute("viewBox", "0 0 1024 1024");
svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
// 创建米字格组
const gridGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
svg.appendChild(gridGroup);
// 绘制边框线
const borderPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
borderPath.setAttribute("d", "M0 0 H1024 V1024 H0 Z");
borderPath.setAttribute("stroke", "red");
borderPath.setAttribute("stroke-width", "2");
borderPath.setAttribute("stroke-opacity", "1");
borderPath.setAttribute("fill", "none");
gridGroup.appendChild(borderPath);
// 绘制中心横竖线
const centerLinesPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
centerLinesPath.setAttribute("d", "M512 0 V1024 M0 512 H1024");
centerLinesPath.setAttribute("stroke", "red");
centerLinesPath.setAttribute("stroke-width", "2");
centerLinesPath.setAttribute("stroke-dasharray", "5,5");
centerLinesPath.setAttribute("stroke-opacity", "1");
centerLinesPath.setAttribute("fill", "none");
gridGroup.appendChild(centerLinesPath);
// 绘制对角线
const diagonalLinesPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
diagonalLinesPath.setAttribute("d", "M0 0 L1024 1024 M1024 0 L0 1024");
diagonalLinesPath.setAttribute("stroke", "red");
diagonalLinesPath.setAttribute("stroke-width", "2");
diagonalLinesPath.setAttribute("stroke-dasharray", "5,5");
diagonalLinesPath.setAttribute("stroke-opacity", "1");
diagonalLinesPath.setAttribute("fill", "none");
gridGroup.appendChild(diagonalLinesPath);
// 创建笔画组
const strokeGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
strokeGroup.setAttribute("transform", "scale(1, -1) translate(0, -1024) translate(0,120)");
svg.appendChild(strokeGroup);
// 绘制灰色背景（整个字）
strokes.forEach(stroke => {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", stroke.path);
path.setAttribute("fill", "#ccc");
strokeGroup.appendChild(path);
});
// 绘制已完成的笔画（黑色）
for (let j = 0; j < i; j++) {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", strokes[j].path);
path.setAttribute("fill", "black");
strokeGroup.appendChild(path);
}
// 绘制当前笔画（红色）
const currentPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
currentPath.setAttribute("d", strokes[i].path);
currentPath.setAttribute("fill", "red");
strokeGroup.appendChild(currentPath);
div.appendChild(svg);
container.appendChild(div);
}
}).catch(error => {
document.getElementById('errorMessage').textContent =
`无法加载汉字“${character}”的笔画数据：${error.message}`;
});
}
// 页面加载时显示默认汉字
window.onload = displayCharacterStrokes;
// 打印到 PDF
document.getElementById('print-btn').addEventListener('click', function() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
// 获取当前日期并格式化
const today = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
const dateString = today.toLocaleDateString('en-US', options).replace('年', '年 ').replace('月', '月 ').replace('日', '日 ');
// 页眉和页脚信息
const headerText = 'Generated by Large Language Model for html5+javascript';
const footerText = 'Printing Date:' + dateString;
// 添加页眉和页脚（使用默认字体，确保 UTF-8 支持）
doc.setFontSize(12);
doc.text(headerText, 105, 10, { align: 'center' });
doc.text(footerText, 105, 287, { align: 'center' });
// 获取整个页面内容
const pageContent = document.body;
html2canvas(pageContent, {
scale: 2, // 提高渲染质量
backgroundColor: '#ffffff',
useCORS: true // 确保跨域资源加载
}).then(function(canvas) {
const imgData = canvas.toDataURL('image/png');
const imgWidth = 210; // A4 宽度 (mm)
const imgHeight = (canvas.height * imgWidth) / canvas.width; // 按比例计算高度
const pageHeight = 297; // A4 高度 (mm)
const contentHeight = imgHeight;
// 如果内容高度小于页面高度（减去页眉和页脚空间），居中显示
const margin = 15; // 页眉和页脚各留 15mm
if (contentHeight < pageHeight - 2 * margin) {
const yOffset = (pageHeight - contentHeight) / 2;
doc.addImage(imgData, 'PNG', 0, yOffset, imgWidth, contentHeight);
} else {
// 内容高度超过页面高度，进行缩放
const scale = (pageHeight - 2 * margin) / contentHeight;
const scaledWidth = imgWidth * scale;
const scaledHeight = contentHeight * scale;
const xOffset = (imgWidth - scaledWidth) / 2;
doc.addImage(imgData, 'PNG', xOffset, margin, scaledWidth, scaledHeight);
}
// 保存 PDF 文件
doc.save('汉字笔画展示.pdf');
}).catch(error => {
console.error('生成 PDF 失败：', error);
alert('生成 PDF 失败，请检查控制台错误信息');
});
});
</script>
</body>
</html>
对本地的Hanzi-writer-local-js作了虚拟网络路径替代实际网络路径的修改，主要是本地读取汉字JSON格式数据所在目录下管理员权限启动命令行运行：http-server -c-1 --cors (管理员权限！）从虚拟网络服务器 localhost:8080/ (如果打开多个，会依次编号8081, 8082,也可以自定义为8888等）。
尝试想改defaultCharDataLoader 为 localCharDataLoader 未遂。node.js和electron太繁琐，没有报错，实现预想功能，真好：
欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。
更多推荐
2
0- 0
已为社区贡献5条内容
所有评论(0)