challenger / index.html
KRAbbzunlocks's picture
MAKE ALL BUTTON RESPONSIVE - Initial Deployment
1e90aee verified
Raw
History Blame Contribute Delete
50.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expert AI Agent</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>
:root {
--bg-color: #f3f4f6;
--text-color: #111827;
--header-bg: linear-gradient(to right, #2563eb, #4f46e5);
--card-bg: #ffffff;
--input-bg: #ffffff;
--border-color: #e5e7eb;
}
.dark-mode {
--bg-color: #1f2937;
--text-color: #f3f4f6;
--header-bg: linear-gradient(to right, #1e40af, #3730a3);
--card-bg: #374151;
--input-bg: #4b5563;
--border-color: #4b5563;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.chat-container {
height: calc(100vh - 200px);
}
@media (max-width: 768px) {
.chat-container {
height: calc(100vh - 250px);
}
}
.typing-indicator:after {
content: '...';
animation: typing 1.5s infinite;
}
@keyframes typing {
0% { content: '.'; }
33% { content: '..'; }
66% { content: '...'; }
}
.citation-tooltip {
display: none;
position: absolute;
background-color: #1f2937;
color: white;
padding: 8px;
border-radius: 4px;
z-index: 10;
width: 300px;
font-size: 14px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.citation:hover .citation-tooltip {
display: block;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Header -->
<header class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white rounded-xl shadow-lg p-6 mb-8" style="background: var(--header-bg);">
<div class="flex flex-col md:flex-row justify-between items-center">
<div>
<h1 class="text-3xl font-bold">Expert AI Agent</h1>
<p class="mt-2">Professional-grade research and writing assistant</p>
</div>
<div class="mt-4 md:mt-0 flex items-center space-x-4">
<button id="newChatBtn" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
<i class="fas fa-plus mr-2"></i>New Chat
</button>
<button id="themeToggleBtn" class="bg-blue-800 text-white px-1 py-2 rounded-lg font-medium hover:bg-blue-900 transition mr-2 flex items-center">
<span class="px-2 sm:px-3 py-1 rounded-l ${darkMode ? 'bg-blue-700' : 'bg-blue-800'}">
<i class="fas fa-moon text-sm sm:text-base"></i>
</span>
<span class="px-2 sm:px-3 py-1 rounded-r ${darkMode ? 'bg-blue-800' : 'bg-blue-700'}">
<i class="fas fa-sun text-sm sm:text-base"></i>
</span>
</button>
<button id="settingsBtn" class="bg-blue-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-900 transition">
<i class="fas fa-cog mr-2"></i>Settings
</button>
</div>
</div>
</header>
<!-- Main Content -->
<div class="flex flex-col lg:flex-row gap-8">
<!-- Sidebar -->
<div class="w-full lg:w-1/4 rounded-xl shadow-md p-6" style="background-color: var(--card-bg);">
<h2 class="text-xl font-bold mb-4 text-gray-800">Profession Selection</h2>
<div class="mb-6">
<label for="professionSelect" class="block text-sm font-medium text-gray-700 mb-2">Choose a profession:</label>
<select id="professionSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">Select a profession...</option>
<option value="pastor">Pastor/Theologian</option>
<option value="lawyer">Lawyer</option>
<option value="doctor">Medical Doctor</option>
<option value="engineer">Engineer</option>
<option value="professor">University Professor</option>
<option value="researcher">Research Scientist</option>
<option value="psychologist">Psychologist</option>
<option value="business">Business Consultant</option>
<option value="architect">Architect</option>
<option value="accountant">Accountant</option>
<option value="journalist">Journalist</option>
<option value="programmer">Software Developer</option>
<option value="designer">Graphic Designer</option>
<option value="chef">Chef</option>
<option value="artist">Artist</option>
<option value="musician">Musician</option>
<option value="pilot">Pilot</option>
<option value="military">Military Officer</option>
<option value="politician">Politician</option>
<option value="economist">Economist</option>
<option value="historian">Historian</option>
<option value="philosopher">Philosopher</option>
</select>
</div>
<div class="mb-6">
<label for="expertiseLevel" class="block text-sm font-medium text-gray-700 mb-2">Expertise Level:</label>
<select id="expertiseLevel" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="5">Senior Expert (20+ years experience)</option>
<option value="4">Experienced Professional (10-20 years)</option>
<option value="3">Mid-career (5-10 years)</option>
<option value="2">Early career (1-5 years)</option>
<option value="1">Student/Trainee</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Document Type:</label>
<div class="space-y-2">
<div class="flex items-center">
<input id="notes" name="documentType" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500" checked>
<label for="notes" class="ml-3 block text-sm font-medium text-gray-700">Notes</label>
</div>
<div class="flex items-center">
<input id="researchProposal" name="documentType" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
<label for="researchProposal" class="ml-3 block text-sm font-medium text-gray-700">Research Proposal</label>
</div>
<div class="flex items-center">
<input id="dissertation" name="documentType" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
<label for="dissertation" class="ml-3 block text-sm font-medium text-gray-700">Dissertation</label>
</div>
<div class="flex items-center">
<input id="article" name="documentType" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
<label for="article" class="ml-3 block text-sm font-medium text-gray-700">Article/Paper</label>
</div>
</div>
</div>
<div class="mb-6">
<label for="citationStyle" class="block text-sm font-medium text-gray-700 mb-2">Citation Style:</label>
<select id="citationStyle" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="apa">APA</option>
<option value="mla">MLA</option>
<option value="chicago">Chicago</option>
<option value="harvard">Harvard</option>
<option value="ieee">IEEE</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">AI API Configuration</label>
<select id="apiProvider" class="w-full p-3 border border-gray-300 rounded-lg mb-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="openai">OpenAI (Free Tier)</option>
<option value="huggingface">Hugging Face (Free)</option>
<option value="cohere">Cohere (Free Tier)</option>
</select>
<input type="text" id="apiKey" class="w-full p-3 border border-gray-300 rounded-lg mb-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="API Key (if required)">
<label class="block text-sm font-medium text-gray-700 mb-2">AI Detection Bypass:</label>
<div class="flex items-center">
<input id="aiBypassToggle" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
<label for="aiBypassToggle" class="ml-3 block text-sm font-medium text-gray-700">Humanize content</label>
</div>
<p class="mt-1 text-xs text-gray-500">Makes content appear more human-written to detection tools</p>
</div>
<button id="applySettingsBtn" class="w-full bg-blue-600 text-white py-2 sm:py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center text-sm sm:text-base">
<i class="fas fa-check-circle mr-1 sm:mr-2"></i> Apply Settings
</button>
</div>
<!-- Chat Area -->
<div class="w-full lg:w-3/4 rounded-xl shadow-md overflow-hidden" style="background-color: var(--card-bg);">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center">
<div id="currentProfessionBadge" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium hidden">
<i class="fas fa-user-tie mr-1"></i>
<span id="professionDisplay"></span>
</div>
<div id="currentDocumentBadge" class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium ml-2 hidden">
<i class="fas fa-file-alt mr-1"></i>
<span id="documentTypeDisplay"></span>
</div>
</div>
</div>
<!-- Chat Messages -->
<div id="chatMessages" class="chat-container overflow-y-auto p-6 space-y-4">
<div class="text-center py-10 text-gray-500">
<i class="fas fa-robot text-4xl mb-4 text-blue-500"></i>
<h3 class="text-xl font-medium">Select a profession and start your conversation</h3>
<p class="mt-2">I'll adapt to your selected expertise level and document requirements</p>
</div>
</div>
<!-- Input Area -->
<div class="p-6 border-t border-gray-200">
<div class="flex items-start space-x-4">
<div class="flex-1">
<textarea id="userInput" rows="3" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" placeholder="Enter your topic or question..." style="background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-color);"></textarea>
<div class="mt-2 flex justify-between items-center">
<div class="flex space-x-2">
<button id="attachFileBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-paperclip"></i>
</button>
<button id="citationBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-quote-right"></i>
</button>
</div>
<button id="sendBtn" class="bg-blue-600 text-white px-4 sm:px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition text-sm sm:text-base">
<i class="fas fa-paper-plane mr-1 sm:mr-2"></i> Send
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Document Tools Modal -->
<div id="documentToolsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white rounded-xl p-6 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Document Tools</h3>
<button id="closeToolsModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-medium text-gray-800 mb-3">Edit Current Document</h4>
<div class="space-y-3">
<button id="editContentBtn" class="w-full text-left p-2 hover:bg-gray-100 rounded text-sm sm:text-base">
<i class="fas fa-edit text-blue-500 mr-1 sm:mr-2"></i> Edit Content
</button>
<button id="addSectionBtn" class="w-full text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-plus-circle text-green-500 mr-2"></i> Add Section
</button>
<button id="rephraseBtn" class="w-full text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-paragraph text-purple-500 mr-2"></i> Rephrase Section
</button>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-medium text-gray-800 mb-3">Export Options</h4>
<div class="space-y-3">
<button id="exportWordBtn" class="w-full text-left p-2 hover:bg-gray-100 rounded text-sm sm:text-base">
<i class="fas fa-file-word text-blue-600 mr-1 sm:mr-2"></i> Export as Word
</button>
<button id="exportPDFBtn" class="w-full text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-file-pdf text-red-500 mr-2"></i> Export as PDF
</button>
<button id="exportMarkdownBtn" class="w-full text-left p-2 hover:bg-gray-100 rounded">
<i class="fab fa-markdown text-gray-700 mr-2"></i> Export as Markdown
</button>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg md:col-span-2">
<h4 class="font-medium text-gray-800 mb-3">Research Tools</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<button id="findSourcesBtn" class="text-left p-2 hover:bg-gray-100 rounded text-sm sm:text-base">
<i class="fas fa-search text-indigo-500 mr-1 sm:mr-2"></i> Find Academic Sources
</button>
<button id="generateCitationsBtn" class="text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-book text-green-500 mr-2"></i> Generate Bibliography
</button>
<button id="checkPlagiarismBtn" class="text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-copy text-yellow-500 mr-2"></i> Check for Plagiarism
</button>
<button id="summarizeBtn" class="text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-compress-alt text-blue-400 mr-2"></i> Summarize Content
</button>
<button id="generateCodeNotesBtn" class="text-left p-2 hover:bg-gray-100 rounded">
<i class="fas fa-code text-purple-500 mr-2"></i> Generate Code Notes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const themeToggleBtn = document.getElementById('themeToggleBtn');
const professionSelect = document.getElementById('professionSelect');
const customProfessionContainer = document.getElementById('customProfessionContainer');
const customProfession = document.getElementById('customProfession');
const applySettingsBtn = document.getElementById('applySettingsBtn');
const chatMessages = document.getElementById('chatMessages');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
const newChatBtn = document.getElementById('newChatBtn');
const currentProfessionBadge = document.getElementById('currentProfessionBadge');
const professionDisplay = document.getElementById('professionDisplay');
const currentDocumentBadge = document.getElementById('currentDocumentBadge');
const documentTypeDisplay = document.getElementById('documentTypeDisplay');
const documentToolsModal = document.getElementById('documentToolsModal');
const closeToolsModalBtn = document.getElementById('closeToolsModalBtn');
const citationBtn = document.getElementById('citationBtn');
// Variables to store current settings
let currentProfession = '';
let currentExpertiseLevel = '5';
let currentDocumentType = 'notes';
let currentCitationStyle = 'apa';
let bypassAI = false;
let apiProvider = 'openai';
let apiKey = '';
// Theme Management
let darkMode = localStorage.getItem('darkMode') === 'true';
updateTheme();
// Event Listeners
themeToggleBtn.addEventListener('click', toggleTheme);
professionSelect.addEventListener('change', function() {
if (this.value === 'custom') {
customProfessionContainer.classList.remove('hidden');
} else {
customProfessionContainer.classList.add('hidden');
}
});
applySettingsBtn.addEventListener('click', applySettings);
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
newChatBtn.addEventListener('click', startNewChat);
citationBtn.addEventListener('click', toggleDocumentTools);
closeToolsModalBtn.addEventListener('click', toggleDocumentTools);
// Radio buttons for document type
document.querySelectorAll('input[name="documentType"]').forEach(radio => {
radio.addEventListener('change', function() {
currentDocumentType = this.id;
});
});
// Citation style select
document.getElementById('citationStyle').addEventListener('change', function() {
currentCitationStyle = this.value;
});
// Expertise level select
document.getElementById('expertiseLevel').addEventListener('change', function() {
currentExpertiseLevel = this.value;
});
// API configuration
document.getElementById('apiProvider').addEventListener('change', function() {
apiProvider = this.value;
});
document.getElementById('apiKey').addEventListener('input', function() {
apiKey = this.value.trim();
});
// AI bypass toggle
document.getElementById('aiBypassToggle').addEventListener('change', function() {
bypassAI = this.checked;
});
// Functions
function applySettings() {
currentProfession = professionSelect.options[professionSelect.selectedIndex].text;
// Update UI
professionDisplay.textContent = currentProfession;
currentProfessionBadge.classList.remove('hidden');
documentTypeDisplay.textContent = document.querySelector('input[name="documentType"]:checked').nextElementSibling.textContent;
currentDocumentBadge.classList.remove('hidden');
// Add welcome message based on profession
chatMessages.innerHTML = '';
addBotMessage(getWelcomeMessage(currentProfession, currentExpertiseLevel, currentDocumentType));
}
function getWelcomeMessage(profession, expertiseLevel, docType) {
const expertiseText = getExpertiseText(expertiseLevel);
const docTypeText = getDocTypeText(docType);
return `Hello! I'm your AI ${profession} assistant with ${expertiseText} experience. I'm currently configured to help you with ${docTypeText}. How can I assist you today?`;
}
function getExpertiseText(level) {
const levels = {
'1': 'student/trainee-level',
'2': '1-5 years',
'3': '5-10 years',
'4': '10-20 years',
'5': '20+ years'
};
return levels[level] || 'professional';
}
function getDocTypeText(type) {
const types = {
'notes': 'note-taking',
'researchProposal': 'research proposals',
'dissertation': 'dissertations',
'article': 'academic articles/papers'
};
return types[type] || 'your document';
}
function sendMessage() {
const message = userInput.value.trim();
if (message === '') return;
if (currentProfession === '') {
alert('Please select a profession first');
return;
}
// Add user message to chat
addUserMessage(message);
userInput.value = '';
// Show typing indicator
const typingId = showTypingIndicator();
// Get bot response from API
try {
const response = await generateResponse(message, currentProfession, currentExpertiseLevel, currentDocumentType);
removeTypingIndicator(typingId);
addBotMessage(response);
} catch (error) {
removeTypingIndicator(typingId);
addBotMessage(`Error: ${error.message}`);
}
}
async function generateResponse(message, profession, expertiseLevel, docType) {
// Prepare prompt based on settings
const prompt = `Act as a ${getExpertiseText(expertiseLevel)} ${profession} helping with ${docType}.
Respond to: "${message}". Use ${currentCitationStyle} citations if needed.
${bypassAI ? 'Make the response sound human-written with natural variations.' : ''}`;
try {
let response;
switch(apiProvider) {
case 'openai':
response = await callOpenAI(prompt);
break;
case 'huggingface':
response = await callHuggingFace(prompt);
break;
case 'cohere':
response = await callCohere(prompt);
break;
default:
response = "Please select an API provider";
}
return response;
} catch (error) {
console.error('API Error:', error);
return `Sorry, I encountered an error: ${error.message}`;
}
}
async function callOpenAI(prompt) {
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey || 'free-tier-key'}`,
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [{role: 'user', content: prompt}],
temperature: 0.7,
}),
});
const data = await response.json();
return data.choices[0]?.message?.content || "No response from OpenAI";
}
async function callHuggingFace(prompt) {
const response = await fetch('https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey || 'free-key'}`,
},
body: JSON.stringify({inputs: prompt}),
});
const data = await response.json();
return data.generated_text || "No response from Hugging Face";
}
async function callCohere(prompt) {
const response = await fetch('https://api.cohere.ai/v1/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey || 'free-key'}`,
'Cohere-Version': '2022-12-06',
},
body: JSON.stringify({
prompt: prompt,
max_tokens: 200,
temperature: 0.7,
}),
});
const data = await response.json();
return data.generations[0]?.text || "No response from Cohere";
}
// Humanization techniques
const humanize = bypassAI ? {
addTypos: () => Math.random() < 0.05 ? 'teh' : 'the',
varySentenceLength: (text) => {
const sentences = text.split('. ');
return sentences.map(s => {
if (Math.random() < 0.3) {
return s + (Math.random() < 0.5 ? '...' : '');
}
return s;
}).join('. ');
},
addConversationalElements: (text) => {
const phrases = ['You know,', 'I mean,', 'Basically,', 'So,', 'Well,'];
if (Math.random() < 0.4) {
return phrases[Math.floor(Math.random() * phrases.length)] + ' ' + text;
}
return text;
}
} : null;
const expertise = getExpertiseText(expertiseLevel);
const isAcademic = ['researchProposal', 'dissertation', 'article'].includes(docType);
let response = '';
// Profession-specific responses
if (profession.toLowerCase().includes('pastor') || profession.toLowerCase().includes('theologian')) {
response = `As a ${expertise} ${profession}, I would approach "${message}" with careful theological consideration. `;
if (isAcademic) {
response += `For your ${docType.replace(/([A-Z])/g, ' $1').toLowerCase()}, I recommend examining scriptural foundations in ${getRandomBook()}, alongside contemporary theological perspectives like those from ${getRandomTheologian()}. `;
response += addCitation();
} else {
response += `This topic reminds me of ${getRandomBibleVerse()}, which offers profound insight. `;
}
}
else if (profession.toLowerCase().includes('lawyer')) {
response = `From my ${expertise} legal perspective as a ${profession}, "${message}" raises several important considerations. `;
if (isAcademic) {
response += `For your ${docType.replace(/([A-Z])/g, ' $1').toLowerCase()}, you should review ${getRandomLegalCase()}, which established relevant precedent. `;
response += addCitation();
} else {
response += `You might want to consider the implications of ${getRandomLaw()} in this context. `;
}
}
else {
// Generic professional response
response = `As a ${expertise} ${profession}, my analysis of "${message}" leads me to several key observations. `;
if (isAcademic) {
response += `For your ${docType.replace(/([A-Z])/g, ' $1').toLowerCase()}, I recommend reviewing the work of ${getRandomResearcher()} in this field. `;
response += addCitation();
} else {
response += `This aligns with current ${profession.toLowerCase()} best practices, particularly regarding ${getRandomTopic()}. `;
}
}
// Add document-specific guidance
if (docType === 'researchProposal') {
response += `\n\nFor a strong research proposal, ensure you include:\n1. Clear research questions\n2. Literature review\n3. Methodology\n4. Expected contributions\n5. Timeline and resources needed`;
}
else if (docType === 'dissertation') {
response += `\n\nFor your dissertation, consider structuring it with:\n1. Introduction (problem statement, objectives)\n2. Literature review\n3. Methodology\n4. Results\n5. Discussion\n6. Conclusion and recommendations`;
}
// Add action items
response += `\n\nWould you like me to:\n1. Expand on any particular aspect?\n2. Provide references for specific claims?\n3. Help structure this as a formal document?`;
// Apply humanization if enabled
if (humanize) {
response = humanize.addConversationalElements(response);
response = humanize.varySentenceLength(response);
response = response.replace(/ the /g, humanize.addTypos());
}
return response;
}
function addCitation() {
const authors = [
'Smith, J., & Johnson, A. (2022)',
'Lee, M. et al. (2021)',
'Brown, R., Davis, K., and Wilson, P. (2020)',
'Garcia, S. (2019)',
'Anderson, L. and White, T. (2018)'
];
const journals = [
'Journal of Professional Studies',
'International Review of Applied Research',
'Academic Perspectives Quarterly',
'Interdisciplinary Research Journal',
'Global Studies Review'
];
const randomAuthor = authors[Math.floor(Math.random() * authors.length)];
const randomJournal = journals[Math.floor(Math.random() * journals.length)];
const randomPages = Math.floor(Math.random() * 50) + 1;
const randomVolume = Math.floor(Math.random() * 20) + 1;
const randomIssue = Math.floor(Math.random() * 4) + 1;
let citation = '';
if (currentCitationStyle === 'apa') {
citation = ` (${randomAuthor.split('(')[0].trim()}, ${randomAuthor.split('(')[1].replace(')', '')})`;
}
else if (currentCitationStyle === 'mla') {
citation = ` (${randomAuthor.split('(')[0].trim()} ${randomAuthor.split('(')[1].replace(')', '')})`;
}
else if (currentCitationStyle === 'chicago') {
citation = ` (${randomAuthor.split('(')[0].trim()} ${randomAuthor.split('(')[1].replace(')', '')})`;
}
// Create a citation element with tooltip
return `<span class="citation inline-block relative cursor-pointer bg-yellow-100 px-1 rounded">${citation}<span class="citation-tooltip">${randomAuthor}. "${getRandomPaperTitle()}." <em>${randomJournal}</em>, ${randomVolume}(${randomIssue}), ${randomPages}-${randomPages + 5}.</span></span>`;
}
function getRandomBook() {
const books = ['Genesis', 'Exodus', 'Romans', 'John', 'Psalms', 'Proverbs', 'Isaiah', 'Matthew', 'Hebrews'];
return books[Math.floor(Math.random() * books.length)];
}
function getRandomTheologian() {
const theologians = ['Karl Barth', 'Augustine of Hippo', 'Thomas Aquinas', 'John Calvin', 'Martin Luther', 'Dietrich Bonhoeffer', 'C.S. Lewis', 'N.T. Wright'];
return theologians[Math.floor(Math.random() * theologians.length)];
}
function getRandomBibleVerse() {
const verses = [
'John 3:16 ("For God so loved the world...")',
'Romans 8:28 ("And we know that in all things God works for the good...")',
'Philippians 4:13 ("I can do all things through Christ who strengthens me.")',
'Jeremiah 29:11 ("For I know the plans I have for you...")',
'Proverbs 3:5-6 ("Trust in the Lord with all your heart...")'
];
return verses[Math.floor(Math.random() * verses.length)];
}
function getRandomLegalCase() {
const cases = [
'Marbury v. Madison (1803)',
'Brown v. Board of Education (1954)',
'Roe v. Wade (1973)',
'Miranda v. Arizona (1966)',
'Citizens United v. FEC (2010)'
];
return cases[Math.floor(Math.random() * cases.length)];
}
function getRandomLaw() {
const laws = [
'the First Amendment',
'contract law principles',
'tort liability standards',
'intellectual property protections',
'constitutional due process'
];
return laws[Math.floor(Math.random() * laws.length)];
}
function getRandomResearcher() {
const researchers = [
'Dr. Emily Chen',
'Professor James Wilson',
'the research team led by Dr. Rodriguez',
'the groundbreaking work of Dr. Patel',
'the longitudinal studies by Dr. Kim'
];
return researchers[Math.floor(Math.random() * researchers.length)];
}
function getRandomTopic() {
const topics = [
'emerging trends',
'industry standards',
'ethical considerations',
'best practices',
'innovative approaches'
];
return topics[Math.floor(Math.random() * topics.length)];
}
function getRandomPaperTitle() {
const prefixes = [
'Exploring the Impact of',
'A Comprehensive Review of',
'New Perspectives on',
'Quantitative Analysis of',
'The Role of'
];
const subjects = [
'Contemporary Methodologies',
'Cross-Disciplinary Approaches',
'Emerging Technologies',
'Policy Implications',
'Theoretical Frameworks'
];
return `${prefixes[Math.floor(Math.random() * prefixes.length)]} ${subjects[Math.floor(Math.random() * subjects.length)]}`;
}
function addUserMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.className = 'flex justify-end';
messageDiv.innerHTML = `
<div class="max-w-[80%] bg-blue-600 text-white p-4 rounded-lg rounded-tr-none">
<p>${message}</p>
</div>
`;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function addBotMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.className = 'flex justify-start';
messageDiv.innerHTML = `
<div class="max-w-[80%] bg-gray-200 text-gray-800 p-4 rounded-lg rounded-tl-none">
<div class="flex items-center mb-2">
<div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
<i class="fas fa-robot"></i>
</div>
<span class="font-medium">Expert ${currentProfession}</span>
</div>
<div class="prose">${message}</div>
</div>
`;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function showTypingIndicator() {
const typingId = 'typing-' + Date.now();
const typingDiv = document.createElement('div');
typingDiv.className = 'flex justify-start';
typingDiv.id = typingId;
typingDiv.innerHTML = `
<div class="max-w-[80%] bg-gray-200 text-gray-800 p-4 rounded-lg rounded-tl-none">
<div class="flex items-center">
<div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
<i class="fas fa-robot"></i>
</div>
<span class="typing-indicator">Thinking</span>
</div>
</div>
`;
chatMessages.appendChild(typingDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
return typingId;
}
function removeTypingIndicator(id) {
const element = document.getElementById(id);
if (element) {
element.remove();
}
}
function startNewChat() {
if (confirm('Start a new conversation? Your current chat will be cleared.')) {
chatMessages.innerHTML = `
<div class="text-center py-10 text-gray-500">
<i class="fas fa-robot text-4xl mb-4 text-blue-500"></i>
<h3 class="text-xl font-medium">Select a profession and start your conversation</h3>
<p class="mt-2">I'll adapt to your selected expertise level and document requirements</p>
</div>
`;
currentProfession = '';
currentProfessionBadge.classList.add('hidden');
currentDocumentBadge.classList.add('hidden');
}
}
function toggleDocumentTools() {
documentToolsModal.classList.toggle('hidden');
}
function toggleTheme() {
darkMode = !darkMode;
localStorage.setItem('darkMode', darkMode);
updateTheme();
}
function updateTheme() {
if (darkMode) {
document.documentElement.classList.add('dark-mode');
themeToggleBtn.querySelector('span').classList.add('translate-x-8');
themeToggleBtn.querySelector('span').classList.remove('translate-x-0');
} else {
document.documentElement.classList.remove('dark-mode');
themeToggleBtn.querySelector('span').classList.add('translate-x-0');
themeToggleBtn.querySelector('span').classList.remove('translate-x-8');
}
}
function generateCodeNotes() {
if (!currentProfession.toLowerCase().includes('programmer') &&
!currentProfession.toLowerCase().includes('developer') &&
!currentProfession.toLowerCase().includes('engineer')) {
addBotMessage("I notice you're not in a technical profession. Would you still like code notes?");
return;
}
const languages = ['JavaScript', 'Python', 'Java', 'C#', 'PHP', 'Ruby', 'Go'];
const frameworks = {
'JavaScript': ['React', 'Angular', 'Vue', 'Node.js', 'Express'],
'Python': ['Django', 'Flask', 'FastAPI'],
'Java': ['Spring', 'Hibernate'],
'C#': ['.NET', 'ASP.NET'],
'PHP': ['Laravel', 'Symfony'],
'Ruby': ['Ruby on Rails'],
'Go': ['Gin', 'Echo']
};
const selectedLang = languages[Math.floor(Math.random() * languages.length)];
const selectedFramework = frameworks[selectedLang][Math.floor(Math.random() * frameworks[selectedLang].length)];
const note = `
Here are some professional code notes for ${selectedLang} with ${selectedFramework}:
<pre><code class="language-${selectedLang.toLowerCase()}">// ${selectedLang} best practices
function ${getRandomFunctionName()}(${getRandomParams()}) {
${getRandomCodeSnippet(selectedLang)}
}
${getRandomComment(selectedLang)}
${getRandomCodeSnippet(selectedLang)}
</code></pre>
Key points:
- ${getRandomTip(selectedLang)}
- ${getRandomTip(selectedLang)}
- Always ${getRandomBestPractice(selectedLang)}
Would you like me to:
1. Explain any part in more detail?
2. Generate notes for a different language?
3. Provide implementation examples?
`;
addBotMessage(note);
}
function getRandomFunctionName() {
const prefixes = ['handle', 'process', 'calculate', 'generate', 'validate'];
const suffixes = ['User', 'Data', 'Request', 'Input', 'Result'];
return prefixes[Math.floor(Math.random() * prefixes.length)] + suffixes[Math.floor(Math.random() * suffixes.length)];
}
function getRandomParams() {
const params = ['input', 'data', 'options', 'config', 'params'];
return params.slice(0, Math.floor(Math.random() * params.length) + 1).join(', ');
}
function getRandomCodeSnippet(lang) {
const snippets = {
'JavaScript': [
'const result = data.map(item => item * 2);',
'return await fetch(url, { method: "POST" });',
'if (typeof input !== "string") throw new Error("Invalid input");'
],
'Python': [
'result = [x*2 for x in data if x > 0]',
'with open(filename) as f:\n content = f.read()',
'return sum(x for x in values if x % 2 == 0)'
],
'Java': [
'List<String> filtered = list.stream().filter(s -> s.length() > 3).collect(Collectors.toList());',
'if (input == null) throw new IllegalArgumentException();',
'return new ResponseEntity<>(service.getData(), HttpStatus.OK);'
]
};
return snippets[lang]?.[Math.floor(Math.random() * snippets[lang]?.length)] || '// Implementation goes here';
}
function getRandomComment(lang) {
const comments = {
'JavaScript': '// This handles the core business logic',
'Python': '# Important: This performs data validation',
'Java': '/* Cache this result for better performance */'
};
return comments[lang] || '// Important implementation note';
}
function getRandomTip(lang) {
const tips = {
'JavaScript': 'Use const/let instead of var for block scoping',
'Python': 'Prefer list comprehensions over loops for simple transformations',
'Java': 'Use Optional to avoid NullPointerException'
};
return tips[lang] || 'Always handle edge cases';
}
function getRandomBestPractice(lang) {
const practices = {
'JavaScript': 'validate input parameters',
'Python': 'write docstrings for public functions',
'Java': 'follow SOLID principles'
};
return practices[lang] || 'write clean, maintainable code';
}
});
</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=KRAbbzunlocks/challenger" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>