html表单日期代码 html 日期 收藏 0

一款高效的Vue低代码表单、工作流表单

一款高效的Vue低代码表单、工作流表单，包含表单设计器和表单渲染器，可视化设计，一键生成源码，享受更多摸鱼时间。

• 拖拽式可视化表单设计；
• 支持PC、Pad、H5三种布局；
• 支持运行时动态加载表单；
• 支持表单复杂交互控制；
• 支持自定义CSS样式；
• 支持自定义校验逻辑；
• 支持国际化多语言；
• 兼容IE 11浏览器；
• 可导出Vue组件、HTML源码；
• 可导出Vue的SFC单文件组件；
• 支持开发自定义组件；
• 支持响应式自适应布局；
• 支持VS Code插件；

或

主页

单列表单

问卷表单

IPad

H5

https://gitee.com/vdpadmin/variant-form

AI驱动的表单自动填写

我们都同意，填写表格是一项枯燥且耗时的任务。如果我们可以创建一个可以为我们填写表格的 AI 助手，让我们将时间投入到更有建设性的任务中，那会怎样？

AI 助手将能够通过调用以表单字段为参数的函数来填写表单。该函数将返回一个 JSON 对象，其中表单字段作为键，值作为要填写的值。

网络上有无数的表单，每个表单都有自己独特的结构和命名约定。直到最近，几乎不可能创建一个可以填写任何表格的通用助手。但随着 LLM 的出现，我们可以创建一个。

在大多数情况下，函数调用允许 LLM 与 API 交互，但绝大多数 Web 应用程序不公开 API，与它们交互的唯一方法是填写表格。

本文的受众

本文适用于想要了解大型语言模型 (LLM)（如 OpenAI 或 Anthropic）“函数调用”功能基础知识的程序员。

函数调用是 LLM 的基本功能，允许创建可以与外部世界交互的专用工具、代理或助手。本文将向你展示如何创建一个可以填写 HTML 表单的简单 AI 助手。

你将学到什么

通过为 LLM 提供函数签名的定义来启用函数调用。函数签名是函数预期输入属性的描述。

你将学习如何创建动态生成的 JSON 模式函数签名，允许 AI 助手与 HTML 表单交互。

JSON 模式是定义和验证 JSON 对象结构的强大工具。出于教育目的，将不使用任何外部库，只使用纯 JavaScript 代码。

表单可能彼此非常不同，但它们都是使用输入字段、文本区域、复选框、单选按钮等常见元素构建的。

我们将仅讨论脚本中最重要的部分。完整脚本可在此处找到。

首先，我们需要识别表单元素及其类型。无论元素类型如何，每个元素都应该有一个 name属性，该属性稍后将用作 JSON 对象中的键。

对于每种元素类型，我们将创建一个函数，该函数将返回定义元素的 JSON 模式片段。JSON 模式应包含元素用途的描述。

这对于 LLM 了解元素的用途或预期值非常有用。描述的文本将从元素的标签或占位符属性中收集。

每个元素的 Json 模式属性至少包含：

• name：元素的名称
• type：元素类型，通常是字符串
• description：元素描述

然后我们可以根据元素类型拥有更多附加字段。例如，对于输入元素，我们可以有最小、最大、模式和必填字段。

对于选择元素、单选或复选框元素，我们还添加了包含所有可能值的枚举字段。特定的复选框和单选元素应该以特殊方式处理，因为它们可以具有与一个名称相关的多个值选项。

现在我们来到最重要的函数，它将使用所有可用的函数为每个表单生成模式。

此函数扫描表单中的所有输入元素并为每个元素创建一个架构。它按名称对复选框和单选按钮进行分组，并为每个组创建一个架构。最后，它创建一个包含所有表单元素的 JSON 架构。

在这里，我们定义了一个将调用 OpenAI chat completitions API 的函数。我们提供模型名称（在本例中为“gpt-4o”，这保证了函数调用的良好结果）和 API 密钥，同时我们将“温度”设置为 0 以获得确定性结果。

最后，我们可以向 OpenAI API 提交请求，并用响应填写表单。我们利用“工具”功能提供生成的模式。在这里，我们使用“自动”工具选择让 OpenAI 选择最适合该工作的工具。

我们将要填写在表单中的数据作为消息提供给 AI 助手，使用非常简单的提示调用 fillup_form，其中包含以下数据： \\n${data}。

