بخش deep seek v3 رو تقویت کن تا دستورات ادامه دادن کد رو به اون بدم و هر بخش تکمیل بشه!!!! - Follow Up Deployment
b31b981
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 id="termuxStatus" class="text-gray-500 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-gray-500 mr-2"></span> | |
| <span class="en">Not Connected</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 id="hfStatus" class="text-gray-500 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-gray-500 mr-2"></span> | |
| <span class="en">Not Connected</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 id="chatInput" 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 onclick="clearChat()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg en">Clear</button> | |
| <button onclick="clearChat()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg fa hidden rtl persian-font">پاک کردن</button> | |
| <button onclick="generateWithDeepSeek()" class="px-4 py-2 bg-blue-500 text-white rounded-lg en">Generate Code</button> | |
| <button onclick="generateWithDeepSeek()" class="px-4 py-2 bg-blue-500 text-white rounded-lg fa hidden rtl persian-font">تولید کد</button> | |
| </div> | |
| <div id="chatResponse" class="mt-4 hidden"> | |
| <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white w-3 h-3"></i> | |
| </div> | |
| <span class="font-medium">DeepSeek-V3</span> | |
| </div> | |
| <div id="responseContent" class="text-sm"></div> | |
| </div> | |
| </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 mt-4"> | |
| <button onclick="refineCode()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg en">Refine</button> | |
| <button onclick="refineCode()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg fa hidden rtl persian-font">بهینهسازی</button> | |
| <button onclick="saveToTermux()" class="px-4 py-2 bg-green-500 text-white rounded-lg en">Save to Termux</button> | |
| <button onclick="saveToTermux()" 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 onclick="switchModel('DeepSeek-Coder')" class="w-full mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm en">Switch to this model</button> | |
| <button onclick="switchModel('DeepSeek-Coder')" 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 onclick="switchModel('CodeLlama')" 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 onclick="switchModel('CodeLlama')" 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 onclick="switchModel('StarCoder')" 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 onclick="switchModel('StarCoder')" 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 onclick="applyModelSettings()" class="px-4 py-2 bg-blue-500 text-white rounded-lg en">Apply Settings</button> | |
| <button onclick="applyModelSettings()" 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 onclick="exportLogs()" 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 onclick="clearLogs()" 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 onclick="checkForUpdates()" 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 onclick="updateAllLibraries()" 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 onclick="checkAppUpdates()" 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> | |
| // Connection status constants | |
| const STATUS = { | |
| NOT_CONNECTED: { color: 'gray', text: 'Not Connected' }, | |
| CONNECTING: { color: 'yellow', text: 'Connecting...' }, | |
| CONNECTED: { color: 'green', text: 'Connected' }, | |
| ERROR: { color: 'red', text: 'Error' } | |
| }; | |
| // Initialize components | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set initial connection status | |
| updateConnectionStatus('termux', STATUS.NOT_CONNECTED); | |
| updateConnectionStatus('hf', STATUS.NOT_CONNECTED); | |
| // 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"); | |
| } | |
| // Update connection status display | |
| function updateConnectionStatus(type, status) { | |
| const element = document.getElementById(`${type}Status`); | |
| const dot = element.querySelector('span:first-child'); | |
| const text = element.querySelector(`.${localStorage.getItem('language') || 'en'}`); | |
| dot.className = `w-2 h-2 rounded-full bg-${status.color}-500 mr-2`; | |
| text.textContent = status.text; | |
| if (type === 'hf' && status === STATUS.CONNECTED) { | |
| initHFModels(); | |
| } | |
| } | |
| // Initialize HF models connection | |
| function initHFModels() { | |
| updateConnectionStatus('hf', STATUS.CONNECTING); | |
| // Simulate API connection | |
| setTimeout(() => { | |
| updateConnectionStatus('hf', STATUS.CONNECTED); | |
| showToast('Successfully connected to Hugging Face Hub', 'success'); | |
| }, 1500); | |
| } | |
| // Check Termux connection | |
| function checkTermuxConnection() { | |
| updateConnectionStatus('termux', STATUS.CONNECTING); | |
| // Simulate connection check | |
| setTimeout(() => { | |
| const isConnected = Math.random() > 0.3; // 70% chance of success for demo | |
| if (isConnected) { | |
| updateConnectionStatus('termux', STATUS.CONNECTED); | |
| showToast('Termux connection established', 'success'); | |
| } else { | |
| updateConnectionStatus('termux', STATUS.ERROR); | |
| showToast('Failed to connect to Termux', 'error'); | |
| } | |
| }, 2000); | |
| } | |
| // Show toast notification | |
| function showToast(message, type = 'info') { | |
| const toast = document.createElement('div'); | |
| toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${ | |
| type === 'success' ? 'bg-green-500' : | |
| type === 'error' ? 'bg-red-500' : 'bg-blue-500' | |
| }`; | |
| toast.textContent = message; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => toast.remove(), 300); | |
| }, 3000); | |
| } | |
| // Model switching functionality | |
| function switchModel(modelName) { | |
| showToast(`Switching to ${modelName}...`, 'info'); | |
| // Simulate model loading | |
| setTimeout(() => { | |
| showToast(`Successfully switched to ${modelName}`, 'success'); | |
| // Update active model indicator | |
| document.querySelectorAll('.bg-white').forEach(card => { | |
| const status = card.querySelector('span.bg-green-100'); | |
| if (status) { | |
| status.textContent = 'Available'; | |
| status.className = 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded'; | |
| } | |
| }); | |
| // Set new active model | |
| const activeCard = document.querySelector(`.bg-white h3:contains('${modelName}')`).parentElement.parentElement; | |
| const status = activeCard.querySelector('span.bg-gray-100'); | |
| status.textContent = 'Active'; | |
| status.className = 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-1 rounded'; | |
| }, 1500); | |
| } | |
| // Apply model settings | |
| function applyModelSettings() { | |
| const complexity = document.getElementById('complexitySlider').value; | |
| showToast(`Applying model settings (Complexity: ${complexity})...`, 'info'); | |
| setTimeout(() => { | |
| showToast('Model settings applied successfully', 'success'); | |
| }, 1000); | |
| } | |
| // Library update functions | |
| function checkForUpdates() { | |
| showToast('Checking for library updates...', 'info'); | |
| setTimeout(() => { | |
| showToast('Update check completed. 1 update available.', 'success'); | |
| }, 2000); | |
| } | |
| function updateAllLibraries() { | |
| showToast('Updating all libraries...', 'info'); | |
| setTimeout(() => { | |
| showToast('All libraries updated successfully', 'success'); | |
| }, 3000); | |
| } | |
| // Log functions | |
| function exportLogs() { | |
| showToast('Exporting logs to file...', 'info'); | |
| setTimeout(() => { | |
| showToast('Logs exported successfully', 'success'); | |
| }, 1500); | |
| } | |
| function clearLogs() { | |
| showToast('Clearing all logs...', 'info'); | |
| setTimeout(() => { | |
| document.querySelectorAll('.log-entry, .error-log, .success-log').forEach(log => log.remove()); | |
| showToast('All logs cleared', 'success'); | |
| }, 1000); | |
| } | |
| // App update check | |
| function checkAppUpdates() { | |
| showToast('Checking for application updates...', 'info'); | |
| setTimeout(() => { | |
| showToast('You are using the latest version', 'success'); | |
| }, 2000); | |
| } | |
| // Generate code with DeepSeek | |
| let codeGenerationContext = ''; | |
| function generateWithDeepSeek() { | |
| const input = document.getElementById('chatInput').value; | |
| if (!input.trim()) { | |
| showToast('Please enter your requirements', 'error'); | |
| return; | |
| } | |
| document.getElementById('chatResponse').classList.remove('hidden'); | |
| document.getElementById('responseContent').textContent = 'Generating code...'; | |
| // Prepare context for continuation | |
| const currentCode = document.querySelector('.code-block code').textContent; | |
| const fullPrompt = codeGenerationContext | |
| ? `${codeGenerationContext}\n\nContinue from:\n${currentCode}\n\nNew instruction: ${input}` | |
| : `${input}\n\nCurrent code:\n${currentCode}`; | |
| // Connect to DeepSeek-V3 API | |
| fetch('/api/generate', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'X-Continue-Generation': 'true' | |
| }, | |
| body: JSON.stringify({ | |
| model: 'deepseek-ai/DeepSeek-V3', | |
| inputs: fullPrompt, | |
| parameters: { | |
| return_full_text: false, | |
| max_new_tokens: 1000 | |
| } | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| throw new Error(data.error); | |
| } | |
| let generatedCode = data[0].generated_text; | |
| // Update context for continuation | |
| codeGenerationContext = `${codeGenerationContext}\n${input}`; | |
| // Handle continuation markers | |
| if (generatedCode.includes('[CONTINUE]')) { | |
| const parts = generatedCode.split('[CONTINUE]'); | |
| generatedCode = parts[0]; | |
| document.getElementById('chatInput').value = parts[1].trim(); | |
| showToast('Code generated. Ready for continuation...', 'info'); | |
| } | |
| // Check if response contains system update commands | |
| if (generatedCode.includes('SYSTEM_UPDATE:')) { | |
| const updateCommands = generatedCode.split('SYSTEM_UPDATE:')[1].trim(); | |
| processSystemUpdate(updateCommands); | |
| return; | |
| } | |
| document.getElementById('responseContent').innerHTML = ` | |
| <div class="mb-4"> | |
| <p>Generated response:</p> | |
| <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded mt-2">${generatedCode}</div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <button onclick="applyCodeChanges('${encodeURIComponent(generatedCode)}')" class="px-3 py-1 bg-green-500 text-white rounded text-sm"> | |
| <span class="en">Apply Changes</span> | |
| <span class="fa hidden rtl persian-font">اعمال تغییرات</span> | |
| </button> | |
| <button onclick="continueGeneration('${encodeURIComponent(generatedCode)}')" class="px-3 py-1 bg-yellow-500 text-white rounded text-sm"> | |
| <span class="en">Continue</span> | |
| <span class="fa hidden rtl persian-font">ادامه</span> | |
| </button> | |
| <button onclick="refineResponse('${encodeURIComponent(input)}', '${encodeURIComponent(generatedCode)}')" class="px-3 py-1 bg-blue-500 text-white rounded text-sm"> | |
| <span class="en">Refine</span> | |
| <span class="fa hidden rtl persian-font">بهینهسازی</span> | |
| </button> | |
| <button onclick="learnFromResponse('${encodeURIComponent(generatedCode)}')" class="px-3 py-1 bg-purple-500 text-white rounded text-sm"> | |
| <span class="en">Learn</span> | |
| <span class="fa hidden rtl persian-font">یادگیری</span> | |
| </button> | |
| <button onclick="resetContext()" class="px-3 py-1 bg-red-500 text-white rounded text-sm"> | |
| <span class="en">Reset Context</span> | |
| <span class="fa hidden rtl persian-font">بازنشانی زمینه</span> | |
| </button> | |
| </div> | |
| `; | |
| showToast('Code generated successfully', 'success'); | |
| }) | |
| .catch(error => { | |
| document.getElementById('responseContent').innerHTML = ` | |
| <p class="text-red-500">Error: ${error.message}</p> | |
| `; | |
| showToast('Code generation failed', 'error'); | |
| }) | |
| .finally(() => { | |
| hljs.highlightAll(); | |
| }); | |
| } | |
| function applyCodeChanges(code) { | |
| const decodedCode = decodeURIComponent(code); | |
| // Apply changes to the code preview | |
| const codeBlock = document.querySelector('.code-block code'); | |
| const currentCode = codeBlock.textContent; | |
| // Handle continuation by appending if needed | |
| if (decodedCode.startsWith('+')) { | |
| codeBlock.textContent = currentCode + '\n' + decodedCode.substring(1); | |
| } else { | |
| codeBlock.textContent = decodedCode; | |
| } | |
| hljs.highlightAll(); | |
| showToast('Changes applied to code preview', 'success'); | |
| // Auto-update related components | |
| updateRelatedComponents(decodedCode); | |
| // Check for system updates in the code | |
| if (decodedCode.includes('SYSTEM_UPDATE:')) { | |
| const updateCommands = decodedCode.split('SYSTEM_UPDATE:')[1].trim(); | |
| processSystemUpdate(updateCommands); | |
| } | |
| // Add to context if not already there | |
| if (!codeGenerationContext.includes(decodedCode)) { | |
| codeGenerationContext += '\n' + decodedCode; | |
| } | |
| } | |
| function learnFromResponse(code) { | |
| const decodedCode = decodeURIComponent(code); | |
| // Save to knowledge base via proxy | |
| fetch('/api/learn', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'X-Requested-With': 'XMLHttpRequest' | |
| }, | |
| body: JSON.stringify({ | |
| model: 'deepseek-ai/DeepSeek-V3', | |
| content: decodedCode, | |
| timestamp: new Date().toISOString() | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| showToast('Knowledge updated successfully', 'success'); | |
| addLogEntry('System learned from new response', 'INFO'); | |
| }) | |
| .catch(error => { | |
| showToast('Failed to update knowledge', 'error'); | |
| addLogEntry(`Learning failed: ${error.message}`, 'ERROR'); | |
| }); | |
| } | |
| function processSystemUpdate(commands) { | |
| // Parse update commands | |
| const updates = commands.split('\n').filter(cmd => cmd.trim()); | |
| updates.forEach(update => { | |
| if (update.startsWith('UPDATE_BUTTON:')) { | |
| const buttonData = update.split('UPDATE_BUTTON:')[1].trim().split('|'); | |
| updateButton(buttonData[0], buttonData[1], buttonData[2]); | |
| } else if (update.startsWith('UPDATE_FUNCTION:')) { | |
| const funcData = update.split('UPDATE_FUNCTION:')[1].trim().split('|'); | |
| updateFunction(funcData[0], funcData[1]); | |
| } else if (update.startsWith('ADD_FEATURE:')) { | |
| const featureData = update.split('ADD_FEATURE:')[1].trim(); | |
| addFeature(featureData); | |
| } | |
| }); | |
| showToast('System updates applied', 'success'); | |
| addLogEntry('System updated from chat response', 'INFO'); | |
| } | |
| function updateButton(buttonId, newText, newAction) { | |
| const button = document.getElementById(buttonId); | |
| if (button) { | |
| button.textContent = newText; | |
| button.setAttribute('onclick', newAction); | |
| showToast(`Button ${buttonId} updated`, 'info'); | |
| } | |
| } | |
| function updateFunction(funcName, newCode) { | |
| // In a real implementation, this would update the actual function | |
| // For demo, we'll just log it | |
| console.log(`Function ${funcName} updated with:`, newCode); | |
| addLogEntry(`Function ${funcName} updated`, 'INFO'); | |
| } | |
| function addFeature(featureCode) { | |
| // In a real implementation, this would add new features | |
| console.log('New feature added:', featureCode); | |
| addLogEntry('New feature added from chat', 'INFO'); | |
| } | |
| function continueGeneration(currentCode) { | |
| document.getElementById('chatInput').value = '[CONTINUE]'; | |
| generateWithDeepSeek(); | |
| showToast('Continuing code generation...', 'info'); | |
| } | |
| function resetContext() { | |
| codeGenerationContext = ''; | |
| showToast('Generation context reset', 'success'); | |
| } | |
| function refineResponse(prompt, currentCode) { | |
| const refinedPrompt = `Please refine this code based on the original prompt: "${decodeURIComponent(prompt)}"\n\nCurrent code:\n${decodeURIComponent(currentCode)}`; | |
| document.getElementById('chatInput').value = refinedPrompt; | |
| generateWithDeepSeek(); | |
| showToast('Refinement request sent', 'info'); | |
| } | |
| function updateRelatedComponents(code) { | |
| // Auto-update requirements if needed | |
| if (code.includes('import transformers')) { | |
| updateLibraryVersion('transformers', '4.30.0'); | |
| } | |
| if (code.includes('import torch')) { | |
| updateLibraryVersion('torch', '2.0.1'); | |
| } | |
| // Add to logs | |
| addLogEntry('Code changes applied', 'INFO'); | |
| // Update performance graphs if needed | |
| if (code.includes('GPU') || code.includes('CUDA')) { | |
| updatePerformanceGraphs(); | |
| } | |
| } | |
| function updateLibraryVersion(libName, version) { | |
| const libElements = document.querySelectorAll('.text-sm.font-medium'); | |
| libElements.forEach(el => { | |
| if (el.textContent.includes(libName)) { | |
| const versionSpan = el.nextElementSibling; | |
| versionSpan.textContent = `v${version}`; | |
| versionSpan.className = 'text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded'; | |
| } | |
| }); | |
| } | |
| function addLogEntry(message, type) { | |
| const logsContainer = document.querySelector('.space-y-3.max-h-96'); | |
| const newLog = document.createElement('div'); | |
| newLog.className = `log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded`; | |
| const typeClass = type === 'ERROR' ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200' : | |
| type === 'INFO' ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' : | |
| 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'; | |
| newLog.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="text-sm font-medium en">${message}</span> | |
| <span class="text-sm font-medium fa hidden rtl persian-font">${message}</span> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Just now</p> | |
| </div> | |
| <span class="text-xs ${typeClass} px-2 py-1 rounded">${type}</span> | |
| </div> | |
| `; | |
| logsContainer.prepend(newLog); | |
| } | |
| function updatePerformanceGraphs() { | |
| // Force re-render graphs with updated data | |
| d3.select("#performanceGraph").select("svg").remove(); | |
| createPerformanceGraph(); | |
| showToast('Performance graphs updated', 'info'); | |
| } | |
| // Initialize real-time chat updates | |
| function initChatUpdates() { | |
| // Check for updates every 5 seconds | |
| setInterval(() => { | |
| const lastMessage = document.querySelector('#chatResponse .bg-gray-100')?.textContent; | |
| if (lastMessage) { | |
| fetchChatUpdates(lastMessage) | |
| .then(updates => { | |
| if (updates.length > 0) { | |
| applyCodeChanges(updates[0].content); | |
| showToast('Auto-applied code improvements', 'info'); | |
| } | |
| }); | |
| } | |
| }, 5000); | |
| } | |
| function fetchChatUpdates(lastKnownMessage) { | |
| // Simulate API call to check for updates | |
| return new Promise(resolve => { | |
| setTimeout(() => { | |
| // In a real implementation, this would query an API endpoint | |
| // that tracks conversation updates | |
| resolve([]); // Return empty array for demo | |
| }, 1000); | |
| }); | |
| } | |
| // Initialize on load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initChatUpdates(); | |
| // Load initial knowledge | |
| fetch('/api/knowledge') | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.length > 0) { | |
| addLogEntry(`Loaded ${data.length} knowledge entries`, 'INFO'); | |
| // Initialize context with knowledge | |
| codeGenerationContext = data.map(item => item.content).join('\n'); | |
| } | |
| }); | |
| // Setup continue button in code panel | |
| const codePanel = document.querySelector('.code-block').parentElement; | |
| const continueBtn = document.createElement('button'); | |
| continueBtn.className = 'absolute top-2 right-2 px-2 py-1 bg-yellow-500 text-white rounded text-xs'; | |
| continueBtn.innerHTML = '<span class="en">Continue</span><span class="fa hidden rtl persian-font">ادامه</span>'; | |
| continueBtn.onclick = function() { | |
| document.getElementById('chatInput').value = '[CONTINUE] ' + | |
| document.querySelector('.code-block code').textContent; | |
| generateWithDeepSeek(); | |
| }; | |
| codePanel.style.position = 'relative'; | |
| codePanel.appendChild(continueBtn); | |
| }); | |
| 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> | |