大模型快速实现python3+html内容在线渲染

需求:

有一份数据需要通过前端在线展示给用户,不需要复杂的样式交互,后端服务是基于Python3实现的API接口,对前端技术不是很了解,需要快速实现该需求。类似样式即可:

思路:

如果页面不复杂,想要快速实现页面的渲染,可以通过html文件来实现,具体的html文件内容可以通过写prompt调大模型生成,然后通过一个在线API访问即可,接口开发可以使用Python3完成,比如Flask。

实践:

直接使用ChatGPT或者文心一言即可,prompt示例如下:

注:大模型生成结果可能存在不确定性,可以简单结合实际情况调整prompt。

你是一个资深的python3开发工程师,当前有一个API返回的结果格式示例如下: {
    "data": {
        "items": [
            {
                "abilityName": "OPENTESTING_ROBOT",
                "abilityInfo": "opentesting企业机器人",
                "creator": "zhangsan"
            },
            {    
                "abilityName": "AI_PERF",
                "abilityInfo": "AI性能测试",
                "creator": "lisi"
            }
        ]
    }
},现在你帮我使用一个html静态网页表格渲染,各个列分别取items中的值,按照第一列默认排序即可,自动换行,给出完整的前端代码,整体样式尽可能美观一点,可以带一些不同的颜色,最后通过python3 flask开发接口传递数据,以及访问html文件,给出完整的代码。

大模型回答结果:

以ChaGpt 3.5为例,完整生成的内容如下,也可以直接参考分享链接。

以下是一个简单的Python Flask应用,它提供一个API来获取给定格式的数据,并通过HTML表格渲染数据。

首先,确保你已经安装了Flask和Jinja2。你可以使用以下命令安装它们:

pip install flask jinja2

然后,创建一个名为 app.py 的Python文件,并将以下代码复制粘贴进去:

from flask import Flask, render_template

app = Flask(__name__)

# 模拟API返回的数据
data = {
    "data": {
        "items": [
            {
                "abilityName": "OPENTESTING_ROBOT",
                "abilityInfo": "opentesting企业机器人",
                "creator": "zhangsan"
            },
            {
                "abilityName": "AI_PERF",
                "abilityInfo": "AI性能测试",
                "creator": "lisi"
            }
        ]
    }
}

@app.route('/')
def index():
    items = data["data"]["items"]
    return render_template('index.html', items=items)

if __name__ == '__main__':
    app.run(debug=True)

