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

3分钟基于Chat GPT完成工作中的小程序

news 2026/2/10 5:21:53

1. 写在前面

GPT自从去年爆发以来，各大公司在大模型方面持续发力，行业大模型也如雨后春笋一般发展迅速，日常工作中比较多的应用场景还是问答模式，作为写程序的辅助也偶尔使用。今天看到一篇翻译的博客“我用 ChatGPT，在 120 秒内做了一个飞机观测器！”_CSDN资讯的博客-CSDN博客

博客内容大致：Chat GPT写一个HTML，用户给定自己的坐标，可以实时接收飞过头顶的飞机信息。PlaneSpotter - Flight Notifier

既然可以这样，那......发挥想象

本文利用免费的GPT 3.5

2. 抠图小程序

工作中做PPT经常需要透明底的图片，所以也收藏了一些图片处理网站，但是使用的时候，要么扫码关注公众号、要么注册用户......神烦

当然也有不错的去背景网站，例如Remove Background from Image, Free HD, No Signup - Pixian.AI

但是为什么不利用Chat GPT直接写一个呢？说干就干

提问：将图片白底变成透明底的程序，支持上传图片、下载图片，以单个HTML完成编程

回答：在HTML中，您可以使用HTML5的<input>元素允许用户上传图像，然后使用HTML5 <canvas> 元素和JavaScript来处理图像，将白色背景变为透明。然后，您可以提供下载链接以下载处理后的图像。以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head><title>图片白底变透明</title>
</head>
<body><h1>图片白底变透明</h1><!-- 上传图像的输入 --><input type="file" id="imageInput" accept="image/*" /><!-- 用于显示处理后的图像 --><canvas id="outputCanvas" style="display: none;"></canvas><!-- 下载按钮 --><a id="downloadLink" style="display: none;" download="transparent.png">下载处理后的图像</a><script>// 监听文件上传const imageInput = document.getElementById('imageInput');imageInput.addEventListener('change', function() {const file = imageInput.files[0];if (file) {const reader = new FileReader();reader.onload = function(e) {const img = new Image();img.onload = function() {// 创建Canvas用于图像处理const canvas = document.getElementById('outputCanvas');canvas.width = img.width;canvas.height = img.height;const ctx = canvas.getContext('2d');// 清空Canvasctx.clearRect(0, 0, canvas.width, canvas.height);// 在Canvas上绘制图像ctx.drawImage(img, 0, 0);// 获取图像数据const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 处理图像数据：将白色背景变为透明for (let i = 0; i < imageData.data.length; i += 4) {// 检查像素是否为白色if (imageData.data[i] >= 240 && imageData.data[i + 1] >= 240 && imageData.data[i + 2] >= 240) {// 将白色像素的alpha通道设置为0，即透明imageData.data[i + 3] = 0;}}// 在Canvas上绘制处理后的图像数据ctx.putImageData(imageData, 0, 0);// 显示下载按钮const downloadLink = document.getElementById('downloadLink');downloadLink.href = canvas.toDataURL('image/png');downloadLink.style.display = 'block';};img.src = e.target.result;};reader.readAsDataURL(file);}});</script>
</body>
</html>

这个HTML页面允许用户上传图像，然后将白色背景变为透明，并提供了下载链接以下载处理后的图像。处理过程是通过JavaScript和Canvas API完成的。

步骤：代码复制并保存到HTML文件，打开即用

选择白底图片，试一下效果。原图与效果图对比

因为飞机有阴影，效果一般，再试一次

基本完成了白底--透明底小程序开发，GPT3.5只用了20s就生成了一个可以直接使用的HTML页面程序，赞！

3. 经纬度转换

在GIS软件开发过程中，会经常遇到经纬度格式转换，互联网是有一些在线转换的页面，也很方便，今天不妨再用20s测试一下GPT3.5

提问：完成经纬度格式转换的程序，包含经度、纬度两种格式的输入输出，以HTML单独页面程序完成

回答：以下是一个HTML页面程序，用于将经度和纬度之间的格式进行转换。用户可以输入经度和纬度，并选择要从哪种格式转换到另一种格式。页面会在用户进行转换时显示结果。请注意，这个示例支持将度分秒（DMS）格式转换为十进制度（DD）格式，以及将十进制度格式转换为度分秒格式。

