You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.9 KiB
127 lines
4.9 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>识别结果 - 植物智识</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF', // 蓝色主色调
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex flex-col">
|
|
<!-- 导航栏 -->
|
|
<nav class="bg-white shadow-sm fixed w-full top-0 z-50">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-leaf text-primary text-2xl mr-2"></i>
|
|
<h1 class="text-xl font-bold">植物智识</h1>
|
|
</div>
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="index.html" class="text-gray-600 hover:text-primary">首页</a>
|
|
<a href="history.html" class="text-gray-600 hover:text-primary">历史记录</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容 -->
|
|
<main class="container mx-auto px-4 pt-24 pb-16 flex-grow">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- 返回按钮 -->
|
|
<a href="index.html" class="inline-flex items-center text-gray-600 mb-6 hover:text-primary">
|
|
<i class="fa fa-arrow-left mr-2"></i>返回首页
|
|
</a>
|
|
|
|
<!-- 结果卡片 -->
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
|
<div class="md:flex">
|
|
<!-- 图片区域 -->
|
|
<div class="md:w-1/2 p-6">
|
|
<h3 class="text-gray-700 font-medium mb-3">识别图片</h3>
|
|
<img id="plant-image" src="" alt="植物图片" class="w-full h-64 object-cover rounded-lg">
|
|
</div>
|
|
<!-- 信息区域 -->
|
|
<div class="md:w-1/2 p-6">
|
|
<h2 id="plant-name" class="text-2xl font-bold mb-3"></h2>
|
|
<div class="flex items-center mb-4">
|
|
<span id="confidence" class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium mr-3"></span>
|
|
<span id="time" class="text-gray-500 text-sm"></span>
|
|
</div>
|
|
<div class="mb-6">
|
|
<h3 class="text-gray-700 font-medium mb-2">植物信息</h3>
|
|
<p class="text-gray-600">已成功识别植物种类，点击下方按钮获取养护建议</p>
|
|
</div>
|
|
<!-- 操作按钮 -->
|
|
<div class="flex gap-3">
|
|
<button id="advice-btn" class="flex-1 bg-primary text-white py-2 rounded-lg font-medium hover:bg-primary/90 transition-colors">
|
|
<i class="fa fa-lightbulb-o mr-2"></i>养护建议
|
|
</button>
|
|
<button onclick="window.location.href='index.html'" class="border border-gray-300 px-4 py-2 rounded-lg font-medium hover:border-primary hover:text-primary transition-colors">
|
|
<i class="fa fa-refresh"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-gray-800 text-white py-8">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<p>© 2025 植物智识 - 学生开发的植物识别与养护工具</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
window.onload = () => {
|
|
// 获取当前识别结果
|
|
const result = JSON.parse(localStorage.getItem("currentResult"));
|
|
if (!result) {
|
|
alert("未找到识别结果");
|
|
window.location.href = "index.html";
|
|
return;
|
|
}
|
|
|
|
// 渲染结果
|
|
document.getElementById("plant-name").textContent = result.plantName;
|
|
document.getElementById("confidence").textContent = `置信度 ${result.plantConfidence}%`;
|
|
document.getElementById("time").textContent = result.identifyTime;
|
|
document.getElementById("plant-image").src = result.imageBase64;
|
|
|
|
// 养护建议按钮
|
|
document.getElementById("advice-btn").addEventListener("click", async () => {
|
|
try {
|
|
const res = await fetch("http://localhost:3000/get-advice", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ plantName: result.plantName })
|
|
});
|
|
const adviceData = await res.json();
|
|
|
|
if (adviceData.error) throw new Error(adviceData.error);
|
|
if (!adviceData.output?.text) throw new Error("未获取到建议");
|
|
|
|
// 保存建议并跳转
|
|
localStorage.setItem("currentAdvice", JSON.stringify({
|
|
...result,
|
|
advice: adviceData.output.text
|
|
}));
|
|
window.location.href = "advice.html";
|
|
} catch (err) {
|
|
alert("生成建议失败：" + err.message);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |