Phát hiện và đánh dấu các điểm khác biệt giữa hai ảnh là chức năng cốt lõi của hệ thống. Người dùng tải lên hai ảnh (mẫu và mẫu thử) qua giao diện web, hệ thống xử lý bằng thuật toán phân tích hình ảnh, tạo ảnh kết quả với các khu vực khác biệt được đánh dấu bằng vòng tròn đỏ. Kết quả được lưu trữ trên Alibaba Cloud OSS và hiển thị trực tiếp trên giao diện.
Thiết kế giao diện người dùng
Hệ thống sử dụng Vue.js để xây dựng giao diện tương tác. Người dùng tải lên ảnh mẫu và mẫu thử thông qua các nút chọn file. Khi nhấn nút "Phân tích", hệ thống hiển thị tiến trình xử lý và kết quả sau khi hoàn tất.handleFileSubmission() {
if (this.templateFiles.length === 1 && this.sampleFiles.length === 1) {
this.processImageBatch(this.templateFiles, this.sampleFiles);
this.uploadStatus = 'processing';
} else {
this.showToast('Vui lòng tải lên cả hai ảnh', 'error');
}
}
processImageBatch(templateFiles, sampleFiles) {
const formData = new FormData();
templateFiles.forEach(file => formData.append('images', file.raw));
sampleFiles.forEach(file => formData.append('images', file.raw));
this.showLoading('Đang xử lý ảnh...');
axios.post('/analysis/upload', formData)
.then(response => {
this.analysisResult = response.data;
this.startAnalysis();
});
}Phần xử lý thuật toán với Flask
Backend Python sử dụng Flask để tiếp nhận yêu cầu, gọi công cụ phân tích hình ảnh và lưu kết quả vào Alibaba Cloud OSS. Thuật toán xử lý được đóng gói thành lớp công cụ riêng.from flask import Flask, request, jsonify
from utils.CloudStorage import CloudUploader
from utils.ImageComparator import ImageComparator
app = Flask(__name__)
@app.route('/analyze', methods=['POST'])
def analyze_images():
data = request.json
template_path = data['template_url']
sample_path = data['sample_url']
comparator = ImageComparator()
result_path = comparator.compare_images(template_path, sample_path)
uploader = CloudUploader()
result_url = uploader.upload(result_path)
return jsonify({
'status': 'success',
'result_url': result_url
})Backend Spring Boot
Spring Boot xử lý lưu trữ và quản lý yêu cầu, kết nối với Flask thông qua HttpClient. Hệ thống sử dụng MyBatis Plus để truy vấn cơ sở dữ liệu.@Service
public class ImageAnalysisService {
private final CloudStorageClient storageClient;
private final ImageComparatorClient comparatorClient;
public AnalysisResult processAnalysis(UploadRequest request) {
String templateUrl = storageClient.upload(request.getTemplateFile());
String sampleUrl = storageClient.upload(request.getSampleFile());
Map<String, String> payload = Map.of(
"template", templateUrl,
"sample", sampleUrl
);
String resultUrl = comparatorClient.analyze(payload);
return new AnalysisResult(templateUrl, sampleUrl, resultUrl);
}
}Thiết kế cơ sở dữ liệu
Bảng lưu trữ chứa các trường: id, user_id, template_url, sample_url, result_url, timestamp. Sử dụng MyBatis Plus để tự động sinh mã truy vấn.@TableName("image_analysis")
public class AnalysisRecord {
@TableId(type = IdType.AUTO)
private Long id;
private Long userId;
private String templateUrl;
private String sampleUrl;
private String resultUrl;
private LocalDateTime timestamp;
}