Suck the cat with code! This paper is participating in[Cat Essay Campaign].

Results show

The technology used
  • vue.js
  • vant
  • Baidu AI open platform
Starting from 0

Since we’re starting at 0, let’s just start by creating the project. In terms of front-end framework, I used vue.js to directly scaffold a project named Catface, Vue Create Catface. The project is relatively simple for me, and the configuration of VUe-CIL is also as simple as possible, without too many complicated plug-ins

  • The CSS framework I choose is developed by a good teamvantDirect approachnpm install vant

    Importing the component aspect we try to import as much as we can, and here I’m usingbabel-plugin-import, is a Babel plug-in that automatically converts the writing of import to import on demand during compilation. This is one of the ways the framework recommends itnpm i babel-plugin-import -DAfter installing the plug-in, you also need to add some new configurations to the babelrc configuration file (please go toVant website – Get started quickly )
plugins: [
    ['import', {
      libraryName: 'vant'.libraryDirectory: 'es'.style: true
    }, 'vant']]Copy the code
  • CSS precompiler on my side is less, continue to install

    npm install less less-loader --save-dev

    It is recommended to specify the version number to install, otherwise there may be an error (paste a version of my installation).

  • Axios installation, used to request baidu AI interface

npm instasll axios

Baidu AI identification preparation work
  • Register a Baidu account for logging in to baidu AI open platform. We can register personal account, real name authentication will send 10000 times of interface request, enough for us to test
  • To create an application, the application is the basic operation unit for calling API service. After the application is successfully created, we can get the corresponding API Key and Secret Key to conduct interface call operations and relevant configuration (the following picture is the application created by myself).

Code section

Specific process:

  1. Access_token obtained by API Key and Secret Key
  2. Call the animal identification interface

I will post only the js code section below

<script>
    import axios from "axios"
    import Qs from 'qs'
    export default {
        data() {
            return {
                fileList: [].access_token: ' '.image: ' '.loading: false.catname: ' '.names: []}},methods: {
            afterRead(file) {
                console.log(file)
                this.image = file.content.split(', ') [1]},// Obtain the Access Token
            getToken() {
                axios({
                        url: '/ API/request / 2.0 / token'.method: 'post'.params: {
                            grant_type: 'client_credentials'.//
                            client_id: ' '.// After the application is created
                            client_secret: ' '// After the application is created
                        }
                    })
                    .then(res= > {
                        console.log(res)
                        this.access_token = res.data.access_token
                    })
                    .catch(err= > {
                        console.log(err)
                    })

            },
            // Start identifying
            discern() {
                this.loading = true
                let data = {
                    image: this.image
                }
                axios({
                        url: '/ API/rest / 2.0 / image - the classify/v1 / animal'.method: 'post'.headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        params: {
                            access_token: this.access_token
                        },
                        data: Qs.stringify(data)
                    })
                    .then(res= > {
                        console.log("Identified successfully", res)
                        this.loading = false
                        
                        res.data.result.map(item= >{
                            this.names.push(item.name)
                        })
                    })
                    .catch(err= > {
                        console.log("Identification failure", err)
                    })
            }
        },
        mounted() {
            this.getToken()
        },

    };
</script>
Copy the code
Matters needing attention
  1. Cross-domain problem

Aip.baidubce.com/oauth/2.0/t… – to get the Access Token aip.baidubce.com/rest/2.0/im… The above two are API interfaces provided by Baidu AI. Before I started to write the demo, I used Postman to debug it and there was no problem, but when I started to write it in local debugging, there would be cross-domain problems. Here, I configured the proxy in vue.config.js, and the specific code is as follows:

 //vue.config.js
    module.exports = {
        devServer: {proxy: {"/api": {target:'https://aip.baidubce.com'.changeOrigin:true.ws:true.pathRewrite: {"^/api":' '
                    }
                }
            }
        }
    }
Copy the code
  1. Base64 transcoding problem

In the description of the interface, the parameter “image” is used. Note: Images need to be base64 encoded, remove the encoding header before urlencode. The afterRead callback gets the complete Base64 encoding of the image, so we need to remove the encoding header

            afterRead(file) {
                console.log(file)
                this.image = file.content.split(', ') [1]},Copy the code
conclusion

So far a cat face recognition demo is done, is not very simple. Of course, there are many things that can be optimized. Welcome to dig friends support and discussion