用ChatGPT+Copilot一小时开发一套监控系统

套娃：我把下面的内容全部复制给了ChatGPT，让它帮我总结本文内容，它的回答如下： 背景 从去年ChatGPT上线开始就时不时的把玩，不经感叹划时代的通用AI真的就这么诞生了！它的功能实在是太强大了，配合一些工具、准确恰当的提问，真的可以帮你巨大的提升效率。 这次通过ChatGPT，快速生成了适用于三个程序，虽然功能很简单，但是通过 0 Comments

套娃：我把下面的内容全部复制给了ChatGPT，让它帮我总结本文内容，它的回答如下：

背景

从去年ChatGPT上线开始就时不时的把玩，不经感叹划时代的通用AI真的就这么诞生了！它的功能实在是太强大了，配合一些工具、准确恰当的提问，真的可以帮你巨大的提升效率。

  • 这次通过ChatGPT，快速生成了适用于三个程序，虽然功能很简单，但是通过对话，它能很好的帮你生成需要的功能的代码
  • 有了代码，接着就是检查错误，修改参数
  • 配合Copilot，原本100行代码假设需要100分钟，现在一半以上的场景可能只需要按一下Tab键，效率简直炸裂！

介于下面都是问题和代码，先草草来两句总结：

  • 目前AI正在从专业客户走向大众，从特定领域走向通用领域，从后台走向前台和人的直接交互
  • 最近市面上涌现出了多个可用的、效果惊人的AI应用，举个例子：AI向我介绍了一些咨询，我根据咨询查找了一些视频资料，但是视频太长我没时间看，所以将链接发给了AI，AI帮我整理出了summary，summary太长，AI帮我精简出了要点，然后如果有问题的话，AI会根据里面的内容回答我。
  • 微软的new Bing是搜索进化后的新形态
  • 原本人们沉浸在海量内容中，但是有人会困惑于如何快速获取高精度内容，现在有了答案
  • 现在的场景是：顶级AI助手

效果图：

绿色的按钮是设备名称，点击按钮可以弹窗显示缩略图对应的原图

话不多说，先来看一下需求和设计的功能：

事前准备

问ChatGPT的问题

①写终端的截屏程序

问题：

补充问题：

  1. 根据这个生产截屏的python程序，再重写一下fastapi的服务
  2. 帮我根据上面的upload_image接口改造对应的一开始截屏程序的请求参数
import time
import requests
from PIL import ImageGrab
import socket
from datetime import datetimehostname = socket.gethostname()while True:# 截屏img = ImageGrab.grab()  # 截取屏幕截图img.save('screenshot.png')  # 将截图保存到本地data = {'name': hostname,'updateTime': datetime.now().strftime('-%m%d-%H%M')}files = {'image': (open('screenshot.png', 'rb'))}# 发送 POST 请求url = 'http://localhost:8000/upload_image'response = requests.post(url, data=data, files=files)# 处理响应if response.status_code == 200:print('Image uploaded successfully!')else:print('Failed to upload image.')# 休眠 5 分钟time.sleep(300)
②写服务端

问题：

补充问题：

  1. /get_images这个接口是返回所有的缩略图文件，帮忙改一下
  2. 请将/get_image/{name} 路由改为使用base64.b64encode将图片文件转换成Base64编码的字符串
  3. /get_images这个接口改为返回图片，而不是图片名称
  4. 帮我再补一段python代码，判断capture目录下是否有相同name的图片，如果有的话删除
