在 WebKit 内核的浏览器中，当 input 元素的类型为 "search" 时，通常会显示一个搜索图标在输入框中。这个图标是浏览器内置的默认行为，旨在提供更好的搜索体验。然而，如果你希望移除或修改这个搜索图标，可以采取以下方法： CSS 样式调整：使用 CSS 来调整搜索图标的显示样式。通过使用自定义样式覆盖默认样式，可以隐藏或修改搜索图标的外观。例如，通过设置 background-image 属性为 none，或者通过设置 background 属性为其他图标来替换默认的搜索图标。代码如下 input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; } JavaScript 操作：通过 JavaScript 操作 DOM 元素，可以动态地修改 input 元素的属性来控制搜索图标的显示与隐藏。可以使用 JavaScript 选择器选中输入框，并设置相应的属性来解决多个搜索图标显示的问题。 const searchInput = document.querySelector("input[type='search']"); searchInput.setAttribute("display", "none"); 在 WebKit 内核的浏览器中，当 input 元素的类型为 "search" 时，通常会显示一个搜索图标在输入框中。这个图标是浏览器内置的默认行为，旨在提供更好的搜索体验。然而，如果你希望移除或修改这个搜索图标，可以采取以下方法： CSS 样式调整：使用 CSS 来调整搜索图标的显示样式。通过使用自定义样式覆盖默认样式，可以隐藏或修改搜索图标的外观。例如，通过设置 background-image 属性为 none，或者通过设置 background 属性为其他图标来替换默认的搜索图标。代码如下 input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; } JavaScript 操作：通过 JavaScript 操作 DOM 元素，可以动态地修改 input 元素的属性来控制搜索图标的显示与隐藏。可以使用 JavaScript 选择器选中输入框，并设置相应的属性来解决多个搜索图标显示的问题。 const searchInput = document.querySelector("input[type='search']"); searchInput.setAttribute("display", "none");

