Spaces:

chagtptmm
/

chatbox

Running

App Files Files Community

chagtptmm commited on Apr 4, 2025

Commit

b8e2197

verified ·

1 Parent(s): b8c0830

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1042 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chatbox
-emoji: 💻
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chatbox
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1042 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced AI Client</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>
+        .chat-message.user {
+            background-color: #f3f4f6;
+            border-radius: 1rem 1rem 0 1rem;
+        }
+        .chat-message.ai {
+            background-color: #e0f2fe;
+            border-radius: 1rem 1rem 1rem 0;
+        }
+        .typing-indicator {
+            display: inline-block;
+        }
+        .typing-indicator span {
+            height: 8px;
+            width: 8px;
+            background: #9ca3af;
+            border-radius: 50%;
+            display: inline-block;
+            margin: 0 2px;
+            opacity: 0.4;
+        }
+        .typing-indicator span:nth-child(1) {
+            animation: typing 1s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation: typing 1s infinite 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation: typing 1s infinite 0.4s;
+        }
+        @keyframes typing {
+            0%, 100% {
+                opacity: 0.4;
+                transform: translateY(0);
+            }
+            50% {
+                opacity: 1;
+                transform: translateY(-5px);
+            }
+        }
+        .slide-in {
+            animation: slideIn 0.3s ease-out forwards;
+        }
+        @keyframes slideIn {
+            from {
+                transform: translateY(20px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        .file-preview {
+            max-width: 200px;
+            max-height: 200px;
+            border-radius: 0.5rem;
+            margin-top: 0.5rem;
+        }
+        .progress-bar {
+            height: 4px;
+            background-color: #e5e7eb;
+            border-radius: 2px;
+            margin-top: 4px;
+        }
+        .progress-bar-fill {
+            height: 100%;
+            background-color: #3b82f6;
+            border-radius: 2px;
+            transition: width 0.3s ease;
+        }
+        #dropzone {
+            border: 2px dashed #d1d5db;
+            border-radius: 0.5rem;
+            transition: all 0.2s ease;
+        }
+        #dropzone.active {
+            border-color: #3b82f6;
+            background-color: #eff6ff;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto max-w-6xl p-4">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-6">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-robot text-3xl text-blue-500"></i>
+                <h1 class="text-2xl font-bold text-gray-800">Advanced AI Client</h1>
+            </div>
+            <div class="flex space-x-2">
+                <button id="web-search-btn" class="p-2 rounded-full hover:bg-gray-200 transition" title="Web Search">
+                    <i class="fas fa-globe text-gray-600"></i>
+                </button>
+                <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-200 transition" title="Settings">
+                    <i class="fas fa-cog text-gray-600"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <div class="flex flex-col md:flex-row gap-6">
+            <!-- Sidebar -->
+            <aside class="hidden md:block w-64 bg-white rounded-lg shadow p-4 h-fit sticky top-4">
+                <div class="mb-6">
+                    <h2 class="font-semibold text-gray-700 mb-2">Conversations</h2>
+                    <ul id="conversation-list" class="space-y-1">
+                        <li class="p-2 rounded hover:bg-gray-100 cursor-pointer flex items-center justify-between bg-blue-50">
+                            <span>New Chat</span>
+                            <i class="fas fa-plus text-blue-500"></i>
+                        </li>
+                        <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">API Configuration Help</li>
+                        <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">Creative Writing</li>
+                        <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">Code Assistance</li>
+                        <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">Multimodal Analysis</li>
+                    </ul>
+                </div>
+                <div>
+                    <h2 class="font-semibold text-gray-700 mb-2">Features</h2>
+                    <div class="space-y-2">
+                        <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer">
+                            <i class="fas fa-globe text-blue-500 mr-2"></i>
+                            <span>Web Search</span>
+                        </div>
+                        <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer">
+                            <i class="fas fa-file-upload text-blue-500 mr-2"></i>
+                            <span>File Upload</span>
+                        </div>
+                        <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer">
+                            <i class="fas fa-images text-blue-500 mr-2"></i>
+                            <span>Multimodal</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-4">
+                    <h2 class="font-semibold text-gray-700 mb-2">API Status</h2>
+                    <div class="flex items-center mb-2">
+                        <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
+                        <span class="text-sm">Free API: Active</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-3 h-3 rounded-full bg-gray-300 mr-2"></div>
+                        <span class="text-sm">Custom API: Inactive</span>
+                    </div>
+                </div>
+            </aside>
+            <!-- Chat Area -->
+            <main class="flex-1 bg-white rounded-lg shadow overflow-hidden flex flex-col">
+                <div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-4 h-96">
+                    <div class="chat-message ai p-4 max-w-[80%] slide-in">
+                        <div class="flex items-start space-x-2">
+                            <div class="bg-blue-500 text-white p-2 rounded-full">
+                                <i class="fas fa-robot"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium text-gray-700">AI Assistant</p>
+                                <p class="text-gray-600 mt-1">Hello! I'm your advanced AI assistant. You can use the free API or configure your own API key in the settings. I support web search, file uploads, and multimodal capabilities. How can I help you today?</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Input Area -->
+                <div class="border-t p-4 bg-gray-50">
+                    <!-- File Upload Dropzone -->
+                    <div id="dropzone" class="p-4 mb-3 text-center hidden">
+                        <i class="fas fa-cloud-upload-alt text-3xl text-blue-500 mb-2"></i>
+                        <p class="font-medium">Drop files here or click to upload</p>
+                        <p class="text-sm text-gray-500 mt-1">Supports images, PDFs, and text files</p>
+                        <input type="file" id="file-input" class="hidden" multiple>
+                    </div>
+                    <!-- Uploaded Files Preview -->
+                    <div id="file-previews" class="mb-3 hidden"></div>
+                    <!-- Web Search Toggle -->
+                    <div id="web-search-toggle" class="flex items-center mb-3 hidden">
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="enable-web-search" class="sr-only peer">
+                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-500"></div>
+                            <span class="ml-3 text-sm font-medium text-gray-700">Enable Web Search</span>
+                        </label>
+                    </div>
+                    <!-- Chat Input Form -->
+                    <form id="chat-form" class="flex space-x-2">
+                        <div class="flex-1 relative">
+                            <input
+                                type="text"
+                                id="user-input"
+                                placeholder="Type your message here..."
+                                class="w-full border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+                                autocomplete="off"
+                            >
+                            <button
+                                type="button"
+                                id="file-upload-btn"
+                                class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-blue-500"
+                                title="Upload files"
+                            >
+                                <i class="fas fa-paperclip"></i>
+                            </button>
+                        </div>
+                        <button
+                            type="submit"
+                            class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 w-10 h-10 flex items-center justify-center transition"
+                        >
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                    <div class="mt-2 text-xs text-gray-500 flex justify-between">
+                        <span id="api-status">Using: Free API</span>
+                        <span id="token-counter">Tokens: 0/1000 (Free limit)</span>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold text-gray-800">Advanced API Configuration</h2>
+                    <button id="close-settings" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="space-y-6">
+                    <!-- API Provider Section -->
+                    <div>
+                        <h3 class="font-medium text-gray-700 mb-2">API Provider</h3>
+                        <div class="grid grid-cols-2 gap-3">
+                            <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50">
+                                <input type="radio" name="api-provider" value="free" class="text-blue-500" checked>
+                                <div>
+                                    <span class="font-medium">Free API</span>
+                                    <p class="text-xs text-gray-500">Limited capabilities, no setup required</p>
+                                </div>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50">
+                                <input type="radio" name="api-provider" value="openai" class="text-blue-500">
+                                <div>
+                                    <span class="font-medium">OpenAI</span>
+                                    <p class="text-xs text-gray-500">GPT-4, GPT-3.5, DALL·E</p>
+                                </div>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50">
+                                <input type="radio" name="api-provider" value="anthropic" class="text-blue-500">
+                                <div>
+                                    <span class="font-medium">Anthropic</span>
+                                    <p class="text-xs text-gray-500">Claude models</p>
+                                </div>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50">
+                                <input type="radio" name="api-provider" value="google" class="text-blue-500">
+                                <div>
+                                    <span class="font-medium">Google</span>
+                                    <p class="text-xs text-gray-500">Gemini, Vertex AI</p>
+                                </div>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50">
+                                <input type="radio" name="api-provider" value="custom" class="text-blue-500">
+                                <div>
+                                    <span class="font-medium">Custom API</span>
+                                    <p class="text-xs text-gray-500">Fully customizable endpoint</p>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+                    <!-- API Key Section -->
+                    <div id="api-key-section" class="hidden">
+                        <h3 class="font-medium text-gray-700 mb-2">API Key</h3>
+                        <div class="flex space-x-2">
+                            <input
+                                type="password"
+                                id="api-key-input"
+                                placeholder="Enter your API key"
+                                class="flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                            <button id="toggle-api-key" class="bg-gray-100 hover:bg-gray-200 px-3 rounded">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                        </div>
+                        <p class="text-xs text-gray-500 mt-1">Your API key is stored locally in your browser and never sent to our servers.</p>
+                    </div>
+                    <!-- Custom API Section -->
+                    <div id="custom-api-section" class="hidden">
+                        <h3 class="font-medium text-gray-700 mb-2">Custom API Configuration</h3>
+                        <div class="space-y-3">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">API Endpoint</label>
+                                <input
+                                    type="text"
+                                    id="api-endpoint-input"
+                                    placeholder="https://api.example.com/v1/chat"
+                                    class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                >
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Request Method</label>
+                                <select id="api-method-select" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <option value="POST">POST</option>
+                                    <option value="GET">GET</option>
+                                    <option value="PUT">PUT</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Headers (JSON)</label>
+                                <textarea
+                                    id="api-headers-input"
+                                    placeholder='{"Content-Type": "application/json", "Authorization": "Bearer $API_KEY"}'
+                                    class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 h-20"
+                                ></textarea>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Request Body Template (JSON)</label>
+                                <textarea
+                                    id="api-body-input"
+                                    placeholder='{"model": "$MODEL", "messages": $MESSAGES, "max_tokens": 1000}'
+                                    class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 h-20"
+                                ></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Model Selection -->
+                    <div>
+                        <h3 class="font-medium text-gray-700 mb-2">Model Selection</h3>
+                        <select id="model-select" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Free)</option>
+                            <option value="gpt-4">GPT-4</option>
+                            <option value="claude-2">Claude 2</option>
+                            <option value="gemini-pro">Gemini Pro</option>
+                            <option value="custom">Custom Model</option>
+                        </select>
+                    </div>
+                    <!-- Features Configuration -->
+                    <div class="pt-4 border-t">
+                        <h3 class="font-medium text-gray-700 mb-2">Features</h3>
+                        <div class="space-y-3">
+                            <label class="flex items-center justify-between cursor-pointer">
+                                <div>
+                                    <span class="font-medium">Web Search</span>
+                                    <p class="text-xs text-gray-500">Enable internet search for up-to-date information</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" id="enable-web-search-setting" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-500"></div>
+                                </label>
+                            </label>
+                            <label class="flex items-center justify-between cursor-pointer">
+                                <div>
+                                    <span class="font-medium">File Upload</span>
+                                    <p class="text-xs text-gray-500">Process documents, images, and other files</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" id="enable-file-upload-setting" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-500"></div>
+                                </label>
+                            </label>
+                            <label class="flex items-center justify-between cursor-pointer">
+                                <div>
+                                    <span class="font-medium">Multimodal Support</span>
+                                    <p class="text-xs text-gray-500">Process both text and images together</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" id="enable-multimodal-setting" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-500"></div>
+                                </label>
+                            </label>
+                        </div>
+                    </div>
+                    <!-- Save Button -->
+                    <div class="pt-4 border-t">
+                        <button id="save-settings" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition">
+                            Save Configuration
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Web Search Modal -->
+    <div id="web-search-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold text-gray-800">Web Search Configuration</h2>
+                    <button id="close-web-search" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Search Query</label>
+                        <input
+                            type="text"
+                            id="search-query-input"
+                            placeholder="What would you like to search for?"
+                            class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Search Engine</label>
+                        <select id="search-engine-select" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option value="google">Google</option>
+                            <option value="bing">Bing</option>
+                            <option value="custom">Custom</option>
+                        </select>
+                    </div>
+                    <div id="custom-search-engine-section" class="hidden">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Custom Search API</label>
+                        <input
+                            type="text"
+                            id="custom-search-api-input"
+                            placeholder="https://api.example.com/search?q={query}"
+                            class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Number of Results</label>
+                        <input
+                            type="range"
+                            id="search-results-count"
+                            min="1"
+                            max="10"
+                            value="3"
+                            class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                        >
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span>1</span>
+                            <span>3</span>
+                            <span>5</span>
+                            <span>7</span>
+                            <span>10</span>
+                        </div>
+                    </div>
+                    <div class="pt-2">
+                        <button id="perform-search" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition">
+                            Perform Search
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const settingsBtn = document.getElementById('settings-btn');
+            const closeSettings = document.getElementById('close-settings');
+            const settingsModal = document.getElementById('settings-modal');
+            const saveSettingsBtn = document.getElementById('save-settings');
+            const chatForm = document.getElementById('chat-form');
+            const userInput = document.getElementById('user-input');
+            const chatContainer = document.getElementById('chat-container');
+            const apiKeySection = document.getElementById('api-key-section');
+            const customApiSection = document.getElementById('custom-api-section');
+            const apiProviderRadios = document.querySelectorAll('input[name="api-provider"]');
+            const modelSelect = document.getElementById('model-select');
+            const tokenCounter = document.getElementById('token-counter');
+            const apiStatus = document.getElementById('api-status');
+            const fileUploadBtn = document.getElementById('file-upload-btn');
+            const dropzone = document.getElementById('dropzone');
+            const fileInput = document.getElementById('file-input');
+            const filePreviews = document.getElementById('file-previews');
+            const webSearchBtn = document.getElementById('web-search-btn');
+            const webSearchModal = document.getElementById('web-search-modal');
+            const closeWebSearch = document.getElementById('close-web-search');
+            const webSearchToggle = document.getElementById('web-search-toggle');
+            const enableWebSearch = document.getElementById('enable-web-search');
+            const toggleApiKey = document.getElementById('toggle-api-key');
+            const apiKeyInput = document.getElementById('api-key-input');
+            const customSearchEngineSection = document.getElementById('custom-search-engine-section');
+            const searchEngineSelect = document.getElementById('search-engine-select');
+            const performSearchBtn = document.getElementById('perform-search');
+            // State
+            let uploadedFiles = [];
+            let isWebSearchEnabled = false;
+            let searchResults = [];
+            // Load saved settings from localStorage
+            let settings = JSON.parse(localStorage.getItem('aiClientSettings')) || {
+                apiProvider: 'free',
+                apiKey: '',
+                apiEndpoint: '',
+                apiMethod: 'POST',
+                apiHeaders: '{"Content-Type": "application/json"}',
+                apiBody: '{"model": "$MODEL", "messages": $MESSAGES}',
+                model: 'gpt-3.5-turbo',
+                tokenUsage: 0,
+                features: {
+                    webSearch: false,
+                    fileUpload: true,
+                    multimodal: false
+                }
+            };
+            // Update UI based on saved settings
+            updateUIFromSettings();
+            // Event Listeners
+            settingsBtn.addEventListener('click', () => {
+                settingsModal.classList.remove('hidden');
+            });
+            closeSettings.addEventListener('click', () => {
+                settingsModal.classList.add('hidden');
+            });
+            apiProviderRadios.forEach(radio => {
+                radio.addEventListener('change', function() {
+                    updateAPIConfigurationUI();
+                });
+            });
+            searchEngineSelect.addEventListener('change', function() {
+                if (this.value === 'custom') {
+                    customSearchEngineSection.classList.remove('hidden');
+                } else {
+                    customSearchEngineSection.classList.add('hidden');
+                }
+            });
+            toggleApiKey.addEventListener('click', function() {
+                const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
+                apiKeyInput.setAttribute('type', type);
+                this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
+            });
+            saveSettingsBtn.addEventListener('click', function() {
+                const selectedProvider = document.querySelector('input[name="api-provider"]:checked').value;
+                const apiKey = document.getElementById('api-key-input').value;
+                const apiEndpoint = document.getElementById('api-endpoint-input').value;
+                const apiMethod = document.getElementById('api-method-select').value;
+                const apiHeaders = document.getElementById('api-headers-input').value;
+                const apiBody = document.getElementById('api-body-input').value;
+                const model = document.getElementById('model-select').value;
+                const webSearchEnabled = document.getElementById('enable-web-search-setting').checked;
+                const fileUploadEnabled = document.getElementById('enable-file-upload-setting').checked;
+                const multimodalEnabled = document.getElementById('enable-multimodal-setting').checked;
+                settings = {
+                    apiProvider: selectedProvider,
+                    apiKey: apiKey,
+                    apiEndpoint: apiEndpoint,
+                    apiMethod: apiMethod,
+                    apiHeaders: apiHeaders,
+                    apiBody: apiBody,
+                    model: model,
+                    tokenUsage: settings.tokenUsage,
+                    features: {
+                        webSearch: webSearchEnabled,
+                        fileUpload: fileUploadEnabled,
+                        multimodal: multimodalEnabled
+                    }
+                };
+                localStorage.setItem('aiClientSettings', JSON.stringify(settings));
+                updateUIFromSettings();
+                settingsModal.classList.add('hidden');
+                // Show confirmation
+                showToast('Settings saved successfully!', 'success');
+            });
+            fileUploadBtn.addEventListener('click', function() {
+                if (settings.features.fileUpload) {
+                    fileInput.click();
+                } else {
+                    showToast('File upload is disabled in settings', 'warning');
+                }
+            });
+            fileInput.addEventListener('change', function(e) {
+                handleFiles(e.target.files);
+            });
+            // Drag and drop functionality
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropzone.addEventListener(eventName, preventDefaults, false);
+            });
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropzone.addEventListener(eventName, highlight, false);
+            });
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropzone.addEventListener(eventName, unhighlight, false);
+            });
+            function highlight() {
+                dropzone.classList.add('active');
+            }
+            function unhighlight() {
+                dropzone.classList.remove('active');
+            }
+            dropzone.addEventListener('drop', function(e) {
+                if (settings.features.fileUpload) {
+                    const dt = e.dataTransfer;
+                    const files = dt.files;
+                    handleFiles(files);
+                } else {
+                    showToast('File upload is disabled in settings', 'warning');
+                }
+            });
+            dropzone.addEventListener('click', function() {
+                if (settings.features.fileUpload) {
+                    fileInput.click();
+                } else {
+                    showToast('File upload is disabled in settings', 'warning');
+                }
+            });
+            webSearchBtn.addEventListener('click', function() {
+                if (settings.features.webSearch) {
+                    webSearchModal.classList.remove('hidden');
+                } else {
+                    showToast('Web search is disabled in settings', 'warning');
+                }
+            });
+            closeWebSearch.addEventListener('click', function() {
+                webSearchModal.classList.add('hidden');
+            });
+            enableWebSearch.addEventListener('change', function() {
+                isWebSearchEnabled = this.checked;
+                if (this.checked) {
+                    showToast('Web search enabled for this conversation', 'info');
+                }
+            });
+            performSearchBtn.addEventListener('click', function() {
+                const query = document.getElementById('search-query-input').value;
+                const searchEngine = document.getElementById('search-engine-select').value;
+                const customSearchAPI = document.getElementById('custom-search-api-input').value;
+                const resultCount = document.getElementById('search-results-count').value;
+                if (!query) {
+                    showToast('Please enter a search query', 'warning');
+                    return;
+                }
+                // Simulate search (in a real app, this would call an API)
+                simulateWebSearch(query, resultCount);
+                webSearchModal.classList.add('hidden');
+            });
+            chatForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const message = userInput.value.trim();
+                if (message === '' && uploadedFiles.length === 0) return;
+                // Add user message to chat
+                addMessageToChat('user', message);
+                userInput.value = '';
+                // Show typing indicator
+                const typingIndicator = document.createElement('div');
+                typingIndicator.className = 'chat-message ai p-4 max-w-[80%]';
+                typingIndicator.innerHTML = `
+                    <div class="flex items-start space-x-2">
+                        <div class="bg-blue-500 text-white p-2 rounded-full">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium text-gray-700">AI Assistant</p>
+                            <div class="typing-indicator mt-1">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                chatContainer.appendChild(typingIndicator);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+                // Simulate API call with timeout
+                setTimeout(() => {
+                    // Remove typing indicator
+                    typingIndicator.remove();
+                    // Generate response based on settings
+                    let response;
+                    if (settings.apiProvider === 'free') {
+                        // Update token usage (random between 20-50 for demo)
+                        const tokensUsed = Math.floor(Math.random() * 30) + 20;
+                        settings.tokenUsage += tokensUsed;
+                        localStorage.setItem('aiClientSettings', JSON.stringify(settings));
+                        updateTokenCounter();
+                        // Free API responses
+                        const freeResponses = [
+                            "I'm responding using the free API service. For more advanced features, consider using your own API key.",
+                            "This is a sample response from the free tier. The free API has limited capabilities compared to premium services.",
+                            "Free API response: I can help with basic queries. For complex tasks, you might want to configure your own API key in settings.",
+                            "Using the free service, my responses are limited. Did you know you can connect your own API for better performance?",
+                            "This is a simulated response from the free API. In a real implementation, this would connect to an actual AI service."
+                        ];
+                        response = freeResponses[Math.floor(Math.random() * freeResponses.length)];
+                    } else {
+                        // Simulate premium response
+                        const premiumResponses = [
+                            "This would be the actual response from your configured API. The web app would make a real API call to the service you specified.",
+                            "If you had configured your API key, this response would come directly from the AI service provider you selected.",
+                            "In a production environment, this would connect to the API endpoint you specified in the settings.",
+                            "With a custom API, you would receive higher quality responses with more capabilities than the free tier.",
+                            "Your own API key would enable more advanced features and longer conversations."
+                        ];
+                        response = premiumResponses[Math.floor(Math.random() * premiumResponses.length)];
+                    }
+                    // If web search was enabled, append results
+                    if (isWebSearchEnabled && searchResults.length > 0) {
+                        response += "\n\nWeb search results:\n";
+                        searchResults.forEach((result, index) => {
+                            response += `${index + 1}. ${result.title}\n   ${result.url}\n`;
+                        });
+                        searchResults = []; // Clear results after showing
+                    }
+                    // If files were uploaded, mention them
+                    if (uploadedFiles.length > 0) {
+                        response += "\n\nI've processed the following files:\n";
+                        uploadedFiles.forEach(file => {
+                            response += `- ${file.name} (${file.type})\n`;
+                        });
+                        if (settings.features.multimodal) {
+                            response += "\nI've analyzed the content of these files using multimodal capabilities.";
+                        }
+                        // Clear files after processing
+                        uploadedFiles = [];
+                        filePreviews.innerHTML = '';
+                        filePreviews.classList.add('hidden');
+                        dropzone.classList.add('hidden');
+                    }
+                    addMessageToChat('ai', response);
+                }, 1500);
+            });
+            // Functions
+            function updateAPIConfigurationUI() {
+                const selectedProvider = document.querySelector('input[name="api-provider"]:checked').value;
+                if (selectedProvider === 'free') {
+                    apiKeySection.classList.add('hidden');
+                    customApiSection.classList.add('hidden');
+                    modelSelect.innerHTML = `
+                        <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Free)</option>
+                        <option value="gpt-3.5-turbo-16k">GPT-3.5 Turbo 16k</option>
+                    `;
+                } else if (selectedProvider === 'custom') {
+                    apiKeySection.classList.remove('hidden');
+                    customApiSection.classList.remove('hidden');
+                    modelSelect.innerHTML = `
+                        <option value="custom">Custom Model</option>
+                    `;
+                } else {
+                    apiKeySection.classList.remove('hidden');
+                    customApiSection.classList.add('hidden');
+                    if (selectedProvider === 'openai') {
+                        modelSelect.innerHTML = `
+                            <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                            <option value="gpt-4">GPT-4</option>
+                            <option value="gpt-4-turbo">GPT-4 Turbo</option>
+                            <option value="dall-e">DALL·E (Image Generation)</option>
+                        `;
+                    } else if (selectedProvider === 'anthropic') {
+                        modelSelect.innerHTML = `
+                            <option value="claude-2">Claude 2</option>
+                            <option value="claude-instant">Claude Instant</option>
+                        `;
+                    } else if (selectedProvider === 'google') {
+                        modelSelect.innerHTML = `
+                            <option value="gemini-pro">Gemini Pro</option>
+                            <option value="gemini-vision">Gemini Vision</option>
+                        `;
+                    }
+                }
+            }
+            function updateUIFromSettings() {
+                // Set radio button
+                document.querySelector(`input[name="api-provider"][value="${settings.apiProvider}"]`).checked = true;
+                // Set input fields
+                document.getElementById('api-key-input').value = settings.apiKey;
+                document.getElementById('api-endpoint-input').value = settings.apiEndpoint;
+                document.getElementById('api-method-select').value = settings.apiMethod;
+                document.getElementById('api-headers-input').value = settings.apiHeaders;
+                document.getElementById('api-body-input').value = settings.apiBody;
+                // Set model select
+                modelSelect.value = settings.model;
+                // Set feature toggles
+                document.getElementById('enable-web-search-setting').checked = settings.features.webSearch;
+                document.getElementById('enable-file-upload-setting').checked = settings.features.fileUpload;
+                document.getElementById('enable-multimodal-setting').checked = settings.features.multimodal;
+                // Update API configuration UI
+                updateAPIConfigurationUI();
+                // Update token counter
+                updateTokenCounter();
+                // Update status
+                apiStatus.textContent = `Using: ${settings.apiProvider === 'free' ? 'Free API' : `${settings.apiProvider.charAt(0).toUpperCase() + settings.apiProvider.slice(1)} API`}`;
+                // Show/hide web search toggle
+                if (settings.features.webSearch) {
+                    webSearchToggle.classList.remove('hidden');
+                } else {
+                    webSearchToggle.classList.add('hidden');
+                }
+            }
+            function updateTokenCounter() {
+                if (settings.apiProvider === 'free') {
+                    const remaining = Math.max(0, 1000 - settings.tokenUsage);
+                    tokenCounter.textContent = `Tokens: ${settings.tokenUsage}/1000 (${remaining} remaining)`;
+                    if (remaining < 200) {
+                        tokenCounter.classList.add('text-red-500');
+                        tokenCounter.classList.remove('text-gray-500');
+                    } else {
+                        tokenCounter.classList.remove('text-red-500');
+                        tokenCounter.classList.add('text-gray-500');
+                    }
+                } else {
+                    tokenCounter.textContent = `Using: ${settings.apiProvider.charAt(0).toUpperCase() + settings.apiProvider.slice(1)} API`;
+                    tokenCounter.classList.remove('text-red-500');
+                    tokenCounter.classList.add('text-gray-500');
+                }
+            }
+            function addMessageToChat(role, content) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `chat-message ${role} p-4 max-w-[80%] slide-in`;
+                if (role === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="flex items-start space-x-2 justify-end">
+                            <div>
+                                <p class="font-medium text-gray-700 text-right">You</p>
+                                <p class="text-gray-600 mt-1">${content}</p>
+                            </div>
+                            <div class="bg-gray-500 text-white p-2 rounded-full">
+                                <i class="fas fa-user"></i>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="flex items-start space-x-2">
+                            <div class="bg-blue-500 text-white p-2 rounded-full">
+                                <i class="fas fa-robot"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium text-gray-700">AI Assistant</p>
+                                <p class="text-gray-600 mt-1 whitespace-pre-line">${content}</p>
+                            </div>
+                        </div>
+                    `;
+                }
+                chatContainer.appendChild(messageDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            function handleFiles(files) {
+                if (!settings.features.fileUpload) {
+                    showToast('File upload is disabled in settings', 'warning');
+                    return;
+                }
+                for (let i = 0; i < files.length; i++) {
+                    const file = files[i];
+                    if (file.size > 10 * 1024 * 1024) { // 10MB limit
+                        showToast(`File ${file.name} is too large (max 10MB)`, 'error');
+                        continue;
+                    }
+                    uploadedFiles.push(file);
+                    previewFile(file);
+                }
+                if (uploadedFiles.length > 0) {
+                    dropzone.classList.add('hidden');
+                    filePreviews.classList.remove('hidden');
+                }
+            }
+            function previewFile(file) {
+                const previewDiv = document.createElement('div');
+                previewDiv.className = 'flex items-center justify-between p-2 bg-gray-100 rounded mb-2';
+                const fileInfoDiv = document.createElement('div');
+                fileInfoDiv.className = 'flex items-center space-x-2';
+                let icon;
+                if (file.type.startsWith('image/')) {
+                    icon = '<i class="fas fa-image text-blue-500"></i>';
+                    // Create image preview
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const imgPreview = document.createElement('img');
+                        imgPreview.src = e.target.result;
+                        imgPreview.className = 'file-preview';
+                        fileInfoDiv.appendChild(imgPreview);
+                    };
+                    reader.readAsDataURL(file);
+                } else if (file.type === 'application/pdf') {
+                    icon = '<i class="fas fa-file-pdf text-red-500"></i>';
+                } else if (file.type.startsWith('text/')) {
+                    icon = '<i class="fas fa-file-alt text-green-500"></i>';
+                } else {
+                    icon = '<i class="fas fa-file text-gray-500"></i>';
+                }
+                fileInfoDiv.innerHTML += `
+                    ${icon}
+                    <div>
+                        <p class="text-sm font-medium">${file.name}</p>
+                        <p class="text-xs text-gray-500">${formatFileSize(file.size)}</p>
+                        <div class="progress-bar">
+                            <div class="progress-bar-fill" style="width: 100%"></div>
+                        </div>
+                    </div>
+                `;
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'text-red-500 hover:text-red-700';
+                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
+                removeBtn.onclick = function() {
+                    uploadedFiles = uploadedFiles.filter(f => f !== file);
+                    previewDiv.remove();
+                    if (uploadedFiles.length === 0) {
+                        filePreviews.classList.add('hidden');
+                        dropzone.classList.remove('hidden');
+                    }
+                };
+                previewDiv.appendChild(fileInfoDiv);
+                previewDiv.appendChild(removeBtn);
+                filePreviews.appendChild(previewDiv);
+            }
+            function formatFileSize(bytes) {
+                if (bytes < 1024) return bytes + ' bytes';
+                else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+                else return (bytes / 1048576).toFixed(1) + ' MB';
+            }
+            function simulateWebSearch(query, count) {
+                // Simulate search results
+                searchResults = [];
+                for (let i = 0; i < count; i++) {
+                    searchResults.push({
+                        title: `Search result for "${query}" (${i + 1})`,
+                        url: `https://example.com/search?q=${encodeURIComponent(query)}&result=${i + 1}`,
+                        snippet: `This is a simulated snippet for search result ${i + 1} about "${query}". In a real implementation, this would come from an actual search API.`
+                    });
+                }
+                showToast(`Found ${count} web results for "${query}"`, 'success');
+                isWebSearchEnabled = true;
+                enableWebSearch.checked = true;
+            }
+            function showToast(message, type) {
+                const colors = {
+                    success: 'bg-green-500',
+                    error: 'bg-red-500',
+                    warning: 'bg-yellow-500',
+                    info: 'bg-blue-500'
+                };
+                const toast = document.createElement('div');
+                toast.className = `fixed bottom-4 right-4 ${colors[type]} text-white px-4 py-2 rounded shadow-lg flex items-center space-x-2 animate-fade-in`;
+                toast.innerHTML = `
+                    <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle'}"></i>
+                    <span>${message}</span>
+                `;
+                document.body.appendChild(toast);
+                setTimeout(() => {
+                    toast.classList.add('animate-fade-out');
+                    setTimeout(() => {
+                        toast.remove();
+                    }, 300);
+                }, 3000);
+            }
+            // Initialize UI
+            updateTokenCounter();
+            if (settings.features.fileUpload) {
+                dropzone.classList.remove('hidden');
+            }
+        });
+    </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=chagtptmm/chatbox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>