【跨模态实践】（四）streamlit前端框架分享_streamlit清空输入框

Streamlit

这一节学习使用streamlit搭建前端

首先下载这个包，在你IDE里面也可以

pip install streamlit
1

然后建一个文件，比如就叫helloworld.py,然后写代码进去

对于一个专注于数据科学内容的人来讲，前端仿佛那么遥不可及，所以我们应该第一步就做出一些尝试，这能很好的增强我们的信心，以及让我们更好的熟悉流程

我始终认为不管做什么，自己上手跑一遍是一个良好的开端，哪怕所有的代码看起来都如此复杂，所以，为了让自己没那么困，我们跑的第一个代码有必要“大道至简”。

import streamlit as st
st.set_page_config(page_title="Hello Streamlit") # 页名
st.title('This is your first Streamlit page!')  # 标题
1
2
3

我们在终端跑一下

streamlit run helloworld.py
1

可以看到截图如下

确实是非常简单，我们可以看到这是个网页，我们设置了页名和文章标题名字

所以我们接下来做什么？

谨记、不要局限于大部头字典，我们永远也学不会所有知识，我们只需要靠大脑记住常用的东西，或者说方法而并非知识，这就像是一个文件夹，我们只需要知道如何打开它，知识就触手可及

所以我们好歹定一个目标

比如，我想在上面上传一些数据，可以用作登记信息，思路开阔一些，做一个疫情登记表如何？

为此我们需要定下一个结构，以包含所有的工程

• 姓名
• 性别
• 年龄
• 今天是否做过核酸

我们简单构想这些功能，这就是一个框架，现在我们列出每一项功能要怎么做

我需要：

• 输入（姓名）
• 选择（性别、是否做核酸、年龄）
• 点击按钮（提交）

其他的就是装饰了

现在我们访问它的文档Get started - Streamlit Docs

我们可以在官方文档发现很多有趣的东西,只需要点开API referencce，我确保你能快速上手！

现在我们找一找文本输入该怎么做

它真的我哭死，非常好找，点开那个Text input，甚至有时候都不用点开，如果你足够熟悉，只是偶尔需要一点提示，因为这个函数直接写在了图标上！

我们点开它，然后是熟悉的函数API格式，往下有他的例子！!

于是我们的应该这么写

name = st.text_input('name', 'please input your name')
1

下面如法炮制，我们能快速找到我们需要的功能API，包括

• 检查框：st.checkbox('I agree')
• 选择框：sex = st.selectbox('sex',('man', 'woman'))
• 滑动窗口框：age = st.slider('How old are you?', 0, 130, 25)

代码放在这了

import streamlit as st
st.set_page_config(page_title="Hello Streamlit")
st.title('This is your first Streamlit page!')  # 标题
st.write('we will capture your location information.are you agree?')
if st.checkbox('I agree'):
    name = st.text_input('name', 'please input your name')
    sex = st.selectbox('sex',('man', 'woman'))
    age = st.slider('How old are you?', 0, 130, 25)
    st.write("I'm ", age, 'years old')
    NA = st.selectbox(
        'Have you ever done nucleic acid today?',
        ('yes', 'No'))
    st.button('submit')
1
2
3
4
5
6
7
8
9
10
11
12
13

我们先来看看我们实现了什么

一个检查框，如果我们不勾上它，就没法看到后面的内容

因此我们勾上它（这代表代码里面的if语句生效了，我们能够借此运行后面的代码，更有意思的是，如果我们再次点击这个检查框，它会继续隐藏后续内容，真是一点都不好骗的小家伙）

看看，如此简洁

这个选项框可比我经常填的表要好看多了

今天先分享到此

我没有分享应该怎么用streamlit，或者像个字典一样，搬运工，放上许多函数。有时候我们要学会自己去翻文档，你只需要一个翻译软件，比如百度翻译，支持划译，重要的是，亲自动手尝试，自己去做实验，或者说，在做一个东西前，确保目标明确，有逻辑架构，从一而终。

百度有时候无法解决那1%需要你自己实验的任务，所以翻文档吧

下面是VCED前端的代码

VCED前端代码

# 导入需要的包
import streamlit as st
from jina import Client, DocumentArray, Document
import json
import os
import time
import uuid

VIDEO_PATH = f"{os.getcwd()}/data"
# 视频存储的路径
if not os.path.exists(VIDEO_PATH):
    os.mkdir(VIDEO_PATH)
# 视频剪辑后存储的路径
if not os.path.exists(VIDEO_PATH + "/videos/"):
    os.mkdir(VIDEO_PATH + "/videos")

# GRPC 监听的端口
port = 45679
# 创建 Jina 客户端
c = Client(host=f"grpc://localhost:{port}")

# 设置标签栏
st.set_page_config(page_title="VCED", page_icon="
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/771251