Download index.html from MCAtilla/atillaermanadaptivequantizationcore-supportapi: direct link, hf CLI and curl.
- Browser
- Download file 56.1 kB
-
https://huggingface.co/spaces/MCAtilla/atillaermanadaptivequantizationcore-supportapi/resolve/main/index.html
- Command line
-
hf download hf://spaces/MCAtilla/atillaermanadaptivequantizationcore-supportapi/index.html
-
curl -L -o index.html https://huggingface.co/spaces/MCAtilla/atillaermanadaptivequantizationcore-supportapi/resolve/main/index.html
56.1 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ErmanQuant - Advanced Decentralized Quantization</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> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5, #7c3aed); | |
| background-attachment: fixed; | |
| } | |
| .erman-signature { | |
| font-family: 'Brush Script MT', cursive; | |
| color: #7c3aed; | |
| font-weight: bold; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .watermark { | |
| position: fixed; | |
| opacity: 0.05; | |
| font-size: 80px; | |
| color: #4f46e5; | |
| pointer-events: none; | |
| z-index: 9999; | |
| font-family: 'Brush Script MT', cursive; | |
| font-weight: bold; | |
| transform: rotate(-15deg); | |
| } | |
| .quantization-visualization { | |
| height: 250px; | |
| background: linear-gradient(180deg, #f9fafb, #f3f4f6); | |
| position: relative; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .quant-level { | |
| position: absolute; | |
| bottom: 0; | |
| width: 20px; | |
| transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); | |
| border-radius: 8px 8px 0 0; | |
| } | |
| .module-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(79, 70, 229, 0.15); | |
| border-left-color: #7c3aed; | |
| } | |
| .module-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.05)); | |
| z-index: 0; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| transition: width 0.6s ease; | |
| border-radius: 4px; | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.8s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .agent-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } | |
| } | |
| .quantization-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); | |
| gap: 2px; | |
| height: 200px; | |
| } | |
| .quant-cell { | |
| background-color: #e0e7ff; | |
| transition: all 0.3s ease; | |
| border-radius: 2px; | |
| } | |
| .floating-agent { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .roman-watermark { | |
| position: absolute; | |
| font-family: 'Times New Roman', serif; | |
| font-style: italic; | |
| color: rgba(79, 70, 229, 0.05); | |
| font-size: 120px; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <!-- Dynamic Watermarks --> | |
| <div class="watermark" style="top: 20%; left: 10%;">Atilla Erman</div> | |
| <div class="watermark" style="top: 60%; left: 70%;">DeepQuant</div> | |
| <div class="watermark" style="top: 30%; right: 15%;">Roman Erman</div> | |
| <!-- Roman Watermark --> | |
| <div class="roman-watermark" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">QUANTUM</div> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Enhanced Header --> | |
| <header class="gradient-bg text-white shadow-xl"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-atom text-4xl text-white floating-agent"></i> | |
| <div class="absolute -inset-1 rounded-full bg-indigo-500 opacity-20 blur"></div> | |
| </div> | |
| <div> | |
| <h1 class="text-3xl font-bold">ErmanQuant</h1> | |
| <p class="text-indigo-200">Decentralized Adaptive Quantization System</p> | |
| </div> | |
| <span class="erman-signature text-lg ml-2">by Atilla Erman</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-5 py-2.5 bg-white/10 backdrop-blur-sm text-white rounded-xl font-medium hover:bg-white/20 transition-all border border-white/20 flex items-center"> | |
| <i class="fas fa-download mr-2"></i>Export | |
| </button> | |
| <button class="px-5 py-2.5 bg-white text-indigo-700 rounded-xl font-medium hover:bg-gray-100 transition-all flex items-center shadow-lg"> | |
| <i class="fas fa-cog mr-2"></i>Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Sidebar Modules --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Quantization Modules Card --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-5 flex items-center"> | |
| <i class="fas fa-cubes mr-2 text-indigo-500"></i> | |
| <span>Quantization Modules</span> | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="module-card bg-gray-50/50 p-4 rounded-xl cursor-pointer" onclick="showTab('quantization')"> | |
| <div class="flex items-center relative z-10"> | |
| <div class="w-12 h-12 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600 shadow-sm"> | |
| <i class="fas fa-sliders-h text-lg"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-800">Quantization Core</h3> | |
| <p class="text-sm text-gray-500">4/8/16 bit adaptive</p> | |
| <p class="text-xs text-indigo-400 erman-signature">Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-gray-50/50 p-4 rounded-xl cursor-pointer" onclick="showTab('error-correction')"> | |
| <div class="flex items-center relative z-10"> | |
| <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center text-green-600 shadow-sm"> | |
| <i class="fas fa-shield-alt text-lg"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-800">Error Correction</h3> | |
| <p class="text-sm text-gray-500">DeepSeek R1 Agents</p> | |
| <p class="text-xs text-green-400 erman-signature">Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-gray-50/50 p-4 rounded-xl cursor-pointer" onclick="showTab('cooling')"> | |
| <div class="flex items-center relative z-10"> | |
| <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center text-purple-600 shadow-sm"> | |
| <i class="fas fa-snowflake text-lg"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-800">Cooling API</h3> | |
| <p class="text-sm text-gray-500">Thermal optimization</p> | |
| <p class="text-xs text-purple-400 erman-signature">Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-gray-50/50 p-4 rounded-xl cursor-pointer" onclick="showTab('styling')"> | |
| <div class="flex items-center relative z-10"> | |
| <div class="w-12 h-12 rounded-xl bg-yellow-100 flex items-center justify-center text-yellow-600 shadow-sm"> | |
| <i class="fas fa-palette text-lg"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-800">Styling API</h3> | |
| <p class="text-sm text-gray-500">Visual customization</p> | |
| <p class="text-xs text-yellow-500 erman-signature">Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-card bg-gray-50/50 p-4 rounded-xl cursor-pointer" onclick="showTab('validation')"> | |
| <div class="flex items-center relative z-10"> | |
| <div class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center text-red-600 shadow-sm"> | |
| <i class="fas fa-check-double text-lg"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-800">Validation API</h3> | |
| <p class="text-sm text-gray-500">Quality assurance</p> | |
| <p class="text-xs text-red-400 erman-signature">Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Status Card --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-5 flex items-center"> | |
| <i class="fas fa-heartbeat mr-2 text-indigo-500"></i> | |
| <span>System Status</span> | |
| </h2> | |
| <div class="space-y-5"> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-microchip mr-1 text-indigo-400"></i> | |
| Processing Power | |
| </span> | |
| <span id="cpu-usage" class="font-medium">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="cpu-bar" class="progress-bar bg-indigo-500 rounded-full h-2.5" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-memory mr-1 text-purple-400"></i> | |
| Memory Usage | |
| </span> | |
| <span id="memory-usage" class="font-medium">32%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="memory-bar" class="progress-bar bg-purple-500 rounded-full h-2.5" style="width: 32%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-robot mr-1 text-green-400"></i> | |
| Agent Coordination | |
| </span> | |
| <span id="agent-status" class="font-medium">Active</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="agent-bar" class="progress-bar bg-green-500 rounded-full h-2.5" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-bolt mr-1 text-yellow-400"></i> | |
| Quantization Efficiency | |
| </span> | |
| <span id="quant-efficiency" class="font-medium">87%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="quant-bar" class="progress-bar bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full h-2.5" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-right mt-3 text-gray-400 erman-signature">System by Atilla Erman</p> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100"> | |
| <!-- Enhanced Tab Navigation --> | |
| <div class="flex border-b border-gray-200"> | |
| <button class="px-5 py-3.5 font-medium text-gray-600 hover:text-indigo-700 focus:outline-none border-b-2 border-transparent hover:border-indigo-300 transition-all flex items-center" onclick="showTab('quantization')"> | |
| <i class="fas fa-sliders-h mr-2"></i> Quantization | |
| </button> | |
| <button class="px-5 py-3.5 font-medium text-gray-600 hover:text-green-700 focus:outline-none border-b-2 border-transparent hover:border-green-300 transition-all flex items-center" onclick="showTab('error-correction')"> | |
| <i class="fas fa-shield-alt mr-2"></i> Error Correction | |
| </button> | |
| <button class="px-5 py-3.5 font-medium text-gray-600 hover:text-purple-700 focus:outline-none border-b-2 border-transparent hover:border-purple-300 transition-all flex items-center" onclick="showTab('cooling')"> | |
| <i class="fas fa-snowflake mr-2"></i> Cooling API | |
| </button> | |
| <button class="px-5 py-3.5 font-medium text-gray-600 hover:text-yellow-700 focus:outline-none border-b-2 border-transparent hover:border-yellow-300 transition-all flex items-center" onclick="showTab('styling')"> | |
| <i class="fas fa-palette mr-2"></i> Styling API | |
| </button> | |
| <button class="px-5 py-3.5 font-medium text-gray-600 hover:text-red-700 focus:outline-none border-b-2 border-transparent hover:border-red-300 transition-all flex items-center" onclick="showTab('validation')"> | |
| <i class="fas fa-check-double mr-2"></i> Validation | |
| </button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="p-6"> | |
| <!-- Quantization Tab --> | |
| <div id="quantization" class="tab-content active"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"> | |
| <span>Adaptive Quantization Core</span> | |
| <span class="text-sm font-normal erman-signature ml-3">by Atilla Erman</span> | |
| </h2> | |
| <p class="text-gray-500 mb-6">Advanced decentralized quantization with dynamic bit-depth adaptation and harmonic rounding algorithms.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Quantization Level</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio text-indigo-600 border-2 border-gray-300" name="quant-level" value="4" checked> | |
| <span class="ml-2 font-medium">4-bit</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio text-indigo-600 border-2 border-gray-300" name="quant-level" value="8"> | |
| <span class="ml-2 font-medium">8-bit</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio text-indigo-600 border-2 border-gray-300" name="quant-level" value="16"> | |
| <span class="ml-2 font-medium">16-bit</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Adaptation Strategy</label> | |
| <select class="block w-full px-4 py-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"> | |
| <option>Dynamic Range</option> | |
| <option>Entropy-Based</option> | |
| <option selected>Neural Network Guided</option> | |
| <option>Hybrid Approach</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Input Data</label> | |
| <textarea class="block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="5" placeholder="Paste your data here or upload a file..."></textarea> | |
| <div class="mt-3 flex justify-between"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-xl text-sm hover:bg-gray-200 transition-all flex items-center"> | |
| <i class="fas fa-upload mr-2"></i> Upload File | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-xl text-sm hover:bg-indigo-200 transition-all flex items-center" onclick="generateSampleData()"> | |
| <i class="fas fa-random mr-2"></i> Generate Sample | |
| </button> | |
| </div> | |
| </div> | |
| <div class="quantization-visualization rounded-xl mb-6 relative" id="quant-vis"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-400">Visualization will appear here</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-all flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| <button class="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl font-medium hover:opacity-90 transition-all shadow-lg flex items-center" onclick="runQuantization()"> | |
| <i class="fas fa-play mr-2"></i> Run Quantization | |
| </button> | |
| </div> | |
| <p class="text-xs text-right mt-3 text-gray-400 erman-signature">Quantization algorithm by Atilla Erman</p> | |
| </div> | |
| <!-- Error Correction Tab --> | |
| <div id="error-correction" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"> | |
| <span>DeepSeek R1 Error Correction</span> | |
| <span class="text-sm font-normal erman-signature ml-3">by Atilla Erman</span> | |
| </h2> | |
| <p class="text-gray-500 mb-6">Decentralized error prediction and correction with adaptive neural networks.</p> | |
| <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-green-500 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-green-700"> | |
| The DeepSeek R1 agents use decentralized adaptive algorithms to predict and correct quantization errors before they occur, with enhanced stability and efficiency. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Correction Intensity</label> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="correction-intensity"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-2"> | |
| <span>Light</span> | |
| <span>Moderate</span> | |
| <span>Aggressive</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Agent Coordination</label> | |
| <select class="block w-full px-4 py-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white"> | |
| <option>Independent</option> | |
| <option>Loosely Coupled</option> | |
| <option selected>Tightly Synchronized</option> | |
| <option>Hierarchical</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Error Patterns</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-green-600 border-2 border-gray-300 rounded" checked> | |
| <span class="ml-2 font-medium">Round-off</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-green-600 border-2 border-gray-300 rounded" checked> | |
| <span class="ml-2 font-medium">Truncation</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-green-600 border-2 border-gray-300 rounded"> | |
| <span class="ml-2 font-medium">Overflow</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-green-600 border-2 border-gray-300 rounded" checked> | |
| <span class="ml-2 font-medium">Underflow</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-all flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| <button class="px-5 py-2.5 bg-gradient-to-r from-green-600 to-teal-600 text-white rounded-xl font-medium hover:opacity-90 transition-all shadow-lg flex items-center"> | |
| <i class="fas fa-shield-alt mr-2"></i> Apply Correction | |
| </button> | |
| </div> | |
| <p class="text-xs text-right mt-3 text-gray-400 erman-signature">Error correction system by Atilla Erman</p> | |
| </div> | |
| <!-- Cooling API Tab --> | |
| <div id="cooling" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"> | |
| <span>Thermal Optimization API</span> | |
| <span class="text-sm font-normal erman-signature ml-3">by Atilla Erman</span> | |
| </h2> | |
| <p class="text-gray-500 mb-6">Dynamic thermal management with predictive cooling algorithms.</p> | |
| <div class="bg-purple-50 border-l-4 border-purple-500 p-4 mb-6 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-snowflake text-purple-500 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-purple-700"> | |
| The Cooling API dynamically adjusts quantization parameters to minimize thermal output while maintaining quality thresholds with enhanced stability. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Thermal Threshold</label> | |
| <div class="flex items-center"> | |
| <input type="range" min="30" max="100" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer mr-4" id="thermal-threshold"> | |
| <span class="text-xl font-medium text-purple-600" id="threshold-value">70°C</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Cooling Strategy</label> | |
| <select class="block w-full px-4 py-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white"> | |
| <option>Gradual Reduction</option> | |
| <option>Step Reduction</option> | |
| <option selected>Adaptive Scaling</option> | |
| <option>Neural Predictive</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Current Thermal Profile</label> | |
| <div class="bg-gray-100 p-4 rounded-xl"> | |
| <div class="flex justify-between text-xs text-gray-600 mb-2"> | |
| <span class="font-medium">CPU: 62°C</span> | |
| <span class="font-medium">GPU: 58°C</span> | |
| <span class="font-medium">Memory: 45°C</span> | |
| <span class="font-medium">Storage: 38°C</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>30°C</span> | |
| <span>65°C</span> | |
| <span>100°C</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-all flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| <button class="px-5 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl font-medium hover:opacity-90 transition-all shadow-lg flex items-center"> | |
| <i class="fas fa-snowflake mr-2"></i> Optimize Cooling | |
| </button> | |
| </div> | |
| <p class="text-xs text-right mt-3 text-gray-400 erman-signature">Thermal algorithms by Atilla Erman</p> | |
| </div> | |
| <!-- Styling API Tab --> | |
| <div id="styling" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"> | |
| <span>Visual Styling API</span> | |
| <span class="text-sm font-normal erman-signature ml-3">by Atilla Erman</span> | |
| </h2> | |
| <p class="text-gray-500 mb-6">Customize the visual representation with harmonic color schemes.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-6 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-palette text-yellow-500 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| Customize the visual representation of quantization results for different applications and presentation needs with enhanced aesthetics. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Color Scheme</label> | |
| <div class="flex space-x-3"> | |
| <div class="w-10 h-10 rounded-xl bg-blue-500 cursor-pointer border-2 border-white shadow-md hover:scale-110 transition-transform" onclick="setColorScheme('blue')" title="Blue Theme"></div> | |
| <div class="w-10 h-10 rounded-xl bg-purple-500 cursor-pointer border-2 border-white shadow-md hover:scale-110 transition-transform" onclick="setColorScheme('purple')" title="Purple Theme"></div> | |
| <div class="w-10 h-10 rounded-xl bg-green-500 cursor-pointer border-2 border-white shadow-md hover:scale-110 transition-transform" onclick="setColorScheme('green')" title="Green Theme"></div> | |
| <div class="w-10 h-10 rounded-xl bg-red-500 cursor-pointer border-2 border-white shadow-md hover:scale-110 transition-transform" onclick="setColorScheme('red')" title="Red Theme"></div> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-r from-blue-400 to-purple-600 cursor-pointer border-2 border-white shadow-md hover:scale-110 transition-transform" onclick="setColorScheme('gradient')" title="Gradient Theme"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Visualization Style</label> | |
| <select class="block w-full px-4 py-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white" id="vis-style"> | |
| <option>Bar Chart</option> | |
| <option>Waveform</option> | |
| <option selected>Scatter Plot</option> | |
| <option>Heatmap</option> | |
| <option>3D Surface</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Preview</label> | |
| <div class="bg-gray-100 p-4 rounded-xl flex justify-center"> | |
| <div id="style-preview" class="w-full h-40 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg"> | |
| Visualization Preview | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-all flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| <button class="px-5 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-xl font-medium hover:opacity-90 transition-all shadow-lg flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Apply Style | |
| </button> | |
| </div> | |
| <p class="text-xs text-right mt-3 text-gray-400 erman-signature">UI design by Atilla Erman</p> | |
| </div> | |
| <!-- Validation API Tab --> | |
| <div id="validation" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"> | |
| <span>Quantization Validation</span> | |
| <span class="text-sm font-normal erman-signature ml-3">by Atilla Erman</span> | |
| </h2> | |
| <p class="text-gray-500 mb-6">Comprehensive quality assurance with harmonic validation metrics.</p> | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-double text-red-500 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-red-700"> | |
| The Validation API automatically checks quantization results against quality metrics and suggests corrections with enhanced precision. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Validation Strictness</label> | |
| <input type="range" min="0" max="100" value="60" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="validation-strictness"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-2"> | |
| <span>Lenient</span> | |
| <span>Balanced</span> | |
| <span>Strict</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Auto-Correction</label> | |
| <select class="block w-full px-4 py-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 bg-white"> | |
| <option>Disabled</option> | |
| <option>Suggest Only</option> | |
| <option selected>Apply Minor Fixes</option> | |
| <option>Full Auto-Correction</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Quality Metrics</label> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Signal-to-Noise Ratio</span> | |
| <span class="text-sm font-medium text-green-600">42 dB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 84%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Information Loss</span> | |
| <span class="text-sm font-medium text-yellow-600">12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Compression Efficiency</span> | |
| <span class="text-sm font-medium text-blue-600">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-500 h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium">Harmonic Stability</span> | |
| <span class="text-sm font-medium text-purple-600">91%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 91%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-all flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| <button class="px-5 py-2.5 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-xl font-medium hover:opacity-90 transition-all shadow-lg flex items-center"> | |
| <i class="fas fa-check-double mr-2"></i> Run Validation | |
| </button> | |
| </div> | |
| <p class="text-xs text-right mt-3 text-gray-400 erman-signature">Validation system by Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Enhanced Agent Coordination Panel --> | |
| <div class="bg-white rounded-2xl shadow-lg mt-8 p-6 border border-gray-100"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-5 flex items-center"> | |
| <i class="fas fa-network-wired mr-2 text-indigo-500"></i> | |
| <span>Agent Coordination Dashboard</span> | |
| <span class="text-sm font-normal erman-signature ml-3">by Atilla Erman</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-5"> | |
| <div class="bg-indigo-50 p-5 rounded-xl border border-indigo-100 relative overflow-hidden"> | |
| <div class="absolute -right-5 -top-5 w-20 h-20 rounded-full bg-indigo-100 opacity-30"></div> | |
| <div class="flex items-center mb-3 relative z-10"> | |
| <div class="w-4 h-4 rounded-full bg-indigo-500 mr-2 agent-pulse"></div> | |
| <span class="text-sm font-medium">Quantization Agent</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mb-3 relative z-10"> | |
| Status: <span class="font-medium text-green-600">Active</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 relative z-10"> | |
| <div class="bg-indigo-500 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between relative z-10"> | |
| <span>0%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-5 rounded-xl border border-green-100 relative overflow-hidden"> | |
| <div class="absolute -right-5 -top-5 w-20 h-20 rounded-full bg-green-100 opacity-30"></div> | |
| <div class="flex items-center mb-3 relative z-10"> | |
| <div class="w-4 h-4 rounded-full bg-green-500 mr-2 agent-pulse"></div> | |
| <span class="text-sm font-medium">Error Correction</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mb-3 relative z-10"> | |
| Status: <span class="font-medium text-green-600">Active</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 relative z-10"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between relative z-10"> | |
| <span>0%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 p-5 rounded-xl border border-purple-100 relative overflow-hidden"> | |
| <div class="absolute -right-5 -top-5 w-20 h-20 rounded-full bg-purple-100 opacity-30"></div> | |
| <div class="flex items-center mb-3 relative z-10"> | |
| <div class="w-4 h-4 rounded-full bg-purple-500 mr-2 agent-pulse"></div> | |
| <span class="text-sm font-medium">Validation Agent</span> | |
| </div> | |
| <div class="text-xs text-gray-600 mb-3 relative z-10"> | |
| Status: <span class="font-medium text-yellow-600">Standby</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 relative z-10"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between relative z-10"> | |
| <span>0%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button class="px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl font-medium hover:opacity-90 transition-all shadow-lg flex items-center" onclick="coordinateAgents()"> | |
| <i class="fas fa-random mr-2"></i> Coordinate Agents | |
| </button> | |
| </div> | |
| <p class="text-xs text-right mt-4 text-gray-400 erman-signature">Agent system by Atilla Erman</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-atom text-indigo-500 text-xl"></i> | |
| <span class="text-lg font-semibold">ErmanQuant</span> | |
| <span class="text-xs text-gray-400 erman-signature">by Atilla Erman</span> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| © 2023 Atilla Erman Development. All rights reserved. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| function showTab(tabId) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show the selected tab | |
| document.getElementById(tabId).classList.add('active'); | |
| // Update tab navigation styling | |
| document.querySelectorAll('.flex.border-b button').forEach(btn => { | |
| btn.classList.remove('border-indigo-500', 'text-indigo-700'); | |
| btn.classList.add('border-transparent'); | |
| }); | |
| // Style the active tab button | |
| const activeBtn = Array.from(document.querySelectorAll('.flex.border-b button')).find(btn => | |
| btn.getAttribute('onclick').includes(tabId) | |
| ); | |
| if (activeBtn) { | |
| activeBtn.classList.add('border-indigo-500', 'text-indigo-700'); | |
| activeBtn.classList.remove('border-transparent'); | |
| } | |
| } | |
| // Initialize with quantization tab shown | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showTab('quantization'); | |
| generateQuantizationVisualization(); | |
| // Update thermal threshold display | |
| document.getElementById('thermal-threshold').addEventListener('input', function() { | |
| document.getElementById('threshold-value').textContent = this.value + '°C'; | |
| }); | |
| // Simulate system status changes | |
| simulateSystemStatus(); | |
| // Create floating agents animation | |
| animateFloatingAgents(); | |
| // Initialize Roman watermark | |
| initRomanWatermark(); | |
| }); | |
| // Generate quantization visualization | |
| function generateQuantizationVisualization() { | |
| const container = document.getElementById('quant-vis'); | |
| container.innerHTML = ''; | |
| // Create grid background | |
| const grid = document.createElement('div'); | |
| grid.className = 'quantization-grid absolute inset-0'; | |
| grid.style.gridTemplateColumns = 'repeat(40, 1fr)'; | |
| // Add grid cells | |
| for (let i = 0; i < 800; i++) { | |
| const cell = document.createElement('div'); | |
| cell.className = 'quant-cell'; | |
| grid.appendChild(cell); | |
| } | |
| container.appendChild(grid); | |
| // Generate random levels for visualization | |
| for (let i = 0; i < 40; i++) { | |
| const level = document.createElement('div'); | |
| level.className = 'quant-level bg-indigo-500'; | |
| level.style.left = (i * 25) + 'px'; | |
| level.style.height = (Math.random() * 200 + 30) + 'px'; | |
| level.style.transitionDelay = (i * 0.05) + 's'; | |
| container.appendChild(level); | |
| } | |
| } | |
| // Run quantization simulation | |
| function runQuantization() { | |
| // Show loading state | |
| const runBtn = document.querySelector('#quantization button.bg-gradient-to-r'); | |
| const originalText = runBtn.innerHTML; | |
| runBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; | |
| runBtn.classList.add('opacity-75'); | |
| // Update efficiency meter | |
| animateProgressBar('quant-bar', 95, 2000); | |
| // Simulate processing delay | |
| setTimeout(() => { | |
| // Update visualization | |
| const levels = document.querySelectorAll('.quant-level'); | |
| const bitDepth = document.querySelector('input[name="quant-level"]:checked').value; | |
| levels.forEach((level, index) => { | |
| const originalHeight = parseInt(level.style.height); | |
| let quantizedHeight; | |
| if (bitDepth === '4') { | |
| // Coarse quantization for 4-bit | |
| quantizedHeight = Math.round(originalHeight / 50) * 50; | |
| } else if (bitDepth === '8') { | |
| // Medium quantization for 8-bit | |
| quantizedHeight = Math.round(originalHeight / 20) * 20; | |
| } else { | |
| // Fine quantization for 16-bit | |
| quantizedHeight = Math.round(originalHeight / 5) * 5; | |
| } | |
| // Apply harmonic rounding for smoother transitions | |
| setTimeout(() => { | |
| level.style.height = quantizedHeight + 'px'; | |
| level.classList.remove('bg-indigo-500'); | |
| level.classList.add('bg-purple-500'); | |
| }, index * 30); | |
| }); | |
| // Update grid cells to show quantization effect | |
| const cells = document.querySelectorAll('.quant-cell'); | |
| cells.forEach((cell, index) => { | |
| setTimeout(() => { | |
| const intensity = Math.random() * 0.7 + 0.3; | |
| if (bitDepth === '4') { | |
| cell.style.opacity = intensity > 0.5 ? 1 : 0.3; | |
| } else if (bitDepth === '8') { | |
| cell.style.opacity = intensity; | |
| } else { | |
| cell.style.opacity = intensity * 0.8 + 0.2; | |
| } | |
| }, index % 40 * 10); | |
| }); | |
| // Restore button | |
| setTimeout(() => { | |
| runBtn.innerHTML = originalText; | |
| runBtn.classList.remove('opacity-75'); | |
| // Show success message | |
| showNotification('Quantization completed successfully by Atilla Erman!', 'success'); | |
| }, 1500); | |
| }, 1000); | |
| } | |
| // Generate sample data | |
| function generateSampleData() { | |
| const textarea = document.querySelector('#quantization textarea'); | |
| const sampleData = `Sample data generated by Atilla Erman's algorithm:\n\n`; | |
| let dataPoints = ''; | |
| for (let i = 0; i < 50; i++) { | |
| dataPoints += (Math.sin(i / 3) * 100 + Math.random() * 20 - 10).toFixed(2) + ', '; | |
| if (i % 10 === 9) dataPoints += '\n'; | |
| } | |
| textarea.value = sampleData + dataPoints; | |
| showNotification('Sample data generated successfully', 'info'); | |
| } | |
| // Set color scheme for styling API | |
| function setColorScheme(color) { | |
| const preview = document.getElementById('style-preview'); | |
| preview.className = 'w-full h-40 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg '; | |
| switch(color) { | |
| case 'blue': | |
| preview.classList.add('bg-gradient-to-r', 'from-blue-500', 'to-indigo-600'); | |
| break; | |
| case 'purple': | |
| preview.classList.add('bg-gradient-to-r', 'from-purple-500', 'to-indigo-600'); | |
| break; | |
| case 'green': | |
| preview.classList.add('bg-gradient-to-r', 'from-green-500', 'to-teal-600'); | |
| break; | |
| case 'red': | |
| preview.classList.add('bg-gradient-to-r', 'from-red-500', 'to-pink-600'); | |
| break; | |
| case 'gradient': | |
| preview.classList.add('bg-gradient-to-r', 'from-indigo-500', 'via-purple-500', 'to-pink-500'); | |
| break; | |
| } | |
| } | |
| // Coordinate agents simulation | |
| function coordinateAgents() { | |
| const agentBars = [ | |
| { id: 'agent-bar', target: 95, color: 'bg-green-500' }, | |
| { id: 'cpu-bar', target: 80, color: 'bg-indigo-500' }, | |
| { id: 'memory-bar', target: 65, color: 'bg-purple-500' }, | |
| { id: 'quant-bar', target: 98, color: 'bg-gradient-to-r from-indigo-500 to-purple-500' } | |
| ]; | |
| agentBars.forEach(bar => { | |
| const element = document.getElementById(bar.id); | |
| let currentWidth = parseInt(element.style.width) || 0; | |
| const interval = setInterval(() => { | |
| if (currentWidth >= bar.target) { | |
| clearInterval(interval); | |
| } else { | |
| currentWidth += 1; | |
| element.style.width = currentWidth + '%'; | |
| // Update text displays | |
| if (bar.id === 'cpu-bar') { | |
| document.getElementById('cpu-usage').textContent = currentWidth + '%'; | |
| } else if (bar.id === 'memory-bar') { | |
| document.getElementById('memory-usage').textContent = currentWidth + '%'; | |
| } else if (bar.id === 'agent-bar') { | |
| document.getElementById('agent-status').textContent = | |
| currentWidth > 90 ? 'Optimal' : currentWidth > 70 ? 'Active' : 'Standby'; | |
| } else if (bar.id === 'quant-bar') { | |
| document.getElementById('quant-efficiency').textContent = currentWidth + '%'; | |
| } | |
| } | |
| }, 30); | |
| }); | |
| // Show status message | |
| setTimeout(() => { | |
| showNotification('Agent coordination completed by Atilla Erman! All agents are now synchronized.', 'success'); | |
| }, 3000); | |
| } | |
| // Simulate changing system status | |
| function simulateSystemStatus() { | |
| setInterval(() => { | |
| // Randomly adjust CPU usage | |
| const cpuBar = document.getElementById('cpu-bar'); | |
| let cpuWidth = parseInt(cpuBar.style.width); | |
| cpuWidth = Math.max(20, Math.min(90, cpuWidth + (Math.random() * 6 - 3))); | |
| cpuBar.style.width = cpuWidth + '%'; | |
| document.getElementById('cpu-usage').textContent = Math.round(cpuWidth) + '%'; | |
| // Randomly adjust memory usage | |
| const memoryBar = document.getElementById('memory-bar'); | |
| let memoryWidth = parseInt(memoryBar.style.width); | |
| memoryWidth = Math.max(15, Math.min(85, memoryWidth + (Math.random() * 5 - 2.5))); | |
| memoryBar.style.width = memoryWidth + '%'; | |
| document.getElementById('memory-usage').textContent = Math.round(memoryWidth) + '%'; | |
| // Randomly adjust agent status | |
| const agentBar = document.getElementById('agent-bar'); | |
| let agentWidth = parseInt(agentBar.style.width); | |
| agentWidth = Math.max(30, Math.min(95, agentWidth + (Math.random() * 4 - 2))); | |
| agentBar.style.width = agentWidth + '%'; | |
| document.getElementById('agent-status').textContent = | |
| agentWidth > 85 ? 'Optimal' : agentWidth > 60 ? 'Active' : 'Standby'; | |
| // Randomly adjust quantization efficiency | |
| const quantBar = document.getElementById('quant-bar'); | |
| let quantWidth = parseInt(quantBar.style.width); | |
| quantWidth = Math.max(80, Math.min(99, quantWidth + (Math.random() * 2 - 1))); | |
| quantBar.style.width = quantWidth + '%'; | |
| document.getElementById('quant-efficiency').textContent = Math.round(quantWidth) + '%'; | |
| }, 3000); | |
| } | |
| // Animate progress bar | |
| function animateProgressBar(barId, targetWidth, duration) { | |
| const element = document.getElementById(barId); | |
| let currentWidth = parseInt(element.style.width) || 0; | |
| const increment = (targetWidth - currentWidth) / (duration / 16); | |
| const interval = setInterval(() => { | |
| currentWidth += increment; | |
| if (currentWidth >= targetWidth) { | |
| currentWidth = targetWidth; | |
| clearInterval(interval); | |
| } | |
| element.style.width = currentWidth + '%'; | |
| // Update corresponding text display | |
| if (barId === 'quant-bar') { | |
| document.getElementById('quant-efficiency').textContent = Math.round(currentWidth) + '%'; | |
| } | |
| }, 16); | |
| } | |
| // Show notification | |
| function showNotification(message, type) { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed bottom-5 right-5 px-5 py-3 rounded-xl shadow-lg text-white font-medium z-50 transform transition-all duration-300 translate-x-0 opacity-100 ${ | |
| type === 'success' ? 'bg-green-500' : | |
| type === 'error' ? 'bg-red-500' : 'bg-indigo-500' | |
| }`; | |
| notification.innerHTML = `<i class="fas fa-${ | |
| type === 'success' ? 'check-circle' : | |
| type === 'error' ? 'exclamation-circle' : 'info-circle' | |
| } mr-2"></i> ${message}`; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.classList.add('translate-x-full', 'opacity-0'); | |
| setTimeout(() => notification.remove(), 300); | |
| }, 3000); | |
| } | |
| // Animate floating agents | |
| function animateFloatingAgents() { | |
| const agents = document.querySelectorAll('.floating-agent'); | |
| agents.forEach((agent, index) => { | |
| agent.style.animationDelay = `${index * 0.5}s`; | |
| }); | |
| } | |
| // Initialize Roman watermark | |
| function initRomanWatermark() { | |
| const watermark = document.querySelector('.roman-watermark'); | |
| let opacity = 0.05; | |
| let direction = 0.001; | |
| setInterval(() => { | |
| opacity += direction; | |
| if (opacity > 0.08) direction = -0.001; | |
| if (opacity < 0.03) direction = 0.001; | |
| watermark.style.opacity = opacity; | |
| }, 100); | |
| } | |
| </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=MCAtilla/atillaermanadaptivequantizationcore-supportapi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |