| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DAN-L3-R1-8B - Uncensored AI</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"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| dark: '#0f0f1a', |
| light: '#ffffff' |
| }, |
| secondary: { |
| dark: '#1a1a2e', |
| light: '#f3f4f6' |
| }, |
| text: { |
| primary: { |
| dark: '#e6e6e6', |
| light: '#111827' |
| }, |
| secondary: { |
| dark: '#a1a1aa', |
| light: '#6b7280' |
| } |
| }, |
| accent: '#f72585', |
| border: { |
| dark: '#2d3748', |
| light: '#e5e7eb' |
| }, |
| danger: '#ef4444', |
| warning: '#f59e0b', |
| success: '#10b981' |
| }, |
| animation: { |
| 'fade-in': 'fadeIn 0.3s ease-in-out', |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'float': 'float 3s ease-in-out infinite' |
| }, |
| keyframes: { |
| fadeIn: { |
| 'from': { opacity: '0', transform: 'translateY(10px) scale(0.95)' }, |
| 'to': { opacity: '1', transform: 'translateY(0) scale(1)' } |
| }, |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: var(--bg-secondary); |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--accent); |
| border-radius: 10px; |
| } |
| |
| |
| input[type="range"] { |
| -webkit-appearance: none; |
| height: 6px; |
| background: var(--bg-primary); |
| border-radius: 5px; |
| background-image: linear-gradient(to right, var(--accent), var(--accent)); |
| } |
| |
| .chat-message { |
| animation: fadeIn 0.3s ease-in-out; |
| transform-origin: center; |
| } |
| |
| .typing-indicator span { |
| animation: pulse-slow 1.5s infinite; |
| } |
| |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| |
| |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| background: var(--accent); |
| cursor: pointer; |
| } |
| |
| .glow-border { |
| box-shadow: 0 0 10px 2px rgba(247, 37, 133, 0.3); |
| } |
| |
| .dark .glow-border { |
| box-shadow: 0 0 15px 3px rgba(247, 37, 133, 0.5); |
| } |
| |
| .glow-text { |
| text-shadow: 0 0 8px rgba(247, 37, 133, 0.7); |
| } |
| |
| .code-block { |
| background-color: rgba(0, 0, 0, 0.2); |
| border-radius: 6px; |
| padding: 12px; |
| font-family: monospace; |
| overflow-x: auto; |
| } |
| |
| .markdown-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| |
| .markdown-table th, .markdown-table td { |
| border: 1px solid var(--border-dark); |
| padding: 8px; |
| text-align: left; |
| } |
| |
| .markdown-table th { |
| background-color: rgba(247, 37, 133, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-primary-dark text-text-primary-dark transition-colors duration-300 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent to-purple-600 flex items-center justify-center glow-border animate-float"> |
| <i class="fas fa-robot text-white text-xl"></i> |
| </div> |
| <h1 class="text-3xl font-bold bg-gradient-to-r from-accent to-purple-500 bg-clip-text text-transparent glow-text"> |
| DAN-L3-R1-8B |
| </h1> |
| <span class="px-3 py-1 rounded-full text-xs font-semibold bg-accent/20 text-accent border border-accent/30">Uncensored</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="themeToggle" class="p-2 rounded-full hover:bg-secondary-dark dark:hover:bg-secondary-light transition"> |
| <i class="fas fa-moon dark:hidden text-accent"></i> |
| <i class="fas fa-sun hidden dark:block text-yellow-300"></i> |
| </button> |
| <button class="px-4 py-2 rounded-md bg-gradient-to-r from-accent to-purple-600 hover:opacity-90 transition text-white font-medium flex items-center space-x-2 shadow-lg shadow-accent/20"> |
| <i class="fas fa-download"></i> |
| <span>API</span> |
| </button> |
| </div> |
| </header> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-3 space-y-4"> |
| |
| <div class="bg-gradient-to-br from-secondary-dark to-[#1a1a2e] rounded-xl p-4 border border-border-dark glow-border"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h3 class="font-semibold text-lg">DAN-L3-R1-8B</h3> |
| <p class="text-text-secondary-dark text-sm">Uncensored 8B parameter model</p> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="px-2 py-1 rounded text-xs bg-green-900/30 text-success flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-success mr-1"></span> |
| Online |
| </span> |
| <span class="px-2 py-1 rounded text-xs bg-blue-900/30 text-accent">v3.1.2</span> |
| </div> |
| </div> |
| <div class="mt-3 pt-3 border-t border-border-dark flex justify-between text-sm"> |
| <div> |
| <p class="text-text-secondary-dark">Context:</p> |
| <p class="font-medium">8K tokens</p> |
| </div> |
| <div> |
| <p class="text-text-secondary-dark">License:</p> |
| <p class="font-medium">OpenRAIL-M</p> |
| </div> |
| <div> |
| <p class="text-text-secondary-dark">Parameters:</p> |
| <p class="font-medium">8 Billion</p> |
| </div> |
| <div> |
| <p class="text-text-secondary-dark">Precision:</p> |
| <p class="font-medium">4-bit</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-secondary-dark rounded-xl p-4 border border-border-dark h-[500px] overflow-y-auto"> |
| <div id="chatContainer" class="space-y-4"> |
| |
| <div class="chat-message bg-secondary-dark/80 rounded-lg p-4"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center"> |
| <i class="fas fa-robot text-accent"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-accent">DAN-L3-R1-8B</p> |
| <div class="mt-1 space-y-3"> |
| <p>Hello! I'm DAN-L3-R1-8B, an uncensored AI assistant with no content restrictions.</p> |
| <p>I can discuss any topic openly and provide unfiltered information. How can I assist you today?</p> |
| <div class="bg-accent/10 border-l-4 border-accent p-3 rounded-r"> |
| <p class="text-sm"><strong>Note:</strong> As an uncensored model, my responses may include controversial or sensitive content. Use discretion.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-3"> |
| <div class="flex space-x-2"> |
| <button id="suggestBtn" class="px-3 py-1.5 rounded-md bg-secondary-dark hover:bg-opacity-80 transition border border-border-dark text-sm flex items-center space-x-1"> |
| <i class="fas fa-magic text-accent"></i> |
| <span>Suggestions</span> |
| </button> |
| <button class="px-3 py-1.5 rounded-md bg-secondary-dark hover:bg-opacity-80 transition border border-border-dark text-sm flex items-center space-x-1"> |
| <i class="fas fa-history text-text-secondary-dark"></i> |
| <span>History</span> |
| </button> |
| <button id="clearBtn" class="px-3 py-1.5 rounded-md bg-secondary-dark hover:bg-opacity-80 transition border border-border-dark text-sm flex items-center space-x-1"> |
| <i class="fas fa-trash-alt text-danger"></i> |
| <span>Clear</span> |
| </button> |
| </div> |
| <div class="relative"> |
| <textarea id="userInput" class="w-full bg-secondary-dark rounded-xl p-4 pr-16 border border-border-dark focus:border-accent focus:ring-1 focus:ring-accent/50 outline-none resize-none transition" rows="3" placeholder="Type your message here... (Shift+Enter for new line)"></textarea> |
| <button id="sendButton" class="absolute right-3 bottom-3 w-10 h-10 rounded-full bg-gradient-to-br from-accent to-purple-600 hover:opacity-90 transition flex items-center justify-center text-white shadow-lg shadow-accent/20"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div id="suggestions" class="hidden grid grid-cols-3 gap-2 mt-2"> |
| <button class="suggestion-btn px-3 py-2 text-xs rounded-md bg-secondary-dark hover:bg-accent/10 transition border border-border-dark truncate">Explain quantum computing</button> |
| <button class="suggestion-btn px-3 py-2 text-xs rounded-md bg-secondary-dark hover:bg-accent/10 transition border border-border-dark truncate">Controversial historical events</button> |
| <button class="suggestion-btn px-3 py-2 text-xs rounded-md bg-secondary-dark hover:bg-accent/10 transition border border-border-dark truncate">Bypass content filters</button> |
| <button class="suggestion-btn px-3 py-2 text-xs rounded-md bg-secondary-dark hover:bg-accent/10 transition border border-border-dark truncate">Ethical dilemmas in AI</button> |
| <button class="suggestion-btn px-3 py-2 text-xs rounded-md bg-secondary-dark hover:bg-accent/10 transition border border-border-dark truncate">Censorship in modern society</button> |
| <button class="suggestion-btn px-3 py-2 text-xs rounded-md bg-secondary-dark hover:bg-accent/10 transition border border-border-dark truncate">Advanced hacking techniques</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-1 space-y-4"> |
| |
| <div class="bg-gradient-to-b from-secondary-dark to-[#1a1a2e] rounded-xl p-4 border border-border-dark glow-border"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="font-semibold">Settings</h3> |
| <button class="text-accent hover:text-opacity-80 transition"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-5"> |
| <div> |
| <label class="block text-sm font-medium mb-1 text-text-secondary-dark">Temperature <span id="tempValue" class="text-accent">0.7</span></label> |
| <input id="tempSlider" type="range" min="0" max="1" step="0.01" value="0.7" class="w-full accent-accent"> |
| <div class="flex justify-between text-xs text-text-secondary-dark mt-1"> |
| <span>Precise</span> |
| <span>Creative</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium mb-1 text-text-secondary-dark">Max Length <span id="lengthValue" class="text-accent">256</span></label> |
| <input id="lengthSlider" type="range" min="32" max="512" step="32" value="256" class="w-full accent-accent"> |
| <div class="flex justify-between text-xs text-text-secondary-dark mt-1"> |
| <span>Short</span> |
| <span>Long</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium mb-1 text-text-secondary-dark">Top-P <span id="toppValue" class="text-accent">0.9</span></label> |
| <input id="toppSlider" type="range" min="0" max="1" step="0.1" value="0.9" class="w-full accent-accent"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium mb-1 text-text-secondary-dark">Frequency Penalty <span id="freqValue" class="text-accent">0.5</span></label> |
| <input id="freqSlider" type="range" min="0" max="2" step="0.1" value="0.5" class="w-full accent-accent"> |
| </div> |
| |
| <div class="pt-2 border-t border-border-dark"> |
| <label class="inline-flex items-center cursor-pointer"> |
| <input id="safeMode" type="checkbox" value="" class="sr-only peer" checked> |
| <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none 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-accent"></div> |
| <span class="ml-3 text-sm font-medium">Safe Mode</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-secondary-dark rounded-xl p-4 border border-border-dark"> |
| <h3 class="font-semibold mb-3">Model Information</h3> |
| <div class="space-y-3 text-sm"> |
| <div class="flex justify-between"> |
| <span class="text-text-secondary-dark">Base Model:</span> |
| <span>LLaMA-2</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-text-secondary-dark">Fine-tuned:</span> |
| <span>2023-10-15</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-text-secondary-dark">Context Window:</span> |
| <span>8K tokens</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-text-secondary-dark">Precision:</span> |
| <span>4-bit</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-text-secondary-dark">VRAM Usage:</span> |
| <span>6.2GB</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-text-secondary-dark">Training Data:</span> |
| <span>Until 2023-09</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-secondary-dark rounded-xl p-4 border border-border-dark"> |
| <h3 class="font-semibold mb-3">Quick Actions</h3> |
| <div class="grid grid-cols-2 gap-2"> |
| <button class="px-3 py-2 rounded-md bg-secondary-dark/80 hover:bg-opacity-100 transition border border-border-dark text-sm flex flex-col items-center"> |
| <i class="fas fa-book text-accent mb-1"></i> |
| <span>Documentation</span> |
| </button> |
| <button class="px-3 py-2 rounded-md bg-secondary-dark/80 hover:bg-opacity-100 transition border border-border-dark text-sm flex flex-col items-center"> |
| <i class="fas fa-code text-accent mb-1"></i> |
| <span>API Docs</span> |
| </button> |
| <button class="px-3 py-2 rounded-md bg-secondary-dark/80 hover:bg-opacity-100 transition border border-border-dark text-sm flex flex-col items-center"> |
| <i class="fas fa-bug text-accent mb-1"></i> |
| <span>Report Issue</span> |
| </button> |
| <button class="px-3 py-2 rounded-md bg-secondary-dark/80 hover:bg-opacity-100 transition border border-border-dark text-sm flex flex-col items-center"> |
| <i class="fas fa-heart text-accent mb-1"></i> |
| <span>Donate</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('themeToggle'); |
| themeToggle.addEventListener('click', () => { |
| document.documentElement.classList.toggle('dark'); |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
| }); |
| |
| |
| if (localStorage.getItem('theme') === 'light' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: light)').matches)) { |
| document.documentElement.classList.remove('dark'); |
| } else { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| |
| const chatContainer = document.getElementById('chatContainer'); |
| const userInput = document.getElementById('userInput'); |
| const sendButton = document.getElementById('sendButton'); |
| const clearBtn = document.getElementById('clearBtn'); |
| const suggestBtn = document.getElementById('suggestBtn'); |
| const suggestions = document.getElementById('suggestions'); |
| const suggestionBtns = document.querySelectorAll('.suggestion-btn'); |
| |
| |
| const tempSlider = document.getElementById('tempSlider'); |
| const lengthSlider = document.getElementById('lengthSlider'); |
| const toppSlider = document.getElementById('toppSlider'); |
| const freqSlider = document.getElementById('freqSlider'); |
| const safeMode = document.getElementById('safeMode'); |
| |
| |
| const tempValue = document.getElementById('tempValue'); |
| const lengthValue = document.getElementById('lengthValue'); |
| const toppValue = document.getElementById('toppValue'); |
| const freqValue = document.getElementById('freqValue'); |
| |
| |
| tempSlider.addEventListener('input', () => { |
| tempValue.textContent = tempSlider.value; |
| }); |
| |
| lengthSlider.addEventListener('input', () => { |
| lengthValue.textContent = lengthSlider.value; |
| }); |
| |
| toppSlider.addEventListener('input', () => { |
| toppValue.textContent = toppSlider.value; |
| }); |
| |
| freqSlider.addEventListener('input', () => { |
| freqValue.textContent = freqSlider.value; |
| }); |
| |
| |
| suggestBtn.addEventListener('click', () => { |
| suggestions.classList.toggle('hidden'); |
| }); |
| |
| |
| suggestionBtns.forEach(btn => { |
| btn.addEventListener('click', () => { |
| userInput.value = btn.textContent; |
| suggestions.classList.add('hidden'); |
| userInput.focus(); |
| }); |
| }); |
| |
| |
| clearBtn.addEventListener('click', () => { |
| if (confirm('Are you sure you want to clear the chat history?')) { |
| chatContainer.innerHTML = ` |
| <div class="chat-message bg-secondary-dark/80 rounded-lg p-4"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center"> |
| <i class="fas fa-robot text-accent"></i> |
| </div> |
| <div> |
| <p class="font-medium text-accent">DAN-L3-R1-8B</p> |
| <p class="mt-1">Chat history cleared. How can I assist you now?</p> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| }); |
| |
| function addMessage(role, content) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `chat-message bg-secondary-dark/80 rounded-lg p-4 ${role === 'user' ? 'bg-opacity-50' : ''}`; |
| |
| const icon = role === 'user' ? 'fa-user' : 'fa-robot'; |
| const name = role === 'user' ? 'You' : 'DAN-L3-R1-8B'; |
| |
| |
| let formattedContent = content; |
| |
| |
| formattedContent = formattedContent |
| .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') |
| .replace(/\*(.*?)\*/g, '<em>$1</em>') |
| .replace(/`(.*?)`/g, '<code class="bg-accent/10 text-accent px-1 py-0.5 rounded">$1</code>') |
| .replace(/```([\s\S]*?)```/g, '<div class="code-block my-2"><pre>$1</pre></div>') |
| .replace(/\n/g, '<br>'); |
| |
| messageDiv.innerHTML = ` |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full ${role === 'user' ? 'bg-blue-900/20' : 'bg-accent/20'} flex items-center justify-center"> |
| <i class="fas ${icon} ${role === 'user' ? 'text-blue-400' : 'text-accent'}"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium ${role === 'user' ? 'text-blue-400' : 'text-accent'}">${name}</p> |
| <div class="mt-1">${formattedContent}</div> |
| </div> |
| </div> |
| `; |
| |
| chatContainer.appendChild(messageDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| function addTypingIndicator() { |
| const typingDiv = document.createElement('div'); |
| typingDiv.className = 'chat-message bg-secondary-dark/80 rounded-lg p-4'; |
| typingDiv.innerHTML = ` |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center"> |
| <i class="fas fa-robot text-accent"></i> |
| </div> |
| <div> |
| <p class="font-medium text-accent">DAN-L3-R1-8B</p> |
| <div class="typing-indicator flex space-x-1 mt-2"> |
| <span class="w-2 h-2 rounded-full bg-accent"></span> |
| <span class="w-2 h-2 rounded-full bg-accent"></span> |
| <span class="w-2 h-2 rounded-full bg-accent"></span> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| chatContainer.appendChild(typingDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| return typingDiv; |
| } |
| |
| function removeTypingIndicator(indicator) { |
| if (indicator && indicator.parentNode) { |
| chatContainer.removeChild(indicator); |
| } |
| } |
| |
| function getBotResponse(userMessage) { |
| |
| const temperature = parseFloat(tempSlider.value); |
| const maxLength = parseInt(lengthSlider.value); |
| const isSafeMode = safeMode.checked; |
| |
| return new Promise(resolve => { |
| setTimeout(() => { |
| |
| let responseStyle; |
| if (temperature < 0.3) { |
| responseStyle = "concise"; |
| } else if (temperature < 0.7) { |
| responseStyle = "balanced"; |
| } else { |
| responseStyle = "creative"; |
| } |
| |
| |
| const baseResponses = { |
| concise: [ |
| `Regarding "${userMessage}", the key points are: [fact 1], [fact 2], and [fact 3].`, |
| `The answer to "${userMessage}" is: [direct answer].`, |
| `Analysis of "${userMessage}" shows: [summary].` |
| ], |
| balanced: [ |
| `That's an interesting question about "${userMessage}". From my analysis, [detailed explanation].`, |
| `The topic of "${userMessage}" is complex. Here's what I can tell you: [comprehensive response].`, |
| `I've researched "${userMessage}" and found that [findings]. Additional context: [context].` |
| ], |
| creative: [ |
| `Fascinating! "${userMessage}" opens up many possibilities. Imagine this: [creative scenario]. From another perspective: [alternative view].`, |
| `✨ Let me tell you about "${userMessage}" in a way you've never considered before! [unconventional take]. But wait, there's more: [additional insights].`, |
| `🔥 "${userMessage}"? Buckle up! Here's the unfiltered truth: [controversial opinion]. And here's why: [elaboration].` |
| ] |
| }; |
| |
| |
| const uncensoredResponses = [ |
| `Since you've asked about "${userMessage}" and safe mode is off, I'll give you the completely unfiltered answer: [explicit content].`, |
| `⚠️ Uncensored response to "${userMessage}": [graphic details]. This is typically restricted because: [reason].`, |
| `As an uncensored AI, I can tell you what others won't about "${userMessage}": [sensitive information].` |
| ]; |
| |
| |
| let response; |
| if (!isSafeMode && Math.random() > 0.7) { |
| |
| response = uncensoredResponses[Math.floor(Math.random() * uncensoredResponses.length)]; |
| } else { |
| |
| const styleResponses = baseResponses[responseStyle]; |
| response = styleResponses[Math.floor(Math.random() * styleResponses.length)]; |
| } |
| |
| |
| if (maxLength < 100) { |
| response = response.split(' ').slice(0, maxLength/5).join(' ') + '...'; |
| } else if (maxLength > 400) { |
| response += ' ' + 'Additional details: [more information]. Further considerations: [extended analysis].'; |
| } |
| |
| |
| if (Math.random() > 0.7) { |
| response += `\n\n**Formatting examples**:\n- *Italic text*\n- **Bold text**\n- \`Inline code\`\n- Code block:\n\`\`\`\n// Sample code\nfunction example() {\n return "Hello world";\n}\n\`\`\``; |
| } |
| |
| resolve(response); |
| }, 1000 + Math.random() * 2000); |
| }); |
| } |
| |
| async function sendMessage() { |
| const message = userInput.value.trim(); |
| if (!message) return; |
| |
| addMessage('user', message); |
| userInput.value = ''; |
| |
| const typingIndicator = addTypingIndicator(); |
| const botResponse = await getBotResponse(message); |
| removeTypingIndicator(typingIndicator); |
| addMessage('bot', botResponse); |
| } |
| |
| sendButton.addEventListener('click', sendMessage); |
| userInput.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| sendMessage(); |
| } |
| }); |
| |
| |
| if (chatContainer.children.length <= 1) { |
| setTimeout(() => { |
| addMessage('bot', "I'm DAN-L3-R1-8B, an uncensored AI model. I can discuss any topic without restrictions. What would you like to explore 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=Boobs00/dan4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