我们可以以类似的方式调用 Anthropic API，而不是 openAi。

上述函数返回来自 OpenAI API 的响应，其中对象将表单字段映射到要填写的值。然后我们调用 fillForm 函数用响应填充表单。瞧！表单已填写。

可以通过添加更多高级功能（如处理文件上传、处理动态表单等）进一步改进此脚本。可能的进一步发展：

• 浏览器扩展将根据存储的配置文件自动填写页面上的表单。
• 可以创建 AI 代理来代表我们填写表单。
• 可以创建自动数据输入工具，该工具将根据数据库或任何其他来源的数据填写表单。
• 在需要保护隐私的情况下，使用 LLM 生成虚假数据。
• 我们可以使用一些持久层扩展脚本以存储填充的值，以便将来使用它们。

如果表单非常复杂且包含大量字段，请将表单拆分为较小的部分（字段集）并分别填写。

此脚本应该适用于大多数表单。但是，如果表单是动态的（某些表单元素在用户输入时会更改或激活）或使用一些高级功能（如文件上传）或以非标准或错误的方式构建，它可能无法按预期工作。在这种情况下，你可能需要调整脚本以处理这些情况。

原文链接：

自己写插件-实现时间戳自由

受这篇文章《人人都能手写的chrome插件，帮我省了1000多块钱》启发，再加自己空闲时间学了一些前端的皮毛，以及实际工作需求，多种契机决定自己动手完成一个时间戳转换的谷歌插件。

参考平常使用最高频的一个插件。它最提效的使用方式是在日志中选择一段字符串，然后右键选择用插件打开就可直接展示出格式化之后的数据。省略了复制数据-找网站-粘贴数据的中间流程。因此，要做的这个插件也应该做到选中时间格式的字符串然后用插件打开直接完成转换，且支持输入完成转换。

对于服务端测试来说，经常使用的场景是a、比对页面上的时间信息和MQ中的时间戳是否一致，b、把当前时间转成时间戳造数。除此之外，根据时间戳保存的不同精度，还可分为秒级和毫秒级。因此此插件应该具备的基本功能为秒级、毫秒级时间戳和年月日时分秒之间的转换。

基于文章的提示，先建一个文件夹以及四个文件（ manifest.json-必有、background.js、popup.html、popup.js）。其中 manifest.json 和 background.js 主要设置插件在浏览器层的行为，比如定义插件的名字、描述、以及右键出现插件菜单等。popup.html 和 popup.js 主要定义插件页面的功能。浏览器和插件通过 background.js 和 popup.js 之间通信完成。



根据谷歌要求，此文件必须有，是插件的清单文件。包含了插件的基本信息，如插件的名称、版本、版本号等。其中，manifest_version、name、version又是必不可少的。其中需要注意，新版本谷歌浏览器只支持manifest_version=3。



background.js 主要定义插件的行为，比如捕捉选中的文本、在浏览器右键可以出现插件的选项，以及点击插件之后出现插件的页面popup。调试过程中发现使用 chrome.action.openPopup() 弹出窗口会报错，因此采用chrome.runtime.getURL(\”popup.html\”)。

popup.html为插件弹出展示的页面，其中设计了一个input框+按钮，支持用户粘贴字符串进行转换。而result的div内容，主要展示转换后的数据。基于谷歌的安全管控，不能给按钮添加监听事件，而是在通信函数中处理。



popup.js主要处理插件的交互逻辑，以及与background.js的通信。其中document.addEventListener（）负责当DOMContentLoaded事件发生时，执行传入的函数（第二个参数）。这里是当页面加载时，就完成传入文本的转换并展示，以及按钮点击时的处理。

浏览器设置-扩展程序-打开开发者模式-加载已解压的扩展程序-选择插件文件夹。

接下来就可以在浏览器上直接使用，如果涉及到改动代码，可以直接刷新重新加载，不必移除。当出现问题时，【移除】按钮旁边会有报错信息。

根据这个小小的实例，可以掌握浏览器与插件信息传输以及使用的方式，非常适合想要写插件但不知道从何下手的uu。

下一步则会优化一下页面交互和展示，比如增加复制按钮、美观性提升、以及在使用过程中发现的其他问题。

如果有其他的想法欢迎交流。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com