Hugging Face's logo

Spaces:
vijay7788
/
ai-mentor-bot-your-fuchsia-guide-to-ml-mastery
Running

App Files Community
ai-mentor-bot-your-fuchsia-guide-to-ml-mastery
File size: 10,849 Bytes 
827cd15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0c7f99f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
827cd15
 
 
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Mentor Bot</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            500: '#d946ef',
                        },
                        secondary: {
                            500: '#eab308',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .chat-container {
            height: calc(100vh - 180px);
        }
        .typing-indicator::after {
            content: '...';
            animation: typing 1.5s infinite;
        }
        @keyframes typing {
            0% { content: '.'; }
            33% { content: '..'; }
            66% { content: '...'; }
        }
        .gradient-bg {
            background: linear-gradient(135deg, rgba(217, 70, 239, 0.2) 0%, rgba(234, 179, 8, 0.2) 100%);
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100">
    <div class="flex flex-col h-screen">
        <!-- Header -->
        <header class="bg-gray-800 p-4 shadow-lg">
            <div class="container mx-auto flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i data-feather="cpu" class="text-primary-500 w-8 h-8"></i>
                    <h1 class="text-2xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">
                        AI Mentor Bot
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="themeToggle" class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">
                        <i data-feather="moon" class="w-5 h-5"></i>
                    </button>
                    <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">
                        <i data-feather="settings" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-1 container mx-auto p-4 overflow-hidden">
            <div class="gradient-bg rounded-xl p-6 shadow-lg mb-6">
                <div class="flex items-center space-x-3">
                    <div class="bg-primary-500 p-3 rounded-full">
                        <i data-feather="zap" class="w-6 h-6 text-white"></i>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold">Welcome to AI Mentor!</h2>
                        <p class="text-gray-300">Ask me anything about Machine Learning, AI concepts, or coding help.</p>
                    </div>
                </div>
            </div>

            <!-- Chat Container -->
            <div class="chat-container overflow-y-auto mb-4 bg-gray-800 rounded-xl p-4 shadow-inner">
                <div id="chatMessages" class="space-y-4">
                    <!-- Messages will appear here -->
                    <div class="chat-message bot-message">
                        <div class="flex items-start space-x-3">
                            <div class="bg-secondary-500 p-2 rounded-full">
                                <i data-feather="cpu" class="w-5 h-5 text-gray-900"></i>
                            </div>
                            <div class="bg-gray-700 rounded-lg p-3 max-w-3xl">
                                <p>Hello! I'm your AI Mentor. I can help you learn Machine Learning concepts, debug your code, explain algorithms, and guide you through AI projects. What would you like to learn today?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Input Area -->
            <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
                <div class="flex space-x-2">
                    <input 
                        id="userInput" 
                        type="text" 
                        placeholder="Ask about neural networks, Python code, or ML concepts..." 
                        class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
                    >
                    <button 
                        id="sendButton" 
                        class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"
                    >
                        <i data-feather="send" class="w-5 h-5 mr-2"></i>
                        Send
                    </button>
                </div>
                <div class="mt-2 flex space-x-2">
                    <button class="quick-prompt bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm transition">
                        Explain backpropagation
                    </button>
                    <button class="quick-prompt bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm transition">
                        Show Python ML example
                    </button>
                    <button class="quick-prompt bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm transition">
                        What's a GAN?
                    </button>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="bg-gray-800 p-3 text-center text-gray-400 text-sm">
            <p>AI Mentor Bot © 2023 - Your guide to Machine Learning mastery</p>
        </footer>
    </div>

    <script>
        // Theme Toggle
        const themeToggle = document.getElementById('themeToggle');
        themeToggle.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            const icon = themeToggle.querySelector('i');
            if (document.documentElement.classList.contains('dark')) {
                feather.icons['moon'].toSvg().then(svg => icon.outerHTML = svg);
            } else {
                feather.icons['sun'].toSvg().then(svg => icon.outerHTML = svg);
            }
        });

        // Chat functionality
        const chatMessages = document.getElementById('chatMessages');
        const userInput = document.getElementById('userInput');
        const sendButton = document.getElementById('sendButton');
        const quickPrompts = document.querySelectorAll('.quick-prompt');

        function addUserMessage(message) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'chat-message user-message';
            messageDiv.innerHTML = `
                <div class="flex items-start space-x-3 justify-end">
                    <div class="bg-gray-700 rounded-lg p-3 max-w-3xl">
                        <p>${message}</p>
                    </div>
                    <div class="bg-primary-500 p-2 rounded-full">
                        <i data-feather="user" class="w-5 h-5 text-white"></i>
                    </div>
                </div>
            `;
            chatMessages.appendChild(messageDiv);
            scrollToBottom();
        }

        function addBotMessage(message, isTyping = false) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'chat-message bot-message';
            
            let messageContent = isTyping 
                ? '<span class="typing-indicator"></span>'
                : `<p>${message}</p>`;
            
            messageDiv.innerHTML = `
                <div class="flex items-start space-x-3">
                    <div class="bg-secondary-500 p-2 rounded-full">
                        <i data-feather="cpu" class="w-5 h-5 text-gray-900"></i>
                    </div>
                    <div class="bg-gray-700 rounded-lg p-3 max-w-3xl">
                        ${messageContent}
                    </div>
                </div>
            `;
            chatMessages.appendChild(messageDiv);
            scrollToBottom();
            
            if (isTyping) {
                return messageDiv;
            }
            return null;
        }

        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Simulate API call to Python backend
        async function getBotResponse(userMessage) {
            // In a real app, this would call your Python backend API
            // For demo purposes, we'll simulate responses
            
            const responses = {
                "hello": "Hello! How can I assist you with your AI/ML learning today?",
                "hi": "Hi there! What AI concept would you like to explore?",
                "explain backpropagation": "Backpropagation is the algorithm used to train neural networks. It works by:\n1. Forward pass: Compute predictions\n2. Calculate loss\n3. Backward pass: Compute gradients\n4. Update weights using gradient descent\n\nIt's called 'back' propagation because gradients flow backward through the network from output to input layers.",
                "show python ml example": "Here's a simple linear regression example using scikit-learn:\n
        // Send message when Enter is pressed
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // Send button click handler
        sendButton.addEventListener('click', sendMessage);

        // Quick prompt buttons
        quickPrompts.forEach(button => {
            button.addEventListener('click', () => {
                userInput.value = button.textContent;
                sendMessage();
            });
        });

        async function sendMessage() {
            const message = userInput.value.trim();
            if (!message) return;

            addUserMessage(message);
            userInput.value = '';

            const typingIndicator = addBotMessage('', true);
            
            // Simulate API delay
            setTimeout(async () => {
                const response = await getBotResponse(message);
                chatMessages.removeChild(typingIndicator);
                addBotMessage(response);
            }, 1000 + Math.random() * 2000);
        }

        // Initialize Feather Icons
        document.addEventListener('DOMContentLoaded', () => {
            feather.replace();
        });
    </script>
</body>
</html>