<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI机械臂控制台</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --terminal-bg: #1e1e1e;
            --terminal-text: #dcdcdc;
            --terminal-prompt: #4caf50;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        /* 顶栏样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-content {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-icon {
            font-size: 1.8rem;
        }

        .header h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .header p {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* 主内容区 */
        .main-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            height: calc(100vh - 95px);
            background-color: white;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }

        /* 左侧手册栏 */
        .manual-panel {
            flex: 0 0 35%;
            padding: 1.5rem;
            overflow-y: auto;
            border-right: 1px solid #e0e0e0;
            background-color: white;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .manual-panel::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari/Opera */
            width: 0 !important;
            /* 彻底移除滚动条占位 */
        }

        .manual-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            gap: 10px;
        }

        .robot-icon {
            width: 50px;
            height: 50px;
        }

        .section {
            margin-bottom: 2rem;
        }

        .section-title {
            color: var(--primary-color);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-color);
            font-size: 1.2rem;
        }

        .command-card {
            background-color: var(--light-color);
            padding: 0.8rem;
            border-radius: 6px;
            margin-bottom: 0.8rem;
            transition: all 0.2s;
        }

        .command-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .command {
            font-family: 'Consolas', monospace;
            font-weight: bold;
            color: var(--dark-color);
            margin-bottom: 0.3rem;
        }

        .command-desc {
            font-size: 0.9rem;
            color: #555;
        }

        .example {
            background-color: #f8f9fa;
            border-left: 4px solid var(--primary-color);
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 4px 4px 0;
        }

        .example-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark-color);
        }

        /* 右侧交互区 */
        .terminal-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #f8fafc;
        }

        .terminal-header {
            padding: 1rem 1.5rem;
            background-color: white;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .terminal-title {
            font-weight: 600;
            color: var(--dark-color);
        }

        .terminal-window {
            flex: 1;
            padding: 1.5rem;
            background-color: var(--terminal-bg);
            color: var(--terminal-text);
            font-family: 'Consolas', monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-y: auto;
            white-space: pre-wrap;
            border: 1px solid #ddd;
        }

        .terminal-input-container {
            display: flex;
            padding: 1rem;
            background-color: var(--terminal-bg);
            border-top: 1px solid #e0e0e0;
        }

        .terminal-prompt {
            color: var(--terminal-prompt);
            margin-right: 0.5rem;
            user-select: none;
        }

        .terminal-input {
            flex: 1;
            border: none;
            outline: none;
            font-family: 'Consolas', monospace;
            font-size: 14px;
            background: transparent;
            color: var(--terminal-text);
        }

        .btn {
            padding: 0.6rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .btn-run {
            background-color: var(--accent-color);
            color: white;
        }

        .btn-run:hover {
            background-color: #c0392b;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
        }

        .header-info {
            padding-top: 10px;
            line-height: 48px;
        }
        .iframe{
            width:100%;
            height:100%;
            border:none
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
                height: auto;
            }

            .manual-panel {
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
            }
        }
        
        /* 上传消息样式 */
        #upload-message {
            margin-top: 10px;
            padding: 8px 15px;
            border-radius: 4px;
            display: none; /* 默认隐藏 */
            text-align: left;
            font-size: 0.9em;
        }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; display: block !important; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; display: block !important; }
        
        /* 连接状态指示器 */
        .connection-status {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            margin-right: 8px;
        }
        
        .connected {
            background-color: #4caf50;
        }
        
        .disconnected {
            background-color: #f44336;
        }
        
        /* Prompt 输入区域样式 */
        .prompt-input-container {
            padding: 1rem;
            background-color: white;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 10px;
        }
        
        .prompt-input {
            flex: 1;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
        }
        
        .prompt-btn {
            padding: 0.8rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
        }
        
        .prompt-btn:hover {
            background-color: var(--secondary-color);
        }
        
        .prompt-btn:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }
        
        /* 响应结果区域 */
        .response-container {
            padding: 1rem;
            background-color: white;
            border-top: 1px solid #e0e0e0;
        }
        
        .response-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark-color);
        }
        
        .response-content {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            min-height: 50px;
            font-family: 'Consolas', monospace;
            white-space: pre-wrap;
        }
        
        .loading {
            color: #7f8c8d;
            font-style: italic;
        }
    </style>
</head>

