使用折叠面板组织提示词按钮
在这篇博客中，我将展示如何使用折叠面板（Accordion）来组织提示词按钮，提供更加整洁的界面和良好的用户体验。通过这种方式，用户可以点击分类标题展开或收起提示词类别，从而节省空间。
1. HTML 结构
我们首先将所有提示词分类放入一个折叠面板中，点击面板按钮时会展开或收起所有的提示词分类。每个提示词类别的内容会被隐藏，点击分类标题时会显示该类别下的提示词。
<div id="suggestions">
<div class="accordion">
<button class="accordion-btn">展开/收起 提示词类别</button>
<div class="accordion-content">
<!-- 心得体会 -->
<div class="category">
<button class="category-btn">心得体会</button>
<div class="category-content">
<button class="suggestion-btn" data-suggestion="请帮我总结一下这篇文章/书籍的核心观点，并结合实际经验写一段心得体会。">总结心得</button>
<button class="suggestion-btn" data-suggestion="根据我在XX项目中的经历，请帮我写一段反思与总结，强调改进的地方和收获。">反思与总结</button>
<button class="suggestion-btn" data-suggestion="请写一段我学习XX课程后的心得体会，重点讨论收获的知识和遇到的挑战。">学习心得</button>
</div>
</div>
<!-- PPT大纲 -->
<div class="category">
<button class="category-btn">PPT大纲</button>
<div class="category-content">
<button class="suggestion-btn" data-suggestion="请帮我列出一份关于XX主题的PPT大纲，要求每一部分简洁明了，适合展示用。">主题PPT大纲</button>
<button class="suggestion-btn" data-suggestion="请提供一份关于XX研究的详细PPT大纲，包含引言、研究方法、结果分析、结论等部分。">详细PPT大纲</button>
</div>
</div>
<!-- 其他分类按钮 -->
<!-- ... -->
</div>
</div>
</div>
2. 样式设计
为了使折叠面板和按钮具有良好的视觉效果，我们为每个按钮和面板设置了样式。在 accordion-btn 类中，我们定义了折叠面板按钮的样式，而 category-btn 和 suggestion-btn 类则分别用于每个分类和提示词按钮的样式。
/* 折叠面板按钮 */
.accordion-btn {
padding: 10px 15px;
background-color: #4CAF50; /* 修改按钮的背景颜色 */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
text-align: left;
font-weight: bold;
transition: background-color 0.3s;
}
/* 鼠标悬停时的按钮颜色 */
.accordion-btn:hover {
background-color: #45a049; /* 鼠标悬停时的颜色 */
}
/* 折叠面板内容 */
.accordion-content {
display: none; /* 默认隐藏 */
padding: 10px;
background-color: #f9f9f9;
margin-top: 10px;
}
/* 分类按钮样式 */
.category-btn {
padding: 10px 15px;
background-color: #409EFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
text-align: left;
font-weight: bold;
margin-bottom: 0;
transition: background-color 0.3s;
}
.category-btn:hover {
background-color: #66b1ff;
}
/* 提示词按钮 */
.suggestion-btn {
padding: 8px 15px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
width: 100%;
text-align: center;
margin-bottom: 5px;
transition: background-color 0.3s;
}
.suggestion-btn:hover {
background-color: #e6e6e6;
}
3. JavaScript 功能
为了让折叠面板能够展开或收起，我们需要为折叠面板按钮添加 JavaScript 事件监听器。当点击折叠按钮时，会显示或隐藏提示词类别的内容。
document.addEventListener("DOMContentLoaded", () => {
// 为折叠面板的按钮添加事件监听器
const accordionButton = document.querySelector('.accordion-btn');
const accordionContent = document.querySelector('.accordion-content');
accordionButton.addEventListener('click', () => {
// 切换折叠面板的展开和收起状态
if (accordionContent.style.display === 'block') {
accordionContent.style.display = 'none';
} else {
accordionContent.style.display = 'block';
}
});
// 为每个分类按钮添加事件监听器
const categoryButtons = document.querySelectorAll('.category-btn');
categoryButtons.forEach(button => {
button.addEventListener('click', () => {
// 切换类别的展开状态
const content = button.nextElementSibling;
// 如果当前内容是显示的，隐藏它；如果是隐藏的，显示它
if (content.style.display === 'block') {
content.style.display = 'none';
button.classList.remove('active');
} else {
// 隐藏其他类别
const allContents = document.querySelectorAll('.category-content');
allContents.forEach(item => {
item.style.display = 'none';
});
// 显示当前点击的类别内容
content.style.display = 'block';
// 只显示当前按钮的类
categoryButtons.forEach(item => item.classList.remove('active'));
button.classList.add('active');
}
});
});
});
4. 结论
通过这种方式，我们能够将所有的提示词按钮整齐地组织在一个折叠面板中。用户可以通过点击面板按钮来展开或收起各个分类，避免占用太多空间，同时保持界面的整洁与用户体验的流畅。
在 Web 应用中实现 OCR 处理并渲染 LaTeX 公式
在开发中，用户体验的提升不仅仅依赖于前端界面的美观，还包括功能的实现与技术的整合。今天，我将分享一段代码，展示如何结合文件上传、后端 OCR 处理和前端 LaTeX 渲染来构建一个简单而强大的功能。
功能介绍
这段代码实现了一个文件选择、图片上传、OCR 处理和 LaTeX 渲染的工作流。具体步骤如下：
- 文件选择：用户通过文件选择器上传一张图片，图片将作为 OCR 的输入。
- OCR 处理：图片通过
fetchAPI 上传到写好的后端的 Flask 服务，后端将使用 OCR 引擎识别图片中的文本并返回 LaTeX 格式的公式。 - 渲染公式：前端使用 MathJax 来渲染从后端获取的 LaTeX 公式，并展示在页面上，供用户查看。
代码解析
1. 文件选择与上传
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = async (e) => {
const file = e.target.files[0];
if (!file) return;
const fd = new FormData();
fd.append("file", file);
}
这里通过 JavaScript 动态创建了一个 <input type="file"> 元素，用户选择的图片会触发 onchange 事件，通过 FormData 将文件附加到请求体中，准备上传到后端。
2. 上传图片到后端
const resp = await fetch("http://localhost:5001/upload_image", {
method: "POST",
body: fd
});
我们使用 fetch 方法将包含图片文件的 FormData 发送到后端的 upload_image 接口。后端将返回 OCR 处理结果，是一个包含 LaTeX 公式的 JSON 对象。
3. 渲染 LaTeX 公式
const latex = result.res.latex;
const latexContent = document.getElementById("latexContent");
latexContent.value = latex;
$("#myoutput").html(`<div class="math-content">$$${latex}$$</div>`);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myoutput"]);
接收到的 LaTeX 公式会被插入到一个 <textarea> 中，供用户查看。为了更好地展示公式，代码使用 MathJax 库将 LaTeX 转换为可视化的数学公式。
在上传文件和调用 API 的过程中，可能会出现各种错误（例如，网络问题或后端服务故障）。代码通过 try...catch 捕获异常并打印错误信息。
总结与思考
这段代码展示了前端与后端的协作过程，通过文件上传、异步 API 调用和数学公式渲染来实现 OCR 处理。这为在 Web 应用中集成 OCR 功能提供了一个简单的实现方式。从技术层面来看，fetch API 和 FormData 的结合简化了文件上传的过程，而 MathJax 的使用则使得 LaTeX 公式的渲染变得异常简单。
我本来想把后端传回来的公式插入到wps文档里，尝试良久发现wps文档似乎只能打开公式编辑器进行编辑，不像word一样可以实现。
// 5) 如果需要将 LaTeX 插入到 WPS 文档
const app = wps.WpsApplication();
const doc = app.ActiveDocument;
const sel = doc.Application.Selection;
const opts = app.Options;
// 1) 允许线性输入、关闭自动渲染
opts.OMathCopyLF = true;
opts.OMathAutoBuildUp = false;
// 2) 在当前选区插入一个公式容器（内部会自动带“在此处键入公式”占位符）
doc.OMaths.Add(sel.Range);
// 3) 取到刚刚插入的那个公式
const oMaths = doc.OMaths;
const newMath = oMaths.Item(oMaths.Count);
// 4) 直接覆盖掉占位符
// Range.Text 会把整个占位文本清空并写入你的 latex
newMath.Range.Text = latex;
// 5) 恢复自动渲染并手动 BuildUp
opts.OMathAutoBuildUp = true;
newMath.BuildUp();
可惜这段代码只能把latex格式的公式插入文档而不能进行渲染。
扫一扫
1620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
