Hugging Face's logo

Spaces:
Perfectall00
/
https-huggingface-co-perfectall00-everything
Running

App Files Community
Perfectall00 commited on
Commit
325a9c5
·
verified ·
1 Parent(s): 4683576

I want you to build a Hugging Face Space called **DeepSite-Termux-App-Builder** with the following full professional features:

Browse files

1. **Core Functionality**
- The app must be bilingual (English + Persian) for chat, code generation, and logs.
- Provide the same level of **code generation, preview, and refinement power as Deepsite itself**.
- Output must be fully usable in Termux (Linux inside Android) and also exportable as APK for Android.

2. **HF Models Integration**
- Allow connection to Hugging Face Hub, select and run models (DeepSeek and others).
- Show model details: name, version, license, latency (ping).
- Allow switching between models dynamically.
- Provide a configurable **neural network usage level slider** (to adjust model complexity).
- Display these settings in D3-based graphs (real-time monitoring of model and neural activity).

3. **Code Generation & Execution**
- Multi-step code generation with **syntax-highlighted preview** before saving.
- Auto-create proper folder and file structure (no incomplete files).
- Include a pre-installed **requirements file** and a complete **LLM library** for HF model interaction.
- Allow library upgrades with a button (show library version, changelog, and update confirmation dialog).
- Auto-log every action (model, library, task, time).

4. **Error Handling & Auto-Fix**
- Monitor Termux logs in real time.
- Automatically detect and fix common errors (AutoFix mode).
- If a fix is applied, show it in a visual “AutoCode Patch” box inside the app.
- For critical updates, ask the user with a Yes/No confirmation box.

5. **Graph & Monitoring**
- Use **D3.js graphs** for both sides:
- HF ↔ Termux connection monitoring.
- Neural network usage levels and system performance.
- Allow saving/loading custom D3 graphs for roadmap visualization.

6. **User Interface**
- Professional, modern UI with beautiful graphics.
- Multi-tab layout:
- **Chat/Code** (interaction, generation, preview).
- **Models** (HF model selection & monitoring).
- **Logs** (real-time system and Termux logs).
- **Settings** (update, library management, neural net settings, advanced options).
- Dark/Light theme support.
- Smooth animations and clean design.

7. **Updates & Maintenance**
- Built-in updater for both Termux and the app itself.
- Show update notification box with “Apply / Skip” options.
- Add expandable **Advanced Settings** for future features.
- Ensure the app always remains up-to-date and in sync with HF.

---

📌 In summary: Build a Hugging Face Space that works as a **Deepsite-powered App Builder for Termux + Android**, bilingual, graph-powered (D3), error self-healing, fully connected to HF models, with professional UI and update system. - Initial Deployment

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +976 -18
  3. prompts.txt +52 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co Perfectall00 Everything
