翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二

GPT-4 Vision 系列:

翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一

GPT-4 Vision 的 7 个实际用例

Pre-requisites:先决条件：

订阅 ChatGPT Plus 以访问 GPT-4 Vision。
如果您不熟悉 Streamlit，请按照安装步骤操作。

1. 绘制您的应用程序并观看它栩栩如生

…由于我的绘画技巧堪比追逐激光笔的猫，我将使用 Balsamiq 来实现手绘模型的感觉。

此模型由一个双面板 UI 组成。左侧面板包括一个徽标、三个导航链接、两个复选框和一个下拉列表。右侧面板显示应用名称、文本区域、两个折线图和一个“下载图表数据”按钮：

将此模型图像粘贴到 ChatGPT 界面中：
在这里插入图片描述
包括以下提示词prompt：

Create a Streamlit app from this mock-up. You will use the Echarts library.

翻译 prompt:
从此模型创建 Streamlit 应用程序。您将使用 Echarts 库。

提示
最好指定要使用的数据可视化效果。如果未指定，则默认值为 matplotlib。
每个数据可视化库都必须通过以下方式安装pip install到您的虚拟环境中即可工作。

检查结果：
在这里插入图片描述
通过简单地上传一个模型，Vision 生成了一个功能齐全的 Streamlit 原型：一个带有徽标占位符、导航链接、复选框、组合框、一些文本、图表和下载按钮的应用程序。🙌

GPT-4 生成代码如下

使用Echarts库基于提供的草图创建一个Streamlit应用程序，您需要设置布局和组件以匹配设计。以下是与草图对应的Streamlit代码的概念大纲：

首先，确保您已安装必要的库：

pip install streamlit streamlit_echarts pandas

然后，你可以这样编写Streamlit应用程序：

import streamlit as st
from streamlit_echarts import st_echarts
import pandas as pd
import numpy as np# Set up the page layout
st.set_page_config(layout="wide")# Assuming logo.png is the logo file in the same directory as the script
logo = './logo.png'# Sidebar with logo and navigation
# st.sidebar.image(logo, use_column_width=True)
st.sidebar.button('Page 1')
st.sidebar.button('Page 2')
st.sidebar.button('Page 3')
st.sidebar.checkbox('Checkbox 01')
st.sidebar.checkbox('Checkbox 02')
st.sidebar.selectbox('ComboBox', ['Option 1', 'Option 2', 'Option 3'])# Main page layout
col1, col2 = st.columns([1, 3])# Dummy data for the chart
data = pd.DataFrame({'Series 1': np.random.rand(10),'Series 2': np.random.rand(10)
})# Echart line chart
options = {"xAxis": {"type": 'category',"data": list(data.index)},"yAxis": {"type": 'value'},"series": [{"data": list(data['Series 1']),"type": 'line',"smooth": True},{"data": list(data['Series 2']),"type": 'line',"smooth": True}]
}# Render the Echarts line chart in the main column
with col2:st.markdown("### Chart_name")st_echarts(options=options, height="400px")# Button to download dataif st.button('Download Chart Data'):# This will download the data as a CSV filest.download_button(label="Download data as CSV",data=data.to_csv().encode('utf-8'),file_name='chart_data.csv',mime='text/csv',)# Text and other elements would go here
with col1:st.markdown("## My_app_name")st.markdown("""Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius eros ac purus dignissim.""")