Build a Word Cloud Generator with Flask and Vue – Step‑by‑Step Guide

Introduction

Python has two major web frameworks, Django and Flask. This article shares a fun Flask‑based word‑cloud generation website, ideal for practice. The project uses Vue for the frontend and Flask for the backend, with code available at flask-vue-word-cloud.

Directory Structure

Project layout:

.
├── backend
│   ├── app
│   └── venv
└── frontend
    ├── README.md
    ├── build
    ├── config
    ├── dist
    ├── index.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    └── static

Running the code shows the following UI:

Development Environment

Hardware: macOS Mojave 10.14.6

nodejs v11.6.0

Python 3.7.4

Ensure Node.js is installed.

Frontend Development

1. Install vue‑cli

$ npm install -g vue-cli

2. Create project

$ mkdir word-cloud
$ cd word-cloud/
$ vue init webpack frontend

After configuration, install dependencies and enter the frontend directory:

$ cd frontend
$ npm run dev

Development server runs at http://localhost:8080.

3. Install element‑ui

$ npm i element-ui -S

Import in /src/main.js:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

4. Install axios

$ npm install --save axios

Import and register in /src/main.js:

import axios from 'axios'
Vue.prototype.axios = axios

5. Write page components

Modify App.vue to remove the logo and keep the router view.

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

Create WordCloud.vue with a textarea, image display, and two buttons (Generate and Download).

<template>
  <div>
    <h2>小词云</h2>
    <div id="word-text-area">
      <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="textarea"></el-input>
      <div id="word-img">
        <el-image :src="'data:image/png;base64,'+pic" :fit="'fit'">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div id="word-operation">
        <el-row>
          <el-button type="primary" @click="onSubmit" round>生成词云</el-button>
          <el-button type="success" @click="onDownload" round>下载图片</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

Component script handling submission and download:

<script>
export default {
  name: 'wordcloud',
  data() {
    return {
      textarea: '',
      pic: '',
      pageTitle: 'Flask Vue Word Cloud'
    }
  },
  methods: {
    onSubmit() {
      const param = { "word": this.textarea }
      this.axios.post('/word/cloud/generate', param).then(res => {
        this.pic = res.data
        console.log(res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    onDownload() {
      const imgUrl = 'data:image/png;base64,' + this.pic
      const a = document.createElement('a')
      a.href = imgUrl
      a.setAttribute('download', 'word-cloud')
      a.click()
    }
  }
}
</script>

Update router in src/router/index.js:

export default new Router({
  routes: [{
    path: '/',
    name: 'index',
    component: WordCloud
  }]
})

Build the frontend assets: $ npm run build Resources are output to the dist directory.

Backend Development

1. Install Python 3

brew install python3

Link if needed:

brew link python

2. Create virtual environment

$ mkdir backend
$ cd backend/
$ python3 -m venv venv
$ source venv/bin/activate
# To deactivate:
$ deactivate

3. Install Flask

pip install flask

4. Install wordcloud library

pip install wordcloud

5. Write backend code

In __init__.py set Flask to serve the built Vue assets:

app = Flask(__name__,
            template_folder="../../frontend/dist",
            static_folder="../../frontend/dist/static")

Define routes in routes.py:

# Generate word‑cloud image and return base64 string
def get_word_cloud(text):
    pil_img = WordCloud(width=800, height=300, background_color="white").generate(text=text).to_image()
    img = io.BytesIO()
    pil_img.save(img, "PNG")
    img.seek(0)
    img_base64 = base64.b64encode(img.getvalue()).decode()
    return img_base64

# Main page
@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html')

# API endpoint for word‑cloud generation
@app.route('/word/cloud/generate', methods=["POST"])
def cloud():
    text = request.json.get("word")
    res = get_word_cloud(text)
    return res

Run the server: flask run The result is a simple but functional front‑back split application that can generate and download word‑cloud images.