【问题标题】:how to show wordcloud image on dash web application如何在 dash web 应用程序上显示 wordcloud 图像
【发布时间】:2019-11-18 04:08:12
【问题描述】:

我需要在我的 dash 应用程序上渲染一个 wordcloud。根据这个线程https://community.plot.ly/t/solved-is-it-possible-to-make-a-wordcloud-in-dash/4565,dash 中没有 wordcloud 内置组件。一种解决方法是使用WordCloud 模块将wordcloud 生成为图像,并使用dash_html_components.Img 在布局上显示。

我是 Dash 的新手。不知道如何渲染图像。每次生成 wordcloud 时都需要将 wordcloud 保存为临时图像吗?

如果有 Dash 方面的专业知识的人可以提供帮助,我将不胜感激。

代码如下:

import dash
import dash_core_components as dcc
import dash_html_components as html

print(dcc.__version__) # 0.6.0 or above is required

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

dfm = pd.DataFrame({'word': ['apple', 'pear', 'orange'], 'freq': [1,3,9]})

app.layout = html.Div([
    html.Img(id = 'image_wc')
])

# function to make wordcoud from word frequency dataframe
def plot_wordcloud (data):
        d = {}
        for a, x in data.values:
            d[a] = x
        wc = WordCloud(background_color='black',
                    width=1800,
                    height=1400).generate_from_frequencies(frequencies=d)   
        return (wc)

@app.callback(dash.dependencies.Output('image_wc', 'img'))
def make_image ():
    img = plot_wordcloud (data = dfm)
    return (img)


if __name__ == '__main__':
    app.run_server(debug=True)

【问题讨论】:

    标签: python plotly-dash


    【解决方案1】:

    下面是一个工作示例。它使用pip-installable wordcloud 库,并通过BytesIO 传递结果图像的base-64 编码PNG 表示,因此您无需每次都转储所有创建的PNG 文件。

    我已经让它自己触发,这样当你加载 Dash 应用程序时它就会运行,尽管你可以让它通过一个按钮或类似的东西动态地工作。

    import dash
    import dash.dependencies as dd
    import dash_core_components as dcc
    import dash_html_components as html
    
    from io import BytesIO
    
    import pandas as pd
    from wordcloud import WordCloud
    import base64
    
    # external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
    
    app = dash.Dash(__name__) #, external_stylesheets=external_stylesheets)
    
    dfm = pd.DataFrame({'word': ['apple', 'pear', 'orange'], 'freq': [1,3,9]})
    
    app.layout = html.Div([
        html.Img(id="image_wc"),
    ])
    
    def plot_wordcloud(data):
        d = {a: x for a, x in data.values}
        wc = WordCloud(background_color='black', width=480, height=360)
        wc.fit_words(d)
        return wc.to_image()
    
    @app.callback(dd.Output('image_wc', 'src'), [dd.Input('image_wc', 'id')])
    def make_image(b):
        img = BytesIO()
        plot_wordcloud(data=dfm).save(img, format='PNG')
        return 'data:image/png;base64,{}'.format(base64.b64encode(img.getvalue()).decode())
    
    if __name__ == '__main__':
        app.run_server(debug=True)
    

    【讨论】:

    • 非常感谢。这行得通!我将能够在几个小时内奖励积分。
    • 您能解释一下它是如何工作的吗?在dd.Input('image_wc', 'id') 中,为什么值为id?为什么make_image 需要像b 这样的参数?另外,'data:image/png;base64,{}'.format(base64.b64encode(img.getvalue()).decode()) 让我很困惑。 @兰迪
    • 当然可以。 1) dd.Input 实际上只是确保回调触发的填充物。通常,您会在其中放置一些有意义的内容,以便当您在框中键入内容或单击按钮或其他内容时,回调会重新运行。因为我只希望它运行一次,所以它设置为在image_wcid 更改时运行,这仅在创建页面时发生。它将输入作为参数传递给函数,这就是为什么 b 存在并且从未使用过的原因。
    • 2) 对于 HTML <img> 标签,src 的正常使用是将其设置为要显示的位置。您实际上可以使用data:image... 语法将整个图像作为base64 编码文本嵌入到src 字段中。图像通过管道传送到BytesIOimg,因此首先.getvalue() 检索字节表示,b64encode 将字节转换为可打印字符,decode() 将字节转换为 Python 字符串。
    • @MPJ567 是的。 app.run_server() 的某些部分最终会触发对 make_image() 的调用
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-19
    • 2014-07-31
    相关资源
    最近更新 更多