Update index.html

index.html

@@ -187,6 +187,150 @@ body {
   padding: 32px 24px;
 }
 
+/* --- Intro Section --- */
+.intro-section {
+  margin-bottom: 24px;
+}
+
+.intro-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.intro-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+}
+
+.intro-header:hover {
+  background: var(--bg-hover);
+}
+
+.intro-icon {
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+}
+
+.intro-titles h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.intro-divider {
+  color: var(--text-muted);
+  font-weight: 300;
+  margin: 0 4px;
+}
+
+.intro-toggle {
+  margin-left: auto;
+  padding: 4px 8px;
+  transition: transform var(--transition);
+}
+
+.intro-toggle.collapsed svg {
+  transform: rotate(-90deg);
+}
+
+.intro-body {
+  padding: 20px 24px 24px;
+  transition: all 0.3s ease;
+}
+
+.intro-body.collapsed {
+  display: none;
+}
+
+.intro-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+
+.intro-col h4 {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  letter-spacing: 0.02em;
+}
+
+.intro-col p {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-bottom: 10px;
+}
+
+.intro-col p strong {
+  color: var(--primary);
+}
+
+.intro-col ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.intro-col ul li {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  padding-left: 4px;
+}
+
+.intro-models {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.intro-models-label {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.intro-model-tag {
+  font-size: 0.75rem;
+  padding: 3px 12px;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.intro-model-tag.sf {
+  background: #EDE9FE;
+  color: #7C3AED;
+}
+
+.intro-model-tag.gemini {
+  background: #DBEAFE;
+  color: #2563EB;
+}
+
+@media (max-width: 768px) {
+  .intro-columns {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
 /* --- Upload Section --- */
 .upload-section {
   display: flex;
@@ -1148,6 +1292,55 @@ body {
 
     <!-- 主内容区 -->
     <main class="main">
+      <!-- 工具介绍 -->
+      <section class="intro-section" id="introSection">
+        <div class="intro-card">
+          <div class="intro-header">
+            <div class="intro-icon">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+            </div>
+            <div class="intro-titles">
+              <h2>关于本工具 <span class="intro-divider">|</span> About This Tool</h2>
+            </div>
+            <button class="btn btn-ghost btn-sm intro-toggle" id="introToggle" title="收起/展开">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+            </button>
+          </div>
+          <div class="intro-body" id="introBody">
+            <div class="intro-columns">
+              <div class="intro-col">
+                <h4>🇨🇳 中文</h4>
+                <p><strong>Scene Asset Analyzer</strong> 是一款基于 AI 视觉模型的游戏场景3D资产分析工具。上传游戏场景截图后，AI 将以资深场景美术的视角自动识别截图中的所有3D资产，并提供：</p>
+                <ul>
+                  <li>📦 资产清单（含中英文命名）</li>
+                  <li>📐 资产在原图中的精确定位标注</li>
+                  <li>⏱️ 每项资产的预估制作人天</li>
+                  <li>📝 专业的制作注意事项与建议</li>
+                  <li>📥 一键导出 Excel（含截图）/ CSV</li>
+                </ul>
+              </div>
+              <div class="intro-col">
+                <h4>🌐 English</h4>
+                <p><strong>Scene Asset Analyzer</strong> is an AI-powered tool for analyzing 3D assets in game scene screenshots. Upload your scene screenshots and AI will automatically identify all 3D assets from a senior environment artist's perspective, providing:</p>
+                <ul>
+                  <li>📦 Asset inventory with bilingual naming</li>
+                  <li>📐 Precise location annotation on original images</li>
+                  <li>⏱️ Estimated production time (man-days) per asset</li>
+                  <li>📝 Professional production notes & suggestions</li>
+                  <li>📥 One-click export to Excel (with images) / CSV</li>
+                </ul>
+              </div>
+            </div>
+            <div class="intro-models">
+              <span class="intro-models-label">支持模型 Supported Models：</span>
+              <span class="intro-model-tag sf">Qwen3-VL-32B</span>
+              <span class="intro-model-tag gemini">Gemini 3 Flash</span>
+              <span class="intro-model-tag gemini">Gemini 3 Pro</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- 上传区域 -->
       <section class="upload-section" id="uploadSection">
         <div class="upload-area" id="uploadArea">
@@ -2398,6 +2591,26 @@ function csvEsc(str) {
     // =================== 初始化 ===================
     initAISettings();
     updateModelSelectStatus();
+    initIntroToggle();
+
+    // =================== 工具介绍收起/展开 ===================
+    function initIntroToggle() {
+      var toggleBtn = $('#introToggle');
+      var introBody = $('#introBody');
+      if (!toggleBtn || !introBody) return;
+      var header = toggleBtn.closest('.intro-header');
+      var collapsed = localStorage.getItem('intro_collapsed') === 'true';
+      if (collapsed) {
+        introBody.classList.add('collapsed');
+        toggleBtn.classList.add('collapsed');
+      }
+      function toggle() {
+        var isCollapsed = introBody.classList.toggle('collapsed');
+        toggleBtn.classList.toggle('collapsed');
+        localStorage.setItem('intro_collapsed', isCollapsed);
+      }
+      if (header) header.addEventListener('click', toggle);
+    }
 
     // =================== 上传功能 ===================
     dom.uploadArea.addEventListener('click', function(e) {