大模型快速实现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.rhkb.cn/news/273587.html

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

相关文章

开放式高实时高性能PLC控制器解决方案-基于米尔电子STM32MP135

前言 随着工业数字化进程加速与IT/OT深入融合&#xff0c;不断增加的OT核心数据已经逐步成为工业自动化行业的核心资产&#xff0c;而OT层数据具备高实时、高精度、冗余度高、数据量大等等特点&#xff0c;如何获取更加精准的OT数据对数字化进程起到至关重要的作用&#xff0c;…

编译支持国密的抓包工具 WireShark

目录 前言WireShark支持国密的 WireShark小结前言 在上一篇文章支持国密的 Web 服务器中,我们搭建了支持国密的 Web 服务器,但是,我们使用 360 安全浏览器去访问,却出现了错误: 是我们的 Web 服务器没有配置好?在这里插入图片描述还是 360 安全浏览器不支持国密?还是两…

中间件 | Redis - [基本信息]

INDEX 1 常规用法2 QPS3 pipeline 1 常规用法 分布式锁 最常见用法&#xff0c;需要注意分布式锁的redis需要单点 分布式事务 分布式事务中&#xff0c;核心的技术难点其实是分布式事务这个事本身作为数据的持久化 2PC&#xff0c;比如 seata 的 AT 模式下&#xff0c;将 un…

moi3D安装

下载文件双击文件 下一步 同意下一步 下一步 下一步 下一步 安装下一步 完成 破解 将如图中的文件复制到文件目录下 汉化 在目录中进入ui文件夹下 在安装包中找到如下的文件复制到ui目录下 在打开 另存为 另存为时改一下编码格式如图 打开软件 找到如图options进入…

七彩虹八渐变 外贸建站公司wordpress模板

进出口水果wordpress外贸模板 漂亮水果wordpress外贸模板&#xff0c;做水果进出品生意的外贸公司自建站官网模板。 https://www.jianzhanpress.com/?p3516 玩具wordpress外贸模板 简洁玩具wordpress外贸模板&#xff0c;适合做跨境电商外贸公司使用的wordpres外贸s网站主题…

深入探索HAProxy:高性能负载均衡器的奥秘

目录 引言 一、HAProxy基础知识 &#xff08;一&#xff09;HAProxy概述 &#xff08;二&#xff09;核心特性 &#xff08;三&#xff09;支持调度算法 二、安装haproxy &#xff08;一&#xff09;下载源码包 &#xff08;二&#xff09;解决依赖环境 &#xff08;三…

CAP告诉你系统没法做到完美,只能做到权衡和适当

一、CAP介绍 CAP原理&#xff0c;全称为Consistency&#xff08;一致性&#xff09;、Availability&#xff08;可用性&#xff09;和Partition tolerance&#xff08;分区容错性&#xff09;&#xff0c;是分布式系统设计中的基本原理。它强调了在设计分布式系统时&#xff0c…

【Linux】第四十二站:线程局部存储与线程分离

一、线程的局部存储 1.实现多线程 如果我们想创建多线程&#xff0c;我们可以用下面的代码类似去实现 #include <iostream> #include <pthread.h> #include <string> #include <cstdlib> #include <unistd.h> #include <thread> #inclu…

【机器学习】进阶学习:详细解析Sklearn中的MinMaxScaler---原理、应用、源码与注意事项

【机器学习】进阶学习&#xff1a;详细解析Sklearn中的MinMaxScaler—原理、应用、源码与注意事项 这篇文章的质量分达到了97分&#xff0c;虽然满分是100分&#xff0c;但已经相当接近完美了。请您耐心阅读&#xff0c;我相信您一定能从中获得不少宝贵的收获和启发~ &#x1f…

PromptBreeder---针对特定领域演化和发展提示词的方法

