| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Applied Computing Components</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; |
| background: #0a0e1a; |
| color: #e0e6f0; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| |
| .bg-canvas { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 0; |
| opacity: 0.3; |
| } |
| |
| .app-container { |
| position: relative; |
| z-index: 10; |
| max-width: 1600px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| |
| |
| .header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 20px 0; |
| margin-bottom: 30px; |
| border-bottom: 1px solid rgba(100, 200, 255, 0.1); |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| } |
| |
| .logo-icon { |
| width: 50px; |
| height: 50px; |
| background: linear-gradient(135deg, #00d4ff, #7b2cbf); |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| box-shadow: 0 0 30px rgba(0, 212, 255, 0.3); |
| animation: pulse-glow 3s infinite; |
| } |
| |
| @keyframes pulse-glow { |
| 0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); } |
| 50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5); } |
| } |
| |
| .logo-text h1 { |
| font-size: 24px; |
| font-weight: 700; |
| background: linear-gradient(135deg, #00d4ff, #7b2cbf); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .logo-text span { |
| font-size: 12px; |
| color: rgba(255, 255, 255, 0.5); |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| } |
| |
| .system-status { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| } |
| |
| .status-pill { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 16px; |
| background: rgba(0, 212, 255, 0.1); |
| border: 1px solid rgba(0, 212, 255, 0.2); |
| border-radius: 20px; |
| font-size: 13px; |
| } |
| |
| .status-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: #00ff88; |
| animation: blink 2s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.3; } |
| } |
| |
| |
| .component-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .component-card { |
| background: rgba(15, 20, 40, 0.8); |
| border: 1px solid rgba(100, 200, 255, 0.1); |
| border-radius: 16px; |
| overflow: hidden; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| } |
| |
| .component-card:hover { |
| border-color: rgba(0, 212, 255, 0.3); |
| transform: translateY(-2px); |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); |
| } |
| |
| .component-header { |
| padding: 16px 20px; |
| background: rgba(0, 212, 255, 0.05); |
| border-bottom: 1px solid rgba(100, 200, 255, 0.1); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| |
| .component-title { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 15px; |
| font-weight: 600; |
| } |
| |
| .component-title .icon { |
| width: 36px; |
| height: 36px; |
| background: rgba(0, 212, 255, 0.1); |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 18px; |
| } |
| |
| .component-actions { |
| display: flex; |
| gap: 8px; |
| } |
| |
| .btn-sm { |
| padding: 6px 12px; |
| border: none; |
| border-radius: 6px; |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s; |
| background: rgba(255, 255, 255, 0.1); |
| color: #fff; |
| } |
| |
| .btn-sm:hover { |
| background: rgba(0, 212, 255, 0.2); |
| } |
| |
| .btn-sm.active { |
| background: rgba(0, 212, 255, 0.3); |
| color: #00d4ff; |
| } |
| |
| .component-body { |
| padding: 20px; |
| } |
| |
| |
| .flow-container { |
| height: 200px; |
| position: relative; |
| background: rgba(0, 0, 0, 0.2); |
| border-radius: 12px; |
| overflow: hidden; |
| } |
| |
| .flow-node { |
| position: absolute; |
| width: 60px; |
| height: 60px; |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| background: rgba(0, 212, 255, 0.15); |
| border: 2px solid rgba(0, 212, 255, 0.3); |
| transition: all 0.3s; |
| } |
| |
| .flow-node.active { |
| background: rgba(0, 212, 255, 0.3); |
| box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); |
| transform: scale(1.1); |
| } |
| |
| .flow-edge { |
| position: absolute; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, #00d4ff, transparent); |
| transform-origin: left center; |
| opacity: 0.5; |
| transition: opacity 0.3s; |
| } |
| |
| .flow-edge.active { |
| opacity: 1; |
| animation: flow-pulse 1s infinite; |
| } |
| |
| @keyframes flow-pulse { |
| 0% { background: linear-gradient(90deg, transparent, #00d4ff, transparent); } |
| 50% { background: linear-gradient(90deg, transparent, #fff, transparent); } |
| 100% { background: linear-gradient(90deg, transparent, #00d4ff, transparent); } |
| } |
| |
| |
| .metrics-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 12px; |
| } |
| |
| .metric-box { |
| text-align: center; |
| padding: 15px; |
| background: rgba(0, 0, 0, 0.2); |
| border-radius: 10px; |
| transition: all 0.3s; |
| } |
| |
| .metric-box:hover { |
| background: rgba(0, 212, 255, 0.05); |
| } |
| |
| .metric-value { |
| font-size: 28px; |
| font-weight: 700; |
| color: #00d4ff; |
| font-family: 'Courier New', monospace; |
| } |
| |
| .metric-label { |
| font-size: 11px; |
| color: rgba(255, 255, 255, 0.5); |
| margin-top: 4px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| |
| .queue-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| max-height: 200px; |
| overflow-y: auto; |
| } |
| |
| .queue-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 10px 14px; |
| background: rgba(255, 255, 255, 0.03); |
| border-radius: 8px; |
| border-left: 3px solid #00d4ff; |
| transition: all 0.3s; |
| animation: slide-in 0.3s ease; |
| } |
| |
| @keyframes slide-in { |
| from { opacity: 0; transform: translateX(-20px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| |
| .queue-item.processing { border-left-color: #00ff88; } |
| .queue-item.pending { border-left-color: #ffaa00; } |
| .queue-item.error { border-left-color: #ff4444; } |
| |
| .queue-status { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| } |
| |
| .queue-status.processing { background: #00ff88; animation: pulse 1s infinite; } |
| .queue-status.pending { background: #ffaa00; } |
| .queue-status.error { background: #ff4444; } |
| |
| .queue-info { |
| flex: 1; |
| min-width: 0; |
| } |
| |
| .queue-name { |
| font-size: 13px; |
| font-weight: 500; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .queue-meta { |
| font-size: 11px; |
| color: rgba(255, 255, 255, 0.4); |
| } |
| |
| .queue-progress { |
| width: 60px; |
| height: 4px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 2px; |
| overflow: hidden; |
| } |
| |
| .queue-progress-bar { |
| height: 100%; |
| background: linear-gradient(90deg, #00d4ff, #00ff88); |
| border-radius: 2px; |
| transition: width 0.5s ease; |
| } |
| |
| |
| .nn-container { |
| height: 220px; |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .nn-layer { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| margin: 0 20px; |
| } |
| |
| .nn-node { |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| background: rgba(0, 212, 255, 0.2); |
| border: 2px solid rgba(0, 212, 255, 0.4); |
| transition: all 0.3s; |
| position: relative; |
| } |
| |
| .nn-node.active { |
| background: rgba(0, 212, 255, 0.6); |
| box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); |
| transform: scale(1.2); |
| } |
| |
| .nn-node::after { |
| content: attr(data-value); |
| position: absolute; |
| top: -20px; |
| left: 50%; |
| transform: translateX(-50%); |
| font-size: 9px; |
| color: rgba(255, 255, 255, 0.6); |
| white-space: nowrap; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .nn-node:hover::after { |
| opacity: 1; |
| } |
| |
| .nn-connections { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| } |
| |
| |
| .memory-map { |
| display: grid; |
| grid-template-columns: repeat(16, 1fr); |
| gap: 2px; |
| padding: 10px; |
| background: rgba(0, 0, 0, 0.2); |
| border-radius: 10px; |
| } |
| |
| .memory-cell { |
| aspect-ratio: 1; |
| border-radius: 2px; |
| background: rgba(255, 255, 255, 0.05); |
| transition: all 0.3s; |
| position: relative; |
| } |
| |
| .memory-cell:hover { |
| transform: scale(1.5); |
| z-index: 10; |
| box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); |
| } |
| |
| .memory-cell.active { |
| background: rgba(0, 212, 255, 0.4); |
| animation: memory-pulse 2s infinite; |
| } |
| |
| .memory-cell.used { |
| background: rgba(123, 44, 191, 0.4); |
| } |
| |
| .memory-cell.system { |
| background: rgba(0, 255, 136, 0.3); |
| } |
| |
| @keyframes memory-pulse { |
| 0%, 100% { opacity: 0.6; } |
| 50% { opacity: 1; } |
| } |
| |
| |
| .algo-container { |
| height: 200px; |
| display: flex; |
| align-items: flex-end; |
| justify-content: center; |
| gap: 4px; |
| padding: 20px; |
| background: rgba(0, 0, 0, 0.2); |
| border-radius: 12px; |
| } |
| |
| .algo-bar { |
| flex: 1; |
| background: linear-gradient(to top, #00d4ff, #7b2cbf); |
| border-radius: 3px 3px 0 0; |
| transition: all 0.5s ease; |
| position: relative; |
| min-width: 8px; |
| max-width: 30px; |
| } |
| |
| .algo-bar:hover { |
| filter: brightness(1.3); |
| } |
| |
| .algo-bar.comparing { |
| background: linear-gradient(to top, #ffaa00, #ff4444); |
| } |
| |
| .algo-bar.sorted { |
| background: linear-gradient(to top, #00ff88, #00d4ff); |
| } |
| |
| .algo-bar::after { |
| content: attr(data-value); |
| position: absolute; |
| top: -18px; |
| left: 50%; |
| transform: translateX(-50%); |
| font-size: 10px; |
| color: rgba(255, 255, 255, 0.7); |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .algo-bar:hover::after { |
| opacity: 1; |
| } |
| |
| |
| .terminal { |
| background: rgba(0, 0, 0, 0.4); |
| border-radius: 10px; |
| padding: 15px; |
| font-family: 'Courier New', monospace; |
| font-size: 12px; |
| line-height: 1.6; |
| height: 180px; |
| overflow-y: auto; |
| color: rgba(255, 255, 255, 0.8); |
| } |
| |
| .terminal-line { |
| margin-bottom: 4px; |
| display: flex; |
| gap: 10px; |
| } |
| |
| .terminal-time { |
| color: #00ff88; |
| opacity: 0.6; |
| flex-shrink: 0; |
| } |
| |
| .terminal-type { |
| color: #00d4ff; |
| flex-shrink: 0; |
| } |
| |
| .terminal-msg { |
| color: rgba(255, 255, 255, 0.8); |
| } |
| |
| .terminal-msg.success { color: #00ff88; } |
| .terminal-msg.warning { color: #ffaa00; } |
| .terminal-msg.error { color: #ff4444; } |
| |
| |
| .control-panel { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 15px; |
| margin-bottom: 20px; |
| } |
| |
| .control-group { |
| background: rgba(15, 20, 40, 0.8); |
| border: 1px solid rgba(100, 200, 255, 0.1); |
| border-radius: 12px; |
| padding: 16px; |
| } |
| |
| .control-label { |
| font-size: 12px; |
| color: rgba(255, 255, 255, 0.5); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: 10px; |
| } |
| |
| .slider-container { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .slider { |
| flex: 1; |
| -webkit-appearance: none; |
| height: 6px; |
| border-radius: 3px; |
| background: rgba(255, 255, 255, 0.1); |
| outline: none; |
| } |
| |
| .slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| background: #00d4ff; |
| cursor: pointer; |
| box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); |
| } |
| |
| .slider-value { |
| width: 50px; |
| text-align: right; |
| font-family: 'Courier New', monospace; |
| font-size: 14px; |
| color: #00d4ff; |
| } |
| |
| .btn { |
| padding: 10px 20px; |
| border: none; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #00d4ff, #7b2cbf); |
| color: #fff; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3); |
| } |
| |
| .btn-secondary { |
| background: rgba(255, 255, 255, 0.1); |
| color: #fff; |
| } |
| |
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.15); |
| } |
| |
| |
| .component-full { |
| grid-column: 1 / -1; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: rgba(255, 255, 255, 0.02); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: rgba(0, 212, 255, 0.2); |
| border-radius: 3px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(0, 212, 255, 0.4); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .component-grid { |
| grid-template-columns: 1fr; |
| } |
| .metrics-grid { |
| grid-template-columns: 1fr; |
| } |
| .memory-map { |
| grid-template-columns: repeat(8, 1fr); |
| } |
| } |
| |
| |
| .tooltip { |
| position: relative; |
| } |
| |
| .tooltip::before { |
| content: attr(data-tip); |
| position: absolute; |
| bottom: 100%; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 6px 12px; |
| background: rgba(0, 0, 0, 0.9); |
| border: 1px solid rgba(0, 212, 255, 0.3); |
| border-radius: 6px; |
| font-size: 12px; |
| white-space: nowrap; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s; |
| z-index: 100; |
| } |
| |
| .tooltip:hover::before { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body> |
| <canvas class="bg-canvas" id="bgCanvas"></canvas> |
|
|
| <div class="app-container"> |
| |
| <header class="header"> |
| <div class="logo"> |
| <div class="logo-icon">⚡</div> |
| <div class="logo-text"> |
| <h1>Applied Computing Components</h1> |
| <span>Modular Processing System v2.0</span> |
| </div> |
| </div> |
| <div class="system-status"> |
| <div class="status-pill"> |
| <span class="status-dot"></span> |
| <span>System Online</span> |
| </div> |
| <div class="status-pill"> |
| <span id="uptime">00:00:00</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="control-panel"> |
| <div class="control-group"> |
| <div class="control-label">Processing Threads</div> |
| <div class="slider-container"> |
| <input type="range" class="slider" id="threadSlider" min="1" max="16" value="4"> |
| <span class="slider-value" id="threadValue">4</span> |
| </div> |
| </div> |
| <div class="control-group"> |
| <div class="control-label">Memory Allocation</div> |
| <div class="slider-container"> |
| <input type="range" class="slider" id="memorySlider" min="256" max="8192" value="2048" step="256"> |
| <span class="slider-value" id="memoryValue">2048</span> |
| </div> |
| </div> |
| <div class="control-group"> |
| <div class="control-label">Queue Depth</div> |
| <div class="slider-container"> |
| <input type="range" class="slider" id="queueSlider" min="10" max="1000" value="100" step="10"> |
| <span class="slider-value" id="queueValue">100</span> |
| </div> |
| </div> |
| <div class="control-group"> |
| <div class="control-label">Actions</div> |
| <div style="display: flex; gap: 8px;"> |
| <button class="btn btn-primary" onclick="startSimulation()">▶ Start</button> |
| <button class="btn btn-secondary" onclick="pauseSimulation()">⏸ Pause</button> |
| <button class="btn btn-secondary" onclick="resetSimulation()">↺ Reset</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-grid"> |
| |
| <div class="component-card component-full"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">🌊</div> |
| <span>Data Flow Pipeline</span> |
| </div> |
| <div class="component-actions"> |
| <button class="btn-sm active" onclick="setFlowMode('pipeline')">Pipeline</button> |
| <button class="btn-sm" onclick="setFlowMode('parallel')">Parallel</button> |
| <button class="btn-sm" onclick="setFlowMode('distributed')">Distributed</button> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="flow-container" id="flowContainer"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-card"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">📊</div> |
| <span>Compute Metrics</span> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="metrics-grid"> |
| <div class="metric-box"> |
| <div class="metric-value" id="metricThroughput">0</div> |
| <div class="metric-label">Throughput<br>ops/sec</div> |
| </div> |
| <div class="metric-box"> |
| <div class="metric-value" id="metricLatency">0</div> |
| <div class="metric-label">Latency<br>ms</div> |
| </div> |
| <div class="metric-box"> |
| <div class="metric-value" id="metricEfficiency">0%</div> |
| <div class="metric-label">Efficiency</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-card"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">📋</div> |
| <span>Processing Queue</span> |
| </div> |
| <div class="component-actions"> |
| <span id="queueCount" style="font-size: 12px; color: rgba(255,255,255,0.5);">0 items</span> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="queue-list" id="queueList"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-card"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">🧠</div> |
| <span>Neural Network</span> |
| </div> |
| <div class="component-actions"> |
| <button class="btn-sm" onclick="trainNetwork()">Train</button> |
| <button class="btn-sm" onclick="inferenceNetwork()">Infer</button> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="nn-container" id="nnContainer"> |
| <svg class="nn-connections" id="nnConnections"></svg> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-card"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">💾</div> |
| <span>Memory Map</span> |
| </div> |
| <div class="component-actions"> |
| <button class="btn-sm" onclick="defragmentMemory()">Defrag</button> |
| <button class="btn-sm" onclick="clearCache()">Clear</button> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="memory-map" id="memoryMap"> |
| |
| </div> |
| <div style="display: flex; gap: 15px; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.5);"> |
| <span>● Free</span> |
| <span style="color: rgba(0,212,255,0.6);">● Active</span> |
| <span style="color: rgba(123,44,191,0.6);">● Used</span> |
| <span style="color: rgba(0,255,136,0.6);">● System</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-card"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">📈</div> |
| <span>Algorithm Visualizer</span> |
| </div> |
| <div class="component-actions"> |
| <button class="btn-sm active" onclick="setAlgorithm('quicksort')">Quicksort</button> |
| <button class="btn-sm" onclick="setAlgorithm('mergesort')">Mergesort</button> |
| <button class="btn-sm" onclick="setAlgorithm('bubblesort')">Bubble</button> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="algo-container" id="algoContainer"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-card component-full"> |
| <div class="component-header"> |
| <div class="component-title"> |
| <div class="icon">💻</div> |
| <span>System Terminal</span> |
| </div> |
| <div class="component-actions"> |
| <button class="btn-sm" onclick="clearTerminal()">Clear</button> |
| <button class="btn-sm" onclick="exportLogs()">Export</button> |
| </div> |
| </div> |
| <div class="component-body"> |
| <div class="terminal" id="terminal"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const state = { |
| running: false, |
| uptime: 0, |
| threads: 4, |
| memory: 2048, |
| queueDepth: 100, |
| flowMode: 'pipeline', |
| algorithm: 'quicksort', |
| throughput: 0, |
| latency: 0, |
| efficiency: 0, |
| queue: [], |
| memoryCells: [], |
| nnLayers: [4, 6, 6, 4], |
| logs: [], |
| flowNodes: [ |
| { id: 'input', x: 50, y: 70, icon: '📥', label: 'Input' }, |
| { id: 'preprocess', x: 200, y: 70, icon: '🔧', label: 'Preprocess' }, |
| { id: 'transform', x: 350, y: 70, icon: '⚡', label: 'Transform' }, |
| { id: 'analyze', x: 500, y: 70, icon: '🔍', label: 'Analyze' }, |
| { id: 'output', x: 650, y: 70, icon: '📤', label: 'Output' } |
| ], |
| flowEdges: [ |
| { from: 'input', to: 'preprocess' }, |
| { from: 'preprocess', to: 'transform' }, |
| { from: 'transform', to: 'analyze' }, |
| { from: 'analyze', to: 'output' } |
| ] |
| }; |
| |
| |
| function init() { |
| initBackground(); |
| initFlow(); |
| initMemoryMap(); |
| initNeuralNetwork(); |
| initAlgorithm(); |
| initSliders(); |
| updateUptime(); |
| setInterval(() => { |
| if (state.running) { |
| updateUptime(); |
| simulateActivity(); |
| } |
| }, 1000); |
| setInterval(() => { |
| if (state.running) { |
| updateMetrics(); |
| processQueue(); |
| } |
| }, 500); |
| addLog('SYSTEM', 'Applied Computing Components initialized', 'success'); |
| addLog('SYSTEM', 'All modules loaded and ready', 'success'); |
| } |
| |
| function initBackground() { |
| const canvas = document.getElementById('bgCanvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| function resize() { |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| } |
| resize(); |
| window.addEventListener('resize', resize); |
| |
| const particles = []; |
| for (let i = 0; i < 80; i++) { |
| particles.push({ |
| x: Math.random() * canvas.width, |
| y: Math.random() * canvas.height, |
| vx: (Math.random() - 0.5) * 0.5, |
| vy: (Math.random() - 0.5) * 0.5, |
| radius: Math.random() * 2 + 1, |
| opacity: Math.random() * 0.5 + 0.2 |
| }); |
| } |
| |
| function animate() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| |
| particles.forEach(p => { |
| p.x += p.vx; |
| p.y += p.vy; |
| |
| if (p.x < 0 || p.x > canvas.width) p.vx *= -1; |
| if (p.y < 0 || p.y > canvas.height) p.vy *= -1; |
| |
| ctx.beginPath(); |
| ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); |
| ctx.fillStyle = `rgba(0, 212, 255, ${p.opacity})`; |
| ctx.fill(); |
| }); |
| |
| |
| particles.forEach((p1, i) => { |
| particles.slice(i + 1).forEach(p2 => { |
| const dx = p1.x - p2.x; |
| const dy = p1.y - p2.y; |
| const dist = Math.sqrt(dx * dx + dy * dy); |
| |
| if (dist < 150) { |
| ctx.beginPath(); |
| ctx.moveTo(p1.x, p1.y); |
| ctx.lineTo(p2.x, p2.y); |
| ctx.strokeStyle = `rgba(0, 212, 255, ${0.1 * (1 - dist / 150)})`; |
| ctx.lineWidth = 0.5; |
| ctx.stroke(); |
| } |
| }); |
| }); |
| |
| requestAnimationFrame(animate); |
| } |
| animate(); |
| } |
| |
| |
| function initFlow() { |
| const container = document.getElementById('flowContainer'); |
| container.innerHTML = ''; |
| |
| |
| state.flowEdges.forEach(edge => { |
| const fromNode = state.flowNodes.find(n => n.id === edge.from); |
| const toNode = state.flowNodes.find(n => n.id === edge.to); |
| |
| const edgeEl = document.createElement('div'); |
| edgeEl.className = 'flow-edge'; |
| edgeEl.id = `edge-${edge.from}-${edge.to}`; |
| |
| const dx = toNode.x - fromNode.x; |
| const dy = toNode.y - fromNode.y; |
| const length = Math.sqrt(dx * dx + dy * dy); |
| const angle = Math.atan2(dy, dx) * 180 / Math.PI; |
| |
| edgeEl.style.width = `${length}px`; |
| edgeEl.style.left = `${fromNode.x + 30}px`; |
| edgeEl.style.top = `${fromNode.y + 30}px`; |
| edgeEl.style.transform = `rotate(${angle}deg)`; |
| |
| container.appendChild(edgeEl); |
| }); |
| |
| |
| state.flowNodes.forEach(node => { |
| const nodeEl = document.createElement('div'); |
| nodeEl.className = 'flow-node'; |
| nodeEl.id = `node-${node.id}`; |
| nodeEl.innerHTML = node.icon; |
| nodeEl.style.left = `${node.x}px`; |
| nodeEl.style.top = `${node.y}px`; |
| nodeEl.title = node.label; |
| container.appendChild(nodeEl); |
| }); |
| } |
| |
| function setFlowMode(mode) { |
| state.flowMode = mode; |
| document.querySelectorAll('.component-header .btn-sm').forEach(btn => { |
| btn.classList.remove('active'); |
| }); |
| event.target.classList.add('active'); |
| |
| |
| if (mode === 'parallel') { |
| state.flowNodes[2].y = 30; |
| state.flowNodes[3].y = 110; |
| } else if (mode === 'distributed') { |
| state.flowNodes.forEach((n, i) => { |
| n.y = 30 + (i % 3) * 50; |
| }); |
| } else { |
| state.flowNodes.forEach(n => n.y = 70); |
| } |
| |
| initFlow(); |
| addLog('FLOW', `Switched to ${mode} processing mode`); |
| } |
| |
| function animateFlow() { |
| const nodes = document.querySelectorAll('.flow-node'); |
| const edges = document.querySelectorAll('.flow-edge'); |
| |
| nodes.forEach((node, i) => { |
| setTimeout(() => { |
| node.classList.add('active'); |
| setTimeout(() => node.classList.remove('active'), 500); |
| }, i * 200); |
| }); |
| |
| edges.forEach((edge, i) => { |
| setTimeout(() => { |
| edge.classList.add('active'); |
| setTimeout(() => edge.classList.remove('active'), 500); |
| }, i * 200 + 100); |
| }); |
| } |
| |
| |
| function initMemoryMap() { |
| const container = document.getElementById('memoryMap'); |
| container.innerHTML = ''; |
| state.memoryCells = []; |
| |
| const totalCells = 128; |
| for (let i = 0; i < totalCells; i++) { |
| const cell = document.createElement('div'); |
| cell.className = 'memory-cell'; |
| cell.id = `mem-${i}`; |
| |
| |
| const rand = Math.random(); |
| if (rand > 0.7) cell.classList.add('used'); |
| else if (rand > 0.9) cell.classList.add('system'); |
| |
| cell.title = `Address: 0x${(i * 64).toString(16).padStart(4, '0')}`; |
| container.appendChild(cell); |
| state.memoryCells.push(cell); |
| } |
| } |
| |
| defragmentMemory = () => { |
| addLog('MEMORY', 'Starting defragmentation...'); |
| const used = state.memoryCells.filter(c => c.classList.contains('used')); |
| const free = state.memoryCells.filter(c => !c.classList.contains('used') && !c.classList.contains('system')); |
| |
| |
| let i = 0; |
| const interval = setInterval(() => { |
| if (i >= used.length) { |
| clearInterval(interval); |
| addLog('MEMORY', 'Defragmentation complete', 'success'); |
| return; |
| } |
| |
| const cell = state.memoryCells[i]; |
| cell.classList.remove('used'); |
| cell.classList.add('active'); |
| setTimeout(() => cell.classList.remove('active'), 300); |
| |
| i++; |
| }, 50); |
| }; |
| |
| clearCache = () => { |
| addLog('MEMORY', 'Clearing cache...'); |
| state.memoryCells.forEach((cell, i) => { |
| if (cell.classList.contains('used')) { |
| setTimeout(() => { |
| cell.classList.remove('used'); |
| cell.classList.add('active'); |
| setTimeout(() => cell.classList.remove('active'), 200); |
| }, i * 10); |
| } |
| }); |
| setTimeout(() => addLog('MEMORY', 'Cache cleared', 'success'), 1500); |
| }; |
| |
| |
| function initNeuralNetwork() { |
| const container = document.getElementById('nnContainer'); |
| const svg = document.getElementById('nnConnections'); |
| |
| |
| container.querySelectorAll('.nn-layer').forEach(l => l.remove()); |
| |
| |
| state.nnLayers.forEach((size, layerIdx) => { |
| const layer = document.createElement('div'); |
| layer.className = 'nn-layer'; |
| layer.id = `layer-${layerIdx}`; |
| |
| for (let i = 0; i < size; i++) { |
| const node = document.createElement('div'); |
| node.className = 'nn-node'; |
| node.id = `node-${layerIdx}-${i}`; |
| node.dataset.value = (Math.random() * 2 - 1).toFixed(2); |
| layer.appendChild(node); |
| } |
| |
| container.appendChild(layer); |
| }); |
| |
| |
| drawNNConnections(); |
| } |
| |
| function drawNNConnections() { |
| const svg = document.getElementById('nnConnections'); |
| svg.innerHTML = ''; |
| |
| const layers = document.querySelectorAll('.nn-layer'); |
| |
| for (let i = 0; i < layers.length - 1; i++) { |
| const fromNodes = layers[i].querySelectorAll('.nn-node'); |
| const toNodes = layers[i + 1].querySelectorAll('.nn-node'); |
| |
| fromNodes.forEach(from => { |
| toNodes.forEach(to => { |
| const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); |
| const fromRect = from.getBoundingClientRect(); |
| const toRect = to.getBoundingClientRect(); |
| const containerRect = document.getElementById('nnContainer').getBoundingClientRect(); |
| |
| line.setAttribute('x1', fromRect.left + fromRect.width/2 - containerRect.left); |
| line.setAttribute('y1', fromRect.top + fromRect.height/2 - containerRect.top); |
| line.setAttribute('x2', toRect.left + toRect.width/2 - containerRect.left); |
| line.setAttribute('y2', toRect.top + toRect.height/2 - containerRect.top); |
| line.setAttribute('stroke', 'rgba(0, 212, 255, 0.1)'); |
| line.setAttribute('stroke-width', '1'); |
| |
| svg.appendChild(line); |
| }); |
| }); |
| } |
| } |
| |
| trainNetwork = () => { |
| addLog('NN', 'Starting training epoch...'); |
| const nodes = document.querySelectorAll('.nn-node'); |
| |
| nodes.forEach((node, i) => { |
| setTimeout(() => { |
| node.classList.add('active'); |
| node.dataset.value = (Math.random() * 2 - 1).toFixed(2); |
| setTimeout(() => node.classList.remove('active'), 300); |
| }, i * 30); |
| }); |
| |
| setTimeout(() => { |
| addLog('NN', 'Training complete. Loss: 0.0234', 'success'); |
| }, nodes.length * 30 + 200); |
| }; |
| |
| inferenceNetwork = () => { |
| addLog('NN', 'Running inference...'); |
| const nodes = document.querySelectorAll('.nn-node'); |
| |
| |
| state.nnLayers.forEach((size, layerIdx) => { |
| setTimeout(() => { |
| for (let i = 0; i < size; i++) { |
| const node = document.getElementById(`node-${layerIdx}-${i}`); |
| node.classList.add('active'); |
| setTimeout(() => node.classList.remove('active'), 400); |
| } |
| }, layerIdx * 300); |
| }); |
| |
| setTimeout(() => { |
| const outputs = Array.from({length: state.nnLayers[state.nnLayers.length-1]}, () => |
| (Math.random() * 100).toFixed(1) |
| ); |
| addLog('NN', `Output: [${outputs.join(', ')}]`, 'success'); |
| }, state.nnLayers.length * 300 + 200); |
| }; |
| |
| |
| function initAlgorithm() { |
| const container = document.getElementById('algoContainer'); |
| container.innerHTML = ''; |
| |
| const count = 30; |
| const values = []; |
| for (let i = 0; i < count; i++) { |
| values.push(Math.floor(Math.random() * 100) + 10); |
| } |
| |
| values.forEach((val, i) => { |
| const bar = document.createElement('div'); |
| bar.className = 'algo-bar'; |
| bar.id = `bar-${i}`; |
| bar.style.height = `${val}%`; |
| bar.dataset.value = val; |
| container.appendChild(bar); |
| }); |
| } |
| |
| setAlgorithm = (algo) => { |
| state.algorithm = algo; |
| document.querySelectorAll('.component-header .btn-sm').forEach(btn => { |
| btn.classList.remove('active'); |
| }); |
| event.target.classList.add('active'); |
| |
| addLog('ALGO', `Selected ${algo} algorithm`); |
| initAlgorithm(); |
| }; |
| |
| async function runQuicksort() { |
| const bars = document.querySelectorAll('.algo-bar'); |
| const values = Array.from(bars).map(b => parseInt(b.dataset.value)); |
| |
| async function partition(arr, low, high) { |
| const pivot = arr[high]; |
| bars[high].classList.add('comparing'); |
| let i = low - 1; |
| |
| for (let j = low; j < high; j++) { |
| bars[j].classList.add('comparing'); |
| await new Promise(r => setTimeout(r, 50)); |
| |
| if (arr[j] < pivot) { |
| i++; |
| [arr[i], arr[j]] = [arr[j], arr[i]]; |
| updateBar(i, arr[i]); |
| updateBar(j, arr[j]); |
| } |
| |
| bars[j].classList.remove('comparing'); |
| } |
| |
| [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]; |
| updateBar(i + 1, arr[i + 1]); |
| updateBar(high, arr[high]); |
| bars[high].classList.remove('comparing'); |
| |
| return i + 1; |
| } |
| |
| async function quicksort(arr, low, high) { |
| if (low < high) { |
| const pi = await partition(arr, low, high); |
| await quicksort(arr, low, pi - 1); |
| await quicksort(arr, pi + 1, high); |
| } |
| } |
| |
| await quicksort(values, 0, values.length - 1); |
| |
| bars.forEach(b => b.classList.add('sorted')); |
| addLog('ALGO', 'Quicksort complete', 'success'); |
| } |
| |
| function updateBar(idx, value) { |
| const bar = document.getElementById(`bar-${idx}`); |
| bar.style.height = `${value}%`; |
| bar.dataset.value = value; |
| } |
| |
| |
| function generateQueueItem() { |
| const types = ['image_process', 'data_transform', 'model_inference', 'vectorize', 'tag_generate']; |
| const statuses = ['pending', 'processing', 'processing', 'processing', 'completed']; |
| const type = types[Math.floor(Math.random() * types.length)]; |
| const status = statuses[Math.floor(Math.random() * statuses.length)]; |
| |
| return { |
| id: Math.random().toString(36).substr(2, 9), |
| name: `${type}_${Math.floor(Math.random() * 1000)}`, |
| type, |
| status, |
| progress: status === 'completed' ? 100 : Math.floor(Math.random() * 90), |
| eta: `${Math.floor(Math.random() * 60)}s` |
| }; |
| } |
| |
| function processQueue() { |
| |
| while (state.queue.length < state.queueDepth && Math.random() > 0.3) { |
| state.queue.push(generateQueueItem()); |
| } |
| |
| |
| state.queue.forEach(item => { |
| if (item.status === 'processing') { |
| item.progress = Math.min(100, item.progress + Math.random() * 10); |
| if (item.progress >= 100) { |
| item.status = 'completed'; |
| item.progress = 100; |
| } |
| } |
| }); |
| |
| |
| state.queue = state.queue.filter(item => { |
| if (item.status === 'completed' && Math.random() > 0.7) { |
| return false; |
| } |
| return true; |
| }); |
| |
| renderQueue(); |
| } |
| |
| function renderQueue() { |
| const container = document.getElementById('queueList'); |
| document.getElementById('queueCount').textContent = `${state.queue.length} items`; |
| |
| container.innerHTML = state.queue.slice(0, 10).map(item => ` |
| <div class="queue-item ${item.status}"> |
| <div class="queue-status ${item.status}"></div> |
| <div class="queue-info"> |
| <div class="queue-name">${item.name}</div> |
| <div class="queue-meta">${item.type} • ETA: ${item.eta}</div> |
| </div> |
| <div class="queue-progress"> |
| <div class="queue-progress-bar" style="width: ${item.progress}%"></div> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| |
| function updateMetrics() { |
| state.throughput = Math.floor(Math.random() * 500 + 100); |
| state.latency = Math.floor(Math.random() * 50 + 10); |
| state.efficiency = Math.floor(Math.random() * 20 + 80); |
| |
| document.getElementById('metricThroughput').textContent = state.throughput; |
| document.getElementById('metricLatency').textContent = state.latency; |
| document.getElementById('metricEfficiency').textContent = state.efficiency + '%'; |
| |
| |
| if (Math.random() > 0.5) animateFlow(); |
| |
| |
| const randomCell = state.memoryCells[Math.floor(Math.random() * state.memoryCells.length)]; |
| if (randomCell && !randomCell.classList.contains('system')) { |
| randomCell.classList.add('active'); |
| setTimeout(() => randomCell.classList.remove('active'), 500); |
| } |
| } |
| |
| |
| function addLog(type, message, level = 'info') { |
| const log = { |
| time: new Date().toLocaleTimeString(), |
| type, |
| message, |
| level |
| }; |
| state.logs.push(log); |
| if (state.logs.length > 100) state.logs.shift(); |
| |
| const container = document.getElementById('terminal'); |
| const line = document.createElement('div'); |
| line.className = 'terminal-line'; |
| line.innerHTML = ` |
| <span class="terminal-time">${log.time}</span> |
| <span class="terminal-type">[${log.type}]</span> |
| <span class="terminal-msg ${log.level}">${log.message}</span> |
| `; |
| container.appendChild(line); |
| container.scrollTop = container.scrollHeight; |
| } |
| |
| clearTerminal = () => { |
| document.getElementById('terminal').innerHTML = ''; |
| state.logs = []; |
| }; |
| |
| exportLogs = () => { |
| const blob = new Blob([JSON.stringify(state.logs, null, 2)], {type: 'application/json'}); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = `system-logs-${Date.now()}.json`; |
| a.click(); |
| }; |
| |
| |
| function initSliders() { |
| document.getElementById('threadSlider').addEventListener('input', (e) => { |
| state.threads = e.target.value; |
| document.getElementById('threadValue').textContent = e.target.value; |
| }); |
| |
| document.getElementById('memorySlider').addEventListener('input', (e) => { |
| state.memory = e.target.value; |
| document.getElementById('memoryValue').textContent = e.target.value; |
| }); |
| |
| document.getElementById('queueSlider').addEventListener('input', (e) => { |
| state.queueDepth = e.target.value; |
| document.getElementById('queueValue').textContent = e.target.value; |
| }); |
| } |
| |
| startSimulation = () => { |
| state.running = true; |
| addLog('SYSTEM', 'Simulation started', 'success'); |
| |
| if (state.algorithm === 'quicksort') { |
| runQuicksort(); |
| } |
| }; |
| |
| pauseSimulation = () => { |
| state.running = false; |
| addLog('SYSTEM', 'Simulation paused'); |
| }; |
| |
| resetSimulation = () => { |
| state.running = false; |
| state.queue = []; |
| state.throughput = 0; |
| state.latency = 0; |
| state.efficiency = 0; |
| state.uptime = 0; |
| initMemoryMap(); |
| initAlgorithm(); |
| initNeuralNetwork(); |
| document.getElementById('metricThroughput').textContent = '0'; |
| document.getElementById('metricLatency').textContent = '0'; |
| document.getElementById('metricEfficiency').textContent = '0%'; |
| addLog('SYSTEM', 'Simulation reset'); |
| }; |
| |
| function updateUptime() { |
| state.uptime++; |
| const hours = Math.floor(state.uptime / 3600).toString().padStart(2, '0'); |
| const minutes = Math.floor((state.uptime % 3600) / 60).toString().padStart(2, '0'); |
| const seconds = (state.uptime % 60).toString().padStart(2, '0'); |
| document.getElementById('uptime').textContent = `${hours}:${minutes}:${seconds}`; |
| } |
| |
| function simulateActivity() { |
| |
| if (Math.random() > 0.7) { |
| const events = [ |
| { type: 'PIPELINE', msg: 'Processed batch of 50 images' }, |
| { type: 'NN', msg: 'Forward pass completed in 12ms' }, |
| { type: 'MEMORY', msg: 'Garbage collection triggered' }, |
| { type: 'QUEUE', msg: 'New job queued: vectorize_svg_892' }, |
| { type: 'ALGO', msg: 'Optimization converged at iteration 234' } |
| ]; |
| const event = events[Math.floor(Math.random() * events.length)]; |
| addLog(event.type, event.msg); |
| } |
| } |
| |
| |
| window.addEventListener('load', init); |
| window.addEventListener('resize', () => { |
| setTimeout(drawNNConnections, 100); |
| }); |
| </script> |
| </body> |
| </html> |
| <script data-huggingchat-badge="script"> |
| (function () { |
| try { |
| if (document.querySelector("[data-huggingchat-badge]:not(script)")) return; |
| var host = document.createElement("div"); |
| host.setAttribute("data-huggingchat-badge", ""); |
| var styles = [["all","initial"],["position","fixed"],["right","12px"],["bottom","12px"],["z-index","2147483647"],["display","block"],["visibility","visible"],["opacity","1"],["pointer-events","auto"],["width","auto"],["height","auto"],["margin","0"],["padding","0"],["max-width","none"],["max-height","none"],["transform","none"],["filter","none"],["clip-path","none"],["color-scheme","light"]]; |
| for (var i = 0; i < styles.length; i++) { |
| host.style.setProperty(styles[i][0], styles[i][1], "important"); |
| } |
| host.attachShadow({ mode: "closed" }).innerHTML = "<style>\n:host { all: initial; }\na {\n display: flex;\n align-items: center;\n gap: 5px;\n box-sizing: border-box;\n height: 26px;\n padding: 0 9px 0 7px;\n border-radius: 999px;\n border: 1px solid rgba(0, 0, 0, 0.07);\n background: rgba(255, 255, 255, 0.92);\n -webkit-backdrop-filter: saturate(180%) blur(8px);\n backdrop-filter: saturate(180%) blur(8px);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);\n color: #111827;\n font: 500 11px/1 ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n letter-spacing: 0.01em;\n text-decoration: none;\n white-space: nowrap;\n opacity: 0.72;\n transition: opacity 0.15s ease, transform 0.15s ease;\n}\na:hover, a:focus-visible { opacity: 1; transform: translateY(-1px); }\nsvg { width: 14px; height: 14px; flex: none; }\n@media print { a { display: none; } }\n<\/style><a href=\"https://huggingface.co/chat\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"><svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M16.0006 25.9992C13.8266 25.999 11.7118 25.2901 9.97686 23.9799C8.2419 22.6698 6.98127 20.8298 6.38599 18.7388C5.79071 16.6478 5.89323 14.4198 6.678 12.3923C7.46278 10.3648 8.88705 8.64837 10.735 7.50308C12.5829 6.35779 14.7538 5.84606 16.9187 6.04544C19.0837 6.24481 21.1246 7.14442 22.7323 8.60795C24.34 10.0715 25.4268 12.0192 25.8281 14.1559C26.2293 16.2926 25.9232 18.5019 24.9561 20.449C24.7703 20.8042 24.7223 21.2155 24.8211 21.604L25.4211 23.8316C25.4803 24.0518 25.4805 24.2837 25.4216 24.5039C25.3627 24.7242 25.2468 24.925 25.0856 25.0862C24.9244 25.2474 24.7235 25.3633 24.5033 25.4222C24.283 25.4811 24.0512 25.4809 23.831 25.4217L21.6034 24.8217C21.2172 24.7248 20.809 24.7729 20.4558 24.9567C19.0683 25.6467 17.5457 26.0068 16.0006 26.0068V25.9992Z\" fill=\"currentColor\"/><path d=\"M9.62598 16.0013C9.62598 15.3799 10.1294 14.8765 10.7508 14.8765C11.3721 14.8765 11.8756 15.3799 11.8756 16.0013C11.8756 17.0953 12.3102 18.1448 13.0838 18.9184C13.8574 19.692 14.9069 20.1266 16.001 20.1267C17.095 20.1267 18.1445 19.692 18.9181 18.9184C19.6918 18.1448 20.1264 17.0953 20.1264 16.0013C20.1264 15.3799 20.6299 14.8765 21.2512 14.8765C21.8725 14.8765 22.3759 15.3799 22.3759 16.0013C22.3759 17.6921 21.7046 19.3137 20.509 20.5093C19.3134 21.7049 17.6918 22.3762 16.001 22.3762C14.3102 22.3762 12.6885 21.7049 11.4929 20.5093C10.2974 19.3137 9.62598 17.6921 9.62598 16.0013Z\" fill=\"#fff\"/><\/svg><span>Made with HuggingChat<\/span><\/a>"; |
| function attach() { |
| var parent = document.body || document.documentElement; |
| if (parent && host.parentNode !== parent) parent.appendChild(host); |
| } |
| attach(); |
| |
| if (document.body && typeof MutationObserver === "function") { |
| new MutationObserver(attach).observe(document.body, { childList: true }); |
| } else { |
| document.addEventListener("DOMContentLoaded", attach); |
| } |
| } catch (e) {} |
| })(); |
| </script> |
|
|
