外贸网站运营工作内容,ui网页设计字体,.net可以做网站做游戏 博客园,何为门户网站GPT-4 Vision 系列:
翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一
GPT-4 Vision 的 7 个实际用例
Pre-requisites:先决条件#xff1a;
订阅 ChatGPT Plus 以访问 GPT-4 Vision。如果您不熟悉 Streamlit#xff0c;请按照安装步骤操作。
1. 绘制您的应…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(layoutwide)# 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_widthTrue)
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(optionsoptions, height400px)# Button to download dataif st.button(Download Chart Data):# This will download the data as a CSV filest.download_button(labelDownload data as CSV,datadata.to_csv().encode(utf-8),file_namechart_data.csv,mimetext/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.)
要运行这个应用程序将代码保存在一个Python文件中例如sketch_app.py然后使用Streamlit执行它
streamlit run Vision/sketch_app.py 这段代码将创建一个具有以下功能的Streamlit应用程序
侧边栏带有用于logo、导航按钮、复选框和组合框的占位符。主区域带有标题、一些占位文本和Echarts折线图。一个按钮用于将图表数据下载为CSV文件。
请用实际内容替换占位数据、图表选项和文本。如果需要进一步自定义外观和感觉或添加额外功能您可以相应地修改代码。
代码
https://github.com/zgpeace/pets-name-langchain/tree/develop
参考
https://blog.streamlit.io/7-ways-gpt-4-vision-can-uplevel-your-streamlit-apps/
