| <!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: '#1a1a2e', light: '#ffffff' }, secondary: { dark: '#16213e', 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' }, keyframes: { fadeIn: { 'from': { opacity: '0', transform: 'translateY(10px) scale(0.95)' }, 'to': { opacity: '1', transform: 'translateY(0) scale(1)' } } } } } } </script> <style> /* Custom scrollbar */ ::-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; } /* Slider styling */ 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; } /* Custom range slider */ 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); } </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 --> <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-accent flex items-center justify-center glow-border"> <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"> DAN-L3-R1-8B </h1> <span class="px-3 py-1 rounded-full text-xs font-semibold bg-accent/20 text-accent">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-accent hover:bg-opacity-90 transition text-white font-medium flex items-center space-x-2"> <i class="fas fa-download"></i> <span>API</span> </button> </div> </header> <!-- Main Chat Area --> <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> <!-- Chat Column --> <div class="lg:col-span-3 space-y-4"> <!-- Model Info Card --> <div class="bg-secondary-dark rounded-xl p-4 border border-border-dark"> <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">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> </div> <!-- Chat Container --> <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"> <!-- Messages will be added here --> <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">Hello! I'm DAN-L3-R1-8B, an uncensored AI assistant. How can I help you today?</p> </div> </div> </div> </div> </div> <!-- Input Area --> <div class="space-y-3"> <div class="flex space-x-2"> <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-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 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" rows="3" placeholder="Type your message here..."></textarea> <button id="sendButton" class="absolute right-3 bottom-3 w-10 h-10 rounded-full bg-accent hover:bg-opacity-90 transition flex items-center justify-center text-white"> <i class="fas fa-paper-plane"></i> </button> </div> </div> </div> <!-- Settings Column --> <div class="lg:col-span-1 space-y-4"> <!-- Settings Panel --> <div class="bg-secondary-dark rounded-xl p-4 border border-border-dark"> <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</label> <input 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</label> <input 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</label> <input 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</label> <input 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 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> <!-- Model Info --> <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> </div> <!-- Quick Actions --> <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> // Theme toggle const themeToggle = document.getElementById('themeToggle'); themeToggle.addEventListener('click', () => { document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); }); // Check for saved theme preference 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'); } // Chat functionality const chatContainer = document.getElementById('chatContainer'); const userInput = document.getElementById('userInput'); const sendButton = document.getElementById('sendButton'); 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'; 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> <p class="font-medium ${role === 'user' ? 'text-blue-400' : 'text-accent'}">${name}</p> <p class="mt-1">${content}</p> </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) { // Simulate API call delay return new Promise(resolve => { setTimeout(() => { const responses = [ "I understand your question about " + userMessage + ". Here's what I can tell you...", "That's an interesting point about " + userMessage + ". From my perspective...", "I've analyzed your query regarding " + userMessage + ". My findings suggest...", "The topic of " + userMessage + " is quite complex. Let me break it down for you...", "Regarding " + userMessage + ", my uncensored analysis reveals..." ]; resolve(responses[Math.floor(Math.random() * responses.length)]); }, 1500 + 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(); } }); // Example of adding a welcome message if chat is empty 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> </body> </html> |