Spaces:

raineye
/

ds

Running

App Files Files Community

raineye commited on Apr 6, 2025

Commit

0cc9087

verified ·

1 Parent(s): 3b6855c

Add 1 files

Browse files

Files changed (1) hide show

index.html +656 -631

index.html CHANGED Viewed

@@ -3,704 +3,729 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepSeek Chat</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* 自定义滚动条 */
-        ::-webkit-scrollbar {
-            width: 6px;
         }
-        ::-webkit-scrollbar-track {
-            background: #1a1a1a;
         }
-        ::-webkit-scrollbar-thumb {
-            background: #4b5563;
-            border-radius: 3px;
         }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #6b7280;
         }
-        /* 打字动画 */
-        @keyframes typing {
-            from { width: 0 }
-            to { width: 100% }
         }
-        .typing-animation {
             overflow: hidden;
-            white-space: nowrap;
-            animation: typing 1s steps(40, end);
-        }
-        /* 消息气泡动画 */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .message-fade-in {
-            animation: fadeIn 0.3s ease-out forwards;
-        }
-        /* 输入框聚焦效果 */
-        .input-focus-effect:focus {
-            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
-        }
-        /* 语音录制动画 */
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
-        }
-        .recording-animation {
-            animation: pulse 1.5s infinite;
-        }
-        /* 模态框动画 */
-        @keyframes modalFadeIn {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .modal-animation {
-            animation: modalFadeIn 0.3s ease-out;
         }
     </style>
 </head>
-<body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden">
-    <!-- 顶部导航栏 -->
-    <header class="bg-gray-800 border-b border-gray-700 py-3 px-4 flex items-center justify-between">
-        <div class="flex items-center space-x-2">
-            <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
-                <i class="fas fa-robot text-white"></i>
             </div>
-            <h1 class="text-xl font-bold text-white">DeepSeek Chat</h1>
-        </div>
-        <div class="flex items-center space-x-4">
-            <button id="theme-toggle" class="text-gray-400 hover:text-white transition-colors">
-                <i class="fas fa-moon"></i>
             </button>
-            <button id="settings-button" class="text-gray-400 hover:text-white transition-colors">
-                <i class="fas fa-cog"></i>
-            </button>
-            <button id="user-button" class="text-gray-400 hover:text-white transition-colors">
-                <i class="fas fa-user"></i>
-            </button>
-        </div>
-    </header>
-    <!-- 主聊天区域 -->
-    <main class="flex-1 overflow-y-auto p-4 space-y-6" id="chat-container">
-        <!-- 欢迎消息 -->
-        <div class="max-w-3xl mx-auto message-fade-in">
-            <div class="flex space-x-3">
-                <div class="flex-shrink-0">
-                    <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
-                        <i class="fas fa-robot text-white"></i>
                     </div>
                 </div>
-                <div class="flex-1 min-w-0">
-                    <div class="bg-gray-800 rounded-lg p-4">
-                        <p class="text-white font-medium">DeepSeek Chat</p>
-                        <div class="mt-2 text-gray-300">
-                            <p>你好！我是DeepSeek Chat，一个强大的AI助手。我可以帮助你解答问题、提供建议、分析数据等等。</p>
-                            <p class="mt-2">你可以问我任何问题，我会尽力提供最准确和有用的回答。</p>
-                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        <!-- 示例问题 -->
-        <div class="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-3">
-            <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left transition-colors message-fade-in" onclick="insertExample(this)">
-                <p class="text-sm text-gray-400">示例问题</p>
-                <p class="mt-1 text-white">如何提高我的Python编程技能？</p>
-            </button>
-            <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left transition-colors message-fade-in" onclick="insertExample(this)">
-                <p class="text-sm text-gray-400">示例问题</p>
-                <p class="mt-1 text-white">解释量子计算的基本概念</p>
-            </button>
-            <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left transition-colors message-fade-in" onclick="insertExample(this)">
-                <p class="text-sm text-gray-400">示例问题</p>
-                <p class="mt-1 text-white">写一封专业的求职信</p>
-            </button>
-            <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 text-left transition-colors message-fade-in" onclick="insertExample(this)">
-                <p class="text-sm text-gray-400">示例问题</p>
-                <p class="mt-1 text-white">如何制定一个有效的学习计划？</p>
-            </button>
-        </div>
-    </main>
-    <!-- 输入区域 -->
-    <div class="bg-gray-800 border-t border-gray-700 p-4">
-        <div class="max-w-3xl mx-auto">
-            <form id="chat-form" class="relative">
-                <div class="flex items-end space-x-2">
-                    <div class="flex-1 relative">
-                        <textarea
-                            id="message-input"
-                            rows="1"
-                            class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 pr-12 text-white placeholder-gray-400 focus:outline-none input-focus-effect resize-none"
-                            placeholder="输入消息..."
-                            oninput="autoResize(this)"
-                        ></textarea>
-                        <div class="absolute right-2 bottom-2 flex space-x-1">
-                            <button type="button" id="attach-button" class="text-gray-400 hover:text-white p-1 rounded-full transition-colors">
-                                <i class="fas fa-paperclip"></i>
-                            </button>
-                            <button type="button" id="voice-button" class="text-gray-400 hover:text-white p-1 rounded-full transition-colors">
-                                <i class="fas fa-microphone"></i>
-                            </button>
                         </div>
                     </div>
-                    <button
-                        type="submit"
-                        id="send-button"
-                        class="bg-blue-600 hover:bg-blue-700 text-white rounded-lg p-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                        disabled
-                    >
-                        <i class="fas fa-paper-plane"></i>
-                    </button>
                 </div>
-            </form>
-            <p class="text-xs text-gray-500 mt-2 text-center">DeepSeek Chat 可能会产生不准确的信息，请验证重要信息。</p>
-        </div>
-    </div>
-    <!-- 文件选择模态框 -->
-    <div id="file-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-medium text-white">选择文件</h3>
-                <button id="close-file-modal" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center mb-4">
-                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
-                <p class="text-gray-300 mb-2">拖放文件到这里或点击选择</p>
-                <input type="file" id="file-input" class="hidden" multiple>
-                <button id="select-file-button" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
-                    选择文件
-                </button>
-            </div>
-            <div id="selected-files" class="hidden">
-                <p class="text-gray-300 mb-2">已选择文件:</p>
-                <ul id="file-list" class="text-gray-400 text-sm"></ul>
-            </div>
-            <div class="flex justify-end space-x-3 mt-4">
-                <button id="cancel-upload" class="px-4 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700">
-                    取消
-                </button>
-                <button id="confirm-upload" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
-                    上传
                 </button>
-            </div>
-        </div>
-    </div>
-    <!-- 语音录制模态框 -->
-    <div id="voice-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-medium text-white">语音输入</h3>
-                <button id="close-voice-modal" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-times"></i>
-                </button>
             </div>
-            <div class="text-center mb-6">
-                <div class="w-20 h-20 bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i id="voice-icon" class="fas fa-microphone text-3xl text-blue-500"></i>
                 </div>
-                <p id="voice-status" class="text-gray-300">点击下方按钮开始录音</p>
-                <div class="mt-2 flex justify-center space-x-4">
-                    <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
-                    <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
-                    <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
                 </div>
             </div>
-            <div class="flex justify-center">
-                <button id="start-recording" class="px-6 py-3 rounded-full bg-red-600 text-white hover:bg-red-700 flex items-center">
-                    <i class="fas fa-microphone mr-2"></i>
-                    <span>开始录音</span>
-                </button>
-                <button id="stop-recording" class="px-6 py-3 rounded-full bg-gray-700 text-white hover:bg-gray-600 flex items-center hidden">
-                    <i class="fas fa-stop mr-2"></i>
-                    <span>停止</span>
-                </button>
-            </div>
-            <div id="recording-timer" class="text-center mt-4 text-gray-400 hidden">
-                <i class="fas fa-circle text-red-500 mr-2 recording-animation"></i>
-                <span>00:00</span>
-            </div>
         </div>
-    </div>
-    <!-- 设置模态框 -->
-    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
             <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-medium text-white">设置</h3>
-                <button id="close-settings-modal" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="space-y-4">
                 <div>
-                    <label class="block text-gray-300 mb-2">语言</label>
-                    <select class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option>简体中文</option>
-                        <option>English</option>
-                        <option>Español</option>
-                        <option>日本語</option>
-                    </select>
                 </div>
                 <div>
-                    <label class="block text-gray-300 mb-2">回答长度</label>
-                    <select class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option>简短</option>
-                        <option selected>中等</option>
-                        <option>详细</option>
-                    </select>
-                </div>
-                <div class="flex items-center justify-between">
-                    <span class="text-gray-300">历史记录</span>
-                    <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" class="sr-only peer" checked>
-                        <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                    </label>
                 </div>
-                <div class="flex items-center justify-between">
-                    <span class="text-gray-300">阅读模式</span>
-                    <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" class="sr-only peer">
-                        <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                    </label>
-                </div>
-            </div>
-            <div class="mt-6 flex justify-end space-x-3">
-                <button id="cancel-settings" class="px-4 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700">
-                    取消
-                </button>
-                <button id="save-settings" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
-                    保存设置
-                </button>
-            </div>
-        </div>
-    </div>
-    <!-- 用户信息模态框 -->
-    <div id="user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-medium text-white">用户信息</h3>
-                <button id="close-user-modal" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="flex flex-col items-center mb-6">
-                <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mb-3">
-                    <i class="fas fa-user text-3xl text-white"></i>
                 </div>
-                <h4 class="text-white font-medium">访客用户</h4>
-                <p class="text-gray-400 text-sm">未登录</p>
-            </div>
-            <div class="space-y-3">
-                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
-                    <span class="text-gray-300">登录/注册</span>
-                    <i class="fas fa-chevron-right text-gray-400"></i>
-                </button>
-                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
-                    <span class="text-gray-300">订阅计划</span>
-                    <i class="fas fa-chevron-right text-gray-400"></i>
-                </button>
-                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
-                    <span class="text-gray-300">帮助中心</span>
-                    <i class="fas fa-chevron-right text-gray-400"></i>
-                </button>
-                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
-                    <span class="text-gray-300">反馈建议</span>
-                    <i class="fas fa-chevron-right text-gray-400"></i>
-                </button>
-            </div>
-            <div class="mt-6">
-                <button id="logout-button" class="w-full px-4 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700">
-                    退出登录
                 </button>
             </div>
         </div>
     </div>
     <script>
-        // 自动调整输入框高度
-        function autoResize(textarea) {
-            textarea.style.height = 'auto';
-            textarea.style.height = textarea.scrollHeight + 'px';
-            // 启用/禁用发送按钮
-            document.getElementById('send-button').disabled = textarea.value.trim() === '';
-        }
-        // 插入示例问题
-        function insertExample(button) {
-            const question = button.querySelector('p:not(.text-sm)').textContent;
-            const input = document.getElementById('message-input');
-            input.value = question;
-            autoResize(input);
-            input.focus();
-        }
-        // 处理表单提交
-        document.getElementById('chat-form').addEventListener('submit', function(e) {
             e.preventDefault();
-            const input = document.getElementById('message-input');
-            const message = input.value.trim();
-            if (message) {
-                sendMessage(message);
-                input.value = '';
-                autoResize(input);
             }
-        });
-        // 发送消息
-        function sendMessage(message) {
-            const chatContainer = document.getElementById('chat-container');
-            // 添加用户消息
-            const userMessageDiv = document.createElement('div');
-            userMessageDiv.className = 'max-w-3xl mx-auto message-fade-in';
-            userMessageDiv.innerHTML = `
-                <div class="flex space-x-3 justify-end">
-                    <div class="flex-1 min-w-0 flex justify-end">
-                        <div class="bg-blue-600 rounded-lg p-4 max-w-[80%]">
-                            <p class="text-white">${message}</p>
-                        </div>
-                    </div>
-                    <div class="flex-shrink-0">
-                        <div class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center">
-                            <i class="fas fa-user text-gray-300"></i>
-                        </div>
-                    </div>
-                </div>
-            `;
-            chatContainer.appendChild(userMessageDiv);
-            // 滚动到底部
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-            // 显示AI正在输入
-            const aiTypingDiv = document.createElement('div');
-            aiTypingDiv.className = 'max-w-3xl mx-auto message-fade-in';
-            aiTypingDiv.innerHTML = `
-                <div class="flex space-x-3">
-                    <div class="flex-shrink-0">
-                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
-                            <i class="fas fa-robot text-white"></i>
-                        </div>
-                    </div>
-                    <div class="flex-1 min-w-0">
-                        <div class="bg-gray-800 rounded-lg p-4">
-                            <div class="flex space-x-2 items-center">
-                                <div class="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
-                                <div class="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
-                                <div class="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-            chatContainer.appendChild(aiTypingDiv);
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-            // 模拟AI回复（实际应用中这里应该是API调用）
-            setTimeout(() => {
-                // 移除"正在输入"状态
-                chatContainer.removeChild(aiTypingDiv);
-                // 添加AI回复
-                const aiResponseDiv = document.createElement('div');
-                aiResponseDiv.className = 'max-w-3xl mx-auto message-fade-in';
-                // 模拟不同类型的回复
-                const responses = [
-                    `我理解你想了解"${message}"。这是一个很好的问题。让我为你详细解释...`,
-                    `关于"${message}"，有几个关键点需要考虑...`,
-                    `"${message}"是一个复杂的话题。简而言之...`,
-                    `我可以从几个角度回答"${message}"这个问题...`
-                ];
-                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
-                aiResponseDiv.innerHTML = `
-                    <div class="flex space-x-3">
-                        <div class="flex-shrink-0">
-                            <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
-                                <i class="fas fa-robot text-white"></i>
-                            </div>
-                        </div>
-                        <div class="flex-1 min-w-0">
-                            <div class="bg-gray-800 rounded-lg p-4">
-                                <p class="text-white font-medium">DeepSeek Chat</p>
-                                <div class="mt-2 text-gray-300">
-                                    <p>${randomResponse}</p>
-                                    <p class="mt-2">如果你需要更详细的信息或有其他问题，请随时告诉我。</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                chatContainer.appendChild(aiResponseDiv);
-                chatContainer.scrollTop = chatContainer.scrollHeight;
-            }, 1500);
-        }
-        // 主题切换
-        document.getElementById('theme-toggle').addEventListener('click', function() {
-            const html = document.documentElement;
-            const isDark = html.classList.contains('dark');
-            if (isDark) {
-                html.classList.remove('dark');
-                html.classList.add('light');
-                this.innerHTML = '<i class="fas fa-sun"></i>';
-                document.body.className = 'bg-gray-100 text-gray-900 h-screen flex flex-col overflow-hidden';
-            } else {
-                html.classList.remove('light');
-                html.classList.add('dark');
-                this.innerHTML = '<i class="fas fa-moon"></i>';
-                document.body.className = 'bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden';
-            }
-        });
-        // 文件上传功能
-        const fileModal = document.getElementById('file-modal');
-        const attachButton = document.getElementById('attach-button');
-        const closeFileModal = document.getElementById('close-file-modal');
-        const selectFileButton = document.getElementById('select-file-button');
-        const fileInput = document.getElementById('file-input');
-        const cancelUpload = document.getElementById('cancel-upload');
-        const confirmUpload = document.getElementById('confirm-upload');
-        const selectedFiles = document.getElementById('selected-files');
-        const fileList = document.getElementById('file-list');
-        attachButton.addEventListener('click', () => {
-            fileModal.classList.remove('hidden');
-        });
-        closeFileModal.addEventListener('click', () => {
-            fileModal.classList.add('hidden');
-        });
-        selectFileButton.addEventListener('click', () => {
-            fileInput.click();
-        });
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files.length > 0) {
-                fileList.innerHTML = '';
-                for (let i = 0; i < e.target.files.length; i++) {
-                    const file = e.target.files[i];
-                    const listItem = document.createElement('li');
-                    listItem.textContent = `${file.name} (${formatFileSize(file.size)})`;
-                    fileList.appendChild(listItem);
-                }
-                selectedFiles.classList.remove('hidden');
             }
