| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Assistant - GPT-4 Powered</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 float { |
| |
| 0%, |
| 100% { |
| transform: translateY(0); |
| } |
| |
| 50% { |
| transform: translateY(-5px); |
| } |
| } |
| |
| .chatbot-avatar { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .message-enter { |
| animation: fadeInUp 0.3s ease-out; |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .typing-indicator span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: #4f46e5; |
| margin: 0 2px; |
| opacity: 0.4; |
| } |
| |
| .typing-indicator span:nth-child(1) { |
| animation: bounce 1s infinite; |
| } |
| |
| .typing-indicator span:nth-child(2) { |
| animation: bounce 1s infinite 0.2s; |
| } |
| |
| .typing-indicator span:nth-child(3) { |
| animation: bounce 1s infinite 0.4s; |
| } |
| |
| @keyframes bounce { |
| |
| 0%, |
| 100% { |
| transform: translateY(0); |
| opacity: 0.4; |
| } |
| |
| 50% { |
| transform: translateY(-5px); |
| opacity: 1; |
| } |
| } |
| |
| .markdown-style p { |
| margin-bottom: 0.75rem; |
| } |
| |
| .markdown-style ul, |
| .markdown-style ol { |
| margin-left: 1.5rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .markdown-style li { |
| margin-bottom: 0.25rem; |
| } |
| |
| .markdown-style code { |
| background-color: #f3f4f6; |
| padding: 0.2rem 0.4rem; |
| border-radius: 0.25rem; |
| font-family: monospace; |
| } |
| |
| .markdown-style pre { |
| background-color: #f3f4f6; |
| padding: 0.75rem; |
| border-radius: 0.5rem; |
| overflow-x: auto; |
| margin-bottom: 0.75rem; |
| } |
| |
| .language-selector { |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); |
| background-position: right 0.5rem center; |
| background-repeat: no-repeat; |
| background-size: 1.5em 1.5em; |
| } |
| |
| .file-upload { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border-width: 0; |
| } |
| |
| .file-preview { |
| max-height: 200px; |
| max-width: 100%; |
| border-radius: 0.5rem; |
| } |
| |
| .tab-active { |
| border-bottom: 2px solid #4f46e5; |
| color: #4f46e5; |
| } |
| |
| .modal { |
| transition: opacity 0.3s ease, visibility 0.3s ease; |
| } |
| </style> |
| </head> |
|
|
| <body class="bg-gray-100 font-sans flex items-center justify-center min-h-screen p-4"> |
| <div class="flex flex-col w-full max-w-4xl h-[800px] bg-white rounded-2xl shadow-xl overflow-hidden"> |
| |
| <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-4 text-white flex items-center"> |
| <div class="chatbot-avatar w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-indigo-600 text-xl"></i> |
| </div> |
| <div> |
| <h2 class="font-bold text-lg">AI Assistant</h2> |
| <p class="text-xs opacity-80">Powered by GPT-4</p> |
| </div> |
| <div class="ml-auto flex space-x-2"> |
| <button id="memory-toggle" class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition tooltip" data-tooltip="Memory: OFF"> |
| <i class="fas fa-brain text-sm"></i> |
| </button> |
| <button id="voice-toggle" class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition tooltip" data-tooltip="Voice Input"> |
| <i class="fas fa-microphone text-sm"></i> |
| </button> |
| <button id="new-chat" class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition tooltip" data-tooltip="New Chat"> |
| <i class="fas fa-plus text-sm"></i> |
| </button> |
| <button id="settings-btn" class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition tooltip" data-tooltip="Settings"> |
| <i class="fas fa-cog text-sm"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="chat-area" class="flex-1 p-4 overflow-y-auto space-y-4"> |
| |
| <div class="message-enter flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="max-w-[85%] markdown-style"> |
| <div class="bg-gray-50 text-gray-800 rounded-2xl rounded-tl-none px-4 py-3"> |
| <h3 class="font-bold text-indigo-600 mb-2">नमस्ते! Hello! ہیلو! 👋</h3> |
| <p>I'm your GPT-4 powered AI Assistant with multilingual support (English, हिंदी, اردو, and more).</p> |
|
|
| <p class="mt-3 font-medium">Key Features:</p> |
| <ul class="list-disc pl-5 mt-1 space-y-1"> |
| <li><strong>Multilingual Support:</strong> Communicate in multiple languages</li> |
| <li><strong>Code Generation:</strong> Write and debug code in various languages</li> |
| <li><strong>File Analysis:</strong> Upload documents, images for processing</li> |
| <li><strong>Context Memory:</strong> Remember conversation context when enabled</li> |
| <li><strong>Creative Writing:</strong> Generate stories, poems, articles</li> |
| </ul> |
|
|
| <p class="mt-3">Try asking me:</p> |
| <div class="flex flex-wrap gap-2 mt-2 ml-1"> |
| <button class="quick-prompt text-xs bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg hover:bg-indigo-100 transition"> |
| Explain quantum computing |
| </button> |
| <button class="quick-prompt text-xs bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg hover:bg-indigo-100 transition"> |
| Write a Python script for web scraping |
| </button> |
| <button class="quick-prompt text-xs bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg hover:bg-indigo-100 transition"> |
| मुझे हिंदी में कहानी सुनाओ |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-gray-200 p-4 bg-white"> |
| |
| <div id="file-preview-container" class="hidden mb-3"> |
| <div class="flex items-center justify-between bg-gray-100 rounded-lg p-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-alt text-indigo-600 mr-2"></i> |
| <span id="file-name" class="text-sm font-medium"></span> |
| </div> |
| <button id="remove-file" class="text-gray-500 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <form id="chat-form" class="flex items-end space-x-2"> |
| <div class="flex-1 relative"> |
| <textarea |
| id="user-input" |
| rows="1" |
| placeholder="Type your message here..." |
| class="w-full bg-gray-100 rounded-xl py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none max-h-32" |
| style="min-height: 44px;" |
| ></textarea> |
| <div class="absolute right-3 bottom-3 flex space-x-1"> |
| <button type="button" id="file-upload-btn" class="w-8 h-8 rounded-full text-gray-500 hover:text-indigo-600 hover:bg-gray-200 transition flex items-center justify-center tooltip" data-tooltip="Upload File"> |
| <i class="fas fa-paperclip"></i> |
| </button> |
| <input type="file" id="file-upload" class="file-upload" accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"> |
| <button type="button" id="language-btn" class="w-8 h-8 rounded-full text-gray-500 hover:text-indigo-600 hover:bg-gray-200 transition flex items-center justify-center tooltip" data-tooltip="Language"> |
| <i class="fas fa-language"></i> |
| </button> |
| </div> |
| </div> |
| <button |
| id="send-button" |
| type="submit" |
| class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white hover:bg-indigo-700 transition shrink-0" |
| > |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| <p class="text-xs text-gray-500 mt-2 text-center">AI may produce inaccurate information. Memory is currently |
| <span id="memory-status">OFF</span>.</p> |
| </div> |
|
|
| |
| <div id="typing-indicator" class="hidden px-4 pb-4"> |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="bg-gray-50 text-gray-800 rounded-2xl rounded-tl-none px-4 py-3 w-20"> |
| <div class="typing-indicator flex items-center h-6"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="language-modal" |
| class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal opacity-0 invisible"> |
| <div class="bg-white rounded-xl p-6 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">Select Language</h3> |
| <button id="close-language-modal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <select id="language-select" class="w-full p-3 border border-gray-300 rounded-lg language-selector"> |
| <option value="en">English</option> |
| <option value="hi">हिंदी (Hindi)</option> |
| <option value="ur">اردو (Urdu)</option> |
| <option value="bn">বাংলা (Bengali)</option> |
| <option value="ta">தமிழ் (Tamil)</option> |
| <option value="te">తెలుగు (Telugu)</option> |
| <option value="mr">मराठी (Marathi)</option> |
| <option value="gu">ગુજરાતી (Gujarati)</option> |
| <option value="pa">ਪੰਜਾਬੀ (Punjabi)</option> |
| </select> |
| <div class="mt-4 flex justify-end"> |
| <button id="confirm-language" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> |
| Confirm |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="settings-modal" |
| class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal opacity-0 invisible"> |
| <div class="bg-white rounded-xl p-6 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">Settings</h3> |
| <button id="close-settings-modal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
|
|
| <div class="space-y-4"> |
| <div> |
| <h4 class="font-medium mb-2">Memory Settings</h4> |
| <div class="flex items-center"> |
| <label class="inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="memory-switch" class="sr-only peer"> |
| <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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-indigo-600"></div> |
| <span class="ms-3 text-sm font-medium text-gray-700">Enable Conversation Memory</span> |
| </label> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">When enabled, I'll remember context from previous messages</p> |
| </div> |
|
|
| <div> |
| <h4 class="font-medium mb-2">Voice Input</h4> |
| <div class="flex items-center"> |
| <label class="inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="voice-switch" class="sr-only peer"> |
| <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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-indigo-600"></div> |
| <span class="ms-3 text-sm font-medium text-gray-700">Enable Voice Input</span> |
| </label> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Requires microphone access</p> |
| </div> |
|
|
| <div> |
| <h4 class="font-medium mb-2">Theme</h4> |
| <div class="flex space-x-2"> |
| <button class="theme-option w-8 h-8 rounded-full bg-white border border-gray-300" data-theme="light"></button> |
| <button class="theme-option w-8 h-8 rounded-full bg-gray-800 border border-gray-700" data-theme="dark"></button> |
| <button class="theme-option w-8 h-8 rounded-full bg-indigo-100 border border-indigo-300" data-theme="indigo"></button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-6 flex justify-end"> |
| <button id="save-settings" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> |
| Save Settings |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const chatArea = document.getElementById('chat-area'); |
| const userInput = document.getElementById('user-input'); |
| const sendButton = document.getElementById('send-button'); |
| const chatForm = document.getElementById('chat-form'); |
| const typingIndicator = document.getElementById('typing-indicator'); |
| const newChatBtn = document.getElementById('new-chat'); |
| const memoryToggle = document.getElementById('memory-toggle'); |
| const voiceToggle = document.getElementById('voice-toggle'); |
| const settingsBtn = document.getElementById('settings-btn'); |
| const fileUploadBtn = document.getElementById('file-upload-btn'); |
| const fileUpload = document.getElementById('file-upload'); |
| const filePreviewContainer = document.getElementById('file-preview-container'); |
| const fileName = document.getElementById('file-name'); |
| const removeFileBtn = document.getElementById('remove-file'); |
| const languageBtn = document.getElementById('language-btn'); |
| const languageModal = document.getElementById('language-modal'); |
| const closeLanguageModal = document.getElementById('close-language-modal'); |
| const confirmLanguage = document.getElementById('confirm-language'); |
| const languageSelect = document.getElementById('language-select'); |
| const settingsModal = document.getElementById('settings-modal'); |
| const closeSettingsModal = document.getElementById('close-settings-modal'); |
| const saveSettings = document.getElementById('save-settings'); |
| const memorySwitch = document.getElementById('memory-switch'); |
| const voiceSwitch = document.getElementById('voice-switch'); |
| const memoryStatus = document.getElementById('memory-status'); |
| |
| // App state |
| let currentLanguage = 'en'; |
| let memoryEnabled = false; |
| let voiceEnabled = false; |
| let selectedFile = null; |
| |
| // Initialize tooltips |
| function initTooltips() { |
| const tooltips = document.querySelectorAll('.tooltip'); |
| tooltips.forEach(tooltip => { |
| const text = tooltip.getAttribute('data-tooltip'); |
| const tooltipElement = document.createElement('div'); |
| tooltipElement.className = 'absolute z-10 invisible inline-block px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip-content'; |
| tooltipElement.textContent = text; |
| tooltip.appendChild(tooltipElement); |
| |
| tooltip.addEventListener('mouseenter', () => { |
| tooltipElement.classList.remove('invisible', 'opacity-0'); |
| tooltipElement.classList.add('visible', 'opacity-100'); |
| }); |
| |
| tooltip.addEventListener('mouseleave', () => { |
| tooltipElement.classList.add('invisible', 'opacity-0'); |
| tooltipElement.classList.remove('visible', 'opacity-100'); |
| }); |
| }); |
| } |
| |
| // Auto-resize textarea |
| userInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| |
| // Sample knowledge base with multilingual support |
| const knowledgeBase = { |
| "explain quantum computing": { |
| en: ` |
| <h3 class="font-bold mb-2">Quantum Computing Explained</h3> |
| <p>Quantum computing is an area of computing focused on developing computer technology based on the principles of quantum theory.</p> |
| |
| <p class="mt-2"><strong>Key concepts:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li><strong>Qubits:</strong> Unlike classical bits (0 or 1), qubits can exist in superposition (both 0 and 1 simultaneously)</li> |
| <li><strong>Superposition:</strong> Allows quantum computers to process complex calculations much faster</li> |
| <li><strong>Entanglement:</strong> Qubits can be linked, with the state of one directly affecting another</li> |
| </ul> |
| |
| <p class="mt-2"><strong>Potential applications:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Drug discovery and material science</li> |
| <li>Optimization problems</li> |
| <li>Cryptography and cybersecurity</li> |
| </ul> |
| `, |
| hi: ` |
| <h3 class="font-bold mb-2">क्वांटम कंप्यूटिंग की व्याख्या</h3> |
| <p>क्वांटम कंप्यूटिंग कंप्यूटिंग का एक क्षेत्र है जो क्वांटम सिद्धांत के सिद्धांतों पर आधारित कंप्यूटर प्रौद्योगिकी विकसित करने पर केंद्रित है।</p> |
| |
| <p class="mt-2"><strong>मुख्य अवधारणाएँ:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li><strong>क्यूबिट्स:</strong> क्लासिकल बिट्स (0 या 1) के विपरीत, क्यूबिट्स सुपरपोजिशन में मौजूद हो सकते हैं (एक साथ 0 और 1 दोनों)</li> |
| <li><strong>सुपरपोजिशन:</strong> क्वांटम कंप्यूटर को जटिल गणनाओं को बहुत तेजी से संसाधित करने की अनुमति देता है</li> |
| <li><strong>एन्टैंगलमेंट:</strong> क्यूबिट्स जुड़े हो सकते हैं, जिसमें एक की स्थिति दूसरे को सीधे प्रभावित करती है</li> |
| </ul> |
| |
| <p class="mt-2"><strong>संभावित अनुप्रयोग:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>दवा खोज और सामग्री विज्ञान</li> |
| <li>अनुकूलन समस्याएं</li> |
| <li>क्रिप्टोग्राफी और साइबर सुरक्षा</li> |
| </ul> |
| `, |
| ur: ` |
| <h3 class="font-bold mb-2">کوانٹم کمپیوٹنگ کی وضاحت</h3> |
| <p>کوانٹم کمپیوٹنگ کمپیوٹنگ کا ایک ایسا شعبہ ہے جو کوانٹم تھیوری کے اصولوں پر مبنی کمپیوٹر ٹیکنالوجی تیار کرنے پر مرکوز ہے۔</p> |
| |
| <p class="mt-2"><strong>اہم تصورات:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li><strong>کیوبٹس:</strong> کلاسیکی بٹس (0 یا 1) کے برعکس، کیوبٹس سپرپوزیشن میں موجود ہو سکتے ہیں (ایک ساتھ 0 اور 1 دونوں)</li> |
| <li><strong>سپرپوزیشن:</strong> کوانٹم کمپیوٹرز کو پیچیدہ حسابات کو بہت تیزی سے پروسیس کرنے کی اجازت دیتا ہے</li> |
| <li><strong>اینٹینگلمنٹ:</strong> کیوبٹس منسلک ہو سکتے ہیں، جس میں ایک کی حالت دوسرے کو براہ راست متاثر کرتی ہے</li> |
| </ul> |
| |
| <p class="mt-2"><strong>ممکنہ اطلاقات:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>دوا کی دریافت اور مواد کی سائنس</li> |
| <li>اصلاح کے مسائل</li> |
| <li>خفیہ نگاری اور سائبر سیکورٹی</li> |
| </ul> |
| ` |
| }, |
| "write a python script for web scraping": { |
| en: ` |
| <h3 class="font-bold mb-2">Python Web Scraping Script</h3> |
| <p>Here's a basic Python script using BeautifulSoup and requests for web scraping:</p> |
| |
| <pre class="mt-2"><code>import requests |
| from bs4 import BeautifulSoup |
| |
| # Target URL |
| url = "https://example.com" |
| |
| # Send HTTP request |
| response = requests.get(url) |
| |
| # Parse HTML content |
| soup = BeautifulSoup(response.text, 'html.parser') |
| |
| # Extract data (example: all links) |
| for link in soup.find_all('a'): |
| print(link.get('href'))</code></pre> |
| |
| <p class="mt-3"><strong>Requirements:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Install packages: <code>pip install beautifulsoup4 requests</code></li> |
| <li>Respect website's <code>robots.txt</code> and terms of service</li> |
| <li>Add delays between requests to avoid overloading servers</li> |
| </ul> |
| `, |
| hi: ` |
| <h3 class="font-bold mb-2">वेब स्क्रैपिंग के लिए पायथन स्क्रिप्ट</h3> |
| <p>वेब स्क्रैपिंग के लिए BeautifulSoup और requests का उपयोग करके एक बेसिक पायथन स्क्रिप्ट:</p> |
| |
| <pre class="mt-2"><code>import requests |
| from bs4 import BeautifulSoup |
| |
| # टारगेट URL |
| url = "https://example.com" |
| |
| # HTTP रिक्वेस्ट भेजें |
| response = requests.get(url) |
| |
| # HTML कंटेंट पार्स करें |
| soup = BeautifulSoup(response.text, 'html.parser') |
| |
| # डेटा निकालें (उदाहरण: सभी लिंक) |
| for link in soup.find_all('a'): |
| print(link.get('href'))</code></pre> |
| |
| <p class="mt-3"><strong>आवश्यकताएँ:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>पैकेज इंस्टॉल करें: <code>pip install beautifulsoup4 requests</code></li> |
| <li>वेबसाइट के <code>robots.txt</code> और नियमों का सम्मान करें</li> |
| <li>सर्वर को ओवरलोड करने से बचने के लिए अनुरोधों के बीच देरी जोड़ें</li> |
| </ul> |
| `, |
| ur: ` |
| <h3 class="font-bold mb-2">ویب سکریپنگ کے لیے پائتھن اسکرپٹ</h3> |
| <p>ویب سکریپنگ کے لیے BeautifulSoup اور requests کا استعمال کرتے ہوئے ایک بنیادی پائتھن اسکرپٹ:</p> |
| |
| <pre class="mt-2"><code>import requests |
| from bs4 import BeautifulSoup |
| |
| # ہدف URL |
| url = "https://example.com" |
| |
| # HTTP درخواست بھیجیں |
| response = requests.get(url) |
| |
| # HTML مواد کو پارس کریں |
| soup = BeautifulSoup(response.text, 'html.parser') |
| |
| # ڈیٹا نکالیں (مثال: تمام لنکس) |
| for link in soup.find_all('a'): |
| print(link.get('href'))</code></pre> |
| |
| <p class="mt-3"><strong>ضروریات:</strong></p> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>پیکیجز انسٹال کریں: <code>pip install beautifulsoup4 requests</code></li> |
| <li>ویب سائٹ کے <code>robots.txt</code> اور شرائط کی پابندی کریں</li> |
| <li>سرورز کو اوورلوڈ کرنے سے بچنے کے لیے درخواستوں کے درمیان تاخیر شامل کریں</li> |
| </ul> |
| ` |
| }, |
| "मुझे हिंदी में कहानी सुनाओ": { |
| en: ` |
| <h3 class="font-bold mb-2">Here's a short story in Hindi:</h3> |
| <p>Note: I'll display this in Hindi script, but I'm explaining in English for context.</p> |
| |
| <div class="mt-3 bg-indigo-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-indigo-700">बुद्धिमान किसान</h4> |
| <p class="mt-2">एक गाँव में एक बुद्धिमान किसान रहता था। एक दिन उसके खेत में एक विशाल पत्थर आ गिरा। गाँव वाले उसे हटाने की कोशिश करते रहे, पर सफल नहीं हुए।</p> |
| <p class="mt-2">किसान ने सोच-विचार कर पत्थर के चारों ओर एक खाई खोदी और उसमें पानी भर दिया। सर्दी के मौसम में पानी जम गया और पत्थर ऊपर उठ आया। फिर उसने आसानी से पत्थर को खेत से निकाल दिया।</p> |
| <p class="mt-2">शिक्षा: समस्याओं का समाधान बुद्धिमानी से करना चाहिए।</p> |
| </div> |
| |
| <p class="mt-3">Would you like me to translate this to English or modify it in any way?</p> |
| `, |
| hi: ` |
| <h3 class="font-bold mb-2">एक छोटी सी कहानी:</h3> |
| |
| <div class="mt-3 bg-indigo-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-indigo-700">बुद्धिमान किसान</h4> |
| <p class="mt-2">एक गाँव में एक बुद्धिमान किसान रहता था। एक दिन उसके खेत में एक विशाल पत्थर आ गिरा। गाँव वाले उसे हटाने की कोशिश करते रहे, पर सफल नहीं हुए।</p> |
| <p class="mt-2">किसान ने सोच-विचार कर पत्थर के चारों ओर एक खाई खोदी और उसमें पानी भर दिया। सर्दी के मौसम में पानी जम गया और पत्थर ऊपर उठ आया। फिर उसने आसानी से पत्थर को खेत से निकाल दिया।</p> |
| <p class="mt-2"><strong>शिक्षा:</strong> समस्याओं का समाधान बुद्धिमानी से करना चाहिए।</p> |
| </div> |
| |
| <p class="mt-3">क्या आप चाहेंगे कि मैं इस कहानी को अंग्रेजी में अनुवाद करूँ या इसमें कोई बदलाव करूँ?</p> |
| `, |
| ur: ` |
| <h3 class="font-bold mb-2">ہندی میں ایک چھوٹی سی کہانی:</h3> |
| <p>نوٹ: میں اسے ہندی رسم الخط میں ظاہر کروں گا، لیکن سیاق و سباق کے لیے انگریزی میں وضاحت کر رہا ہوں۔</p> |
| |
| <div class="mt-3 bg-indigo-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-indigo-700">عقل مند کسان</h4> |
| <p class="mt-2">ایک گاؤں میں ایک عقلمند کسان رہتا تھا۔ ایک دن اس کے کھیت میں ایک بڑا پتھر گر گیا۔ گاؤں والے اسے ہٹانے کی کوشش کرتے رہے، لیکن کامیاب نہ ہوئے۔</p> |
| <p class="mt-2">کسان نے سوچ بچار کر کے پتھر کے چاروں طرف ایک خندق کھودی اور اس میں پانی بھر دیا۔ سردی کے موسم میں پانی جم گیا اور پتھر اوپر آ گیا۔ پھر اس نے آسانی سے پتھر کو کھیت سے نکال دیا۔</p> |
| <p class="mt-2"><strong>سبق:</strong> مسائل کا حل عقلمندی سے کرنا چاہیے۔</p> |
| </div> |
| |
| <p class="mt-3">کیا آپ چاہیں گے کہ میں اس کہانی کا انگریزی میں ترجمہ کروں یا اس میں کوئی تبدیلی کروں؟</p> |
| ` |
| }, |
| "default": { |
| en: ` |
| <p>I'm an AI assistant designed to help with various tasks. I can:</p> |
| <ul class="list-disc pl-5 space-y-1 mt-2"> |
| <li>Answer questions on many topics</li> |
| <li>Help with coding problems</li> |
| <li>Generate creative content</li> |
| <li>Explain complex concepts</li> |
| </ul> |
| <p class="mt-2">What would you like to know about?</p> |
| `, |
| hi: ` |
| <p>मैं एक AI सहायक हूँ जो विभिन्न कार्यों में मदद के लिए बनाया गया है। मैं यह कर सकता हूँ:</p> |
| <ul class="list-disc pl-5 space-y-1 mt-2"> |
| <li>कई विषयों पर प्रश्नों के उत्तर देना</li> |
| <li>कोडिंग समस्याओं में सहायता करना</li> |
| <li>रचनात्मक सामग्री उत्पन्न करना</li> |
| <li>जटिल अवधारणाओं की व्याख्या करना</li> |
| </ul> |
| <p class="mt-2">आप किस बारे में जानना चाहेंगे?</p> |
| `, |
| ur: ` |
| <p>میں ایک AI معاون ہوں جو مختلف کاموں میں مدد کے لیے بنایا گیا ہے۔ میں یہ کر سکتا ہوں:</p> |
| <ul class="list-disc pl-5 space-y-1 mt-2"> |
| <li>کئی موضوعات پر سوالات کے جوابات دینا</li> |
| <li>کوڈنگ مسائل میں مدد کرنا</li> |
| <li>تخلیقی مواد پیدا کرنا</li> |
| <li>پیچیدہ تصورات کی وضاحت کرنا</li> |
| </ul> |
| <p class="mt-2">آپ کس بارے میں جاننا چاہیں گے؟</p> |
| ` |
| } |
| }; |
| |
| // Add message to chat |
| function addMessage(text, isUser, file = null) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message-enter flex items-start ${isUser ? 'justify-end' : ''}`; |
| |
| if (!isUser) { |
| messageDiv.innerHTML = ` |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="max-w-[85%] markdown-style"> |
| <div class="bg-gray-50 text-gray-800 rounded-2xl rounded-tl-none px-4 py-3"> |
| ${text} |
| </div> |
| </div> |
| `; |
| } else { |
| let fileContent = ''; |
| if (file) { |
| if (file.type.startsWith('image/')) { |
| fileContent = ` |
| <div class="mt-2"> |
| <img src="${URL.createObjectURL(file)}" alt="Uploaded image" class="file-preview rounded-lg"> |
| </div> |
| `; |
| } else { |
| fileContent = ` |
| <div class="mt-2 flex items-center bg-indigo-50 text-indigo-700 rounded-lg p-2"> |
| <i class="fas fa-file-alt mr-2"></i> |
| <span class="text-sm">${file.name}</span> |
| </div> |
| `; |
| } |
| } |
| |
| messageDiv.innerHTML = ` |
| <div class="max-w-[85%]"> |
| <div class="bg-indigo-600 text-white rounded-2xl rounded-tr-none px-4 py-3"> |
| <p>${text}</p> |
| ${fileContent} |
| </div> |
| </div> |
| `; |
| } |
| |
| chatArea.appendChild(messageDiv); |
| chatArea.scrollTop = chatArea.scrollHeight; |
| } |
| |
| // Simulate typing and response |
| function generateResponse(userMessage) { |
| typingIndicator.classList.remove('hidden'); |
| chatArea.scrollTop = chatArea.scrollHeight; |
| |
| // Find matching response or use default |
| const lowerMsg = userMessage.toLowerCase(); |
| let responseKey = 'default'; |
| |
| for (const key of Object.keys(knowledgeBase)) { |
| if (lowerMsg.includes(key.toLowerCase())) { |
| responseKey = key; |
| break; |
| } |
| } |
| |
| // Get response in current language or fallback to English |
| const response = knowledgeBase[responseKey][currentLanguage] || |
| knowledgeBase[responseKey]['en'] || |
| knowledgeBase['default'][currentLanguage] || |
| knowledgeBase['default']['en']; |
| |
| // Random delay between 1-3 seconds |
| const delay = 1000 + Math.random() * 2000; |
| |
| setTimeout(() => { |
| typingIndicator.classList.add('hidden'); |
| addMessage(response, false); |
| }, delay); |
| } |
| |
| // Handle form submission |
| chatForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const message = userInput.value.trim(); |
| if (message || selectedFile) { |
| addMessage(message || "Check this file", true, selectedFile); |
| userInput.value = ''; |
| userInput.style.height = 'auto'; |
| |
| // Clear file selection |
| if (selectedFile) { |
| filePreviewContainer.classList.add('hidden'); |
| selectedFile = null; |
| } |
| |
| generateResponse(message); |
| } |
| }); |
| |
| // Quick prompt buttons |
| document.querySelectorAll('.quick-prompt').forEach(button => { |
| button.addEventListener('click', function() { |
| const prompt = this.textContent.trim(); |
| userInput.value = prompt; |
| userInput.dispatchEvent(new Event('input')); |
| userInput.focus(); |
| }); |
| }); |
| |
| // New chat button |
| newChatBtn.addEventListener('click', function() { |
| if (confirm('Start a new chat? Your current conversation will be cleared.')) { |
| chatArea.innerHTML = ` |
| <div class="message-enter flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="max-w-[85%] markdown-style"> |
| <div class="bg-gray-50 text-gray-800 rounded-2xl rounded-tl-none px-4 py-3"> |
| <h3 class="font-bold text-indigo-600 mb-2">New Chat Started</h3> |
| <p>What would you like to talk about now?</p> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| }); |
| |
| // File upload handling |
| fileUploadBtn.addEventListener('click', function() { |
| fileUpload.click(); |
| }); |
| |
| fileUpload.addEventListener('change', function(e) { |
| if (e.target.files.length > 0) { |
| selectedFile = e.target.files[0]; |
| fileName.textContent = selectedFile.name; |
| filePreviewContainer.classList.remove('hidden'); |
| } |
| }); |
| |
| removeFileBtn.addEventListener('click', function() { |
| filePreviewContainer.classList.add('hidden'); |
| selectedFile = null; |
| fileUpload.value = ''; |
| }); |
| |
| // Language modal |
| languageBtn.addEventListener('click', function() { |
| languageModal.classList.remove('opacity-0', 'invisible'); |
| languageModal.classList.add('opacity-100', 'visible'); |
| }); |
| |
| closeLanguageModal.addEventListener('click', function() { |
| languageModal.classList.remove('opacity-100', 'visible'); |
| languageModal.classList.add('opacity-0', 'invisible'); |
| }); |
| |
| confirmLanguage.addEventListener('click', function() { |
| currentLanguage = languageSelect.value; |
| languageModal.classList.remove('opacity-100', 'visible'); |
| languageModal.classList.add('opacity-0', 'invisible'); |
| |
| // Update placeholder based on language |
| if (currentLanguage === 'hi') { |
| userInput.placeholder = "अपना संदेश यहाँ टाइप करें..."; |
| } else if (currentLanguage === 'ur') { |
| userInput.placeholder = "اپنا پیغام یہاں ٹائپ کریں..."; |
| } else { |
| userInput.placeholder = "Type your message here..."; |
| } |
| }); |
| |
| // Settings modal |
| settingsBtn.addEventListener('click', function() { |
| // Update switch states |
| memorySwitch.checked = memoryEnabled; |
| voiceSwitch.checked = voiceEnabled; |
| |
| settingsModal.classList.remove('opacity-0', 'invisible'); |
| settingsModal.classList.add('opacity-100', 'visible'); |
| }); |
| |
| closeSettingsModal.addEventListener('click', function() { |
| settingsModal.classList.remove('opacity-100', 'visible'); |
| settingsModal.classList.add('opacity-0', 'invisible'); |
| }); |
| |
| saveSettings.addEventListener('click', function() { |
| memoryEnabled = memorySwitch.checked; |
| voiceEnabled = voiceSwitch.checked; |
| |
| // Update UI |
| memoryStatus.textContent = memoryEnabled ? 'ON' : 'OFF'; |
| memoryToggle.setAttribute('data-tooltip', `Memory: ${memoryEnabled ? 'ON' : 'OFF'}`); |
| memoryToggle.innerHTML = `<i class="fas fa-brain text-sm ${memoryEnabled ? 'text-indigo-300' : ''}"></i>`; |
| |
| if (voiceEnabled) { |
| // In a real app, we would request microphone permissions here |
| alert("Voice input enabled. In a real app, this would request microphone access."); |
| } |
| |
| settingsModal.classList.remove('opacity-100', 'visible'); |
| settingsModal.classList.add('opacity-0', 'invisible'); |
| }); |
| |
| // Theme switching |
| document.querySelectorAll('.theme-option').forEach(option => { |
| option.addEventListener('click', function() { |
| const theme = this.getAttribute('data-theme'); |
| document.body.className = `font-sans flex items-center justify-center min-h-screen p-4 ${theme === 'dark' ? 'bg-gray-900' : theme === 'indigo' ? 'bg-indigo-50' : 'bg-gray-100'}`; |
| }); |
| }); |
| |
| // Initialize tooltips |
| initTooltips(); |
| }); |
| </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=badshah660394/hi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
| </html> |
