GPT-4 Vision 系列:
- 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一
- 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二
- 翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三
当您需要从不可复制或不可下载的表中提取数据时,ChatGPT Vision 也非常有用。
在此示例中,我们将要求 Vision 使用 Streamlit 的数据编辑器使此表格数据图像完全可编辑。
将 ReactJS 表的这张图片粘贴 到 ChatGPT 中:
包括以下提示prompt:
Code this table in Streamlit. We want the tabular data fully editable via Streamlit's data editor.
在 Streamlit 中对此表进行编码。我们希望表格数据可以通过 Streamlit 的数据编辑器完全编辑。
将代码粘贴到编辑器中并查看结果:
GPT-4 Vision 碾压了它!该表功能齐全,标题正确,每一行都完美复制,数据完全可编辑。作为额外的奖励,ChatGPT 包括一个功能,可以找到最高销售金额并显示相关订单!
2. GPT-4生成表格
要在Streamlit中创建一个可编辑的表格,您可以使用st.dataframe
,这样用户就可以直接编辑表格中呈现的数据。以下是一个示例代码片段,根据您上传的图像信息在Streamlit中创建一个可编辑的表格:
python
import streamlit as st
import pandas as pd
# Sample data to populate the table.
# In a real application, this data might come from a database or user input.
data = {
"Date": ["16 Mar, 2019", "16 Mar, 2019", "16 Mar, 2019", "16 Mar, 2019", "15 Mar, 2019"],
"Name": ["Elvis Presley", "Paul McCartney", "Tom Scholz", "Michael Jackson", "Bruce Springsteen"],
"Ship To": ["Tupelo, MS", "London, UK", "Boston, MA", "Gary, IN", "Long Branch, NJ"],
"Payment Method": ["VISA **** 3719", "VISA **** 2574", "MC **** 1253", "AMEX **** 2000", "VISA **** 5919"],
"Sale Amount": [312.44, 866.99, 100.81, 654.39, 212.79]
}
# Convert the data to a pandas DataFrame
df = pd.DataFrame(data)
# Title for the orders table
st.header("Recent Orders")
# Display the editable dataframe
df = st.dataframe(df)
# You can add functionality to update the DataFrame here
# For example, if you want to save the changes made by the user to the DataFrame, you can do so.
# This will typically involve writing the updated DataFrame back to a file or database.
# Button to see more orders
if st.button('See more orders'):
# Here you can add logic to load or display more orders.
st.write("More orders to be implemented...")
当您运行这个Streamlit应用程序时,它会显示一个包含提供的数据的表格。用户可以点击单元格并编辑内容。st.dataframe
函数会自动允许这种交互。请注意,默认情况下,除非您添加后端逻辑将更新的数据存储在持久存储中,比如数据库或文件,否则这些更改在重新运行或刷新应用程序后不会持久保存。
要保存对数据框所做的更改,您需要捕获编辑后的数据框并将其写入您的存储系统。上面的示例不包括持久存储集成,这对于完全功能的数据编辑应用程序是必要的。
要运行此应用程序,请将代码保存在一个Python文件中(例如editable_table.py
),然后使用Streamlit执行它:
bash
streamlit run Vision/editable_table.py
记得调整按钮功能,以适应您的应用程序应该加载或显示更多订单的方式。
3. GPT-4 基于上面的表格,完善成可以编辑的表格
prompt
表格是出来了,但是表格不可以在线编辑,请完善代码
截至我在2023年4月的最后更新,Streamlit的内置st.dataframe函数提供了一种不是固有可编辑的数据显示。要在Streamlit中创建可编辑表格,通常需要使用诸如st.text_input
之类的输入元素的组合,对于大型表格来说可能会很麻烦,或者使用streamlit-aggrid
之类的第三方组件,该组件提供了增强功能,包括可编辑表格。
以下是一个使用streamlit-aggrid
在Streamlit中创建可编辑表格的示例,它提供了更类似于Excel的界面:
首先,您需要安装streamlit-aggrid包:
bash
pip install streamlit-aggrid
然后,这是您可能如何设置您的Streamlit应用程序:
python
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, GridUpdateMode, DataReturnMode
import pandas as pd
# Sample data for the table
data = {
"Date": ["16 Mar, 2019", "16 Mar, 2019", "16 Mar, 2019", "16 Mar, 2019", "15 Mar, 2019"],
"Name": ["Elvis Presley", "Paul McCartney", "Tom Scholz", "Michael Jackson", "Bruce Springsteen"],
"Ship To": ["Tupelo, MS", "London, UK", "Boston, MA", "Gary, IN", "Long Branch, NJ"],
"Payment Method": ["VISA **** 3719", "VISA **** 2574", "MC **** 1253", "AMEX **** 2000", "VISA **** 5919"],
"Sale Amount": [312.44, 866.99, 100.81, 654.39, 212.79]
}
df = pd.DataFrame(data)
# Ag-Grid options
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_grid_options(enableRangeSelection=True)
grid_options = gb.build()
# Enable various features like adding, deleting, and editing rows.
gb.configure_default_column(editable=True, groupable=True)
# Create Ag-Grid component
response = AgGrid(
df,
gridOptions=grid_options,
height=200,
width='100%',
data_return_mode=DataReturnMode.AS_INPUT, # Return data as input (for edits)
update_mode=GridUpdateMode.MODEL_CHANGED, # Update mode for cell edits
editable=True, # Enable editing
)
# The response['data'] will hold the dataframe with the edited values.
updated_df = response['data']
# Display the updated DataFrame
st.write('Updated Dataframe:')
st.dataframe(updated_df)
# Button to see more orders
if st.button('See more orders'):
# Here you can add logic to load or display more orders.
st.write("More orders to be implemented...")
这段代码将使用AgGrid
组件将DataFrame显示为可编辑表格。用户可以直接在表格中编辑数值。一旦他们这样做了,response['data']
将保存更新后的DataFrame,然后您可以根据需要处理或存储它。
请记住,对更改的持久存储需要与后端服务或数据库集成,这不包括在上面的示例中。另外,"查看更多订单"按钮是一个占位符,应该链接到实际逻辑以加载更多数据。
要运行此应用程序,请将代码保存在Python文件中(例如,editable_aggrid.py
),并使用Streamlit执行它:
python
streamlit run editable_aggrid.py
代码
https://github.com/zgpeace/pets-name-langchain/tree/develop
参考
https://blog.streamlit.io/7-ways-gpt-4-vision-can-uplevel-your-streamlit-apps/