Hugging Face's logo

Spaces:
Zeeshsan
/
mygemai
Running

App Files Community
Zeeshsan commited on
Commit
c61b23b
·
verified ·
1 Parent(s): e2c692c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +317 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mygemai
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mygemai
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,317 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gemini AI Assistant</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .message-container {
11
+ scrollbar-width: thin;
12
+ scrollbar-color: #4f46e5 #e5e7eb;
13
+ }
14
+
15
+ .message-container::-webkit-scrollbar {
16
+ width: 8px;
17
+ }
18
+
19
+ .message-container::-webkit-scrollbar-track {
20
+ background: #e5e7eb;
21
+ border-radius: 10px;
22
+ }
23
+
24
+ .message-container::-webkit-scrollbar-thumb {
25
+ background-color: #4f46e5;
26
+ border-radius: 10px;
27
+ }
28
+
29
+ .typing-indicator::after {
30
+ content: "...";
31
+ animation: typing 1.5s infinite;
32
+ display: inline-block;
33
+ width: 0;
34
+ }
35
+
36
+ @keyframes typing {
37
+ 0% { content: "."; }
38
+ 33% { content: ".."; }
39
+ 66% { content: "..."; }
40
+ }
41
+
42
+ .fade-in {
43
+ animation: fadeIn 0.3s ease-in-out;
44
+ }
45
+
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; transform: translateY(10px); }
48
+ to { opacity: 1; transform: translateY(0); }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 min-h-screen flex flex-col">
53
+ <header class="bg-indigo-600 text-white shadow-md">
54
+ <div class="container mx-auto px-4 py-4 flex items-center justify-between">
55
+ <div class="flex items-center space-x-3">
56
+ <i class="fas fa-robot text-2xl"></i>
57
+ <h1 class="text-xl font-bold">Gemini AI Assistant</h1>
58
+ </div>
59
+ <button id="apiKeyBtn" class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
60
+ <i class="fas fa-key mr-2"></i>Set API Key
61
+ </button>
62
+ </div>
63
+ </header>
64
+
65
+ <div class="flex-1 container mx-auto px-4 py-6 flex flex-col max-w-4xl">
66
+ <div id="messageContainer" class="message-container flex-1 space-y-4 overflow-y-auto mb-4 p-4 rounded-lg bg-white shadow-sm">
67
+ <div class="bg-indigo-50 p-4 rounded-lg max-w-[80%] self-start fade-in">
68
+ <div class="font-medium text-indigo-700 mb-1 flex items-center">
69
+ <i class="fas fa-robot mr-2"></i> Gemini AI
70
+ </div>
71
+ <p class="text-gray-800">Hello! I'm your Gemini AI assistant. Please set your API key to start chatting.</p>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="bg-white p-4 rounded-lg shadow-md">
76
+ <form id="chatForm" class="flex space-x-2">
77
+ <input
78
+ id="messageInput"
79
+ type="text"
80
+ placeholder="Type your message..."
81
+ class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
82
+ disabled
83
+ >
84
+ <button
85
+ type="submit"
86
+ class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
87
+ disabled
88
+ id="sendBtn"
89
+ >
90
+ <i class="fas fa-paper-plane"></i>
91
+ </button>
92
+ </form>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- API Key Modal -->
97
+ <div id="apiKeyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
98
+ <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
99
+ <div class="flex justify-between items-center mb-4">
100
+ <h3 class="text-lg font-bold text-gray-900">Enter Gemini API Key</h3>
101
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
102
+ <i class="fas fa-times"></i>
103
+ </button>
104
+ </div>
105
+ <div class="mb-4">
106
+ <input
107
+ type="password"
108
+ id="apiKeyInput"
109
+ placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
110
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
111
+ >
112
+ <p class="text-xs text-gray-500 mt-2">Your API key is stored locally in your browser and never sent to our servers.</p>
113
+ </div>
114
+ <div class="flex justify-end space-x-3">
115
+ <button id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
116
+ Cancel
117
+ </button>
118
+ <button id="saveApiKey" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
119
+ Save
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <script>
126
+ document.addEventListener('DOMContentLoaded', function() {
127
+ // DOM Elements
128
+ const apiKeyBtn = document.getElementById('apiKeyBtn');
129
+ const apiKeyModal = document.getElementById('apiKeyModal');
130
+ const closeModal = document.getElementById('closeModal');
131
+ const cancelBtn = document.getElementById('cancelBtn');
132
+ const saveApiKey = document.getElementById('saveApiKey');
133
+ const apiKeyInput = document.getElementById('apiKeyInput');
134
+ const chatForm = document.getElementById('chatForm');
135
+ const messageInput = document.getElementById('messageInput');
136
+ const messageContainer = document.getElementById('messageContainer');
137
+ const sendBtn = document.getElementById('sendBtn');
138
+
139
+ // Check if API key exists in localStorage
140
+ const storedApiKey = localStorage.getItem('geminiApiKey');
141
+ if (storedApiKey) {
142
+ enableChat();
143
+ addMessage("Gemini AI", `Welcome back! I'm ready to assist you.`, false);
144
+ }
145
+
146
+ // Modal handlers
147
+ apiKeyBtn.addEventListener('click', () => {
148
+ apiKeyModal.classList.remove('hidden');
149
+ if (storedApiKey) {
150
+ apiKeyInput.value = storedApiKey;
151
+ }
152
+ });
153
+
154
+ closeModal.addEventListener('click', () => {
155
+ apiKeyModal.classList.add('hidden');
156
+ });
157
+
158
+ cancelBtn.addEventListener('click', () => {
159
+ apiKeyModal.classList.add('hidden');
160
+ });
161
+
162
+ saveApiKey.addEventListener('click', () => {
163
+ const apiKey = apiKeyInput.value.trim();
164
+ if (apiKey) {
165
+ localStorage.setItem('geminiApiKey', apiKey);
166
+ apiKeyModal.classList.add('hidden');
167
+ enableChat();
168
+ addMessage("Gemini AI", "API key saved! How can I assist you today?", false);
169
+ } else {
170
+ alert("Please enter a valid API key");
171
+ }
172
+ });
173
+
174
+ // Chat form submission
175
+ chatForm.addEventListener('submit', async (e) => {
176
+ e.preventDefault();
177
+ const message = messageInput.value.trim();
178
+ if (!message) return;
179
+
180
+ // Add user message
181
+ addMessage("You", message, true);
182
+ messageInput.value = '';
183
+
184
+ // Show typing indicator
185
+ const typingId = showTypingIndicator();
186
+
187
+ try {
188
+ const response = await fetchGeminiResponse(message);
189
+ removeTypingIndicator(typingId);
190
+ addMessage("Gemini AI", response, false);
191
+ } catch (error) {
192
+ removeTypingIndicator(typingId);
193
+ addMessage("Gemini AI", `Error: ${error.message}`, false);
194
+ }
195
+ });
196
+
197
+ // Enable chat when API key is available
198
+ function enableChat() {
199
+ messageInput.disabled = false;
200
+ sendBtn.disabled = false;
201
+ }
202
+
203
+ // Add message to chat
204
+ function addMessage(sender, text, isUser) {
205
+ const messageDiv = document.createElement('div');
206
+ messageDiv.className = `bg-${isUser ? 'indigo-100' : 'indigo-50'} p-4 rounded-lg max-w-[80%] ${isUser ? 'self-end' : 'self-start'} fade-in`;
207
+
208
+ const senderDiv = document.createElement('div');
209
+ senderDiv.className = `font-medium text-indigo-700 mb-1 flex items-center`;
210
+ senderDiv.innerHTML = `<i class="fas ${isUser ? 'fa-user' : 'fa-robot'} mr-2"></i> ${sender}`;
211
+
212
+ const textDiv = document.createElement('p');
213
+ textDiv.className = 'text-gray-800';
214
+ textDiv.textContent = text;
215
+
216
+ messageDiv.appendChild(senderDiv);
217
+ messageDiv.appendChild(textDiv);
218
+ messageContainer.appendChild(messageDiv);
219
+
220
+ // Scroll to bottom
221
+ messageContainer.scrollTop = messageContainer.scrollHeight;
222
+ }
223
+
224
+ // Show typing indicator
225
+ function showTypingIndicator() {
226
+ const typingDiv = document.createElement('div');
227
+ const typingId = 'typing-' + Date.now();
228
+ typingDiv.id = typingId;
229
+ typingDiv.className = 'bg-indigo-50 p-4 rounded-lg max-w-[80%] self-start fade-in';
230
+
231
+ const senderDiv = document.createElement('div');
232
+ senderDiv.className = 'font-medium text-indigo-700 mb-1 flex items-center';
233
+ senderDiv.innerHTML = '<i class="fas fa-robot mr-2"></i> Gemini AI';
234
+
235
+ const textDiv = document.createElement('p');
236
+ textDiv.className = 'text-gray-800 typing-indicator';
237
+ textDiv.textContent = 'Thinking';
238
+
239
+ typingDiv.appendChild(senderDiv);
240
+ typingDiv.appendChild(textDiv);
241
+ messageContainer.appendChild(typingDiv);
242
+
243
+ // Scroll to bottom
244
+ messageContainer.scrollTop = messageContainer.scrollHeight;
245
+
246
+ return typingId;
247
+ }
248
+
249
+ // Remove typing indicator
250
+ function removeTypingIndicator(id) {
251
+ const typingElement = document.getElementById(id);
252
+ if (typingElement) {
253
+ typingElement.remove();
254
+ }
255
+ }
256
+
257
+ // Fetch response from Gemini API
258
+ async function fetchGeminiResponse(prompt) {
259
+ const apiKey = localStorage.getItem('geminiApiKey');
260
+ if (!apiKey) {
261
+ throw new Error('API key not found. Please set your API key.');
262
+ }
263
+
264
+ // This is a simplified version - in a real app, you'd use the actual Gemini API
265
+ // For demo purposes, we'll simulate a response
266
+
267
+ // Simulate API delay
268
+ await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
269
+
270
+ // Simulate different responses based on input
271
+ const lowerPrompt = prompt.toLowerCase();
272
+
273
+ if (lowerPrompt.includes('hello') || lowerPrompt.includes('hi')) {
274
+ return "Hello there! How can I assist you today?";
275
+ } else if (lowerPrompt.includes('how are you')) {
276
+ return "I'm just a computer program, so I don't have feelings, but I'm functioning optimally! How can I help you?";
277
+ } else if (lowerPrompt.includes('thank')) {
278
+ return "You're welcome! Is there anything else you'd like to know?";
279
+ } else if (lowerPrompt.includes('time')) {
280
+ return `The current time is ${new Date().toLocaleTimeString()}.`;
281
+ } else if (lowerPrompt.includes('date')) {
282
+ return `Today's date is ${new Date().toLocaleDateString()}.`;
283
+ } else if (lowerPrompt.includes('joke')) {
284
+ const jokes = [
285
+ "Why don't scientists trust atoms? Because they make up everything!",
286
+ "Why did the scarecrow win an award? Because he was outstanding in his field!",
287
+ "I told my wife she was drawing her eyebrows too high. She looked surprised."
288
+ ];
289
+ return jokes[Math.floor(Math.random() * jokes.length)];
290
+ } else {
291
+ return `I received your message: "${prompt}". This is a simulated response. In a real implementation, this would be the actual response from the Gemini API.`;
292
+ }
293
+
294
+ // In a real implementation, you would make an actual API call to Gemini:
295
+ /*
296
+ const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=' + apiKey, {
297
+ method: 'POST',
298
+ headers: {
299
+ 'Content-Type': 'application/json',
300
+ },
301
+ body: JSON.stringify({
302
+ contents: [{
303
+ parts: [{
304
+ text: prompt
305
+ }]
306
+ }]
307
+ })
308
+ });
309
+
310
+ const data = await response.json();
311
+ return data.candidates[0].content.parts[0].text;
312
+ */
313
+ }
314
+ });
315
+ </script>
316
+ <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=Zeeshsan/mygemai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
317
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Build an app that is AI assistant that use Gemini API taken from the user. Keep it simple