| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Quillan-Ronin v5.3.0 Interface</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | min-height: 100vh; |
| | color: #333; |
| | } |
| | |
| | .container { |
| | max-width: 1200px; |
| | margin: 0 auto; |
| | padding: 20px; |
| | } |
| | |
| | .header { |
| | text-align: center; |
| | margin-bottom: 30px; |
| | color: white; |
| | } |
| | |
| | .header h1 { |
| | font-size: 3em; |
| | margin-bottom: 10px; |
| | text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| | } |
| | |
| | .header p { |
| | font-size: 1.2em; |
| | opacity: 0.9; |
| | } |
| | |
| | .interface-grid { |
| | display: grid; |
| | grid-template-columns: 1fr 1fr; |
| | gap: 30px; |
| | margin-bottom: 30px; |
| | } |
| | |
| | .panel { |
| | background: rgba(255, 255, 255, 0.95); |
| | border-radius: 15px; |
| | padding: 25px; |
| | box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
| | backdrop-filter: blur(10px); |
| | } |
| | |
| | .panel h2 { |
| | color: #667eea; |
| | margin-bottom: 20px; |
| | font-size: 1.5em; |
| | border-bottom: 2px solid #667eea; |
| | padding-bottom: 10px; |
| | } |
| | |
| | .chat-container { |
| | height: 500px; |
| | display: flex; |
| | flex-direction: column; |
| | } |
| | |
| | .chat-messages { |
| | flex: 1; |
| | overflow-y: auto; |
| | border: 1px solid #ddd; |
| | border-radius: 10px; |
| | padding: 15px; |
| | margin-bottom: 15px; |
| | background: #f8f9fa; |
| | } |
| | |
| | .message { |
| | margin-bottom: 15px; |
| | padding: 10px 15px; |
| | border-radius: 10px; |
| | max-width: 80%; |
| | } |
| | |
| | .message.user { |
| | background: #667eea; |
| | color: white; |
| | margin-left: auto; |
| | text-align: right; |
| | } |
| | |
| | .message.bot { |
| | background: #e9ecef; |
| | color: #333; |
| | } |
| | |
| | .chat-input { |
| | display: flex; |
| | gap: 10px; |
| | } |
| | |
| | .chat-input input { |
| | flex: 1; |
| | padding: 12px; |
| | border: 1px solid #ddd; |
| | border-radius: 25px; |
| | font-size: 16px; |
| | } |
| | |
| | .chat-input button { |
| | padding: 12px 25px; |
| | background: #667eea; |
| | color: white; |
| | border: none; |
| | border-radius: 25px; |
| | cursor: pointer; |
| | font-size: 16px; |
| | transition: background 0.3s; |
| | } |
| | |
| | .chat-input button:hover { |
| | background: #5a67d8; |
| | } |
| | |
| | .model-info { |
| | margin-bottom: 20px; |
| | } |
| | |
| | .info-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| | gap: 15px; |
| | } |
| | |
| | .info-item { |
| | background: #f8f9fa; |
| | padding: 15px; |
| | border-radius: 10px; |
| | text-align: center; |
| | } |
| | |
| | .info-item .value { |
| | font-size: 1.5em; |
| | font-weight: bold; |
| | color: #667eea; |
| | } |
| | |
| | .info-item .label { |
| | font-size: 0.9em; |
| | color: #666; |
| | margin-top: 5px; |
| | } |
| | |
| | .status-indicator { |
| | display: inline-block; |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | margin-right: 8px; |
| | } |
| | |
| | .status-online { |
| | background: #48bb78; |
| | } |
| | |
| | .status-offline { |
| | background: #f56565; |
| | } |
| | |
| | .control-buttons { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| | gap: 10px; |
| | } |
| | |
| | .btn { |
| | padding: 12px; |
| | border: none; |
| | border-radius: 8px; |
| | cursor: pointer; |
| | font-size: 14px; |
| | transition: all 0.3s; |
| | } |
| | |
| | .btn-primary { |
| | background: #667eea; |
| | color: white; |
| | } |
| | |
| | .btn-secondary { |
| | background: #e2e8f0; |
| | color: #4a5568; |
| | } |
| | |
| | .btn:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
| | } |
| | |
| | .progress-section { |
| | margin-top: 30px; |
| | } |
| | |
| | .progress-bar { |
| | width: 100%; |
| | height: 20px; |
| | background: #e2e8f0; |
| | border-radius: 10px; |
| | overflow: hidden; |
| | margin: 10px 0; |
| | } |
| | |
| | .progress-fill { |
| | height: 100%; |
| | background: linear-gradient(90deg, #48bb78, #38a169); |
| | width: 87.4%; |
| | transition: width 0.3s; |
| | } |
| | |
| | .footer { |
| | text-align: center; |
| | margin-top: 30px; |
| | color: white; |
| | opacity: 0.8; |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .interface-grid { |
| | grid-template-columns: 1fr; |
| | } |
| | |
| | .header h1 { |
| | font-size: 2em; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <div class="header"> |
| | <h1>🤖 Quillan-Ronin v5.3.0</h1> |
| | <p>SOTA Multimodal AI - Text, Image, Audio, Video Processing</p> |
| | </div> |
| |
|
| | <div class="interface-grid"> |
| | |
| | <div class="panel"> |
| | <h2>💬 Interactive Chat</h2> |
| | <div class="chat-container"> |
| | <div class="chat-messages" id="chatMessages"> |
| | <div class="message bot"> |
| | <strong>Quillan:</strong> Hello! I'm your multimodal AI assistant. How can I help you today? |
| | </div> |
| | </div> |
| | <div class="chat-input"> |
| | <input type="text" id="userInput" placeholder="Type your message here..." onkeypress="handleKeyPress(event)"> |
| | <button onclick="sendMessage()">Send</button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="panel"> |
| | <h2>🎯 Model Status</h2> |
| |
|
| | <div class="model-info"> |
| | <div class="info-grid"> |
| | <div class="info-item"> |
| | <div class="value">207M</div> |
| | <div class="label">Parameters</div> |
| | </div> |
| | <div class="info-item"> |
| | <div class="value">0.874</div> |
| | <div class="label">Confidence</div> |
| | </div> |
| | <div class="info-item"> |
| | <div class="value">1500</div> |
| | <div class="label">Training Steps</div> |
| | </div> |
| | <div class="info-item"> |
| | <div class="value">0.0098</div> |
| | <div class="label">Final Loss</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="status-info"> |
| | <h3>System Status</h3> |
| | <p><span class="status-indicator status-online"></span>Model: <strong>Loaded</strong></p> |
| | <p><span class="status-indicator status-offline"></span>GGUF: <strong>Pending</strong></p> |
| | <p><span class="status-indicator status-offline"></span>QK4M: <strong>Pending</strong></p> |
| | </div> |
| |
|
| | <div class="control-buttons"> |
| | <button class="btn btn-primary" onclick="startChat()">Start Chat</button> |
| | <button class="btn btn-secondary" onclick="clearChat()">Clear Chat</button> |
| | <button class="btn btn-secondary" onclick="exportModel()">Export GGUF</button> |
| | <button class="btn btn-secondary" onclick="showStats()">View Stats</button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="panel progress-section"> |
| | <h2>📊 Training Progress</h2> |
| | <div class="progress-bar"> |
| | <div class="progress-fill"></div> |
| | </div> |
| | <p><strong>Status:</strong> Training completed successfully | Loss: 0.009767 | Confidence: 87.4%</p> |
| | </div> |
| |
|
| | <div class="footer"> |
| | <p>Powered by Quillan-Ronin v5.3.0 - SOTA Multimodal AI | © 2026 CrashOverrideX & Quillan Research Team</p> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | let chatHistory = [ |
| | { role: 'bot', content: 'Hello! I\'m your multimodal AI assistant. How can I help you today?' } |
| | ]; |
| | |
| | function updateChatDisplay() { |
| | const chatMessages = document.getElementById('chatMessages'); |
| | chatMessages.innerHTML = ''; |
| | |
| | chatHistory.forEach(msg => { |
| | const messageDiv = document.createElement('div'); |
| | messageDiv.className = `message ${msg.role}`; |
| | messageDiv.innerHTML = `<strong>${msg.role === 'user' ? 'You' : 'Quillan'}:</strong> ${msg.content}`; |
| | chatMessages.appendChild(messageDiv); |
| | }); |
| | |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | } |
| | |
| | function sendMessage() { |
| | const input = document.getElementById('userInput'); |
| | const message = input.value.trim(); |
| | |
| | if (!message) return; |
| | |
| | |
| | chatHistory.push({ role: 'user', content: message }); |
| | updateChatDisplay(); |
| | input.value = ''; |
| | |
| | |
| | const typingDiv = document.createElement('div'); |
| | typingDiv.className = 'message bot'; |
| | typingDiv.id = 'typing'; |
| | typingDiv.innerHTML = '<strong>Quillan:</strong> <em>Thinking...</em>'; |
| | document.getElementById('chatMessages').appendChild(typingDiv); |
| | |
| | |
| | fetch('http://localhost:5000/api/chat', { |
| | method: 'POST', |
| | headers: { |
| | 'Content-Type': 'application/json', |
| | }, |
| | body: JSON.stringify({ message: message }) |
| | }) |
| | .then(response => response.json()) |
| | .then(data => { |
| | |
| | const typingEl = document.getElementById('typing'); |
| | if (typingEl) typingEl.remove(); |
| | |
| | if (data.error) { |
| | chatHistory.push({ role: 'bot', content: `Error: ${data.error}` }); |
| | } else { |
| | chatHistory.push({ role: 'bot', content: data.response }); |
| | } |
| | updateChatDisplay(); |
| | }) |
| | .catch(error => { |
| | |
| | const typingEl = document.getElementById('typing'); |
| | if (typingEl) typingEl.remove(); |
| | |
| | chatHistory.push({ role: 'bot', content: 'Sorry, I\'m having trouble connecting. Please make sure the backend server is running.' }); |
| | updateChatDisplay(); |
| | console.error('API Error:', error); |
| | }); |
| | } |
| | |
| | function handleKeyPress(event) { |
| | if (event.key === 'Enter') { |
| | sendMessage(); |
| | } |
| | } |
| | |
| | function startChat() { |
| | chatHistory = [ |
| | { role: 'bot', content: 'Hello! I\'m ready to chat. What would you like to talk about?' } |
| | ]; |
| | updateChatDisplay(); |
| | alert('Chat session started! Type your messages below.'); |
| | } |
| | |
| | function clearChat() { |
| | chatHistory = [ |
| | { role: 'bot', content: 'Chat history cleared. How can I help you?' } |
| | ]; |
| | updateChatDisplay(); |
| | } |
| | |
| | function exportModel() { |
| | alert('GGUF/QK4M export functionality coming soon!\n\nCurrent status: Model export in progress. Check console for updates.'); |
| | } |
| | |
| | function showStats() { |
| | const stats = ` |
| | Model Statistics: |
| | • Parameters: 207M |
| | • Training Steps: 1500 |
| | • Final Loss: 0.009767 |
| | • Confidence Score: 87.4% |
| | • KL Divergence: 0.005321 |
| | • Multimodal Capabilities: Text, Image, Audio, Video |
| | |
| | Architecture: |
| | • MoE with 8 experts |
| | • Diffusion layers for generation |
| | • Confidence calibration |
| | • CCRL optimizations |
| | `; |
| | alert(stats); |
| | } |
| | |
| | |
| | updateChatDisplay(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
