how to show wordcloud image on dash web application

Question

I need to render a wordcloud on my dash application. According to this thread https://community.plot.ly/t/solved-is-it-possible-to-make-a-wordcloud-in-dash/4565, there is no wordcloud build-in component in dash. One workaround is to use WordCloud module to produce the wordcloud as image and use dash_html_components.Img to show on layout.

I'm new to Dash. Not sure how I can render the image. Do I need to save wordcloud as temp image everytime I produce a wordcloud?

Really appreciate it if anyone with some expertise in Dash can help with that.

The code is below:

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)

Answer 1

Here's a working example below. It uses the pip-installable wordcloud library, and passes a base-64 encoded PNG representation of the resulting image through BytesIO so you don't need to dump all the created PNG files each time.

I've got it triggering off of itself so that it'll run when you load the Dash app, though you could have it work dynamically off of a button or similar.

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)