Hugging Face's logo

Spaces:
bjcstudentCOR
/
helpso
Running

App Files Community
helpso
File size: 12,002 Bytes 
310935c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phi-2 Chatbot Interface</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .chat-container {
            height: calc(100vh - 160px);
        }
        .message-animation {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .typing-indicator::after {
            content: "...";
            animation: typing 1.5s infinite;
        }
        @keyframes typing {
            0% { content: "."; }
            33% { content: ".."; }
            66% { content: "..."; }
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="max-w-4xl mx-auto p-4">
        <!-- Header -->
        <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-lg p-6 mb-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">Phi-2 Chatbot</h1>
                    <p class="text-blue-100 mt-2">Powered by Microsoft's Phi-2 model fine-tuned for conversation</p>
                </div>
                <div class="bg-white/20 p-3 rounded-full">
                    <i class="fas fa-robot text-3xl"></i>
                </div>
            </div>
        </header>

        <!-- Model Info Card -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-6 border-l-4 border-blue-500">
            <div class="flex items-start">
                <div class="mr-4 text-blue-500">
                    <i class="fas fa-info-circle text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800">Model Information</h3>
                    <p class="text-gray-600 text-sm mt-1">
                        This interface connects to Microsoft's Phi-2 (2.7B parameters) model fine-tuned by AlbelTec for chatbot applications.
                        Phi-2 is a small but powerful language model that demonstrates outstanding reasoning and language understanding capabilities.
                    </p>
                </div>
            </div>
        </div>

        <!-- Chat Container -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <!-- Chat Header -->
            <div class="bg-gray-50 px-4 py-3 border-b flex items-center">
                <div class="w-3 h-3 rounded-full bg-green-400 mr-2"></div>
                <span class="text-sm font-medium text-gray-700">Active</span>
                <div class="ml-auto flex space-x-2">
                    <button class="p-1 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-cog"></i>
                    </button>
                    <button class="p-1 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </div>
            </div>

            <!-- Messages Area -->
            <div class="chat-container overflow-y-auto p-4 scrollbar-hide" id="chat-messages">
                <!-- Welcome message -->
                <div class="message-animation mb-4">
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-2 rounded-full mr-3">
                            <i class="fas fa-robot text-blue-600"></i>
                        </div>
                        <div class="bg-gray-100 rounded-lg p-3 max-w-[85%]">
                            <p class="text-gray-800">Hello! I'm a Phi-2 powered chatbot. How can I help you today?</p>
                            <p class="text-xs text-gray-500 mt-1">Just now</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Input Area -->
            <div class="border-t p-4 bg-gray-50">
                <form id="chat-form" class="flex items-center">
                    <div class="flex-grow relative">
                        <input 
                            type="text" 
                            id="user-input" 
                            placeholder="Type your message here..." 
                            class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            autocomplete="off"
                        >
                        <div class="absolute right-3 top-3 flex space-x-1">
                            <button type="button" class="text-gray-400 hover:text-gray-600">
                                <i class="far fa-smile"></i>
                            </button>
                            <button type="button" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-paperclip"></i>
                            </button>
                        </div>
                    </div>
                    <button 
                        type="submit" 
                        class="ml-3 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full transition-colors duration-200"
                    >
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
                <p class="text-xs text-gray-500 mt-2 text-center">
                    Phi-2 may produce inaccurate information. Verify important facts.
                </p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatForm = document.getElementById('chat-form');
            const userInput = document.getElementById('user-input');
            const chatMessages = document.getElementById('chat-messages');
            
            // Simulate API call to Phi-2 model
            async function getBotResponse(userMessage) {
                // In a real implementation, this would call your backend API
                // that connects to the Phi-2 model
                return new Promise(resolve => {
                    setTimeout(() => {
                        const responses = [
                            "I'm a fine-tuned version of Microsoft's Phi-2 model. I can help answer questions, have conversations, and assist with various tasks.",
                            "That's an interesting question. As a Phi-2 based AI, my knowledge is current up to my training data.",
                            "I can certainly help with that! Could you provide more details about what you're looking for?",
                            "Phi-2 is known for its strong reasoning capabilities despite its relatively small size compared to other models.",
                            "I'm designed to be helpful while being mindful of ethical considerations in my responses."
                        ];
                        const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                        resolve(randomResponse);
                    }, 1000 + Math.random() * 2000); // Simulate variable response time
                });
            }
            
            function addMessage(content, isUser = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message-animation mb-4 ${isUser ? 'text-right' : ''}`;
                
                const messageContent = `
                    <div class="flex items-start ${isUser ? 'flex-row-reverse' : ''}">
                        ${!isUser ? `
                        <div class="bg-blue-100 p-2 rounded-full mr-3">
                            <i class="fas fa-robot text-blue-600"></i>
                        </div>
                        ` : ''}
                        <div class="${isUser ? 'bg-blue-600 text-white' : 'bg-gray-100'} rounded-lg p-3 max-w-[85%]">
                            <p>${content}</p>
                            <p class="text-xs ${isUser ? 'text-blue-200' : 'text-gray-500'} mt-1">Just now</p>
                        </div>
                        ${isUser ? `
                        <div class="bg-blue-600 p-2 rounded-full ml-3 text-white">
                            <i class="fas fa-user"></i>
                        </div>
                        ` : ''}
                    </div>
                `;
                
                messageDiv.innerHTML = messageContent;
                chatMessages.appendChild(messageDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
                
                return messageDiv;
            }
            
            function showTypingIndicator() {
                const typingDiv = document.createElement('div');
                typingDiv.className = 'message-animation mb-4';
                typingDiv.id = 'typing-indicator';
                
                typingDiv.innerHTML = `
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-2 rounded-full mr-3">
                            <i class="fas fa-robot text-blue-600"></i>
                        </div>
                        <div class="bg-gray-100 rounded-lg p-3 max-w-[85%]">
                            <p class="typing-indicator text-gray-800"></p>
                        </div>
                    </div>
                `;
                
                chatMessages.appendChild(typingDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
                
                return typingDiv;
            }
            
            function removeTypingIndicator() {
                const typingIndicator = document.getElementById('typing-indicator');
                if (typingIndicator) {
                    typingIndicator.remove();
                }
            }
            
            chatForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                const message = userInput.value.trim();
                
                if (message) {
                    // Add user message
                    addMessage(message, true);
                    userInput.value = '';
                    
                    // Show typing indicator
                    showTypingIndicator();
                    
                    // Get and display bot response
                    const response = await getBotResponse(message);
                    removeTypingIndicator();
                    addMessage(response);
                }
            });
            
            // Allow pressing Enter to submit (but Shift+Enter for new line)
            userInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    chatForm.dispatchEvent(new Event('submit'));
                }
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bjcstudentCOR/helpso" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>