Spaces:

a40login
/

ai-workflow-hub

Running

App Files Files Community

a40login commited on May 7, 2025

Commit

eb04d21

verified ·

1 Parent(s): 96ff7cf

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +601 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai Workflow Hub
-emoji: 👀
 colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai-workflow-hub
+emoji: 🐳
 colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,601 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Workflow Hub | Centralized AI Automation</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">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#1A1F36',
+                        accent: '#0EF6CC',
+                        accent2: '#7B61FF',
+                        dark: '#0F111A',
+                        light: '#F8FAFC'
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'float2': 'float 8s ease-in-out infinite',
+                        'float3': 'float 10s ease-in-out infinite',
+                        'glow': 'glow 2s ease-in-out infinite alternate',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        glow: {
+                            '0%': { 'box-shadow': '0 0 5px -5px #0EF6CC' },
+                            '100%': { 'box-shadow': '0 0 20px 5px #0EF6CC' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0F111A;
+            color: #F8FAFC;
+            scroll-behavior: smooth;
+        }
+        .glass-card {
+            background: rgba(26, 31, 54, 0.6);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(14, 246, 204, 0.2);
+        }
+        .feature-card {
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            border-color: #7B61FF;
+        }
+        .custom-underline {
+            position: relative;
+        }
+        .custom-underline:after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: linear-gradient(90deg, #0EF6CC, #7B61FF);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+        .custom-underline:hover:after {
+            transform: scaleX(1);
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .accordion.active .accordion-content {
+            max-height: 300px;
+        }
+        .chat-message {
+            opacity: 0;
+            transform: translateY(10px);
+            animation: fadeIn 0.3s forwards;
+        }
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .prompt-card {
+            transition: all 0.2s ease;
+        }
+        .prompt-card:hover {
+            background: rgba(14, 246, 204, 0.05);
+            border-color: rgba(14, 246, 204, 0.3);
+        }
+    </style>
+</head>
+<body class="bg-dark text-light relative overflow-x-hidden">
+    <!-- Floating particles background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+        <div class="absolute w-3 h-3 rounded-full bg-accent opacity-20 animation-float" style="top:20%; left:10%"></div>
+        <div class="absolute w-4 h-4 rounded-full bg-accent2 opacity-20 animation-float2" style="top:40%; left:20%"></div>
+        <div class="absolute w-2 h-2 rounded-full bg-accent opacity-20 animation-float3" style="top:60%; left:50%"></div>
+        <div class="absolute w-3 h-3 rounded-full bg-accent2 opacity-20 animation-float" style="top:80%; left:30%"></div>
+        <div class="absolute w-4 h-4 rounded-full bg-accent opacity-20 animation-float2" style="top:30%; left:80%"></div>
+        <div class="absolute w-2 h-2 rounded-full bg-accent2 opacity-20 animation-float3" style="top:70%; left:70%"></div>
+    </div>
+    <!-- Login Screen -->
+    <section class="min-h-screen flex flex-col justify-center items-center px-4 sm:px-10 lg:px-20 xl:px-32 z-10">
+        <div class="glass-card p-10 rounded-2xl max-w-md w-full">
+            <div class="text-center mb-8">
+                <h1 class="text-3xl font-bold mb-2">AI Workflow Hub</h1>
+                <p class="text-gray-400">Your centralized dashboard for AI automation</p>
+            </div>
+            <div class="space-y-4">
+                <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-white text-dark font-medium hover:bg-gray-100 transition">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="w-5 h-5 mr-3">
+                    Continue with Google
+                </button>
+                <div class="relative flex items-center py-4">
+                    <div class="flex-grow border-t border-gray-700"></div>
+                    <span class="flex-shrink mx-4 text-gray-500">or</span>
+                    <div class="flex-grow border-t border-gray-700"></div>
+                </div>
+                <div class="space-y-3">
+                    <div>
+                        <label for="email" class="block text-sm font-medium mb-1">Email</label>
+                        <input type="email" id="email" class="w-full bg-primary border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-accent">
+                    </div>
+                    <div>
+                        <label for="password" class="block text-sm font-medium mb-1">Password</label>
+                        <input type="password" id="password" class="w-full bg-primary border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-accent">
+                    </div>
+                    <button class="w-full py-3 bg-gradient-to-r from-accent to-accent2 text-dark font-bold rounded-lg hover:opacity-90 transition mt-4">
+                        Sign In
+                    </button>
+                </div>
+            </div>
+            <div class="text-center mt-6 text-sm text-gray-500">
+                Don't have an account? <a href="#" class="text-accent hover:underline">Sign up</a>
+            </div>
+        </div>
+    </section>
+    <!-- Dashboard Preview (hidden until login) -->
+    <div id="dashboard-preview" class="hidden fixed inset-0 bg-dark z-50 overflow-y-auto">
+        <div class="min-h-screen flex">
+            <!-- Sidebar -->
+            <div class="w-64 bg-primary border-r border-gray-700 flex flex-col">
+                <div class="p-4 border-b border-gray-700">
+                    <h2 class="text-xl font-bold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">AI WORKFLOW HUB</h2>
+                </div>
+                <nav class="flex-1 p-4 space-y-1">
+                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-dark text-accent">
+                        <i class="fas fa-chart-pie"></i>
+                        <span>Dashboard</span>
+                    </a>
+                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-accent transition">
+                        <i class="fas fa-robot"></i>
+                        <span>AI Agents</span>
+                    </a>
+                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-accent transition">
+                        <i class="fas fa-magic"></i>
+                        <span>Prompt Gallery</span>
+                    </a>
+                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-accent transition">
+                        <i class="fas fa-book"></i>
+                        <span>Knowledge Base</span>
+                    </a>
+                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-accent transition">
+                        <i class="fas fa-comments"></i>
+                        <span>AI Chat</span>
+                    </a>
+                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-accent transition">
+                        <i class="fas fa-cog"></i>
+                        <span>Settings</span>
+                    </a>
+                </nav>
+                <div class="p-4 border-t border-gray-700">
+                    <div class="flex items-center space-x-3">
+                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full">
+                        <div>
+                            <div class="font-medium">John Doe</div>
+                            <div class="text-xs text-gray-400">john@example.com</div>
+                        </div>
+                    </div>
+                    <button class="w-full mt-4 py-2 text-sm text-gray-400 hover:text-accent transition flex items-center justify-center space-x-2">
+                        <i class="fas fa-sign-out-alt"></i>
+                        <span>Sign Out</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Main Content -->
+            <div class="flex-1 p-8">
+                <div class="flex justify-between items-center mb-8">
+                    <h1 class="text-2xl font-bold">Dashboard</h1>
+                    <div class="flex items-center space-x-4">
+                        <button id="toggleDarkMode" class="p-2 rounded-full hover:bg-gray-800 transition">
+                            <i class="fas fa-moon text-accent"></i>
+                        </button>
+                        <button class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
+                            New Automation
+                        </button>
+                    </div>
+                </div>
+                <!-- AI Agents Section -->
+                <section class="mb-12">
+                    <h2 class="text-xl font-bold mb-6 flex items-center">
+                        <i class="fas fa-robot text-accent mr-3"></i>
+                        <span>AI Automation Agents</span>
+                    </h2>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                        <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
+                            <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">
+                                <i class="fas fa-comment-dots"></i>
+                            </div>
+                            <h3 class="font-bold mb-2">Social Caption Generator</h3>
+                            <p class="text-sm text-gray-400 mb-4">Create engaging social media captions based on your content</p>
+                            <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
+                                Run Agent
+                            </button>
+                        </div>
+                        <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
+                            <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">
+                                <i class="fas fa-image"></i>
+                            </div>
+                            <h3 class="font-bold mb-2">Image Creator</h3>
+                            <p class="text-sm text-gray-400 mb-4">Generate custom images with DALL·E or Stable Diffusion</p>
+                            <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
+                                Run Agent
+                            </button>
+                        </div>
+                        <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
+                            <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">
+                                <i class="fas fa-chart-line"></i>
+                            </div>
+                            <h3 class="font-bold mb-2">Data Analyzer</h3>
+                            <p class="text-sm text-gray-400 mb-4">Upload CSV/Excel files for instant AI-powered analysis</p>
+                            <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
+                                Run Agent
+                            </button>
+                        </div>
+                        <div class="feature-card glass-card p-6 rounded-xl border border-gray-700">
+                            <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">
+                                <i class="fas fa-envelope"></i>
+                            </div>
+                            <h3 class="font-bold mb-2">Email Responder</h3>
+                            <p class="text-sm text-gray-400 mb-4">Automatically draft professional email responses</p>
+                            <button class="w-full py-2 text-sm bg-dark rounded-lg hover:bg-gray-800 transition">
+                                Run Agent
+                            </button>
+                        </div>
+                    </div>
+                </section>
+                <!-- Prompt Gallery Section -->
+                <section class="mb-12">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-bold flex items-center">
+                            <i class="fas fa-magic text-accent mr-3"></i>
+                            <span>Prompt Gallery</span>
+                        </h2>
+                        <button class="px-4 py-2 text-sm bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
+                            New Prompt
+                        </button>
+                    </div>
+                    <div class="glass-card rounded-xl overflow-hidden">
+                        <div class="p-4 border-b border-gray-700 flex items-center justify-between">
+                            <div class="flex space-x-2">
+                                <button class="px-3 py-1 text-sm bg-dark rounded-lg">All</button>
+                                <button class="px-3 py-1 text-sm bg-primary rounded-lg hover:bg-gray-800">Writing</button>
+                                <button class="px-3 py-1 text-sm bg-primary rounded-lg hover:bg-gray-800">Code</button>
+                                <button class="px-3 py-1 text-sm bg-primary rounded-lg hover:bg-gray-800">Analysis</button>
+                            </div>
+                            <div class="relative w-64">
+                                <input type="text" placeholder="Search prompts..." class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent">
+                                <i class="fas fa-search absolute right-3 top-2.5 text-gray-500"></i>
+                            </div>
+                        </div>
+                        <div class="divide-y divide-gray-700">
+                            <div class="prompt-card p-4 border-l-4 border-transparent hover:border-accent cursor-pointer">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 class="font-medium mb-1">Blog Post Outline Generator</h3>
+                                        <p class="text-sm text-gray-400">Creates a detailed outline for blog posts based on topic and keywords</p>
+                                    </div>
+                                    <div class="flex space-x-2">
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Writing</span>
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">SEO</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="prompt-card p-4 border-l-4 border-transparent hover:border-accent cursor-pointer">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 class="font-medium mb-1">Python Code Debugger</h3>
+                                        <p class="text-sm text-gray-400">Analyzes Python code and suggests improvements and fixes</p>
+                                    </div>
+                                    <div class="flex space-x-2">
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Code</span>
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Debugging</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="prompt-card p-4 border-l-4 border-transparent hover:border-accent cursor-pointer">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 class="font-medium mb-1">Market Research Summary</h3>
+                                        <p class="text-sm text-gray-400">Summarizes market research data into key insights and trends</p>
+                                    </div>
+                                    <div class="flex space-x-2">
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Analysis</span>
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Business</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="prompt-card p-4 border-l-4 border-transparent hover:border-accent cursor-pointer">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 class="font-medium mb-1">LinkedIn Post Generator</h3>
+                                        <p class="text-sm text-gray-400">Creates professional LinkedIn posts based on your expertise</p>
+                                    </div>
+                                    <div class="flex space-x-2">
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Writing</span>
+                                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Social Media</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <!-- Knowledge Base Section -->
+                <section class="mb-12">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-bold flex items-center">
+                            <i class="fas fa-book text-accent mr-3"></i>
+                            <span>Knowledge Base</span>
+                        </h2>
+                        <button class="px-4 py-2 text-sm bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-lg hover:opacity-90 transition">
+                            New Document
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="glass-card p-6 rounded-xl">
+                            <h3 class="font-bold mb-4 flex items-center">
+                                <i class="fas fa-folder text-yellow-400 mr-3"></i>
+                                <span>Project Documentation</span>
+                            </h3>
+                            <ul class="space-y-3 text-sm">
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>API Reference Guide</span>
+                                </li>
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>User Manual v2.3</span>
+                                </li>
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>Deployment Checklist</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="glass-card p-6 rounded-xl">
+                            <h3 class="font-bold mb-4 flex items-center">
+                                <i class="fas fa-folder text-blue-400 mr-3"></i>
+                                <span>Company Resources</span>
+                            </h3>
+                            <ul class="space-y-3 text-sm">
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>Brand Guidelines</span>
+                                </li>
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>HR Policies</span>
+                                </li>
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>Onboarding Process</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="glass-card p-6 rounded-xl">
+                            <h3 class="font-bold mb-4 flex items-center">
+                                <i class="fas fa-folder text-purple-400 mr-3"></i>
+                                <span>AI Prompts Library</span>
+                            </h3>
+                            <ul class="space-y-3 text-sm">
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>Content Creation</span>
+                                </li>
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>Code Generation</span>
+                                </li>
+                                <li class="flex items-center hover:text-accent transition cursor-pointer">
+                                    <i class="fas fa-file-alt text-gray-500 mr-3"></i>
+                                    <span>Data Analysis</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+                <!-- AI Chat Section -->
+                <section>
+                    <h2 class="text-xl font-bold mb-6 flex items-center">
+                        <i class="fas fa-comments text-accent mr-3"></i>
+                        <span>AI Chat Assistant</span>
+                    </h2>
+                    <div class="glass-card rounded-xl overflow-hidden">
+                        <div class="p-4 border-b border-gray-700 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 rounded-full bg-accent mr-2"></div>
+                                <span class="text-sm font-medium">AI Chat</span>
+                            </div>
+                            <div class="flex items-center space-x-3">
+                                <div class="relative">
+                                    <select class="appearance-none bg-dark border border-gray-700 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-accent">
+                                        <option>GPT-4</option>
+                                        <option>Gemini Pro</option>
+                                        <option>DeepSeek</option>
+                                        <option>Claude 3</option>
+                                    </select>
+                                    <i class="fas fa-chevron-down absolute right-3 top-2 text-xs text-gray-400"></i>
+                                </div>
+                                <button class="w-6 h-6 rounded-full bg-dark border border-gray-700 flex items-center justify-center text-xs">
+                                    <i class="fas fa-ellipsis-h"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="p-4 h-96 overflow-y-auto bg-gradient-to-b from-primary to-dark">
+                            <div class="chat-message" style="animation-delay: 0.1s">
+                                <div class="flex items-start mb-3">
+                                    <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3">
+                                        <i class="fas fa-robot"></i>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-accent mb-1">AI Assistant</div>
+                                        <div class="bg-dark rounded-lg p-3 text-sm">
+                                            Hi! I'm your AI assistant. How can I help you today? You can ask me to generate content, analyze data, debug code, or answer questions.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="chat-message" style="animation-delay: 1s">
+                                <div class="flex items-start mb-3">
+                                    <div class="w-8 h-8 rounded-full bg-primary border border-gray-700 flex items-center justify-center text-accent mr-3">
+                                        <i class="fas fa-user"></i>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-accent mb-1">You</div>
+                                        <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700">
+                                            Can you help me write a Python function that calculates Fibonacci sequence up to n numbers?
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="chat-message" style="animation-delay: 2s">
+                                <div class="flex items-start">
+                                    <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3">
+                                        <i class="fas fa-robot"></i>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-accent mb-1">AI Assistant</div>
+                                        <div class="bg-dark rounded-lg p-3 text-sm">
+                                            <div class="mb-2">Here's a Python function that generates Fibonacci sequence up to n numbers:</div>
+                                            <pre class="bg-primary p-2 rounded text-xs overflow-x-auto"><code>def fibonacci(n):
+    """Generate Fibonacci sequence up to n numbers"""
+    sequence = []
+    a, b = 0, 1
+    for _ in range(n):
+        sequence.append(a)
+        a, b = b, a + b
+    return sequence
+# Example usage:
+print(fibonacci(10))  # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]</code></pre>
+                                            <div class="mt-3 text-xs text-gray-400">
+                                                <i class="fas fa-info-circle mr-1"></i> This function has O(n) time complexity and O(1) space complexity.
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-4 border-t border-gray-700">
+                            <div class="relative">
+                                <input type="text" placeholder="Type your message here..." class="w-full bg-dark rounded-full py-3 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-accent">
+                                <button class="absolute right-3 top-2 text-accent">
+                                    <i class="far fa-paper-plane"></i>
+                                </button>
+                            </div>
+                            <div class="text-xs text-center text-gray-500 mt-2">
+                                <span>AI Assistant may produce inaccurate information. Consider verifying important facts.</span>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Toggle dark mode
+        const toggleDarkMode = document.getElementById('toggleDarkMode');
+        const html = document.documentElement;
+        toggleDarkMode.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const icon = toggleDarkMode.querySelector('i');
+            if (html.classList.contains('dark')) {
+                icon.classList.remove('fa-sun');
+                icon.classList.add('fa-moon');
+                icon.classList.add('text-accent');
+            } else {
+                icon.classList.remove('fa-moon');
+                icon.classList.add('fa-sun');
+                icon.classList.remove('text-accent');
+                icon.classList.add('text-yellow-500');
+            }
+        });
+        // Show dashboard preview on login button click
+        const loginButtons = document.querySelectorAll('button');
+        const dashboardPreview = document.getElementById('dashboard-preview');
+        loginButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                dashboardPreview.classList.remove('hidden');
+            });
+        });
+        // Close dashboard preview
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                dashboardPreview.classList.add('hidden');
+            }
+        });
+        // Accordion functionality for FAQ
+        const accordions = document.querySelectorAll('.accordion');
+        accordions.forEach(accordion => {
+            const header = accordion.querySelector('.accordion-header');
+            const icon = header.querySelector('i');
+            header.addEventListener('click', () => {
+                accordion.classList.toggle('active');
+                if (accordion.classList.contains('active')) {
+                    icon.classList.remove('fa-chevron-down');
+                    icon.classList.add('fa-chevron-up');
+                } else {
+                    icon.classList.remove('fa-chevron-up');
+                    icon.classList.add('fa-chevron-down');
+                }
+            });
+        });
+    </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=a40login/ai-workflow-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +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?