feat: enhance documentation and AI features in index.html and zh/index.html

zxypro1 · zxypro1 · commit 2544e1f1bfa2 · 2025-12-20T04:27:22.000+08:00
- Updated SEO meta tags to reflect new AI functionalities, including AI problem generation, chat hints, and solution generation.
- Revised descriptions and keywords to emphasize the AI capabilities and Web IDE features.
- Improved the content structure to highlight AI assistance in both English and Chinese versions.
- Added a dedicated AI section to showcase the new features and their benefits for users.

These changes improve the visibility and clarity of the application's capabilities, enhancing user engagement and understanding of the AI functionalities.
diff --git a/docs/index.html b/docs/index.html
@@ -7,8 +7,8 @@
     
     <!-- SEO Meta Tags -->
     <title>Offline Code Practice - Free LeetCode-Style Algorithm Practice App | No Internet Required</title>
-    <meta name="description" content="Practice coding algorithms 100% offline with our free desktop app. Supports JavaScript, TypeScript, and Python. Built-in problem library, AI problem generator, and VS Code-like editor. Available for Windows, macOS, and Linux.">
-    <meta name="keywords" content="LeetCode, algorithm practice, coding interview, offline coding, JavaScript, TypeScript, Python, programming practice, data structures, coding problems, free, open source">
+    <meta name="description" content="Practice coding algorithms 100% offline with a VS Code-like Web IDE. Includes AI problem generator, AI chat hints, and AI solution generation. Supports JavaScript, TypeScript, and Python. Available for Windows, macOS, and Linux. Free & open source.">
+    <meta name="keywords" content="LeetCode, algorithm practice, coding interview, offline coding, AI coding assistant, AI solution, AI chat, AI problem generator, JavaScript, TypeScript, Python, programming practice, data structures, coding problems, free, open source">
     <meta name="author" content="zxypro1">
     <meta name="robots" content="index, follow">
     <link rel="canonical" href="https://zxypro1.github.io/OfflineCodePractice/">
@@ -19,14 +19,14 @@
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://zxypro1.github.io/OfflineCodePractice/">
     <meta property="og:title" content="Offline Code Practice - Free Algorithm Practice App">
-    <meta property="og:description" content="Practice coding algorithms 100% offline. Supports JavaScript, TypeScript, and Python. Free and open source.">
+    <meta property="og:description" content="Practice algorithms offline with a Web IDE + AI assistant: AI problem generator, AI chat hints, and AI solution generation. Supports JavaScript/TypeScript/Python. Free & open source.">
     <meta property="og:image" content="https://raw.githubusercontent.com/zxypro1/OfflineCodePractice/main/public/icon.png">
     
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:url" content="https://zxypro1.github.io/OfflineCodePractice/">
     <meta name="twitter:title" content="Offline Code Practice - Free Algorithm Practice App">
-    <meta name="twitter:description" content="Practice coding algorithms 100% offline. Supports JavaScript, TypeScript, and Python. Free and open source.">
+    <meta name="twitter:description" content="Practice algorithms offline with a Web IDE + AI assistant: AI problem generator, AI chat hints, and AI solution generation. Supports JavaScript/TypeScript/Python. Free & open source.">
     <meta name="twitter:image" content="https://raw.githubusercontent.com/zxypro1/OfflineCodePractice/main/public/icon.png">
     
     <!-- Favicon -->
@@ -50,7 +50,7 @@
             "price": "0",
             "priceCurrency": "USD"
         },
