新增agent功能

main/index.html

@@ -6,11 +6,12 @@
     <title>垃圾桶控制界面</title>
     <link rel="stylesheet" href="CSS/control.css">
     <link rel="stylesheet" href="CSS/record.css">
+    <link rel="stylesheet" href="CSS/agent.css">
 </head>
 <body>
     <div class="container">
         <h1 class="title">垃圾桶控制界面</h1>
-        
+
         <!-- 手柄风格控制器 -->
         <div class="controller">
             <div class="controller-layout">
@@ -32,13 +33,13 @@
                         <button class="btn btn-backward-right" id="backwardRightBtn"><span>↘</span></button>
                     </div>
                 </div>
-                
+
                 <!-- 中间：录制回放控制 -->
                 <div class="center-controls">
                     <button class="btn btn-record" id="recordBtn"><span>录制</span></button>
                     <button class="btn btn-playback" id="playbackBtn"><span>回放</span></button>
                 </div>
-                
+
                 <!-- 右侧：旋转控制 -->
                 <div class="rotate-controls">
                     <button class="btn btn-rotate-left" id="rotateLeftBtn"><span>↶</span></button>
@@ -46,7 +47,7 @@
                 </div>
             </div>
         </div>
-        
+
         <!-- 轨迹管理区域 -->
         <div class="path-management">
             <h3>轨迹管理</h3>
@@ -59,15 +60,48 @@
                 <ul id="pathList"></ul>
             </div>
         </div>
-        
+
         <!-- 状态显示区域 -->
         <div class="status" id="status">
             <p>就绪</p>
         </div>
+
+        <!-- Agent聊天区域 -->
+        <div class="agent-chat">
+            <h3>智能控制助手</h3>
+
+            <!-- LLM配置区域 -->
+            <div class="llm-config">
+                <h4>LLM模型配置</h4>
+                <div class="config-row">
+                    <label for="apiUrlInput">API URL:</label>
+                    <input type="text" id="apiUrlInput" placeholder="例如: https://api.openai.com/v1">
+                </div>
+                <div class="config-row">
+                    <label for="apiKeyInput">API Key:</label>
+                    <input type="password" id="apiKeyInput" placeholder="输入API密钥">
+                </div>
+                <div class="config-row">
+                    <label for="modelInput">模型:</label>
+                    <input type="text" id="modelInput" placeholder="例如: gpt-3.5-turbo">
+                </div>
+                <button class="btn btn-config" id="saveConfigBtn">保存配置</button>
+            </div>
+
+            <!-- 聊天输入区域 -->
+            <div class="chat-input">
+                <input type="text" id="agentInput" placeholder="输入命令，例如：前进3秒、左转、执行路径test1">
+                <button class="btn btn-save" id="sendAgentBtn">发送</button>
+            </div>
+            <div class="chat-history" id="chatHistory">
+                <!-- 聊天历史记录 -->
+            </div>
+        </div>
     </div>
-    
+
     <script src="Javascript/control.js"></script>
     <script src="Javascript/record.js"></script>
     <script src="Javascript/joycon.js"></script>
+    <script src="Javascript/agent.js"></script>
 </body>
 </html>