接下来,在同一目录下创建一个名为 templates 的文件夹,并在其中创建一个名为 index.html 的HTML文件。将以下代码复制粘贴到 index.html 文件中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API数据展示</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>API数据展示</h2>
    <table>
        <thead>
            <tr>
                <th>能力名称</th>
                <th>能力信息</th>
                <th>创建者</th>
            </tr>
        </thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td>{{ item['abilityName'] }}</td>
                <td>{{ item['abilityInfo'] }}</td>
                <td>{{ item['creator'] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

在命令行中运行 app.py 文件:

python app.py

然后在浏览器中访问 http://127.0.0.1:5000/,你将看到渲染了API返回的数据的HTML表格页面。效果如下,可以看到基本上可以直接使用

优化:

上文的prompt只是简单的描述了我们的需求,基本都是白话,可能大模型不能理解所有内容,因而最后生成的答案可能距离我们理想的还有差距,其实也没有关系,我们可以继续提问,比如我们觉得演示不够美观,继续提问:

表格样式美观一点,表头第一行可以用一些其它的颜色,第一列使用默认方式排序。

具体不再赘述,基本可以通过优化prompt或者连续引导提问来满足常规的需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/432842.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】深入解析日志系统:undo log、redo log、bin log

文章目录 前言1、undo log1.1、undo log 是什么1.2、事务回滚 2、redo log2.1、redo log 是什么2.2、redo log 刷盘2.3、redo log 硬盘文件 3、bin log3.1、bin log 是什么3.2、bin log 和 redo log 区别3.3、bin log 刷盘3.4、两阶段提交 前言 MySQL数据库提供了功能强大的日…

一文了解74HCT14D的引脚图、符号、封装、数据手册及应用

74HCT14D 是一款采用硅栅 C2MOS 技术制造的高速 CMOS 施密特逆变器。它实现了类似于等效 LSTTL 的高速操作&#xff0c;同时保持 CMOS 的低功耗。该器件可用作电平转换器&#xff0c;用于将 TTL 或 NMOS 连接到高速 CMOS。 输入与 TTL、NMOS 和 CMOS 输出电压电平兼容。所有输入…

CSS实现选中卡片样式操作

图一默认自动选中&#xff0c;并且不可取消选中&#xff0c;当选择其他卡片才可点击下一步 在 “ src/assets ” 路径下存放 save.png&#xff0c;代表选中的状态 <div class"cards"><ul class"container"><li v-for"image in image…

今天BOSS约了个面试,HR直接发我一道面试题

前言 在电商、外卖、预约服务等场景中&#xff0c;订单超时自动取消是一个常见的业务需求。这一功能不仅提高了系统的自动化程度&#xff0c;还为用户提供了更好的体验。需求如下&#xff1a; TODO如果用户在生成订单后一定时间未支付&#xff0c;则系统自动取消订单。接下来…

大路灯哪个品牌好用?5款超火大路灯推荐,帮你全面了解大路灯!

大路灯是一种用于提供良好照明环境的电器&#xff0c;通过专业的技术&#xff0c;将光线用过折射、反射、过滤&#xff0c;最终呈现柔和明亮的光线。但市面上的大路灯琳琅满目&#xff0c;有些大路灯存在虚标数据和配置的问题&#xff0c;夸大宣传过后导致很多人入手&#xff0…

Android中的传感器类型和接口名称

本文将介绍传感器坐标轴、基础传感器和复合传感器&#xff08;动作传感器、姿势传感器、未校准传感器和互动传感器&#xff09;。 1. 传感器坐标轴 许多传感器的传感器事件值在相对于设备静止的特定坐标系中表示。 1.1 移动设备坐标轴 Sensor API 仅与屏幕的自然方向相关&a…

leetcode:88. 合并两个有序数组

原题地址&#xff1a;https://leetcode.cn/problems/merge-sorted-array/description/ 题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&a…

VSCode安装

前言 Visual Studio Code 是一个轻量级功能强大的源代码编辑器&#xff0c;支持语法高亮、代码自动补全&#xff08;又称 IntelliSense&#xff09;、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对…

网络原理初识(1)

目录 一、网络发展史 1、独立模式 2、网络互联 3、局域网LAN 局域网组建的方式 1、基于网线直连 2、基于集线器组建 3、基于交换机组建 4、基于交换机和路由器组建 4、广域网WAN 二、网络通信基础 1、IP地址 2、端口号 3、认识协议 4、五元组 一、网络发展史 1、独立模式 …

rabbitmq3

指定通过通道将消息发送给哪个消息队列 同一个通道可以向不同的队列发送消息的&#xff0c;如果你绑定的队列和发布消息的队列不一致也是可以的&#xff0c;这个才是真正的发布消息去具体的某一个队列&#xff1a; 如果队列没有持久化&#xff0c;就不会把这个消息队列保存在磁…

对象得定义与使用(动力节点老杜)

对象思想 1.什么是面向过程&#xff0c;什么是面向对象&#xff1f; 换而言之&#xff0c;面向对象思想实际就是将整体分成一个个独立的单元&#xff0c;每个单元都有自己得任务和属性&#xff0c;所有单元结合在一起完成一个整体。如果某个单元出现了问题还可以及时处理&…

微软研究深度报告:Sora文转视频AI模型全景剖析及未来展望

论文由微软研究团队撰写&#xff0c;这篇论文深入探讨了Sora的发展背景、核心技术、新兴应用场景、现有的局限性以及未来的发展机会&#xff0c;基于公开资料和团队自行进行的逆向工程分析。文中详尽且逻辑清晰&#xff0c;建议细读全文以获得深入了解。 原文&#xff1a;Sora…

nginx生成自签名SSL证书

备注&#xff1a;nginx自生成的ssl证书在浏览器访问时会提示此证书不受信用 1.安装nginx nginx必须有"--with-http_ssl_module"模块 查看nginx安装的模块&#xff1a; [rootmaster1 key]# nginx -V nginx version: nginx/1.24.0 built by gcc 4.8.5 20150623 (Red …

Python图像处理之光斑分析

文章目录 质心目标截取光斑半径 python图像处理教程&#xff1a;初步&#x1f4f7;插值变换&#x1f4f7;形态学处理&#x1f4f7;滤波 光斑是工程中经常出现的图像数据&#xff0c;其特点是目标明确&#xff0c;分布清晰。对光斑图像的分析&#xff0c;主要包括质心定位、目标…

【Android】反编译与预防被反编译

近期在开发一款软件时&#xff0c;遇上了加密、解密数据方面的一些技术问题无法攻克&#xff0c;于是抱着试试看的态度使用 jadx-gui 工具进行反编译一下。哎&#xff0c;居然还成功了&#xff0c;更骚的是&#xff0c;这一款App没有对应用进行混淆、加密、加固&#xff0c;没多…

【学习笔记】卫星基础知识

一、什么是卫星以及它如何工作&#xff1f; 通信卫星是一种人造卫星&#xff0c;通过使用转发器在源和接收器之间中继和放大无线电电信信号。卫星的工作原理是接收从地球发送的无线电信号并将无线电信号重新发送回地球。卫星使用从大型太阳能电池阵列收集的太阳能&#xff0c;…

2.Rust变量

变量的声明 let关键字 在Rust中变量必须要先声明才能使用&#xff0c;let关键字用于声明变量并将一个值绑定到该变量上。如下: fn main() {let var_name:i32 123123;println!("{}",var_name) //println! 是一个宏&#xff08;macros&#xff09;&#xff0c;可以…

Java 简单模拟银行存取钱

模拟银行存取钱 一、实验任务 在银行办理业务时&#xff0c;通常银行会开多个窗口&#xff0c;客户排队等候&#xff0c;窗口办理完业务&#xff0c;会呼叫下一个用户办理业务。本实验要求编写一个程序模拟银行存取钱业务办理。假如有两个用户在存取钱&#xff0c;两个用户分别…

记事本怎么导入Excel文件 记事本数据导入Excel方法

在日常生活中&#xff0c;记事本软件已经成为了我不可或缺的助手&#xff0c;帮助我记录着点点滴滴&#xff0c;释放了大脑的负担。然而&#xff0c;随着时间的推移&#xff0c;记事本里的内容越来越多&#xff0c;如何高效地整理这些数据成为了一个新的问题。特别是当我需要将…

创建Net8WebApi自动创建OpenApi集成swagger

问题&#xff1a;用Net8创建WebAPI时勾选启动OpenAPI&#xff0c;项目自动集成了Swagger&#xff0c;但是接口注释没有展示&#xff1f; 解决&#xff1a; 1.需要生成Api项目的XML文件。操作如下&#xff1a; 2.生成XML文件后&#xff0c;还需要在启动类Program.cs里面配置Sw…