一、引子 时光如逝，2023年眨眼已经过去快六分之一了，近来跟同事和朋友聊的时候发现，有小伙伴对未来的发展方向和能力提升方式都有一些迷茫和不知所措，同时跟一些大牛们讨论过如何向上向下汇报、如何推动项目、如何成长，也随之有了一些感悟，借此机会写下来，希望能跟大家能一起探讨探讨。 二、概述 本篇文章的主题是思维变化，即讨论研发人员如何在思维上改变自己的工作和学习习惯从而提升自己的整体水平。 三、思维是什么，对我们有什么影响 思维是人类所具有的高级认识活动。按照信息论的观点，思维是对新输入信息与脑内储存知识经验进行一系列复杂的心智操作过程。分析与综合 是最基本的思维活动。以上来自百度百科哈哈:)。从“思维”两个字中，我们也可以领悟到一些东西，“思”即是思考，比较容易理解，关键在“维”字，“维”有角度、维度的意思。言归正传，对一个码农来说日常的工作就是代码开发，而思维方式会决定我们的代码水平和研发能力的提升。 思维如何影响我们呢，举个经典例子：一家大公司引进了一条肥皂生产线。这条生产线能将肥皂从原材料的加入直到包装装箱自动完成。 但是销售部门反映有的肥皂盒是空的，经理要求工程师们解决这个问题。于是成立一个以几名博士为核心、十几名研究生为骨干的团队。在耗费数十万后,工程师们在生产线上一套X光机和高分辨率监视器,当机器对X光图像进行识别后，一条机械臂会自动将空盒从生产线上拿走。 另外一家乡镇企业也遇到了同样的情况，管理生产线的小工找来一台电风扇，摆在生产线旁。装肥皂的盒子逐一在风扇前通过,只要有空盒子便会被吹离生产线，掉在箩筐里。 [图片] 就从本事例上来说确实一套高科技的检测流程还不如一台电风扇，不同的思维方式导致花费的代价不同。 大家别慌，让我们再换个角度探讨一下，假设我们现在生产的装肥皂的盒子进行了改良更精美也更重了，电风扇吹不动了怎么办；假设我们另一个做罐头的生产线也需要检测罐头里是否有桃子怎么办。 再换个角度看上面的例子，有没有感觉像是我们开发一个很小的项目时，投入了大量的人力物力做了一个apm系统来保障这个小项目的线上正常运行和安排一个同学每天去线上看一眼是不是项目还在正常运行类似，那么大家觉得这个apm系统应该不应该开发？对于这个问题，我们先不着急把答案定下来，看完下面的分析我在再来讨论。 四、研发能力的评判 对于研发的能力，各厂都有自己的职级划分，这里我们举个例子吧(一家之言，大家轻拍) 入门阶段：在他人指导下能够完成比较简单的任务 编码达人：代码的质量和效率都很好，能独立完成任务 独当一面：作为核心骨干能够负责中小型项目的研发管理 技术专家：具备架构设计能力，有实现大型系统的能力 领域专家：行业的领军人物，某个头部系统或者产品的领头人 以上不同的级别对应不同的能力，而我们的成长应该包括两个方面，一个是知识，另一个是思维，两者相辅相成。有了一定的知识会改变我们的思维模式；有了一定的思维模式时，会自动去学习欠缺的知识。知识的学习已经又很多教程了，下面我们先从思维模式上聊一聊。 五、聊聊几种研发中的思维 1、框架思维 软件开发是一种知识活动，因此知识的聚集和积累是至关重要的。框架能够采用一种结构化的方式对某个特定的业务领域进行描述，也就是将这个领域相关的技术以代码、文档、模型等方式固化下来。 2、架构思维 一个系统的运行模式是怎样进行，前后端如何协作、数据如何处理、前端如何展示通用逻辑如何公共和抽象、开发调试部署的流程、功能的可扩展性、服务的稳定性设计、高并发的设计、程序的安全性设计、生态建设等等，我们可以将这些通用的设计从架构层面上进行考虑和实现，而业务开发只需关注业务的逻辑。 3、懒人思维 软件的目标，是某些工作自动化，从而让某些人可以更懒。重复的事情一定不要自己手工重复完成，侧重于自动化。思考如何把这些原来需要很麻烦的事情，自动化执行。比如使用脚手架进行项目的初始化、CI/CD减少项目运维的工作、自动化测试减少测试的工作量。 4、全局思维 任何一个岗位都有其上下游的链接。比如研发的上面有市场，下面有生产。当你写客户软件时，你得站在客户的角度看看方不方便使用、系统稳定不稳定、体验有好不友好；当你设计架构的时候，你得考虑软件工程师方不方便使用；当你设计整个开发流程时，你得考虑团队的效能。更进一步，你的这个技术方案对于公司整体技术方案的适配性怎么样，也应该考虑考虑。 5、系统性的思维 当你在写代码的时候，你很容易就认为只要你按照需求实现了指定的功能，你的代码就写完了。如果想写出真正有影响力的代码，你需要从整个系统去理解你的工作： 1).你的代码和其他人写的代码在功能上是什么关系？ 2).你有没有好好测试你的代码？或者其他人是否很容易测试你的代码？ 3).为了部署你的代码，线上生产环境的代码是不是需要改动？ 4).新的代码会不会影响到已经运行的代码？ 5).在新的功能下，你的目标用户的行为是不是你期望的？ 6).你的代码有没有产生商业上的影响？ 7).你的代码是否兼容老数据？兼容不同的入口场景？ 6、创新思维 是指一种能够激发创造力和创新灵感的思考方式。创新思维通常包括挑战常规思维方式的能力、在问题解决中采用多种不同的角度和方法、发掘新的机会、将不同的元素或概念组合起来以创造新的东西等能力。技术的更新迭代很快、软件产品也越来越多，各行各业、时时刻刻都在有创新，别人创造出来了，我们不学习就会落后，只有保持进步和创新才能不被这个时代所抛弃。   以上总共介绍了6种思维(如有遗漏欢迎补充)，对我们研发来说，如何通过思维上的改变来提升自己的能力呢？  六、能力进阶与思维改变 对于不同阶段的人，进阶的路线也是不一样的，这里我们还是以之前的职级为例，探讨一下如何通过思维的改变来完成能力的进阶，希望能给对自己的成长路线不太明朗的同学有所帮助。 1、假如你是一个加入到码农行业的同学：希望你能有“框架思维”，在稳固基础知识的同时，能够养成良好的思维习惯，做任务前能够了解何种技术可以实现你的需求，完成任务时做好总结并形成文档，反思自己做的好的地方与不好的地方，将解决过程和避坑经验进行归档，方便后来人的查阅和学习，在日益的积累中，你代码的质量和效率都得到很好的提升； 2、假如你是一个编码达人：希望你能有“系统性的思维”，工作中要不断的思考你负责的模块在整个项目中是属于哪部分，你的程序是如何运行，模块之间是如何互相调用的，项目周期的每个阶段需要做那些事情，了解你的角色以及项目负责人的角色需要做哪些事情。日常工作中要以积极的态度去推动项目的进行、遇到技术卡点问题要多从原理层面进行分析。强烈的责任心、良好业务能力、出众的技术能力是你成为项目负责人所不可或缺的因素。 3、假如你已能独当一面：希望你能在日常工作中不仅仅局限于业务的研发，在代码开发的过程中能有“架构思维”。针对需求的实现，要关注：架构设计的是否合理、性能上是否有不必要的浪费、安全漏洞是否有统一解决方案或防御、公共能力的抽象和使用是否合理、核心业务逻辑的流程是否合理、库表设计是否有空间的浪费等等；技术选型上参考以往类似实现怎么做的，是否还适用、是否要有改进、依赖哪些能力等； 4、假如你是一个技术专家：你需要有“全局思维”、“懒人思维”。你已经拥有架构能力，可以设计项目的架构，但与此同时也更需要关注系统的兼容性、数据迁移方案、可拓展性、稳定性，以及架构提供的能力是否可以让开发者不必关注底层基础能力、公共能力而只专注于业务开发；在开发流程上是否可以做到精简，减少项目上线的流程；通过自动化的检测代码安全、逻辑漏洞、文件格式化、测试等提高开发效率保证运行质量；提供的公共化能力是否有相应的文档建设、测试用例、生态能力；完善基建平台的能力，比如监控系统运行情况的apm、实时更新应用配置的配置中心、应用部署运维的平台、公司内部的管理/工具平台等等；产品的功能是否做到了人无我有、人有我优，交互和性能的体验是否做到了行业领尖，如何做到超越；这些都是我们走向行业顶尖所需要的基本能力； 5、“创新思维”具体对我们研发来说怎么理解呢？我先抛个砖：已有的事物，去研究实现的过程，叫学习或者模仿；知道一些技术或理论，去制造未出现的东西，叫创新。创新比较难，相对而言模仿比较简单，因为我们有行业的标准作为参考，比如“小程序”，自从微信有了这个产品之后，大家竞相模仿；但是相反我们会开发native的app却不一定能创新性的开发出“小程序”。不过创新其实无处不在，我举个例子，假设我们学会来使用游戏引擎Cocos，用它我们可以实现一个“小猪挖土豆”(查了下还真没有)的游戏，这个算是一种创新；如果有实力换种实现方式重新写个游戏引擎，这也是一种创新。保持一种思维习惯，说不定哪天突然灵光一闪，就走上人生巅峰了。 最后呢，我们再看下之前说的一个小项目，我们有没有必要花费大量的人力物力去建一个apm系统？这是一个开放的话题，假设的条件不同答案也不相同，但是我相信很多人已经有了自己的想法了。 七、小结： 谈思维是一件很空洞的事情 ，因为思维实在看不见，摸不清。它不像知识，知之为知之，不知为不知。经常听到人说，你说的我都懂，可我就是做不到，这就是一种思维习惯。所以思维不在于你知道还是不知道，而是一个思维惯性，思考问题的时候，多去提醒自己去往这个维度上想一想，时间久了也就成自然了。ps：如有不合适的地方，请指正～

