Spaces:

lexlepty
/

functioncall

Sleeping

App Files Files Community

mistpe commited on Oct 14, 2024

Commit

c294455

verified ·

1 Parent(s): 7b4a123

Delete index完美的样式.html

Browse files

Files changed (1) hide show

index完美的样式.html +0 -517

index完美的样式.html DELETED Viewed

@@ -1,517 +0,0 @@
-<!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>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
-   <style>
-    :root {
-        --primary-color: #3498db;
-        --secondary-color: #2ecc71;
-        --background-color: #f5f5f5;
-        --chat-background: #ffffff;
-        --text-color: #333333;
-        --chat-bubble-user: #e8f5fe;
-        --chat-bubble-ai: #f0f0f0;
-        --sidebar-background: #ffffff;
-        --input-background: #ffffff;
-        --send-button-color: #4CAF50;
-        --console-background: #f8f9fa;
-        --console-text: #495057;
-        --fold-background: #f8f9fa;
-        --fold-text: #495057;
-        --border-color: transparent;
-        --search-result-background: #f8f9fa;
-    }
-    .dark-mode {
-        --primary-color: #3498db;
-        --secondary-color: #2ecc71;
-        --background-color: #1e2124;
-        --chat-background: #36393f;
-        --text-color: #dcddde;
-        --chat-bubble-user: #4e5d94;
-        --chat-bubble-ai: #40444b;
-        --sidebar-background: #2f3136;
-        --input-background: #40444b;
-        --send-button-color: #7289da;
-        --console-background: #2f3136;
-        --console-text: #dcddde;
-        --fold-background: #2f3136;
-        --fold-text: #dcddde;
-        --border-color: #ffffff;
-        --search-result-background: #2f3136;
-    }
-    body {
-        background-color: var(--background-color);
-        color: var(--text-color);
-        transition: all 0.3s ease;
-    }
-    .chat-container {
-        background-color: var(--chat-background);
-        transition: all 0.3s ease;
-        border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    }
-    .chat-bubble {
-        max-width: 80%;
-        padding: 12px;
-        border-radius: 12px;
-        margin-bottom: 12px;
-        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-        transition: all 0.3s ease;
-    }
-    .user-bubble {
-        background-color: var(--chat-bubble-user);
-        color: var(--text-color);
-        margin-left: auto;
-        border-bottom-right-radius: 4px;
-    }
-    .ai-bubble {
-        background-color: var(--chat-bubble-ai);
-        color: var(--text-color);
-        margin-right: auto;
-        border-bottom-left-radius: 4px;
-    }
-    .dark-mode .chat-bubble {
-        border: 1px solid var(--border-color);
-    }
-    .status-indicator {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        display: inline-block;
-        margin-right: 8px;
-        transition: all 0.3s ease;
-    }
-    .status-active {
-        background-color: var(--secondary-color);
-    }
-    .status-inactive {
-        background-color: #95a5a6;
-    }
-    .sidebar {
-        background-color: var(--sidebar-background);
-        transition: all 0.3s ease;
-        border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    }
-    #user-input {
-        background-color: var(--input-background);
-        color: var(--text-color);
-        transition: all 0.3s ease;
-        border-radius: 8px;
-        padding-right: 40px;
-    }
-    #send-btn {
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        background: none;
-        border: none;
-        color: var(--send-button-color);
-        font-size: 20px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-    #send-btn:hover {
-        opacity: 0.8;
-    }
-    .console {
-        background-color: var(--console-background);
-        color: var(--console-text);
-        transition: all 0.3s ease;
-        border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    }
-    #status-log {
-        background-color: var(--console-background);
-        color: var(--console-text);
-        transition: all 0.3s ease;
-        border: 1px solid var(--border-color);
-    }
-    /* 滚动条样式 */
-    ::-webkit-scrollbar {
-        width: 8px;
-    }
-    ::-webkit-scrollbar-track {
-        background: var(--chat-background);
-    }
-    ::-webkit-scrollbar-thumb {
-        background: var(--primary-color);
-        border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        background: var(--secondary-color);
-    }
-    /* 代码块样式 */
-    .hljs {
-        background: var(--fold-background) !important;
-        color: var(--fold-text) !important;
-    }
-     /* details {
-        background-color: var(--search-result-background);
-        color: var(--text-color);
-        border-radius: 8px;
-        padding: 10px;
-        margin-bottom: 10px;
-        transition: all 0.3s ease;
-        border: 1px solid var(--border-color);
-    }
-   summary {
-        cursor: pointer;
-        font-weight: bold;
-        color: var(--text-color);
-    }
-    details ul {
-        list-style-type: none;
-        padding-left: 0;
-    }
-    details li {
-        background-color: var(--chat-bubble-ai);
-        color: var(--text-color);
-        padding: 10px;
-        margin-top: 10px;
-        border-radius: 4px;
-        border: 1px solid var(--border-color);
-    }
-    details * {
-        background-color: var(--search-result-background);
-    } */
-     .search-results {
-        background-color: var(--search-result-background);
-        color: var(--text-color);
-        border: 1px solid var(--border-color);
-    }
-    .search-results summary {
-        cursor: pointer;
-        font-weight: bold;
-    }
-    .search-results ul {
-        list-style-type: none;
-        padding-left: 0;
-    }
-    .search-results li {
-        background-color: var(--chat-bubble-ai);
-        border: 1px solid var(--border-color);
-    }
-    /* 控制台消息条目样式 */
-    #status-log div {
-        background-color: var(--console-background);
-        color: var(--console-text);
-        border: 1px solid var(--border-color);
-    }
-    @media (max-width: 768px) {
-        .sidebar {
-            position: fixed;
-            right: -300px;
-            top: 0;
-            bottom: 0;
-            width: 300px;
-            z-index: 1000;
-            transition: right 0.3s ease-in-out;
-        }
-        .sidebar.open {
-            right: 0;
-        }
-        .sidebar-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 999;
-        }
-        .sidebar-overlay.show {
-            display: block;
-        }
-    }
-</style>
-</head>
-<body class="h-screen flex flex-col md:flex-row p-4">
-    <!-- 主聊天窗口 -->
-    <div class="chat-container flex-grow md:w-3/4 p-4 flex flex-col h-screen mr-4">
-        <div id="chat-window" class="flex-grow overflow-y-auto mb-4 p-4 rounded-lg shadow-inner"></div>
-        <div class="relative">
-            <input id="user-input" type="text" class="w-full border p-2" placeholder="输入您的问题...">
-            <button id="send-btn" class="text-2xl">
-                <i class="fas fa-paper-plane"></i>
-            </button>
-        </div>
-    </div>
-    <!-- 右侧控制台 -->
-    <div class="sidebar console md:w-1/4 p-4 h-screen overflow-y-auto">
-        <h2 class="text-xl font-bold mb-4">运行状态</h2>
-        <div class="mb-4">
-            <div class="mb-2">
-                <span class="status-indicator" id="main-model-status"></span>
-                主模型
-            </div>
-            <div class="mb-2">
-                <span class="status-indicator" id="sub-model-status"></span>
-                次模型
-            </div>
-            <div class="mb-2">
-                <span class="status-indicator" id="search-status"></span>
-                搜索
-            </div>
-            <div>
-                <span class="status-indicator" id="email-status"></span>
-                邮件发送
-            </div>
-        </div>
-        <div id="status-log" class="p-2 rounded h-64 overflow-y-auto mb-4"></div>
-        <button id="settings-btn" class="w-full bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200">
-            <i class="fas fa-cog"></i> 设置
-        </button>
-    </div>
-    <!-- 移动端侧边栏切换按钮 -->
-    <button id="sidebar-toggle" class="md:hidden fixed top-4 right-4 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200 z-50">
-        <i class="fas fa-bars"></i>
-    </button>
-    <!-- 移动端侧边栏遮罩 -->
-    <div id="sidebar-overlay" class="sidebar-overlay"></div>
-    <!-- 暗色模式切换按钮 -->
-    <button id="dark-mode-toggle" class="fixed top-4 left-4 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200">
-        <i class="fas fa-moon"></i>
-    </button>
-    <!-- 设置对话框 -->
-    <div id="settings-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center z-50">
-        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl">
-            <h2 class="text-xl font-bold mb-4">设置</h2>
-            <div class="mb-4">
-                <label for="max-history" class="block mb-2">保留对话轮数:</label>
-                <input type="number" id="max-history" class="border rounded p-2 w-full dark:bg-gray-700 dark:text-white" min="1" max="50" value="10">
-            </div>
-            <div class="flex justify-end">
-                <button id="save-settings" class="bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600 transition duration-200">保存</button>
-                <button id="cancel-settings" class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200">取消</button>
-            </div>
-        </div>
-    </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-    <script>
-        const chatWindow = document.getElementById('chat-window');
-        const userInput = document.getElementById('user-input');
-        const sendBtn = document.getElementById('send-btn');
-        const mainModelStatus = document.getElementById('main-model-status');
-        const subModelStatus = document.getElementById('sub-model-status');
-        const searchStatus = document.getElementById('search-status');
-        const emailStatus = document.getElementById('email-status');
-        const statusLog = document.getElementById('status-log');
-        const settingsBtn = document.getElementById('settings-btn');
-        const settingsModal = document.getElementById('settings-modal');
-        const saveSettingsBtn = document.getElementById('save-settings');
-        const cancelSettingsBtn = document.getElementById('cancel-settings');
-        const maxHistoryInput = document.getElementById('max-history');
-        const darkModeToggle = document.getElementById('dark-mode-toggle');
-        const sidebarToggle = document.getElementById('sidebar-toggle');
-        const sidebar = document.querySelector('.sidebar');
-        const sidebarOverlay = document.getElementById('sidebar-overlay');
-        let conversationHistory = [];
-        let maxHistory = 10;
-        function addMessage(content, isUser) {
-            const bubble = document.createElement('div');
-            bubble.className = `chat-bubble ${isUser ? 'user-bubble' : 'ai-bubble'}`;
-            bubble.innerHTML = isUser ? content : marked.parse(content);
-            chatWindow.appendChild(bubble);
-            chatWindow.scrollTop = chatWindow.scrollHeight;
-            bubble.querySelectorAll('pre code').forEach((block) => {
-                hljs.highlightBlock(block);
-            });
-            conversationHistory.push({
-                role: isUser ? 'user' : 'assistant',
-                content: content
-            });
-            if (conversationHistory.length > maxHistory * 2) {
-                conversationHistory = conversationHistory.slice(-maxHistory * 2);
-            }
-        }
-        function updateStatus(mainActive, subActive, searchActive, emailActive) {
-            mainModelStatus.className = `status-indicator ${mainActive ? 'status-active' : 'status-inactive'}`;
-            subModelStatus.className = `status-indicator ${subActive ? 'status-active' : 'status-inactive'}`;
-            searchStatus.className = `status-indicator ${searchActive ? 'status-active' : 'status-inactive'}`;
-            emailStatus.className = `status-indicator ${emailActive ? 'status-active' : 'status-inactive'}`;
-        }
-        function addStatusLog(message) {
-            const logEntry = document.createElement('div');
-            logEntry.className = 'mb-2 p-2 bg-white dark:bg-gray-700 rounded shadow';
-            logEntry.textContent = message;
-            statusLog.appendChild(logEntry);
-            statusLog.scrollTop = statusLog.scrollHeight;
-        }
-        function displaySearchResults(results, type) {
-            const searchResults = document.createElement('details');
-            searchResults.className = 'search-results mb-2 p-2 rounded';
-            const summary = document.createElement('summary');
-            summary.textContent = type === 'papers' ? '论文搜索结果' : '搜索结果';
-            searchResults.appendChild(summary);
-            const resultsList = document.createElement('ul');
-            resultsList.className = 'mt-2';
-            results.forEach(result => {
-                const li = document.createElement('li');
-                li.className = 'mb-2 p-2 rounded';
-                if (type === 'papers') {
-                    li.innerHTML = `
-                        <strong>标题:</strong> ${result.标题}<br>
-                        <strong>作者:</strong> ${result.作者}<br>
-                        <strong>DOI:</strong> ${result.DOI}<br>
-                        <strong>ISBN:</strong> ${result.ISBN}<br>
-                        <strong>摘要:</strong> ${result.摘要}
-                    `;
-                } else {
-                    li.innerHTML = `<strong>${result.title}</strong><br>${result.body}`;
-                }
-                resultsList.appendChild(li);
-            });
-            searchResults.appendChild(resultsList);
-            chatWindow.appendChild(searchResults);
-        }
-        async function sendMessage() {
-            const question = userInput.value.trim();
-            if (!question) return;
-            addMessage(question, true);
-            userInput.value = '';
-            updateStatus(false, false, false, false);
-            statusLog.innerHTML = '';
-            addStatusLog('开始处理问题...');
-            try {
-                const response = await fetch('/chat', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        question,
-                        history: conversationHistory.slice(-maxHistory * 2 + 1)
-                    })
-                });
-                const data = await response.json();
-                data.status_log.forEach(log => addStatusLog(log));
-                updateStatus(true, true, data.search_used, data.email_sent);
-                if (data.search_used) {
-                    if (Array.isArray(data.search_results) && data.search_results.length > 0 && 'DOI' in data.search_results[0]) {
-                    displaySearchResults(data.search_results, 'papers');
-                } else {
-                    displaySearchResults(data.search_results, 'web');
-                }
-            }
-            addMessage(data.response, false);
-            addStatusLog('回答完成');
-        } catch (error) {
-            console.error('Error:', error);
-            addMessage('发生错误，请稍后再试。', false);
-            updateStatus(false, false, false, false);
-            addStatusLog('发生错误');
-        }
-    }
-    sendBtn.addEventListener('click', sendMessage);
-    userInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-            sendMessage();
-        }
-    });
-    // 设置相关功能
-    settingsBtn.addEventListener('click', () => {
-        settingsModal.classList.remove('hidden');
-        maxHistoryInput.value = maxHistory;
-    });
-    saveSettingsBtn.addEventListener('click', async () => {
-        const newMaxHistory = parseInt(maxHistoryInput.value);
-        if (newMaxHistory >= 1 && newMaxHistory <= 50) {
-            maxHistory = newMaxHistory;
-            try {
-                const response = await fetch('/settings', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ max_history: maxHistory })
-                });
-                const data = await response.json();
-                if (data.status === 'success') {
-                    alert('设置已保存');
-                } else {
-                    alert('保存设置时出错');
-                }
-            } catch (error) {
-                console.error('Error:', error);
-                alert('保存设置时出错');
-            }
-            settingsModal.classList.add('hidden');
-        } else {
-            alert('请输入1到50之间的数字');
-        }
-    });
-    cancelSettingsBtn.addEventListener('click', () => {
-        settingsModal.classList.add('hidden');
-    });
-    // 暗色模式切换
-    darkModeToggle.addEventListener('click', () => {
-        document.body.classList.toggle('dark-mode');
-        updateDarkModeIcon();
-    });
-    function updateDarkModeIcon() {
-        const icon = darkModeToggle.querySelector('i');
-        if (document.body.classList.contains('dark-mode')) {
-            icon.classList.remove('fa-moon');
-            icon.classList.add('fa-sun');
-        } else {
-            icon.classList.remove('fa-sun');
-            icon.classList.add('fa-moon');
-        }
-    }
-    // 初始化暗色模式
-    function initDarkMode() {
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            document.body.classList.add('dark-mode');
-        }
-        updateDarkModeIcon();
-    }
-    // 监听系统主题变化
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-        if (e.matches) {
-            document.body.classList.add('dark-mode');
-        } else {
-            document.body.classList.remove('dark-mode');
-        }
-        updateDarkModeIcon();
-    });
-    // 侧边栏控制
-    sidebarToggle.addEventListener('click', () => {
-        sidebar.classList.toggle('open');
-        sidebarOverlay.classList.toggle('show');
-    });
-    sidebarOverlay.addEventListener('click', () => {
-        sidebar.classList.remove('open');
-        sidebarOverlay.classList.remove('show');
-    });
-    // 页面加载完成后初始化
-    window.addEventListener('load', () => {
-        initDarkMode();
-    });
-    // 监听窗口大小变化，在大屏幕时关闭侧边栏遮罩
-    window.addEventListener('resize', () => {
-        if (window.innerWidth >= 768) {
-            sidebar.classList.remove('open');
-            sidebarOverlay.classList.remove('show');
-        }
-    });
-      </script>
-</body>
-</html>