<!DOCTYPE html>
<html>
<head><title>经纬度格式转换</title>
</head>
<body><h1>经纬度格式转换</h1><label for="inputLatitude">输入纬度：</label><input type="text" id="inputLatitude" placeholder="例如：40.7128或40° 42' 46'' N" /><label for="inputLongitude">输入经度：</label><input type="text" id="inputLongitude" placeholder="例如：-74.0060或74° 0' 21'' W" /><label for="formatSelect">选择格式：</label><select id="formatSelect"><option value="ddToDMS">十进制度 (DD) 到 度分秒 (DMS)</option><option value="dmsToDD">度分秒 (DMS) 到 十进制度 (DD)</option></select><button id="convertButton">转换</button><h2>结果：</h2><p id="result"></p><script>document.getElementById('convertButton').addEventListener('click', function() {const inputLatitude = document.getElementById('inputLatitude').value;const inputLongitude = document.getElementById('inputLongitude').value;const formatSelect = document.getElementById('formatSelect').value;const resultElement = document.getElementById('result');if (formatSelect === 'ddToDMS') {const latitudeDMS = ddToDMS(inputLatitude, 'latitude');const longitudeDMS = ddToDMS(inputLongitude, 'longitude');resultElement.innerHTML = `纬度 (DMS): ${latitudeDMS}<br>经度 (DMS): ${longitudeDMS}`;} else if (formatSelect === 'dmsToDD') {const latitudeDD = dmsToDD(inputLatitude, 'latitude');const longitudeDD = dmsToDD(inputLongitude, 'longitude');resultElement.innerHTML = `纬度 (DD): ${latitudeDD}<br>经度 (DD): ${longitudeDD}`;}});// 将十进制度 (DD) 转换为度分秒 (DMS)function ddToDMS(dd, type) {const d = parseInt(dd);const m = parseInt((dd - d) * 60);const s = ((dd - d - m / 60) * 3600).toFixed(2);const direction = (type === 'latitude') ? (dd >= 0 ? 'N' : 'S') : (dd >= 0 ? 'E' : 'W');return `${Math.abs(d)}° ${m}' ${s}'' ${direction}`;}// 将度分秒 (DMS) 转换为十进制度 (DD)function dmsToDD(dms, type) {const regex = /(\d+)°\s?(\d+)'?\s?(\d+(\.\d+)?)''?\s?([NSEW])?/i;const matches = regex.exec(dms);if (matches) {const degrees = parseFloat(matches[1]);const minutes = parseFloat(matches[2]);const seconds = parseFloat(matches[3]);const direction = (type === 'latitude') ? (matches[5] === 'S' ? -1 : 1) : (matches[5] === 'W' ? -1 : 1);return (degrees + minutes / 60 + seconds / 3600) * direction;}return '无效输入';}</script>
</body>
</html>

这个页面允许用户输入纬度和经度，选择要从哪种格式转换到另一种格式，然后点击转换按钮以查看结果。支持的格式包括十进制度 (DD) 和度分秒 (DMS)。根据用户的选择，页面将显示转换后的结果。

步骤：代码复制并保存到HTML文件，打开即用

可以输入两种格式的经纬度，简直完美！

4. 写在后面

GPT的确极大地方便了我们的生活，以后更需要的是人类的想象力。以前很多小伙伴写这些方便的小程序兼职赚钱，没有被同行干掉，被新生事物GPT干掉了，正如之前的方便面被外卖干掉吧！谁还有好的思路的小程序，也可以一起试试。

另外，Chat GPT生成的程序自己也可以进行调优、调参处理，本文没有进行任何代码修改。

感兴趣的小伙伴也可以试试俄罗斯方块等小游戏

相关文章：

3分钟基于Chat GPT完成工作中的小程序

1. 写在前面 GPT自从去年爆发以来&#xff0c;各大公司在大模型方面持续发力&#xff0c;行业大模型也如雨后春笋一般发展迅速&#xff0c;日常工作中比较多的应用场景还是问答模式&#xff0c;作为写程序的辅助也偶尔使用。今天看到一篇翻译的博客“我用 ChatGPT&#xff0c;…...

