Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple Natural Language Processing in JavaScript</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
    <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
    <style>
        #loader {
            text-align: center;
        }
    </style>
</head>

<body>

    <v-app id="app">
        <v-toolbar class="grey lighten-4">
            <v-toolbar-title class="grey--text text--darken-2">Natural Language Processing</v-toolbar-title>
        </v-toolbar>
        <main>
            <v-container fluid>
                <v-layout row wrap>
                    <v-flex xs12 sm12 md6 lg6 xl6>
                        <v-text-field
                        v-model="text"
                        label="Type anything here..."
                        multi-line
                        rows="15"
                        ></v-text-field>
                        <v-select
                            :items="actions"
                            v-model="selected_action"
                            label="Select Action"
                            dark
                            single-line
                            auto
                            ></v-select>
                        <v-btn block class="blue darken-1 white--text" @click.native="compromise">Process</v-btn>
                    </v-flex>
                    <v-flex xs12 sm12 md6 lg6 xl6>
                        <div id="loader" v-show="loader">
                            <v-progress-circular indeterminate v-bind:size="60" class="primary--text"></v-progress-circular>
                        </div>
                        {{ output }}
                    </v-flex>
                </v-layout>
            </v-container>
        </main>
    </v-app>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
    <script src="https://unpkg.com/compromise@latest/builds/compromise.min.js"></script>
    <script>
        var vm = new Vue({
    el: "#app",
    data: {
        text: null,
        output: null,
        selected_action: null,
        loader: false,
        actions: ["Find all the people", "Grab the places", "Grab all verbs", "Show all the nouns", "Convert to number"]
    },
    methods: {
        compromise() {
            this.loader = true;
            var action = this.selected_action;
            var text = nlp(this.text);
            if(this.selected_action == this.actions[0]) {
                var people = text.people();
                people.normalize();
                people.sort('frequency').unique();
                this.output = people.out('array'); // return them as an array
                this.loader = false;
            }
            else if (this.selected_action == this.actions[1]) {
                var places = text.places();
                places.sort('alpha').unique(); // sort alphabetically and dont repeat
                this.output = places.out('array'); // return them as an array
                this.loader = false;
            }
            else if (this.selected_action == this.actions[2]) {
                var verbs = text.match('#Verb');
                verbs.toUpperCase();
                this.output = verbs.out('array'); //return them as an array
                this.loader = false;
            }
            else if (this.selected_action == this.actions[3]) {
                var nouns = text.nouns();
                this.output = nouns.out('array'); //return them as an array
                this.loader = false;
            }
            else if (this.selected_action == this.actions[4]) {
                var num = text.values().toNumber();
                this.output = num.out('text')
                this.loader = false;
            }

        }
    }
})
    </script>
</body>

</html>