大模型快速实现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,一经查实,立即删除!

相关文章

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

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

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

生物能源wordpress外贸公司模板 生物能源wordpress外贸公司模板&#xff0c;生物能源、生物化工行业外贸公司网站模板。 https://www.jianzhanpress.com/?p3649 汽车配件wordpress外贸网站模板 汽车配件wordpress外贸网站模板&#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…

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

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

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

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

大模型产业落地,安全运营能否迎来“自动驾驶”时刻?

科技云报道原创。 通过一段文字描述&#xff0c;就能生成60秒堪比大片的视频&#xff0c;来自大模型Sora的出色表现&#xff0c;让全球都为之震撼。 无论是ChatGPT还是Sora&#xff0c;都只是大模型走出实验室的第一步&#xff0c;大模型如何在产业中落地&#xff0c;为具体的…

华为CSS堆叠技术介绍与实现

厦门微思网络​​​​​​https://www.xmws.cn 华为认证\华为HCIA-Datacom\华为HCIP-Datacom\华为HCIE-Datacom Linux\RHCE\RHCE 9.0\RHCA\ Oracle OCP\CKA\K8S\ CISP\CISSP\PMP\ ​ 什么是CSS&#xff1f; CSS交换机系统CSS&#xff08;Cluster Switch System&#xff09;&am…

【解决(几乎)任何机器学习问题】:交叉验证

在上⼀章中&#xff0c;我们没有建⽴任何模型。原因很简单&#xff0c;在创建任何⼀种机器学习模型之前&#xff0c;我们必须知道什么是交叉检验&#xff0c;以及如何根据数据集选择最佳交叉检验数据集。 那么&#xff0c;什么是 交叉检验 &#xff0c;我们为什么要关注它&…

云原生基础知识:容器技术的历史

容器化的定义&#xff1a; 容器化是一种轻量级的虚拟化技术&#xff0c;将应用程序及其所有依赖项&#xff08;包括运行时、系统工具、系统库等&#xff09;打包到一个称为容器的单独单元中。容器提供了一种隔离的执行环境&#xff0c;使得应用程序可以在不同的环境中运行&…

【机器人学导论笔记】四、操作臂逆运动学

4.1 本章任务 本章是将思路逆转过来&#xff0c;已知机械臂的位置和姿态&#xff0c;计算关节角&#xff0c;由此即为逆运动学。 这个任务可以分为两个小问&#xff1a;第一&#xff0c;进行坐标系变换&#xff0c;求出相对于基坐标系&#xff5b;B&#xff5d;的腕部坐标系&…

Day37 socket、TCP、UDP

socket类型 流式套接字(SOCK_STREAM) TCP 提供了一个面向连接、可靠的数据传输服务&#xff0c;数据无差错、无重复的发送且按发送顺序接收。内设置流量控制&#xff0c;避免数据流淹没慢的接收方。数据被看作是字节流&#xff0c;无长度限制。 数据报套接字(SOCK_DGRAM) UD…

【设计模式 04】建造者模式

如果要构建的对象很复杂&#xff0c;那么可以将整个构建过程拆分成多个步骤&#xff0c;并为每一个步骤定义一个抽象的接口。并添加一个指导者用来控制构建产品的顺序和步骤。 Java实现&#xff1a; // 产品类 class Product {private String part1;private String part2;pub…

Node.js 最佳实践:改善你的应用程序设计 | 开源日报 No.191

goldbergyoni/nodebestpractices Stars: 92.4k License: CC-BY-SA-4.0 Node.js Best Practices 是一个关于 Node.js 最佳实践的开源项目。该项目汇总了许多顶级内容&#xff0c;包括 80 多个最佳实践、样式指南和架构技巧。以下是该项目的核心优势和主要功能&#xff1a; 提供…

每日一题-合成两个有序链表

&#x1f308;个人主页: 会编辑的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” 以上是题目信息&#xff1a; 下面是解答过程 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ typedef struct Lis…

Redis6 搭建主从集群架构

文章目录 搭建Redis主从集群架构1.集群结构2.准备实例和配置3.启动4.开启主从关系5.测试 搭建Redis主从集群架构 安装部署单机版Redis6可参考&#xff1a; 安装部署单机版Redis6 1.集群结构 我们搭建的主从集群结构如图&#xff1a; 我们计划是在一台虚拟机里去部署三个R…