Hugging Face's logo

Spaces:
a40login
/
ai-workflow-hub
Running

App Files Community
a40login commited on
Commit
07495bf
·
verified ·
1 Parent(s): eb04d21

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +518 -58
  2. prompts.txt +2 -1
index.html CHANGED
@@ -23,6 +23,9 @@
23
  'float2': 'float 8s ease-in-out infinite',
24
  'float3': 'float 10s ease-in-out infinite',
25
  'glow': 'glow 2s ease-in-out infinite alternate',
 
 
 
26
  },
27
  keyframes: {
28
  float: {
@@ -102,6 +105,21 @@
102
  background: rgba(14, 246, 204, 0.05);
103
  border-color: rgba(14, 246, 204, 0.3);
104
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </style>
106
  </head>
107
  <body class="bg-dark text-light relative overflow-x-hidden">
@@ -217,7 +235,7 @@
217
  <button id="toggleDarkMode" class="p-2 rounded-full hover:bg-gray-800 transition">
218
  <i class="fas fa-moon text-accent"></i>
219
  </button>
220
- <button class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
221
  New Automation
222
  </button>
223
  </div>
@@ -230,50 +248,8 @@
230
  <span>AI Automation Agents</span>
231
  </h2>
232
 
233
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
234
- <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
235
- <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-xl text-dark mb-4">
236
- <i class="fas fa-comment-dots"></i>
237
- </div>
238
- <h3 class="font-bold mb-2">Social Caption Generator</h3>
239
- <p class="text-sm text-gray-400 mb-4">Create engaging social media captions based on your content</p>
240
- <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
241
- Run Agent
242
- </button>
243
- </div>
244
-
245
- <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
246
- <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-xl text-dark mb-4">
247
- <i class="fas fa-image"></i>
248
- </div>
249
- <h3 class="font-bold mb-2">Image Creator</h3>
250
- <p class="text-sm text-gray-400 mb-4">Generate custom images with DALL·E or Stable Diffusion</p>
251
- <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
252
- Run Agent
253
- </button>
254
- </div>
255
-
256
- <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
257
- <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-xl text-dark mb-4">
258
- <i class="fas fa-chart-line"></i>
259
- </div>
260
- <h3 class="font-bold mb-2">Data Analyzer</h3>
261
- <p class="text-sm text-gray-400 mb-4">Upload CSV/Excel files for instant AI-powered analysis</p>
262
- <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
263
- Run Agent
264
- </button>
265
- </div>
266
-
267
- <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
268
- <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-xl text-dark mb-4">
269
- <i class="fas fa-envelope"></i>
270
- </div>
271
- <h3 class="font-bold mb-2">Email Responder</h3>
272
- <p class="text-sm text-gray-400 mb-4">Automatically draft professional email responses</p>
273
- <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
274
- Run Agent
275
- </button>
276
- </div>
277
  </div>
278
  </section>
279
 
@@ -541,6 +517,110 @@ print(fibonacci(10)) # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]</code></pre>
541
  </div>
542
  </div>
543
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
544
  <script>
545
  // Toggle dark mode
546
  const toggleDarkMode = document.getElementById('toggleDarkMode');
@@ -568,6 +648,7 @@ print(fibonacci(10)) # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]</code></pre>
568
  loginButtons.forEach(button => {
569
  button.addEventListener('click', () => {
570
  dashboardPreview.classList.remove('hidden');
 
571
  });
572
  });
573
 
@@ -578,24 +659,403 @@ print(fibonacci(10)) # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]</code></pre>
578
  }
579
  });
580
 
