226 lines
10 KiB
HTML
226 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>违规行为检测</title>
|
|
<!-- <link rel="stylesheet" href="./style.css">-->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<!-- <img src="./images/serach.png" class="icon searchBtn" alt="">-->
|
|
<img src="{{ url_for('static', filename='images/serach.png') }}" class="icon searchBtn" alt="">
|
|
<!-- <img src="./images/message.png" class="icon messageBtn" alt="">-->
|
|
<img src="{{ url_for('static', filename='images/message.png') }}" class="icon messageBtn" alt="">
|
|
<div class="userContent">
|
|
管理员
|
|
<img src="{{ url_for('static', filename='images/Group27.png') }}" alt="">
|
|
<!-- <img src="./images/Group27.png" alt="">-->
|
|
<img src="{{ url_for('static', filename='images/person.png') }}" class="userIcon" alt="">
|
|
<!-- <img src="./images/person.png" class="userIcon" alt="">-->
|
|
</div>
|
|
</div>
|
|
<div class="contentWrapper">
|
|
<div class="leftWrapper">
|
|
<h1 class="title">违规行为检测</h1>
|
|
<div class="slectWrapper">
|
|
<form action="/video" enctype='multipart/form-data' method='POST' class="form1">
|
|
<div class="selectFile">
|
|
<div class="selectBtn" onclick="document.getElementById('file-input').click();">选择文件</div>
|
|
<input type="file" name="file" id="file-input" style="display: none;" onchange="updateFileName()">
|
|
<span id="file-name" style="display: none;">未选择文件</span>
|
|
</div>
|
|
<div class="submit">
|
|
<div class="submitBtn" onclick="document.getElementById('submitInput').click();">开始检测</div>
|
|
<input type="submit" value="开始检测" id="submitInput" style="display: none;">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- 视频 -->
|
|
<div class="imgWrapper">
|
|
<img src="{{ url_for('video_feed') }}" alt="" class="imgShow">
|
|
<!-- <img src="./images/bg.png" alt="" class="imgShow">-->
|
|
<!-- <img src="{{ url_for('static', filename='images/bg.png') }}" alt="Example Image">-->
|
|
</div>
|
|
|
|
</div>
|
|
<div class="rightWrapper">
|
|
<div class="title">
|
|
<!-- <img src="./images/model.png" alt="" class="bigModelIcon">-->
|
|
<img src="{{ url_for('static', filename='images/model.png') }}" alt="" class="bigModelIcon">
|
|
<span class="modelTitle">大模型检测</span>
|
|
</div>
|
|
<div class="messageWrapper">
|
|
<!-- 用户 -->
|
|
<div class="userMsg" id="userMsg" style="display: none;">
|
|
<!-- <img src="./images/user1.png" alt="" class="avator">-->
|
|
<img src="{{ url_for('static', filename='images/user1.png') }}" alt="" class="avator">
|
|
<div class="megContent userMegContent" id="userInnerMsg">视频中的施工工人违反了哪些规则？</div>
|
|
</div>
|
|
<!-- 大模型 -->
|
|
<div class="modelMsg" id="modelMsg" style="display: none;">
|
|
<div class="megContent modelMegContent" id="modelMegContent">
|
|
<!-- 正在加载框 -->
|
|
<div class="loadding_wrapper" id="loadding_wrapper" style="display: none;">
|
|
<div class="loading-container">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">大模型分析中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <img src="./images/bigmodel.png" alt="" class="avator">-->
|
|
<img src="{{ url_for('static', filename='images/bigmodel.png') }}" alt="" class="avator">
|
|
</div>
|
|
</div>
|
|
<!-- 语音输入框 -->
|
|
<div class="inputWrapper">
|
|
<textarea name="" id="speechInput" placeholder="请在此输入您的问题..."></textarea>
|
|
<div class="sayWrapper">
|
|
<!-- <img src="./images/yuyin.png" alt="" class="mkf" id="RecognitionBtn">-->
|
|
<img src="{{ url_for('static', filename='images/yuyin.png') }}" alt="" class="mkf" id="RecognitionBtn">
|
|
<button id="sendMsgBtn">发送</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <form action="/camera" enctype='multipart/form-data' method='POST' class="form2">-->
|
|
<!-- <input type="submit" value="摄像头检测">-->
|
|
<!-- </form>-->
|
|
|
|
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
|
|
|
<script>
|
|
function updateFileName() {
|
|
var input = document.getElementById('file-input');
|
|
var fileNameSpan = document.getElementById('file-name');
|
|
if (input.files.length > 0) {
|
|
var fileName = input.files[0].name;
|
|
fileNameSpan.textContent = fileName;
|
|
fileNameSpan.style.display = 'inline'; // 显示文件名
|
|
} else {
|
|
fileNameSpan.textContent = '未选择文件';
|
|
fileNameSpan.style.display = 'none'; // 隐藏元素
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 语音识别 -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const textareaVal = document.getElementById('speechInput');
|
|
const RecognitionBtn = document.getElementById('RecognitionBtn');
|
|
if ('webkitSpeechRecognition' in window) {
|
|
const recognition = new webkitSpeechRecognition();
|
|
recognition.lang = 'zh-CN';
|
|
recognition.continuous = false;
|
|
recognition.interimResults = false;
|
|
|
|
let hasRecognized = false;
|
|
|
|
recognition.onstart = () => {
|
|
textareaVal.value = '正在识别...';
|
|
hasRecognized = false;
|
|
};
|
|
|
|
recognition.onresult = (event) => {
|
|
const transcript = event.results[0][0].transcript;
|
|
textareaVal.value = ` ${transcript}`;
|
|
hasRecognized = true;
|
|
};
|
|
|
|
recognition.onerror = (event) => {
|
|
textareaVal.value = '识别失败...';
|
|
};
|
|
|
|
recognition.onend = () => {
|
|
if (!hasRecognized) {
|
|
textareaVal.value = '未识别到内容...';
|
|
}
|
|
};
|
|
|
|
RecognitionBtn.addEventListener('click', () => {
|
|
textareaVal.value = '';
|
|
recognition.start();
|
|
});
|
|
} else {
|
|
textareaVal.value = 'Speech recognition not supported in this browser.';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// var sendBtn = document.getElementById('startBtn');
|
|
|
|
// function sendMsg() {
|
|
// var text = document.getElementById('speechInput').value;
|
|
// document.getElementById('userInnerMsg').innerText = text;
|
|
// }
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var sendMsgBtn = document.getElementById('sendMsgBtn');
|
|
var speechInput = document.getElementById('speechInput');
|
|
var resultContainer = document.getElementById('modelMegContent');
|
|
var loadingWrapper = document.getElementById('loadding_wrapper');
|
|
// textarea无值时按钮不可点击
|
|
// speechInput.addEventListener('input', function() {
|
|
// if (speechInput.value.trim() === '') {
|
|
// sendMsgBtn.disabled = true;
|
|
// } else {
|
|
// sendMsgBtn.disabled = false;
|
|
// }
|
|
// });
|
|
// if (speechInput.value.trim() === '') {
|
|
// sendMsgBtn.disabled = true;
|
|
// }
|
|
// 清空元素内容
|
|
function clearContentExceptLoading(element, loadingElement) {
|
|
var children = element.children;
|
|
for (var i = children.length - 1; i >= 0; i--) {
|
|
if (children[i] !== loadingElement) {
|
|
element.removeChild(children[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 接口请求
|
|
sendMsgBtn.addEventListener('click', function(event) {
|
|
// 展示用户输入
|
|
var speechInput = document.getElementById('speechInput');
|
|
document.getElementById('userMsg').style.display = 'flex';
|
|
document.getElementById('userInnerMsg').innerText = speechInput.value;
|
|
speechInput.value = '';
|
|
document.getElementById('modelMsg').style.display = 'flex';
|
|
var modelMegContent = document.getElementById('modelMegContent');
|
|
|
|
event.preventDefault(); // Prevent the default form submission
|
|
loadingWrapper.style.display = 'block'; // Show the loading animation
|
|
var socket = io(); // 连接到服务器
|
|
socket.emit('start_stream'); // 向服务器发送开始流式传输的请求
|
|
// 清空上次请求的数据，但保留加载动画
|
|
clearContentExceptLoading(modelMegContent, loadingWrapper);
|
|
|
|
socket.on('stream_data', function(data) {
|
|
var span = document.createElement('span');
|
|
|
|
loadingWrapper.style.display = 'none'; // 隐藏加载动画
|
|
// console.log('--------------')
|
|
// console.log('data----', data)
|
|
span.textContent = data.data; // 接收并显示数据
|
|
resultContainer.appendChild(span);
|
|
});
|
|
socket.on('stream_end', function(data) {
|
|
var p = document.createElement('p');
|
|
loadingWrapper.style.display = 'none'; // 隐藏加载动画
|
|
resultContainer.appendChild(p);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |