|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Chat Interface</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> |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes typing { |
|
|
0% { opacity: 0.5; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
animation: typing 1.5s infinite; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
|
|
|
.message { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
.message-content pre { |
|
|
background-color: #f5f5f5; |
|
|
border-radius: 6px; |
|
|
padding: 12px; |
|
|
overflow-x: auto; |
|
|
margin: 8px 0; |
|
|
} |
|
|
|
|
|
.message-content code { |
|
|
background-color: #f5f5f5; |
|
|
padding: 2px 4px; |
|
|
border-radius: 4px; |
|
|
font-family: monospace; |
|
|
} |
|
|
|
|
|
.message-content ol, .message-content ul { |
|
|
margin-left: 20px; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.message-content li { |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.message-content h1, .message-content h2, .message-content h3 { |
|
|
font-weight: bold; |
|
|
margin: 12px 0 8px 0; |
|
|
} |
|
|
|
|
|
.message-content h1 { |
|
|
font-size: 1.5em; |
|
|
} |
|
|
|
|
|
.message-content h2 { |
|
|
font-size: 1.3em; |
|
|
} |
|
|
|
|
|
.message-content h3 { |
|
|
font-size: 1.1em; |
|
|
} |
|
|
|
|
|
.message-content blockquote { |
|
|
border-left: 3px solid #ddd; |
|
|
padding-left: 12px; |
|
|
color: #666; |
|
|
margin: 8px 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold mr-2"> |
|
|
AI |
|
|
</div> |
|
|
<h1 class="text-lg font-semibold">AI Assistant</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sun"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-container"> |
|
|
|
|
|
<div class="message bg-white rounded-lg shadow-sm p-4 max-w-3xl mx-auto"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold mr-3"> |
|
|
AI |
|
|
</div> |
|
|
<div class="message-content flex-1"> |
|
|
<h2 class="font-semibold text-gray-800">Hello! I'm your AI assistant</h2> |
|
|
<p class="text-gray-600 mt-1">I can help answer questions, explain concepts, and assist with various tasks. How can I help you today?</p> |
|
|
<div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2"> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg px-3 py-2 text-sm text-left transition-colors"> |
|
|
"Explain quantum computing" |
|
|
</button> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg px-3 py-2 text-sm text-left transition-colors"> |
|
|
"Write a poem about technology" |
|
|
</button> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg px-3 py-2 text-sm text-left transition-colors"> |
|
|
"Help me debug this JavaScript code" |
|
|
</button> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg px-3 py-2 text-sm text-left transition-colors"> |
|
|
"Suggest a workout plan" |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border-t border-gray-200 p-4"> |
|
|
<form id="chat-form" class="max-w-3xl mx-auto relative"> |
|
|
<div class="relative"> |
|
|
<textarea |
|
|
id="message-input" |
|
|
rows="1" |
|
|
placeholder="Message AI assistant..." |
|
|
class="w-full border border-gray-300 rounded-lg py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" |
|
|
style="min-height: 50px; max-height: 200px;" |
|
|
></textarea> |
|
|
<button |
|
|
type="submit" |
|
|
id="send-btn" |
|
|
class="absolute right-2 bottom-2 w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center hover:bg-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" |
|
|
disabled |
|
|
> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 text-xs text-gray-500 text-center"> |
|
|
AI Assistant may produce inaccurate information. Consider verifying important information. |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
const chatContainer = document.getElementById('chat-container'); |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
|
|
|
|
|
|
messageInput.addEventListener('input', function() { |
|
|
this.style.height = 'auto'; |
|
|
this.style.height = (this.scrollHeight) + 'px'; |
|
|
|
|
|
|
|
|
sendBtn.disabled = this.value.trim() === ''; |
|
|
}); |
|
|
|
|
|
|
|
|
chatForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const message = messageInput.value.trim(); |
|
|
if (message) { |
|
|
sendMessage(message); |
|
|
messageInput.value = ''; |
|
|
messageInput.style.height = 'auto'; |
|
|
sendBtn.disabled = true; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.suggestion-btn').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const suggestion = this.textContent.trim(); |
|
|
messageInput.value = suggestion; |
|
|
messageInput.focus(); |
|
|
messageInput.dispatchEvent(new Event('input')); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function sendMessage(message) { |
|
|
|
|
|
addMessage(message, 'user'); |
|
|
|
|
|
|
|
|
const typingIndicator = document.createElement('div'); |
|
|
typingIndicator.className = 'message bg-white rounded-lg shadow-sm p-4 max-w-3xl mx-auto'; |
|
|
typingIndicator.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold mr-3"> |
|
|
AI |
|
|
</div> |
|
|
<div class="typing-indicator flex space-x-1 items-center"> |
|
|
<span class="w-2 h-2 rounded-full bg-gray-400"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-gray-400"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-gray-400"></span> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
chatContainer.appendChild(typingIndicator); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
typingIndicator.remove(); |
|
|
|
|
|
|
|
|
const response = generateAIResponse(message); |
|
|
|
|
|
|
|
|
addMessage(response, 'ai'); |
|
|
}, 1000 + Math.random() * 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function addMessage(content, sender) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message bg-${sender === 'user' ? 'blue-50' : 'white'} rounded-lg shadow-sm p-4 max-w-3xl mx-auto`; |
|
|
|
|
|
if (sender === 'user') { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start justify-end"> |
|
|
<div class="message-content flex-1 text-right"> |
|
|
<p class="text-gray-800">${escapeHtml(content)}</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 font-bold ml-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
|
|
|
const formattedContent = formatResponse(content); |
|
|
|
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold mr-3"> |
|
|
AI |
|
|
</div> |
|
|
<div class="message-content flex-1"> |
|
|
${formattedContent} |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-end mt-2 space-x-3 text-gray-400 text-sm"> |
|
|
<button class="hover:text-gray-600" title="Copy"> |
|
|
<i class="far fa-copy"></i> |
|
|
</button> |
|
|
<button class="hover:text-gray-600" title="Like"> |
|
|
<i class="far fa-thumbs-up"></i> |
|
|
</button> |
|
|
<button class="hover:text-gray-600" title="Dislike"> |
|
|
<i class="far fa-thumbs-down"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
messageDiv.querySelector('.fa-copy').addEventListener('click', function() { |
|
|
navigator.clipboard.writeText(content); |
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'absolute bg-gray-800 text-white text-xs px-2 py-1 rounded -mt-8'; |
|
|
tooltip.textContent = 'Copied!'; |
|
|
this.parentNode.appendChild(tooltip); |
|
|
setTimeout(() => tooltip.remove(), 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function escapeHtml(unsafe) { |
|
|
return unsafe |
|
|
.replace(/&/g, "&") |
|
|
.replace(/</g, "<") |
|
|
.replace(/>/g, ">") |
|
|
.replace(/"/g, """) |
|
|
.replace(/'/g, "'"); |
|
|
} |
|
|
|
|
|
|
|
|
function formatResponse(text) { |
|
|
|
|
|
let formatted = text; |
|
|
|
|
|
|
|
|
formatted = formatted.replace(/^# (.*$)/gm, '<h1>$1</h1>'); |
|
|
formatted = formatted.replace(/^## (.*$)/gm, '<h2>$1</h2>'); |
|
|
formatted = formatted.replace(/^### (.*$)/gm, '<h3>$1</h3>'); |
|
|
|
|
|
|
|
|
formatted = formatted.replace(/^\* (.*$)/gm, '<li>$1</li>'); |
|
|
formatted = formatted.replace(/^1\. (.*$)/gm, '<li>$1</li>'); |
|
|
|
|
|
|
|
|
formatted = formatted.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>'); |
|
|
formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>'); |
|
|
|
|
|
|
|
|
formatted = formatted.replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>'); |
|
|
|
|
|
|
|
|
formatted = formatted.replace(/\n\n/g, '</p><p>'); |
|
|
formatted = '<p>' + formatted + '</p>'; |
|
|
|
|
|
return formatted; |
|
|
} |
|
|
|
|
|
|
|
|
function generateAIResponse(message) { |
|
|
const responses = { |
|
|
"hello": "Hello there! How can I assist you today?", |
|
|
"hi": "Hi! What would you like to talk about?", |
|
|
"how are you": "I'm just a computer program, so I don't have feelings, but I'm functioning perfectly! How can I help you?", |
|
|
"explain quantum computing": "Quantum computing is an area of computing focused on developing computer technology based on the principles of quantum theory, which explains the behavior of energy and material on the atomic and subatomic levels.\n\nKey concepts:\n* **Qubits**: Unlike classical bits (0 or 1), qubits can exist in superposition (both 0 and 1 simultaneously)\n* **Entanglement**: Qubits can be entangled, meaning the state of one affects another\n* **Quantum gates**: Operations that manipulate qubit states\n\nPotential applications include:\n- Drug discovery\n- Financial modeling\n- Cryptography\n- Artificial intelligence", |
|
|
"write a poem about technology": `**Digital Dreams**\n\nSilicon minds in circuits deep,\nData rivers constant flow.\nBinary stars their secrets keep,\nWhile algorithms grow and grow.\n\nFrom quantum realms to cloud's embrace,\nOur future shaped by lines of code.\nA human touch we can't replace,\nOn this technological road.`, |
|
|
"help me debug this javascript code": "Of course! Please share the JavaScript code you're having trouble with, along with:\n1. What you expect the code to do\n2. What's actually happening\n3. Any error messages you're seeing\n\nHere's an example of how to format code for debugging:\n```javascript\nfunction calculateSum(a, b) {\n return a + b;\n}\n\nconst result = calculateSum(5, '3'); // Returns '53' instead of 8\n```", |
|
|
"suggest a workout plan": `Here's a balanced 3-day workout plan for general fitness:\n\n**Day 1: Upper Body**\n- Push-ups: 3 sets of 10-15\n- Dumbbell rows: 3 sets of 10-12\n- Shoulder press: 3 sets of 8-10\n- Bicep curls: 3 sets of 10-12\n\n**Day 2: Lower Body**\n- Squats: 4 sets of 8-10\n- Lunges: 3 sets of 10 per leg\n- Calf raises: 3 sets of 15\n- Plank: 3 sets of 30-60 seconds\n\n**Day 3: Cardio & Core**\n- 30 minutes moderate cardio (running, cycling, swimming)\n- Leg raises: 3 sets of 12\n- Russian twists: 3 sets of 15 per side\n- Bicycle crunches: 3 sets of 20\n\nRemember to warm up before and stretch after each session!` |
|
|
}; |
|
|
|
|
|
const lowerMessage = message.toLowerCase(); |
|
|
for (const [key, value] of Object.entries(responses)) { |
|
|
if (lowerMessage.includes(key)) { |
|
|
return value; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return `I'm an AI assistant. You asked: "${message}".\n\nWhile I can't provide real answers in this demo, in a real implementation I would analyze your question and provide a detailed, helpful response. This interface demonstrates the look and feel of a ChatGPT-like experience with responsive design and interactive elements.`; |
|
|
} |
|
|
|
|
|
|
|
|
messageInput.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
chatForm.dispatchEvent(new Event('submit')); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=vnsavitri/chat-gui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
