Hugging Face's logo

Spaces:
phantomDOCTOR314
/
insta-analyzer
Running

App Files Community
phantomDOCTOR314 commited on
Commit
c827e91
·
verified ·
1 Parent(s): fcaf7af

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +398 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Insta Analyzer
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: gray
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: insta-analyzer
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,398 @@
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>InstaAnalyzer - Competitor Insights Tool</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .loading-spinner {
18
+ border-top-color: #ec4899;
19
+ animation: spin 1s linear infinite;
20
+ }
21
+ @keyframes spin {
22
+ 0% { transform: rotate(0deg); }
23
+ 100% { transform: rotate(360deg); }
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-gray-50 min-h-screen">
28
+ <!-- Navigation -->
29
+ <nav class="gradient-bg text-white shadow-lg">
30
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31
+ <div class="flex justify-between h-16 items-center">
32
+ <div class="flex items-center">
33
+ <i class="fab fa-instagram text-2xl mr-2"></i>
34
+ <span class="text-xl font-bold">InstaAnalyzer</span>
35
+ </div>
36
+ <div class="hidden md:block">
37
+ <div class="ml-10 flex items-baseline space-x-4">
38
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-white bg-opacity-20">Dashboard</a>
39
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-20">Reports</a>
40
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-20">Pricing</a>
41
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-20">Support</a>
42
+ </div>
43
+ </div>
44
+ <div class="hidden md:block">
45
+ <button class="bg-white text-pink-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100">Logout</button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Main Content -->
52
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
53
+ <div class="mb-8">
54
+ <h1 class="text-3xl font-bold text-gray-900">Competitor Analysis</h1>
55
+ <p class="mt-2 text-gray-600">Analyze competitor Instagram accounts and optimize your strategy</p>
56
+ </div>
57
+
58
+ <!-- Connect Account Section -->
59
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
60
+ <div class="flex items-center justify-between">
61
+ <div>
62
+ <h2 class="text-xl font-semibold text-gray-800">Connect Your Instagram Account</h2>
63
+ <p class="text-gray-600 mt-1">Secure connection required to access competitor data</p>
64
+ </div>
65
+ <button id="connectBtn" class="gradient-bg text-white px-6 py-3 rounded-md font-medium hover:opacity-90 transition">
66
+ <i class="fab fa-instagram mr-2"></i> Connect Instagram
67
+ </button>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Analysis Form (initially hidden) -->
72
+ <div id="analysisForm" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
73
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Analyze Competitor Account</h2>
74
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
75
+ <div>
76
+ <label for="competitorUsername" class="block text-sm font-medium text-gray-700 mb-1">Competitor Username</label>
77
+ <input type="text" id="competitorUsername" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" placeholder="e.g., nike">
78
+ </div>
79
+ <div>
80
+ <label for="postLimit" class="block text-sm font-medium text-gray-700 mb-1">Number of Posts</label>
81
+ <select id="postLimit" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500">
82
+ <option value="10">10 Posts</option>
83
+ <option value="25">25 Posts</option>
84
+ <option value="50">50 Posts</option>
85
+ <option value="100">100 Posts</option>
86
+ </select>
87
+ </div>
88
+ <div class="flex items-end">
89
+ <button id="analyzeBtn" class="gradient-bg text-white px-6 py-2 rounded-md font-medium hover:opacity-90 transition w-full">
90
+ Analyze Competitor
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Loading State -->
97
+ <div id="loadingState" class="hidden flex flex-col items-center justify-center py-12">
98
+ <div class="w-16 h-16 border-4 border-pink-500 border-solid rounded-full loading-spinner mb-4"></div>
99
+ <p class="text-gray-700">Analyzing competitor posts. This may take a few minutes...</p>
100
+ </div>
101
+
102
+ <!-- Results Section -->
103
+ <div id="resultsSection" class="hidden">
104
+ <div class="flex justify-between items-center mb-6">
105
+ <h2 class="text-2xl font-bold text-gray-800">Analysis Results</h2>
106
+ <div class="flex space-x-2">
107
+ <button id="sortLikesBtn" class="bg-pink-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-pink-700">
108
+ Sort by Likes <i class="fas fa-arrow-down ml-1"></i>
109
+ </button>
110
+ <button id="sortCommentsBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">
111
+ Sort by Comments
112
+ </button>
113
+ <button id="sortDateBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">
114
+ Sort by Date
115
+ </button>
116
+ </div>
117
+ </div>
118
+
119
+ <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
120
+ <!-- Results will be populated here by JavaScript -->
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Sample Data (hidden by default) -->
125
+ <div id="sampleData" class="hidden">
126
+ <!-- This will be used by JavaScript to clone sample posts -->
127
+ <div class="post-card bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300">
128
+ <div class="relative">
129
+ <img src="https://via.placeholder.com/600x600" alt="Post image" class="w-full h-64 object-cover">
130
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
131
+ <div class="flex justify-between items-center text-white">
132
+ <span class="font-semibold">Posted: <span class="post-date">2 days ago</span></span>
133
+ <div class="flex items-center space-x-4">
134
+ <span class="flex items-center">
135
+ <i class="fas fa-heart mr-1"></i>
136
+ <span class="post-likes">12.4k</span>
137
+ </span>
138
+ <span class="flex items-center">
139
+ <i class="fas fa-comment mr-1"></i>
140
+ <span class="post-comments">843</span>
141
+ </span>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <div class="p-4">
147
+ <p class="post-caption text-gray-700 mb-3 line-clamp-2">This is a sample Instagram post caption that would be analyzed for performance metrics...</p>
148
+ <a href="#" class="post-link text-pink-600 hover:underline flex items-center">
149
+ <i class="fas fa-external-link-alt mr-2"></i> View on Instagram
150
+ </a>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </main>
155
+
156
+ <!-- Footer -->
157
+ <footer class="bg-gray-800 text-white py-8">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
160
+ <div>
161
+ <h3 class="text-lg font-semibold mb-4">InstaAnalyzer</h3>
162
+ <p class="text-gray-400">Powerful Instagram analytics and competitor research tools to grow your brand.</p>
163
+ </div>
164
+ <div>
165
+ <h3 class="text-lg font-semibold mb-4">Features</h3>
166
+ <ul class="space-y-2">
167
+ <li><a href="#" class="text-gray-400 hover:text-white">Competitor Analysis</a></li>
168
+ <li><a href="#" class="text-gray-400 hover:text-white">Post Performance</a></li>
169
+ <li><a href="#" class="text-gray-400 hover:text-white">Audience Insights</a></li>
170
+ <li><a href="#" class="text-gray-400 hover:text-white">Content Strategy</a></li>
171
+ </ul>
172
+ </div>
173
+ <div>
174
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
175
+ <ul class="space-y-2">
176
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
177
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
178
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
179
+ </ul>
180
+ </div>
181
+ <div>
182
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
183
+ <ul class="space-y-2">
184
+ <li class="text-gray-400">support@instaanalyzer.com</li>
185
+ <li class="text-gray-400">+1 (555) 123-4567</li>
186
+ <li class="flex space-x-4 mt-4">
187
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
188
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
189
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
190
+ </li>
191
+ </ul>
192
+ </div>
193
+ </div>
194
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
195
+ <p>&copy; 2023 InstaAnalyzer. All rights reserved.</p>
196
+ </div>
197
+ </div>
198
+ </footer>
199
+
200
+ <script>
201
+ document.addEventListener('DOMContentLoaded', function() {
202
+ // DOM elements
203
+ const connectBtn = document.getElementById('connectBtn');
204
+ const analysisForm = document.getElementById('analysisForm');
205
+ const analyzeBtn = document.getElementById('analyzeBtn');
206
+ const loadingState = document.getElementById('loadingState');
207
+ const resultsSection = document.getElementById('resultsSection');
208
+ const resultsGrid = document.getElementById('resultsGrid');
209
+ const samplePost = document.querySelector('#sampleData .post-card');
210
+ const sortLikesBtn = document.getElementById('sortLikesBtn');
211
+ const sortCommentsBtn = document.getElementById('sortCommentsBtn');
212
+ const sortDateBtn = document.getElementById('sortDateBtn');
213
+
214
+ // Sample competitor data
215
+ const samplePosts = [
216
+ {
217
+ image: 'https://source.unsplash.com/random/600x600/?fashion',
218
+ date: '3 hours ago',
219
+ likes: '24.7k',
220
+ comments: '1.2k',
221
+ caption: 'Our new summer collection is now live! Check out these amazing styles that are perfect for the season. #summerfashion #newcollection',
222
+ link: '#'
223
+ },
224
+ {
225
+ image: 'https://source.unsplash.com/random/600x600/?model',
226
+ date: '1 day ago',
227
+ likes: '18.3k',
228
+ comments: '945',
229
+ caption: 'Behind the scenes at our latest photoshoot with the incredible @modelname. The energy was electric! #photoshoot #behindthescenes',
230
+ link: '#'
231
+ },
232
+ {
233
+ image: 'https://source.unsplash.com/random/600x600/?shoes',
234
+ date: '2 days ago',
235
+ likes: '32.1k',
236
+ comments: '2.4k',
237
+ caption: 'These limited edition sneakers are selling out fast! Get yours before theyre gone forever. #sneakers #limitededition',
238
+ link: '#'
239
+ },
240
+ {
241
+ image: 'https://source.unsplash.com/random/600x600/?accessories',
242
+ date: '3 days ago',
243
+ likes: '15.6k',
244
+ comments: '782',
245
+ caption: 'Accessorize your look with our new jewelry line. Perfect for any occasion and any outfit. #jewelry #accessories',
246
+ link: '#'
247
+ },
248
+ {
249
+ image: 'https://source.unsplash.com/random/600x600/?sale',
250
+ date: '4 days ago',
251
+ likes: '28.9k',
252
+ comments: '1.8k',
253
+ caption: 'FLASH SALE! 50% off everything for the next 24 hours only. Use code FLASH50 at checkout. Dont miss out! #flashsale #discount',
254
+ link: '#'
255
+ },
256
+ {
257
+ image: 'https://source.unsplash.com/random/600x600/?event',
258
+ date: '5 days ago',
259
+ likes: '9.7k',
260
+ comments: '512',
261
+ caption: 'Thank you to everyone who came out to our launch event last night! The turnout was incredible. #launchevent #thankyou',
262
+ link: '#'
263
+ }
264
+ ];
265
+
266
+ // Connect Instagram button click handler
267
+ connectBtn.addEventListener('click', function() {
268
+ // Simulate connection process
269
+ connectBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
270
+ connectBtn.disabled = true;
271
+
272
+ setTimeout(function() {
273
+ connectBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Connected';
274
+ analysisForm.classList.remove('hidden');
275
+
276
+ // Change button to show connected state
277
+ setTimeout(function() {
278
+ connectBtn.innerHTML = '<i class="fab fa-instagram mr-2"></i> Account Connected';
279
+ connectBtn.classList.remove('gradient-bg');
280
+ connectBtn.classList.add('bg-green-600');
281
+ }, 1000);
282
+ }, 2000);
283
+ });
284
+
285
+ // Analyze button click handler
286
+ analyzeBtn.addEventListener('click', function() {
287
+ const competitorUsername = document.getElementById('competitorUsername').value;
288
+ const postLimit = document.getElementById('postLimit').value;
289
+
290
+ if (!competitorUsername) {
291
+ alert('Please enter a competitor username');
292
+ return;
293
+ }
294
+
295
+ // Show loading state
296
+ analysisForm.classList.add('hidden');
297
+ loadingState.classList.remove('hidden');
298
+
299
+ // Simulate analysis process
300
+ setTimeout(function() {
301
+ loadingState.classList.add('hidden');
302
+ resultsSection.classList.remove('hidden');
303
+ displayResults(samplePosts);
304
+ }, 3000);
305
+ });
306
+
307
+ // Display results in the grid
308
+ function displayResults(posts) {
309
+ resultsGrid.innerHTML = '';
310
+
311
+ posts.forEach(post => {
312
+ const newPost = samplePost.cloneNode(true);
313
+
314
+ // Update post data
315
+ newPost.querySelector('img').src = post.image;
316
+ newPost.querySelector('img').alt = 'Instagram post by ' + post.username;
317
+ newPost.querySelector('.post-date').textContent = post.date;
318
+ newPost.querySelector('.post-likes').textContent = post.likes;
319
+ newPost.querySelector('.post-comments').textContent = post.comments;
320
+ newPost.querySelector('.post-caption').textContent = post.caption;
321
+ newPost.querySelector('.post-link').href = post.link;
322
+
323
+ // Store numerical likes for sorting (remove 'k' and multiply by 1000)
324
+ const likesNum = parseFloat(post.likes.replace('k', '')) * 1000;
325
+ newPost.dataset.likes = likesNum;
326
+ newPost.dataset.comments = parseInt(post.comments.replace(',', ''));
327
+
328
+ // Add to grid
329
+ resultsGrid.appendChild(newPost);
330
+ });
331
+ }
332
+
333
+ // Sort buttons functionality
334
+ sortLikesBtn.addEventListener('click', function() {
335
+ const posts = Array.from(document.querySelectorAll('.post-card'));
336
+
337
+ posts.sort((a, b) => {
338
+ return b.dataset.likes - a.dataset.likes;
339
+ });
340
+
341
+ // Re-append sorted posts
342
+ posts.forEach(post => {
343
+ resultsGrid.appendChild(post);
344
+ });
345
+
346
+ // Update active button state
347
+ sortLikesBtn.classList.remove('bg-gray-200', 'text-gray-700');
348
+ sortLikesBtn.classList.add('bg-pink-600', 'text-white');
349
+ sortCommentsBtn.classList.remove('bg-pink-600', 'text-white');
350
+ sortCommentsBtn.classList.add('bg-gray-200', 'text-gray-700');
351
+ sortDateBtn.classList.remove('bg-pink-600', 'text-white');
352
+ sortDateBtn.classList.add('bg-gray-200', 'text-gray-700');
353
+ });
354
+
355
+ sortCommentsBtn.addEventListener('click', function() {
356
+ const posts = Array.from(document.querySelectorAll('.post-card'));
357
+
358
+ posts.sort((a, b) => {
359
+ return b.dataset.comments - a.dataset.comments;
360
+ });
361
+
362
+ // Re-append sorted posts
363
+ posts.forEach(post => {
364
+ resultsGrid.appendChild(post);
365
+ });
366
+
367
+ // Update active button state
368
+ sortCommentsBtn.classList.remove('bg-gray-200', 'text-gray-700');
369
+ sortCommentsBtn.classList.add('bg-pink-600', 'text-white');
370
+ sortLikesBtn.classList.remove('bg-pink-600', 'text-white');
371
+ sortLikesBtn.classList.add('bg-gray-200', 'text-gray-700');
372
+ sortDateBtn.classList.remove('bg-pink-600', 'text-white');
373
+ sortDateBtn.classList.add('bg-gray-200', 'text-gray-700');
374
+ });
375
+
376
+ sortDateBtn.addEventListener('click', function() {
377
+ // This would require actual date data to sort properly
378
+ // For demo, we'll just reverse the array
379
+ const posts = Array.from(document.querySelectorAll('.post-card'));
380
+ posts.reverse();
381
+
382
+ // Re-append sorted posts
383
+ posts.forEach(post => {
384
+ resultsGrid.appendChild(post);
385
+ });
386
+
387
+ // Update active button state
388
+ sortDateBtn.classList.remove('bg-gray-200', 'text-gray-700');
389
+ sortDateBtn.classList.add('bg-pink-600', 'text-white');
390
+ sortLikesBtn.classList.remove('bg-pink-600', 'text-white');
391
+ sortLikesBtn.classList.add('bg-gray-200', 'text-gray-700');
392
+ sortCommentsBtn.classList.remove('bg-pink-600', 'text-white');
393
+ sortCommentsBtn.classList.add('bg-gray-200', 'text-gray-700');
394
+ });
395
+ });
396
+ </script>
397
+ <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=phantomDOCTOR314/insta-analyzer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
398
+ </html>
prompts.txt ADDED
File without changes