Compare commits
10 Commits
| Author | SHA1 | Date |
|---|---|---|
 pxibz54qc
|
64498f15a6 | 2 months ago |
|
pxibz54qc
|
998d60bd57 | 2 months ago |
 phuc2grkb
|
e05687ce67 | 2 months ago |
 p4cg79q6f
|
19117b089b | 2 months ago |
|
pxibz54qc
|
dc03c0ef10 | 2 months ago |
 ps4o2yrgl
|
c227bd6fdd | 2 months ago |
|
pxibz54qc
|
4fd00c3897 | 2 months ago |
|
pxibz54qc
|
764fd76207 | 2 months ago |
 pifhp6zof
|
e48e24fa45 | 2 months ago |
|
pxibz54qc
|
b2c81fc611 | 2 months ago |
@ -0,0 +1,94 @@
|
||||
<!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-2xl mx-auto">
|
||||
<!-- 返回按钮 -->
|
||||
<a href="result.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 p-6">
|
||||
<h2 id="advice-title" class="text-2xl font-bold mb-6"></h2>
|
||||
<div id="advice-list" class="space-y-4 mb-8">
|
||||
<!-- 建议内容将动态渲染 -->
|
||||
</div>
|
||||
<button onclick="window.location.href='index.html'" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-refresh mr-2"></i>识别其他植物
|
||||
</button>
|
||||
</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 data = JSON.parse(localStorage.getItem("currentAdvice"));
|
||||
if (!data || !data.advice) {
|
||||
alert("未找到养护建议");
|
||||
window.location.href = "index.html";
|
||||
return;
|
||||
}
|
||||
|
||||
// 渲染标题
|
||||
document.getElementById("advice-title").textContent = `${data.plantName} 的养护建议`;
|
||||
|
||||
// 渲染建议列表
|
||||
const adviceList = document.getElementById("advice-list");
|
||||
const adviceItems = data.advice.split("\n")
|
||||
.filter(item => item.trim())
|
||||
.map((item, index) => {
|
||||
const content = item.replace(/^\d+\.\s*/, "").trim();
|
||||
return `
|
||||
<div class="flex items-start gap-3 p-4 border border-gray-100 rounded-lg">
|
||||
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold flex-shrink-0">${index + 1}</div>
|
||||
<p class="text-gray-700">${content}</p>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
adviceList.innerHTML = adviceItems.join("");
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,105 @@
|
||||
<!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-primary font-medium">历史记录</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>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">识别历史记录</h2>
|
||||
|
||||
<!-- 历史记录列表 -->
|
||||
<div id="history-container" class="space-y-4">
|
||||
<!-- 无记录提示 -->
|
||||
<div id="empty-tip" class="text-center py-12 text-gray-500">
|
||||
<i class="fa fa-history text-4xl mb-4"></i>
|
||||
<p>暂无识别记录，快去首页上传图片吧</p>
|
||||
</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 history = JSON.parse(localStorage.getItem("plantHistory") || "[]");
|
||||
const container = document.getElementById("history-container");
|
||||
const emptyTip = document.getElementById("empty-tip");
|
||||
|
||||
if (history.length === 0) return;
|
||||
|
||||
// 隐藏空提示，渲染记录
|
||||
emptyTip.remove();
|
||||
container.innerHTML = history.map((item, index) => `
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="md:flex">
|
||||
<div class="md:w-1/4 p-4">
|
||||
<img src="${item.imageBase64}" alt="${item.plantName}" class="w-full h-32 object-cover rounded-lg">
|
||||
</div>
|
||||
<div class="md:w-3/4 p-4">
|
||||
<h3 class="font-bold text-lg mb-1">${item.plantName}</h3>
|
||||
<div class="flex items-center text-sm text-gray-500 mb-3">
|
||||
<span class="mr-3">置信度 ${item.plantConfidence}%</span>
|
||||
<span>${item.identifyTime}</span>
|
||||
</div>
|
||||
<button onclick="viewDetail(${index})" class="text-primary hover:underline text-sm">
|
||||
<i class="fa fa-eye mr-1"></i>查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join("");
|
||||
};
|
||||
|
||||
// 查看历史详情
|
||||
function viewDetail(index) {
|
||||
const history = JSON.parse(localStorage.getItem("plantHistory") || "[]");
|
||||
if (index >= 0 && index < history.length) {
|
||||
localStorage.setItem("currentResult", JSON.stringify(history[index]));
|
||||
window.location.href = "result.html";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,127 @@
|
||||
<!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>
|
||||
Loading…
Reference in new issue