OK NEW PROJECT SO HERE WHAT I WANT SAY LM STUDIOS AND ANYTHING LLM AND AI AGENT BUILDER AND TRAINER ALL BUILT INTO ONE WITH ALL OF THE OPT THAT YOU NEED TO BUILD TRAIN AND DEPLOY AI AGENT AI PROGRAMS AND CODEING AI AND SOFT WARE DEV AI
47b04e4
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LM Studios - AI Model Trainer</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> | |
| <style> | |
| .training-progress::-webkit-progress-value { | |
| background-color: #10b981; | |
| border-radius: 4px; | |
| } | |
| .training-progress::-webkit-progress-bar { | |
| background-color: #374151; | |
| border-radius: 4px; | |
| } | |
| .dataset-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 12px rgba(16, 185, 129, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-6 border-b border-teal-500 pb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="activity" class="w-8 h-8 text-teal-400"></i> | |
| <h1 class="text-2xl font-bold text-teal-400">AI Model Trainer</h1> | |
| </div> | |
| <button class="text-teal-300 hover:text-white flex items-center"> | |
| <i data-feather="settings" class="mr-2"></i> Training Settings | |
| </button> | |
| </header> | |
| <!-- Training Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Current Training --> | |
| <div class="bg-gray-800/70 rounded-xl p-6 border border-teal-500/30"> | |
| <h3 class="text-lg font-bold mb-4 text-teal-300">Active Training</h3> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm">Llama 3 Fine-tuning</span> | |
| <span class="text-xs bg-teal-900/50 text-teal-300 px-2 py-1 rounded">Running</span> | |
| </div> | |
| <progress value="65" max="100" class="training-progress w-full h-2 mb-2"></progress> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>65% complete</span> | |
| <span>ETA: 1h 23m</span> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-2 text-sm"> | |
| <div> | |
| <span class="text-gray-400">Loss:</span> | |
| <span class="font-medium">0.42</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">LR:</span> | |
| <span class="font-medium">3e-5</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">Steps:</span> | |
| <span class="font-medium">12,345</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">GPUs:</span> | |
| <span class="font-medium">4x A100</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"> | |
| <i data-feather="pause" class="w-3 h-3 mr-1 inline"></i> Pause | |
| </button> | |
| <button class="text-xs bg-red-900/50 hover:bg-red-800/50 px-3 py-1 rounded"> | |
| <i data-feather="stop-circle" class="w-3 h-3 mr-1 inline"></i> Stop | |
| </button> | |
| </div> | |
| </div> | |
| <!-- New Training --> | |
| <div class="bg-gray-800/70 rounded-xl p-6 border border-gray-700"> | |
| <h3 class="text-lg font-bold mb-4 text-teal-300">Start New Training</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Base Model</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2"> | |
| <option>Llama 3 8B</option> | |
| <option>Llama 3 70B</option> | |
| <option>Mistral 7B</option> | |
| <option>GPT-3.5</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Training Data</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2"> | |
| <option>Customer Support Dataset</option> | |
| <option>Technical Documentation</option> | |
| <option>Custom Upload</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-teal-600 hover:bg-teal-500 py-2 rounded-lg font-medium"> | |
| <i data-feather="play" class="w-4 h-4 mr-2 inline"></i> Start Training | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Training History --> | |
| <div class="bg-gray-800/70 rounded-xl p-6 border border-gray-700"> | |
| <h3 class="text-lg font-bold mb-4 text-teal-300">Recent Trainings</h3> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-gray-700/50 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Llama 3 - 8B</span> | |
| <span class="text-xs bg-green-900/50 text-green-300 px-2 py-1 rounded">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">Finished 2 days ago</div> | |
| </div> | |
| <div class="p-3 bg-gray-700/50 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Mistral - 7B</span> | |
| <span class="text-xs bg-yellow-900/50 text-yellow-300 px-2 py-1 rounded">Failed</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">3 days ago</div> | |
| </div> | |
| <div class="p-3 bg-gray-700/50 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">GPT-3.5</span> | |
| <span class="text-xs bg-green-900/50 text-green-300 px-2 py-1 rounded">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">1 week ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Datasets Section --> | |
| <section class="bg-gray-800/70 rounded-xl border border-gray-700 p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-teal-300">Training Datasets</h2> | |
| <button class="bg-teal-600 hover:bg-teal-500 px-4 py-2 rounded-lg font-medium text-sm"> | |
| <i data-feather="upload" class="w-4 h-4 mr-2 inline"></i> Upload Dataset | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="dataset-card bg-gray-700/50 p-4 rounded-lg border border-gray-600 transition duration-300 cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium mb-1">Customer Support</h3> | |
| <div class="text-xs text-gray-400">12,543 examples</div> | |
| </div> | |
| <span class="text-xs bg-teal-900/50 text-teal-300 px-2 py-1 rounded">QA Pairs</span> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-300">Customer service conversations and responses</div> | |
| </div> | |
| <div class="dataset-card bg-gray-700/50 p-4 rounded-lg border border-gray-600 transition duration-300 cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium mb-1">Code Generation</h3> | |
| <div class="text-xs text-gray-400">8,756 examples</div> | |
| </div> | |
| <span class="text-xs bg-purple-900/50 text-purple-300 px-2 py-1 rounded">Code</span> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-300">Programming problems and solutions in multiple languages</div> | |
| </div> | |
| <div class="dataset-card bg-gray-700/50 p-4 rounded-lg border border-gray-600 transition duration-300 cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium mb-1">Technical Docs</h3> | |
| <div class="text-xs text-gray-400">5,231 examples</div> | |
| </div> | |
| <span class="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">Documents</span> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-300">API documentation and technical articles</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Model Evaluation --> | |
| <section class="bg-gray-800/70 rounded-xl border border-gray-700 p-6"> | |
| <h2 class="text-xl font-bold mb-6 text-teal-300">Model Evaluation</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-medium mb-3">Performance Metrics</h3> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="grid grid-cols-2 gap-4 text-sm"> | |
| <div> | |
| <span class="text-gray-400">Accuracy:</span> | |
| <span class="font-medium">87.3%</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">BLEU Score:</span> | |
| <span class="font-medium">0.76</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">Perplexity:</span> | |
| <span class="font-medium">12.4</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">F1 Score:</span> | |
| <span class="font-medium">0.82</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">Test Your Model</h3> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <input type="text" placeholder="Enter test input..." | |
| class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2 mb-3"> | |
| <div class="bg-gray-800 p-3 rounded text-sm"> | |
| <p class="text-gray-400">Model output will appear here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |