-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest2.html
150 lines (130 loc) · 4.53 KB
/
test2.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCR and Semantic Matching</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.image-uploader {
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin-top: 10px;
}
textarea {
width: 100%;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>OCR and Semantic Matching</h1>
<div class="image-uploader">
<label for="image-upload1">选择图片1:</label>
<input type="file" id="image-upload1" accept="image/*">
<img id="preview1" src="" alt="Preview" style="display:none;">
<textarea id="ocr-result1" placeholder="OCR结果将显示在这里..." readonly></textarea>
</div>
<div class="image-uploader">
<label for="image-upload2">选择图片2:</label>
<input type="file" id="image-upload2" accept="image/*">
<img id="preview2" src="" alt="Preview" style="display:none;">
<textarea id="ocr-result2" placeholder="OCR结果将显示在这里..." readonly></textarea>
</div>
<button id="semantic-match-btn">语义匹配</button>
<p id="similarity-score"></p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Helper function to read file and convert it to a base64 string
function readFile(file, callback) {
const reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result);
};
reader.readAsDataURL(file);
}
// Function to handle image upload and preview
function handleImageUpload(inputId, previewId, resultId) {
const input = document.getElementById(inputId);
const preview = document.getElementById(previewId);
const result = document.getElementById(resultId);
input.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
readFile(file, function(base64) {
preview.src = base64;
preview.style.display = 'block';
performOcr(file, result);
});
}
});
}
// Function to perform OCR on the uploaded image
async function performOcr(file, resultElement) {
const formData = new FormData();
formData.append('model', 'PaddleOCR'); // or 'Tesseract'
formData.append('language', '中文'); // or '英文'
formData.append('inputType', '单个图片');
formData.append('file', file); // Correctly append the file
try {
const response = await fetch('http://10.19.135.167:5000/ocr', {
method: 'POST',
body: formData
});
if (response.ok) {
const data = await response.json();
resultElement.value = data.results[0].content;
} else {
console.error('OCR failed:', await response.text());
}
} catch (error) {
console.error('Error during OCR:', error);
}
}
// Handle semantic matching
document.getElementById('semantic-match-btn').addEventListener('click', async () => {
const textA = document.getElementById('ocr-result1').value;
const textB = document.getElementById('ocr-result2').value;
if (!textA || !textB) {
alert('请先上传图片并获取OCR结果！');
return;
}
try {
const response = await fetch('http://10.19.135.167:5000/Semantic_matching', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ texta: textA, textb: textB })
});
if (response.ok) {
const data = await response.json();
document.getElementById('similarity-score').textContent = `相似度: ${data.similarity}`;
} else {
console.error('Semantic matching failed:', await response.text());
}
} catch (error) {
console.error('Error during semantic matching:', error);
}
});
// Initialize image upload handlers
handleImageUpload('image-upload1', 'preview1', 'ocr-result1');
handleImageUpload('image-upload2', 'preview2', 'ocr-result2');
});
</script>
</body>
</html>