大模型快速实现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_templateapp = 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或者连续引导提问来满足常规的需求。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【QT】对比C#的ArrayList,qt中也有自己的通用容器(若有误,恳请直接指出)

在Qt中&#xff0c;可以使用QList或QVariantList来代替C#中的ArrayList。QList是Qt中的一个通用容器类&#xff0c;类似于C#中的List<T>&#xff0c;但它不是类型安全的。另一方面&#xff0c;QVariantList是QList<QVariant>的别名&#xff0c;用于存储可以包含任何…

软件测试实战,Web项目网页bug定位详细分析总结(详全)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、前置条件 1&a…

归并排序

参考链接 排序算法&#xff1a;归并排序【图解代码】_哔哩哔哩_bilibili #include <stdio.h> #include <stdlib.h>// 合并 void merge(int arr[], int tempArr[], int left, int mid, int right) {// 标记左半区第一个未排序的元素int l_pos left;// 标记右半区…

中国制造2035任重道远前途光明wordpress外贸独立站模板

生物能源wordpress外贸公司模板 生物能源wordpress外贸公司模板&#xff0c;生物能源、生物化工行业外贸公司网站模板。 https://www.jianzhanpress.com/?p3649 汽车配件wordpress外贸网站模板 汽车配件wordpress外贸网站模板&#xff0c;汽车零配件外贸公司自建站外贸英文…

2023年甘肃省职业院校技能大赛高职组“信息安全管理与评估”(赛项样卷A)

信息安全管理与评估 第一阶段 网络平台搭建与设备安全防护 目 录 第一阶段竞赛项目试题 3 介绍 3 所需的设备、机械、装置和材料 3 评分方案 3 注意事项 3 项目和任务描述 3 1.网络拓扑图 3 2.IP地址规划表 4 工作任务 5 任务1&#xff1a;网络平台搭建 6 任务2&#xff1a;网…

基于单片机的储油罐液位无线监测系统

摘要: 本设计通过无线通信技术为油田储油罐设计了一款液位测量装置,以STC89C52 单片机为中心控制器,采用超声波测距模块HC-SR04 作为液位测量传感器,选用nRF24L01 无线通信模块对采集到的数据进行实时发送与接收,然后将接收到的数据实时处理后传送到上位机进行显示,达到液…

大创项目技术总结(复试准备)

&#xff08;一&#xff09;项目特色 &#xff08;1&#xff09;AI助力阿尔兹海默症的“老药新用”&#xff1a;“老药新用”目前已成为现在的研究趋势。在我们的项目当中我们使用了LDA文本主题模型的机器学习方法来对相关论文文本数据进行文本挖掘&#xff0c;并使用挖掘结果…

安卓部分手机使用webview加载链接后白屏(Android低版本会出现的问题)

前言 大爷&#xff1a;小伙我这手机怎么打开你们呢这个是白屏什么都不显示。 大娘&#xff1a;小伙我这也是打开你们呢这功能&#xff0c;就是一个白屏什么也没有&#xff0c;你们呢的应用不会有病毒吧。 小伙&#xff1a;我的手机也正常&#xff1b; 同事&#xff1a;我的也正…

【数据结构】堆排序

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解堆排序&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一. 堆的概念二. 堆排序&#xff08;以升序为例&#xff09;三. 代码 一. 堆的概念 如果有一个…

rust入门(1)创建项目

安装 vscode 安装插件 rust-analyzerNative Debug vscode 配置自动格式化代码 settings.json{"editor.defaultFoldingRangeProvider": null,"[rust]": {"editor.defaultFormatter": "rust-lang.rust-analyzer", // Makes the magi…

3. 在Go语言项目中使用Zap日志库

文章目录 一、介绍二、 默认的Go Logger1. 实现Go Logger2. 设置Logger3. 使用Logger4. Logger的运行5. Go Logger的优势和劣势 三、Uber-go Zap1. 为什么选择Uber-go zap2. 安装3. 配置Zap Logger4. 定制logger4.1 将日志写入文件而不是终端4.2 将JSON Encoder更改为普通的Log…

GlusterFS性能调优

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 相关文章&#xff1a; 分布式存储——GlusterFS 关于GlusterFS的卷 GlusterFS—新手陷阱 GlusterFS常用命令集 GlusterFS系…

时间序列-AR MA ARIMA

一、AR模型(自回归) AR探索趋势和周期性 预测依赖于过去的观测值和模型中的参数。模型的阶数 p pp 决定了需要考虑多少个过去时间点的观测值。 求AR模型的阶数 p和参数 ϕ i \phi_i ϕi​ &#xff0c;常常会使用统计方法如最小二乘法、信息准则&#xff08;如AIC、BIC&#xf…

ChatGPT介绍

ChatGPT概述 ChatGPT是一种前沿的大型语言模型&#xff08;Large Language Model, LLM&#xff09;&#xff0c;由人工智能研究组织OpenAI研发并推出。它基于Transformer架构&#xff0c;这是一种在自然语言处理&#xff08;NLP&#xff09;领域取得突破的深度学习方法。通过在…

testvue-common

1bus.js import Vue from vue;// 使用 Event Bus const bus new Vue();export default bus; 2directives.js import Vue from vue;// v-dialogDrag: 弹窗拖拽属性 Vue.directive(dialogDrag, {bind(el, binding, vnode, oldVnode) {const dialogHeaderEl el.querySelect…

安全先行,合规的内外网文件摆渡要重点关注什么?

内外网隔离在政府、军工部门、科研单位等已成为很常见的网络安全建设措施&#xff0c;内外网隔离是一种网络安全措施&#xff0c;用于保护内部网络免受外部网络的攻击和威胁。 内外网隔离的目的在于限制内外网之间的通信和数据交换&#xff0c;但网络隔离后&#xff0c;仍有数据…

JDK8 stream toMap方法介绍

JDK8 List转Map方法&#xff0c;有下3种方法。 toMap(keyMapper, valueMapper); toMap(keyMapper, valueMapper, BinaryOperator<U> mergeFunction); toMap(keyMapper, valueMapper, BinaryOperator<U> mergeFunction, Supplier<M> mapSupplier);keyMapper&a…

2024年(第十届)全国大学生统计建模大赛选题参考(一)

本届大赛主题为“大数据与人工智能时代的统计研究”&#xff0c;参赛队围绕主题自拟题目撰写论文。 1. 大数据分析与处理 研究思路 数据收集&#xff1a;首先确定数据来源&#xff0c;例如社交媒体、企业数据库或公开数据集&#xff0c;并使用爬虫技术或API收集数据。数据预…

少儿编程机器人技术开发公司的创新之路

行业背景&#xff0c;国家政策利好 随着科技的不断发展&#xff0c;少儿编程机器人技术作为一种新兴的教育方式逐渐受到人们的关注。这项技术将编程与机器人技术相结合&#xff0c;通过互动性强、趣味性高的方式&#xff0c;帮助儿童学习编程知识&#xff0c;培养逻辑思维和创…

springboot 下载 Excel 文件的 Controller 层案例

环境 pom.xml 中 springboot版本&#xff1a; <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.15</version></parent>Excel 文件依赖&#xff1a; &l…