起源
在掘金看到大佬的一篇文章 前端页面如何运行AI+图像识别实战
运行了，很好玩。
然后我就想起久远前的CV入门的猫狗分类。接着从上面的代码修改成 输出是猫是狗。
原理就是使用 TensorFlow.js 和预训练的 MobileNet 模型进行图像分类（前端的缺点就是只能引入可以js引入的预训练模型。。。准确率跟速度都不太行，可以当玩具玩玩哈哈） 然后再判断检测结果有无cat or dog… 我也试着找其他的动物分类模型或者猫狗分类模型，好像没有？
实现页面
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MobileNet Cat vs Dog Image Classifier</title>
<style>
.container {
margin: 40px auto;
width: max(50vw, 400px);
display: flex;
flex-direction: column;
align-items: center;
}
.custom-file-upload {
display: flex;
align-items: center;
cursor: pointer;
gap: 10px;
border: 2px solid black;
padding: 8px 16px;
border-radius: 6px;
}
#file-upload {
display: none;
}
#image-container {
width: 100%;
margin-top: 20px;
position: relative;
}
#image-container > img {
width: 100%;
}
#status {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<main class="container">
<h1>猫狗大战</h1>
<label for="file-upload" class="custom-file-upload">
<input type="file" accept="image/*" id="file-upload" />
上传图片
</label>
<div id="image-container"></div>
<p id="status"></p>
</main>
<!-- 引入 TensorFlow.js 和 MobileNet 模型 -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
<script>
document
.getElementById("file-upload")
.addEventListener("change", async (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = async function (e) {
const image = document.createElement("img");
image.src = e.target.result;
image.onload = async () => {
document.getElementById("image-container").innerHTML = ""; // 清除之前的图片
document.getElementById("image-container").appendChild(image);
await classifyImage(image);
};
image.onerror = () => {
console.error("图片加载失败");
document.getElementById("status").textContent =
"图片加载失败。";
};
};
reader.onerror = () => {
console.error("文件读取失败");
document.getElementById("status").textContent = "文件读取失败。";
};
reader.readAsDataURL(file);
}
});
async function classifyImage(image) {
const status = document.getElementById("status");
status.textContent = "分析中...";
try {
// 加载 MobileNet 模型
const model = await mobilenet.load();
console.log("模型加载完成");
// 对图片进行分类
const predictions = await model.classify(image);
console.log("预测结果:", predictions);
// 解析结果并显示
let result = "未识别为猫或狗";
// 检测有可能多个结果数组，参考全部结果，有cat或者dog就判断
predictions.forEach((prediction) => {
if (prediction.className.toLowerCase().includes("cat")) {
result = "是猫！";
} else if (prediction.className.toLowerCase().includes("dog")) {
result = "是狗！";
}
});
status.textContent = result;
} catch (error) {
console.error("分类过程中出错", error);
status.textContent = "分类失败，请重试。";
}
}
</script>
</body>
</html>
直接浏览器运行就可以~
改进？（猫狗品种名词）
需要怎么把一些结果中的猫狗品种名词也识别出来（比如 golden retriever， Tibetan mastiff ），现在就是识别 dog这个单词，有误杀。
修改 classifyImage 函数 （试图提高准确率）
为了处理模型输出的预测结果中包含猫狗的品种名称而没有直接包含“cat”或“dog”，可以创建一个包含常见猫狗品种名称的列表。
dogBreeds 和 catBreeds 数组中列出常见的猫狗品种名称。
async function classifyImage(image) {
const status = document.getElementById('status');
status.textContent = '分析中...';
// 猫狗品种名称列表
const dogBreeds = ["dog","poodle", "retriever", "mastiff", "bulldog", "terrier", "beagle", "chihuahua", "pomeranian", "husky", "shepherd", "dachshund", "spaniel", "collie", "shih tzu", "greyhound"];
const catBreeds = ["cat","persian", "siamese", "sphynx", "ragdoll", "bengal", "maine coon", "british shorthair", "siberian", "abyssinian", "birman", "burmese", "chartreux"];
try {
// 加载 MobileNet 模型
const model = await mobilenet.load();
console.log('模型加载完成');
// 对图片进行分类
const predictions = await model.classify(image);
console.log('预测结果:', predictions);
// 解析结果并显示
let result = '未识别为猫或狗';
predictions.forEach(prediction => {
const className = prediction.className.toLowerCase();
if (dogBreeds.some(breed => className.includes(breed))) {
result = '是狗！';
} else if (catBreeds.some(breed => className.includes(breed))) {
result = '是猫！';
}
});
status.textContent = result;
} catch (error) {
console.error('分类过程中出错', error);
status.textContent = '分类失败，请重试。';
}
}
更新猫狗品种名单
const dogBreeds = [
"dog",
"poodle",
"retriever",
"mastiff",
"bulldog",
"terrier",
"beagle",
"chihuahua",
"pomeranian",
"husky",
"shepherd",
"dachshund",
"spaniel",
"collie",
"shih tzu",
"greyhound",
"corgi",
"papillon",
"pug",
"boxer",
"rottweiler",
"doberman",
"dalmatian",
"akita",
"shiba",
"samoyed",
"weimaraner",
"vizsla",
"whippet",
"malamute",
"great dane",
"labrador",
"golden retriever",
"cocker spaniel",
"king charles spaniel",
"brittany",
"poodle",
"bull terrier",
"yorkshire terrier",
"jack russell terrier",
"australian shepherd",
"bernese mountain dog",
"bichon frise",
"border collie",
"boston terrier",
"bouvier des flandres",
"basset hound",
"bloodhound",
"cane corso",
"cavalier king charles spaniel",
"chow chow",
"english springer spaniel",
"french bulldog",
"german shepherd",
"goldendoodle",
"irish setter",
"keeshond",
"maltese",
"newfoundland",
"pekingese",
"rhodesian ridgeback",
"saint bernard",
"schipperke",
"shar pei",
"silky terrier",
"soft coated wheaten terrier",
"staffordshire bull terrier",
"tibetan mastiff",
"vizsla",
"weimaraner",
"west highland white terrier",
"xoloitzcuintli"
];
const catBreeds = [
"cat",
"persian",
"siamese",
"sphynx",
"ragdoll",
"bengal",
"maine coon",
"british shorthair",
"siberian",
"abyssinian",
"birman",
"burmese",
"chartreux",
"himalayan",
"exotic shorthair",
"scottish fold",
"savannah",
"norwegian forest",
"oriental",
"american shorthair",
"egyptian mau",
"manx",
"japanese bobtail",
"tonkinese",
"ocicat",
"devon rex",
"cornish rex",
"singapura",
"la perm",
"balinese",
"snowshoe",
"turkish angora",
"turkish van",
"selkirk rex",
"somali",
"bombay",
"american curl",
"chausie",
"korat",
"nebelung",
"peterbald",
"american wirehair",
"british longhair",
"sokoke",
"javanese"
];
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
