|
|
<!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>
|
|
|
<style type="text/tailwindcss">
|
|
|
@layer utilities {
|
|
|
.content-auto { content-visibility: auto; }
|
|
|
.upload-area { @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-all duration-300; }
|
|
|
.upload-area-hover { @apply border-primary bg-primary/5; }
|
|
|
.plant-card { @apply rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105; }
|
|
|
}
|
|
|
</style>
|
|
|
</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-primary font-medium">首页</a>
|
|
|
<a href="history.html" class="text-gray-600 hover:text-primary transition-colors">历史记录</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<!-- 主内容 -->
|
|
|
<main class="container mx-auto px-4 pt-24 pb-16 flex-grow">
|
|
|
<!-- 系统介绍区域 -->
|
|
|
<section class="max-w-4xl mx-auto text-center mb-16 mt-8">
|
|
|
<div class="flex justify-center mb-6">
|
|
|
<!-- 校徽位置 -->
|
|
|
<img src="./favicon.ico" alt="学校校徽" class="w-16 h-16 rounded-full border-2 border-primary mr-4">
|
|
|
<!-- 系统标题 -->
|
|
|
<div>
|
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">植物智识</h1>
|
|
|
<p class="text-primary font-medium">植物智慧识别</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">智能植物识别与养护系统</h2>
|
|
|
<p class="text-gray-600 max-w-2xl mx-auto mb-8 text-lg">
|
|
|
本系统能够快速识别各类植物，提供专业养护建议，帮助您更好地了解和照顾身边的植物。
|
|
|
无论是校园里的花草，还是家中的盆栽，都能轻松识别。
|
|
|
</p>
|
|
|
|
|
|
<!-- 开始使用按钮 -->
|
|
|
<button id="start-btn" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors text-lg shadow-md">
|
|
|
<i class="fa fa-arrow-down mr-2"></i>开始使用
|
|
|
</button>
|
|
|
</section>
|
|
|
|
|
|
<!-- 学校照片展示 -->
|
|
|
<section class="max-w-4xl mx-auto mb-16">
|
|
|
<img src="./banner主图校园.jpg" alt="学校照片" class="w-full h-64 md:h-80 object-cover rounded-xl shadow-md">
|
|
|
</section>
|
|
|
|
|
|
<!-- 植物装饰图片区域 -->
|
|
|
<section class="max-w-4xl mx-auto mb-16">
|
|
|
<h3 class="text-xl font-bold text-center mb-6 text-gray-800">常见植物展示</h3>
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
|
<div class="plant-card">
|
|
|
<img src="./1.webp" alt="植物图片1" class="w-full h-40 object-cover">
|
|
|
</div>
|
|
|
<div class="plant-card">
|
|
|
<img src="./2.jpg" alt="植物图片2" class="w-full h-40 object-cover">
|
|
|
</div>
|
|
|
<div class="plant-card">
|
|
|
<img src="./v2-3b77ec5116e63d28054741a7ae2439f9_r.jpg" alt="植物图片3" class="w-full h-40 object-cover">
|
|
|
</div>
|
|
|
<div class="plant-card">
|
|
|
<img src="./4.jpg" alt="植物图片4" class="w-full h-40 object-cover">
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 上传区域 -->
|
|
|
<div id="upload-anchor" class="max-w-2xl mx-auto">
|
|
|
<div id="upload-container" class="bg-white rounded-xl shadow-sm p-6 mb-8">
|
|
|
<div id="drop-area" class="upload-area">
|
|
|
<input type="file" id="file-input" accept="image/*" class="hidden">
|
|
|
<i class="fa fa-picture-o text-5xl text-gray-400 mb-4"></i>
|
|
|
<h3 class="text-lg font-medium mb-2">点击或拖拽图片到此处</h3>
|
|
|
<p class="text-gray-500 mb-6">支持JPG、PNG格式，大小不超过5MB</p>
|
|
|
<button id="select-btn" class="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-primary/90 transition-colors">
|
|
|
<i class="fa fa-upload mr-2"></i>选择图片
|
|
|
</button>
|
|
|
</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>
|
|
|
let accessToken = "";
|
|
|
|
|
|
// 页面加载时获取百度Token
|
|
|
window.onload = async () => {
|
|
|
try {
|
|
|
const res = await fetch('http://localhost:3000/baidu/token');
|
|
|
const data = await res.json();
|
|
|
if (data.error) throw new Error(data.error_description);
|
|
|
accessToken = data.access_token;
|
|
|
} catch (err) {
|
|
|
alert("初始化失败：" + err.message);
|
|
|
console.error("Token获取失败：", err);
|
|
|
}
|
|
|
|
|
|
// 开始使用按钮点击事件 - 滚动到上传区域
|
|
|
document.getElementById('start-btn').addEventListener('click', () => {
|
|
|
document.getElementById('upload-anchor').scrollIntoView({
|
|
|
behavior: 'smooth'
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 图片转Base64
|
|
|
function fileToBase64(file) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const reader = new FileReader();
|
|
|
reader.onload = () => resolve(reader.result);
|
|
|
reader.onerror = reject;
|
|
|
reader.readAsDataURL(file);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 选择图片按钮点击事件
|
|
|
document.getElementById('select-btn').addEventListener('click', async () => {
|
|
|
const file = document.getElementById('file-input').files[0];
|
|
|
if (!file) {
|
|
|
alert("请先选择图片");
|
|
|
return;
|
|
|
}
|
|
|
if (!accessToken) {
|
|
|
alert("Token未初始化，请刷新页面");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const imageBase64 = await fileToBase64(file);
|
|
|
// 调用植物识别接口
|
|
|
const res = await fetch('http://localhost:3000/baidu/plant', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ access_token: accessToken, image: imageBase64 })
|
|
|
});
|
|
|
const result = await res.json();
|
|
|
|
|
|
if (result.error_code) throw new Error(result.error_msg || "识别失败");
|
|
|
if (!result.result || result.result.length === 0) throw new Error("未识别到植物");
|
|
|
|
|
|
// 整理结果
|
|
|
const plantResult = {
|
|
|
plantName: result.result[0].name,
|
|
|
plantConfidence: (result.result[0].score * 100).toFixed(0),
|
|
|
identifyTime: new Date().toLocaleString(),
|
|
|
imageBase64: imageBase64
|
|
|
};
|
|
|
|
|
|
// 保存到历史记录
|
|
|
const history = JSON.parse(localStorage.getItem("plantHistory") || "[]");
|
|
|
history.unshift(plantResult);
|
|
|
localStorage.setItem("plantHistory", JSON.stringify(history.slice(0, 10)));
|
|
|
|
|
|
// 保存当前结果并跳转
|
|
|
localStorage.setItem("currentResult", JSON.stringify(plantResult));
|
|
|
window.location.href = "result.html";
|
|
|
} catch (err) {
|
|
|
alert("识别失败：" + err.message);
|
|
|
console.error("识别错误：", err);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 拖拽上传逻辑
|
|
|
const dropArea = document.getElementById('drop-area');
|
|
|
dropArea.addEventListener('click', () => document.getElementById('file-input').click());
|
|
|
dropArea.addEventListener('dragover', (e) => {
|
|
|
e.preventDefault();
|
|
|
dropArea.classList.add('upload-area-hover');
|
|
|
});
|
|
|
dropArea.addEventListener('dragleave', () => dropArea.classList.remove('upload-area-hover'));
|
|
|
dropArea.addEventListener('drop', (e) => {
|
|
|
e.preventDefault();
|
|
|
dropArea.classList.remove('upload-area-hover');
|
|
|
if (e.dataTransfer.files.length) {
|
|
|
document.getElementById('file-input').files = e.dataTransfer.files;
|
|
|
document.getElementById('select-btn').click();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 选择文件后触发识别
|
|
|
document.getElementById('file-input').addEventListener('change', (e) => {
|
|
|
if (e.target.files.length) document.getElementById('select-btn').click();
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
