Hugging Face's logo

Spaces:
KoarAI
/
LFM-Trainer-Studio
Running

App Files Community
LFM-Trainer-Studio / index.html
KoarAI's picture
KoarAI
Upload index.html with huggingface_hub
99e14ba verified
Raw History Blame Contribute Delete
10.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KoarAI LFM2.5 Training Studio</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
body { background-color: #0f172a; color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.card { background-color: #1e293b; border: 1px solid #334155; border-radius: 12px; }
.slider-accent { accent-color: #6366f1; }
pre { background-color: #090d16; border: 1px solid #1e293b; }
</style>
</head>
<body class="p-6 md:p-10">
<div class="max-w-6xl mx-auto">
<header class="mb-8 border-b border-gray-700 pb-6 flex items-center justify-between">
<div>
<h1 class="text-3xl font-extrabold text-indigo-400 flex items-center gap-2">
🧠 KoarAI LFM2.5-350M Training Studio
</h1>
<p class="text-gray-400 mt-2">
Interactive Dataset Mixer, Reasoning (CoT) Balancer & Colab Pipeline Generator for <b>LiquidAI/LFM2.5-350M</b>.
</p>
</div>
<a href="https://huggingface.co/KoarAI/LFM2.5-350M-Thinking-0003" target="_blank" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg font-medium shadow-md transition">
View Model on HF 🚀
</a>
</header>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Left Column: Controls -->
<div class="card p-6 shadow-xl">
<h2 class="text-xl font-bold mb-4 text-indigo-300">🎛️ 1. Dataset Mix Configuration</h2>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="font-medium text-gray-300">🇷🇺 Russian Deep CoT (ZeroAgency/ru-thinking-reasoning-r1)</span>
<span id="val_ru_cot" class="font-bold text-indigo-400">700</span>
</div>
<input type="range" id="ru_cot" min="0" max="2000" step="50" value="700" class="w-full slider-accent" oninput="update()">
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="font-medium text-gray-300">💬 Russian Natural Chat (Vikhrmodels/GrandMaster-PRO-MAX)</span>
<span id="val_ru_chat" class="font-bold text-indigo-400">700</span>
</div>
<input type="range" id="ru_chat" min="0" max="2000" step="50" value="700" class="w-full slider-accent" oninput="update()">
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="font-medium text-gray-300">🌐 English General Chat (LDJnr/Capybara)</span>
<span id="val_en_chat" class="font-bold text-indigo-400">800</span>
</div>
<input type="range" id="en_chat" min="0" max="2000" step="50" value="800" class="w-full slider-accent" oninput="update()">
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="font-medium text-gray-300">📐 Math & Logic CoT (r0b0tlab/qwen3.8-max-distillation-50k)</span>
<span id="val_math_cot" class="font-bold text-indigo-400">600</span>
</div>
<input type="range" id="math_cot" min="0" max="2000" step="50" value="600" class="w-full slider-accent" oninput="update()">
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="font-medium text-gray-300">💻 Clean Python & Code (iamtarun/python_code_instructions)</span>
<span id="val_code" class="font-bold text-indigo-400">350</span>
</div>
<input type="range" id="code" min="0" max="2000" step="50" value="350" class="w-full slider-accent" oninput="update()">
</div>
</div>
<h2 class="text-xl font-bold mt-8 mb-4 text-indigo-300">⚙️ 2. Hyperparameters</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs text-gray-400 mb-1">Learning Rate</label>
<input type="text" id="lr" value="2.5e-5" class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-sm text-white" oninput="update()">
</div>
<div>
<label class="block text-xs text-gray-400 mb-1">Epochs</label>
<input type="number" id="epochs" value="2.3" step="0.1" class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-sm text-white" oninput="update()">
</div>
</div>
</div>
<!-- Right Column: Output Preview & Script -->
<div class="space-y-6">
<!-- Summary Card -->
<div class="card p-6 shadow-xl border-l-4 border-indigo-500">
<h3 class="text-lg font-bold text-white mb-3">📊 Balance Summary</h3>
<div class="grid grid-cols-2 gap-2 text-sm text-gray-300 mb-3" id="summary_stats">
<!-- Populated by JS -->
</div>
<div class="w-full bg-gray-700 h-3 rounded-full overflow-hidden flex" id="balance_bar">
<!-- Populated by JS -->
</div>
</div>
<!-- Code Container -->
<div class="card p-6 shadow-xl">
<div class="flex justify-between items-center mb-3">
<h3 class="text-lg font-bold text-indigo-300">📜 Generated PyTorch / Colab Script</h3>
<button onclick="copyCode()" class="bg-gray-800 hover:bg-gray-700 text-xs px-3 py-1.5 rounded border border-gray-600 transition">
📋 Copy Code
</button>
</div>
<pre class="p-4 rounded-lg text-xs overflow-x-auto text-green-400 max-h-96" id="code_box"></pre>
</div>
</div>
</div>
</div>
<script>
function update() {
const ru_cot = parseInt(document.getElementById('ru_cot').value);
const ru_chat = parseInt(document.getElementById('ru_chat').value);
const en_chat = parseInt(document.getElementById('en_chat').value);
const math_cot = parseInt(document.getElementById('math_cot').value);
const code = parseInt(document.getElementById('code').value);
const lr = document.getElementById('lr').value;
const epochs = parseFloat(document.getElementById('epochs').value);
document.getElementById('val_ru_cot').innerText = ru_cot;
document.getElementById('val_ru_chat').innerText = ru_chat;
document.getElementById('val_en_chat').innerText = en_chat;
document.getElementById('val_math_cot').innerText = math_cot;
document.getElementById('val_code').innerText = code;
const total = ru_cot + ru_chat + en_chat + math_cot + code;
document.getElementById('summary_stats').innerHTML = `
<div>Total Samples: <b class="text-white">${total}</b></div>
<div>Est. T4 Time: <b class="text-white">~${Math.max(5, Math.round(total * epochs / 150))} min</b></div>
<div>Russian CoT: <b class="text-indigo-400">${Math.round(ru_cot/total*100)}%</b></div>
<div>Natural Chat: <b class="text-green-400">${Math.round((ru_chat+en_chat)/total*100)}%</b></div>
`;
const code_template = `# ==============================================================================
# Auto-Generated Training Script for LiquidAI/LFM2.5-350M
# Total Samples: ${total} | Epochs: ${epochs} | Learning Rate: ${lr}
# ==============================================================================
!pip install -q --upgrade "transformers>=4.48.0" "datasets>=3.0.0" "accelerate>=1.0.0"
import os, re, json, torch
from datasets import load_dataset, Dataset
from transformers import AutoModelForCausalLM, AutoTokenizer, Trainer, TrainingArguments, DataCollatorForSeq2Seq
from huggingface_hub import login
HF_TOKEN = "YOUR_HF_TOKEN"
BASE_MODEL = "LiquidAI/LFM2.5-350M"
TARGET_REPO = "KoarAI/LFM2.5-350M-Thinking-0003"
MAX_LENGTH = 512
login(token=HF_TOKEN)
tokenizer = AutoTokenizer.from_pretrained(BASE_MODEL, token=HF_TOKEN, trust_remote_code=True)
tokenizer.add_special_tokens({"additional_special_tokens": ["<think>", "</think>"]})
all_samples = []
# Dataset Mix Loader (${total} total samples)
# 1. Russian Deep CoT: ${ru_cot}
# 2. Russian Natural Dialogues: ${ru_chat}
# 3. English General Chat: ${en_chat}
# 4. Math & Logic CoT: ${math_cot}
# 5. Clean Code: ${code}
training_args = TrainingArguments(
output_dir="./lfm_output",
num_train_epochs=${epochs},
learning_rate=${lr},
lr_scheduler_type="cosine",
warmup_steps=40,
per_device_train_batch_size=2,
gradient_accumulation_steps=4,
weight_decay=0.01,
logging_steps=10,
bf16=torch.cuda.is_available()
)
`;
document.getElementById('code_box').innerText = code_template;
}
function copyCode() {
const code = document.getElementById('code_box').innerText;
navigator.clipboard.writeText(code);
alert("Training script copied to clipboard!");
}
update();
</script>
</body>
</html>