编程日记 2023/10/10 1:14:08

使用hugo+github搭建免费个人博客

使用hugogithub搭建免费个人博客 前提条件 win11电脑一台电脑安装了git电脑安装了hugogithub账号一个 个人博客本地搭建 初始化一个博客 打开cmd窗口&#xff0c;使用hugo新建一个博客工程 hugo new site blogtest下载主题 主题官网&#xff1a;themes.gohugo.io 在上面…...

编程日记 2023/10/10 1:13:07

打印字节流和字符流

打印字节流和字符流 printStream/ printWriter的构造器和方法都是一样的 package printfile;import java.io.FileOutputStream; import java.io.OutputStream; import java.io.PrintStream; import java.io.PrintWriter; import java.nio.charset.Charset;public class Prin…...

编程日记 2023/10/10 1:10:04

elementplus下载表格为excel格式

安装xlsx npm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz引入xlsx并使用 import XLSX from xlsx;const tableRef ref<any>(null); // 导出为 Excel const exportToExcel () > {// 获取 el-table 的引用tableRef.value tableRef.value || doc…...

编程日记 2023/10/10 1:09:03

聊聊僵尸进程

文章目录 1. 前言1.1 什么是僵尸进程1.2 为什么需要关注僵尸进程 2. 僵尸进程的产生2.2 为什么会产生僵尸进程2.3 举个栗子 3. 僵尸进程的影响3.1 僵尸进程为何会占用系统资源3.2 操作系统如何知道哪个资源需要被释放3.3 什么是进程表3.4 什么是PCB 5. 如何处理僵尸进程4.1 识别…...

编程日记 2023/10/10 1:05:59

stm32的时钟、中断的配置（针对寄存器），一些基础知识

一、学习参考资料 &#xff08;1&#xff09;正点原子的寄存器源码。 &#xff08;2&#xff09;STM32F103最小系统板开发指南-寄存器版本_V1.1&#xff08;正点&#xff09; &#xff08;3&#xff09;STM32F103最小系统板开发指南-库函数版本_V1.1&#xff08;正点&#xff0…...

编程日记 2023/10/10 1:04:57

Vue14 监视属性简写

监视属性简写 当监视属性只有handler时&#xff0c;可以使用简写 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>天气案例_监视属性_简写</title><!-- 引入Vue --><script type"text/javascript&…...

编程日记 2023/10/10 1:03:56

基于docker+Keepalived+Haproxy高可用前后的分离技术

基于dockerKeepalivedHaproxy高可用前后端分离技术 架构图 服务名docker-ip地址docker-keepalived-vip-iphaproxy-01docker-ip自动分配 未指定ip192.168.31.252haproxy-02docker-ip自动分配 未指定ip192.168.31.253 安装haproxy 宿主机ip 192.168.31.254 宿主机keepalived虚…...

编程日记 2023/10/10 1:02:55

安装配置deep learning开发环境

1. 下载安装anacondahttps://www.anaconda.com/download-success vim ~/.condarcchannels: - bioconda - https://mirrors.ustc.edu.cn/anaconda/pkgs/main/ - https://mirrors.ustc.edu.cn/anaconda/cloud/conda-forge/ - https://mirrors.tuna.tsinghua.edu.cn/anaco…...

编程日记 2023/10/10 1:01:53

Docker基础（CentOS 7）

参考资料 hub.docker.com 查看docker官方仓库&#xff0c;需要梯子 Docker命令大全 黑马程序员docker实操教程 &#xff08;黑马讲的真的不错 容器与虚拟机 安装 yum install -y docker Docker服务命令 启动服务 systemctl start docker停止服务 systemctl stop docker重启…...

编程日记 2023/10/10 1:00:52

HTTP的基本格式

HTTP/HTTPS HTTPhttp的协议格式 HTTP 应用层,一方面是需要自定义协议,一方面也会用到一些现成的协议. HTTP协议,就是最常用到的应用层协议. 使用浏览器,打开网站,使用手机app,加载数据,这些过程大概率都是HTTP来支持的 HTTP是一个超文本传输协议, 文本>字符串 超文本>除…...

