NVIDIA 7th SkyHackathon(八)使用 Flask 与 Vue 开发 Web

1.页面效果

Web 采用 flask+vue 开发,效果图如下

NVIDIA 7th SkyHackathon(八)使用 Flask 与 Vue 开发 Web_第1张图片
NVIDIA 7th SkyHackathon(八)使用 Flask 与 Vue 开发 Web_第2张图片
NVIDIA 7th SkyHackathon(八)使用 Flask 与 Vue 开发 Web_第3张图片
NVIDIA 7th SkyHackathon(八)使用 Flask 与 Vue 开发 Web_第4张图片
NVIDIA 7th SkyHackathon(八)使用 Flask 与 Vue 开发 Web_第5张图片

2.后端

import sys
import subprocess
import os
from PIL import Image
from datetime import datetime
from ASR_metrics import utils as metrics

from werkzeug.wrappers import Request, Response
from flask import Flask, render_template, request, jsonify

sys.path.append('/home/nvidia/7th_CV')
sys.path.append('/home/nvidia/7th_ASR')

# ASR 路径
pathASR = "/home/nvidia/7th_ASR"

# 项目路径
pathSky = '/home/nvidia'

app = Flask(__name__, static_folder='')

# 上传路径
uploadPath = 'uploads/'
try_model_1 = None

# 主页
@app.route('/')
def index():
    return render_template('sky7.html', template_folder='templates')

# ------------------ASR------------------
# ASR 模型加载
@app.route('/asr/load')
def asrLoad():
    global try_model_1
    if try_model_1 == None:
        import nemo.collections.asr as nemo_asr
        print('Loading Nemo')
        # 加载模型
        try_model_1 = nemo_asr.models.EncDecCTCModel.restore_from("/home/nvidia/7th_ASR/7th_asr_model.nemo")
        print('Done loading Nemo')
    return 'ok'

# POST 请求上传音频
@app.route('/asr/upload', methods=['POST'])
def asrUpload():
    if request.method == 'POST':
        f = request.files['file']
        if(f.headers.get('Content-Type') != 'audio/wav'):
            return '音频格式有错误', 400
        else:
            fileName = f'{uploadPath}audio.wav'
            f.save(fileName)
            dt = datetime.now()
            ts = str(int(datetime.timestamp(dt)))
            return jsonify(f'/{uploadPath}audio.wav?t={ts}')

# 识别上传的音频
@app.route('/asr/identify', methods=['GET', 'POST'])
def asrIdentify():
    global try_model_1
    if try_model_1 == None:
        return '模型无效,请重新加载', 500
    try:
        asr_result = try_model_1.transcribe(paths2audio_files=["uploads/audio.wav"])
        s1 = request.form.get('defaultText')
        s2 = " ".join(asr_result)#识别结果
        result = {
            "asr_result": asr_result,
            "word_error_rate": metrics.calculate_cer(s1,s2),
            "word_accuracy_rate":1-metrics.calculate_cer(s1,s2)
        }
        return jsonify(result)
    except Exception as e:
        return '无法识别', 400

# ------------------CV------------------

# POST 请求上传图片
@app.route("/cv/upload", methods=['POST'])
def cvUpload():
    if request.method == 'POST':
        f = request.files['file']
        print('image', f, f.filename)

        if not 'image' in f.headers.get('Content-Type'):
            return '图片有错误', 400

        original = f'{uploadPath}original.jpg'

        try:
            # Convert image to jpeg
            im = Image.open(f)
            rgb_im = im.convert('RGB')
            rgb_im.save(original)

            # Add timestamp
            dt = datetime.now()
            ts = str(int(datetime.timestamp(dt)))
            return jsonify(original+'?t='+ts)

        except Exception as e:
            return '有错误', 400

# 检测图片
@app.route("/api/detect/image")
def detectImage():
    cv_results = subprocess.Popen('python3 /home/nvidia/7th_CV/detection_image.py /home/nvidia/uploads/original.jpg', shell = True, stdout = subprocess.PIPE, stderr = subprocess.PIPE)
    print('code', cv_results.returncode)
    cv_results = str(cv_results.stdout.read()).split('\\n')[-2]
    dt = datetime.now()
    ts = str(int(datetime.timestamp(dt)))
    result = {
        "detection_result_image_path": f'/uploads/result.jpg?t={ts}'
    }
    return jsonify(result)

# 获取 FPS,以 Json 格式返回前端
@app.route("/api/detect/fps")
def detectFPS():
    # Code here
    fps_results = subprocess.Popen('python3 /home/nvidia/7th_CV/cv_fps.py', shell = True, stdout = subprocess.PIPE, stderr = subprocess.STDOUT)
    fps_results = str(fps_results.stdout.read()).split('\\n')[-2]
    fps_results = fps_results.split(" ")[-1]
    result = {
        "detection_FPS": fps_results,
    }
    return jsonify(result)

