pxibz54qc
/
plantwork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

zym #3

Merged
pxibz54qc merged 1 commits from zhangyumeng_branch into dev 2 months ago
Conversation 0 Commits 1 Files Changed 1
1 changed files with 220 additions and 0 deletions
Show Stats Download Patch File Download Diff File

220
index.html
Unescape View File

@ -0,0 +1,220 @@
<!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>
Write Preview
Loading…
Cancel
Save