3
- emoji: 💻
4
- colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: https-huggingface-co-perfectall00-everything
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,977 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeepSite-Termux-App-Builder</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
11
+ <script src="https://d3js.org/d3.v7.min.js"></script>
12
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
13
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
16
+ <style>
17
+ .rtl { direction: rtl; }
18
+ .persian-font { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
19
+ .tab-content { display: none; }
20
+ .tab-content.active { display: block; }
21
+ .code-block { font-family: 'Fira Code', monospace; }
22
+ #connectionGraph, #performanceGraph { height: 300px; }
23
+ .log-entry { border-left: 3px solid #3b82f6; }
24
+ .error-log { border-left: 3px solid #ef4444; }
25
+ .success-log { border-left: 3px solid #10b981; }
26
+ .patch-box { border: 1px dashed #f59e0b; background-color: rgba(245, 158, 11, 0.1); }
27
+ .dark .patch-box { border-color: #fbbf24; background-color: rgba(251, 191, 36, 0.15); }
28
+ .language-selector:hover .language-dropdown { display: block; }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
32
+ <div class="min-h-screen flex flex-col">
33
+ <!-- Header -->
34
+ <header class="bg-white dark:bg-gray-800 shadow-md py-4 px-6">
35
+ <div class="container mx-auto flex justify-between items-center">
36
+ <div class="flex items-center space-x-4">
37
+ <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
38
+ <i data-feather="cpu" class="text-white"></i>
39
+ </div>
40
+ <h1 class="text-xl font-bold">DeepSite-Termux-App-Builder</h1>
41
+ </div>
42
+ <div class="flex items-center space-x-4">
43
+ <div class="language-selector relative">
44
+ <button class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700">
45
+ <span class="language-flag">🇬🇧</span>
46
+ <span>English</span>
47
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
48
+ </button>
49
+ <div class="language-dropdown hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-10">
50
+ <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')">
51
+ <span>🇬🇧</span>
52
+ <span>English</span>
53
+ </button>
54
+ <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')">
55
+ <span>🇮🇷</span>
56
+ <span>فارسی</span>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ <button id="themeToggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700">
61
+ <i data-feather="moon" class="hidden dark:block"></i>
62
+ <i data-feather="sun" class="dark:hidden"></i>
63
+ </button>
64
+ <button class="p-2 rounded-full bg-blue-500 text-white">
65
+ <i data-feather="user"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </header>
70
+
71
+ <!-- Main Content -->
72
+ <main class="flex-grow container mx-auto px-4 py-6">
73
+ <div class="flex flex-col lg:flex-row gap-6">
74
+ <!-- Sidebar -->
75
+ <aside class="w-full lg:w-64 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
76
+ <nav>
77
+ <ul class="space-y-2">
78
+ <li>
79
+ <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">
80
+ <i data-feather="message-square"></i>
81
+ <span class="en">Chat/Code</span>
82
+ <span class="fa hidden rtl persian-font">چت/کد</span>
83
+ </button>
84
+ </li>
85
+ <li>
86
+ <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">
87
+ <i data-feather="cpu"></i>
88
+ <span class="en">Models</span>
89
+ <span class="fa hidden rtl persian-font">مدل‌ها</span>
90
+ </button>
91
+ </li>
92
+ <li>
93
+ <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">
94
+ <i data-feather="terminal"></i>
95
+ <span class="en">Logs</span>
96
+ <span class="fa hidden rtl persian-font">لاگ‌ها</span>
97
+ </button>
98
+ </li>
99
+ <li>
100
+ <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">
101
+ <i data-feather="settings"></i>
102
+ <span class="en">Settings</span>
103
+ <span class="fa hidden rtl persian-font">تنظیمات</span>
104
+ </button>
105
+ </li>
106
+ </ul>
107
+ </nav>
108
+
109
+ <div class="mt-8">
110
+ <h3 class="font-medium text-gray-500 dark:text-gray-400 mb-2 en">System Status</h3>
111
+ <h3 class="font-medium text-gray-500 dark:text-gray-400 mb-2 fa hidden rtl persian-font">وضعیت سیستم</h3>
112
+ <div class="space-y-3">
113
+ <div class="flex items-center justify-between">
114
+ <span class="en">Termux Connection</span>
115
+ <span class="fa hidden rtl persian-font">اتصال ترمکس</span>
116
+ <span class="text-green-500 flex items-center">
117
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
118
+ <span class="en">Active</span>
119
+ <span class="fa hidden rtl persian-font">فعال</span>
120
+ </span>
121
+ </div>
122
+ <div class="flex items-center justify-between">
123
+ <span class="en">HF Connection</span>
124
+ <span class="fa hidden rtl persian-font">اتصال HF</span>
125
+ <span class="text-green-500 flex items-center">
126
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
127
+ <span class="en">Active</span>
128
+ <span class="fa hidden rtl persian-font">فعال</span>
129
+ </span>
130
+ </div>
131
+ <div class="flex items-center justify-between">
132
+ <span class="en">AutoFix Mode</span>
133
+ <span class="fa hidden rtl persian-font">حالت رفع خودکار</span>
134
+ <span class="text-blue-500 flex items-center">
135
+ <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
136
+ <span class="en">Enabled</span>
137
+ <span class="fa hidden rtl persian-font">فعال</span>
138
+ </span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="mt-8">
144
+ <div id="miniPerformanceGraph" class="h-32"></div>
145
+ </div>
146
+ </aside>
147
+
148
+ <!-- Main Panel -->
149
+ <div class="flex-grow bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
150
+ <!-- Chat/Code Tab -->
151
+ <div id="chat" class="tab-content active">
152
+ <div class="flex justify-between items-center mb-6">
153
+ <h2 class="text-xl font-bold en">Code Generation</h2>
154
+ <h2 class="text-xl font-bold fa hidden rtl persian-font">تولید کد</h2>
155
+ <div class="flex space-x-2">
156
+ <button class="px-4 py-2 bg-green-500 text-white rounded-lg flex items-center space-x-2">
157
+ <i data-feather="play" class="w-4 h-4"></i>
158
+ <span class="en">Run in Termux</span>
159
+ <span class="fa hidden rtl persian-font">اجرا در ترمکس</span>
160
+ </button>
161
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center space-x-2">
162
+ <i data-feather="download" class="w-4 h-4"></i>
163
+ <span class="en">Export APK</span>
164
+ <span class="fa hidden rtl persian-font">خروجی APK</span>
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
170
+ <div>
171
+ <div class="mb-4">
172
+ <label class="block text-sm font-medium mb-2 en">Describe your app requirements:</label>
173
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">نیازمندی‌های برنامه خود را شرح دهید:</label>
174
+ <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>
175
+ </div>
176
+ <div class="flex justify-end space-x-3">
177
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg en">Clear</button>
178
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg fa hidden rtl persian-font">پاک کردن</button>
179
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg en">Generate Code</button>
180
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg fa hidden rtl persian-font">تولید کد</button>
181
+ </div>
182
+ </div>
183
+ <div>
184
+ <div class="mb-4">
185
+ <label class="block text-sm font-medium mb-2 en">Generated Code Preview:</label>
186
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">پیش‌نمایش کد تولید شده:</label>
187
+ <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
188
+ import huggingface_hub
189
+ from transformers import pipeline
190
+
191
+ class AppBuilder:
192
+ def __init__(self):
193
+ self.model = None
194
+
195
+ def load_model(self, model_name):
196
+ self.model = pipeline('text-generation', model=model_name)
197
+
198
+ def generate_code(self, prompt):
199
+ return self.model(prompt, max_length=200)</code></pre>
200
+ </div>
201
+ <div class="flex justify-end space-x-3">
202
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg en">Refine</button>
203
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg fa hidden rtl persian-font">بهینه‌سازی</button>
204
+ <button class="px-4 py-2 bg-green-500 text-white rounded-lg en">Save to Termux</button>
205
+ <button class="px-4 py-2 bg-green-500 text-white rounded-lg fa hidden rtl persian-font">ذخیره در ترمکس</button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="mt-6">
211
+ <div class="patch-box p-4 rounded-lg mb-4">
212
+ <div class="flex items-center justify-between mb-2">
213
+ <h3 class="font-medium text-yellow-600 dark:text-yellow-400 en">AutoCode Patch Applied</h3>
214
+ <h3 class="font-medium text-yellow-600 dark:text-yellow-400 fa hidden rtl persian-font">پچ کد خودکار اعمال شد</h3>
215
+ <span class="text-xs text-gray-500 dark:text-gray-400 en">Just now</span>
216
+ <span class="text-xs text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">همین الان</span>
217
+ </div>
218
+ <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
219
+ + Improved prompt formatting
220
+ + Added requirements.txt auto-generation</code></pre>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Models Tab -->
226
+ <div id="models" class="tab-content">
227
+ <div class="flex justify-between items-center mb-6">
228
+ <h2 class="text-xl font-bold en">Hugging Face Models</h2>
229
+ <h2 class="text-xl font-bold fa hidden rtl persian-font">مدل‌های Hugging Face</h2>
230
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center space-x-2">
231
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
232
+ <span class="en">Refresh Models</span>
233
+ <span class="fa hidden rtl persian-font">بروزرسانی مدل‌ها</span>
234
+ </button>
235
+ </div>
236
+
237
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
238
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
239
+ <div class="flex items-center justify-between mb-3">
240
+ <h3 class="font-bold">DeepSeek-Coder</h3>
241
+ <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>
242
+ </div>
243
+ <div class="text-sm text-gray-600 dark:text-gray-300 mb-3">
244
+ <div class="flex justify-between mb-1">
245
+ <span class="en">Version:</span>
246
+ <span class="fa hidden rtl persian-font">نسخه:</span>
247
+ <span>1.3.2</span>
248
+ </div>
249
+ <div class="flex justify-between mb-1">
250
+ <span class="en">License:</span>
251
+ <span class="fa hidden rtl persian-font">مجوز:</span>
252
+ <span>Apache 2.0</span>
253
+ </div>
254
+ <div class="flex justify-between">
255
+ <span class="en">Latency:</span>
256
+ <span class="fa hidden rtl persian-font">تأخیر:</span>
257
+ <span>142ms</span>
258
+ </div>
259
+ </div>
260
+ <button class="w-full mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm en">Switch to this model</button>
261
+ <button class="w-full mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm fa hidden rtl persian-font">تغییر به این مدل</button>
262
+ </div>
263
+
264
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
265
+ <div class="flex items-center justify-between mb-3">
266
+ <h3 class="font-bold">CodeLlama</h3>
267
+ <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>
268
+ </div>
269
+ <div class="text-sm text-gray-600 dark:text-gray-300 mb-3">
270
+ <div class="flex justify-between mb-1">
271
+ <span class="en">Version:</span>
272
+ <span class="fa hidden rtl persian-font">نسخه:</span>
273
+ <span>2.1.0</span>
274
+ </div>
275
+ <div class="flex justify-between mb-1">
276
+ <span class="en">License:</span>
277
+ <span class="fa hidden rtl persian-font">مجوز:</span>
278
+ <span>MIT</span>
279
+ </div>
280
+ <div class="flex justify-between">
281
+ <span class="en">Latency:</span>
282
+ <span class="fa hidden rtl persian-font">تأخیر:</span>
283
+ <span>210ms</span>
284
+ </div>
285
+ </div>
286
+ <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>
287
+ <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>
288
+ </div>
289
+
290
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
291
+ <div class="flex items-center justify-between mb-3">
292
+ <h3 class="font-bold">StarCoder</h3>
293
+ <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>
294
+ </div>
295
+ <div class="text-sm text-gray-600 dark:text-gray-300 mb-3">
296
+ <div class="flex justify-between mb-1">
297
+ <span class="en">Version:</span>
298
+ <span class="fa hidden rtl persian-font">نسخه:</span>
299
+ <span>1.5.3</span>
300
+ </div>
301
+ <div class="flex justify-between mb-1">
302
+ <span class="en">License:</span>
303
+ <span class="fa hidden rtl persian-font">مجوز:</span>
304
+ <span>BigCode OpenRAIL-M</span>
305
+ </div>
306
+ <div class="flex justify-between">
307
+ <span class="en">Latency:</span>
308
+ <span class="fa hidden rtl persian-font">تأخیر:</span>
309
+ <span>185ms</span>
310
+ </div>
311
+ </div>
312
+ <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>
313
+ <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>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600 mb-6">
318
+ <h3 class="font-bold mb-3 en">Neural Network Configuration</h3>
319
+ <h3 class="font-bold mb-3 fa hidden rtl persian-font">پیکربندی شبکه عصبی</h3>
320
+ <div class="mb-4">
321
+ <div class="flex justify-between mb-2">
322
+ <span class="en">Model Complexity Level</span>
323
+ <span class="fa hidden rtl persian-font">سطح پیچیدگی مدل</span>
324
+ <span id="complexityValue">Medium</span>
325
+ </div>
326
+ <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">
327
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
328
+ <span class="en">Light</span>
329
+ <span class="fa hidden rtl persian-font">سبک</span>
330
+ <span class="en">Medium</span>
331
+ <span class="fa hidden rtl persian-font">متوسط</span>
332
+ <span class="en">Heavy</span>
333
+ <span class="fa hidden rtl persian-font">سنگین</span>
334
+ </div>
335
+ </div>
336
+ <div class="mb-4">
337
+ <label class="block text-sm font-medium mb-2 en">Custom Model Path (optional):</label>
338
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">مسیر مدل سفارشی (اختیاری):</label>
339
+ <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">
340
+ </div>
341
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg en">Apply Settings</button>
342
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg fa hidden rtl persian-font">اعمال تنظیمات</button>
343
+ </div>
344
+
345
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
346
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
347
+ <h3 class="font-bold mb-3 en">HF ↔ Termux Connection</h3>
348
+ <h3 class="font-bold mb-3 fa hidden rtl persian-font">اتصال HF ↔ ترمکس</h3>
349
+ <div id="connectionGraph" class="w-full"></div>
350
+ </div>
351
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
352
+ <h3 class="font-bold mb-3 en">Neural Network Performance</h3>
353
+ <h3 class="font-bold mb-3 fa hidden rtl persian-font">عملکرد شبکه عصبی</h3>
354
+ <div id="performanceGraph" class="w-full"></div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Logs Tab -->
360
+ <div id="logs" class="tab-content">
361
+ <div class="flex justify-between items-center mb-6">
362
+ <h2 class="text-xl font-bold en">System Logs</h2>
363
+ <h2 class="text-xl font-bold fa hidden rtl persian-font">لاگ‌های سیستم</h2>
364
+ <div class="flex space-x-2">
365
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center space-x-2">
366
+ <i data-feather="download" class="w-4 h-4"></i>
367
+ <span class="en">Export Logs</span>
368
+ <span class="fa hidden rtl persian-font">خروجی لاگ‌ها</span>
369
+ </button>
370
+ <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center space-x-2">
371
+ <i data-feather="trash-2" class="w-4 h-4"></i>
372
+ <span class="en">Clear Logs</span>
373
+ <span class="fa hidden rtl persian-font">پاک کردن لاگ‌ها</span>
374
+ </button>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
379
+ <div class="flex mb-4">
380
+ <button class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 dark:text-blue-400 en">All Logs</button>
381
+ <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>
382
+ <button class="px-4 py-2 text-gray-500 dark:text-gray-400 en">Termux</button>
383
+ <button class="px-4 py-2 text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">ترمکس</button>
384
+ <button class="px-4 py-2 text-gray-500 dark:text-gray-400 en">HF Models</button>
385
+ <button class="px-4 py-2 text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">مدل‌های HF</button>
386
+ <button class="px-4 py-2 text-gray-500 dark:text-gray-400 en">AutoFix</button>
387
+ <button class="px-4 py-2 text-gray-500 dark:text-gray-400 fa hidden rtl persian-font">رفع خودکار</button>
388
+ </div>
389
+
390
+ <div class="space-y-3 max-h-96 overflow-y-auto">
391
+ <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded">
392
+ <div class="flex justify-between items-start">
393
+ <div>
394
+ <span class="text-sm font-medium en">Connected to Termux</span>
395
+ <span class="text-sm font-medium fa hidden rtl persian-font">اتصال به ترمکس برقرار شد</span>
396
+ <p class="text-xs text-gray-500 dark:text-gray-400">Just now</p>
397
+ </div>
398
+ <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>
399
+ </div>
400
+ </div>
401
+ <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded">
402
+ <div class="flex justify-between items-start">
403
+ <div>
404
+ <span class="text-sm font-medium en">Model DeepSeek-Coder loaded</span>
405
+ <span class="text-sm font-medium fa hidden rtl persian-font">مدل DeepSeek-Coder بارگذاری شد</span>
406
+ <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
407
+ </div>
408
+ <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>
409
+ </div>
410
+ </div>
411
+ <div class="error-log p-3 bg-gray-50 dark:bg-gray-800 rounded">
412
+ <div class="flex justify-between items-start">
413
+ <div>
414
+ <span class="text-sm font-medium en">Missing dependency: transformers==4.30.0</span>
415
+ <span class="text-sm font-medium fa hidden rtl persian-font">وابستگی گمشده: transformers==4.30.0</span>
416
+ <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p>
417
+ </div>
418
+ <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>
419
+ </div>
420
+ </div>
421
+ <div class="success-log p-3 bg-gray-50 dark:bg-gray-800 rounded">
422
+ <div class="flex justify-between items-start">
423
+ <div>
424
+ <span class="text-sm font-medium en">AutoFix: Installed transformers==4.30.0</span>
425
+ <span class="text-sm font-medium fa hidden rtl persian-font">رفع خودکار: نصب transformers==4.30.0</span>
426
+ <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p>
427
+ </div>
428
+ <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>
429
+ </div>
430
+ </div>
431
+ <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded">
432
+ <div class="flex justify-between items-start">
433
+ <div>
434
+ <span class="text-sm font-medium en">Code generation completed</span>
435
+ <span class="text-sm font-medium fa hidden rtl persian-font">تولید کد تکمیل شد</span>
436
+ <p class="text-xs text-gray-500 dark:text-gray-400">8 minutes ago</p>
437
+ </div>
438
+ <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>
439
+ </div>
440
+ </div>
441
+ <div class="log-entry p-3 bg-gray-50 dark:bg-gray-800 rounded">
442
+ <div class="flex justify-between items-start">
443
+ <div>
444
+ <span class="text-sm font-medium en">Connected to Hugging Face Hub</span>
445
+ <span class="text-sm font-medium fa hidden rtl persian-font">اتصال به Hugging Face Hub برقرار شد</span>
446
+ <p class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</p>
447
+ </div>
448
+ <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>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Settings Tab -->
456
+ <div id="settings" class="tab-content">
457
+ <div class="flex justify-between items-center mb-6">
458
+ <h2 class="text-xl font-bold en">Settings</h2>
459
+ <h2 class="text-xl font-bold fa hidden rtl persian-font">تنظیمات</h2>
460
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center space-x-2">
461
+ <i data-feather="save" class="w-4 h-4"></i>
462
+ <span class="en">Save Settings</span>
463
+ <span class="fa hidden rtl persian-font">ذخیره تنظیمات</span>
464
+ </button>
465
+ </div>
466
+
467
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
468
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
469
+ <h3 class="font-bold mb-4 en">Application Settings</h3>
470
+ <h3 class="font-bold mb-4 fa hidden rtl persian-font">تنظیمات برنامه</h3>
471
+ <div class="space-y-4">
472
+ <div>
473
+ <label class="block text-sm font-medium mb-2 en">AutoFix Mode</label>
474
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">حالت رفع خودکار</label>
475
+ <div class="flex items-center space-x-4">
476
+ <label class="inline-flex items-center">
477
+ <input type="radio" class="form-radio" name="autofix" checked>
478
+ <span class="ml-2 en">Enabled</span>
479
+ <span class="ml-2 fa hidden rtl persian-font">فعال</span>
480
+ </label>
481
+ <label class="inline-flex items-center">
482
+ <input type="radio" class="form-radio" name="autofix">
483
+ <span class="ml-2 en">Disabled</span>
484
+ <span class="ml-2 fa hidden rtl persian-font">غیرفعال</span>
485
+ </label>
486
+ </div>
487
+ </div>
488
+ <div>
489
+ <label class="block text-sm font-medium mb-2 en">Auto-update Libraries</label>
490
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">بروزرسانی خودکار کتابخانه‌ها</label>
491
+ <div class="flex items-center space-x-4">
492
+ <label class="inline-flex items-center">
493
+ <input type="radio" class="form-radio" name="autoupdate" checked>
494
+ <span class="ml-2 en">Enabled</span>
495
+ <span class="ml-2 fa hidden rtl persian-font">فعال</span>
496
+ </label>
497
+ <label class="inline-flex items-center">
498
+ <input type="radio" class="form-radio" name="autoupdate">
499
+ <span class="ml-2 en">Disabled</span>
500
+ <span class="ml-2 fa hidden rtl persian-font">غیرفعال</span>
501
+ </label>
502
+ </div>
503
+ </div>
504
+ <div>
505
+ <label class="block text-sm font-medium mb-2 en">Default Export Format</label>
506
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">فرمت پیش‌فرض خروجی</label>
507
+ <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800">
508
+ <option class="en">Termux Project</option>
509
+ <option class="fa hidden rtl persian-font">پروژه ترمکس</option>
510
+ <option class="en">Android APK</option>
511
+ <option class="fa hidden rtl persian-font">APK اندروید</option>
512
+ <option class="en">Python Script</option>
513
+ <option class="fa hidden rtl persian-font">اسکریپت پایتون</option>
514
+ </select>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
520
+ <h3 class="font-bold mb-4 en">Library Management</h3>
521
+ <h3 class="font-bold mb-4 fa hidden rtl persian-font">مدیریت کتابخانه‌ها</h3>
522
+ <div class="space-y-4">
523
+ <div>
524
+ <div class="flex justify-between items-center mb-2">
525
+ <span class="text-sm font-medium en">transformers</span>
526
+ <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>
527
+ </div>
528
+ <div class="flex justify-between items-center mb-2">
529
+ <span class="text-sm font-medium en">huggingface-hub</span>
530
+ <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>
531
+ </div>
532
+ <div class="flex justify-between items-center mb-2">
533
+ <span class="text-sm font-medium en">torch</span>
534
+ <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>
535
+ </div>
536
+ </div>
537
+ <button class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center justify-center space-x-2">
538
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
539
+ <span class="en">Check for Updates</span>
540
+ <span class="fa hidden rtl persian-font">بررسی بروزرسانی‌ها</span>
541
+ </button>
542
+ <button class="w-full px-4 py-2 bg-green-500 text-white rounded-lg flex items-center justify-center space-x-2">
543
+ <i data-feather="download" class="w-4 h-4"></i>
544
+ <span class="en">Update All</span>
545
+ <span class="fa hidden rtl persian-font">بروزرسانی همه</span>
546
+ </button>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <div class="mt-6 bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
552
+ <h3 class="font-bold mb-4 en">Advanced Settings</h3>
553
+ <h3 class="font-bold mb-4 fa hidden rtl persian-font">تنظیمات پیشرفته</h3>
554
+ <div class="space-y-4">
555
+ <div>
556
+ <label class="block text-sm font-medium mb-2 en">Custom Termux Path</label>
557
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">مسیر سفارشی ترمکس</label>
558
+ <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">
559
+ </div>
560
+ <div>
561
+ <label class="block text-sm font-medium mb-2 en">API Connection Timeout (ms)</label>
562
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">زمان‌انتظار اتصال API (میلی‌ثانیه)</label>
563
+ <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">
564
+ </div>
565
+ <div>
566
+ <label class="block text-sm font-medium mb-2 en">Max Concurrent Processes</label>
567
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">حداکثر فرآیندهای همزمان</label>
568
+ <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">
569
+ </div>
570
+ <div>
571
+ <label class="block text-sm font-medium mb-2 en">Log Level</label>
572
+ <label class="block text-sm font-medium mb-2 fa hidden rtl persian-font">سطح لاگ‌گیری</label>
573
+ <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800">
574
+ <option class="en">Debug</option>
575
+ <option class="fa hidden rtl persian-font">اشکال‌زدایی</option>
576
+ <option class="en">Info</option>
577
+ <option class="fa hidden rtl persian-font">اطلاعات</option>
578
+ <option class="en">Warning</option>
579
+ <option class="fa hidden rtl persian-font">هشدار</option>
580
+ <option selected class="en">Error</option>
581
+ <option selected class="fa hidden rtl persian-font">خطا</option>
582
+ </select>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="mt-6 bg-white dark:bg-gray-700 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-600">
588
+ <h3 class="font-bold mb-4 en">About</h3>
589
+ <h3 class="font-bold mb-4 fa hidden rtl persian-font">درباره</h3>
590
+ <div class="space-y-2">
591
+ <div class="flex justify-between">
592
+ <span class="text-sm font-medium en">Version:</span>
593
+ <span class="text-sm font-medium fa hidden rtl persian-font">نسخه:</span>
594
+ <span class="text-sm">1.2.0</span>
595
+ </div>
596
+ <div class="flex justify-between">
597
+ <span class="text-sm font-medium en">Last Update:</span>
598
+ <span class="text-sm font-medium fa hidden rtl persian-font">آخرین بروزرسانی:</span>
599
+ <span class="text-sm">2023-11-15</span>
600
+ </div>
601
+ <div class="flex justify-between">
602
+ <span class="text-sm font-medium en">License:</span>
603
+ <span class="text-sm font-medium fa hidden rtl persian-font">مجوز:</span>
604
+ <span class="text-sm">MIT</span>
605
+ </div>
606
+ <div class="flex justify-between">
607
+ <span class="text-sm font-medium en">Developer:</span>
608
+ <span class="text-sm font-medium fa hidden rtl persian-font">توسعه‌دهنده:</span>
609
+ <span class="text-sm">DeepSite Team</span>
610
+ </div>
611
+ </div>
612
+ <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">
613
+ <i data-feather="download" class="w-4 h-4"></i>
614
+ <span class="en">Check for Application Updates</span>
615
+ <span class="fa hidden rtl persian-font">بررسی بروزرسانی برنامه</span>
616
+ </button>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </main>
622
+
623
+ <!-- Footer -->
624
+ <footer class="bg-white dark:bg-gray-800 py-4 px-6 border-t border-gray-200 dark:border-gray-700">
625
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
626
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
627
+ <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
628
+ <i data-feather="cpu" class="text-white w-4 h-4"></i>
629
+ </div>
630
+ <span class="text-sm en">DeepSite-Termux-App-Builder © 2023</span>
631
+ <span class="text-sm fa hidden rtl persian-font">DeepSite-Termux-App-Builder © ۲۰۲۳</span>
632
+ </div>
633
+ <div class="flex space-x-4">
634
+ <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 en">Documentation</a>
635
+ <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>
636
+ <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 en">Support</a>
637
+ <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>
638
+ <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>
639
+ <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>
640
+ </div>
641
+ </div>
642
+ </footer>
643
+ </div>
644
+
645
+ <script>
646
+ // Initialize components
647
+ document.addEventListener('DOMContentLoaded', function() {
648
+ // Initialize feather icons
649
+ feather.replace();
650
+
651
+ // Initialize AOS animations
652
+ AOS.init();
653
+
654
+ // Tab switching functionality
655
+ window.switchTab = function(tabId) {
656
+ // Hide all tab contents
657
+ document.querySelectorAll('.tab-content').forEach(tab => {
658
+ tab.classList.remove('active');
659
+ });
660
+
661
+ // Show selected tab content
662
+ document.getElementById(tabId).classList.add('active');
663
+
664
+ // Update active tab button style
665
+ document.querySelectorAll('.tab-button').forEach(button => {
666
+ button.classList.remove('bg-blue-100', 'dark:bg-blue-900', 'text-blue-700', 'dark:text-blue-200');
667
+ button.classList.add('hover:bg-gray-100', 'dark:hover:bg-gray-700');
668
+ });
669
+
670
+ // Set active button
671
+ const activeButton = document.querySelector(`button[onclick="switchTab('${tabId}')"]`);
672
+ activeButton.classList.add('bg-blue-100', 'dark:bg-blue-900', 'text-blue-700', 'dark:text-blue-200');
673
+ activeButton.classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-700');
674
+ };
675
+
676
+ // Theme toggle functionality
677
+ const themeToggle = document.getElementById('themeToggle');
678
+ themeToggle.addEventListener('click', function() {
679
+ document.documentElement.classList.toggle('dark');
680
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
681
+ feather.replace();
682
+ });
683
+
684
+ // Check for saved theme preference
685
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
686
+ document.documentElement.classList.add('dark');
687
+ }
688
+
689
+ // Language toggle functionality
690
+ window.changeLanguage = function(lang) {
691
+ if (lang === 'en') {
692
+ document.querySelectorAll('.en').forEach(el => el.classList.remove('hidden'));
693
+ document.querySelectorAll('.fa').forEach(el => el.classList.add('hidden'));
694
+ document.documentElement.setAttribute('dir', 'ltr');
695
+ document.querySelector('.language-flag').textContent = '🇬🇧';
696
+ } else {
697
+ document.querySelectorAll('.en').forEach(el => el.classList.add('hidden'));
698
+ document.querySelectorAll('.fa').forEach(el => el.classList.remove('hidden'));
699
+ document.documentElement.setAttribute('dir', 'rtl');
700
+ document.querySelector('.language-flag').textContent = '🇮🇷';
701
+ }
702
+ localStorage.setItem('language', lang);
703
+ };
704
+
705
+ // Check for saved language preference
706
+ if (localStorage.getItem('language') === 'fa') {
707
+ changeLanguage('fa');
708
+ }
709
+
710
+ // Model complexity slider
711
+ const complexitySlider = document.getElementById('complexitySlider');
712
+ const complexityValue = document.getElementById('complexityValue');
713
+
714
+ complexitySlider.addEventListener('input', function() {
715
+ const value = parseInt(this.value);
716
+ let text = '';
717
+
718
+ if (value === 1) text = 'Very Light';
719
+ else if (value === 2) text = 'Light';
720
+ else if (value === 3) text = 'Medium';
721
+ else if (value === 4) text = 'Heavy';
722
+ else text = 'Very Heavy';
723
+
724
+ complexityValue.textContent = text;
725
+ });
726
+
727
+ // Initialize D3.js graphs
728
+ createMiniPerformanceGraph();
729
+ createConnectionGraph();
730
+ createPerformanceGraph();
731
+
732
+ // Syntax highlighting
733
+ document.querySelectorAll('pre code').forEach((block) => {
734
+ hljs.highlightElement(block);
735
+ });
736
+ });
737
+
738
+ function createMiniPerformanceGraph() {
739
+ const data = Array.from({length: 20}, (_, i) => Math.random() * 100);
740
+
741
+ const svg = d3.select("#miniPerformanceGraph")
742
+ .append("svg")
743
+ .attr("width", "100%")
744
+ .attr("height", "100%");
745
+
746
+ const margin = {top: 5, right: 5, bottom: 5, left: 5};
747
+ const width = svg.node().getBoundingClientRect().width - margin.left - margin.right;
748
+ const height = svg.node().getBoundingClientRect().height - margin.top - margin.bottom;
749
+
750
+ const x = d3.scaleLinear()
751
+ .domain([0, data.length - 1])
752
+ .range([0, width]);
753
+
754
+ const y = d3.scaleLinear()
755
+ .domain([0, 100])
756
+ .range([height, 0]);
757
+
758
+ const line = d3.line()
759
+ .x((d, i) => x(i))
760
+ .y(d => y(d))
761
+ .curve(d3.curveBasis);
762
+
763
+ svg.append("path")
764
+ .datum(data)
765
+ .attr("fill", "none")
766
+ .attr("stroke", "#3b82f6")
767
+ .attr("stroke-width", 2)
768
+ .attr("d", line);
769
+ }
770
+
771
+ function createConnectionGraph() {
772
+ const data = Array.from({length: 15}, (_, i) => ({
773
+ time: i,
774
+ latency: 50 + Math.random() * 150,
775
+ throughput: 0.5 + Math.random() * 0.5
776
+ }));
777
+
778
+ const svg = d3.select("#connectionGraph")
779
+ .append("svg")
780
+ .attr("width", "100%")
781
+ .attr("height", "100%");
782
+
783
+ const margin = {top: 20, right: 20, bottom: 30, left: 40};
784
+ const width = svg.node().getBoundingClientRect().width - margin.left - margin.right;
785
+ const height = svg.node().getBoundingClientRect().height - margin.top - margin.bottom;
786
+
787
+ const x = d3.scaleLinear()
788
+ .domain([0, data.length - 1])
789
+ .range([0, width]);
790
+
791
+ const y1 = d3.scaleLinear()
792
+ .domain([0, 300])
793
+ .range([height, 0]);
794
+
795
+ const y2 = d3.scaleLinear()
796
+ .domain([0, 1])
797
+ .range([height, 0]);
798
+
799
+ const g = svg.append("g")
800
+ .attr("transform", `translate(${margin.left},${margin.top})`);
801
+
802
+ // Add latency line
803
+ g.append("path")
804
+ .datum(data)
805
+ .attr("fill", "none")
806
+ .attr("stroke", "#3b82f6")
807
+ .attr("stroke-width", 2)
808
+ .attr("d", d3.line()
809
+ .x(d => x(d.time))
810
+ .y(d => y1(d.latency))
811
+ );
812
+
813
+ // Add throughput line
814
+ g.append("path")
815
+ .datum(data)
816
+ .attr("fill", "none")
817
+ .attr("stroke", "#10b981")
818
+ .attr("stroke-width", 2)
819
+ .attr("d", d3.line()
820
+ .x(d => x(d.time))
821
+ .y(d => y2(d.throughput))
822
+ );
823
+
824
+ // Add axes
825
+ g.append("g")
826
+ .attr("transform", `translate(0,${height})`)
827
+ .call(d3.axisBottom(x).ticks(5));
828
+
829
+ g.append("g")
830
+ .call(d3.axisLeft(y1).ticks(5));
831
+
832
+ // Add legend
833
+ const legend = g.append("g")
834
+ .attr("transform", `translate(${width - 100},10)`);
835
+
836
+ legend.append("rect")
837
+ .attr("x", 0)
838
+ .attr("y", 0)
839
+ .attr("width", 10)
840
+ .attr("height", 10)
841
+ .attr("fill", "#3b82f6");
842
+
843
+ legend.append("text")
844
+ .attr("x", 15)
845
+ .attr("y", 10)
846
+ .attr("font-size", "10px")
847
+ .text("Latency (ms)");
848
+
849
+ legend.append("rect")
850
+ .attr("x", 0)
851
+ .attr("y", 20)
852
+ .attr("width", 10)
853
+ .attr("height", 10)
854
+ .attr("fill", "#10b981");
855
+
856
+ legend.append("text")
857
+ .attr("x", 15)
858
+ .attr("y", 30)
859
+ .attr("font-size", "10px")
860
+ .text("Throughput");
861
+ }
862
+
863
+ function createPerformanceGraph() {
864
+ const data = Array.from({length: 15}, (_, i) => ({
865
+ time: i,
866
+ cpu: 20 + Math.random() * 60,
867
+ memory: 30 + Math.random() * 50,
868
+ gpu: 10 + Math.random() * 30
869
+ }));
870
+
871
+ const svg = d3.select("#performanceGraph")
872
+ .append("svg")
873
+ .attr("width", "100%")
874
+ .attr("height", "100%");
875
+
876
+ const margin = {top: 20, right: 20, bottom: 30, left: 40};
877
+ const width = svg.node().getBoundingClientRect().width - margin.left - margin.right;
878
+ const height = svg.node().getBoundingClientRect().height - margin.top - margin.bottom;
879
+
880
+ const x = d3.scaleLinear()
881
+ .domain([0, data.length - 1])
882
+ .range([0, width]);
883
+
884
+ const y = d3.scaleLinear()
885
+ .domain([0, 100])
886
+ .range([height, 0]);
887
+
888
+ const g = svg.append("g")
889
+ .attr("transform", `translate(${margin.left},${margin.top})`);
890
+
891
+ // Add CPU line
892
+ g.append("path")
893
+ .datum(data)
894
+ .attr("fill", "none")
895
+ .attr("stroke", "#ef4444")
896
+ .attr("stroke-width", 2)
897
+ .attr("d", d3.line()
898
+ .x(d => x(d.time))
899
+ .y(d => y(d.cpu))
900
+ );
901
+
902
+ // Add Memory line
903
+ g.append("path")
904
+ .datum(data)
905
+ .attr("fill", "none")
906
+ .attr("stroke", "#f59e0b")
907
+ .attr("stroke-width", 2)
908
+ .attr("d", d3.line()
909
+ .x(d => x(d.time))
910
+ .y(d => y(d.memory))
911
+ );
912
+
913
+ // Add GPU line
914
+ g.append("path")
915
+ .datum(data)
916
+ .attr("fill", "none")
917
+ .attr("stroke", "#8b5cf6")
918
+ .attr("stroke-width", 2)
919
+ .attr("d", d3.line()
920
+ .x(d => x(d.time))
921
+ .y(d => y(d.gpu))
922
+ );
923
+
924
+ // Add axes
925
+ g.append("g")
926
+ .attr("transform", `translate(0,${height})`)
927
+ .call(d3.axisBottom(x).ticks(5));
928
+
929
+ g.append("g")
930
+ .call(d3.axisLeft(y).ticks(5));
931
+
932
+ // Add legend
933
+ const legend = g.append("g")
934
+ .attr("transform", `translate(${width - 100},10)`);
935
+
936
+ legend.append("rect")
937
+ .attr("x", 0)
938
+ .attr("y", 0)
939
+ .attr("width", 10)
940
+ .attr("height", 10)
941
+ .attr("fill", "#ef4444");
942
+
943
+ legend.append("text")
944
+ .attr("x", 15)
945
+ .attr("y", 10)
946
+ .attr("font-size", "10px")
947
+ .text("CPU (%)");
948
+
949
+ legend.append("rect")
950
+ .attr("x", 0)
951
+ .attr("y", 20)
952
+ .attr("width", 10)
953
+ .attr("height", 10)
954
+ .attr("fill", "#f59e0b");
955
+
956
+ legend.append("text")
957
+ .attr("x", 15)
958
+ .attr("y", 30)
959
+ .attr("font-size", "10px")
960
+ .text("Memory (%)");
961
+
962
+ legend.append("rect")
963
+ .attr("x", 0)
964
+ .attr("y", 40)
965
+ .attr("width", 10)
966
+ .attr("height", 10)
967
+ .attr("fill", "#8b5cf6");
968
+
969
+ legend.append("text")
970
+ .attr("x", 15)
971
+ .attr("y", 50)
972
+ .attr("font-size", "10px")
973
+ .text("GPU (%)");
974
+ }
975
+ </script>
976
+ </body>
977
  </html>
prompts.txt ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ I want you to build a Hugging Face Space called **DeepSite-Termux-App-Builder** with the following full professional features:
2
+
3
+ 1. **Core Functionality**
4
+ - The app must be bilingual (English + Persian) for chat, code generation, and logs.
5
+ - Provide the same level of **code generation, preview, and refinement power as Deepsite itself**.
6
+ - Output must be fully usable in Termux (Linux inside Android) and also exportable as APK for Android.
7
+
8
+ 2. **HF Models Integration**
9
+ - Allow connection to Hugging Face Hub, select and run models (DeepSeek and others).
10
+ - Show model details: name, version, license, latency (ping).
11
+ - Allow switching between models dynamically.
12
+ - Provide a configurable **neural network usage level slider** (to adjust model complexity).
13
+ - Display these settings in D3-based graphs (real-time monitoring of model and neural activity).
14
+
15
+ 3. **Code Generation & Execution**
16
+ - Multi-step code generation with **syntax-highlighted preview** before saving.
17
+ - Auto-create proper folder and file structure (no incomplete files).
18
+ - Include a pre-installed **requirements file** and a complete **LLM library** for HF model interaction.
19
+ - Allow library upgrades with a button (show library version, changelog, and update confirmation dialog).
20
+ - Auto-log every action (model, library, task, time).
21
+
22
+ 4. **Error Handling & Auto-Fix**
23
+ - Monitor Termux logs in real time.
24
+ - Automatically detect and fix common errors (AutoFix mode).
25
+ - If a fix is applied, show it in a visual “AutoCode Patch” box inside the app.
26
+ - For critical updates, ask the user with a Yes/No confirmation box.
27
+
28
+ 5. **Graph & Monitoring**
29
+ - Use **D3.js graphs** for both sides:
30
+ - HF ↔ Termux connection monitoring.
31
+ - Neural network usage levels and system performance.
32
+ - Allow saving/loading custom D3 graphs for roadmap visualization.
33
+
34
+ 6. **User Interface**
35
+ - Professional, modern UI with beautiful graphics.
36
+ - Multi-tab layout:
37
+ - **Chat/Code** (interaction, generation, preview).
38
+ - **Models** (HF model selection & monitoring).
39
+ - **Logs** (real-time system and Termux logs).
40
+ - **Settings** (update, library management, neural net settings, advanced options).
41
+ - Dark/Light theme support.
42
+ - Smooth animations and clean design.
43
+
44
+ 7. **Updates & Maintenance**
45
+ - Built-in updater for both Termux and the app itself.
46
+ - Show update notification box with “Apply / Skip” options.
47
+ - Add expandable **Advanced Settings** for future features.
48
+ - Ensure the app always remains up-to-date and in sync with HF.
49
+
50
+ ---
51
+
52
+ 📌 In summary: Build a Hugging Face Space that works as a **Deepsite-powered App Builder for Termux + Android**, bilingual, graph-powered (D3), error self-healing, fully connected to HF models, with professional UI and update system.