Hugging Face's logo

Spaces:
triflix
/
gemini-functioncall
Sleeping

App Files Community
triflix commited on
Commit
8246e35
·
verified ·
1 Parent(s): dedc4d5

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +37 -1
templates/index.html CHANGED
@@ -5,6 +5,8 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Upload Images for Generative AI</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
8
  </head>
9
  <body class="bg-gray-100">
10
  <div class="container mx-auto p-4">
@@ -35,6 +37,28 @@
35
  </div>
36
  </div>
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  <script>
39
  const fileInput = document.getElementById('fileInput');
40
  const addImageBtn = document.getElementById('addImageBtn');
@@ -110,7 +134,8 @@
110
  });
111
  const data = await response.json();
112
  if (response.ok && data.result) {
113
- resultArea.innerHTML = `<pre class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${data.result}</pre>`;
 
114
  // Reset the UI.
115
  selectedFiles = [];
116
  thumbnails.innerHTML = "";
@@ -121,6 +146,17 @@
121
  resultArea.innerHTML = `<p class="text-red-500">Error processing the images: ${error.message}</p>`;
122
  }
123
  });
 
 
 
 
 
 
 
 
 
 
 
124
  </script>
125
  </body>
126
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Upload Images for Generative AI</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <!-- Marked library to render markdown results -->
9
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
10
  </head>
11
  <body class="bg-gray-100">
12
  <div class="container mx-auto p-4">
 
37
  </div>
38
  </div>
39
 
40
+ <!-- Popup Card for First Time -->
41
+ <div id="popupCard" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
42
+ <div class="bg-white rounded-lg p-6 max-w-md mx-auto shadow-2xl transform transition-all duration-300">
43
+ <div class="mb-4">
44
+ <h2 class="text-2xl font-bold">👋 Hey, I'm Aditya Devarshi</h2>
45
+ <p class="mt-2 text-gray-700">I'm an AI Engineer 🤖, here to help with your assignments 📚, support multiple images 📷, and provide keyboard shortcuts ⌨️.</p>
46
+ <p class="mt-2 text-gray-700">Connect with me:</p>
47
+ <ul class="list-disc list-inside mt-2 text-blue-600">
48
+ <li><a href="https://www.adityadevarshi.online/" target="_blank">🌐 Website</a></li>
49
+ <li><a href="https://www.linkedin.com/in/aditya-devarshi/" target="_blank">🔗 LinkedIn</a></li>
50
+ <li><a href="https://github.com/devarshiadi" target="_blank">🐙 GitHub</a></li>
51
+ <li><a href="https://medium.com/@devarshia5" target="_blank">✍️ Medium</a></li>
52
+ </ul>
53
+ </div>
54
+ <div class="text-right">
55
+ <button id="closePopup" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
56
+ Close
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
  <script>
63
  const fileInput = document.getElementById('fileInput');
64
  const addImageBtn = document.getElementById('addImageBtn');
 
134
  });
135
  const data = await response.json();
136
  if (response.ok && data.result) {
137
+ // Convert markdown result to HTML using marked
138
+ resultArea.innerHTML = `<div class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${marked(data.result)}</div>`;
139
  // Reset the UI.
140
  selectedFiles = [];
141
  thumbnails.innerHTML = "";
 
146
  resultArea.innerHTML = `<p class="text-red-500">Error processing the images: ${error.message}</p>`;
147
  }
148
  });
149
+
150
+ // Show popup only if it hasn't been shown before
151
+ if (!localStorage.getItem('popupShown')) {
152
+ document.getElementById('popupCard').style.display = 'flex';
153
+ } else {
154
+ document.getElementById('popupCard').style.display = 'none';
155
+ }
156
+ document.getElementById('closePopup').addEventListener('click', function() {
157
+ document.getElementById('popupCard').style.display = 'none';
158
+ localStorage.setItem('popupShown', 'true');
159
+ });
160
  </script>
161
  </body>
162
  </html>