-        "description": "A standalone algorithm coding practice application that works 100% offline.",
+        "description": "A standalone algorithm coding practice app that works 100% offline, with AI problem generator, AI chat assistant, and AI solution generation.",
         "downloadUrl": "https://github.com/zxypro1/OfflineCodePractice/releases",
         "softwareVersion": "0.1.7",
         "author": {
@@ -718,6 +718,7 @@
             <div class="nav-links">
                 <a href="#features">Features</a>
                 <a href="#languages">Languages</a>
+                <a href="#ai">AI</a>
                 <a href="#download">Download</a>
                 <a href="./zh/" class="lang-btn" aria-label="Switch to Chinese">中文</a>
                 <a href="https://github.com/zxypro1/OfflineCodePractice" target="_blank" rel="noopener" class="github-btn">
@@ -737,8 +738,8 @@
             <div class="badge">
                 <span>v0.1.7 Released</span>
             </div>
-            <h1>Practice Algorithms<br>Anywhere, Anytime</h1>
-            <p>A 100% offline LeetCode-style coding practice app. No internet required. Supports JavaScript, TypeScript, and Python with WASM-powered browser execution.</p>
+            <h1>Offline Practice<br>With AI Assistance</h1>
+            <p>A 100% offline LeetCode-style coding practice app with a Web IDE. Use AI to generate problems, chat for hints, and generate complete solutions—then run tests locally. Supports JavaScript, TypeScript, and Python.</p>
             <div class="hero-buttons">
                 <a href="#download" class="btn btn-primary">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
@@ -778,8 +779,8 @@ <h3>VS Code Experience</h3>
                 </article>
                 <article class="feature-card fade-in">
                     <div class="feature-icon">🤖</div>
-                    <h3>AI Problem Generator</h3>
-                    <p>Generate custom problems using AI. Supports DeepSeek, OpenAI, Claude, Qwen, and Ollama.</p>
+                    <h3>AI Assistant (3-in-1)</h3>
+                    <p>AI Problem Generator + AI Chat + AI Solution generation—configurable providers in Settings (DeepSeek/OpenAI/Claude/Qwen/Ollama).</p>
                 </article>
                 <article class="feature-card fade-in">
                     <div class="feature-icon">📚</div>
@@ -891,12 +892,12 @@ <h3>Linux</h3>
     </section>
     
     <!-- AI Section -->
-    <section class="ai-section">
+    <section class="ai-section" id="ai">
         <div class="container">
             <div class="ai-content">
                 <div class="ai-text fade-in">
-                    <h2>AI-Powered Problem Generation</h2>
-                    <p>Describe what you want to practice in natural language, and AI will generate a complete problem with test cases and solutions. Works with multiple AI providers.</p>
+                    <h2>AI for the Whole Workflow</h2>
+                    <p>Generate new problems, ask for hints while you code, and generate full annotated solutions. All AI features share the same provider settings so you can switch models anytime.</p>
                     <div class="ai-providers">
                         <span class="provider-badge">🤖 DeepSeek</span>
                         <span class="provider-badge">🧠 OpenAI</span>
@@ -907,17 +908,16 @@ <h2>AI-Powered Problem Generation</h2>
                 </div>
                 <div class="ai-visual fade-in">
                     <div class="code-block">
-                        <p><span class="code-comment">// User prompt:</span></p>
-                        <p><span class="code-string">"Generate a dynamic programming problem about finding the longest increasing subsequence"</span></p>
+                        <p><span class="code-comment">// AI Chat:</span></p>
+                        <p><span class="code-string">"Give me a hint based on my current code..."</span></p>
                         <br>
-                        <p><span class="code-comment">// AI generates:</span></p>
-                        <p><span class="code-keyword">const</span> <span class="code-function">problem</span> = {</p>
-                        <p>&nbsp;&nbsp;title: <span class="code-string">"Longest Increasing Subsequence"</span>,</p>
-                        <p>&nbsp;&nbsp;difficulty: <span class="code-string">"Medium"</span>,</p>
-                        <p>&nbsp;&nbsp;tags: [<span class="code-string">"dp"</span>, <span class="code-string">"array"</span>],</p>
-                        <p>&nbsp;&nbsp;tests: [<span class="code-comment">/* comprehensive test cases */</span>],</p>
-                        <p>&nbsp;&nbsp;solution: <span class="code-comment">/* working solution */</span></p>
-                        <p>};</p>
+                        <p><span class="code-comment">// AI Solution:</span></p>
+                        <p><span class="code-keyword">function</span> <span class="code-function">solution</span>(input) {</p>
+                        <p>&nbsp;&nbsp;<span class="code-comment">/* Solution 1: brute force (with notes) */</span></p>
+                        <p>&nbsp;&nbsp;<span class="code-comment">/* Solution 2: optimized (recommended) */</span></p>
+                        <p>&nbsp;&nbsp;<span class="code-comment">/* Complexity + explanation in comments */</span></p>
+                        <p>&nbsp;&nbsp;<span class="code-comment">/* ... */</span></p>
+                        <p>}</p>
                     </div>
                 </div>
             </div>
diff --git a/docs/zh/index.html b/docs/zh/index.html
@@ -7,8 +7,8 @@
 
   <!-- SEO Meta Tags -->
   <title>Offline Code Practice - 离线算法刷题软件 | 无需联网的 LeetCode 风格练习工具</title>
-  <meta name="description" content="一款 100% 离线可用的算法练习桌面应用：内置题库 + Web IDE（类 VS Code）+ 浏览器端 WASM 执行。支持 JavaScript、TypeScript、Python。Windows / macOS / Linux 全平台下载。">
-  <meta name="keywords" content="离线刷题,算法练习,LeetCode,面试,数据结构,编程题,JavaScript,TypeScript,Python,桌面应用,开源,免费">
+  <meta name="description" content="一款 100% 离线可用的算法刷题桌面应用：Web IDE（类 VS Code）+ WASM 本地运行 + AI 辅助（AI 生成题目 / AI 题解 / AI 对话提示）。支持 JavaScript / TypeScript / Python，Windows / macOS / Linux 全平台下载，免费开源。">
+  <meta name="keywords" content="离线刷题,算法练习,LeetCode,面试,AI题解,AI对话,AI生成题目,AI编程助手,数据结构,编程题,JavaScript,TypeScript,Python,桌面应用,开源,免费">
   <meta name="author" content="zxypro1">
   <meta name="robots" content="index, follow">
   <link rel="canonical" href="https://zxypro1.github.io/OfflineCodePractice/zh/">
@@ -19,14 +19,14 @@
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://zxypro1.github.io/OfflineCodePractice/zh/">
   <meta property="og:title" content="Offline Code Practice - 离线算法刷题软件">
-  <meta property="og:description" content="无需联网也能刷题：内置题库、Web IDE、WASM 执行。支持 JS/TS/Python。免费开源。">
+  <meta property="og:description" content="无需联网也能刷题：Web IDE + WASM 执行 + AI 辅助（AI 生成题目 / AI 题解 / AI 对话提示）。支持 JS/TS/Python。免费开源。">
   <meta property="og:image" content="https://raw.githubusercontent.com/zxypro1/OfflineCodePractice/main/public/icon.png">
 
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:url" content="https://zxypro1.github.io/OfflineCodePractice/zh/">
   <meta name="twitter:title" content="Offline Code Practice - 离线算法刷题软件">
-  <meta name="twitter:description" content="无需联网也能刷题：内置题库、Web IDE、WASM 执行。支持 JS/TS/Python。免费开源。">
+  <meta name="twitter:description" content="无需联网也能刷题：Web IDE + WASM 执行 + AI 辅助（AI 生成题目 / AI 题解 / AI 对话提示）。支持 JS/TS/Python。免费开源。">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/zxypro1/OfflineCodePractice/main/public/icon.png">
 
   <!-- Favicon -->
@@ -47,7 +47,7 @@
     "applicationCategory": "DeveloperApplication",
     "inLanguage": "zh-CN",
     "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
-    "description": "一款 100% 离线可用的算法刷题桌面应用，支持 JavaScript/TypeScript/Python。",
+    "description": "一款 100% 离线可用的算法刷题桌面应用，支持 JavaScript/TypeScript/Python，并提供 AI 生成题目、AI 题解、AI 对话提示。",
     "downloadUrl": "https://github.com/zxypro1/OfflineCodePractice/releases",
     "softwareVersion": "0.1.7",
     "author": { "@type": "Person", "name": "zxypro1" }
@@ -69,6 +69,7 @@
       <div class="nav-links">
         <a href="#features">功能亮点</a>
         <a href="#languages">支持语言</a>
+        <a href="#ai">AI 功能</a>
         <a href="#download">下载</a>
         <a href="../" class="lang-btn" aria-label="Switch to English">English</a>
         <a href="https://github.com/zxypro1/OfflineCodePractice" target="_blank" rel="noopener" class="github-btn">
@@ -88,8 +89,8 @@
       <div class="badge">
         <span>v0.1.7 已发布</span>
       </div>
-      <h1>离线刷题<br>随时随地</h1>
-      <p>一款 100% 离线可用的 LeetCode 风格算法练习应用，无需联网。支持 JavaScript、TypeScript、Python，并通过 WASM 在浏览器端直接运行测试。</p>
+      <h1>离线刷题<br>AI 随行</h1>
+      <p>一款 100% 离线可用的 LeetCode 风格算法练习应用：Web IDE + WASM 本地执行。做题时可直接 AI 对话获取提示、一键生成带注释的 AI 题解，还能用 AI 生成新题。支持 JavaScript / TypeScript / Python。</p>
       <div class="hero-buttons">
         <a href="#download" class="btn btn-primary">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
@@ -129,8 +130,8 @@ <h3>类 VS Code 编辑器</h3>
         </article>
         <article class="feature-card fade-in">
           <div class="feature-icon">🤖</div>
-          <h3>AI 辅助（可选）</h3>
-          <p>支持 AI 生成题目、AI 题解、AI 对话（多供应商可配置）。</p>
+          <h3>AI 辅助（3 合 1）</h3>
+          <p>AI 生成题目 + AI 对话提示 + AI 题解（带注释多解法）。支持多供应商统一在设置页配置（DeepSeek/OpenAI/Claude/Qwen/Ollama）。</p>
         </article>
         <article class="feature-card fade-in">
           <div class="feature-icon">📚</div>
@@ -146,6 +147,33 @@ <h3>跨平台</h3>
     </div>
   </section>
 
+  <!-- AI Section -->
+  <section class="features" id="ai">
+    <div class="container">
+      <div class="section-title fade-in">
+        <h2>AI 功能：从出题到题解</h2>
+        <p>三大 AI 功能共用同一套供应商配置，可随时切换模型</p>
+      </div>
+      <div class="features-grid">
+        <article class="feature-card fade-in">
+          <div class="feature-icon">🧩</div>
+          <h3>AI 生成题目</h3>
+          <p>用自然语言描述练习目标，自动生成题目、示例与测试用例，直接加入本地题库。</p>
+        </article>
+        <article class="feature-card fade-in">
+          <div class="feature-icon">💬</div>
+          <h3>AI 对话</h3>
+          <p>右下角对话框随时提问：提示、思路、复杂度分析、调试建议。上下文包含题目与当前代码。</p>
+        </article>
+        <article class="feature-card fade-in">
+          <div class="feature-icon">🪄</div>
+          <h3>AI 题解</h3>
+          <p>一键生成带中文注释的完整题解：同一份代码中包含多种解法（暴力/优化/最优）并附复杂度说明。</p>
+        </article>
+      </div>
+    </div>
+  </section>
+
   <!-- Languages Section -->
   <section class="languages" id="languages">
     <div class="container">
