-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
65 lines (51 loc) · 2 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
document.getElementById('uploadButton').addEventListener('click', uploadImage);
async function uploadImage() {
const imageInput = document.getElementById('imageInput');
const file = imageInput.files[0];
const progressBar = document.getElementById('progressBar');
const progressContainer = document.getElementById('progressContainer');
const originalImage = document.getElementById('originalImage');
const processedImage = document.getElementById('processedImage');
const labelsDiv = document.getElementById('labels');
const apiEndpointInput = document.getElementById('apiEndpoint');
const contents = document.querySelector('.contents');
if (!file) {
alert('请选择一个文件!');
return;
}
const apiEndpoint = apiEndpointInput.value;
if (!apiEndpoint) {
alert('请输入API接口!');
return;
}
const formData = new FormData();
formData.append('file', file);
// 显示原始图像
originalImage.src = URL.createObjectURL(file);
try {
progressBar.style.width = '0%';
contents.textContent = '任务执行中';
progressContainer.style.display = 'block';
const response = await fetch(apiEndpoint, {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`服务器错误: ${response.statusText}`);
}
// 模拟进度条进度
progressBar.style.width = '50%';
const data = await response.json();
console.log('响应数据:', data);
progressBar.style.width = '100%';
const imageUrl = data.image_url;
const labels = data.labels;
processedImage.src = imageUrl;
labelsDiv.innerHTML = `标签: ${labels.join(', ')}`;
contents.textContent = '任务已执行完成';
} catch (error) {
console.error('错误:', error);
alert('上传图片时发生错误。');
contents.textContent = '任务执行失败';
}
}