Hugging Face's logo

Spaces:
AMRuk
/
neuralnest-ai-playground
Running

App Files Community
neuralnest-ai-playground
File size: 7,942 Bytes 
f47f592
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeuralNest | AI Playground</title>
    <link rel="stylesheet" href="style.css">
    <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>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: {
                50: '#f0f9ff',
                100: '#e0f2fe',
                300: '#7dd3fc',
                500: '#0ea5e9',
                700: '#0369a1',
                900: '#0c4a6e',
              },
              secondary: {
                50: '#f5f3ff',
                100: '#ede9fe',
                300: '#c4b5fd',
                500: '#8b5cf6',
                700: '#6d28d9',
                900: '#4c1d95',
              }
            }
          }
        }
      }
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
    <custom-navbar></custom-navbar>

    <main class="container mx-auto px-4 py-8">
        <section class="mb-16">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Experiment with AI Models</h1>
                <p class="text-xl text-gray-600 mb-8">Discover, run, and share machine learning models in our collaborative ecosystem</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="/explore" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
                        <i data-feather="compass"></i>
                        Explore Models
                    </a>
                    <a href="/upload" class="bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
                        <i data-feather="upload"></i>
                        Upload Model
                    </a>
                </div>
            </div>
        </section>

        <section class="mb-16">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Featured Models</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="featured-models">
                <!-- Models will be loaded here -->
            </div>
        </section>

        <section class="mb-16">
            <div class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl p-8 text-white">
                <div class="max-w-2xl mx-auto text-center">
                    <h2 class="text-2xl font-bold mb-4">Join our AI Community</h2>
                    <p class="mb-6">Connect with thousands of AI researchers, developers, and enthusiasts. Share knowledge, collaborate on projects, and accelerate your AI journey.</p>
                    <a href="/signup" class="bg-white text-primary-700 hover:bg-gray-100 font-medium py-3 px-6 rounded-lg transition duration-200 inline-block">
                        Sign Up Free
                    </a>
                </div>
            </div>
        </section>

        <section>
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Popular Categories</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <a href="/categories/nlp" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
                    <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i data-feather="message-square" class="text-primary-500"></i>
                    </div>
                    <h3 class="font-medium">NLP</h3>
                </a>
                <a href="/categories/vision" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
                    <div class="w-12 h-12 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i data-feather="eye" class="text-secondary-500"></i>
                    </div>
                    <h3 class="font-medium">Computer Vision</h3>
                </a>
                <a href="/categories/generative" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i data-feather="image" class="text-purple-500"></i>
                    </div>
                    <h3 class="font-medium">Generative AI</h3>
                </a>
                <a href="/categories/audio" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i data-feather="mic" class="text-green-500"></i>
                    </div>
                    <h3 class="font-medium">Audio</h3>
                </a>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
        // Load featured models
        document.addEventListener('DOMContentLoaded', function() {
            fetch('https://api-inference.huggingface.co/models')
                .then(response => response.json())
                .then(data => {
                    const featuredModels = data.slice(0, 6);
                    const modelsContainer = document.getElementById('featured-models');
                    
                    featuredModels.forEach(model => {
                        const modelCard = document.createElement('div');
                        modelCard.className = 'bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-200';
                        modelCard.innerHTML = `
                            <div class="p-6">
                                <div class="flex justify-between items-start mb-4">
                                    <h3 class="font-bold text-lg text-gray-900">${model.id.split('/').pop()}</h3>
                                    <span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded-full">${model.pipeline_tag || 'model'}</span>
                                </div>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-2">${model.description || 'No description available'}</p>
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i data-feather="download" class="w-4 h-4 mr-1"></i>
                                        <span>${Math.round(model.downloads / 1000)}k</span>
                                    </div>
                                    <a href="/models/${model.id}" class="text-primary-500 hover:text-primary-600 text-sm font-medium">Try it →</a>
                                </div>
                            </div>
                        `;
                        modelsContainer.appendChild(modelCard);
                        feather.replace();
                    });
                })
                .catch(error => {
                    console.error('Error fetching models:', error);
                });
        });
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>