新能源车 号码共8位，组成: 1.省份简称 [代码][京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领] [代码] 2.发牌机关代号字母[代码]A-Z[代码]; 3.序号位有6位数，分为小型车和大型车； 小型车。第1位：仅限字母[代码]ABCDEFGHJK[代码]，第2位字母或者数字，后4位纯数字； [代码][DABCEFGHJK]([A-HJ-NP-Z0-9])[0-9]{4} [代码] 其中[代码]ABCDE[代码]代表纯电动车；[代码]FGHJK[代码]代表插电混动车或燃料电池车。 大型车。前5位纯数字，第6位仅限字母[代码]DF[代码]。 [代码][0-9]{5}[DF] [代码] 正则表达式： [代码][京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DABCEFGHJK]([A-HJ-NP-Z0-9])[0-9]{4})) [代码] 注意：序号位不存在字母I和O防止和1、0混淆; 普通车 组成： 省份简称 + 机关代号字母 + 5位字母或数字; 其中最后一位还包括汉字[代码]挂学警港澳使领[代码] 正则表达式： [代码][京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领] [代码] 代码示例 [代码]function isVehicleNumber(vehicleNumber) { const newReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DABCEFGHJK]([A-HJ-NP-Z0-9])[0-9]{4}))$/ const oldReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]$/ if (vehicleNumber.length === 7) { return oldReg.test(vehicleNumber); } else if (vehicleNumber.length === 8) { return newReg.test(vehicleNumber); // 京AA12345 } else { return false; } } [代码]

本文将向您展示如何使用低代码工具，在30分钟左右搭建一个基于 ChatGPT 的聊天机器人小程序。让拥有OpenAI账号的朋友能随时随地体验ChatGPT，也希望低代码xAI技术普惠更多人。 [图片] ChatGPT最近大火，让原本已经沉寂许久的AI领域再次被唤醒狂欢。但是还是有很多朋友受限于OpenAI对国内用户的限制，无法愉快地体验这项革命性的AIGC技术。 众所周知，ChatGPT 是一个基于 GPT-3 的聊天机器人模型，能够通过分析提问内容生成流畅的自然语言结果，我们除了可以在 OpenAI 的ChatGPT官网上体验，也可以通过调用官方API来获取 ChatGPT 机器人模型进行训练和体验。本文将向您展示如何使用低代码工具，在30分钟左右搭建一个基于 ChatGPT 的聊天机器人小程序。一方面能让拥有OpenAI账号的朋友能随时随地体验ChatGPT；另一方面，也希望通过教程学习搭建出AI聊天小程序，去分享给更多人，把前沿的AI技术普惠到更广泛的群体，一起体验AIGC技术所带来的便利。 我们这次就以腾讯云微搭低代码作为搭建平台，来演示一下应该如何快速开发一个基于ChatGPT的聊天机器人应用，即便是新手开发者也可以试试哦 一、准备工作在开始搭建聊天机器人之前，您需要做以下准备： 微信小程序账号：如果您还没有微信小程序账号，可以在微信公众平台注册（如果没有小程序，也可以发布为移动端H5应用）开通腾讯云微搭低代码：微搭低代码是腾讯云官方推出的一款快速搭建应用的低代码开发工具，可以直接访问腾讯云微搭官网免费开通注册OpenAI账号：OpenAI账号注册也是免费的，不过OpenAI有地域限制，这里网上教程关键词搜索一大把，就不做赘述了。注册成功后，可以登录OpenAI的个人中心来获取[代码]API KEY[代码]本教程适用人群和应用类型： 适用人群：初级开发者（操作门槛较低，有一定技术背景的非开发者也可以体验）应用类型：小程序 或 H5应用（基于微搭一码多端特性，也可以直接发布为Web应用，点击文末链接可体验作者微搭搭建的Web版GPT聊天机器人）二、搭建聊天机器人首先，一个常见的聊天对话机器人应用界面效果，如下图所示： [图片] 通过应用界面可以看到，它主要由如下几个部分组成： 一个对话聊天界面一个API数据查询接口界面UI与后端数据的联动渲染那现在，我们就参照上面的几个模块，正式开始通过微搭低代码工具，分5个步骤来依次拆解搭建： 1.对应用界面进行样式配置[图片] 我们先拖入一个滚动容器和一个普通容器，一个用来展示聊天的上下文对话，一个用来展示输入框和发送按钮。然后依次拖入图中大纲树所示的组件，组件相应的层级关系可以参考上图中的大纲树结构。 接下来针对上述的组件分别进行样式的配置，我们默认使用样式面板的弹性（Flex）布局，包含接收消息和发送消息两个普通容器，可以分别选择样式面板中的弹性布局中的左对齐，如下图所示： [图片] 接着可以分别配置图片和文本两个组件的高度和宽度大小以及内外间距，以达到想要的视觉效果。 完成聊天上下文对话框的样式配置之后，可以进行底部多行输入框和按钮这个普通容器的样式配置，样式配置方式与上面的发送消息容器一样使用弹性布局并选择“平分”的方式布局，如下图所示： [图片] 完成布局配置之后，由于底部输入框按钮等是固定位置的，故需要额外配置一下定位属性，选中底部的“普通容器”，在样式面板底部，做如下配置即可： [图片] 以上，通过进一步微调一些样式细节如组件背景色以及间距等后，即可达到上文提到的应用界面效果了。 可以看到整个页面的配置过程是完全可视化操作的，不需要写一行代码。当然，如果样式配置不是很熟悉，或者有疑问的朋友，也可以等我们的视频教程，手把手教你用微搭低代码来配置AI聊天应用。 2. 配置数据变量和数据源API第2步，开始进行数据的绑定和数据源的配置： a. 新建一个数组对象变量chatList，用于存储聊天记录 [图片] 首先配置一个变量，如命名为chatLlist聊天记录这么一个变量，一个对象数组，默认值为如下所示，当然大家也可以基于这个结构任意修改。 [ { "res": "你好，欢迎体验ChatGPT聊天机器人，你可以直接输入你感兴趣的任何问题向我提问", "req": "红孩儿是牛魔王的亲儿子吗？", "index": 1 }, { "res": "不是，红孩儿是牛魔王的养子。据西游记中的记载，牛魔王是一个孤独的怪物，他在深山里住了很久，没有子女，却有一个养子——红孩儿，红孩儿的父母去世时，牛魔王便收养了他。", "req": "那谁教他的三味真火", "index": 2 } ] 接着把这个数组变量的初始值跟我们的这个页面的内容分别进行绑定。首先我们选择一个父级的普通容器，在属性配置的循环展示绑定为刚刚新建的数组变量。然后在里面的子节点中，如文本组件，分别绑定这个数组中的成员变量，他们的配置如下图所示： [图片] [图片] 这一步数据绑定完成之后，接下来就可以去配置请求远程数据的数据源API了。 b. 配置一个数据源APIs（用于请求Chat GPT接口） API的配置相对比较简单，主要参考OPENAI的官方文档，文档中可以看到文本对话接口对应的请求参数信息如下： curl https://api.openai.com/v1/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer YOUR_API_KEY" \ -d '{"model": "text-davinci-003", "prompt": "Say this is a test", "temperature": 0, "max_tokens": 7}' 分别把上方的CURL请求头信息对应到HTTP的请求中即可，配置项参考如下： [图片] 我们通过数据源中的【方法测试】，得到API的返回结果如下，点击【出参映射】即可完成出参结构的配置： { "id": "cmpl-GERzeJQ4lvqPk8SkZu4XMIuR", "object": "text_completion", "created": 1586839808, "model": "text-davinci:003", "choices": [ { "text": "\n\nThis is indeed a test", "index": 0, "logprobs": null, "finish_reason": "length" } ], "usage": { "prompt_tokens": 5, "completion_tokens": 7, "total_tokens": 12 } } 其中的[代码]API_KEY[代码]是在完成OPENAI账号注册之后，在其个人中心中获取即可，至于OPENAI的账号注册方式，大家动动手搜索一下，网上教程很多就不啰嗦了。 3. 给发送按钮绑定请求事件我们在第1步中已经在页面中放置了输入框、按钮和文本展示等组件。接下来，我们需要给输入框配置相关的事件响应逻辑，来获取用户输入的消息内容，参考的关键配置如下: [图片] 然后，给按钮绑定事件来处理输入框中用户发送的消息，选择按钮组件，在右侧事件面板中配置如下逻辑，即 点击按钮 时触发API请求，并将获取到的API返回结果渲染在页面中。 [图片] 4. 将API返回数据 与 在页面中进行渲染展示第4步，将返回值用“变量赋值”方法加入到chatList数组中 [图片] 这里我们需要在数据中增加一条新的消息，采用表达式绑定的方式进行原有的[代码]ChatList[代码]变量进行解构后再赋值，表达式参考如下： [ ...$page.dataset.state.chatList, { req: $page.dataset.state.text, res: "" } ] 5. 完成开发，进行应用发布前端界面和后端数据逻辑都配置开发完成后，可在应用编辑器的右上角点击“发布”按钮，我们可以选择发布到 已绑定的小程序，也可以直接发布移动端的H5应用，如下所示： [图片] 至此，一个基础的AI聊天机器人应用搭建就完成了。 三、进一步完善基于上述步骤搭建完聊天机器人小程序后，你还可以进一步完善它的功能。 例如，您可以在小程序中添加聊天记录功能，让用户可以查看过往的聊天记录。您也可以使用其他自然语言处理技术；例如语音识别和文本分类，来使聊天机器人更加智能。 如需要存储聊天历史记录的话，可以在数据源中配置一个“聊天历史记录”数据模型，参考模型配置如下： [图片] 总之，使用微搭低代码搭建聊天机器人小程序，对于熟悉低代码或者喜欢钻研能力的朋友来说，确实是一件非常简单而有趣的事情。当然如果确实对界面样式配置不是很熟悉，或者其他有疑问的朋友，也可以关注漫话开发者公众号后续视频教程，手把手教你用微搭低代码来配置AI聊天机器人应用。 通过本教程的介绍，你已经基本熟悉了如何使用微搭低代码快速搭建基于 ChatGPT 的聊天机器人了，有任何疑问也欢迎关注漫话开发者公众号留言。 四、附录Q/A腾讯云微搭低代码平台，连接微信和企微用户，帮助企业快速定制和构建移动协同办公应用，让信息和流程流转更高效。3分钟可视化搭建和发布小程序、H5、Web等多端应用。快速搭建企业专属的业务管理平台，表单流程等办公和管理类应用，提供企业级账号和权限管控等能力。在搭建聊天机器人应用过程中，你可能会遇到一些问题，下面是常见问题的解决方法：i. 机器人无法回复：这可能是因为 ChatGPT 机器人模型无法理解用户的问题。可以尝试使用更加具体的问题，或者尝试使用不同的自然语言处理模型。ii. 机器人回复不流畅：这可能是因为 ChatGPT 机器人模型生成的回复不够流畅或在服务器在境外所致。可以尝试调整模型的「[代码]temperature[代码]」参数，使生成的回复更加流畅。iii. 机器人回复内容不准确：这可能是因为 ChatGPT 机器人模型无法理解用户的问题，或者因为模型没有学习到足够的知识。可以尝试使用更加具体的问题，或者尝试使用不同的自然语言处理模型。iv. 如果遇到其他低代码配置问题，可以尝试在微搭社区或通过网上搜索中寻求帮助。