# 获取 mAP
@app.route("/api/detect/map")
def detectMAP():
    # Code here
    map_results = subprocess.Popen('python3 /home/nvidia/7th_CV/cv_map.py', shell = True, stdout = subprocess.PIPE, stderr = subprocess.STDOUT)
    map_results = str(map_results.stdout.read())
    bytes(map_results, encoding="utf-8").decode()
    map_results = map_results[-9:-3]
    result = {
        "detection_mAP": map_results,
    }
    return jsonify(result)

if __name__ == "__main__":
    app.run(debug=True)

3.前端

3.1 html

<html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <head>
        <script src="https://unpkg.com/vue@3">script>
        <script src="https://unpkg.com/axios/dist/axios.min.js">script>
        <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/layui.css">
        <script src="//unpkg.com/[email protected]/dist/layui.js">script>
        <link rel="stylesheet" type="text/css" href="/style.css">
    head>

    <body id="app">
        
        <div class="loading" v-if="loading!=''">
            <div class="pad">%%loading%%div>
        div>
        <h1>7th Sky Hackathonh1>
        <h5>team:早八睡不醒h5>
        <div class="content">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                <ul class="layui-tab-title">
                    <li class="layui-this"><i class="layui-icon panel-title layui-icon"> ASRi>li>
                    <li><i class="layui-icon panel-title layui-icon"> CVi>li>
                ul>
                <div class="layui-tab-content">
                    
                    <div class="layui-tab-item layui-show">
                        <div class="layui-anim layui-anim-up">
                            <fieldset class="asr">
                                <legend><span class="panel-title">ASRspan>legend>

                                <div class="layui-container">

                                    
                                    <div class="layui-row">
                                        <div class="layui-col-md4">
                                            1.请加载语音识别模型
                                        div>
                                        <div class="layui-col-md4">
                                            <button class="layui-btn" @click="loadModel()" v-if="!modelLoaded"><i
                                                    class="layui-icon"> 加载i>button>
                                            <div v-if="modelLoaded" class="modelLoaded">模型加载成功div>
                                        div>
                                    div>
                                    

                                    
                                    <div class="field file">
                                        <div class="newFileUpload">
                                            
                                            <div class="layui-row">
                                                <div class="layui-col-md4">
                                                    <label for="file">2.请选择音频文件label>
                                                    <div class="note">   仅支持 .wav 和单声道格式div>
                                                div>
                                                <div class="layui-col-md4">
                                                    <div class="userdefined-file">
                                                        <input type="text" name="userdefinedFile"
                                                            id="userdefinedFileAudio" value="未选择任何文件" />
                                                        <button type="button">选择button>
                                                    div>
                                                    <input type="file" name="file" id="fileAudio"
                                                        @change="handleFileUploadAudio($event)" />
                                                div>
                                            div>
                                            
                                        div>

                                        
                                        <div class="layui-row">
                                            <div class="layui-col-md4"> 3.请上传音频文件div>
                                            <div class="layui-col-md4">
                                                <button class="layui-btn" @click="submitFile('asr')"><i
                                                        class="layui-icon"> 上传i>button>
                                            div>
                                        div>
                                        
                                    div>
                                    

                                    
                                    <div class="layui-row">
                                        <div class="field">
                                            <div class="layui-col-md4">
                                                <label>4.请试听上传语音并输入正确答案label>
                                            div>
                                            <div class="layui-col-md4">
                                                <input id="answer" type="text" name="defaultText"
                                                    v-model="defaultText" />
                                            div>
                                        div>
                                    div>
                                    


                                    <div class="field" v-if="asrStatus=='uploaded' || asrStatus=='identified'">
                                        
                                        <div class="layui-row">
                                            <div class="audio">
                                                <div class="layui-col-md4">    试听 div>
                                                <div class="layui-col-md4">
                                                    <audio controls :src="audioOriginal">audio>
                                                div>
                                            div>
                                        div>
                                        

                                        
                                        <div class="layui-row">
                                            <div class="layui-col-md4">5.识别语音div>
                                            <div class="layui-col-md4">
                                                <div class="action">
                                                    <button class="layui-btn" @click="identifyAudio()"><i
                                                            class="layui-icon"> 识别i>button>
                                                div>
                                            div>
                                        div>
                                        
                                    div>

                                    
                                    <div class="layui-row">
                                        <div class="field result asr" v-if="asrStatus=='identified'">
                                            <div class="layui-col-md4">6.指标div>
                                            <div class="layui-col-md4">
                                                <ul>
                                                    <li v-for="(value, key) in asrResult">%%key%%: %%value%%li>
                                                ul>
                                            div>
                                        div>
                                    div>
                                    
                                div>

                            fieldset>
                        div>
                    div>
                    

                    
                    <div class="layui-tab-item">
                        <div class="layui-anim layui-anim-up">
                            <fieldset class="cv">
                                <legend><span class="panel-title">CVspan>legend>

                                <div class="layui-container">

                                    
                                    <div class="field">
                                        <div class="layui-row">
                                            <div class="layui-col-md4">
                                                <p>1. 获取 FPSp>
                                                <div class="item result">    FPS: %%cvFps%%div>
                                            div>
                                            <div class="layui-col-md4">
                                                <div class="item action">
                                                    <button @click="getFps()" class="inline layui-btn"><i
                                                            class="layui-icon"> 获取i>button>
                                                div>
                                            div>
                                        div>
                                    div>
                                    

                                    
                                    <div class="field">
                                        <div class="layui-row">
                                            <div class="layui-col-md4">
                                                <p>2. 获取 mAPp>
                                                <div class="item result">    mAP: %%cvMap%%div>
                                            div>
                                            <div class="layui-col-md4">
                                                <div class="item">
                                                    <button @click="getMap()" class="inline layui-btn"><i
                                                            class="layui-icon"> 获取i>button>
                                                div>
                                            div>
                                        div>
                                    div>
                                    

                                    
                                    <div class="field file">
                                        
                                        <div class="newFileUpload">
                                            <div class="layui-row">
                                                <div class="layui-col-md4">
                                                    <label for="file">3.请选择图像文件 label>
                                                    <div class="note"> div>
                                                div>
                                                <div class="layui-col-md4">
                                                    <div class="userdefined-file">
                                                        <input type="text" name="userdefinedFile"
                                                            id="userdefinedFileImage" value="未选择任何文件" />
                                                        <button type="button">选择button>
                                                    div>

                                                    <input type="file" name="file" ref="file" id="fileImage"
                                                        @change="handleFileUploadImage($event)" />
                                                div>
                                            div>
                                        div>
                                        

                                        
                                        <div class="layui-row">
                                            <div class="layui-col-md4">4.请上传图像文件 div>
                                            <div class="layui-col-md4">
                                                <button @click="submitFile('cv')" class="layui-btn"><i
                                                        class="layui-icon"> 上传i>button>
                                            div>
                                        div>
                                        
                                    div>
                                    

                                    <div class="action" v-if="imageOriginal!=''">
                                        <div class="layui-row">
                                            <div class="layui-col-md4">5.识别图片div>
                                            <div class="layui-col-md4">
                                                <button class="layui-btn" @click="identifyImage()"><i
                                                        class="layui-icon"> 识别i>button><br>
                                            div>
                                        div>
                                    div>

                                    <div class="field">
                                        <div class="layui-row">
                                            <div class="image original" v-if="imageOriginal!=''">
                                                <div class="layui-col-md1">
                                                    <div class="label">原图div>
                                                div>
                                                <div class="layui-col-md3">
                                                    <image :src="imageOriginal" />
                                                div>
                                            div>

                                            <div class="image result cv" v-if="imageResult!=''">
                                                <div class="layui-col-md1">
                                                    <div class="label">结果图div>
                                                div>
                                                <div class="layui-col-md3">
                                                    <image :src="imageResult" />
                                                div>
                                            div>
                                        div>
                                    div>

                                div>
                            fieldset>
                        div>
                    div>
                    
                div>
            div>
        div>
    body>
    <script>
        const {
            createApp
        } = Vue
        createApp({
            data() {
                return {
                    file: '',
                    defaultText: '请检测出纸箱、瓶子和果皮',
                    modelLoaded: false,
                    imageOriginal: '',
                    imageResult: '',
                    audioOriginal: '',
                    error: '',
                    asrResult: {},
                    cvMap: '',
                    cvFps: '',
                    loading: '',
                    asrStatus: 'pending',
                    cvStatus: 'pending'
                }
            },
            // Avoid conflict with Flask delimiters
            compilerOptions: {
                delimiters: ["%%", "%%"]
            },
            methods: {
                async loadModel() {
                    if (this.loading != '') return showError('在运行中,无法执行')
                    this.loading = '加载模型中,请耐心等待...'
                    this.modelLoaded = false
                    try {
                        var {
                            data,
                            status
                        } = await axios.get('/asr/load')
                        if (status == 200) {
                            this.modelLoaded = true
                        }
                    } catch (err) {
                        showError(err.response.data)
                    }
                    this.loading = ''
                },
                async submitFile(fileType) {
                    let formData = new FormData()
                    formData.append('file', this.file)
                    if (this.file == "") {
                        showError("请选择文件");
                        return false;
                    }

                    statusType = fileType + 'Status'
                    this.loading = '上传中...'
                    try {
                        var {
                            data,
                            status
                        } = await axios.post('/' + fileType + '/upload', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        })
                        if (status == 200) {
                            this[statusType] = 'uploaded'
                            if (fileType == 'cv') {
                                this.imageOriginal = data
                            } else {
                                this.audioOriginal = data
                            }
                        }
                    } catch (err) {
                        showError(err.response.data)
                    }
                    this.loading = ''
                },
                handleFileUploadAudio(event) {
                    document.getElementById("userdefinedFileAudio").value = document.getElementById("fileAudio")
                        .value;
                    this.file = event.target.files[0];
                },
                handleFileUploadImage(event) {
                    document.getElementById("userdefinedFileImage").value = document.getElementById("fileImage")
                        .value;
                    this.file = event.target.files[0];
                },
                async identifyAudio(event) {
                    // if (this.loading != '') return showError('在运行中,无法执行')
                    this.loading = '识别中...'
                    try {
                        let formData = new FormData()
                        formData.append('defaultText', this.defaultText)
                        console.log('t', this.defaultText)
                        var result = await axios.post('/asr/identify', formData)
                        this['asrStatus'] = 'identified'
                        this.asrResult = result.data
                    } catch (err) {
                        if (err.response.status == 500) this.modelLoaded = false
                        showError(err.response.data)
                    }
                    this.loading = ''
                },
                async identifyImage(event) {
                    if (this.loading != '') return showError('在运行中,无法执行')
                    this.loading = '识别中...'
                    this.cvStatus = 'pending'
                    try {
                        var {
                            data
                        } = await axios.get('/api/detect/image')
                        this.imageResult = data['detection_result_image_path']
                    } catch (err) {
                        showError(err.response.data)
                    }
                    this.loading = ''
                },
                async getFps(event) {
                    if (this.loading != '') return showError('在运行中,无法执行')
                    this.loading = '获取 FPS...'
                    try {
                        var {
                            data
                        } = await axios.get('/api/detect/fps')
                        this.cvFps = data['detection_FPS']
                    } catch (err) {
                        showError(err.response.data)
                    }
                    this.loading = ''
                },
                async getMap(event) {
                    // 接口路径: /api/detect/map
                    // 方式: GET
                    if (this.loading != '') return showError('在运行中,无法执行')
                    this.loading = '获取 mAP...'
                    try {
                        var {
                            data
                        } = await axios.get('/api/detect/map')
                        this.cvMap = data['detection_mAP']
                    } catch (err) {
                        showError(err.response.data)
                    }
                    this.loading = ''
                }
            }
        }).mount('#app')

        function showError(msg) {
            layer.msg(msg || '错误')
        }
    script>
