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

这篇具有很好参考价值的文章主要介绍了用ChatGPT+Copilot一小时开发一套监控系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

本文介绍了人工智能ChatGPT在快速生成代码方面的应用,以及当前AI从专业客户走向大众、从特定领域走向通用领域、从后台走向前台和人的直接交互等趋势。文中展示了一些场景下AI助手的应用案例,包括辅助查找视频资料、整理出视频摘要、使用微软的new Bing快速获取高精度内容等。随后,介绍了通过ChatGPT生成程序的方法,包括编写截屏程序和编写fastapi服务。最后,文中针对问题进行了详细的解答。

背景

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

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

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

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

效果图:

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

chatgpt co,人工智能

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

事前准备

chatgpt co,人工智能

问ChatGPT的问题

①写终端的截屏程序

问题:

帮我用python写一个程序。该程序可以每隔5分钟截取windows桌面的图片,并通过post方法传输出去。

补充问题:

  1. 根据这个生产截屏的python程序,再重写一下fastapi的服务
  2. 帮我根据上面的upload_image接口改造对应的一开始截屏程序的请求参数
import time
import requests
from PIL import ImageGrab
import socket
from datetime import datetime

hostname = 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)
②写服务端

问题:

然后再用fastapi写一个服务。首先我有一个配置文件,用来管理几十台设备,这个配置文件里含有每台设备的name。然后构建一个post接口,用来接收post请求,接收的内容是一张图片,接收成功后将图片保存到本地的capture文件夹中,并将图片再生成一张宽度为400的缩略图,保持宽高比不变。再构建一个get接口,当接收到get请求后,将capture文件夹下所有的缩略图返回。最后再构建一个get接口,请求参数是name,capture下图片文件名是name的原始图片返回。

补充问题:

  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 Path


app = FastAPI()

# 2、声明一个 源 列表;重点:要包含跨域的客户端 源
origins = ["*", "./*"]

# 3、配置 CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 允许访问的源
    allow_credentials=True,  # 支持 cookie
    allow_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 folder
    file_path = f"./capture/{name}{updateTime}.png"
    delete_if_exist(name)
    with open(file_path, "wb") as f:
        f.write(await image.read())

    # generate thumbnail
    from PIL import Image
    img = Image.open(file_path)
    width, height = img.size
    thumbnail_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}


③写用户端

问题:

接着我要用html写一个静态页面,该页面使用Materialize这个样式库。整个页面每隔5分钟请求上面的get_images接口获取所有的缩略图,和每个缩略图的名称,将这些图片放到页面上的grid里,整个grid每行有6格,每个格子里上面有一行标题代表缩略图的名称,下面显示缩略图。如果点击缩略图的话,请求上面的/get_image/{name}接口,获取原图,然后弹窗显示

补充问题:

  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://www.toymoban.com/news/detail-800631.html

到了这里,关于用ChatGPT+Copilot一小时开发一套监控系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 1+X 云计算运维与开发(中级)案例实战——Zabbix分布式监控系统

    学而不思则罔,思而不学则殆。 IP 主机名 节点 192.168.200.10/24 zabbix-server Server节点 192.168.200.20/24 zabbix-agent Agent节点 这个实验非常简单,就是最基本的配置yum源,安装,修改配置文件,启动,然后在图形化界面操作。 1.配置yum源 2.安装服务 [ server节点 : lamp+zabbix-server] [ agent节点

    2024年02月04日
    浏览(54)
  • 系统资源监控-Windows自带资源监控

    在性能测试过程中,往往需要对系统应用服务器,数据库服务器等服务端资源使用情况进行监控,以获取服务器性能数据,协助判断服务器性能是否满足性能需求;对于不同的服务器类型,监控服务器的方式也不尽相同,本篇我们主要来讲解对于Winsows 系的服务器的资源数据

    2024年02月09日
    浏览(48)
  • 云原生监控系统Prometheus:基于Prometheus构建智能化监控告警系统

    目录 一、理论 1.Promethues简介 2.监控告警系统设计思路 3.Prometheus监控体系 4.Prometheus时间序列数据 5.Prometheus的生态组件 6.Prometheus工作原理 7.Prometheus监控内容 8.部署Prometheus 9.部署Exporters 10.部署Grafana进行展示 二、实验 1.部署Prometheus 2.部署Exporters 2.监控远程MySQL 3.部署Grafana进行

    2024年02月07日
    浏览(46)
  • 智能安防系统-视频监控系统

    一、智能安防系统 1、智能安防系统介绍 安全防范系统成为了智慧城市与物联网行业应用中的一个非常重要的子系统。 安防系统主要包括:视频监控系统、入侵报警系统、出入口控制系统、电子巡查系统以及智能停车场管理系统等5个子系统。 AI人工智能安防系统功能:基于

    2024年02月03日
    浏览(52)
  • 系统性能监控-Windows自带性能监控器

    在性能测试过程中,往往需要对系统应用服务器,数据库服务器等服务端资源使用情况进行监控,以获取服务器性能数据,协助判断服务器性能是否满足性能需求;对于不同的服务器类型,监控服务器的方式也不尽相同,本篇我们主要来讲解对于Winsows 系的服务器的性能数据

    2024年02月10日
    浏览(43)
  • 【监控系统】Promethus监控SpringBoot微服务应用配置实战

    我们本节要实现的是Java服务级监控用于对每个应用占用的内存、线程池的线程数量、restful调用数量和响应时间、JVM状态、GC信息等进行监控,并可将指标信息同步至Prometheus中集中展示和报警。 首先我们先了解下什么是actuator? Spring Boot Actuator 模块提供了生产级别的功能,比

    2024年02月16日
    浏览(48)
  • 【微服务治理之监控APM】系统监控架构概述

    APM 通常认为是 Application Performance Management 的简写,它主要有三个方面的内容,分别是 Logs(日志)、 Traces(链路追踪) Metrics(报表统计)。 以后大家接触任何一个 APM 系统的时候,都可以从这三个方面去分析它到底是什么样的一个系统。Metrics可以用于服务告警,Tracing 和 Logging 用于

    2024年02月07日
    浏览(55)
  • 运维监控系统PIGOSS BSM 业务监控 大屏展现解析

            “业务大屏”是 PIGOSS BSM(IT运维监控工具)的特色功能之一,旨在提供综合而直观的业务监控视图。该功能主要由三个组成部分构成:业务健康度雷达图、业务状态矩阵和多趋势对比图。         下面将对每个部分进行详细介绍: 业务健康度雷达图: 业务健

    2024年02月09日
    浏览(91)
  • 分布式监控之Zabbix6.0监控系统一

    作为一个运维,需要会使用监控系统查看服务器系统性能、应用服务状态和网站流量指标等,利用监控系统的数据去了解网站上线发布的结果和健康状态。 利用一个优秀的监控软件,我们可以: 通过一个友好的界面进行浏览整个网站所有的服务器状态 可以在web前端方便的监

    2024年02月12日
    浏览(56)
  • linux系统zabbix监控分布式监控的部署

    zabbix server端监控到大量zabbix agent端,这样会使zabbix server端压力过大,使用zabbix proxy进行分布式监控 安装工具 安装mysql 导入数据结构 配置proxy端 浏览器配置 这个时候创建主机就可以选择proxy端 选择刚刚创建的agent代理程序

    2024年02月20日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包