AptlyDigital/UltimateAI
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Neural AI Tutor | Interactive Learning Platform</title>7 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>8 <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">10 <style>11 * {12 margin: 0;13 padding: 0;14 box-sizing: border-box;15 }16 17 body {18 background: #0a0a0f;19 color: #fff;20 font-family: 'Segoe UI', system-ui, sans-serif;21 overflow: hidden;22 height: 100vh;23 display: flex;24 }25 26 /* Main Canvas - Prominently Displayed */27 #canvasContainer {28 flex: 1;29 position: relative;30 background: linear-gradient(135deg, #0a0a0f 0%, #0f0f1a 100%);31 }32 33 canvas {34 display: block;35 width: 100%;36 height: 100%;37 }38 39 /* Left Sidebar - Hidden Panels */40 .sidebar {41 width: 80px;42 background: rgba(15, 15, 25, 0.9);43 backdrop-filter: blur(10px);44 border-right: 1px solid rgba(255, 255, 255, 0.05);45 display: flex;46 flex-direction: column;47 align-items: center;48 padding: 20px 10px;49 z-index: 1000;50 transition: width 0.3s ease;51 }52 53 .sidebar:hover,54 .sidebar.expanded {55 width: 380px;56 }57 58 .sidebar:hover .panel-content,59 .sidebar.expanded .panel-content {60 opacity: 1;61 visibility: visible;62 }63 64 .panel-toggle {65 width: 100%;66 display: flex;67 align-items: center;68 justify-content: center;69 margin-bottom: 30px;70 padding: 15px 0;71 cursor: pointer;72 border-radius: 12px;73 transition: all 0.3s ease;74 background: rgba(90, 108, 255, 0.1);75 border: 1px solid rgba(90, 108, 255, 0.2);76 }77 78 .panel-toggle:hover {79 background: rgba(90, 108, 255, 0.2);80 transform: translateY(-2px);81 }82 83 .toggle-icon {84 font-size: 1.5em;85 color: #a0b0ff;86 }87 88 .panel-content {89 width: 100%;90 opacity: 0;91 visibility: hidden;92 transition: all 0.3s ease;93 overflow-y: auto;94 max-height: calc(100vh - 120px);95 }96 97 .panel-section {98 margin-bottom: 25px;99 background: rgba(20, 20, 30, 0.7);100 border-radius: 15px;101 border: 1px solid rgba(255, 255, 255, 0.05);102 overflow: hidden;103 }104 105 .panel-header {106 padding: 15px;107 background: rgba(30, 30, 45, 0.8);108 cursor: pointer;109 display: flex;110 align-items: center;111 justify-content: space-between;112 border-bottom: 1px solid rgba(255, 255, 255, 0.05);113 }114 115 .panel-header:hover {116 background: rgba(40, 40, 60, 0.8);117 }118 119 .panel-header h3 {120 color: #a0b0ff;121 font-size: 1em;122 font-weight: 500;123 display: flex;124 align-items: center;125 gap: 10px;126 }127 128 .panel-header i {129 font-size: 1.2em;130 }131 132 .panel-body {133 padding: 20px;134 display: none;135 }136 137 .panel-body.active {138 display: block;139 }140 141 .chevron {142 transition: transform 0.3s ease;143 }144 145 .chevron.rotated {146 transform: rotate(90deg);147 }148 149 /* Chat Interface - Horizontal and Centered */150 .chat-overlay {151 position: absolute;152 bottom: 30px;153 left: 50%;154 transform: translateX(-50%);155 width: 800px;156 max-width: 85vw;157 background: rgba(20, 20, 30, 0.85);158 backdrop-filter: blur(20px);159 border-radius: 20px;160 border: 1px solid rgba(255, 255, 255, 0.1);161 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);162 z-index: 100;163 display: flex;164 flex-direction: column;165 overflow: hidden;166 opacity: 0;167 animation: fadeIn 0.5s ease 1s forwards;168 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);169 }170 171 .chat-overlay.collapsed {172 width: 400px;173 height: 70px;174 bottom: 20px;175 }176 177 .chat-overlay.collapsed .chat-header {178 border-radius: 15px;179 padding: 15px;180 }181 182 .chat-overlay.collapsed .chat-messages,183 .chat-overlay.collapsed .chat-input-container {184 display: none;185 }186 187 .chat-overlay.collapsed .chat-header {188 cursor: pointer;189 }190 191 .chat-overlay.collapsed .chat-header:hover {192 background: rgba(35, 35, 50, 0.9);193 }194 195 @keyframes fadeIn {196 to {197 opacity: 1;198 }199 }200 201 .chat-header {202 padding: 20px;203 background: rgba(25, 25, 40, 0.9);204 border-bottom: 1px solid rgba(255, 255, 255, 0.05);205 display: flex;206 align-items: center;207 justify-content: space-between;208 transition: all 0.3s ease;209 }210 211 .chat-title {212 display: flex;213 align-items: center;214 gap: 15px;215 }216 217 .chat-title h2 {218 color: #a0b0ff;219 font-weight: 400;220 font-size: 1.3em;221 }222 223 .ai-avatar {224 width: 40px;225 height: 40px;226 background: linear-gradient(135deg, #5a6cff, #00ff9d);227 border-radius: 50%;228 display: flex;229 align-items: center;230 justify-content: center;231 font-size: 1.3em;232 }233 234 .chat-subtitle {235 color: #8892b0;236 font-size: 0.85em;237 line-height: 1.5;238 }239 240 .chat-controls {241 display: flex;242 gap: 10px;243 align-items: center;244 }245 246 .collapse-btn {247 width: 36px;248 height: 36px;249 border-radius: 10px;250 background: rgba(255, 255, 255, 0.07);251 border: 1px solid rgba(255, 255, 255, 0.1);252 color: #a0b0ff;253 cursor: pointer;254 display: flex;255 align-items: center;256 justify-content: center;257 transition: all 0.3s ease;258 }259 260 .collapse-btn:hover {261 background: rgba(90, 108, 255, 0.2);262 transform: translateY(-2px);263 }264 265 .chat-messages {266 display: flex;267 flex-direction: row;268 gap: 15px;269 padding: 20px;270 overflow-x: auto;271 overflow-y: hidden;272 height: 160px;273 scrollbar-width: thin;274 scrollbar-color: #5a6cff rgba(255, 255, 255, 0.05);275 white-space: nowrap;276 }277 278 .chat-messages::-webkit-scrollbar {279 height: 6px;280 }281 282 .chat-messages::-webkit-scrollbar-track {283 background: rgba(255, 255, 255, 0.05);284 border-radius: 3px;285 }286 287 .chat-messages::-webkit-scrollbar-thumb {288 background: #5a6cff;289 border-radius: 3px;290 }291 292 .message {293 min-width: 280px;294 max-width: 350px;295 padding: 15px;296 border-radius: 15px;297 line-height: 1.4;298 position: relative;299 animation: messageAppear 0.3s ease;300 white-space: normal;301 word-wrap: break-word;302 display: inline-block;303 vertical-align: top;304 margin-right: 15px;305 }306 307 @keyframes messageAppear {308 from {309 opacity: 0;310 transform: translateX(-20px);311 }312 to {313 opacity: 1;314 transform: translateX(0);315 }316 }317 318 .message-user {319 background: linear-gradient(135deg, #5a6cff, #7a8aff);320 color: white;321 }322 323 .message-ai {324 background: rgba(255, 255, 255, 0.08);325 color: #e0e0ff;326 border: 1px solid rgba(255, 255, 255, 0.05);327 }328 329 .message-content {330 font-size: 0.95em;331 margin-bottom: 8px;332 }333 334 .message-time {335 font-size: 0.7em;336 opacity: 0.7;337 text-align: right;338 }339 340 .message-typing {341 min-width: 280px;342 padding: 15px;343 background: rgba(255, 255, 255, 0.05);344 border-radius: 15px;345 display: flex;346 align-items: center;347 gap: 8px;348 }349 350 .typing-dot {351 width: 8px;352 height: 8px;353 background: #a0b0ff;354 border-radius: 50%;355 animation: typing 1.4s infinite ease-in-out;356 }357 358 .typing-dot:nth-child(1) { animation-delay: -0.32s; }359 .typing-dot:nth-child(2) { animation-delay: -0.16s; }360 361 @keyframes typing {362 0%, 80%, 100% { transform: translateY(0); }363 40% { transform: translateY(-10px); }364 }365 366 .chat-input-container {367 padding: 20px;368 background: rgba(15, 15, 25, 0.9);369 border-top: 1px solid rgba(255, 255, 255, 0.05);370 }371 372 .input-wrapper {373 display: flex;374 gap: 12px;375 align-items: flex-end;376 }377 378 .chat-input {379 flex: 1;380 background: rgba(255, 255, 255, 0.07);381 border: 1px solid rgba(255, 255, 255, 0.1);382 border-radius: 12px;383 padding: 15px 18px;384 color: white;385 font-family: 'Segoe UI', system-ui, sans-serif;386 font-size: 0.95em;387 resize: none;388 min-height: 50px;389 max-height: 100px;390 transition: all 0.3s ease;391 }392 393 .chat-input:focus {394 outline: none;395 border-color: #5a6cff;396 background: rgba(255, 255, 255, 0.1);397 box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);398 }399 400 .chat-input::placeholder {401 color: rgba(255, 255, 255, 0.4);402 }403 404 .input-buttons {405 display: flex;406 gap: 8px;407 }408 409 .voice-input-btn,410 .send-btn {411 width: 50px;412 height: 50px;413 border-radius: 12px;414 background: linear-gradient(135deg, #5a6cff, #7a8aff);415 border: none;416 color: white;417 cursor: pointer;418 display: flex;419 align-items: center;420 justify-content: center;421 transition: all 0.3s ease;422 font-size: 1.1em;423 }424 425 .voice-input-btn:hover,426 .send-btn:hover {427 transform: translateY(-2px);428 box-shadow: 0 5px 15px rgba(90, 108, 255, 0.4);429 }430 431 .voice-input-btn.listening {432 background: linear-gradient(135deg, #ff5a5a, #ff7a7a);433 animation: pulseListening 1.5s infinite;434 }435 436 @keyframes pulseListening {437 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.7); }438 70% { box-shadow: 0 0 0 10px rgba(255, 90, 90, 0); }439 }440 441 .send-btn {442 background: rgba(0, 255, 157, 0.2);443 border: 1px solid rgba(0, 255, 157, 0.3);444 color: #00ff9d;445 }446 447 .send-btn:hover {448 background: rgba(0, 255, 157, 0.3);449 }450 451 /* Control Elements in Sidebar */452 .control-group {453 margin-bottom: 20px;454 }455 456 .control-label {457 display: flex;458 align-items: center;459 gap: 10px;460 margin-bottom: 10px;461 color: #a0b0ff;462 font-size: 0.9em;463 font-weight: 500;464 }465 466 .slider-container {467 display: flex;468 align-items: center;469 gap: 15px;470 }471 472 input[type="range"] {473 flex: 1;474 height: 6px;475 background: rgba(255, 255, 255, 0.1);476 border-radius: 3px;477 outline: none;478 -webkit-appearance: none;479 }480 481 input[type="range"]::-webkit-slider-thumb {482 -webkit-appearance: none;483 width: 20px;484 height: 20px;485 background: #5a6cff;486 border-radius: 50%;487 cursor: pointer;488 transition: all 0.2s;489 }490 491 input[type="range"]::-webkit-slider-thumb:hover {492 background: #7a8aff;493 transform: scale(1.1);494 }495 496 .value-display {497 min-width: 40px;498 text-align: center;499 font-family: 'Courier New', monospace;500 color: #5a6cff;501 font-weight: 500;502 font-size: 0.9em;503 }504 505 .preset-buttons {506 display: grid;507 grid-template-columns: repeat(2, 1fr);508 gap: 8px;509 margin-top: 15px;510 }511 512 .preset-btn {513 padding: 10px;514 background: rgba(90, 108, 255, 0.1);515 border: 1px solid rgba(90, 108, 255, 0.3);516 color: #a0b0ff;517 border-radius: 10px;518 cursor: pointer;519 transition: all 0.2s;520 font-size: 0.85em;521 text-align: center;522 }523 524 .preset-btn:hover {525 background: rgba(90, 108, 255, 0.2);526 transform: translateY(-2px);527 }528 529 .preset-btn.active {530 background: rgba(90, 108, 255, 0.4);531 color: white;532 }533 534 .voice-control-group {535 margin-bottom: 20px;536 }537 538 .voice-select {539 width: 100%;540 padding: 12px 15px;541 background: rgba(255, 255, 255, 0.07);542 border: 1px solid rgba(255, 255, 255, 0.1);543 border-radius: 10px;544 color: white;545 font-family: 'Segoe UI', system-ui, sans-serif;546 font-size: 0.95em;547 cursor: pointer;548 transition: all 0.3s ease;549 }550 551 .voice-select:focus {552 outline: none;553 border-color: #5a6cff;554 background: rgba(255, 255, 255, 0.1);555 box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);556 }557 558 .voice-select option {559 background: #1a1a2a;560 color: white;561 padding: 10px;562 }563 564 .voice-control-buttons {565 display: grid;566 grid-template-columns: 1fr 1fr;567 gap: 10px;568 margin-top: 15px;569 }570 571 .voice-btn {572 padding: 12px;573 background: rgba(90, 108, 255, 0.1);574 border: 1px solid rgba(90, 108, 255, 0.3);575 color: #a0b0ff;576 border-radius: 10px;577 cursor: pointer;578 transition: all 0.3s ease;579 display: flex;580 align-items: center;581 justify-content: center;582 gap: 8px;583 font-size: 0.9em;584 }585 586 .voice-btn:hover {587 background: rgba(90, 108, 255, 0.2);588 transform: translateY(-2px);589 }590 591 .voice-btn.active {592 background: rgba(90, 108, 255, 0.3);593 color: white;594 }595 596 .voice-btn.stop {597 background: rgba(255, 90, 90, 0.1);598 border-color: rgba(255, 90, 90, 0.3);599 color: #ff9d9d;600 }601 602 .voice-btn.stop:hover {603 background: rgba(255, 90, 90, 0.2);604 }605 606 .voice-btn.stop.active {607 background: rgba(255, 90, 90, 0.3);608 }609 610 .voice-preview-btn {611 width: 100%;612 padding: 12px;613 background: rgba(0, 255, 157, 0.1);614 border: 1px solid rgba(0, 255, 157, 0.3);615 border-radius: 10px;616 color: #00ff9d;617 cursor: pointer;618 transition: all 0.3s ease;619 display: flex;620 align-items: center;621 justify-content: center;622 gap: 8px;623 margin-top: 10px;624 font-size: 0.9em;625 }626 627 .voice-preview-btn:hover {628 background: rgba(0, 255, 157, 0.2);629 transform: translateY(-2px);630 }631 632 .voice-status {633 display: flex;634 align-items: center;635 gap: 8px;636 margin-top: 15px;637 padding: 10px;638 background: rgba(0, 255, 157, 0.1);639 border-radius: 10px;640 font-size: 0.85em;641 color: #00ff9d;642 border: 1px solid rgba(0, 255, 157, 0.2);643 }644 645 /* System Status Bar */646 .status-bar {647 position: absolute;648 top: 20px;649 right: 20px;650 background: rgba(20, 20, 30, 0.8);651 backdrop-filter: blur(10px);652 padding: 12px 20px;653 border-radius: 12px;654 font-size: 0.85em;655 color: #8892b0;656 border: 1px solid rgba(255, 255, 255, 0.1);657 display: flex;658 align-items: center;659 gap: 10px;660 }661 662 .pulse-indicator {663 width: 12px;664 height: 12px;665 background: #00ff9d;666 border-radius: 50%;667 animation: pulse 2s infinite;668 }669 670 @keyframes pulse {671 0%, 100% { opacity: 1; }672 50% { opacity: 0.3; }673 }674 675 /* Loading and Error Screens */676 .loading-screen {677 position: absolute;678 top: 0;679 left: 0;680 width: 100%;681 height: 100%;682 background: #0a0a0f;683 display: flex;684 flex-direction: column;685 justify-content: center;686 align-items: center;687 z-index: 2000;688 }689 690 .spinner {691 width: 60px;692 height: 60px;693 border: 3px solid rgba(90, 108, 255, 0.3);694 border-top-color: #5a6cff;695 border-radius: 50%;696 animation: spin 1s linear infinite;697 margin-bottom: 20px;698 }699 700 @keyframes spin {701 to { transform: rotate(360deg); }702 }703 704 .error-screen {705 position: absolute;706 top: 0;707 left: 0;708 width: 100%;709 height: 100%;710 background: #0a0a0f;711 display: none;712 flex-direction: column;713 justify-content: center;714 align-items: center;715 z-index: 2001;716 text-align: center;717 padding: 20px;718 }719 720 .error-screen h2 {721 color: #ff5a5a;722 margin-bottom: 20px;723 }724 725 .error-screen p {726 color: #8892b0;727 margin-bottom: 30px;728 max-width: 500px;729 }730 731 .retry-btn {732 padding: 12px 30px;733 background: #5a6cff;734 color: white;735 border: none;736 border-radius: 10px;737 cursor: pointer;738 font-size: 1em;739 transition: all 0.2s;740 }741 742 .retry-btn:hover {743 background: #7a8aff;744 transform: translateY(-2px);745 }746 747 /* Responsive Design */748 @media (max-width: 1200px) {749 .chat-overlay {750 width: 700px;751 }752 753 .chat-overlay.collapsed {754 width: 350px;755 }756 }757 758 @media (max-width: 768px) {759 body {760 flex-direction: column;761 }762 763 .sidebar {764 width: 100%;765 height: 60px;766 flex-direction: row;767 padding: 10px;768 }769 770 .sidebar:hover,771 .sidebar.expanded {772 height: auto;773 min-height: 300px;774 }775 776 .panel-content {777 position: absolute;778 top: 60px;779 left: 0;780 width: 100%;781 background: rgba(15, 15, 25, 0.95);782 padding: 20px;783 }784 785 .chat-overlay {786 width: 95%;787 max-width: 95vw;788 }789 790 .chat-overlay.collapsed {791 width: 300px;792 }793 794 .chat-messages {795 height: 140px;796 }797 798 .message {799 min-width: 250px;800 max-width: 300px;801 }802 }803 804 /* Scrollbar Styling */805 ::-webkit-scrollbar {806 width: 8px;807 height: 8px;808 }809 810 ::-webkit-scrollbar-track {811 background: rgba(255, 255, 255, 0.05);812 border-radius: 4px;813 }814 815 ::-webkit-scrollbar-thumb {816 background: #5a6cff;817 border-radius: 4px;818 }819 820 ::-webkit-scrollbar-thumb:hover {821 background: #7a8aff;822 }823 </style>824</head>825<body>826 <!-- Left Sidebar with Collapsible Panels -->827 <div class="sidebar" id="sidebar">828 <div class="panel-toggle" onclick="toggleSidebar()">829 <i class="fas fa-bars toggle-icon"></i>830 </div>831 832 <div class="panel-content">833 <!-- Visualization Controls -->834 <div class="panel-section">835 <div class="panel-header" onclick="togglePanel('visualizationPanel')">836 <h3><i class="fas fa-brain"></i> Visualization Controls</h3>837 <i class="fas fa-chevron-right chevron" id="visualizationChevron"></i>838 </div>839 <div class="panel-body" id="visualizationPanel">840 <div class="control-group">841 <div class="control-label">842 <i class="fas fa-wave-square"></i>843 <span>Animation Intensity</span>844 </div>845 <div class="slider-container">846 <input type="range" id="intensity" min="0" max="100" value="50">847 <span class="value-display" id="intensityValue">50</span>848 </div>849 </div>850 851 <div class="control-group">852 <div class="control-label">853 <i class="fas fa-atom"></i>854 <span>Particle Count</span>855 </div>856 <div class="slider-container">857 <input type="range" id="particleCount" min="100" max="5000" value="2000" step="100">858 <span class="value-display" id="particleCountValue">2000</span>859 </div>860 </div>861 862 <div class="control-group">863 <div class="control-label">864 <i class="fas fa-bolt"></i>865 <span>Energy Level</span>866 </div>867 <div class="slider-container">868 <input type="range" id="energy" min="0" max="100" value="30">869 <span class="value-display" id="energyValue">30</span>870 </div>871 </div>872 873 <div class="preset-buttons">874 <button class="preset-btn" data-preset="listening">🎤 Listening</button>875 <button class="preset-btn" data-preset="processing">⚡ Processing</button>876 <button class="preset-btn" data-preset="responding">💬 Responding</button>877 <button class="preset-btn" data-preset="exploring">🔍 Exploring</button>878 <button class="preset-btn" data-preset="teaching">📚 Teaching</button>879 <button class="preset-btn" data-preset="idle">🌀 Idle</button>880 </div>881 </div>882 </div>883 884 <!-- Voice Controls -->885 <div class="panel-section">886 <div class="panel-header" onclick="togglePanel('voicePanel')">887 <h3><i class="fas fa-robot"></i> Voice Synthesis</h3>888 <i class="fas fa-chevron-right chevron" id="voiceChevron"></i>889 </div>890 <div class="panel-body" id="voicePanel">891 <div class="voice-control-group">892 <div class="control-label">893 <i class="fas fa-user-circle"></i>894 <span>Voice Selection</span>895 </div>896 <select class="voice-select" id="voiceSelect">897 <option value="">Loading voices...</option>898 </select>899 </div>900 901 <div class="voice-control-group">902 <div class="control-label">903 <i class="fas fa-tachometer-alt"></i>904 <span>Speech Rate</span>905 </div>906 <div class="slider-container">907 <input type="range" class="voice-slider" id="rateSlider" min="0.5" max="2" step="0.1" value="1">908 <span class="value-display" id="rateValue">1.0x</span>909 </div>910 </div>911 912 <div class="voice-control-group">913 <div class="control-label">914 <i class="fas fa-wave-square"></i>915 <span>Pitch Variation</span>916 </div>917 <div class="slider-container">918 <input type="range" class="voice-slider" id="pitchSlider" min="0.5" max="2" step="0.1" value="1">919 <span class="value-display" id="pitchValue">1.0</span>920 </div>921 </div>922 923 <div class="voice-control-group">924 <div class="control-label">925 <i class="fas fa-volume-up"></i>926 <span>Volume Level</span>927 </div>928 <div class="slider-container">929 <input type="range" class="voice-slider" id="volumeSlider" min="0.1" max="1" step="0.1" value="0.8">930 <span class="value-display" id="volumeValue">80%</span>931 </div>932 </div>933 934 <div class="voice-control-buttons">935 <button class="voice-btn" id="autoSpeakBtn" data-enabled="true">936 <i class="fas fa-bullhorn"></i>937 Auto-Speak938 </button>939 <button class="voice-btn stop" id="stopBtn">940 <i class="fas fa-stop"></i>941 Stop942 </button>943 </div>944 945 <button class="voice-preview-btn" id="previewBtn">946 <i class="fas fa-play"></i>947 Preview Voice (Little Red Riding Hood)948 </button>949 950 <div class="voice-status" id="voiceStatus" style="display: none;">951 <i class="fas fa-comment-dots"></i>952 <span id="statusMessage">Speaking...</span>953 </div>954 </div>955 </div>956 957 <!-- System Info -->958 <div class="panel-section">959 <div class="panel-header" onclick="togglePanel('systemPanel')">960 <h3><i class="fas fa-info-circle"></i> System Info</h3>961 <i class="fas fa-chevron-right chevron" id="systemChevron"></i>962 </div>963 <div class="panel-body" id="systemPanel">964 <div class="control-group">965 <div class="control-label">966 <i class="fas fa-cube"></i>967 <span>3D Renderer</span>968 </div>969 <div style="color: #8892b0; font-size: 0.9em; padding: 10px 0;">970 Three.js v128<br>971 WebGL 2.0 Enabled972 </div>973 </div>974 975 <div class="control-group">976 <div class="control-label">977 <i class="fas fa-microchip"></i>978 <span>Performance</span>979 </div>980 <div style="color: #8892b0; font-size: 0.9em; padding: 10px 0;">981 <div id="fpsCounter">FPS: 60</div>982 <div id="particleCounter">Particles: 2000</div>983 </div>984 </div>985 </div>986 </div>987 </div>988 </div>989 990 <!-- Main Visualization Canvas -->991 <div id="canvasContainer">992 <canvas id="mainCanvas"></canvas>993 994 <!-- Status Bar -->995 <div class="status-bar">996 <span class="pulse-indicator"></span>997 <span id="statusText">Neural AI Tutor Ready</span>998 </div>999 1000 <!-- Centered Horizontal Chat Interface -->1001 <div class="chat-overlay" id="chatOverlay">1002 <div class="chat-header">1003 <div class="chat-title">1004 <div class="ai-avatar">1005 <i class="fas fa-brain"></i>1006 </div>1007 <div>1008 <h2>Neural AI Tutor</h2>1009 <div class="chat-subtitle">1010 Interactive learning assistant with neural visualization1011 </div>1012 </div>1013 </div>1014 1015 <div class="chat-controls">1016 <button class="collapse-btn" id="collapseBtn" title="Collapse chat">1017 <i class="fas fa-chevron-down"></i>1018 </button>1019 </div>1020 </div>1021 1022 <div class="chat-messages" id="chatMessages">1023 <div class="message message-ai">1024 <div class="message-content">1025 Welcome to the Neural AI Tutor! I'm your interactive learning assistant. 1026 I can help explain complex concepts, answer questions, and guide your learning journey.1027 </div>1028 <div class="message-time">Just now</div>1029 </div>1030 1031 <div class="message message-ai">1032 <div class="message-content">1033 You can type your questions or use voice input. The neural visualization 1034 responds to our conversation, showing how knowledge connects in real-time.1035 </div>1036 <div class="message-time">Just now</div>1037 </div>1038 1039 <div class="message message-ai">1040 <div class="message-content">1041 Try asking me about quantum computing, neural networks, blockchain, 1042 calculus, or any other subject you're curious about!1043 </div>1044 <div class="message-time">Just now</div>1045 </div>1046 1047 <!-- Typing indicator (hidden by default) -->1048 <div class="message-typing" id="typingIndicator" style="display: none;">1049 <div class="typing-dot"></div>1050 <div class="typing-dot"></div>1051 <div class="typing-dot"></div>1052 <span style="color: #a0b0ff; font-size: 0.9em; margin-left: 10px;">Thinking...</span>1053 </div>1054 </div>1055 1056 <div class="chat-input-container">1057 <div class="input-wrapper">1058 <textarea 1059 class="chat-input" 1060 id="chatInput" 1061 placeholder="Ask me anything about science, math, technology, or any subject..."1062 rows="1"1063 ></textarea>1064 1065 <div class="input-buttons">1066 <button class="voice-input-btn" id="voiceBtn" title="Start voice input">1067 <i class="fas fa-microphone"></i>1068 </button>1069 1070 <button class="send-btn" id="sendBtn" title="Send message">1071 <i class="fas fa-paper-plane"></i>1072 </button>1073 </div>1074 </div>1075 </div>1076 </div>1077 1078 <!-- Loading Screen -->1079 <div class="loading-screen" id="loadingScreen">1080 <div class="spinner"></div>1081 <div id="loadingText">Initializing Neural AI Tutor...</div>1082 </div>1083 1084 <!-- Error Screen -->1085 <div class="error-screen" id="errorScreen">1086 <h2>⚠️ System Initialization Failed</h2>1087 <p id="errorMessage">Unable to load 3D visualization engine. Please check your browser compatibility or try again.</p>1088 <button class="retry-btn" id="retryBtn">Retry Initialization</button>1089 </div>1090 </div>1091 1092 <script>1093 // Sidebar and Panel Management1094 function toggleSidebar() {1095 const sidebar = document.getElementById('sidebar');1096 sidebar.classList.toggle('expanded');1097 }1098 1099 function togglePanel(panelId) {1100 const panel = document.getElementById(panelId);1101 const chevron = document.getElementById(panelId.replace('Panel', 'Chevron'));1102 1103 panel.classList.toggle('active');1104 chevron.classList.toggle('rotated');1105 }1106 1107 // Chat Collapse Functionality1108 let isChatCollapsed = false;1109 const chatOverlay = document.getElementById('chatOverlay');1110 const collapseBtn = document.getElementById('collapseBtn');1111 1112 collapseBtn.addEventListener('click', function(e) {1113 e.stopPropagation();1114 toggleChat();1115 });1116 1117 // Click on collapsed chat header to expand1118 chatOverlay.addEventListener('click', function(e) {1119 if (isChatCollapsed && e.target.closest('.chat-header')) {1120 toggleChat();1121 }1122 });1123 1124 function toggleChat() {1125 isChatCollapsed = !isChatCollapsed;1126 chatOverlay.classList.toggle('collapsed');1127 1128 const icon = collapseBtn.querySelector('i');1129 if (isChatCollapsed) {1130 icon.className = 'fas fa-chevron-up';1131 collapseBtn.title = 'Expand chat';1132 } else {1133 icon.className = 'fas fa-chevron-down';1134 collapseBtn.title = 'Collapse chat';1135 }1136 }1137 1138 // Check if Three.js loaded properly1139 function checkThreeJS() {1140 if (typeof THREE === 'undefined') {1141 console.error('Three.js failed to load');1142 showError('Three.js library failed to load. Please check your internet connection.');1143 return false;1144 }1145 return true;1146 }1147 1148 function showError(message) {1149 const errorScreen = document.getElementById('errorScreen');1150 const errorMessage = document.getElementById('errorMessage');1151 const loadingScreen = document.getElementById('loadingScreen');1152 1153 loadingScreen.style.display = 'none';1154 errorMessage.textContent = message;1155 errorScreen.style.display = 'flex';1156 }1157 1158 function hideLoading() {1159 const loadingScreen = document.getElementById('loadingScreen');1160 loadingScreen.style.opacity = '0';1161 setTimeout(() => {1162 loadingScreen.style.display = 'none';1163 }, 500);1164 }1165 1166 function updateStatus(text) {1167 document.getElementById('statusText').textContent = text;1168 document.getElementById('loadingText').textContent = text;1169 }1170 1171 // Voice Synthesis System (unchanged from previous version)1172 class VoiceSynthesis {1173 constructor() {1174 this.synth = window.speechSynthesis;1175 this.voices = [];1176 this.currentVoice = null;1177 this.isAutoSpeak = true;1178 this.isSpeaking = false;1179 this.currentUtterance = null;1180 1181 this.settings = {1182 rate: 1.0,1183 pitch: 1.0,1184 volume: 0.81185 };1186 1187 // Little Red Riding Hood story for voice preview1188 this.testScript = "Once upon a time, there was a little girl who lived in a village near the forest. " +1189 "Whenever she went out, the little girl wore a red riding cloak, so everyone in the village called her Little Red Riding Hood. " +1190 "One morning, Little Red Riding Hood asked her mother if she could go to visit her grandmother as it had been awhile since they'd seen each other. " +1191 "That's a wonderful idea, her mother said. So they packed a nice basket for Little Red Riding Hood to take to her grandmother. " +1192 "When the basket was ready, the little girl put on her red cloak and kissed her mother goodbye. " +1193 "Remember, go straight to Grandma's house, her mother cautioned. Don't dawdle along the way and please don't talk to strangers! " +1194 "The woods are dangerous. I will be careful, Little Red Riding Hood promised her mother. " +1195 "The grandmother lived out in the woods, a half hour from the village. When Little Red Riding Hood entered the woods a wolf came up to her. " +1196 "She did not know what a wicked animal he was, and was not afraid of him. Good day, Little Red Riding Hood, said the wolf. " +1197 "Thank you kindly, wolf, she replied. Where are you going so early, Little Red Riding Hood? " +1198 "To my grandmother's house. What do you have there in your basket? " +1199 "Cake and wine. Yesterday was baking day, so poor sick grandmother is to have something good, to make her stronger. " +1200 "Where does your grandmother live, Little Red Riding Hood? A good quarter of an hour farther in the woods. " +