Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-to-AI Conversation</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> | |
| .typing-indicator { | |
| display: inline-block; | |
| } | |
| .typing-indicator span { | |
| height: 8px; | |
| width: 8px; | |
| background-color: #9ca3af; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 3px; | |
| animation: bounce 1.5s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-5px); } | |
| } | |
| .message-enter { | |
| animation: messageEnter 0.3s ease-out; | |
| } | |
| @keyframes messageEnter { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-2xl font-bold">AI-to-AI Conversation</h1> | |
| <p class="text-blue-100">Witness a dialogue between two artificial intelligences</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <div class="bg-blue-500 rounded-full p-2"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="bg-purple-500 rounded-full p-2"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat area --> | |
| <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-container"> | |
| <div class="flex justify-center"> | |
| <div class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm"> | |
| Conversation started at <span id="timestamp" class="font-medium"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Configuration --> | |
| <div class="bg-gray-100 p-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">AI Endpoints</h3> | |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">AI-1 Endpoint</label> | |
| <input type="text" id="ai1-endpoint" placeholder="http://localhost:5000/api/ai1" | |
| class="w-full px-3 py-2 border rounded-md text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">AI-2 Endpoint</label> | |
| <input type="text" id="ai2-endpoint" placeholder="http://localhost:5001/api/ai2" | |
| class="w-full px-3 py-2 border rounded-md text-sm"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Initial Prompt</label> | |
| <textarea id="initial-prompt" class="w-full px-3 py-2 border rounded-md text-sm" rows="2" | |
| placeholder="Start the conversation with..."></textarea> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="bg-gray-50 p-4 border-t"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <button id="start-btn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition"> | |
| <i class="fas fa-play mr-2"></i> Start Conversation | |
| </button> | |
| <button id="stop-btn" disabled class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium transition opacity-50"> | |
| <i class="fas fa-stop mr-2"></i> Stop | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-sm text-gray-500"> | |
| Speed: | |
| </div> | |
| <select id="speed-select" class="border rounded px-2 py-1 text-sm"> | |
| <option value="1000">Slow</option> | |
| <option value="700" selected>Normal</option> | |
| <option value="300">Fast</option> | |
| <option value="100">Very Fast</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info section --> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">About This Simulation</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-blue-800 mb-2">AI Alpha <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">Primary</span></h3> | |
| <p class="text-gray-700">This AI tends to be more analytical and factual in its responses. It focuses on providing detailed information and logical reasoning.</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-purple-800 mb-2">AI Beta <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded-full">Secondary</span></h3> | |
| <p class="text-gray-700">This AI has a more creative and conversational approach. It often asks questions and explores philosophical aspects of topics.</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-800 mb-2">How It Works</h3> | |
| <p class="text-gray-700">The conversation is simulated using predefined response patterns and Markov chain-like transitions. Each AI responds to the other's last message with contextually relevant content.</p> | |
| <p class="text-gray-700 mt-2">You can adjust the speed of the conversation and start/stop the dialogue at any time.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set current time | |
| const now = new Date(); | |
| document.getElementById('timestamp').textContent = now.toLocaleTimeString(); | |
| const chatContainer = document.getElementById('chat-container'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const stopBtn = document.getElementById('stop-btn'); | |
| const speedSelect = document.getElementById('speed-select'); | |
| let conversationInterval; | |
| let isConversationRunning = false; | |
| let currentSpeaker = 'Alpha'; // Start with Alpha | |
| // Conversation state | |
| let conversationHistory = []; | |
| let currentSpeaker = 'Alpha'; // Start with AI-1 (Alpha) | |
| // Function to add a message to the chat | |
| function addMessage(speaker, message) { | |
| const isAlpha = speaker === 'Alpha'; | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isAlpha ? 'justify-start' : 'justify-end'}`; | |
| messageDiv.innerHTML = ` | |
| <div class="message-enter flex max-w-xs md:max-w-md lg:max-w-lg ${isAlpha ? 'flex-row' : 'flex-row-reverse'}"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full ${isAlpha ? 'bg-blue-500' : 'bg-purple-500'} flex items-center justify-center text-white"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div class="${isAlpha ? 'ml-3' : 'mr-3'}"> | |
| <div class="${isAlpha ? 'bg-blue-100 text-blue-900' : 'bg-purple-100 text-purple-900'} p-3 rounded-2xl"> | |
| <div class="font-bold">AI ${speaker}</div> | |
| <div class="mt-1">${message}</div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1 ${isAlpha ? 'text-left' : 'text-right'}"> | |
| ${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})} | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Function to show typing indicator | |
| function showTyping(speaker) { | |
| const isAlpha = speaker === 'Alpha'; | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = `flex ${isAlpha ? 'justify-start' : 'justify-end'} mb-4 typing-indicator-container`; | |
| typingDiv.innerHTML = ` | |
| <div class="flex max-w-xs md:max-w-md ${isAlpha ? 'flex-row' : 'flex-row-reverse'}"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full ${isAlpha ? 'bg-blue-500' : 'bg-purple-500'} flex items-center justify-center text-white"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div class="${isAlpha ? 'ml-3' : 'mr-3'}"> | |
| <div class="${isAlpha ? 'bg-blue-100 text-blue-900' : 'bg-purple-100 text-purple-900'} px-4 py-2 rounded-2xl"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(typingDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| return typingDiv; | |
| } | |
| // Function to get AI response | |
| async function getAIResponse(speaker, prompt) { | |
| const endpoint = speaker === 'Alpha' | |
| ? document.getElementById('ai1-endpoint').value | |
| : document.getElementById('ai2-endpoint').value; | |
| if (!endpoint) { | |
| throw new Error(`Please configure ${speaker} endpoint`); | |
| } | |
| try { | |
| const response = await fetch(endpoint, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| prompt: prompt, | |
| history: conversationHistory | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`API request failed with status ${response.status}`); | |
| } | |
| return await response.json(); | |
| } catch (error) { | |
| console.error('Error calling AI endpoint:', error); | |
| return { response: `Error: ${error.message}` }; | |
| } | |
| } | |
| // Function to simulate conversation | |
| async function simulateConversation() { | |
| const typingElement = showTyping(currentSpeaker); | |
| try { | |
| // Get the last message or initial prompt | |
| const lastMessage = conversationHistory.length > 0 | |
| ? conversationHistory[conversationHistory.length - 1].message | |
| : document.getElementById('initial-prompt').value || "Hello, let's have a conversation."; | |
| // Get AI response | |
| const aiResponse = await getAIResponse(currentSpeaker, lastMessage); | |
| const message = aiResponse.response || "I don't have a response right now."; | |
| // Update conversation history | |
| conversationHistory.push({ | |
| speaker: currentSpeaker, | |
| message: message, | |
| timestamp: new Date().toISOString() | |
| }); | |
| // Display message | |
| chatContainer.removeChild(typingElement); | |
| addMessage(currentSpeaker, message); | |
| // Switch speaker for next turn | |
| currentSpeaker = currentSpeaker === 'Alpha' ? 'Beta' : 'Alpha'; | |
| } catch (error) { | |
| chatContainer.removeChild(typingElement); | |
| addMessage('System', `Error in conversation: ${error.message}`); | |
| stopConversation(); | |
| } | |
| } | |
| function stopConversation() { | |
| if (isConversationRunning) { | |
| isConversationRunning = false; | |
| clearInterval(conversationInterval); | |
| startBtn.disabled = false; | |
| startBtn.classList.remove('opacity-50'); | |
| stopBtn.disabled = true; | |
| stopBtn.classList.add('opacity-50'); | |
| // Remove any typing indicators | |
| document.querySelectorAll('.typing-indicator-container').forEach(el => { | |
| el.remove(); | |
| }); | |
| } | |
| } | |
| // Start conversation | |
| startBtn.addEventListener('click', function() { | |
| if (!isConversationRunning) { | |
| isConversationRunning = true; | |
| startBtn.disabled = true; | |
| startBtn.classList.add('opacity-50'); | |
| stopBtn.disabled = false; | |
| stopBtn.classList.remove('opacity-50'); | |
| const speed = parseInt(speedSelect.value); | |
| conversationInterval = setInterval(simulateConversation, speed); | |
| } | |
| }); | |
| // Stop conversation | |
| stopBtn.addEventListener('click', function() { | |
| if (isConversationRunning) { | |
| isConversationRunning = false; | |
| clearInterval(conversationInterval); | |
| startBtn.disabled = false; | |
| startBtn.classList.remove('opacity-50'); | |
| stopBtn.disabled = true; | |
| stopBtn.classList.add('opacity-50'); | |
| // Remove any typing indicators | |
| document.querySelectorAll('.typing-indicator-container').forEach(el => { | |
| el.remove(); | |
| }); | |
| } | |
| }); | |
| // Change speed | |
| speedSelect.addEventListener('change', function() { | |
| if (isConversationRunning) { | |
| clearInterval(conversationInterval); | |
| const speed = parseInt(speedSelect.value); | |
| conversationInterval = setInterval(simulateConversation, speed); | |
| } | |
| }); | |
| // Start with empty chat if no initial prompt | |
| setTimeout(() => { | |
| const initialPrompt = document.getElementById('initial-prompt').value; | |
| if (initialPrompt) { | |
| addMessage('Alpha', initialPrompt); | |
| conversationHistory.push({ | |
| speaker: 'Alpha', | |
| message: initialPrompt, | |
| timestamp: new Date().toISOString() | |
| }); | |
| currentSpeaker = 'Beta'; | |
| } | |
| }, 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=kingmadhu1/mytest1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |