From c227bd6fdd5f13a46ca3e01f9caf9153d37303d7 Mon Sep 17 00:00:00 2001
From: ps4o2yrgl <1402453877@qq.com>
Date: Sun, 16 Nov 2025 12:50:58 +0800
Subject: [PATCH] ADD file via upload

---
 index.html | 220 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 220 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8753e62
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
-- 
2.34.1

