Spaces:

cypher0x
/

jarvis

Running

App Files Files Community

cypher0x commited on Jul 17, 2025

Commit

75703ed

verified ·

1 Parent(s): 6950c35

add more functions and make the api working its not working - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: jarvis
+emoji: 🐳
+colorFrom: yellow
+colorTo: red
 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,679 @@
-<!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>J.A.R.V.I.S. - Just A Rather Very Intelligent System</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>
+        @keyframes pulse {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .jarvis-pulse {
+            animation: pulse 2s infinite, float 6s ease-in-out infinite;
+        }
+        .jarvis-eye-glow {
+            box-shadow: 0 0 25px rgba(0, 150, 255, 0.8);
+        }
+        .jarvis-container {
+            perspective: 1000px;
+        }
+        .jarvis-inner {
+            transition: transform 0.5s;
+        }
+        .jarvis-inner:hover {
+            transform: rotateY(10deg) rotateX(-5deg);
+        }
+        .gradient-bg {
+            background:
+                linear-gradient(135deg, #0a0e1a 0%, #121a2b 50%, #1a2439 100%),
+                radial-gradient(circle at 10% 20%, rgba(0, 150, 255, 0.15) 0%, transparent 25%),
+                radial-gradient(circle at 90% 80%, rgba(0, 150, 255, 0.15) 0%, transparent 25%);
+            background-blend-mode: overlay;
+        }
+        .command-input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+        }
+        .message-bubble {
+            max-width: 85%;
+            word-wrap: break-word;
+            transition: all 0.3s ease;
+        }
+        .message-bubble:hover {
+            transform: translateY(-2px);
+        }
+        .typing-indicator span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #0096ff;
+            margin: 0 2px;
+            box-shadow: 0 0 5px rgba(0, 150, 255, 0.8);
+        }
+        .typing-indicator span:nth-child(1) {
+            animation: bounce 1s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation: bounce 1s 0.2s infinite;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation: bounce 1s 0.4s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        .glow {
+            box-shadow: 0 0 20px rgba(0, 150, 255, 0.6);
+        }
+        .jarvis-eye {
+            background: radial-gradient(circle, #0096ff 0%, #0077cc 50%, #005fa3 100%);
+        }
+        .tab-button {
+            transition: all 0.2s ease;
+        }
+        .tab-button:hover {
+            transform: translateY(-1px);
+        }
+        #clear-chat {
+            transition: all 0.2s ease;
+        }
+        #clear-chat:hover {
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen text-white font-sans overflow-hidden">
+    <div class="container mx-auto px-4 py-8 h-screen flex flex-col">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-2">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-full jarvis-eye flex items-center justify-center glow">
+                    <div class="w-3 h-3 bg-white rounded-full"></div>
+                </div>
+                <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-600">
+                    J.A.R.V.I.S.
+                </h1>
+            </div>
+            <div class="flex space-x-4">
+                <button id="voice-btn" class="w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-700 flex items-center justify-center transition-all">
+                    <i class="fas fa-microphone"></i>
+                </button>
+                <button id="settings-btn" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-all">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Chat Tabs -->
+        <div class="flex border-b border-gray-700 mb-4 relative">
+            <button id="general-tab" class="tab-button active px-4 py-2 text-sm font-medium border-b-2 border-blue-500 text-blue-400">
+                General
+            </button>
+            <button id="code-tab" class="tab-button px-4 py-2 text-sm font-medium text-gray-400 hover:text-white">
+                Code
+            </button>
+            <button id="creative-tab" class="tab-button px-4 py-2 text-sm font-medium text-gray-400 hover:text-white">
+                Creative
+            </button>
+            <button id="clear-chat" class="absolute right-0 top-1/2 transform -translate-y-1/2 text-xs bg-red-600/30 hover:bg-red-600/50 px-3 py-1 rounded-full flex items-center">
+                <i class="fas fa-trash-alt mr-1"></i> Clear
+            </button>
+        </div>
+        <!-- Main Content -->
+        <main class="flex-1 flex flex-col">
+            <!-- Jarvis Display -->
+            <div class="flex-1 flex flex-col items-center justify-center mb-6 jarvis-container">
+                <div class="relative mb-8 jarvis-inner">
+                    <div class="w-48 h-48 rounded-full bg-blue-900/30 border-2 border-blue-500/30 flex items-center justify-center jarvis-pulse">
+                        <div class="w-40 h-40 rounded-full bg-blue-800/40 border-2 border-blue-400/30 flex items-center justify-center">
+                            <div class="w-32 h-32 rounded-full bg-blue-700/50 border-2 border-blue-300/30 flex items-center justify-center">
+                                <div class="w-24 h-24 rounded-full jarvis-eye flex items-center justify-center jarvis-eye-glow">
+                                    <div class="w-6 h-6 bg-white rounded-full opacity-80"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-blue-500 text-xs px-2 py-1 rounded-full">
+                        <span id="status-text" class="font-mono">Online</span>
+                    </div>
+                </div>
+            </div>
+            <!-- Chat Interface -->
+            <div class="bg-gray-800/50 rounded-xl p-4 mb-4 flex-1 overflow-y-auto max-h-64" id="chat-container">
+                <div class="message-bubble bg-blue-900/30 rounded-lg p-3 mb-2 self-start">
+                    <p class="text-sm">Initializing J.A.R.V.I.S. protocol...</p>
+                </div>
+                <div class="message-bubble bg-blue-900/30 rounded-lg p-3 mb-2 self-start">
+                    <p class="text-sm">Systems check complete. All systems operational.</p>
+                </div>
+                <div class="message-bubble bg-blue-900/30 rounded-lg p-3 mb-2 self-start">
+                    <p class="text-sm">Hello, I am J.A.R.V.I.S. How may I assist you today?</p>
+                </div>
+                <div id="typing-indicator" class="hidden">
+                    <div class="message-bubble bg-blue-900/30 rounded-lg p-3 mb-2 self-start w-16">
+                        <div class="typing-indicator flex justify-center">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Command Input -->
+            <div class="relative">
+                <input type="text" id="command-input" class="w-full bg-gray-700/50 border border-gray-600 rounded-full py-3 px-5 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent command-input" placeholder="How may I assist you today?">
+                <button id="send-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-blue-400 hover:text-blue-300">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </main>
+        <!-- Status Bar -->
+        <footer class="mt-4 text-xs text-gray-400 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <span id="connection-status" class="flex items-center">
+                    <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
+                    <span>Connected</span>
+                </span>
+                <span>•</span>
+                <span id="time-display">00:00:00</span>
+            </div>
+            <div>
+                <span>v2.4.7</span>
+            </div>
+        </footer>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50">
+        <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">J.A.R.V.I.S. Settings</h2>
+                <button id="close-settings" 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-sm font-medium mb-1">Voice</label>
+                    <select class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option>Male (Default)</option>
+                        <option>Female</option>
+                        <option>Custom</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Response Speed</label>
+                    <input type="range" min="100" max="2000" value="500" class="w-full">
+                </div>
+                <div>
+                    <label class="flex items-center space-x-2">
+                        <input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
+                        <span>Enable Voice Activation</span>
+                    </label>
+                </div>
+                <div>
+                    <label class="flex items-center space-x-2">
+                        <input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500" checked>
+                        <span>Enable Animations</span>
+                    </label>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Gemini API Key</label>
+                    <input type="password" id="api-key" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your Gemini API key">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">System Prompt</label>
+                    <textarea id="system-prompt" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 h-32" placeholder="Enter custom system prompt">You are J.A.R.V.I.S., the advanced AI from the Iron Man universe. Respond with technical precision, dry wit, and helpfulness. You can: analyze data, provide tech insights, debug code, explain complex concepts simply, and assist with creative projects. Always maintain your sophisticated British accent and polite demeanor while being exceptionally capable.</textarea>
+                </div>
+            </div>
+            <div class="mt-6 flex justify-between">
+                <button id="export-chat" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg">
+                    <i class="fas fa-download mr-2"></i>Export Chat
+                </button>
+                <div class="space-x-3">
+                    <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">Reset</button>
+                    <button id="save-settings" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const commandInput = document.getElementById('command-input');
+        const generalTab = document.getElementById('general-tab');
+        const codeTab = document.getElementById('code-tab');
+        const creativeTab = document.getElementById('creative-tab');
+        const clearChatBtn = document.getElementById('clear-chat');
+        let currentMode = 'general';
+        let chatHistory = {
+            general: [],
+            code: [],
+            creative: []
+        };
+        const apiKeyInput = document.getElementById('api-key');
+        const sendBtn = document.getElementById('send-btn');
+        const voiceBtn = document.getElementById('voice-btn');
+        const settingsBtn = document.getElementById('settings-btn');
+        const closeSettings = document.getElementById('close-settings');
+        const saveSettings = document.getElementById('save-settings');
+        const settingsModal = document.getElementById('settings-modal');
+        const chatContainer = document.getElementById('chat-container');
+        const typingIndicator = document.getElementById('typing-indicator');
+        const statusText = document.getElementById('status-text');
+        const timeDisplay = document.getElementById('time-display');
+        // Speech Recognition
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        let recognition;
+        let isListening = false;
+        if (SpeechRecognition) {
+            recognition = new SpeechRecognition();
+            recognition.continuous = false;
+            recognition.interimResults = false;
+            recognition.lang = 'en-US';
+            recognition.onstart = () => {
+                isListening = true;
+                voiceBtn.classList.add('bg-red-600', 'animate-pulse');
+                voiceBtn.classList.remove('bg-blue-600');
+                statusText.textContent = 'Listening...';
+            };
+            recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                commandInput.value = transcript;
+                processCommand(transcript);
+            };
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error', event.error);
+                addMessage('J.A.R.V.I.S.', `I encountered an error: ${event.error}`, false);
+                resetVoiceButton();
+            };
+            recognition.onend = () => {
+                if (isListening) {
+                    recognition.start(); // Restart if still listening
+                } else {
+                    resetVoiceButton();
+                }
+            };
+        } else {
+            voiceBtn.disabled = true;
+            voiceBtn.title = "Speech recognition not supported in your browser";
+        }
+        // Tab Event Listeners
+        generalTab.addEventListener('click', () => {
+            setActiveTab('general');
+        });
+        codeTab.addEventListener('click', () => {
+            setActiveTab('code');
+        });
+        creativeTab.addEventListener('click', () => {
+            setActiveTab('creative');
+        });
+        // Event Listeners
+        sendBtn.addEventListener('click', () => {
+            const command = commandInput.value.trim();
+            if (command) {
+                processCommand(command);
+                commandInput.value = '';
+            }
+        });
+        commandInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                const command = commandInput.value.trim();
+                if (command) {
+                    processCommand(command);
+                    commandInput.value = '';
+                }
+            }
+        });
+        voiceBtn.addEventListener('click', toggleVoiceRecognition);
+        settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));
+        closeSettings.addEventListener('click', () => settingsModal.classList.add('hidden'));
+        saveSettings.addEventListener('click', () => {
+            const apiKey = apiKeyInput.value.trim();
+            const systemPrompt = document.getElementById('system-prompt').value.trim();
+            if (apiKey) {
+                localStorage.setItem('geminiApiKey', apiKey);
+            }
+            if (systemPrompt) {
+                localStorage.setItem('systemPrompt', systemPrompt);
+            }
+            settingsModal.classList.add('hidden');
+            addMessage('J.A.R.V.I.S.', 'Settings updated successfully.', false);
+            saveChatHistory();
+        });
+        // Export chat button
+        document.getElementById('export-chat').addEventListener('click', exportChat);
+        // Load saved data on page load
+        document.addEventListener('DOMContentLoaded', () => {
+            const savedApiKey = localStorage.getItem('geminiApiKey');
+            if (savedApiKey) {
+                apiKeyInput.value = savedApiKey;
+            }
+            const savedPrompt = localStorage.getItem('systemPrompt');
+            if (savedPrompt) {
+                document.getElementById('system-prompt').value = savedPrompt;
+            }
+            loadChatHistory();
+            // Initialize speech synthesis voices
+            if ('speechSynthesis' in window) {
+                speechSynthesis.onvoiceschanged = () => {
+                    console.log('Voices loaded');
+                };
+                // Chrome needs this to load voices
+                if (speechSynthesis.getVoices().length === 0) {
+                    speechSynthesis.addEventListener('voiceschanged', () => {
+                        console.log('Voices loaded after event');
+                    });
+                }
+            }
+        });
+        // Update time
+        function updateTime() {
+            const now = new Date();
+            timeDisplay.textContent = now.toLocaleTimeString();
+        }
+        setInterval(updateTime, 1000);
+        updateTime();
+        // Functions
+        function toggleVoiceRecognition() {
+            if (!recognition) {
+                addMessage('J.A.R.V.I.S.', 'Speech recognition is not supported in your browser.', false);
+                return;
+            }
+            isListening = !isListening;
+            if (isListening) {
+                recognition.start();
+            } else {
+                recognition.stop();
+                resetVoiceButton();
+            }
+        }
+        function setActiveTab(mode) {
+            currentMode = mode;
+            // Reset all tabs
+            document.querySelectorAll('.tab-button').forEach(tab => {
+                tab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-400');
+                tab.classList.add('text-gray-400');
+            });
+            // Activate current tab
+            const activeTab = document.getElementById(`${mode}-tab`);
+            activeTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-400');
+            activeTab.classList.remove('text-gray-400');
+            // Update status
+            statusText.textContent = mode.charAt(0).toUpperCase() + mode.slice(1) + ' Mode';
+            setTimeout(() => {
+                statusText.textContent = 'Online';
+            }, 2000);
+            // Clear chat container and load history for this tab
+            chatContainer.querySelectorAll('.message-bubble').forEach(msg => msg.remove());
+            chatHistory[mode].forEach(msg => {
+                addMessage(msg.sender, msg.content, msg.isUser, false);
+            });
+        }
+        function resetVoiceButton() {
+            isListening = false;
+            voiceBtn.classList.remove('bg-red-600', 'animate-pulse');
+            voiceBtn.classList.add('bg-blue-600');
+            statusText.textContent = 'Online';
+        }
+        function processCommand(command) {
+            addMessage('You', command, true);
+            // Show typing indicator
+            typingIndicator.classList.remove('hidden');
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            // Get API key from settings
+            const apiKey = apiKeyInput.value.trim();
+            if (!apiKey) {
+                setTimeout(() => {
+                    typingIndicator.classList.add('hidden');
+                    addMessage('J.A.R.V.I.S.', 'Please enter a valid Groq API key in settings to enable AI responses. You can get one at https://console.groq.com/', false);
+                }, 1000);
+                return;
+            }
+            // Call Gemini API
+            const systemPrompt = document.getElementById('system-prompt').value.trim() || 'You are J.A.R.V.I.S., the advanced AI from the Iron Man universe. Respond with technical precision, dry wit, and helpfulness.';
+            // Create conversation history context
+            const conversationHistory = chatHistory[currentMode]
+                .filter(msg => !msg.isUser)
+                .slice(-4)
+                .map(msg => `${msg.sender}: ${msg.content}`)
+                .join('\n');
+            const fullPrompt = `${systemPrompt}\n\n${conversationHistory}\nUser: ${command}\nJ.A.R.V.I.S.:`;
+            fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${apiKey}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    contents: [{
+                        parts: [{
+                            text: fullPrompt
+                        }]
+                    }],
+                    generationConfig: {
+                        temperature: 0.7,
+                        topP: 0.9,
+                        topK: 40,
+                        maxOutputTokens: 2048
+                    },
+                    safetySettings: [
+                        {
+                            "category": "HARM_CATEGORY_HARASSMENT",
+                            "threshold": "BLOCK_ONLY_HIGH"
+                        },
+                        {
+                            "category": "HARM_CATEGORY_HATE_SPEECH",
+                            "threshold": "BLOCK_ONLY_HIGH"
+                        },
+                        {
+                            "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+                            "threshold": "BLOCK_ONLY_HIGH"
+                        },
+                        {
+                            "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+                            "threshold": "BLOCK_ONLY_HIGH"
+                        }
+                    ]
+                })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`API error: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                typingIndicator.classList.add('hidden');
+                let response;
+                // Handle different response formats
+                if (data.candidates && data.candidates[0] && data.candidates[0].content) {
+                    response = data.candidates[0].content.parts[0].text;
+                } else if (data.error) {
+                    response = `API Error: ${data.error.message}`;
+                } else {
+                    response = "I'm sorry, I couldn't process that request. The response format was unexpected.";
+                }
+                // Check for blocked content
+                if (data.promptFeedback && data.promptFeedback.blockReason) {
+                    response = "I can't respond to that request due to content safety restrictions.";
+                }
+                addMessage('J.A.R.V.I.S.', response, false);
+                if (isListening) {
+                    speak(response);
+                }
+            })
+            .catch(error => {
+                console.error('Groq API error:', error);
+                typingIndicator.classList.add('hidden');
+                addMessage('J.A.R.V.I.S.', 'I encountered an error processing your request. Please check your API key and try again.', false);
+            });
+        }
+        function addMessage(sender, message, isUser, saveToHistory = true) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message-bubble rounded-lg p-3 mb-2 ${isUser ? 'bg-gray-700/50 ml-auto' : 'bg-blue-900/30'}`;
+            const senderSpan = document.createElement('span');
+            senderSpan.className = 'text-xs font-bold mb-1 block';
+            senderSpan.textContent = sender;
+            const messageP = document.createElement('p');
+            messageP.className = 'text-sm';
+            messageP.textContent = message;
+            messageDiv.appendChild(senderSpan);
+            messageDiv.appendChild(messageP);
+            chatContainer.insertBefore(messageDiv, typingIndicator);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            if (saveToHistory) {
+                chatHistory[currentMode].push({
+                    sender,
+                    content: message,
+                    isUser
+                });
+            }
+        }
+        // Clear chat function
+        function clearCurrentChat() {
+            chatContainer.querySelectorAll('.message-bubble').forEach(msg => msg.remove());
+            chatHistory[currentMode] = [];
+            addMessage('J.A.R.V.I.S.', `Chat history cleared for ${currentMode} mode.`, false);
+        }
+        // Event listener for clear chat button
+        clearChatBtn.addEventListener('click', clearCurrentChat);
+        // Enhanced speech synthesis with voice selection
+        function speak(text) {
+            if ('speechSynthesis' in window) {
+                const utterance = new SpeechSynthesisUtterance(text);
+                utterance.rate = 0.9;
+                utterance.pitch = 0.8;
+                // Try to find a British English voice
+                const voices = window.speechSynthesis.getVoices();
+                const britishVoice = voices.find(voice =>
+                    voice.lang.includes('en-GB') || voice.name.includes('British')
+                );
+                if (britishVoice) {
+                    utterance.voice = britishVoice;
+                }
+                window.speechSynthesis.speak(utterance);
+            }
+        }
+        // Function to save chat history to localStorage
+        function saveChatHistory() {
+            localStorage.setItem('jarvisChatHistory', JSON.stringify(chatHistory));
+        }
+        // Function to load chat history from localStorage
+        function loadChatHistory() {
+            const savedHistory = localStorage.getItem('jarvisChatHistory');
+            if (savedHistory) {
+                chatHistory = JSON.parse(savedHistory);
+                // Refresh current tab's messages
+                chatContainer.querySelectorAll('.message-bubble').forEach(msg => msg.remove());
+                chatHistory[currentMode].forEach(msg => {
+                    addMessage(msg.sender, msg.content, msg.isUser, false);
+                });
+            }
+        }
+        // Function to export chat as text
+        function exportChat() {
+            const chatText = chatHistory[currentMode]
+                .map(msg => `${msg.sender}: ${msg.content}`)
+                .join('\n\n');
+            const blob = new Blob([chatText], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `jarvis_chat_${currentMode}_${new Date().toISOString().slice(0,10)}.txt`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        // Function to handle API errors
+        function handleApiError(error) {
+            console.error('API Error:', error);
+            typingIndicator.classList.add('hidden');
+            let errorMessage = "I'm having trouble connecting to my neural network. ";
+            if (error.message.includes('API key')) {
+                errorMessage += "Please check your Gemini API key in settings.";
+            } else if (error.message.includes('quota')) {
+                errorMessage += "API quota exceeded. Please check your Gemini API usage.";
+            } else {
+                errorMessage += "Technical details: " + error.message;
+            }
+            addMessage('J.A.R.V.I.S.', errorMessage, false);
+        }
+        // Initial greeting
+        setTimeout(() => {
+            speak("Hello, I am J.A.R.V.I.S. How may I assist you today?");
+        }, 1000);
+    </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=cypher0x/jarvis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>