编程日记 2023/10/10 0:59:51

Qt元对象系统 day5

Qt元对象系统 day5 内存管理 QObject以对象树的形式组织起来&#xff0c;当为一个对象创建子对象时&#xff0c;子对象回自动添加到父对象的children()列表中。父对象拥有子对象所有权&#xff0c;比如父对象可以在自己的析构函数中删除它的孩子对象。使用findChild()或findC…...

编程日记 2023/10/10 0:58:50

【audio】alsa pcm音频路径

文章目录 AML方案音频路径分析dump alsa pcm各个音频路径的原始音频流数据 AML方案音频路径分析 一个Audio Patch用来表示一个或多个source端到一个或多个sink端。这个是从代码的注释翻译来的&#xff0c;大家可以把它比作大坝&#xff0c;可以有好几个入水口和出水口&#xf…...

编程日记 2023/10/10 0:57:49

NLP - 数据预处理 - 文本按句子进行切分

NLP - 数据预处理 - 文本按句子进行切分 文章目录 NLP - 数据预处理 - 文本按句子进行切分一、前言二、环境配置1、安装nltk库2、下载punkt分句器 三、运行程序四、额外补充 一、前言 在学习对数据训练的预处理的时候遇到了一个问题&#xff0c;就是如何将文本按句子切分&#…...

编程日记 2023/10/10 0:56:48

【轻松玩转MacOS】常用软件篇

引言 在本篇文章中&#xff0c;我将介绍如何安装和使用一些常用的软件&#xff0c;如Safari浏览器、邮件、日历、地图等。让我们一起来看看吧&#xff01; 一、Safari浏览器 Safari是MacOS自带的浏览器&#xff0c;具有简洁、快速、安全的特点。 以下是一些Safari浏览器的使…...

编程日记 2023/10/10 0:55:46

Akshare简记

文章目录 基本信息安装Anaconda安装（推荐）Anaconda设置AKShare安装使用AKShare更新数据接口一览数据字典用例Hello WorldMFI指标SMA指标BOLL线指标股市新闻情绪判断市场情绪指标ARBR条件选股回测配对交易策略日线策略计算相近产品基本信息 线上文档：...

编程日记 2023/10/10 0:54:44

Jmeter常用断言之断言持续时间简介

Duration Assertion&#xff1a;断言持续时间。 断言持续时间通常用于做性能测试&#xff0c;一般用于检查HTTP请求的响应时间是否超过预期值。而这个响应时间是性能测试中常关注的一个性能指标。 一、添加断言方式 根据需要可在【测试计划】、【线程组】、【线程请求】下添加…...

编程日记 2023/10/10 0:53:44

C/C++/VS2022/指针/数组 调试出现debug

这个情况就很难受&#xff0c;编译没错&#xff0c;但是运行出现问题了&#xff0c;如果点击中止&#xff08;重试、忽略&#xff09;下一次运行还是会出现&#xff0c;看了显示的大致意思是在数组arry上出现了什么错误&#xff0c;经过检查发现&#xff0c;原来是数组在数入时…...

编程日记 2023/10/10 0:52:42

【设计模式】使用原型模式完成业务中“各种O”的转换

文章目录 1.原型模式概述2.浅拷贝与深拷贝2.1.浅拷贝的实现方式2.2.深拷贝的实现方式 3.结语 1.原型模式概述 原型模式是一种非常简单易懂的模型&#xff0c;在书上的定义是这样的&#xff1a; Specify the kinds of objects to create using a prototypical instance,and cre…...

编程日记 2023/10/10 0:51:41

[C++ 网络协议] IOCP（Input Output Completion Port）

1.什么是IOCP IOCP&#xff08;Input Output Completion Port&#xff09;输入输出完成端口。其实就是基于重叠I/O的一种改进的模型。 重叠I/O具有缺点&#xff1a;重复调用非阻塞模式的accpet函数和以进入alertablewait状态为目的的SleepEx函数会影响程序性能。 而IOCP提供…...

编程日记 2023/10/10 0:50:40

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2026/2/4 0:46:21

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/9/23 9:23:07