zouling
/
gongchang_ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频对象检测</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <!-- 使用更可靠的 Vue 2 CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
        }

        .upload-area {
            border: 2px dashed #e5e7eb;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
        }

        .upload-area:hover {
            border-color: #6366f1;
            background: rgba(255, 255, 255, 0.9);
            transform: translateY(-2px);
        }

        .analyzing {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .gradient-bg {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .results-container::-webkit-scrollbar {
            width: 8px;
        }

        .results-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .results-container::-webkit-scrollbar-thumb {
            background: #c7d2fe;
            border-radius: 4px;
        }

        .results-container::-webkit-scrollbar-thumb:hover {
            background: #818cf8;
        }
    </style>
</head>
<body class="min-h-screen py-8">
    <div id="app" class="max-w-4xl mx-auto px-4">
        <div class="glass-card rounded-2xl shadow-xl overflow-hidden">
            <div class="gradient-bg px-6 py-4">
                <h1 class="text-2xl font-semibold text-white">视频对象检测</h1>
                <p class="text-indigo-100 text-sm mt-1">上传视频并检测其中的特定对象</p>
            </div>

            <div class="p-6">
                <form @submit.prevent="analyzeVideo" class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">上传视频</label>
                        <div class="upload-area rounded-xl p-8 cursor-pointer" 
                             @click="triggerFileInput"
                             @dragover.prevent="handleDragOver"
                             @dragleave.prevent="handleDragLeave"
                             @drop.prevent="handleDrop"
                             :class="{'border-indigo-500 bg-indigo-50': isDragging}">
                            <div v-if="!selectedFile" class="text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4-4m4-4h.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <p class="mt-4 text-sm text-gray-600">点击或拖拽视频文件到此处上传</p>
                            </div>
                            <div v-else class="text-center">
                                <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
                                </svg>
                                <p class="mt-4 text-sm text-indigo-600">{{ selectedFile.name }}</p>
                                <p class="text-xs text-gray-500 mt-1">{{ formatFileSize(selectedFile.size) }}</p>
                            </div>
                            <input type="file" ref="fileInput" accept="video/*" class="hidden" @change="handleFileChange">
                        </div>
                        <p v-if="selectedFile" class="mt-2 text-sm text-indigo-600">已选择文件: {{ selectedFile.name }}</p>
                    </div>

                    <div>
                        <label for="objectInput" class="block text-sm font-medium text-gray-700 mb-2">要查找的对象</label>
                        <input type="text"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all"
                               id="objectInput"
                               v-model="objectToFind"
                               placeholder="例如: '穿红色衣服的人'">
                    </div>

                    <div v-if="errorMessage" class="rounded-lg bg-red-50 p-4 text-red-700">
                        {{ errorMessage }}
                    </div>

                    <button type="submit"
                            class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all"
                            :disabled="isAnalyzing"
                            :class="{'opacity-50 cursor-not-allowed': isAnalyzing}">
                        {{ isAnalyzing ? '分析中...' : '开始分析' }}
                    </button>
                </form>

                <div v-if="isAnalyzing" class="text-center mt-6">
                    <div class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-full analyzing">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-indigo-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        正在分析视频...
                    </div>
                </div>

                <div class="results-container mt-6 space-y-4 max-h-[600px] overflow-y-auto pr-2">
                    <div v-for="(frame, index) in results" :key="index" class="glass-card rounded-xl overflow-hidden">
                        <div class="p-4 border-b border-gray-100">
                            <h3 class="font-medium text-gray-900">第 {{ frame.second }} 秒的帧</h3>
                        </div>
                        <div class="p-4">
                            <img :src="frame.frame_path" :alt="'Frame ' + frame.second" class="w-full rounded-lg">
                            <p class="mt-4 text-gray-700">{{ frame.description || '暂无描述' }}</p>
                            <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
                                <span>置信度: {{ frame.confidence }}/10</span>
                                <span class="px-2 py-1 rounded-full" :class="frame.is_match ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'">
                                    {{ frame.is_match ? '匹配' : '不匹配' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            new Vue({
                el: '#app',
                data: {
                    selectedFile: null,
                    objectToFind: '',
                    isAnalyzing: false,
                    errorMessage: '',
                    isDragging: false,
                    results: []
                },
                methods: {
                    triggerFileInput() {
                        this.$refs.fileInput.click();
                    },
                    handleFileChange(e) {
                        if (e.target.files.length) {
                            const file = e.target.files[0];
                            if (!file.type.startsWith('video/')) {
                                this.errorMessage = '请上传有效的视频文件';
                                return;
                            }
                            this.selectedFile = file;
                            this.errorMessage = '';
                        }
                    },
                    handleDragOver() {
                        this.isDragging = true;
                    },
                    handleDragLeave() {
                        this.isDragging = false;
                    },
                    handleDrop(e) {
                        this.isDragging = false;
                        const files = e.dataTransfer.files;
                        if (files.length) {
                            const file = files[0];
                            if (!file.type.startsWith('video/')) {
                                this.errorMessage = '请上传有效的视频文件';
                                return;
                            }
                            this.selectedFile = file;
                            this.errorMessage = '';
                        }
                    },
                    formatFileSize(bytes) {
                        if (bytes === 0) return '0 Bytes';
                        const k = 1024;
                        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                        const i = Math.floor(Math.log(bytes) / Math.log(k));
                        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                    },
                    async analyzeVideo() {
                        if (!this.selectedFile) {
                            this.errorMessage = '请选择视频文件';
                            return;
                        }
                        if (!this.objectToFind.trim()) {
                            this.errorMessage = '请输入要查找的对象描述';
                            return;
                        }

                        this.isAnalyzing = true;
                        this.errorMessage = '';
                        this.results = [];

                        try {
                            // 这里是模拟API请求，实际使用时替换为真实API调用
                            // 模拟延迟
                            await new Promise(resolve => setTimeout(resolve, 1500));
                            
                            // 模拟返回结果
                            const mockResults = [
                                {
                                    second: 5,
                                    frame_path: 'https://via.placeholder.com/640x360?text=视频帧+5秒',
                                    description: '检测到穿红色衣服的人',
                                    confidence: 8,
                                    is_match: true
                                },
                                {
                                    second: 12,
                                    frame_path: 'https://via.placeholder.com/640x360?text=视频帧+12秒',
                                    description: '检测到多个对象',
                                    confidence: 5,
                                    is_match: false
                                }
                            ];
                            
                            // 模拟流式响应
                            for (const result of mockResults) {
                                await new Promise(resolve => setTimeout(resolve, 500));
                                this.results.unshift(result);
                            }
                        } catch (error) {
                            console.error('分析错误:', error);
                            this.errorMessage = '分析过程中发生错误: ' + error.message;
                        } finally {
                            this.isAnalyzing = false;
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>