import base64
from fastapi import FastAPI, File, Form, UploadFile
from fastapi.responses import FileResponse
import os
import time
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import JSONResponse
from pathlib import Pathapp = FastAPI()# 2、声明一个 源 列表；重点：要包含跨域的客户端 源
origins = ["*", "./*"]# 3、配置 CORSMiddleware
app.add_middleware(CORSMiddleware,allow_origins=origins,  # 允许访问的源allow_credentials=True,  # 支持 cookieallow_methods=["*"],  # 允许使用的请求方法allow_headers=["*"]  # 允许携带的 Headers
)def delete_if_exist(name):folder_path = "./capture"for file_name in os.listdir(folder_path):if file_name.startswith(name):file_path = os.path.join(folder_path, file_name)os.remove(file_path)@app.post("/upload_image")
async def upload_image(image: UploadFile = File(...), name: str = Form(...), updateTime: str = Form(...)):# save the original image to the capture folderfile_path = f"./capture/{name}{updateTime}.png"delete_if_exist(name)with open(file_path, "wb") as f:f.write(await image.read())# generate thumbnailfrom PIL import Imageimg = Image.open(file_path)width, height = img.sizethumbnail_size = (400, int(height * 400 / width))img.thumbnail(thumbnail_size)thumbnail_path = f"./capture/{name}{updateTime}_thumbnail.png"img.save(thumbnail_path)return {"message": "Image uploaded successfully!"}@app.get("/get_images")
async def get_images():thumbnail_folder = Path("capture")thumbnail_files = thumbnail_folder.glob("*_thumbnail.png")images = []for thumbnail_file in thumbnail_files:with open(thumbnail_file, "rb") as f:thumbnail = base64.b64encode(f.read()).decode("utf-8")image_name = thumbnail_file.stem.replace("_thumbnail", "")images.append({"name": image_name, "thumbnail": thumbnail})return JSONResponse(content=images)@app.get("/get_image/{name}")
def get_image(name: str):# print(f"capture/{name}.png")with open(f"capture/{name}.png", "rb") as f:image_bytes = f.read()base64_bytes = base64.b64encode(image_bytes)base64_string = base64_bytes.decode("utf-8")return {"image": base64_string}
③写用户端

问题：

补充问题：

  1. 再将JavaScript的showImage方法改一下
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>j截屏展示窗</title><!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> --><link rel="stylesheet" href="materialize/css/materialize.min.css"><style>.modal {width: 95%;height: 100%;}</style>
</head><body><div class="container"><!-- <h3>Image Gallery</h3> --><div class="row" id="grid"></div></div><div id="modal" class="modal"><div class="modal-content" id="modal-content"></div><!-- <div class="modal-footer"><a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a></div> --></div><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="materialize/js/materialize.min.js"></script><!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> --><script>function showImage(name) {fetch(`http://localhost:8000/get_image/${name}`).then(response => response.json()).then(data => {var image = document.createElement('img');image.src = "data:image/jpeg;base64," + data.image;var modalContent = document.getElementById("modal-content");modalContent.innerHTML = '';modalContent.appendChild(image);var modalInstance = M.Modal.getInstance(document.getElementById("modal"));modalInstance.open();});}function updateGrid() {fetch('http://localhost:8000/get_images').then(response => response.json()).then(data => {var images = data;var grid = document.getElementById('grid');grid.innerHTML = '';for (var i = 0; i < images.length; i++) {var image = images[i];var col = document.createElement('div');col.classList.add('col', 's12', 'm6', 'l3');var card = document.createElement('div');card.classList.add('card', 'hoverable');var cardImage = document.createElement('div');cardImage.classList.add('card-image');var title = document.createElement('span');title.classList.add('card-title');title.innerText = image.name;var thumbnail = document.createElement('img');thumbnail.classList.add('thumbnail');thumbnail.src = "data:image/jpeg;base64," + image.thumbnail;cardImage.appendChild(title);cardImage.appendChild(thumbnail);card.appendChild(cardImage);var cardAction = document.createElement('div');cardAction.classList.add('card-action');cardAction.style.textAlign = 'center';var link = document.createElement('a');link.classList.add('waves-effect', 'waves-light', 'btn');link.innerText = image.name;link.onclick = (function (name) {return function () {showImage(name);};})(image.name);cardAction.appendChild(link);card.appendChild(cardAction);col.appendChild(card);grid.appendChild(col);}});}$(document).ready(function () {$('.modal').modal();setInterval(updateGrid, 5000);updateGrid();});</script>
</body></html>

Done！

本文链接：https://my.lmcjl.com/post/12268.html

展开阅读全文

相关文章

4 评论

留下您的评论.