原文地址&#xff1a;promptbreeder-evolves-adapts-prompts-for-a-given-domain 论文地址&#xff1a;https://arxiv.org/pdf/2309.16797.pdf 2023 年 10 月 6 日 提示方法分为两大类 硬提示是由人工精心设计的文本提示&#xff0c;包含离散的输入令牌&#xff1b;其缺点…

如何保证 redis 的高并发和高可用?redis 的主从复制原理能介绍一下么?redis 的哨兵原理能介绍一下么?

目录 一、面试官心理分析 二、面试题剖析 1.Redis 主从架构 2.Redis replication 的核心机制 3.Redis 主从复制的核心原理 4.主从复制的断点续传 5.无磁盘化复制 6.过期 key 处理 7.复制的完整流程 8.全量复制 9.增量复制 10.heartbeat 11.异步复制 12.Redis 如何…

鸿蒙OS应用开发之显示图片组件11

前面学习了像素降级处理的方法,这样方便一个图片可以显示在不同大小屏幕的技术,同样不会失真。现在来学习另外一个重要的技术,就是图片处理。图片处理是一个很范的名词,一般来说图片处理都会采用预处理的方法,比如在电脑上采用图形处理软件进行处理,然后再使用到手机的软…

校园小情书微信小程序,社区小程序前后端开源,校园表白墙交友小程序

功能 表白墙卖舍友步数旅行步数排行榜情侣脸漫画脸个人主页私信站内消息今日话题评论点赞收藏 效果图

JS实现chatgpt数据流式回复效果

最近高了一个简单chatgpt对话功功能&#xff0c;回复时希望流式回复&#xff0c;而不是直接显示结果&#xff0c;其实很简单&#xff0c;前端流式读取即可&#xff0c;后端SSE实现流式传输 前端用到fetch获取数据&#xff0c;然后利用reader读取 let requestId parseInt(Ma…

章六、集合(1)—— 概念、API、List 接口及实现类、集合迭代

零、 关闭IDEA调试时自动隐藏空元素 一、 集合的概念 存储一个班学员信息&#xff0c;假定一个班容纳20名学员 当我们需要保存一组一样&#xff08;类型相同&#xff09;的元素的时候&#xff0c;我们应该使用一个容器来存储&#xff0c;数组就是这样一个容器。 数组有什么缺…

CentOS7 利用remi yum源安装php8.1

目录 前言remi yum源remi yum源 支持的操作系统remi yum源 支持的php版本 安装epel源安装remi源安装 php8.1查看php版本查看php-fpm服务启动php-fpm服务查看php-fpm服务运行状态查看php-fpm服务占用的端口查看 php8.1 相关的应用 前言 CentOS Linux release 7.9.2009 (Core) …

GO语言接入支付宝

GO语言接入支付宝 今天就go语言接入支付宝写一个教程 使用如下库&#xff0c;各种接口较为齐全 "github.com/smartwalle/alipay/v3"先简单介绍下加密&#xff1a; 试想&#xff0c;当用户向支付宝付款时&#xff0c;若不进行任何加密&#xff0c;那么黑客就可以任…

机器学习——感知机模型

机器学习系列文章 入门必读:机器学习介绍 文章目录 机器学习系列文章前言1. 感知机1.1 感知机定义1.2 感知机学习策略2. 代码实现2.1 构建数据2.2 编写函数2.3 迭代3. 总结前言 大家好,大家好✨,这里是bio🦖。这次为大家带来的是感知机模型。下面跟我一起来了解感知机模…

uniapp:小程序数字键盘功能样式实现

代码如下&#xff1a; <template><view><view><view class"money-input"><view class"input-container" click"toggleBox"><view class"input-wrapper"><view class"input-iconone"…

交流负载箱的特点和优势有哪些?

交流负载箱广泛应用于电力系统、新能源、轨道交通、航空航天等领域。它具有以下特点和优势&#xff1a; 1. 灵活性高&#xff1a;交流负载箱可以根据实际需求&#xff0c;调整输出电流、电压、功率等参数&#xff0c;以满足不同场景下的测试需求。同时&#xff0c;它还可以实现…