|
|
<!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> |
