算法不会前端，也可以做出好看的界面-Streamlit

写在前面

大家好，我是刘聪NLP。

之前在做Demo的时候，一般都采用「Flask+HTLM」，由于个人知识储备原因，导致界面会奇丑无比。当有人质疑我的时候，我就会说：“为什么要求我算法把前端做的那么好看，能用就行呗，要啥自行车。”如果实在没办法的时候，会求前端帮忙美化一波。

今天给大家推荐一个超级好用的工具Streamlit，无需任何前端知识（HTML、CSS、JS），只需要python写写markdorn就可以构建一个蛮不错的Demo页面。

并且把我之前开源的GPT2项目进行了一波页面优化，看起来更舒服了。

Streamlit介绍

Streamlit是一个可以快速搭建Web应用的Python库，官方定位是服务于机器学习和数据科学的Web应用框架。目前已经有非常详细文档、非常多样的应用案例和非常活跃的社区。

官方网址：https://streamlit.io/
实例和源码：https://awesome-streamlit.org/

由于API简明易用，结构清晰，很多内容可以直接用markdorn表示，本人评估最多「一天」就可以学会。

案例

以本人之前开源的GPT2项目为例，简单修改之前的页面。

项目介绍：
https://zhuanlan.zhihu.com/p/338171330
or
https://mp.weixin.qq.com/s/yexDvEF-kLj1rfSgG6-OTQ

先上效果图，原来的页面如下：

现在的页面如下： 将模型部分参数开放出来，可以给用户更好地交互体验，使其有很强的参与感，并且页面也变得虽然简洁但五脏俱全。

核心代码如下：

def writer():
    st.markdown(
        """
        ## NewsTitleGenerate DEMO
        """
    )
    st.sidebar.subheader("配置参数")
    batch_size = st.sidebar.slider("batch_size", min_value=0, max_value=10, value=3)
    generate_max_len = st.sidebar.number_input("generate_max_len", min_value=0, max_value=64, value=32, step=1)
    repetition_penalty = st.sidebar.number_input("repetition_penalty", min_value=0.0, max_value=10.0, value=1.2,
                                                 step=0.1)
    top_k = st.sidebar.slider("top_k", min_value=0, max_value=10, value=3, step=1)
    top_p = st.sidebar.number_input("top_p", min_value=0.0, max_value=1.0, value=0.95, step=0.01)

    parser = argparse.ArgumentParser()
    parser.add_argument('--batch_size', default=batch_size, type=int, help='生成标题的个数')
    parser.add_argument('--generate_max_len', default=generate_max_len, type=int, help='生成标题的最大长度')
    parser.add_argument('--repetition_penalty', default=repetition_penalty, type=float, help='重复处罚率')
    parser.add_argument('--top_k', default=top_k, type=float, help='解码时保留概率最高的多少个标记')
    parser.add_argument('--top_p', default=top_p, type=float, help='解码时保留概率累加大于多少的标记')
    parser.add_argument('--max_len', type=int, default=512, help='输入模型的最大长度，要比config中n_ctx小')
    args = parser.parse_args()

    content = st.text_area("输入新闻正文", max_chars=512)
    if st.button("一键生成摘要"):
        start_message = st.empty()
        start_message.write("正在抽取，请等待...")
        start_time = time.time()
        titles = predict_one_sample(model, tokenizer, device, args, content)
        end_time = time.time()
        start_message.write("抽取完成，耗时{}s".format(end_time - start_time))
        for i, title in enumerate(titles):
            st.text_input("第{}个结果".format(i + 1), title)
    else:
        st.stop()

具体API内每个函数的功能就不一一介绍了，可以直接去看API文档，非常详细。如果嫌英文看得麻烦的话，有很多中文翻译好的文档，大家可以自行检索。

API文档：https://docs.streamlit.io/

运行命令：

streamlit run app.py
or
streamlit run app.py --server.port your_port

目前github项目已经更新，可以直接clone后进行体验。

总结

真不是水了一篇，真的是想把好的东西带个大家。

有时候给模型做了优化或者做了一个新功能，给领导汇报时，用excel和postman进行展示时，总归是不美观的。如果仅需要极小的代价，有一个很好的观感，为什么不尝试一下呢？（也许还能装一下~~~）

喜欢的的同学们，记得点赞，关注，转载请说明出处哟！！！

整理不易，请多多点赞，关注，有问题的朋友也欢迎加我微信「logCong」、公众号「NLP工作站」、知乎「刘聪NLP」私聊，交个朋友吧，一起学习，一起进步。

我们的口号是“生命不止，学习不停”。