Spaces:

Karthik1610
/

EvalKit

Runtime error

App Files Files Community

Karthik1610 commited on Aug 24

Commit

bc13a9f

verified ·

1 Parent(s): 85ffa3a

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +664 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,664 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🧪 Clarifai Community Bench</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            color: white;
+        }
+        .header h1 {
+            font-size: 3rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .main-card {
+            background: white;
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+        .form-section {
+            margin-bottom: 30px;
+        }
+        .form-section h3 {
+            color: #4a5568;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        .input-group label {
+            display: block;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #2d3748;
+        }
+        .input-group input, .input-group select {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            font-size: 16px;
+            transition: all 0.2s;
+        }
+        .input-group input:focus, .input-group select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        .btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 16px 32px;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+        }
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .btn-secondary {
+            background: #718096;
+            box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);
+        }
+        .btn-secondary:hover {
+            box-shadow: 0 8px 20px rgba(113, 128, 150, 0.4);
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+        }
+        .pack-card {
+            background: #f7fafc;
+            border: 2px solid #e2e8f0;
+            border-radius: 16px;
+            padding: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .pack-card:hover, .pack-card.selected {
+            border-color: #667eea;
+            background: rgba(102, 126, 234, 0.05);
+            transform: translateY(-2px);
+        }
+        .pack-card h4 {
+            color: #2d3748;
+            margin-bottom: 10px;
+        }
+        .pack-card p {
+            color: #718096;
+            font-size: 14px;
+        }
+        .results-section {
+            margin-top: 30px;
+            display: none;
+        }
+        .results-grid {
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .lint-results, .benchmark-results {
+            background: #f7fafc;
+            border-radius: 12px;
+            padding: 20px;
+        }
+        .lint-results h4, .benchmark-results h4 {
+            margin-bottom: 15px;
+            color: #2d3748;
+        }
+        .score-badge {
+            display: inline-block;
+            padding: 8px 16px;
+            border-radius: 20px;
+            color: white;
+            font-weight: 600;
+            margin-bottom: 15px;
+        }
+        .score-high { background: #48bb78; }
+        .score-medium { background: #ed8936; }
+        .score-low { background: #f56565; }
+        .metric-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 40px;
+        }
+        .loading .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid #e2e8f0;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .action-buttons {
+            display: flex;
+            gap: 15px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        .export-section {
+            background: #edf2f7;
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 20px;
+        }
+        @media (max-width: 768px) {
+            .grid, .results-grid {
+                grid-template-columns: 1fr;
+            }
+            .header h1 {
+                font-size: 2rem;
+            }
+            .main-card {
+                padding: 20px;
+            }
+            .action-buttons {
+                justify-content: center;
+            }
+        }
+        .error {
+            background: #fed7d7;
+            color: #c53030;
+            padding: 15px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            border: 2px solid #feb2b2;
+        }
+        .success {
+            background: #c6f6d5;
+            color: #2f855a;
+            padding: 15px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            border: 2px solid #9ae6b4;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🧪 Clarifai Community Bench</h1>
+            <p>Professional model evaluation, linting & community growth engine</p>
+        </div>
+        <div class="main-card">
+            <div class="form-section">
+                <h3>🔑 Authentication</h3>
+                <div class="input-group">
+                    <label for="hf-token">HuggingFace Token</label>
+                    <input type="password" id="hf-token" placeholder="hf_..." required>
+                </div>
+            </div>
+            <div class="form-section">
+                <h3>🤖 Model Import & Lint</h3>
+                <div class="input-group">
+                    <label for="model-id">Model Repository ID</label>
+                    <input type="text" id="model-id" placeholder="facebook/bart-large-cnn" required>
+                </div>
+                <button class="btn" onclick="lintModel()">Import & Lint Model</button>
+            </div>
+            <div class="form-section">
+                <h3>📋 Benchmark Packs</h3>
+                <div class="grid">
+                    {% for pack_key, pack in benchmark_packs.items() %}
+                    <div class="pack-card" onclick="selectPack('{{ pack_key }}')">
+                        <h4>{{ pack.name }}</h4>
+                        <p>{{ pack.datasets|length }} datasets • {{ pack.metrics|join(', ') }}</p>
+                    </div>
+                    {% endfor %}
+                </div>
+                <input type="hidden" id="selected-pack">
+                <button class="btn" onclick="runBenchmark()" style="margin-top: 20px;">🚀 Run Benchmark</button>
+            </div>
+            <div class="loading">
+                <div class="spinner"></div>
+                <p>Processing your request...</p>
+            </div>
+            <div class="results-section">
+                <h3>📊 Results</h3>
+                <div class="results-grid">
+                    <div class="lint-results">
+                        <h4>Model Readiness</h4>
+                        <div id="lint-content"></div>
+                    </div>
+                    <div class="benchmark-results">
+                        <h4>Benchmark Performance</h4>
+                        <div id="benchmark-content"></div>
+                    </div>
+                </div>
+                <div class="export-section">
+                    <h4>🎯 Clarifai Growth Tools</h4>
+                    <p>Generate community-ready artifacts and backlinks</p>
+                    <div class="action-buttons">
+                        <button class="btn btn-secondary" onclick="generateReadme()">📝 Generate README</button>
+                        <button class="btn btn-secondary" onclick="createPR()">🔗 Create PR Template</button>
+                        <button class="btn btn-secondary" onclick="exportArtifacts()">📦 Export Artifacts</button>
+                        <button class="btn btn-secondary" onclick="shareResults()">🚀 Share Results</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let currentResults = null;
+        let selectedPack = null;
+        function selectPack(packKey) {
+            // Remove previous selection
+            document.querySelectorAll('.pack-card').forEach(card => {
+                card.classList.remove('selected');
+            });
+            // Select new pack
+            event.target.closest('.pack-card').classList.add('selected');
+            selectedPack = packKey;
+            document.getElementById('selected-pack').value = packKey;
+        }
+        function showLoading() {
+            document.querySelector('.loading').style.display = 'block';
+            document.querySelector('.results-section').style.display = 'none';
+        }
+        function hideLoading() {
+            document.querySelector('.loading').style.display = 'none';
+        }
+        function showError(message) {
+            hideLoading();
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error';
+            errorDiv.textContent = message;
+            document.querySelector('.main-card').insertBefore(errorDiv, document.querySelector('.form-section'));
+            setTimeout(() => errorDiv.remove(), 5000);
+        }
+        function showSuccess(message) {
+            const successDiv = document.createElement('div');
+            successDiv.className = 'success';
+            successDiv.textContent = message;
+            document.querySelector('.main-card').insertBefore(successDiv, document.querySelector('.form-section'));
+            setTimeout(() => successDiv.remove(), 5000);
+        }
+        async function lintModel() {
+            const modelId = document.getElementById('model-id').value;
+            const token = document.getElementById('hf-token').value;
+            if (!modelId || !token) {
+                showError('Please provide both model ID and HF token');
+                return;
+            }
+            showLoading();
+            try {
+                const response = await fetch('/api/lint-model', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ model_id: modelId, token })
+                });
+                const result = await response.json();
+                hideLoading();
+                if (result.error) {
+                    showError(result.error);
+                    return;
+                }
+                displayLintResults(result);
+            } catch (error) {
+                hideLoading();
+                showError('Failed to lint model: ' + error.message);
+            }
+        }
+        async function runBenchmark() {
+            const modelId = document.getElementById('model-id').value;
+            const token = document.getElementById('hf-token').value;
+            if (!modelId || !token || !selectedPack) {
+                showError('Please provide model ID, token, and select a benchmark pack');
+                return;
+            }
+            showLoading();
+            try {
+                const response = await fetch('/api/run-benchmark', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        model_id: modelId,
+                        token,
+                        pack: selectedPack
+                    })
+                });
+                const result = await response.json();
+                hideLoading();
+                if (result.error) {
+                    showError(result.error);
+                    return;
+                }
+                currentResults = result;
+                displayBenchmarkResults(result);
+                document.querySelector('.results-section').style.display = 'block';
+            } catch (error) {
+                hideLoading();
+                showError('Failed to run benchmark: ' + error.message);
+            }
+        }
+        function displayLintResults(result) {
+            const content = document.getElementById('lint-content');
+            const scoreClass = result.readiness_score >= 80 ? 'score-high' :
+                              result.readiness_score >= 60 ? 'score-medium' : 'score-low';
+            content.innerHTML = `
+                <div class="score-badge ${scoreClass}">
+                    ${result.readiness_score}/100 Ready
+                </div>
+                <div class="metric-item">
+                    <span>Task:</span>
+                    <span>${result.task || 'Unknown'}</span>
+                </div>
+                <div class="metric-item">
+                    <span>Downloads:</span>
+                    <span>${result.downloads.toLocaleString()}</span>
+                </div>
+                <div class="metric-item">
+                    <span>Likes:</span>
+                    <span>${result.likes}</span>
+                </div>
+                <div style="margin-top: 15px;">
+                    <strong>Recommendations:</strong>
+                    <ul style="margin-top: 8px; padding-left: 20px;">
+                        ${result.recommendations.map(rec => `<li>${rec}</li>`).join('')}
+                    </ul>
+                </div>
+            `;
+        }
+        function displayBenchmarkResults(result) {
+            const content = document.getElementById('benchmark-content');
+            let html = '';
+            result.benchmark_results.forEach(dataset => {
+                if (dataset.error) {
+                    html += `
+                        <div style="margin-bottom: 20px; padding: 15px; background: #fed7d7; border-radius: 8px;">
+                            <strong>${dataset.dataset}:</strong> ${dataset.error}
+                        </div>
+                    `;
+                } else {
+                    html += `
+                        <div style="margin-bottom: 20px; padding: 15px; background: #f0fff4; border-radius: 8px;">
+                            <h5>${dataset.dataset} (${dataset.samples} samples)</h5>
+                            <div style="margin-top: 10px;">
+                                ${Object.entries(dataset.metrics).map(([key, value]) =>
+                                    `<div class="metric-item">
+                                        <span>${key.toUpperCase()}:</span>
+                                        <span>${value}</span>
+                                    </div>`
+                                ).join('')}
+                                <div class="metric-item">
+                                    <span>Avg Latency:</span>
+                                    <span>${dataset.avg_latency}s</span>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }
+            });
+            content.innerHTML = html;
+        }
+        async function generateReadme() {
+            if (!currentResults) {
+                showError('Please run a benchmark first');
+                return;
+            }
+            try {
+                const response = await fetch('/api/generate-readme', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(currentResults)
+                });
+                const result = await response.json();
+                // Create modal or popup with README content
+                const modal = document.createElement('div');
+                modal.style.cssText = `
+                    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+                    background: rgba(0,0,0,0.5); display: flex; align-items: center;
+                    justify-content: center; z-index: 1000;
+                `;
+                modal.innerHTML = `
+                    <div style="background: white; padding: 30px; border-radius: 12px; max-width: 80%; max-height: 80%; overflow: auto;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                            <h3>📝 Generated README Section</h3>
+                            <button onclick="this.closest('.modal').remove()" style="background: none; border: none; font-size: 24px; cursor: pointer;">&times;</button>
+                        </div>
+                        <pre style="background: #f7fafc; padding: 20px; border-radius: 8px; white-space: pre-wrap; max-height: 400px; overflow-y: auto;">${result.readme}</pre>
+                        <div style="margin-top: 20px; text-align: right;">
+                            <button class="btn btn-secondary" onclick="copyToClipboard(\`${result.readme.replace(/`/g, '\\`')}\`)">📋 Copy to Clipboard</button>
+                        </div>
+                    </div>
+                `;
+                modal.className = 'modal';
+                document.body.appendChild(modal);
+                showSuccess('README section generated successfully!');
+            } catch (error) {
+                showError('Failed to generate README: ' + error.message);
+            }
+        }
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(() => {
+                showSuccess('Copied to clipboard!');
+            });
+        }
+        function createPR() {
+            if (!currentResults) {
+                showError('Please run a benchmark first');
+                return;
+            }
+            const modelId = currentResults.model_id;
+            const title = `Add benchmark results from Clarifai Community Bench`;
+            const body = `## 🧪 Benchmark Results Added
+This PR adds comprehensive benchmark results for ${modelId} from [Clarifai Community Bench](https://huggingface.co/spaces/clarifai/community-bench).
+### Results Summary
+- **Readiness Score:** ${currentResults.readiness_score}/100
+- **Task:** ${currentResults.task}
+- **Datasets Tested:** ${currentResults.benchmark_results.length}
+### Performance Highlights
+${currentResults.benchmark_results.map(result =>
+    `- **${result.dataset}**: ${Object.entries(result.metrics).map(([k,v]) => `${k}: ${v}`).join(', ')}`
+).join('\n')}
+### What's Included
+- ✅ Comprehensive metrics across multiple datasets
+- ✅ Latency benchmarks
+- ✅ Model card improvements
+- ✅ Community-ready documentation
+---
+*Generated by [Clarifai Community Bench](https://huggingface.co/spaces/clarifai/community-bench) - Building the future of AI model evaluation*`;
+            const githubUrl = `https://github.com/${modelId}/compare?expand=1&title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`;
+            window.open(githubUrl, '_blank');
+            showSuccess('PR template opened in new tab!');
+        }
+        async function exportArtifacts() {
+            if (!currentResults) {
+                showError('Please run a benchmark first');
+                return;
+            }
+            try {
+                const response = await fetch('/api/export-artifacts', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(currentResults)
+                });
+                if (response.ok) {
+                    const blob = await response.blob();
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `${currentResults.model_id.replace('/', '_')}_artifacts.zip`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                    showSuccess('Artifacts exported successfully!');
+                } else {
+                    throw new Error('Export failed');
+                }
+            } catch (error) {
+                showError('Failed to export artifacts: ' + error.message);
+            }
+        }
+        function shareResults() {
+            if (!currentResults) {
+                showError('Please run a benchmark first');
+                return;
+            }
+            const shareData = {
+                title: `🧪 ${currentResults.model_id} Benchmark Results`,
+                text: `Check out these benchmark results for ${currentResults.model_id}! Readiness Score: ${currentResults.readiness_score}/100`,
+                url: window.location.href
+            };
+            if (navigator.share) {
+                navigator.share(shareData);
+            } else {
+                // Fallback: copy to clipboard
+                const shareText = `${shareData.title}\n${shareData.text}\n${shareData.url}`;
+                copyToClipboard(shareText);
+            }
+        }
+        // Auto-focus token input
+        document.addEventListener('DOMContentLoaded', () => {
+            document.getElementById('hf-token').focus();
+        });
+    </script>
+</body>
+</html>