I want you to build a Hugging Face Space called **DeepSite-Termux-App-Builder** with the following full professional features:
9b053c6
verified
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSite-Termux-App-Builder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
| <style> | |
| .rtl { direction: rtl; } | |
| .persian-font { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| .code-block { font-family: 'Fira Code', monospace; } | |
| #connectionGraph, #performanceGraph { height: 300px; } | |
| .log-entry { border-left: 3px solid #3b82f6; } | |
| .error-log { border-left: 3px solid #ef4444; } | |
| .success-log { border-left: 3px solid #10b981; } | |
| .patch-box { border: 1px dashed #f59e0b; background-color: rgba(245, 158, 11, 0.1); } | |
| .dark .patch-box { border-color: #fbbf24; background-color: rgba(251, 191, 36, 0.15); } | |
| .language-selector:hover .language-dropdown { display: block; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-gray-800 shadow-md py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <h1 class="text-xl font-bold">DeepSite-Termux-App-Builder</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="language-selector relative"> | |
| <button class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700"> | |
| <span class="language-flag">🇬🇧</span> | |
| <span>English</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <div class="language-dropdown hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-10"> | |
| <button class="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center space-x-2" onclick="changeLanguage('en')"> | |
| <span>🇬🇧</span> | |
| <span>English</span> | |
| </button> | |
| <button class="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center space-x-2" onclick="changeLanguage('fa')"> | |
| <span>🇮🇷</span> | |
| <span>فارسی</span> | |
| </button> | |
| </div> | |
| </div> | |
| <button id="themeToggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-blue-500 text-white"> | |
| <i data-feather="user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-6"> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Sidebar --> | |
| <aside class="w-full lg:w-64 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4"> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <button onclick="switchTab('chat')" class="tab-button w-full text-left px-4 py-2 rounded-lg flex items-center space-x-3 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200"> | |
| <i data-feather="message-square"></i> | |
| <span class="en">Chat/Code</span> | |
| <span class="fa hidden rtl persian-font">چت/کد</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="switchTab('models')" class="tab-button w-full text-left px-4 py-2 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="cpu"></i> | |
| <span class="en">Models</span> | |
| <span class="fa hidden rtl persian-font">مدلها</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="switchTab('logs')" class="tab-button w-full text-left px-4 py-2 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="terminal"></i> | |
| <span class="en">Logs</span> | |
| <span class="fa hidden rtl persian-font">لاگها</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="switchTab('settings')" class="tab-button w-full text-left px-4 py-2 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="settings"></i> | |
| <span class="en">Settings</span> | |
| <span class="fa hidden rtl persian-font">تنظیمات</span> | |
| </button> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="mt-8"> | |
| <h3 class="font-medium text-gray-500 dark:text-gray-400 mb-2 en">System Status</h3> | |
| <h3 class="font-medium text-gray-500 dark:text-gray-400 mb-2 fa hidden rtl persian-font">وضعیت سیستم</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="en">Termux Connection</span> | |
| <span class="fa hidden rtl persian-font">اتصال ترمکس</span> | |
| <span class="text-green-500 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="en">Active</span> | |
| <span class="fa hidden rtl persian-font">فعال</span> | |
| </span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="en">HF Connection</span> | |
| <span class="fa hidden rtl persian-font">اتصال HF</span> | |
| <span class="text-green-500 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="en">Active</span> | |
| <span class="fa hidden rtl persian-font">فعال</span> | |
| </span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="en">AutoFix Mode</span> | |
| <span class="fa hidden rtl persian-font">حالت رفع خودکار</span> | |
| <span class="text-blue-500 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span> | |
| <span class="en">Enabled</span> | |
| <span class="fa hidden rtl persian-font">فعال</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <div id="miniPerformanceGraph" class="h-32"></div> | |
| </div> | |
| </aside> | |
| <!-- Main Panel --> | |
| <div class="flex-grow bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"> | |
| <!-- Chat/Code Tab --> | |
| <div id="chat" class="tab-content active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold en">Code Generation</h2> | |
| <h2 class="text-xl font-bold fa hidden rtl persian-font">تولید کد</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-green-500 text-white rounded-lg flex items-center space-x-2"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| <span class="en">Run in Termux</span> | |
| <span class="fa hidden rtl persian-font">اجرا در ترمکس</span> | |
| </button> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center space-x-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| <span class="en">Export APK</span> | |
| <span class="fa hidden rtl persian-font">خروجی APK</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2 en">Describe your app requirements:</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">نیازمندیهای برنامه خود را شرح دهید:</label> | |
| <textarea class="w-full h-32 p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700" placeholder="Type here..."></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg en">Clear</button> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg fa hidden rtl persian-font">پاک کردن</button> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg en">Generate Code</button> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg fa hidden rtl persian-font">تولید کد</button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2 en">Generated Code Preview:</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">پیشنمایش کد تولید شده:</label> | |
| <pre class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg overflow-auto max-h-64"><code class="language-python"># Generated code will appear here | |
| import huggingface_hub | |
| from transformers import pipeline | |
| class AppBuilder: | |
| def __init__(self): | |
| self.model = None | |
| def load_model(self, model_name): | |
| self.model = pipeline('text-generation', model=model_name) | |
| def generate_code(self, prompt): | |
| return self.model(prompt, max_length=200)</code></pre> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg en">Refine</button> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg fa hidden rtl persian-font">بهینهسازی</button> | |
| <button class="px-4 py-2 bg-green-500 text-white rounded-lg en">Save to Termux</button> | |
| <button class="px-4 py-2 bg-green-500 text-white rounded-lg fa hidden rtl persian-font">ذخیره در ترمکس</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="patch-box p-4 rounded-lg mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium text-yellow-600 dark:text-yellow-400 en">AutoCode Patch Applied</h3> | |
| <h3 class="font-medium text-yellow-600 dark:text-yellow-400 fa hidden rtl persian-font">پچ کد خودکار اعمال شد</h3> | |
| <span class="text-xs text-gray-500 dark:text-gray-400 en">Just now</span> | |
| <span class="text-xs text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">همین الان</span> | |
| </div> | |
| <pre class="code-block bg-gray-800 text-gray-100 p-3 rounded-lg text-xs overflow-auto"><code class="language-diff">+ Added error handling for model loading | |
| + Improved prompt formatting | |
| + Added requirements.txt auto-generation</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Models Tab --> | |
| <div id="models" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold en">Hugging Face Models</h2> | |
| <h2 class="text-xl font-bold fa hidden rtl persian-font">مدلهای Hugging Face</h2> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center space-x-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| <span class="en">Refresh Models</span> | |
| <span class="fa hidden rtl persian-font">بروزرسانی مدلها</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-bold">DeepSeek-Coder</h3> | |
| <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-1 rounded">Active</span> | |
| </div> | |
| <div class="text-sm text-gray-600 dark:text-gray-300 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="en">Version:</span> | |
| <span class="fa hidden rtl persian-font">نسخه:</span> | |
| <span>1.3.2</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="en">License:</span> | |
| <span class="fa hidden rtl persian-font">مجوز:</span> | |
| <span>Apache 2.0</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="en">Latency:</span> | |
| <span class="fa hidden rtl persian-font">تأخیر:</span> | |
| <span>142ms</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm en">Switch to this model</button> | |
| <button class="w-full mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm fa hidden rtl persian-font">تغییر به این مدل</button> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-bold">CodeLlama</h3> | |
| <span class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded">Available</span> | |
| </div> | |
| <div class="text-sm text-gray-600 dark:text-gray-300 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="en">Version:</span> | |
| <span class="fa hidden rtl persian-font">نسخه:</span> | |
| <span>2.1.0</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="en">License:</span> | |
| <span class="fa hidden rtl persian-font">مجوز:</span> | |
| <span>MIT</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="en">Latency:</span> | |
| <span class="fa hidden rtl persian-font">تأخیر:</span> | |
| <span>210ms</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded text-sm en">Switch to this model</button> | |
| <button class="w-full mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded text-sm fa hidden rtl persian-font">تغییر به این مدل</button> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-bold">StarCoder</h3> | |
| <span class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded">Available</span> | |
| </div> | |
| <div class="text-sm text-gray-600 dark:text-gray-300 mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="en">Version:</span> | |
| <span class="fa hidden rtl persian-font">نسخه:</span> | |
| <span>1.5.3</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="en">License:</span> | |
| <span class="fa hidden rtl persian-font">مجوز:</span> | |
| <span>BigCode OpenRAIL-M</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="en">Latency:</span> | |
| <span class="fa hidden rtl persian-font">تأخیر:</span> | |
| <span>185ms</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded text-sm en">Switch to this model</button> | |
| <button class="w-full mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded text-sm fa hidden rtl persian-font">تغییر به این مدل</button> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600 mb-6"> | |
| <h3 class="font-bold mb-3 en">Neural Network Configuration</h3> | |
| <h3 class="font-bold mb-3 fa hidden rtl persian-font">پیکربندی شبکه عصبی</h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="en">Model Complexity Level</span> | |
| <span class="fa hidden rtl persian-font">سطح پیچیدگی مدل</span> | |
| <span id="complexityValue">Medium</span> | |
| </div> | |
| <input type="range" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer" id="complexitySlider"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span class="en">Light</span> | |
| <span class="fa hidden rtl persian-font">سبک</span> | |
| <span class="en">Medium</span> | |
| <span class="fa hidden rtl persian-font">متوسط</span> | |
| <span class="en">Heavy</span> | |
| <span class="fa hidden rtl persian-font">سنگین</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2 en">Custom Model Path (optional):</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">مسیر مدل سفارشی (اختیاری):</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800" placeholder="user/model-name"> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg en">Apply Settings</button> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg fa hidden rtl persian-font">اعمال تنظیمات</button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <h3 class="font-bold mb-3 en">HF ↔ Termux Connection</h3> | |
| <h3 class="font-bold mb-3 fa hidden rtl persian-font">اتصال HF ↔ ترمکس</h3> | |
| <div id="connectionGraph" class="w-full"></div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <h3 class="font-bold mb-3 en">Neural Network Performance</h3> | |
| <h3 class="font-bold mb-3 fa hidden rtl persian-font">عملکرد شبکه عصبی</h3> | |
| <div id="performanceGraph" class="w-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Logs Tab --> | |
| <div id="logs" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold en">System Logs</h2> | |
| <h2 class="text-xl font-bold fa hidden rtl persian-font">لاگهای سیستم</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center space-x-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| <span class="en">Export Logs</span> | |
| <span class="fa hidden rtl persian-font">خروجی لاگها</span> | |
| </button> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center space-x-2"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| <span class="en">Clear Logs</span> | |
| <span class="fa hidden rtl persian-font">پاک کردن لاگها</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <div class="flex mb-4"> | |
| <button class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 dark:text-blue-400 en">All Logs</button> | |
| <button class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 dark:text-blue-400 fa hidden rtl persian-font">همه لاگها</button> | |
| <button class="px-4 py-2 text-gray-500 dark:text-gray-400 en">Termux</button> | |
| <button class="px-4 py-2 text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">ترمکس</button> | |
| <button class="px-4 py-2 text-gray-500 dark:text-gray-400 en">HF Models</button> | |
| <button class="px-4 py-2 text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">مدلهای HF</button> | |
| <button class="px-4 py-2 text-gray-500 dark:text-gray-400 en">AutoFix</button> | |
| <button class="px-4 py-2 text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">رفع خودکار</button> | |
| </div> | |
| <div class="space-y-3 max-h-96 overflow-y-auto"> | |
| <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">Connected to Termux</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">اتصال به ترمکس برقرار شد</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Just now</p> | |
| </div> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">INFO</span> | |
| </div> | |
| </div> | |
| <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">Model DeepSeek-Coder loaded</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">مدل DeepSeek-Coder بارگذاری شد</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p> | |
| </div> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">INFO</span> | |
| </div> | |
| </div> | |
| <div class="error-log p-3 bg-gray-50 dark:bg-gray-800 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">Missing dependency: transformers==4.30.0</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">وابستگی گمشده: transformers==4.30.0</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p> | |
| </div> | |
| <span class="text-xs bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-1 rounded">ERROR</span> | |
| </div> | |
| </div> | |
| <div class="success-log p-3 bg-gray-50 dark:bg-gray-800 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">AutoFix: Installed transformers==4.30.0</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">رفع خودکار: نصب transformers==4.30.0</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">AUTOFIX</span> | |
| </div> | |
| </div> | |
| <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">Code generation completed</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">تولید کد تکمیل شد</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">8 minutes ago</p> | |
| </div> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">INFO</span> | |
| </div> | |
| </div> | |
| <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">Connected to Hugging Face Hub</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">اتصال به Hugging Face Hub برقرار شد</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</p> | |
| </div> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">INFO</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div id="settings" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold en">Settings</h2> | |
| <h2 class="text-xl font-bold fa hidden rtl persian-font">تنظیمات</h2> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center space-x-2"> | |
| <i data-feather="save" class="w-4 h-4"></i> | |
| <span class="en">Save Settings</span> | |
| <span class="fa hidden rtl persian-font">ذخیره تنظیمات</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <h3 class="font-bold mb-4 en">Application Settings</h3> | |
| <h3 class="font-bold mb-4 fa hidden rtl persian-font">تنظیمات برنامه</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">AutoFix Mode</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">حالت رفع خودکار</label> | |
| <div class="flex items-center space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio" name="autofix" checked> | |
| <span class="ml-2 en">Enabled</span> | |
| <span class="ml-2 fa hidden rtl persian-font">فعال</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio" name="autofix"> | |
| <span class="ml-2 en">Disabled</span> | |
| <span class="ml-2 fa hidden rtl persian-font">غیرفعال</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">Auto-update Libraries</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">بروزرسانی خودکار کتابخانهها</label> | |
| <div class="flex items-center space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio" name="autoupdate" checked> | |
| <span class="ml-2 en">Enabled</span> | |
| <span class="ml-2 fa hidden rtl persian-font">فعال</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio" name="autoupdate"> | |
| <span class="ml-2 en">Disabled</span> | |
| <span class="ml-2 fa hidden rtl persian-font">غیرفعال</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">Default Export Format</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">فرمت پیشفرض خروجی</label> | |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"> | |
| <option class="en">Termux Project</option> | |
| <option class="fa hidden rtl persian-font">پروژه ترمکس</option> | |
| <option class="en">Android APK</option> | |
| <option class="fa hidden rtl persian-font">APK اندروید</option> | |
| <option class="en">Python Script</option> | |
| <option class="fa hidden rtl persian-font">اسکریپت پایتون</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <h3 class="font-bold mb-4 en">Library Management</h3> | |
| <h3 class="font-bold mb-4 fa hidden rtl persian-font">مدیریت کتابخانهها</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium en">transformers</span> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">v4.30.0</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium en">huggingface-hub</span> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">v0.15.1</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium en">torch</span> | |
| <span class="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">v2.0.1 (update available)</span> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| <span class="en">Check for Updates</span> | |
| <span class="fa hidden rtl persian-font">بررسی بروزرسانیها</span> | |
| </button> | |
| <button class="w-full px-4 py-2 bg-green-500 text-white rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| <span class="en">Update All</span> | |
| <span class="fa hidden rtl persian-font">بروزرسانی همه</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <h3 class="font-bold mb-4 en">Advanced Settings</h3> | |
| <h3 class="font-bold mb-4 fa hidden rtl persian-font">تنظیمات پیشرفته</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">Custom Termux Path</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">مسیر سفارشی ترمکس</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800" placeholder="/data/data/com.termux/files/home"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">API Connection Timeout (ms)</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">زمانانتظار اتصال API (میلیثانیه)</label> | |
| <input type="number" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800" value="5000"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">Max Concurrent Processes</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">حداکثر فرآیندهای همزمان</label> | |
| <input type="number" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800" value="4"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2 en">Log Level</label> | |
| <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">سطح لاگگیری</label> | |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"> | |
| <option class="en">Debug</option> | |
| <option class="fa hidden rtl persian-font">اشکالزدایی</option> | |
| <option class="en">Info</option> | |
| <option class="fa hidden rtl persian-font">اطلاعات</option> | |
| <option class="en">Warning</option> | |
| <option class="fa hidden rtl persian-font">هشدار</option> | |
| <option selected class="en">Error</option> | |
| <option selected class="fa hidden rtl persian-font">خطا</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600"> | |
| <h3 class="font-bold mb-4 en">About</h3> | |
| <h3 class="font-bold mb-4 fa hidden rtl persian-font">درباره</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium en">Version:</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">نسخه:</span> | |
| <span class="text-sm">1.2.0</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium en">Last Update:</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">آخرین بروزرسانی:</span> | |
| <span class="text-sm">2023-11-15</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium en">License:</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">مجوز:</span> | |
| <span class="text-sm">MIT</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium en">Developer:</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">توسعهدهنده:</span> | |
| <span class="text-sm">DeepSite Team</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| <span class="en">Check for Application Updates</span> | |
| <span class="fa hidden rtl persian-font">بررسی بروزرسانی برنامه</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white dark:bg-gray-800 py-4 px-6 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-4 mb-4 md:mb-0"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-sm en">DeepSite-Termux-App-Builder © 2023</span> | |
| <span class="text-sm fa hidden rtl persian-font">DeepSite-Termux-App-Builder © ۲۰۲۳</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 en">Documentation</a> | |
| <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 fa hidden rtl persian-font">مستندات</a> | |
| <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 en">Support</a> | |
| <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 fa hidden rtl persian-font">پشتیبانی</a> | |
| <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 en">Privacy Policy</a> | |
| <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 fa hidden rtl persian-font">حریم خصوصی</a> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize components | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Initialize AOS animations | |
| AOS.init(); | |
| // Tab switching functionality | |
| window.switchTab = function(tabId) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(tabId).classList.add('active'); | |
| // Update active tab button style | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.classList.remove('bg-blue-100', 'dark:bg-blue-900', 'text-blue-700', 'dark:text-blue-200'); | |
| button.classList.add('hover:bg-gray-100', 'dark:hover:bg-gray-700'); | |
| }); | |
| // Set active button | |
| const activeButton = document.querySelector(`button[onclick="switchTab('${tabId}')"]`); | |
| activeButton.classList.add('bg-blue-100', 'dark:bg-blue-900', 'text-blue-700', 'dark:text-blue-200'); | |
| activeButton.classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-700'); | |
| }; | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('themeToggle'); | |
| themeToggle.addEventListener('click', function() { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); | |
| feather.replace(); | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| // Language toggle functionality | |
| window.changeLanguage = function(lang) { | |
| if (lang === 'en') { | |
| document.querySelectorAll('.en').forEach(el => el.classList.remove('hidden')); | |
| document.querySelectorAll('.fa').forEach(el => el.classList.add('hidden')); | |
| document.documentElement.setAttribute('dir', 'ltr'); | |
| document.querySelector('.language-flag').textContent = '🇬🇧'; | |
| } else { | |
| document.querySelectorAll('.en').forEach(el => el.classList.add('hidden')); | |
| document.querySelectorAll('.fa').forEach(el => el.classList.remove('hidden')); | |
| document.documentElement.setAttribute('dir', 'rtl'); | |
| document.querySelector('.language-flag').textContent = '🇮🇷'; | |
| } | |
| localStorage.setItem('language', lang); | |
| }; | |
| // Check for saved language preference | |
| if (localStorage.getItem('language') === 'fa') { | |
| changeLanguage('fa'); | |
| } | |
| // Model complexity slider | |
| const complexitySlider = document.getElementById('complexitySlider'); | |
| const complexityValue = document.getElementById('complexityValue'); | |
| complexitySlider.addEventListener('input', function() { | |
| const value = parseInt(this.value); | |
| let text = ''; | |
| if (value === 1) text = 'Very Light'; | |
| else if (value === 2) text = 'Light'; | |
| else if (value === 3) text = 'Medium'; | |
| else if (value === 4) text = 'Heavy'; | |
| else text = 'Very Heavy'; | |
| complexityValue.textContent = text; | |
| }); | |
| // Initialize D3.js graphs | |
| createMiniPerformanceGraph(); | |
| createConnectionGraph(); | |
| createPerformanceGraph(); | |
| // Syntax highlighting | |
| document.querySelectorAll('pre code').forEach((block) => { | |
| hljs.highlightElement(block); | |
| }); | |
| }); | |
| function createMiniPerformanceGraph() { | |
| const data = Array.from({length: 20}, (_, i) => Math.random() * 100); | |
| const svg = d3.select("#miniPerformanceGraph") | |
| .append("svg") | |
| .attr("width", "100%") | |
| .attr("height", "100%"); | |
| const margin = {top: 5, right: 5, bottom: 5, left: 5}; | |
| const width = svg.node().getBoundingClientRect().width - margin.left - margin.right; | |
| const height = svg.node().getBoundingClientRect().height - margin.top - margin.bottom; | |
| const x = d3.scaleLinear() | |
| .domain([0, data.length - 1]) | |
| .range([0, width]); | |
| const y = d3.scaleLinear() | |
| .domain([0, 100]) | |
| .range([height, 0]); | |
| const line = d3.line() | |
| .x((d, i) => x(i)) | |
| .y(d => y(d)) | |
| .curve(d3.curveBasis); | |
| svg.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#3b82f6") | |
| .attr("stroke-width", 2) | |
| .attr("d", line); | |
| } | |
| function createConnectionGraph() { | |
| const data = Array.from({length: 15}, (_, i) => ({ | |
| time: i, | |
| latency: 50 + Math.random() * 150, | |
| throughput: 0.5 + Math.random() * 0.5 | |
| })); | |
| const svg = d3.select("#connectionGraph") | |
| .append("svg") | |
| .attr("width", "100%") | |
| .attr("height", "100%"); | |
| const margin = {top: 20, right: 20, bottom: 30, left: 40}; | |
| const width = svg.node().getBoundingClientRect().width - margin.left - margin.right; | |
| const height = svg.node().getBoundingClientRect().height - margin.top - margin.bottom; | |
| const x = d3.scaleLinear() | |
| .domain([0, data.length - 1]) | |
| .range([0, width]); | |
| const y1 = d3.scaleLinear() | |
| .domain([0, 300]) | |
| .range([height, 0]); | |
| const y2 = d3.scaleLinear() | |
| .domain([0, 1]) | |
| .range([height, 0]); | |
| const g = svg.append("g") | |
| .attr("transform", `translate(${margin.left},${margin.top})`); | |
| // Add latency line | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#3b82f6") | |
| .attr("stroke-width", 2) | |
| .attr("d", d3.line() | |
| .x(d => x(d.time)) | |
| .y(d => y1(d.latency)) | |
| ); | |
| // Add throughput line | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#10b981") | |
| .attr("stroke-width", 2) | |
| .attr("d", d3.line() | |
| .x(d => x(d.time)) | |
| .y(d => y2(d.throughput)) | |
| ); | |
| // Add axes | |
| g.append("g") | |
| .attr("transform", `translate(0,${height})`) | |
| .call(d3.axisBottom(x).ticks(5)); | |
| g.append("g") | |
| .call(d3.axisLeft(y1).ticks(5)); | |
| // Add legend | |
| const legend = g.append("g") | |
| .attr("transform", `translate(${width - 100},10)`); | |
| legend.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .attr("fill", "#3b82f6"); | |
| legend.append("text") | |
| .attr("x", 15) | |
| .attr("y", 10) | |
| .attr("font-size", "10px") | |
| .text("Latency (ms)"); | |
| legend.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 20) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .attr("fill", "#10b981"); | |
| legend.append("text") | |
| .attr("x", 15) | |
| .attr("y", 30) | |
| .attr("font-size", "10px") | |
| .text("Throughput"); | |
| } | |
| function createPerformanceGraph() { | |
| const data = Array.from({length: 15}, (_, i) => ({ | |
| time: i, | |
| cpu: 20 + Math.random() * 60, | |
| memory: 30 + Math.random() * 50, | |
| gpu: 10 + Math.random() * 30 | |
| })); | |
| const svg = d3.select("#performanceGraph") | |
| .append("svg") | |
| .attr("width", "100%") | |
| .attr("height", "100%"); | |
| const margin = {top: 20, right: 20, bottom: 30, left: 40}; | |
| const width = svg.node().getBoundingClientRect().width - margin.left - margin.right; | |
| const height = svg.node().getBoundingClientRect().height - margin.top - margin.bottom; | |
| const x = d3.scaleLinear() | |
| .domain([0, data.length - 1]) | |
| .range([0, width]); | |
| const y = d3.scaleLinear() | |
| .domain([0, 100]) | |
| .range([height, 0]); | |
| const g = svg.append("g") | |
| .attr("transform", `translate(${margin.left},${margin.top})`); | |
| // Add CPU line | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#ef4444") | |
| .attr("stroke-width", 2) | |
| .attr("d", d3.line() | |
| .x(d => x(d.time)) | |
| .y(d => y(d.cpu)) | |
| ); | |
| // Add Memory line | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#f59e0b") | |
| .attr("stroke-width", 2) | |
| .attr("d", d3.line() | |
| .x(d => x(d.time)) | |
| .y(d => y(d.memory)) | |
| ); | |
| // Add GPU line | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#8b5cf6") | |
| .attr("stroke-width", 2) | |
| .attr("d", d3.line() | |
| .x(d => x(d.time)) | |
| .y(d => y(d.gpu)) | |
| ); | |
| // Add axes | |
| g.append("g") | |
| .attr("transform", `translate(0,${height})`) | |
| .call(d3.axisBottom(x).ticks(5)); | |
| g.append("g") | |
| .call(d3.axisLeft(y).ticks(5)); | |
| // Add legend | |
| const legend = g.append("g") | |
| .attr("transform", `translate(${width - 100},10)`); | |
| legend.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .attr("fill", "#ef4444"); | |
| legend.append("text") | |
| .attr("x", 15) | |
| .attr("y", 10) | |
| .attr("font-size", "10px") | |
| .text("CPU (%)"); | |
| legend.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 20) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .attr("fill", "#f59e0b"); | |
| legend.append("text") | |
| .attr("x", 15) | |
| .attr("y", 30) | |
| .attr("font-size", "10px") | |
| .text("Memory (%)"); | |
| legend.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 40) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .attr("fill", "#8b5cf6"); | |
| legend.append("text") | |
| .attr("x", 15) | |
| .attr("y", 50) | |
| .attr("font-size", "10px") | |
| .text("GPU (%)"); | |
| } | |
| </script> | |
| </body> | |
| </html> | |