Hugging Face's logo

Spaces:
st3phan3m
/
llama-fine-tuner
Running

App Files Community
st3phan3m commited on
Commit
ffc89db
·
verified ·
1 Parent(s): e57634a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +618 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Llama Fine Tuner
3
- emoji: 🔥
4
  colorFrom: blue
5
- colorTo: pink
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: llama-fine-tuner
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: red
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,618 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Llama-3.2-3B Fine-Tuning Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F3F4F6',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .progress-bar {
25
+ transition: width 0.5s ease-in-out;
26
+ }
27
+ .model-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ }
31
+ .animate-pulse {
32
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
33
+ }
34
+ @keyframes pulse {
35
+ 0%, 100% {
36
+ opacity: 1;
37
+ }
38
+ 50% {
39
+ opacity: 0.5;
40
+ }
41
+ }
42
+ .code-block {
43
+ font-family: 'Courier New', Courier, monospace;
44
+ background-color: #1E293B;
45
+ color: #F8FAFC;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="container mx-auto px-4 py-8">
51
+ <!-- Header -->
52
+ <header class="mb-10">
53
+ <div class="flex justify-between items-center">
54
+ <div>
55
+ <h1 class="text-4xl font-bold text-dark">Llama Fine-Tuner</h1>
56
+ <p class="text-gray-600 mt-2">Fine-tune Llama-3.2-3B-Instruct model with your custom dataset</p>
57
+ </div>
58
+ <div class="flex items-center space-x-4">
59
+ <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-indigo-700 transition">
60
+ <i class="fas fa-user mr-2"></i>Sign In
61
+ </button>
62
+ <button class="px-4 py-2 border border-primary text-primary rounded-lg hover:bg-indigo-50 transition">
63
+ <i class="fas fa-cloud mr-2"></i>HuggingFace
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
71
+ <!-- Left Panel - Model Info -->
72
+ <div class="lg:col-span-1 space-y-6">
73
+ <div class="bg-white p-6 rounded-xl shadow-md model-card transition">
74
+ <div class="flex items-center mb-4">
75
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center">
76
+ <i class="fas fa-robot text-3xl text-primary"></i>
77
+ </div>
78
+ <div class="ml-4">
79
+ <h3 class="text-xl font-semibold">Llama-3.2-3B-Instruct</h3>
80
+ <p class="text-gray-500">GGUF Format</p>
81
+ </div>
82
+ </div>
83
+ <div class="space-y-4">
84
+ <div>
85
+ <p class="text-gray-600 mb-1">Model Size</p>
86
+ <p class="font-medium">3.2 Billion Parameters</p>
87
+ </div>
88
+ <div>
89
+ <p class="text-gray-600 mb-1">Precision</p>
90
+ <p class="font-medium">16-bit Floating Point (f16)</p>
91
+ </div>
92
+ <div>
93
+ <p class="text-gray-600 mb-1">Source</p>
94
+ <a href="https://huggingface.co/bartowski/Llama-3.2-3B-Instruct-GGUF/blob/main/Llama-3.2-3B-Instruct-f16.gguf"
95
+ class="text-primary hover:underline" target="_blank">
96
+ <i class="fas fa-external-link-alt mr-1"></i>HuggingFace Repository
97
+ </a>
98
+ </div>
99
+ </div>
100
+ <div class="mt-6 pt-4 border-t border-gray-200">
101
+ <button id="loadModelBtn" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center">
102
+ <i class="fas fa-cloud-download-alt mr-2"></i>Load Model
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="bg-white p-6 rounded-xl shadow-md">
108
+ <h3 class="text-lg font-semibold mb-4">System Requirements</h3>
109
+ <div class="space-y-3">
110
+ <div class="flex items-center">
111
+ <i class="fas fa-memory text-secondary mr-3"></i>
112
+ <span>Minimum 16GB RAM</span>
113
+ </div>
114
+ <div class="flex items-center">
115
+ <i class="fas fa-microchip text-secondary mr-3"></i>
116
+ <span>GPU with 8GB VRAM recommended</span>
117
+ </div>
118
+ <div class="flex items-center">
119
+ <i class="fas fa-hdd text-secondary mr-3"></i>
120
+ <span>6GB Disk Space</span>
121
+ </div>
122
+ </div>
123
+ <div class="mt-6">
124
+ <h4 class="font-medium mb-2">Current System Status</h4>
125
+ <div class="space-y-2">
126
+ <div>
127
+ <div class="flex justify-between text-sm mb-1">
128
+ <span>Memory</span>
129
+ <span id="memoryUsage">Loading...</span>
130
+ </div>
131
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
132
+ <div id="memoryBar" class="bg-secondary h-2.5 rounded-full progress-bar" style="width: 0%"></div>
133
+ </div>
134
+ </div>
135
+ <div>
136
+ <div class="flex justify-between text-sm mb-1">
137
+ <span>GPU</span>
138
+ <span id="gpuStatus">Checking...</span>
139
+ </div>
140
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
141
+ <div id="gpuBar" class="bg-secondary h-2.5 rounded-full progress-bar" style="width: 0%"></div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Center Panel - Fine-Tuning Configuration -->
150
+ <div class="lg:col-span-2 space-y-6">
151
+ <div class="bg-white p-6 rounded-xl shadow-md">
152
+ <h2 class="text-2xl font-semibold mb-6">Fine-Tuning Configuration</h2>
153
+
154
+ <!-- Step 1: Dataset -->
155
+ <div class="mb-8">
156
+ <div class="flex items-center mb-4">
157
+ <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">1</div>
158
+ <h3 class="text-lg font-medium">Upload Training Dataset</h3>
159
+ </div>
160
+ <div class="pl-11">
161
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
162
+ <i class="fas fa-file-upload text-4xl text-gray-400 mb-3"></i>
163
+ <p class="mb-2">Drag & drop your dataset file here</p>
164
+ <p class="text-sm text-gray-500 mb-4">Supports JSON, CSV, or TXT formats</p>
165
+ <input type="file" id="datasetInput" class="hidden" accept=".json,.csv,.txt">
166
+ <label for="datasetInput" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg cursor-pointer transition">
167
+ Select File
168
+ </label>
169
+ </div>
170
+ <div id="datasetInfo" class="hidden">
171
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
172
+ <div class="flex items-center">
173
+ <i class="fas fa-file-alt text-gray-500 mr-3"></i>
174
+ <div>
175
+ <p id="fileName" class="font-medium"></p>
176
+ <p id="fileSize" class="text-sm text-gray-500"></p>
177
+ </div>
178
+ </div>
179
+ <button id="removeDatasetBtn" class="text-red-500 hover:text-red-700">
180
+ <i class="fas fa-times"></i>
181
+ </button>
182
+ </div>
183
+ <div class="mt-3">
184
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dataset Format</label>
185
+ <select id="datasetFormat" class="w-full p-2 border border-gray-300 rounded-lg">
186
+ <option value="alpaca">Alpaca Format</option>
187
+ <option value="chatml">ChatML</option>
188
+ <option value="custom">Custom Format</option>
189
+ </select>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Step 2: Training Parameters -->
196
+ <div class="mb-8">
197
+ <div class="flex items-center mb-4">
198
+ <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">2</div>
199
+ <h3 class="text-lg font-medium">Training Parameters</h3>
200
+ </div>
201
+ <div class="pl-11">
202
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
203
+ <div>
204
+ <label class="block text-sm font-medium text-gray-700 mb-1">Learning Rate</label>
205
+ <input type="range" id="learningRate" min="0.00001" max="0.01" step="0.00001" value="0.0002" class="w-full">
206
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
207
+ <span>1e-5</span>
208
+ <span id="learningRateValue">2e-4</span>
209
+ <span>1e-2</span>
210
+ </div>
211
+ </div>
212
+ <div>
213
+ <label class="block text-sm font-medium text-gray-700 mb-1">Batch Size</label>
214
+ <select id="batchSize" class="w-full p-2 border border-gray-300 rounded-lg">
215
+ <option value="1">1</option>
216
+ <option value="2">2</option>
217
+ <option value="4" selected>4</option>
218
+ <option value="8">8</option>
219
+ <option value="16">16</option>
220
+ </select>
221
+ </div>
222
+ </div>
223
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
224
+ <div>
225
+ <label class="block text-sm font-medium text-gray-700 mb-1">Epochs</label>
226
+ <input type="number" id="epochs" min="1" max="20" value="3" class="w-full p-2 border border-gray-300 rounded-lg">
227
+ </div>
228
+ <div>
229
+ <label class="block text-sm font-medium text-gray-700 mb-1">LoRA Rank</label>
230
+ <input type="number" id="loraRank" min="8" max="128" value="64" class="w-full p-2 border border-gray-300 rounded-lg">
231
+ </div>
232
+ </div>
233
+ <div class="mt-4">
234
+ <label class="flex items-center">
235
+ <input type="checkbox" id="useQLoRA" class="rounded text-primary">
236
+ <span class="ml-2 text-sm font-medium">Use QLoRA (4-bit quantization)</span>
237
+ </label>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Step 3: Start Training -->
243
+ <div>
244
+ <div class="flex items-center mb-4">
245
+ <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">3</div>
246
+ <h3 class="text-lg font-medium">Start Fine-Tuning</h3>
247
+ </div>
248
+ <div class="pl-11">
249
+ <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
250
+ <div class="mb-4 sm:mb-0">
251
+ <h4 class="font-medium">Output Model Name</h4>
252
+ <input type="text" id="modelName" placeholder="my-finetuned-llama" class="p-2 border border-gray-300 rounded-lg w-full sm:w-64">
253
+ </div>
254
+ <button id="startTrainingBtn" class="px-6 py-3 bg-secondary text-white rounded-lg hover:bg-emerald-700 transition flex items-center justify-center disabled:opacity-50" disabled>
255
+ <i class="fas fa-play mr-2"></i>Start Training
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Training Output -->
263
+ <div id="trainingOutput" class="bg-white p-6 rounded-xl shadow-md hidden">
264
+ <div class="flex justify-between items-center mb-4">
265
+ <h3 class="text-lg font-semibold">Training Progress</h3>
266
+ <div class="flex items-center space-x-2">
267
+ <span id="trainingStatus" class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Pending</span>
268
+ <button id="stopTrainingBtn" class="text-red-500 hover:text-red-700">
269
+ <i class="fas fa-stop"></i>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ <div class="mb-4">
274
+ <div class="flex justify-between text-sm mb-1">
275
+ <span>Progress</span>
276
+ <span id="trainingProgressText">0%</span>
277
+ </div>
278
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
279
+ <div id="trainingProgressBar" class="bg-primary h-2.5 rounded-full progress-bar" style="width: 0%"></div>
280
+ </div>
281
+ </div>
282
+ <div class="mb-4">
283
+ <div class="flex justify-between text-sm mb-1">
284
+ <span>Current Epoch</span>
285
+ <span id="currentEpoch">0/0</span>
286
+ </div>
287
+ </div>
288
+ <div class="mb-4">
289
+ <div class="flex justify-between text-sm mb-1">
290
+ <span>Loss</span>
291
+ <span id="currentLoss">-</span>
292
+ </div>
293
+ </div>
294
+ <div class="bg-gray-800 text-white p-3 rounded-lg overflow-auto max-h-60">
295
+ <pre id="trainingLog" class="text-sm code-block">Waiting for training to start...</pre>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Model Testing -->
300
+ <div id="modelTesting" class="bg-white p-6 rounded-xl shadow-md hidden">
301
+ <h3 class="text-lg font-semibold mb-4">Test Your Fine-Tuned Model</h3>
302
+ <div class="mb-4">
303
+ <label class="block text-sm font-medium text-gray-700 mb-1">Input Prompt</label>
304
+ <textarea id="testPrompt" rows="3" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="Enter your prompt here..."></textarea>
305
+ </div>
306
+ <div class="flex justify-between">
307
+ <div>
308
+ <label class="flex items-center">
309
+ <input type="checkbox" id="useOriginalModel" class="rounded text-primary">
310
+ <span class="ml-2 text-sm font-medium">Compare with original model</span>
311
+ </label>
312
+ </div>
313
+ <button id="runTestBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-indigo-700 transition">
314
+ <i class="fas fa-play mr-1"></i> Run Test
315
+ </button>
316
+ </div>
317
+ <div id="testResults" class="mt-4 space-y-4 hidden">
318
+ <div class="p-4 bg-gray-50 rounded-lg">
319
+ <div class="flex items-center mb-2">
320
+ <div class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center mr-2">
321
+ <i class="fas fa-robot text-xs"></i>
322
+ </div>
323
+ <h4 class="font-medium">Fine-Tuned Model</h4>
324
+ </div>
325
+ <div id="finetunedOutput" class="text-gray-700"></div>
326
+ </div>
327
+ <div id="originalModelOutput" class="p-4 bg-gray-50 rounded-lg hidden">
328
+ <div class="flex items-center mb-2">
329
+ <div class="w-6 h-6 rounded-full bg-gray-500 text-white flex items-center justify-center mr-2">
330
+ <i class="fas fa-robot text-xs"></i>
331
+ </div>
332
+ <h4 class="font-medium">Original Model</h4>
333
+ </div>
334
+ <div id="originalOutput" class="text-gray-700"></div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Footer -->
342
+ <footer class="mt-16 pt-8 border-t border-gray-200">
343
+ <div class="flex flex-col md:flex-row justify-between items-center">
344
+ <div class="mb-4 md:mb-0">
345
+ <p class="text-gray-600">Llama Fine-Tuner v1.0</p>
346
+ </div>
347
+ <div class="flex space-x-6">
348
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-github"></i></a>
349
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-twitter"></i></a>
350
+ <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-discord"></i></a>
351
+ </div>
352
+ </div>
353
+ </footer>
354
+ </div>
355
+
356
+ <script>
357
+ // System status simulation
358
+ function updateSystemStatus() {
359
+ // Simulate memory usage
360
+ const memoryPercent = Math.floor(Math.random() * 30) + 30;
361
+ document.getElementById('memoryUsage').textContent = `${memoryPercent}% used`;
362
+ document.getElementById('memoryBar').style.width = `${memoryPercent}%`;
363
+
364
+ // Simulate GPU status
365
+ const gpuPercent = Math.floor(Math.random() * 20) + 10;
366
+ const gpuStatus = gpuPercent < 15 ? 'Idle' : 'Active';
367
+ document.getElementById('gpuStatus').textContent = `${gpuStatus} (${gpuPercent}%)`;
368
+ document.getElementById('gpuBar').style.width = `${gpuPercent}%`;
369
+ document.getElementById('gpuBar').className = gpuStatus === 'Active' ?
370
+ 'bg-secondary h-2.5 rounded-full progress-bar' :
371
+ 'bg-gray-400 h-2.5 rounded-full progress-bar';
372
+ }
373
+
374
+ // Update system status every 3 seconds
375
+ setInterval(updateSystemStatus, 3000);
376
+ updateSystemStatus();
377
+
378
+ // Dataset file handling
379
+ const datasetInput = document.getElementById('datasetInput');
380
+ const datasetInfo = document.getElementById('datasetInfo');
381
+ const fileName = document.getElementById('fileName');
382
+ const fileSize = document.getElementById('fileSize');
383
+ const removeDatasetBtn = document.getElementById('removeDatasetBtn');
384
+ const startTrainingBtn = document.getElementById('startTrainingBtn');
385
+
386
+ datasetInput.addEventListener('change', function(e) {
387
+ if (e.target.files.length > 0) {
388
+ const file = e.target.files[0];
389
+ fileName.textContent = file.name;
390
+ fileSize.textContent = formatFileSize(file.size);
391
+ datasetInfo.classList.remove('hidden');
392
+ checkStartButton();
393
+ }
394
+ });
395
+
396
+ removeDatasetBtn.addEventListener('click', function() {
397
+ datasetInput.value = '';
398
+ datasetInfo.classList.add('hidden');
399
+ checkStartButton();
400
+ });
401
+
402
+ function formatFileSize(bytes) {
403
+ if (bytes === 0) return '0 Bytes';
404
+ const k = 1024;
405
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
406
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
407
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
408
+ }
409
+
410
+ // Training parameters
411
+ const learningRate = document.getElementById('learningRate');
412
+ const learningRateValue = document.getElementById('learningRateValue');
413
+
414
+ learningRate.addEventListener('input', function() {
415
+ const value = parseFloat(learningRate.value);
416
+ learningRateValue.textContent = value.toExponential(2);
417
+ });
418
+
419
+ // Model loading
420
+ const loadModelBtn = document.getElementById('loadModelBtn');
421
+ let modelLoaded = false;
422
+
423
+ loadModelBtn.addEventListener('click', function() {
424
+ if (modelLoaded) return;
425
+
426
+ loadModelBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> Loading...';
427
+ loadModelBtn.disabled = true;
428
+
429
+ // Simulate model loading
430
+ setTimeout(() => {
431
+ modelLoaded = true;
432
+ loadModelBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Model Loaded';
433
+ loadModelBtn.className = 'w-full py-3 bg-green-500 text-white rounded-lg flex items-center justify-center';
434
+ checkStartButton();
435
+
436
+ // Show success notification
437
+ showNotification('Model loaded successfully!', 'success');
438
+ }, 3000);
439
+ });
440
+
441
+ // Check if we can enable the start training button
442
+ function checkStartButton() {
443
+ startTrainingBtn.disabled = !(modelLoaded && datasetInput.files.length > 0);
444
+ }
445
+
446
+ // Training simulation
447
+ const trainingOutput = document.getElementById('trainingOutput');
448
+ const trainingProgressBar = document.getElementById('trainingProgressBar');
449
+ const trainingProgressText = document.getElementById('trainingProgressText');
450
+ const currentEpoch = document.getElementById('currentEpoch');
451
+ const currentLoss = document.getElementById('currentLoss');
452
+ const trainingLog = document.getElementById('trainingLog');
453
+ const trainingStatus = document.getElementById('trainingStatus');
454
+ const stopTrainingBtn = document.getElementById('stopTrainingBtn');
455
+ const modelTesting = document.getElementById('modelTesting');
456
+
457
+ startTrainingBtn.addEventListener('click', function() {
458
+ // Get training parameters
459
+ const modelName = document.getElementById('modelName').value || 'my-finetuned-llama';
460
+ const epochs = parseInt(document.getElementById('epochs').value);
461
+ const batchSize = parseInt(document.getElementById('batchSize').value);
462
+ const lr = parseFloat(learningRate.value);
463
+ const loraRank = parseInt(document.getElementById('loraRank').value);
464
+ const useQLoRA = document.getElementById('useQLoRA').checked;
465
+
466
+ // Show training output
467
+ trainingOutput.classList.remove('hidden');
468
+ startTrainingBtn.disabled = true;
469
+ trainingStatus.textContent = 'Training';
470
+ trainingStatus.className = 'px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full';
471
+
472
+ // Show command that would be run
473
+ let command = `python -m llama_finetuning \\\n`;
474
+ command += ` --model_path "Llama-3.2-3B-Instruct-f16.gguf" \\\n`;
475
+ command += ` --data_path "${datasetInput.files[0].name}" \\\n`;
476
+ command += ` --output_dir "./output/${modelName}" \\\n`;
477
+ command += ` --epochs ${epochs} \\\n`;
478
+ command += ` --batch_size ${batchSize} \\\n`;
479
+ command += ` --learning_rate ${lr.toExponential(5)} \\\n`;
480
+ command += ` --lora_rank ${loraRank}`;
481
+
482
+ if (useQLoRA) {
483
+ command += ` \\\n --use_qlora`;
484
+ }
485
+
486
+ trainingLog.textContent = `Starting fine-tuning with command:\n\n${command}\n\n`;
487
+
488
+ // Simulate training progress
489
+ let progress = 0;
490
+ let currentEpochCount = 0;
491
+ const totalSteps = epochs * 100; // Assuming 100 steps per epoch
492
+
493
+ const trainingInterval = setInterval(() => {
494
+ progress += 1;
495
+ const percent = Math.min(Math.floor((progress / totalSteps) * 100), 100);
496
+
497
+ trainingProgressBar.style.width = `${percent}%`;
498
+ trainingProgressText.textContent = `${percent}%`;
499
+
500
+ // Update epoch counter every 100 steps
501
+ if (progress % 100 === 0) {
502
+ currentEpochCount += 1;
503
+ currentEpoch.textContent = `${currentEpochCount}/${epochs}`;
504
+
505
+ // Simulate loss decreasing
506
+ const loss = (2.5 - (currentEpochCount * 0.7)).toFixed(4);
507
+ currentLoss.textContent = loss;
508
+
509
+ // Add to log
510
+ trainingLog.textContent += `[Epoch ${currentEpochCount}/${epochs}] Loss: ${loss}\n`;
511
+ trainingLog.scrollTop = trainingLog.scrollHeight;
512
+ }
513
+
514
+ // Training complete
515
+ if (progress >= totalSteps) {
516
+ clearInterval(trainingInterval);
517
+ trainingStatus.textContent = 'Completed';
518
+ trainingStatus.className = 'px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full';
519
+ currentLoss.textContent = '1.2345'; // Final loss
520
+
521
+ // Show model testing section
522
+ modelTesting.classList.remove('hidden');
523
+
524
+ // Show success notification
525
+ showNotification('Fine-tuning completed successfully!', 'success');
526
+
527
+ // Update log
528
+ trainingLog.textContent += `\nTraining completed! Model saved to ./output/${modelName}\n`;
529
+ }
530
+ }, 100);
531
+
532
+ // Stop training button
533
+ stopTrainingBtn.addEventListener('click', function() {
534
+ clearInterval(trainingInterval);
535
+ trainingStatus.textContent = 'Stopped';
536
+ trainingStatus.className = 'px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full';
537
+ startTrainingBtn.disabled = false;
538
+
539
+ // Show warning notification
540
+ showNotification('Training stopped by user', 'warning');
541
+ });
542
+ });
543
+
544
+ // Model testing
545
+ const runTestBtn = document.getElementById('runTestBtn');
546
+ const testPrompt = document.getElementById('testPrompt');
547
+ const testResults = document.getElementById('testResults');
548
+ const finetunedOutput = document.getElementById('finetunedOutput');
549
+ const originalModelOutput = document.getElementById('originalModelOutput');
550
+ const originalOutput = document.getElementById('originalOutput');
551
+ const useOriginalModel = document.getElementById('useOriginalModel');
552
+
553
+ runTestBtn.addEventListener('click', function() {
554
+ if (!testPrompt.value.trim()) {
555
+ showNotification('Please enter a test prompt', 'error');
556
+ return;
557
+ }
558
+
559
+ runTestBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-1"></i> Running...';
560
+ runTestBtn.disabled = true;
561
+
562
+ // Show results section
563
+ testResults.classList.remove('hidden');
564
+ finetunedOutput.innerHTML = '<div class="animate-pulse">Generating response...</div>';
565
+
566
+ if (useOriginalModel.checked) {
567
+ originalModelOutput.classList.remove('hidden');
568
+ originalOutput.innerHTML = '<div class="animate-pulse">Generating response from original model...</div>';
569
+ }
570
+
571
+ // Simulate API call delay
572
+ setTimeout(() => {
573
+ // Generate fine-tuned model response
574
+ finetunedOutput.innerHTML = `
575
+ <p class="mb-2">${testPrompt.value}</p>
576
+ <p class="text-gray-600 pl-4 border-l-2 border-primary">This is a simulated response from your fine-tuned Llama model. In a real implementation, this would be the actual output generated by your model after processing the input prompt.</p>
577
+ `;
578
+
579
+ // Generate original model response if selected
580
+ if (useOriginalModel.checked) {
581
+ originalOutput.innerHTML = `
582
+ <p class="mb-2">${testPrompt.value}</p>
583
+ <p class="text-gray-600 pl-4 border-l-2 border-gray-400">This is a simulated response from the original Llama model. Notice how the fine-tuned version might provide more specific or tailored responses based on your training data.</p>
584
+ `;
585
+ }
586
+
587
+ runTestBtn.innerHTML = '<i class="fas fa-play mr-1"></i> Run Test';
588
+ runTestBtn.disabled = false;
589
+ }, 2000);
590
+ });
591
+
592
+ // Notification function
593
+ function showNotification(message, type) {
594
+ const notification = document.createElement('div');
595
+ let bgColor = 'bg-blue-500';
596
+
597
+ if (type === 'success') bgColor = 'bg-green-500';
598
+ else if (type === 'warning') bgColor = 'bg-yellow-500';
599
+ else if (type === 'error') bgColor = 'bg-red-500';
600
+
601
+ notification.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-lg shadow-lg flex items-center`;
602
+ notification.innerHTML = `
603
+ <i class="fas ${type === 'success' ? 'fa-check-circle' :
604
+ type === 'warning' ? 'fa-exclamation-triangle' :
605
+ type === 'error' ? 'fa-times-circle' : 'fa-info-circle'} mr-2"></i>
606
+ ${message}
607
+ `;
608
+
609
+ document.body.appendChild(notification);
610
+
611
+ setTimeout(() => {
612
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
613
+ setTimeout(() => notification.remove(), 300);
614
+ }, 3000);
615
+ }
616
+ </script>
617
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=st3phan3m/llama-fine-tuner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
618
+ </html>