581
- // Accordion functionality for FAQ
582
- const accordions = document.querySelectorAll('.accordion');
583
- accordions.forEach(accordion => {
584
- const header = accordion.querySelector('.accordion-header');
585
- const icon = header.querySelector('i');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
586
 
587
- header.addEventListener('click', () => {
588
- accordion.classList.toggle('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
589
 
590
- if (accordion.classList.contains('active')) {
591
- icon.classList.remove('fa-chevron-down');
592
- icon.classList.add('fa-chevron-up');
593
- } else {
594
- icon.classList.remove('fa-chevron-up');
595
- icon.classList.add('fa-chevron-down');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
596
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
597
  });
598
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
599
  </script>
600
  <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=a40login/ai-workflow-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
601
  </html>
 
23
  'float2': 'float 8s ease-in-out infinite',
24
  'float3': 'float 10s ease-in-out infinite',
25
  'glow': 'glow 2s ease-in-out infinite alternate',
26
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
27
+ 'spin-slow': 'spin 3s linear infinite',
28
+ 'bounce-slow': 'bounce 2s infinite'
29
  },
30
  keyframes: {
31
  float: {
 
105
  background: rgba(14, 246, 204, 0.05);
106
  border-color: rgba(14, 246, 204, 0.3);
107
  }
108
+ .loading-dots:after {
109
+ content: '.';
110
+ animation: dots 1.5s steps(5, end) infinite;
111
+ }
112
+ @keyframes dots {
113
+ 0%, 20% { content: '.'; }
114
+ 40% { content: '..'; }
115
+ 60% { content: '...'; }
116
+ 80%, 100% { content: ''; }
117
+ }
118
+ .progress-ring__circle {
119
+ transition: stroke-dashoffset 0.35s;
120
+ transform: rotate(-90deg);
121
+ transform-origin: 50% 50%;
122
+ }
123
  </style>
124
  </head>
125
  <body class="bg-dark text-light relative overflow-x-hidden">
 
235
  <button id="toggleDarkMode" class="p-2 rounded-full hover:bg-gray-800 transition">
236
  <i class="fas fa-moon text-accent"></i>
237
  </button>
238
+ <button id="newAutomationBtn" class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
239
  New Automation
240
  </button>
241
  </div>
 
248
  <span>AI Automation Agents</span>
249
  </h2>
250
 
251
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="agentsContainer">
252
+ <!-- Agents will be added here dynamically -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
253
  </div>
254
  </section>
255
 
 
517
  </div>
518
  </div>
519
 
520
+ <!-- Webhook Response Modal -->
521
+ <div id="webhookModal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
522
+ <div class="glass-card rounded-xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
523
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
524
+ <h3 class="text-lg font-bold" id="webhookModalTitle">Agent Response</h3>
525
+ <button id="closeWebhookModal" class="text-gray-400 hover:text-accent">
526
+ <i class="fas fa-times"></i>
527
+ </button>
528
+ </div>
529
+ <div class="p-4 overflow-y-auto max-h-[70vh]" id="webhookResponseContent">
530
+ <!-- Content will be loaded here -->
531
+ </div>
532
+ <div class="p-4 border-t border-gray-700 flex justify-end">
533
+ <button id="copyResponseBtn" class="px-4 py-2 bg-primary rounded-lg hover:bg-gray-800 transition mr-2">
534
+ <i class="fas fa-copy mr-2"></i> Copy
535
+ </button>
536
+ <button id="closeWebhookModal2" class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
537
+ Close
538
+ </button>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Loading Modal -->
544
+ <div id="loadingModal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
545
+ <div class="glass-card rounded-xl max-w-md w-full p-8 text-center">
546
+ <div class="flex justify-center mb-6">
547
+ <svg class="animate-spin-slow h-16 w-16 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
548
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
549
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
550
+ </svg>
551
+ </div>
552
+ <h3 class="text-xl font-bold mb-2" id="loadingStatus">Processing Request</h3>
553
+ <p class="text-gray-400 mb-6" id="loadingMessage">Gathering data from sources...</p>
554
+ <div class="w-full bg-dark rounded-full h-2 mb-4">
555
+ <div id="loadingProgress" class="bg-gradient-to-r from-accent to-accent2 h-2 rounded-full" style="width: 0%"></div>
556
+ </div>
557
+ <div class="flex justify-between text-xs text-gray-400">
558
+ <span id="elapsedTime">0s</span>
559
+ <span id="loadingTips">Tip: Complex requests may take longer</span>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- New Automation Modal -->
565
+ <div id="newAutomationModal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
566
+ <div class="glass-card rounded-xl max-w-md w-full max-h-[90vh] overflow-hidden">
567
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
568
+ <h3 class="text-lg font-bold">Create New Automation</h3>
569
+ <button id="closeNewAutomationModal" class="text-gray-400 hover:text-accent">
570
+ <i class="fas fa-times"></i>
571
+ </button>
572
+ </div>
573
+ <div class="p-4 overflow-y-auto">
574
+ <div class="space-y-4">
575
+ <div>
576
+ <label for="agentName" class="block text-sm font-medium mb-1">Agent Name</label>
577
+ <input type="text" id="agentName" class="w-full bg-primary border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-accent">
578
+ </div>
579
+
580
+ <div>
581
+ <label for="agentDescription" class="block text-sm font-medium mb-1">Description</label>
582
+ <textarea id="agentDescription" rows="3" class="w-full bg-primary border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-accent"></textarea>
583
+ </div>
584
+
585
+ <div>
586
+ <label for="webhookUrl" class="block text-sm font-medium mb-1">Webhook URL</label>
587
+ <input type="url" id="webhookUrl" class="w-full bg-primary border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-accent" placeholder="https://api.example.com/webhook">
588
+ </div>
589
+
590
+ <div>
591
+ <label for="agentIcon" class="block text-sm font-medium mb-1">Icon</label>
592
+ <div class="grid grid-cols-5 gap-2">
593
+ <button class="agent-icon-btn p-2 rounded-lg border border-gray-700 hover:border-accent transition" data-icon="fa-comment-dots">
594
+ <i class="fas fa-comment-dots"></i>
595
+ </button>
596
+ <button class="agent-icon-btn p-2 rounded-lg border border-gray-700 hover:border-accent transition" data-icon="fa-image">
597
+ <i class="fas fa-image"></i>
598
+ </button>
599
+ <button class="agent-icon-btn p-2 rounded-lg border border-gray-700 hover:border-accent transition" data-icon="fa-chart-line">
600
+ <i class="fas fa-chart-line"></i>
601
+ </button>
602
+ <button class="agent-icon-btn p-2 rounded-lg border border-gray-700 hover:border-accent transition" data-icon="fa-envelope">
603
+ <i class="fas fa-envelope"></i>
604
+ </button>
605
+ <button class="agent-icon-btn p-2 rounded-lg border border-gray-700 hover:border-accent transition" data-icon="fa-code">
606
+ <i class="fas fa-code"></i>
607
+ </button>
608
+ </div>
609
+ <input type="hidden" id="selectedIcon" value="fa-comment-dots">
610
+ </div>
611
+ </div>
612
+ </div>
613
+ <div class="p-4 border-t border-gray-700 flex justify-end">
614
+ <button id="cancelNewAutomation" class="px-4 py-2 bg-primary rounded-lg hover:bg-gray-800 transition mr-2">
615
+ Cancel
616
+ </button>
617
+ <button id="saveAutomation" class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
618
+ Save Automation
619
+ </button>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
  <script>
625
  // Toggle dark mode
626
  const toggleDarkMode = document.getElementById('toggleDarkMode');
 
648
  loginButtons.forEach(button => {
649
  button.addEventListener('click', () => {
650
  dashboardPreview.classList.remove('hidden');
651
+ initializeDashboard();
652
  });
653
  });
654
 
 
659
  }
660
  });
661
 
662
+ // Loading messages for the loading modal
663
+ const loadingMessages = [
664
+ "Gathering data from sources...",
665
+ "Thinking of the perfect response...",
666
+ "Analyzing patterns and trends...",
667
+ "Nearly done. Thinking haaard...",
668
+ "Consulting the AI knowledge base...",
669
+ "Optimizing output quality...",
670
+ "Generating creative solutions...",
671
+ "Refining the final details...",
672
+ "Cross-referencing with latest data...",
673
+ "Ensuring accuracy and relevance...",
674
+ "Building comprehensive response...",
675
+ "Processing complex algorithms...",
676
+ "Filtering through multiple possibilities...",
677
+ "Applying advanced neural networks...",
678
+ "Synthesizing information...",
679
+ "Running final quality checks...",
680
+ "Preparing your personalized response...",
681
+ "Connecting to external APIs...",
682
+ "Formatting the output...",
683
+ "Adding finishing touches...",
684
+ "Almost there, just a few more seconds...",
685
+ "Your request is being prioritized...",
686
+ "Processing at maximum capacity...",
687
+ "The AI is working overtime for you...",
688
+ "Finalizing your exceptional results..."
689
+ ];
690
+
691
+ // Sample agents data
692
+ let agents = [
693
+ {
694
+ id: 1,
695
+ name: "Social Caption Generator",
696
+ description: "Create engaging social media captions based on your content",
697
+ icon: "fa-comment-dots",
698
+ webhook: "https://api.example.com/webhook/caption-generator",
699
+ lastRun: null,
700
+ response: null
701
+ },
702
+ {
703
+ id: 2,
704
+ name: "Image Creator",
705
+ description: "Generate custom images with DALL·E or Stable Diffusion",
706
+ icon: "fa-image",
707
+ webhook: "https://api.example.com/webhook/image-creator",
708
+ lastRun: null,
709
+ response: null
710
+ },
711
+ {
712
+ id: 3,
713
+ name: "Data Analyzer",
714
+ description: "Upload CSV/Excel files for instant AI-powered analysis",
715
+ icon: "fa-chart-line",
716
+ webhook: "https://api.example.com/webhook/data-analyzer",
717
+ lastRun: null,
718
+ response: null
719
+ },
720
+ {
721
+ id: 4,
722
+ name: "Email Responder",
723
+ description: "Automatically draft professional email responses",
724
+ icon: "fa-envelope",
725
+ webhook: "https://api.example.com/webhook/email-responder",
726
+ lastRun: null,
727
+ response: null
728
+ }
729
+ ];
730
+
731
+ // Initialize dashboard with agents
732
+ function initializeDashboard() {
733
+ const agentsContainer = document.getElementById('agentsContainer');
734
+ agentsContainer.innerHTML = '';
735
 
736
+ agents.forEach(agent => {
737
+ const agentCard = document.createElement('div');
738
+ agentCard.className = 'feature-card glass-card p-6 rounded-xl border border-gray-700';
739
+ agentCard.innerHTML = `
740
+ <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-xl text-dark mb-4">
741
+ <i class="fas ${agent.icon}"></i>
742
+ </div>
743
+ <h3 class="font-bold mb-2">${agent.name}</h3>
744
+ <p class="text-sm text-gray-400 mb-4">${agent.description}</p>
745
+ <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition run-agent-btn" data-agent-id="${agent.id}">
746
+ Run Agent
747
+ </button>
748
+ `;
749
+ agentsContainer.appendChild(agentCard);
750
+ });
751
+
752
+ // Add event listeners to all run agent buttons
753
+ document.querySelectorAll('.run-agent-btn').forEach(button => {
754
+ button.addEventListener('click', function() {
755
+ const agentId = parseInt(this.getAttribute('data-agent-id'));
756
+ runAgent(agentId);
757
+ });
758
+ });
759
+ }
760
+
761
+ // Run agent function
762
+ function runAgent(agentId) {
763
+ const agent = agents.find(a => a.id === agentId);
764
+ if (!agent) return;
765
+
766
+ // Show loading modal
767
+ showLoadingModal(agent.name);
768
+
769
+ // Simulate webhook call with random delay (3-8 seconds)
770
+ const delay = Math.floor(Math.random() * 5000) + 3000;
771
+ let elapsed = 0;
772
+ const progressInterval = setInterval(() => {
773
+ elapsed += 100;
774
+ const progress = Math.min(100, (elapsed / delay) * 100);
775
+ document.getElementById('loadingProgress').style.width = `${progress}%`;
776
+ document.getElementById('elapsedTime').textContent = `${Math.floor(elapsed / 1000)}s`;
777
 
778
+ // Change loading message every 1.5 seconds
779
+ if (elapsed % 1500 < 100) {
780
+ const randomMessage = loadingMessages[Math.floor(Math.random() * loadingMessages.length)];
781
+ document.getElementById('loadingMessage').textContent = randomMessage;
782
+ }
783
+ }, 100);
784
+
785
+ // Simulate API response
786
+ setTimeout(() => {
787
+ clearInterval(progressInterval);
788
+ document.getElementById('loadingProgress').style.width = '100%';
789
+
790
+ // Sample responses for different agents
791
+ let response;
792
+ switch(agent.id) {
793
+ case 1:
794
+ response = {
795
+ success: true,
796
+ captions: [
797
+ "Boost your productivity with these simple AI hacks! 🚀 #Productivity #AI",
798
+ "Unlock the power of automation in your daily workflow. Here's how... ⚡ #Workflow #Automation",
799
+ "Did you know AI can save you hours each week? Here are 3 ways to implement it today! #TimeSaver #AI"
800
+ ],
801
+ hashtags: ["#AI", "#Automation", "#Productivity", "#Tech", "#Innovation"]
802
+ };
803
+ break;
804
+ case 2:
805
+ response = {
806
+ success: true,
807
+ images: [
808
+ {
809
+ url: "https://example.com/generated-image-1.jpg",
810
+ prompt: "A futuristic cityscape with flying cars and neon lights"
811
+ },
812
+ {
813
+ url: "https://example.com/generated-image-2.jpg",
814
+ prompt: "A robot painting a masterpiece in a digital art studio"
815
+ }
816
+ ]
817
+ };
818
+ break;
819
+ case 3:
820
+ response = {
821
+ success: true,
822
+ analysis: {
823
+ summary: "The data shows a 23% increase in user engagement after implementing AI recommendations.",
824
+ keyFindings: [
825
+ "Peak engagement occurs between 2-4 PM",
826
+ "Video content performs 45% better than text posts",
827
+ "Posts with questions have 30% higher comment rates"
828
+ ],
829
+ recommendations: [
830
+ "Increase video content production",
831
+ "Schedule more posts during peak hours",
832
+ "Incorporate more questions in your captions"
833
+ ]
834
+ }
835
+ };
836
+ break;
837
+ case 4:
838
+ response = {
839
+ success: true,
840
+ email: {
841
+ subject: "Re: Your Inquiry About AI Automation",
842
+ body: "Dear [Recipient],\n\nThank you for reaching out about our AI automation solutions. I'd be happy to schedule a call to discuss how we can help streamline your workflows and boost productivity. Would next Tuesday at 2 PM work for you?\n\nBest regards,\n[Your Name]"
843
+ }
844
+ };
845
+ break;
846
+ default:
847
+ response = {
848
+ success: true,
849
+ message: "Agent executed successfully",
850
+ data: {
851
+ sample: "This is a sample response from the webhook",
852
+ timestamp: new Date().toISOString()
853
+ }
854
+ };
855
+ }
856
+
857
+ // Update agent with last run and response
858
+ agent.lastRun = new Date();
859
+ agent.response = response;
860
+
861
+ // Hide loading modal and show response
862
+ hideLoadingModal();
863
+ showWebhookResponse(agent.name, response);
864
+ }, delay);
865
+ }
866
+
867
+ // Show loading modal
868
+ function showLoadingModal(agentName) {
869
+ const loadingModal = document.getElementById('loadingModal');
870
+ document.getElementById('loadingStatus').textContent = `Running ${agentName}`;
871
+ document.getElementById('loadingMessage').textContent = loadingMessages[0];
872
+ document.getElementById('loadingProgress').style.width = '0%';
873
+ document.getElementById('elapsedTime').textContent = '0s';
874
+ loadingModal.classList.remove('hidden');
875
+ }
876
+
877
+ // Hide loading modal
878
+ function hideLoadingModal() {
879
+ document.getElementById('loadingModal').classList.add('hidden');
880
+ }
881
+
882
+ // Show webhook response modal
883
+ function showWebhookResponse(title, response) {
884
+ const modal = document.getElementById('webhookModal');
885
+ const content = document.getElementById('webhookResponseContent');
886
+
887
+ document.getElementById('webhookModalTitle').textContent = title;
888
+
889
+ // Format the response based on its structure
890
+ let html = '';
891
+ if (response.success === false) {
892
+ html = `<div class="text-red-400 mb-4"><i class="fas fa-exclamation-circle mr-2"></i> The agent encountered an error</div>`;
893
+ if (response.error) {
894
+ html += `<pre class="bg-primary p-3 rounded text-xs overflow-x-auto">${JSON.stringify(response.error, null, 2)}</pre>`;
895
+ }
896
+ } else {
897
+ // Handle different response structures
898
+ if (response.captions) {
899
+ html += `<h4 class="font-medium mb-2">Generated Captions:</h4>`;
900
+ html += `<ul class="mb-4 space-y-2">`;
901
+ response.captions.forEach(caption => {
902
+ html += `<li class="bg-primary p-3 rounded-lg">${caption}</li>`;
903
+ });
904
+ html += `</ul>`;
905
+
906
+ if (response.hashtags) {
907
+ html += `<h4 class="font-medium mb-2">Suggested Hashtags:</h4>`;
908
+ html += `<div class="flex flex-wrap gap-2 mb-4">`;
909
+ response.hashtags.forEach(tag => {
910
+ html += `<span class="px-2 py-1 bg-dark rounded-full text-sm">${tag}</span>`;
911
+ });
912
+ html += `</div>`;
913
+ }
914
+ }
915
+ else if (response.images) {
916
+ html += `<h4 class="font-medium mb-2">Generated Images:</h4>`;
917
+ html += `<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">`;
918
+ response.images.forEach(img => {
919
+ html += `<div class="bg-primary p-3 rounded-lg">
920
+ <div class="bg-dark rounded-lg aspect-square flex items-center justify-center mb-2">
921
+ <i class="fas fa-image text-4xl text-gray-600"></i>
922
+ </div>
923
+ <p class="text-sm">${img.prompt}</p>
924
+ </div>`;
925
+ });
926
+ html += `</div>`;
927
+ }
928
+ else if (response.analysis) {
929
+ html += `<h4 class="font-medium mb-2">Analysis Summary:</h4>`;
930
+ html += `<p class="bg-primary p-3 rounded-lg mb-4">${response.analysis.summary}</p>`;
931
+
932
+ html += `<h4 class="font-medium mb-2">Key Findings:</h4>`;
933
+ html += `<ul class="mb-4 space-y-2">`;
934
+ response.analysis.keyFindings.forEach(finding => {
935
+ html += `<li class="flex items-start">
936
+ <i class="fas fa-check text-accent mr-2 mt-1"></i>
937
+ <span>${finding}</span>
938
+ </li>`;
939
+ });
940
+ html += `</ul>`;
941
+
942
+ html += `<h4 class="font-medium mb-2">Recommendations:</h4>`;
943
+ html += `<ul class="space-y-2">`;
944
+ response.analysis.recommendations.forEach(rec => {
945
+ html += `<li class="flex items-start">
946
+ <i class="fas fa-lightbulb text-accent2 mr-2 mt-1"></i>
947
+ <span>${rec}</span>
948
+ </li>`;
949
+ });
950
+ html += `</ul>`;
951
+ }
952
+ else if (response.email) {
953
+ html += `<h4 class="font-medium mb-2">Email Subject:</h4>`;
954
+ html += `<p class="bg-primary p-3 rounded-lg mb-4">${response.email.subject}</p>`;
955
+
956
+ html += `<h4 class="font-medium mb-2">Email Body:</h4>`;
957
+ html += `<pre class="bg-primary p-3 rounded-lg whitespace-pre-wrap">${response.email.body}</pre>`;
958
+ }
959
+ else {
960
+ // Default JSON display
961
+ html += `<pre class="bg-primary p-3 rounded text-xs overflow-x-auto">${JSON.stringify(response, null, 2)}</pre>`;
962
  }
963
+ }
964
+
965
+ content.innerHTML = html;
966
+ modal.classList.remove('hidden');
967
+ }
968
+
969
+ // Close webhook modal
970
+ document.getElementById('closeWebhookModal').addEventListener('click', () => {
971
+ document.getElementById('webhookModal').classList.add('hidden');
972
+ });
973
+
974
+ document.getElementById('closeWebhookModal2').addEventListener('click', () => {
975
+ document.getElementById('webhookModal').classList.add('hidden');
976
+ });
977
+
978
+ // Copy response to clipboard
979
+ document.getElementById('copyResponseBtn').addEventListener('click', () => {
980
+ const content = document.getElementById('webhookResponseContent').textContent;
981
+ navigator.clipboard.writeText(content).then(() => {
982
+ const btn = document.getElementById('copyResponseBtn');
983
+ const originalText = btn.innerHTML;
984
+ btn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
985
+ setTimeout(() => {
986
+ btn.innerHTML = originalText;
987
+ }, 2000);
988
  });
989
  });
990
+
991
+ // New automation modal
992
+ document.getElementById('newAutomationBtn').addEventListener('click', () => {
993
+ document.getElementById('newAutomationModal').classList.remove('hidden');
994
+ });
995
+
996
+ document.getElementById('closeNewAutomationModal').addEventListener('click', () => {
997
+ document.getElementById('newAutomationModal').classList.add('hidden');
998
+ });
999
+
1000
+ document.getElementById('cancelNewAutomation').addEventListener('click', () => {
1001
+ document.getElementById('newAutomationModal').classList.add('hidden');
1002
+ });
1003
+
1004
+ // Icon selection
1005
+ document.querySelectorAll('.agent-icon-btn').forEach(button => {
1006
+ button.addEventListener('click', function() {
1007
+ document.querySelectorAll('.agent-icon-btn').forEach(btn => {
1008
+ btn.classList.remove('border-accent');
1009
+ btn.classList.add('border-gray-700');
1010
+ });
1011
+
1012
+ this.classList.remove('border-gray-700');
1013
+ this.classList.add('border-accent');
1014
+
1015
+ document.getElementById('selectedIcon').value = this.getAttribute('data-icon');
1016
+ });
1017
+ });
1018
+
1019
+ // Save new automation
1020
+ document.getElementById('saveAutomation').addEventListener('click', () => {
1021
+ const name = document.getElementById('agentName').value.trim();
1022
+ const description = document.getElementById('agentDescription').value.trim();
1023
+ const webhook = document.getElementById('webhookUrl').value.trim();
1024
+ const icon = document.getElementById('selectedIcon').value;
1025
+
1026
+ if (!name || !webhook) {
1027
+ alert('Please fill in all required fields');
1028
+ return;
1029
+ }
1030
+
1031
+ // Create new agent
1032
+ const newAgent = {
1033
+ id: agents.length + 1,
1034
+ name,
1035
+ description,
1036
+ icon,
1037
+ webhook,
1038
+ lastRun: null,
1039
+ response: null
1040
+ };
1041
+
1042
+ agents.push(newAgent);
1043
+
1044
+ // Reset form
1045
+ document.getElementById('agentName').value = '';
1046
+ document.getElementById('agentDescription').value = '';
1047
+ document.getElementById('webhookUrl').value = '';
1048
+ document.getElementById('selectedIcon').value = 'fa-comment-dots';
1049
+ document.querySelectorAll('.agent-icon-btn').forEach(btn => {
1050
+ btn.classList.remove('border-accent');
1051
+ btn.classList.add('border-gray-700');
1052
+ });
1053
+ document.querySelector('.agent-icon-btn').classList.add('border-accent');
1054
+
1055
+ // Close modal and refresh agents
1056
+ document.getElementById('newAutomationModal').classList.add('hidden');
1057
+ initializeDashboard();
1058
+ });
1059
  </script>
1060
  <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=a40login/ai-workflow-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1061
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Based on your background (AI Automation, n8n, Notion systems, Supabase), here’s an improved and translated version of your prompt, perfectly suited for tools like Lovable.dev, Vercel AI SDK, or any fullstack AI builder (Next.js, Astro, FlutterFlow, etc.). ⸻ 🧠 German Prompt – für eine WebApp mit Supabase, Google Auth und AI-Funktionalität ⸻ 🔧 Projektziel Erstelle eine moderne, performante WebApp mit Login über Google (via Supabase Auth). Nach dem Login soll der Nutzer Zugriff auf ein zentrales Dashboard erhalten, das verschiedene KI-Module bedient. Die Anwendung dient als zentrale Steuerzentrale für KI-Workflows (z. B. n8n), Prompts und Wissensdokumente – mit einem Fokus auf gute UX, klarer Struktur und erweiterbarer AI-Architektur. ⸻ 🛠 Funktionale Anforderungen 🔐 Authentifizierung • Google OAuth-Login via Supabase Auth • Nutzerverwaltung & Session-Handling via Supabase • Redirect nach Login zu /dashboard • Wenn bereits eingeloggt → automatische Weiterleitung 📊 Dashboard Nach dem Login soll ein übersichtliches Dashboard erscheinen mit folgenden Komponenten: 1. ✅ Agenten-Buttons • Button-Karten für verschiedene Automationen (z. B. „Social Caption generieren“, „Bild erstellen“, „Daten analysieren“) • Jeder Button triggert einen vordefinierten Webhook (n8n) 2. 🧠 Prompt-Galerie • Datenbankähnliches UI wie Notion (Cards, Tabellen oder Listen) • Prompts sind kategorisiert (z. B. Rolle, Ziel, Stil, Tonfall) • Einzelansicht mit Bearbeitungsmöglichkeit + „Prompt testen“-Button • Verknüpfung zu Systemen wie OpenAI oder Gemini 3. 📚 Knowledge-Base • Markdown-kompatibles Dokumentenarchiv • Kategorien und Tags • Suche und Volltextfilter • Optional: semantische KI-Suche mit Vektor-Datenbank 4. 🤖 AI-Chatbot • Wählbare AI-Engines: OpenAI, Gemini, DeepSeek, OpenRouter • Konfiguration über API-Key (Nutzer kann Key eingeben oder hinterlegen) • Chatverlauf speichern • Unterstützung für Text, JSON, Bilder (z. B. Markdown oder DALL·E-Vorschau) ⸻ 🌙 UI / UX Anforderungen • Dunkel-/Hellmodus-Schalter • Responsive Design (Desktop & Tablet) • Modernes Design mit Tailwind, Framer Motion oder ShadCN • Klar strukturierte Navigation: Sidebar + Main Panel • Fokus auf reduzierte Klickpfade und kontextbewusstes Arbeiten ⸻ 🧩 Technologie-Stack • Frontend: Next.js (App Router), Tailwind CSS, shadcn/ui • Backend/Auth: Supabase (Auth + DB) • AI APIs (optional via toggle): • OpenAI • Google Gemini • DeepSeek • OpenRouter • Webhook-Unterstützung: Trigger-Buttons → n8n Flows • Prompt- und Output-Management: Datenbankbasiert (Supabase Tables) ⸻ 🔐 Beispiel für .env Konfiguration NEXT_PUBLIC_SUPABASE_URL=https://xlfboxorogcafgkokjeg.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI... ⸻ ✅ Zielgruppe KI-Interessierte Power-User, Freelancer, Content-Teams oder Entwickler, die skalierbare Prompt-Systeme, personalisierte KI-Experimente und Automationen über ein zentrales Interface steuern wollen. ⸻ „Don’t Travel. Explore.“ – Nur diesmal in deinem Workflow. Mach deine KI-Systeme benutzbar. Ohne Umwege. ⸻ 📦 Möchtest du dieses Prompt direkt als Lovable-ready JSON, oder soll ich dir ein deploybares Next.js Starter-Template mit Supabase + Auth + UI liefern?
 
 
1
+ Based on your background (AI Automation, n8n, Notion systems, Supabase), here’s an improved and translated version of your prompt, perfectly suited for tools like Lovable.dev, Vercel AI SDK, or any fullstack AI builder (Next.js, Astro, FlutterFlow, etc.). ⸻ 🧠 German Prompt – für eine WebApp mit Supabase, Google Auth und AI-Funktionalität ⸻ 🔧 Projektziel Erstelle eine moderne, performante WebApp mit Login über Google (via Supabase Auth). Nach dem Login soll der Nutzer Zugriff auf ein zentrales Dashboard erhalten, das verschiedene KI-Module bedient. Die Anwendung dient als zentrale Steuerzentrale für KI-Workflows (z. B. n8n), Prompts und Wissensdokumente – mit einem Fokus auf gute UX, klarer Struktur und erweiterbarer AI-Architektur. ⸻ 🛠 Funktionale Anforderungen 🔐 Authentifizierung • Google OAuth-Login via Supabase Auth • Nutzerverwaltung & Session-Handling via Supabase • Redirect nach Login zu /dashboard • Wenn bereits eingeloggt → automatische Weiterleitung 📊 Dashboard Nach dem Login soll ein übersichtliches Dashboard erscheinen mit folgenden Komponenten: 1. ✅ Agenten-Buttons • Button-Karten für verschiedene Automationen (z. B. „Social Caption generieren“, „Bild erstellen“, „Daten analysieren“) • Jeder Button triggert einen vordefinierten Webhook (n8n) 2. 🧠 Prompt-Galerie • Datenbankähnliches UI wie Notion (Cards, Tabellen oder Listen) • Prompts sind kategorisiert (z. B. Rolle, Ziel, Stil, Tonfall) • Einzelansicht mit Bearbeitungsmöglichkeit + „Prompt testen“-Button • Verknüpfung zu Systemen wie OpenAI oder Gemini 3. 📚 Knowledge-Base • Markdown-kompatibles Dokumentenarchiv • Kategorien und Tags • Suche und Volltextfilter • Optional: semantische KI-Suche mit Vektor-Datenbank 4. 🤖 AI-Chatbot • Wählbare AI-Engines: OpenAI, Gemini, DeepSeek, OpenRouter • Konfiguration über API-Key (Nutzer kann Key eingeben oder hinterlegen) • Chatverlauf speichern • Unterstützung für Text, JSON, Bilder (z. B. Markdown oder DALL·E-Vorschau) ⸻ 🌙 UI / UX Anforderungen • Dunkel-/Hellmodus-Schalter • Responsive Design (Desktop & Tablet) • Modernes Design mit Tailwind, Framer Motion oder ShadCN • Klar strukturierte Navigation: Sidebar + Main Panel • Fokus auf reduzierte Klickpfade und kontextbewusstes Arbeiten ⸻ 🧩 Technologie-Stack • Frontend: Next.js (App Router), Tailwind CSS, shadcn/ui • Backend/Auth: Supabase (Auth + DB) • AI APIs (optional via toggle): • OpenAI • Google Gemini • DeepSeek • OpenRouter • Webhook-Unterstützung: Trigger-Buttons → n8n Flows • Prompt- und Output-Management: Datenbankbasiert (Supabase Tables) ⸻ 🔐 Beispiel für .env Konfiguration NEXT_PUBLIC_SUPABASE_URL=https://xlfboxorogcafgkokjeg.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI... ⸻ ✅ Zielgruppe KI-Interessierte Power-User, Freelancer, Content-Teams oder Entwickler, die skalierbare Prompt-Systeme, personalisierte KI-Experimente und Automationen über ein zentrales Interface steuern wollen. ⸻ „Don’t Travel. Explore.“ – Nur diesmal in deinem Workflow. Mach deine KI-Systeme benutzbar. Ohne Umwege. ⸻ 📦 Möchtest du dieses Prompt direkt als Lovable-ready JSON, oder soll ich dir ein deploybares Next.js Starter-Template mit Supabase + Auth + UI liefern?
2
+ add this webhooks for all buttons that currently dont have a connection. open a popup when clicked run agent and display response text. make animation for waiting and upcounter for seconds running with texts like "Gathering Data", "Thinking of the perfect response", "Nearly done. Thinking haaard" (make 25 possible wait-time-texts like in game-loading screens with animations. the New Automation opens a window where user can set and name new agent with webhook url and name and can save it