-        });
-        cancelUpload.addEventListener('click', () => {
-            fileInput.value = '';
-            selectedFiles.classList.add('hidden');
-            fileModal.classList.add('hidden');
-        });
-        confirmUpload.addEventListener('click', () => {
-            if (fileInput.files.length > 0) {
-                // 这里应该是实际上传文件的代码
-                alert(`${fileInput.files.length}个文件已选择，准备上传`);
-                fileModal.classList.add('hidden');
-                // 模拟上传成功后在聊天中显示
                 setTimeout(() => {
-                    const chatContainer = document.getElementById('chat-container');
-                    const fileMessageDiv = document.createElement('div');
-                    fileMessageDiv.className = 'max-w-3xl mx-auto message-fade-in';
-                    let filesHtml = '';
-                    for (let i = 0; i < fileInput.files.length; i++) {
-                        const file = fileInput.files[i];
-                        filesHtml += `
-                            <div class="flex items-center bg-gray-700 rounded-lg p-2 mt-2">
-                                <i class="fas fa-file-alt text-gray-400 mr-2"></i>
-                                <span class="text-gray-300 text-sm">${file.name}</span>
-                                <span class="text-gray-500 text-xs ml-auto">${formatFileSize(file.size)}</span>
-                            </div>
-                        `;
-                    }
-                    fileMessageDiv.innerHTML = `
-                        <div class="flex space-x-3 justify-end">
-                            <div class="flex-1 min-w-0 flex justify-end">
-                                <div class="bg-blue-600 rounded-lg p-4 max-w-[80%]">
-                                    <p class="text-white">已上传文件:</p>
-                                    ${filesHtml}
-                                </div>
-                            </div>
-                            <div class="flex-shrink-0">
-                                <div class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center">
-                                    <i class="fas fa-user text-gray-300"></i>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                    chatContainer.appendChild(fileMessageDiv);
-                    chatContainer.scrollTop = chatContainer.scrollHeight;
-                    // 清空文件选择
-                    fileInput.value = '';
-                    selectedFiles.classList.add('hidden');
-                }, 500);
-            } else {
-                alert('请先选择文件');
             }
-        });
-        // 语音输入功能
-        const voiceModal = document.getElementById('voice-modal');
-        const voiceButton = document.getElementById('voice-button');
-        const closeVoiceModal = document.getElementById('close-voice-modal');
-        const startRecording = document.getElementById('start-recording');
-        const stopRecording = document.getElementById('stop-recording');
-        const voiceStatus = document.getElementById('voice-status');
-        const voiceIcon = document.getElementById('voice-icon');
-        const recordingTimer = document.getElementById('recording-timer');
-        let isRecording = false;
-        let seconds = 0;
-        let timerInterval;
-        voiceButton.addEventListener('click', () => {
-            voiceModal.classList.remove('hidden');
-        });
-        closeVoiceModal.addEventListener('click', () => {
-            voiceModal.classList.add('hidden');
-            stopRecordingFunc();
-        });
-        startRecording.addEventListener('click', () => {
-            isRecording = true;
-            startRecording.classList.add('hidden');
-            stopRecording.classList.remove('hidden');
-            voiceStatus.textContent = '正在录音...';
-            voiceIcon.className = 'fas fa-microphone-alt text-3xl text-red-500';
-            recordingTimer.classList.remove('hidden');
-            // 开始计时
-            seconds = 0;
-            updateTimer();
-            timerInterval = setInterval(updateTimer, 1000);
-            // 这里应该是实际开始录音的代码
-            console.log('录音开始');
-        });
-        stopRecording.addEventListener('click', stopRecordingFunc);
-        function stopRecordingFunc() {
-            if (!isRecording) return;
-            isRecording = false;
-            startRecording.classList.remove('hidden');
-            stopRecording.classList.add('hidden');
-            voiceStatus.textContent = '录音已停止';
-            voiceIcon.className = 'fas fa-microphone text-3xl text-blue-500';
-            clearInterval(timerInterval);
-            // 这里应该是实际停止录音的代码
-            console.log('录音停止');
-            // 模拟语音识别结果
             setTimeout(() => {
-                const recognizedText = "这是模拟的语音识别结果。实际应用中这里应该是从语音识别API返回的文本。";
-                document.getElementById('message-input').value = recognizedText;
-                autoResize(document.getElementById('message-input'));
-                voiceModal.classList.add('hidden');
-            }, 1000);
-        }
-        function updateTimer() {
-            seconds++;
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = seconds % 60;
-            recordingTimer.querySelector('span').textContent =
-                `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
-        }
-        // 设置功能
-        const settingsModal = document.getElementById('settings-modal');
-        const settingsButton = document.getElementById('settings-button');
-        const closeSettingsModal = document.getElementById('close-settings-modal');
-        const cancelSettings = document.getElementById('cancel-settings');
-        const saveSettings = document.getElementById('save-settings');
-        settingsButton.addEventListener('click', () => {
-            settingsModal.classList.remove('hidden');
-        });
-        closeSettingsModal.addEventListener('click', () => {
-            settingsModal.classList.add('hidden');
-        });
-        cancelSettings.addEventListener('click', () => {
-            settingsModal.classList.add('hidden');
-        });
-        saveSettings.addEventListener('click', () => {
-            alert('设置已保存');
-            settingsModal.classList.add('hidden');
-        });
-        // 用户功能
-        const userModal = document.getElementById('user-modal');
-        const userButton = document.getElementById('user-button');
-        const closeUserModal = document.getElementById('close-user-modal');
-        const logoutButton = document.getElementById('logout-button');
-        userButton.addEventListener('click', () => {
-            userModal.classList.remove('hidden');
-        });
-        closeUserModal.addEventListener('click', () => {
-            userModal.classList.add('hidden');
-        });
-        logoutButton.addEventListener('click', () => {
-            alert('您已退出登录');
-            userModal.classList.add('hidden');
-        });
-        // 辅助函数：格式化文件大小
-        function formatFileSize(bytes) {
-            if (bytes === 0) return '0 Bytes';
-            const k = 1024;
-            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
         }
-        // 初始化时自动调整输入框高度
-        document.addEventListener('DOMContentLoaded', () => {
-            autoResize(document.getElementById('message-input'));
-        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=raineye/ds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>图片优化大师 | 压缩图片 & 去除水印</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .dropzone {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s ease;
         }
+        .dropzone.active {
+            border-color: #4f46e5;
+            background-color: #f0f4ff;
         }
+        .progress-bar {
+            transition: width 0.3s ease;
         }
+        .watermark-preview {
+            position: relative;
+            overflow: hidden;
         }
+        .watermark-box {
+            position: absolute;
+            border: 2px dashed red;
+            background-color: rgba(255, 0, 0, 0.2);
         }
+        .settings-panel {
+            transition: all 0.3s ease;
             overflow: hidden;
+        }
+        .settings-panel.closed {
+            max-height: 0;
+        }
+        .settings-panel.open {
+            max-height: 500px;
+        }
+        .tooltip {
+            position: relative;
+        }
+        .tooltip-text {
+            visibility: hidden;
+            width: 200px;
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
         }
     </style>
 </head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- 顶部标题和按钮 -->
+        <header class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold text-indigo-600">图片优化大师</h1>
+                <p class="text-gray-600">轻松压缩图片并去除水印</p>
             </div>
+            <button id="premium-btn" class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all flex items-center">
+                <i class="fas fa-crown mr-2"></i>
+                升级专业版
             </button>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- 上传区域 -->
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6">
+                    <div class="flex flex-col items-center justify-center">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">拖放图片到此处</h3>
+                        <p class="text-gray-500 mb-4">或点击选择文件</p>
+                        <input type="file" id="fileInput" class="hidden" accept="image/*" multiple>
+                        <button id="browseBtn" class="bg-indigo-500 text-white px-6 py-2 rounded-lg hover:bg-indigo-600 transition">
+                            选择图片
+                        </button>
                     </div>
                 </div>
+                <div id="fileInfo" class="hidden mb-6">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="font-medium">已选文件:</span>
+                        <span id="fileCount" class="text-gray-600">0 个文件</span>
                     </div>
+                    <div id="fileList" class="border rounded-lg p-3 max-h-40 overflow-y-auto"></div>
                 </div>
+                <!-- 高级设置面板 - 默认展开 -->
+                <div class="mb-6">
+                    <button id="settingsToggle" class="flex justify-between items-center w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded-lg transition">
+                        <span class="font-medium">高级设置</span>
+                        <i class="fas fa-chevron-up transition-transform"></i>
+                    </button>
+                    <div id="settingsPanel" class="settings-panel open bg-gray-50 rounded-lg mt-2 px-4 py-3">
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">压缩级别</label>
+                            <div class="flex items-center">
+                                <input type="range" id="compressionLevel" min="0" max="100" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                                <span id="compressionValue" class="ml-3 text-gray-700 w-12 text-center">70%</span>
+                            </div>
+                        </div>
+                        <div class="mb-4">
+                            <label class="block text-gray-700 mb-2">输出格式</label>
+                            <select id="outputFormat" class="w-full border rounded-lg px-3 py-2">
+                                <option value="original">保持原格式</option>
+                                <option value="jpeg">JPEG</option>
+                                <option value="png">PNG</option>
+                                <option value="webp">WebP</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center mb-4">
+                            <input type="checkbox" id="removeMetadata" class="mr-2" checked>
+                            <label for="removeMetadata" class="text-gray-700">移除元数据</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="removeWatermark" class="mr-2" checked>
+                            <label for="removeWatermark" class="text-gray-700">去除水印</label>
                         </div>
                     </div>
                 </div>
+                <button id="processBtn" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-medium transition flex items-center justify-center hidden">
+                    <i class="fas fa-magic mr-2"></i>
+                    处理图片
                 </button>
+                <div id="progressContainer" class="hidden mt-6">
+                    <div class="flex justify-between mb-1">
+                        <span>处理中...</span>
+                        <span id="progressPercent">0%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
+                        <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
+                    </div>
+                </div>
             </div>
+            <!-- 水印去除工具 -->
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold mb-4">水印去除工具</h2>
+                <div id="watermarkPreviewContainer" class="hidden">
+                    <div class="watermark-preview mb-4 border rounded-lg overflow-hidden relative" style="height: 300px;">
+                        <img id="watermarkPreview" src="#" alt="预览" class="w-full h-full object-contain">
+                        <div id="watermarkBox" class="watermark-box hidden"></div>
+                    </div>
+                    <div class="flex justify-between mb-4">
+                        <div>
+                            <label class="block text-gray-700 mb-2">选择水印区域</label>
+                            <div class="flex space-x-2">
+                                <button id="selectBtn" class="bg-indigo-500 text-white px-3 py-1 rounded hover:bg-indigo-600">
+                                    <i class="fas fa-vector-square mr-1"></i> 选择
+                                </button>
+                                <button id="clearSelectionBtn" class="bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300">
+                                    <i class="fas fa-eraser mr-1"></i> 清除
+                                </button>
+                            </div>
+                        </div>
+                        <div class="tooltip">
+                            <button id="autoDetectBtn" class="bg-purple-500 text-white px-3 py-1 rounded hover:bg-purple-600">
+                                <i class="fas fa-robot mr-1"></i> 自动检测
+                            </button>
+                            <span class="tooltip-text">我们的AI将尝试自动检测常见水印模式</span>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2">去除强度</label>
+                        <div class="flex items-center">
+                            <input type="range" id="removalStrength" min="1" max="10" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                            <span id="removalStrengthValue" class="ml-3 text-gray-700 w-12 text-center">5</span>
+                        </div>
+                    </div>
+                    <button id="removeWatermarkBtn" class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-medium transition flex items-center justify-center">
+                        <i class="fas fa-trash-alt mr-2"></i>
+                        去除水印
+                    </button>
                 </div>
+                <div id="noImageSelected" class="text-center py-12 text-gray-500">
+                    <i class="fas fa-image fa-3x mb-4"></i>
+                    <p>未选择用于去除水印的图片。</p>
+                    <p>请先上传图片以使用此工具。</p>
                 </div>
             </div>
         </div>
+        <!-- 结果展示区域 -->
+        <div id="resultsSection" class="hidden mt-8 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-xl font-semibold mb-4">处理结果</h2>
             <div class="flex justify-between items-center mb-4">
                 <div>
+                    <span class="text-gray-600">原始大小:</span>
+                    <span id="originalSize" class="font-medium ml-2">-</span>
                 </div>
                 <div>
+                    <span class="text-gray-600">压缩后大小:</span>
+                    <span id="compressedSize" class="font-medium ml-2">-</span>
                 </div>
+                <div>
+                    <span class="text-gray-600">节省空间:</span>
+                    <span id="savings" class="font-medium ml-2">-</span>
                 </div>
+                <button id="downloadAllBtn" class="bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition flex items-center">
+                    <i class="fas fa-download mr-2"></i>
+                    全部下载
                 </button>
             </div>
+            <div id="resultsGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"></div>
         </div>
     </div>
     <script>
+        // DOM元素
+        const dropzone = document.getElementById('dropzone');
+        const fileInput = document.getElementById('fileInput');
+        const browseBtn = document.getElementById('browseBtn');
+        const fileInfo = document.getElementById('fileInfo');
+        const fileList = document.getElementById('fileList');
+        const fileCount = document.getElementById('fileCount');
+        const processBtn = document.getElementById('processBtn');
+        const progressContainer = document.getElementById('progressContainer');
+        const progressBar = document.getElementById('progressBar');
+        const progressPercent = document.getElementById('progressPercent');
+        const compressionLevel = document.getElementById('compressionLevel');
+        const compressionValue = document.getElementById('compressionValue');
+        const outputFormat = document.getElementById('outputFormat');
+        const removeMetadata = document.getElementById('removeMetadata');
+        const removeWatermark = document.getElementById('removeWatermark');
+        const settingsToggle = document.getElementById('settingsToggle');
+        const settingsPanel = document.getElementById('settingsPanel');
+        const watermarkPreviewContainer = document.getElementById('watermarkPreviewContainer');
+        const watermarkPreview = document.getElementById('watermarkPreview');
+        const noImageSelected = document.getElementById('noImageSelected');
+        const selectBtn = document.getElementById('selectBtn');
+        const clearSelectionBtn = document.getElementById('clearSelectionBtn');
+        const autoDetectBtn = document.getElementById('autoDetectBtn');
+        const removalStrength = document.getElementById('removalStrength');
+        const removalStrengthValue = document.getElementById('removalStrengthValue');
+        const removeWatermarkBtn = document.getElementById('removeWatermarkBtn');
+        const watermarkBox = document.getElementById('watermarkBox');
+        const resultsSection = document.getElementById('resultsSection');
+        const resultsGrid = document.getElementById('resultsGrid');
+        const originalSize = document.getElementById('originalSize');
+        const compressedSize = document.getElementById('compressedSize');
+        const savings = document.getElementById('savings');
+        const downloadAllBtn = document.getElementById('downloadAllBtn');
+        const premiumBtn = document.getElementById('premium-btn');
+        // 变量
+        let selectedFiles = [];
+        let isSelectingWatermark = false;
+        let selectionStart = { x: 0, y: 0 };
+        let currentImageForWatermark = null;
+        let processedFiles = [];
+        // 事件监听
+        browseBtn.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+        dropzone.addEventListener('dragover', handleDragOver);
+        dropzone.addEventListener('dragleave', handleDragLeave);
+        dropzone.addEventListener('drop', handleDrop);
+        processBtn.addEventListener('click', processImages);
+        compressionLevel.addEventListener('input', updateCompressionValue);
+        settingsToggle.addEventListener('click', toggleSettingsPanel);
+        removalStrength.addEventListener('input', updateRemovalStrengthValue);
+        selectBtn.addEventListener('click', startWatermarkSelection);
+        clearSelectionBtn.addEventListener('click', clearWatermarkSelection);
+        autoDetectBtn.addEventListener('click', autoDetectWatermark);
+        removeWatermarkBtn.addEventListener('click', processWatermarkRemoval);
+        downloadAllBtn.addEventListener('click', downloadAllProcessedFiles);
+        premiumBtn.addEventListener('click', showPremiumModal);
+        // 水印选择事件
+        watermarkPreview.addEventListener('mousedown', startSelection);
+        document.addEventListener('mousemove', updateSelection);
+        document.addEventListener('mouseup', endSelection);
+        // 函数
+        function handleFileSelect(e) {
+            const files = e.target.files || e.dataTransfer.files;
+            addFilesToSelection(files);
+        }
+        function handleDragOver(e) {
             e.preventDefault();
+            dropzone.classList.add('active');
+        }
+        function handleDragLeave() {
+            dropzone.classList.remove('active');
+        }
+        function handleDrop(e) {
+            e.preventDefault();
+            dropzone.classList.remove('active');
+            const files = e.dataTransfer.files;
+            addFilesToSelection(files);
+        }
+        function addFilesToSelection(files) {
+            for (let i = 0; i < files.length; i++) {
+                if (files[i].type.match('image.*')) {
+                    selectedFiles.push(files[i]);
+                }
             }
+            updateFileList();
+            if (selectedFiles.length > 0) {
+                fileInfo.classList.remove('hidden');
+                processBtn.classList.remove('hidden');
+                fileCount.textContent = `${selectedFiles.length} 个文件`;
+                // 设置第一张图片用于水印去除预览
+                if (!currentImageForWatermark) {
+                    setImageForWatermarkRemoval(selectedFiles[0]);
+                }
+            }
+        }
+        function updateFileList() {
+            fileList.innerHTML = '';
+            selectedFiles.forEach((file, index) => {
+                const div = document.createElement('div');
+                div.className = 'flex justify-between items-center py-2 border-b last:border-b-0';
+                const fileName = document.createElement('span');
+                fileName.className = 'truncate';
+                fileName.textContent = file.name;
+                const fileSize = document.createElement('span');
+                fileSize.className = 'text-gray-500 text-sm';
+                fileSize.textContent = formatFileSize(file.size);
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'text-red-500 hover:text-red-700 ml-2';
+                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
+                removeBtn.addEventListener('click', () => removeFile(index));
+                div.appendChild(fileName);
+                div.appendChild(fileSize);
+                div.appendChild(removeBtn);
+                fileList.appendChild(div);
+            });
+        }
+        function removeFile(index) {
+            selectedFiles.splice(index, 1);
+            updateFileList();
+            fileCount.textContent = `${selectedFiles.length} 个文件`;
+            if (selectedFiles.length === 0) {
+                fileInfo.classList.add('hidden');
+                processBtn.classList.add('hidden');
+                watermarkPreviewContainer.classList.add('hidden');
+                noImageSelected.classList.remove('hidden');
+                currentImageForWatermark = null;
+            } else if (index === 0) {
+                setImageForWatermarkRemoval(selectedFiles[0]);
             }
+        }
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 字节';
+            const k = 1024;
+            const sizes = ['字节', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        function updateCompressionValue() {
+            compressionValue.textContent = `${compressionLevel.value}%`;
+        }
+        function updateRemovalStrengthValue() {
+            removalStrengthValue.textContent = removalStrength.value;
+        }
+        function toggleSettingsPanel() {
+            settingsPanel.classList.toggle('open');
+            const icon = settingsToggle.querySelector('i');
+            icon.classList.toggle('fa-chevron-down');
+            icon.classList.toggle('fa-chevron-up');
+        }
+        function processImages() {
+            if (selectedFiles.length === 0) return;
+            progressContainer.classList.remove('hidden');
+            processBtn.classList.add('hidden');
+            let processedCount = 0;
+            processedFiles = [];
+            // 模拟处理过程(实际应用中会使用真实的图片处理库)
+            selectedFiles.forEach((file, index) => {
                 setTimeout(() => {
+                    // 模拟处理时间
+                    simulateProgress(index, () => {
+                        processedCount++;
+                        // 计算大小(模拟)
+                        const originalSize = file.size;
+                        const compressionRatio = parseInt(compressionLevel.value) / 100;
+                        const compressedSize = Math.max(1000, originalSize * compressionRatio); // 确保最小大小
+                        // 创建结果对象
+                        const result = {
+                            originalFile: file,
+                            compressedFile: new File([file], `压缩_${file.name}`, { type: file.type }),
+                            originalSize,
+                            compressedSize,
+                            downloadUrl = URL.createObjectURL(file) // 实际应用中会是处理后的文件
+                        };
+                        processedFiles.push(result);
+                        // 更新进度
+                        const progress = Math.round((processedCount / selectedFiles.length) * 100);
+                        progressBar.style.width = `${progress}%`;
+                        progressPercent.textContent = `${progress}%`;
+                        // 所有文件处理完成
+                        if (processedCount === selectedFiles.length) {
+                            setTimeout(showResults, 500);
+                        }
+                    });
+                }, index * 500);
+            });
+        }
+        function simulateProgress(index, callback) {
+            let progress = 0;
+            const interval = setInterval(() => {
+                progress += 5;
+                const overallProgress = Math.min(100, ((index * 100) + progress) / selectedFiles.length);
+                progressBar.style.width = `${overallProgress}%`;
+                progressPercent.textContent = `${Math.round(overallProgress)}%`;
+                if (progress >= 100) {
+                    clearInterval(interval);
+                    callback();
+                }
+            }, 100);
+        }
+        function showResults() {
+            progressContainer.classList.add('hidden');
+            resultsSection.classList.remove('hidden');
+            // 计算总量
+            const totalOriginal = processedFiles.reduce((sum, file) => sum + file.originalSize, 0);
+            const totalCompressed = processedFiles.reduce((sum, file) => sum + file.compressedSize, 0);
+            const savingsPercentage = ((totalOriginal - totalCompressed) / totalOriginal * 100).toFixed(1);
+            originalSize.textContent = formatFileSize(totalOriginal);
+            compressedSize.textContent = formatFileSize(totalCompressed);
+            savings.textContent = `${savingsPercentage}% (${formatFileSize(totalOriginal - totalCompressed)})`;
+            // 显示结果
+            resultsGrid.innerHTML = '';
+            processedFiles.forEach((file, index) => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const resultCard = document.createElement('div');
+                    resultCard.className = 'bg-gray-50 rounded-lg overflow-hidden border';
+                    const imgContainer = document.createElement('div');
+                    imgContainer.className = 'relative pt-[100%]';
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    img.className = 'absolute top-0 left-0 w-full h-full object-cover';
+                    const infoContainer = document.createElement('div');
+                    infoContainer.className = 'p-3';
+                    const fileName = document.createElement('div');
+                    fileName.className = 'font-medium truncate mb-1';
+                    fileName.textContent = file.originalFile.name;
+                    const sizeInfo = document.createElement('div');
+                    sizeInfo.className = 'flex justify-between text-sm text-gray-600 mb-2';
+                    const originalSizeSpan = document.createElement('span');
+                    originalSizeSpan.textContent = formatFileSize(file.originalSize);
+                    const compressedSizeSpan = document.createElement('span');
+                    compressedSizeSpan.className = 'text-green-600 font-medium';
+                    compressedSizeSpan.textContent = formatFileSize(file.compressedSize);
+                    sizeInfo.appendChild(originalSizeSpan);
+                    sizeInfo.appendChild(compressedSizeSpan);
+                    const downloadBtn = document.createElement('button');
+                    downloadBtn.className = 'w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded text-sm transition flex items-center justify-center';
+                    downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> 下载';
+                    downloadBtn.addEventListener('click', () => downloadFile(file));
+                    infoContainer.appendChild(fileName);
+                    infoContainer.appendChild(sizeInfo);
+                    infoContainer.appendChild(downloadBtn);
+                    imgContainer.appendChild(img);
+                    resultCard.appendChild(imgContainer);
+                    resultCard.appendChild(infoContainer);
+                    resultsGrid.appendChild(resultCard);
+                };
+                reader.readAsDataURL(file.originalFile);
+            });
+        }
+        function downloadFile(file) {
+            const a = document.createElement('a');
+            a.href = file.downloadUrl;
+            a.download = file.compressedFile.name;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
+        function downloadAllProcessedFiles() {
+            processedFiles.forEach((file, index) => {
+                setTimeout(() => {
+                    downloadFile(file);
+                }, index * 500);
+            });
+        }
+        function setImageForWatermarkRemoval(file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                watermarkPreview.src = e.target.result;
+                watermarkPreviewContainer.classList.remove('hidden');
+                noImageSelected.classList.add('hidden');
+                currentImageForWatermark = file;
+                clearWatermarkSelection();
+            };
+            reader.readAsDataURL(file);
+        }
+        function startWatermarkSelection() {
+            isSelectingWatermark = true;
+            watermarkBox.classList.remove('hidden');
+            selectBtn.classList.add('bg-indigo-600');
+        }
+        function clearWatermarkSelection() {
+            watermarkBox.classList.add('hidden');
+            watermarkBox.style.width = '0';
+            watermarkBox.style.height = '0';
+            selectBtn.classList.remove('bg-indigo-600');
+            isSelectingWatermark = false;
+        }
+        function startSelection(e) {
+            if (!isSelectingWatermark) return;
+            e.preventDefault();
+            const rect = watermarkPreview.getBoundingClientRect();
+            selectionStart = {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top
+            };
+            watermarkBox.style.left = `${selectionStart.x}px`;
+            watermarkBox.style.top = `${selectionStart.y}px`;
+            watermarkBox.style.width = '0';
+            watermarkBox.style.height = '0';
+        }
+        function updateSelection(e) {
+            if (!isSelectingWatermark || !selectionStart) return;
+            const rect = watermarkPreview.getBoundingClientRect();
+            const currentX = e.clientX - rect.left;
+            const currentY = e.clientY - rect.top;
+            const width = currentX - selectionStart.x;
+            const height = currentY - selectionStart.y;
+            watermarkBox.style.width = `${Math.abs(width)}px`;
+            watermarkBox.style.height = `${Math.abs(height)}px`;
+            if (width < 0) {
+                watermarkBox.style.left = `${currentX}px`;
             }
+            if (height < 0) {
+                watermarkBox.style.top = `${currentY}px`;
+            }
+        }
+        function endSelection() {
+            if (!isSelectingWatermark) return;
+            isSelectingWatermark = false;
+            selectBtn.classList.remove('bg-indigo-600');
+        }
+        function autoDetectWatermark() {
+            // 模拟AI检测
+            watermarkBox.classList.remove('hidden');
+            // 随机位置用于演示(实际应用中会使用真实的检测)
+            const rect = watermarkPreview.getBoundingClientRect();
+            const width = Math.min(100, rect.width * 0.3);
+            const height = Math.min(50, rect.height * 0.1);
+            const left = Math.random() * (rect.width - width);
+            const top = rect.height - height - 10; // 通常在底部
+            watermarkBox.style.left = `${left}px`;
+            watermarkBox.style.top = `${top}px`;
+            watermarkBox.style.width = `${width}px`;
+            watermarkBox.style.height = `${height}px`;
+            // 显示成功消息
+            const originalText = autoDetectBtn.innerHTML;
+            autoDetectBtn.innerHTML = '<i class="fas fa-check mr-1"></i> 已检测!';
+            autoDetectBtn.classList.remove('bg-purple-500');
+            autoDetectBtn.classList.add('bg-green-500');
+            setTimeout(() => {
+                autoDetectBtn.innerHTML = originalText;
+                autoDetectBtn.classList.add('bg-purple-500');
+                autoDetectBtn.classList.remove('bg-green-500');
+            }, 2000);
+        }
+        function processWatermarkRemoval() {
+            if (!watermarkBox || watermarkBox.classList.contains('hidden')) {
+                alert('请先选择水印区域');
+                return;
+            }
+            // 模拟处理过程
+            removeWatermarkBtn.disabled = true;
+            removeWatermarkBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 处理中...';
             setTimeout(() => {
+                // 实际应用中会真正处理图片
+                // 演示中只显示"成功"消息
+                removeWatermarkBtn.innerHTML = '<i class="fas fa-check mr-2"></i> 水印已去除!';
+                removeWatermarkBtn.classList.remove('bg-red-500');
+                removeWatermarkBtn.classList.add('bg-green-500');
+                setTimeout(() => {
+                    removeWatermarkBtn.innerHTML = '<i class="fas fa-trash-alt mr-2"></i> 去除水印';
+                    removeWatermarkBtn.classList.add('bg-red-500');
+                    removeWatermarkBtn.classList.remove('bg-green-500');
+                    removeWatermarkBtn.disabled = false;
+                }, 2000);
+            }, 2000);
         }
+        function showPremiumModal() {
+            // 创建模态框
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+            modal.innerHTML = `
+                <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold text-indigo-600">升级专业版</h3>
+                        <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="mb-6">
+                        <div class="bg-indigo-50 rounded-lg p-4 mb-4">
+                            <div class="flex items-center mb-2">
+                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                <span>自动去除所有水印</span>
+                            </div>
+                            <div class="flex items-center mb-2">
+                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                <span>批量处理无限图片</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                <span>优先技术支持</span>
+                            </div>
+                        </div>
+                        <div class="text-center py-4">
+                            <p class="text-3xl font-bold text-gray-800 mb-2">¥9.99<span class="text-lg text-gray-600">/月</span></p>
+                            <p class="text-gray-600">或 ¥99.99/年 (节省20%)</p>
+                        </div>
+                    </div>
+                    <button id="upgradeBtn" class="w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center">
+                        <i class="fas fa-crown mr-2"></i>
+                        立即升级
+                    </button>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            // 添加事件监听
+            modal.querySelector('#closeModal').addEventListener('click', () => {
+                modal.remove();
+            });
+            modal.querySelector('#upgradeBtn').addEventListener('click', () => {
+                alert('感谢选择专业版! 正在跳转支付...');
+                modal.remove();
+            });
+            // 点击外部关闭模态框
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    modal.remove();
+                }
+            });
+        }
+        // 初始化
+        updateCompressionValue();
+        updateRemovalStrengthValue();
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=raineye/ds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>