<body>
    <!-- 顶栏 -->
    <header class="header">
        <div class="header-content">
            <div class="logo">
                <span class="logo-icon"><img src="/static/logoB.png" width="50px" /></span>
                <div>
                    <h1>AI机械臂编程体验</h1>
                    <p>通过终端命令控制机械臂，体验机器人控制的乐趣！</p>
                </div>
            </div>
            <div class="header-info">
                <img src="/static/armbot.png" width="50px" style="float:left;margin-right:15px;    margin-top: 1px;" />
                <small>中小学人工智能科普展台</small>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-container">
        <!-- 左侧手册栏 -->
        <section class="manual-panel">
            <div class="manual-header">
                <img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" alt="机械臂" class="robot-icon">
                <h2>机械臂控制手册</h2>
            </div>

            <div class="section">
                <h3 class="section-title">系统说明</h3>
                <p>访问此页面时，系统会自动启动agent.py具身智能交互项目。您可以在下方输入框中输入自然语言指令，系统会自动分析并执行相应操作。</p>
                <p>例如："抓取黄色方块"、"移动到指定位置"等自然语言指令。</p>
            </div>

            <div class="section">
                <h3 class="section-title">使用示例</h3>

                <div class="example">
                    <div class="example-title">示例1：抓取物体</div>
                    <pre>grab a yellow cube</pre>
                </div>

                <div class="example">
                    <div class="example-title">示例2：移动物体</div>
                    <pre>grab a yellow cube and move it to (0,200)</pre>
                </div>

                <div class="example">
                    <div class="example-title">示例3：堆叠操作</div>
                    <pre>stack two cubes together</pre>
                </div>

                <div class="example">
                    <div class="example-title">示例4：编程复杂移动</div>
                    <pre>write code calcute exact coordinates and 
    place 6 cubes into a circle</pre>
                </div>
            </div>

            <div class="section">
                <h3 class="section-title">使用说明</h3>
                <ol style="padding-left: 1.2rem;">
                    <li>在右侧输入框输入自然语言指令</li>
                    <li>点击"执行指令"按钮或按回车键发送指令</li>
                    <li>等待系统处理并查看执行结果</li>
                    <li>可以根据执行结果调整指令</li>
                </ol>
            </div>
        </section>

        <!-- 右侧交互区 -->
        <section class="terminal-panel">
            <div class="terminal-header">
                <div class="terminal-title">
                    <span class="connection-status" id="connection-status"></span>
                    AI指令交互区
                </div>
                <div>
                    <small>输入自然语言指令控制机械臂</small>
                </div>
            </div>

            <div class="terminal-window" id="terminal-output"></div>

            <div class="prompt-input-container">
                <input type="text" class="prompt-input" id="prompt-input" placeholder="请输入指令，例如：抓取黄色方块" autofocus>
                <button class="prompt-btn" id="execute-button">执行指令</button>
            </div>
            
            <div class="response-container">
                <div class="response-title">执行结果：</div>
                <div class="response-content" id="response-content">等待指令执行...</div>
            </div>
            
            <div class="controls">
                <!-- 添加用于显示上传消息的 div -->
                <div id="upload-message"></div>
            </div>
        </section>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const promptInput = document.getElementById('prompt-input');
            const executeButton = document.getElementById('execute-button');
            const responseContent = document.getElementById('response-content');
            const terminalOutput = document.getElementById('terminal-output');
            const connectionStatus = document.getElementById('connection-status');
            
            // 初始化连接状态
            connectionStatus.classList.add('disconnected');
            
            // 初始化终端输出
            terminalOutput.textContent = '欢迎使用AI机械臂控制系统！\n在这里输入自然语言指令控制机械臂。\n-------------------------------------\n';

            // 发送Prompt指令到后端
            function sendPrompt(prompt) {
                // 禁用按钮防止重复提交
                executeButton.disabled = true;
                executeButton.textContent = '执行中...';
                
                // 显示加载状态
                responseContent.textContent = '指令执行中...';
                responseContent.className = 'response-content loading';
                
                // 在终端中显示用户输入
                terminalOutput.textContent += '> ' + prompt + '\n';
                
                // 滚动到底部
                terminalOutput.scrollTop = terminalOutput.scrollHeight;
                
                // 更新连接状态
                connectionStatus.classList.remove('connected', 'disconnected');
                connectionStatus.classList.add('disconnected');

                fetch('/armbot/execute', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ prompt: prompt })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('HTTP error! status: ' + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    // 显示返回结果
                    if (data.success) {
                        responseContent.textContent = data.output || '指令执行完成';
                        responseContent.className = 'response-content';
                        terminalOutput.textContent += (data.output || '指令执行完成') + '\n-------------------------------------\n';
                    } else {
                        responseContent.textContent = '执行失败: ' + (data.error || '未知错误');
                        responseContent.className = 'response-content';
                        terminalOutput.textContent += '执行失败: ' + (data.error || '未知错误') + '\n-------------------------------------\n';
                    }
                    
                    terminalOutput.scrollTop = terminalOutput.scrollHeight;
                    
                    // 更新连接状态
                    connectionStatus.classList.remove('disconnected');
                    connectionStatus.classList.add('connected');
                })
                .catch(error => {
                    console.error('Error:', error);
                    responseContent.textContent = '错误: 无法连接到服务器 - ' + error.message;
                    responseContent.className = 'response-content';
                    terminalOutput.textContent += '错误: 无法连接到服务器 - ' + error.message + '\n-------------------------------------\n';
                    terminalOutput.scrollTop = terminalOutput.scrollHeight;
                })
                .finally(() => {
                    // 恢复按钮状态
                    executeButton.disabled = false;
                    executeButton.textContent = '执行指令';
                });
            }

            // 处理回车键
            promptInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const prompt = promptInput.value.trim();
                    if (prompt) {
                        sendPrompt(prompt);
                        promptInput.value = '';
                    }
                }
            });

            // 处理执行按钮点击
            executeButton.addEventListener('click', function() {
                const prompt = promptInput.value.trim();
                if (prompt) {
                    sendPrompt(prompt);
                    promptInput.value = '';
                }
            });

            // 点击终端窗口时聚焦输入框
            terminalOutput.addEventListener('click', function() {
                promptInput.focus();
            });
            
            // 初始时聚焦输入框
            promptInput.focus();
        });
    </script>
</body>

</html>