Hugging Face's logo

Spaces:
sameer4554
/
blue-app-95
Running

App Files Community
blue-app-95 / index.html
sameer4554's picture
sameer4554
Upload index.html with huggingface_hub
861ffd6 verified
raw
history blame contribute delete
16.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Model Fine-tuning Studio</title>
<meta name="description" content="Train and fine-tune open source AI models on your custom datasets">
<meta name="keywords" content="AI, machine learning, fine-tuning, model training, datasets">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="nav">
<div class="nav-brand">
<span class="logo">🤖</span>
<h1>AI Model Studio</h1>
</div>
<div class="nav-links">
<a href="#dashboard" class="nav-link active">Dashboard</a>
<a href="#training" class="nav-link">Training</a>
<a href="#models" class="nav-link">Models</a>
<a href="#datasets" class="nav-link">Datasets</a>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="nav-link special">Built with anycoder</a>
</div>
</nav>
</header>
<!-- Main Content -->
<main class="main">
<!-- Dashboard Section -->
<section id="dashboard" class="section active">
<div class="container">
<h2 class="section-title">Dashboard</h2>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">📊</div>
<div class="stat-content">
<h3 id="total-models">0</h3>
<p>Total Models</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">📁</div>
<div class="stat-content">
<h3 id="total-datasets">0</h3>
<p>Datasets</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-content">
<h3 id="active-training">0</h3>
<p>Active Training</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">🎯</div>
<div class="stat-content">
<h3 id="completed-models">0</h3>
<p>Completed Models</p>
</div>
</div>
</div>
<div class="recent-activity">
<h3>Recent Activity</h3>
<div id="activity-list" class="activity-list">
<div class="activity-item">
<div class="activity-icon">🚀</div>
<div class="activity-content">
<p>Welcome to AI Model Studio!</p>
<span class="activity-time">Just now</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Training Section -->
<section id="training" class="section">
<div class="container">
<h2 class="section-title">Train New Model</h2>
<div class="training-wizard">
<!-- Step 1: Dataset Selection -->
<div class="step active" id="step-1">
<h3>Step 1: Select Dataset</h3>
<div class="dataset-selection">
<div class="upload-zone" id="upload-zone">
<div class="upload-content">
<span class="upload-icon">📁</span>
<h4>Upload Dataset</h4>
<p>Drag & drop your dataset file or click to browse</p>
<input type="file" id="dataset-file" accept=".csv,.json,.txt,.tsv" style="display: none;">
<button class="btn btn-primary" onclick="document.getElementById('dataset-file').click()">Choose File</button>
</div>
</div>
<div class="dataset-info" id="dataset-info" style="display: none;">
<h4>Dataset Preview</h4>
<div id="dataset-preview"></div>
</div>
</div>
<div class="step-nav">
<button class="btn btn-primary" onclick="nextStep()">Next Step</button>
</div>
</div>
<!-- Step 2: Model Selection -->
<div class="step" id="step-2">
<h3>Step 2: Choose Base Model</h3>
<div class="model-grid">
<div class="model-card" data-model="bert-base-uncased">
<div class="model-header">
<h4>BERT Base</h4>
<span class="model-type">Text Classification</span>
</div>
<p>General-purpose BERT model for text understanding tasks</p>
<div class="model-stats">
<span>📏 110M parameters</span>
<span>🌐 English</span>
</div>
</div>
<div class="model-card" data-model="gpt2-medium">
<div class="model-header">
<h4>GPT-2 Medium</h4>
<span class="model-type">Text Generation</span>
</div>
<p>Medium-sized GPT model for text generation and completion</p>
<div class="model-stats">
<span>📏 355M parameters</span>
<span>🌐 English</span>
</div>
</div>
<div class="model-card" data-model="roberta-base">
<div class="model-header">
<h4>RoBERTa Base</h4>
<span class="model-type">Text Classification</span>
</div>
<p>Optimized BERT model for better performance</p>
<div class="model-stats">
<span>📏 125M parameters</span>
<span>🌐 Multilingual</span>
</div>
</div>
<div class="model-card" data-model="distilbert-base">
<div class="model-header">
<h4>DistilBERT</h4>
<span class="model-type">Text Classification</span>
</div>
<p>Compressed BERT for faster inference</p>
<div class="model-stats">
<span>📏 66M parameters</span>
<span>🌐 English</span>
</div>
</div>
</div>
<div class="step-nav">
<button class="btn btn-secondary" onclick="prevStep()">Previous</button>
<button class="btn btn-primary" onclick="nextStep()">Next Step</button>
</div>
</div>
<!-- Step 3: Training Configuration -->
<div class="step" id="step-3">
<h3>Step 3: Training Configuration</h3>
<form class="config-form" id="training-config">
<div class="form-group">
<label for="model-name">Model Name</label>
<input type="text" id="model-name" placeholder="My Fine-tuned Model" required>
</div>
<div class="form-group">
<label for="epochs">Training Epochs</label>
<input type="range" id="epochs" min="1" max="50" value="5" oninput="updateRangeValue(this)">
<span class="range-value" id="epochs-value">5</span>
</div>
<div class="form-group">
<label for="learning-rate">Learning Rate</label>
<select id="learning-rate">
<option value="5e-5">5e-5 (Recommended)</option>
<option value="3e-5">3e-5</option>
<option value="1e-5">1e-5</option>
<option value="5e-4">5e-4</option>
</select>
</div>
<div class="form-group">
<label for="batch-size">Batch Size</label>
<select id="batch-size">
<option value="8">8 (Recommended)</option>
<option value="16">16</option>
<option value="32">32</option>
<option value="64">64</option>
</select>
</div>
<div class="form-group">
<label for="validation-split">Validation Split</label>
<input type="range" id="validation-split" min="0.1" max="0.3" step="0.05" value="0.2" oninput="updateRangeValue(this)">
<span class="range-value" id="validation-split-value">20%</span>
</div>
</form>
<div class="step-nav">
<button class="btn btn-secondary" onclick="prevStep()">Previous</button>
<button class="btn btn-success" onclick="startTraining()">Start Training</button>
</div>
</div>
<!-- Training Progress -->
<div class="step" id="step-4">
<h3>Training in Progress</h3>
<div class="training-progress">
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="progress-info">
<span id="progress-text">Initializing training...</span>
<span id="progress-percentage">0%</span>
</div>
<div class="training-stats">
<div class="stat">
<span class="stat-label">Current Epoch:</span>
<span class="stat-value" id="current-epoch">0/5</span>
</div>
<div class="stat">
<span class="stat-label">Current Loss:</span>
<span class="stat-value" id="current-loss">-</span>
</div>
<div class="stat">
<span class="stat-label">Accuracy:</span>
<span class="stat-value" id="current-accuracy">-</span>
</div>
</div>
<div class="training-actions">
<button class="btn btn-danger" onclick="stopTraining()">Stop Training</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Models Section -->
<section id="models" class="section">
<div class="container">
<div class="section-header">
<h2 class="section-title">My Models</h2>
<button class="btn btn-primary" onclick="showTraining()">Train New Model</button>
</div>
<div class="models-grid" id="models-grid">
<div class="empty-state">
<div class="empty-icon">🤖</div>
<h3>No models yet</h3>
<p>Train your first model to get started</p>
<button class="btn btn-primary" onclick="showTraining()">Train Model</button>
</div>
</div>
</div>
</section>
<!-- Datasets Section -->
<section id="datasets" class="section">
<div class="container">
<div class="section-header">
<h2 class="section-title">My Datasets</h2>
<button class="btn btn-primary" onclick="document.getElementById('dataset-file').click()">Upload Dataset</button>
</div>
<div class="datasets-grid" id="datasets-grid">
<div class="dataset-sample">
<h4>Sample Classification Dataset</h4>
<p>Perfect for text classification tasks</p>
<div class="dataset-meta">
<span>📊 1,000 samples</span>
<span>🏷️ 3 classes</span>
<span>📝 CSV format</span>
</div>
<button class="btn btn-primary btn-sm" onclick="useSampleDataset()">Use Sample</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>AI Model Studio</h4>
<p>Train and fine-tune open source AI models with ease.</p>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Community</h4>
<ul>
<li><a href="#github">GitHub</a></li>
<li><a href="#discord">Discord</a></li>
<li><a href="#twitter">Twitter</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 AI Model Studio. Built with anycoder. All rights reserved.</p>
</div>
</div>
</footer>
<script src="assets/js/app.js"></script>
</body>
</html>