html>

3.2 CSS

body {
	font-size: 20px;
	margin: 0;
}

.content {
	padding: 10px;
	margin: 40px;
}

fieldset {
	border: 1px solid #ccc;
	padding: 10px;
}

.modelLoaded {
	color: green;
}

.note {
	color: #999;
	margin: 5px 0;
	font-size: 12px;
}

.field {
	margin: 10px 0;
}

.action {
	margin-top: 10px;
}

.loading {
	position: fixed;
	top: 0;
	background: #E8F9D9;
	text-align: center;
	width: 100%;
}

.pad {
	padding: 5px;
}

.inline {
	display: inline-block;
}

.field .item {
	margin: 5px 0;
}

.image {
	display: inline-block;
	margin-right: 10px;
}

.image img {
	max-height: 600px;
}

/* 标题 */
h1,
h5 {
	margin: 40px;
}

/* 队名 */
h5 {
	margin-left: 210px;
}

/* 面板title */
.panel-title {
	font-size: 25px;
}

/* 答案输入框 */
#answer {
	height: 40px;
	width: 200px;
	font-size: 14px;
	display: inline-block;
	vertical-align: middle;
	padding-right: 14px;
	padding-left: 14px;
}

/* 音频文件选择 */
.newFileUpload {
	position: relative;
	height: 40px;
	line-height: 40px;
}

.newFileUpload label {
	display: inline-block;
}

.userdefined-file {
	position: absolute;
	top: 0;
	/* left: 200px; */
	z-index: 2;
	width: 300px;
	height: 40px;
	line-height: 40px;
	font-size: 0;
	/*应对子元素为 inline-block 引起的外边距*/
}

.userdefined-file input[type="text"] {
	display: inline-block;
	vertical-align: middle;
	padding-right: 14px;
	padding-left: 14px;
	width: 220px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.userdefined-file button {
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	background-color: #009688;
	/* background-color: #f54; */
	border: none;
	color: #fff;
	cursor: pointer;
}

.newFileUpload input[type="file"] {
	position: absolute;
	top: 0;
	/* left: 200px; */
	z-index: 3;
	opacity: 0;
	width: 300px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
}

你可能感兴趣的:(SkyHackathon,flask,前端,vue.js)