Hugging Face's logo

Spaces:
wtfaiz
/
my
Running

App Files Community
wtfaiz commited on
Commit
89ceae2
·
verified ·
1 Parent(s): 0da744a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +274 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: my
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,274 @@
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>n8n Workflow Creator</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
+ .node-preview {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .node-preview:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .workflow-canvas {
18
+ background-image: linear-gradient(to right, #f3f4f6 1px, transparent 1px), linear-gradient(to bottom, #f3f4f6 1px, transparent 1px);
19
+ background-size: 20px 20px;
20
+ }
21
+ .prompt-input:focus {
22
+ outline: none;
23
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
24
+ }
25
+ @keyframes pulse {
26
+ 0%, 100% {
27
+ opacity: 1;
28
+ }
29
+ 50% {
30
+ opacity: 0.5;
31
+ }
32
+ }
33
+ .animate-pulse {
34
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 font-sans">
39
+ <div class="flex flex-col min-h-screen">
40
+ <!-- Header -->
41
+ <header class="bg-indigo-600 text-white shadow-lg">
42
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <i class="fas fa-project-diagram text-2xl"></i>
45
+ <h1 class="text-2xl font-bold">n8n Workflow Creator</h1>
46
+ </div>
47
+ <nav class="hidden md:flex space-x-6">
48
+ <a href="#" class="hover:text-indigo-200 transition">Templates</a>
49
+ <a href="#" class="hover:text-indigo-200 transition">Documentation</a>
50
+ <a href="#" class="hover:text-indigo-200 transition">Community</a>
51
+ </nav>
52
+ <button class="md:hidden text-xl">
53
+ <i class="fas fa-bars"></i>
54
+ </button>
55
+ </div>
56
+ </header>
57
+
58
+ <!-- Main Content -->
59
+ <main class="flex-grow container mx-auto px-4 py-8">
60
+ <div class="flex flex-col lg:flex-row gap-8">
61
+ <!-- Left Panel - Prompt Input -->
62
+ <div class="w-full lg:w-1/3 bg-white rounded-xl shadow-md p-6 h-fit">
63
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Create Workflow from Prompt</h2>
64
+ <div class="mb-6">
65
+ <label for="workflow-prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe your workflow</label>
66
+ <textarea id="workflow-prompt" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg prompt-input focus:border-indigo-500" placeholder="e.g. 'Create a workflow that fetches new tweets containing #n8n, saves them to Google Sheets, and sends a Slack notification'"></textarea>
67
+ </div>
68
+ <div class="mb-6">
69
+ <label class="block text-sm font-medium text-gray-700 mb-2">Complexity</label>
70
+ <div class="flex space-x-4">
71
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition">Simple</button>
72
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Medium</button>
73
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition">Complex</button>
74
+ </div>
75
+ </div>
76
+ <div class="mb-6">
77
+ <label class="block text-sm font-medium text-gray-700 mb-2">Integration Focus</label>
78
+ <div class="flex flex-wrap gap-2">
79
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Slack</span>
80
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Google</span>
81
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Twitter</span>
82
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">GitHub</span>
83
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Zapier</span>
84
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">+ More</span>
85
+ </div>
86
+ </div>
87
+ <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition flex items-center justify-center">
88
+ <i class="fas fa-magic mr-2"></i> Generate Workflow
89
+ </button>
90
+ </div>
91
+
92
+ <!-- Right Panel - Workflow Visualization -->
93
+ <div class="w-full lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden">
94
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
95
+ <h2 class="text-xl font-semibold text-gray-800">Generated Workflow</h2>
96
+ <div class="flex space-x-2">
97
+ <button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-full transition">
98
+ <i class="fas fa-download"></i>
99
+ </button>
100
+ <button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-full transition">
101
+ <i class="fas fa-share-alt"></i>
102
+ </button>
103
+ <button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-full transition">
104
+ <i class="fas fa-cog"></i>
105
+ </button>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Workflow Canvas -->
110
+ <div id="workflow-canvas" class="workflow-canvas p-6 min-h-[500px] bg-gray-50 relative">
111
+ <!-- Initial state -->
112
+ <div id="initial-state" class="flex flex-col items-center justify-center h-full">
113
+ <div class="text-center p-8 max-w-md">
114
+ <i class="fas fa-lightbulb text-5xl text-indigo-400 mb-4"></i>
115
+ <h3 class="text-xl font-medium text-gray-700 mb-2">Describe your workflow idea</h3>
116
+ <p class="text-gray-500 mb-6">Enter a prompt describing what you want your n8n workflow to do, and we'll generate the nodes and connections for you.</p>
117
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center mx-auto">
118
+ <i class="fas fa-magic mr-2"></i> Try Example
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Generated workflow (hidden initially) -->
124
+ <div id="generated-workflow" class="hidden">
125
+ <div class="flex justify-center mb-8">
126
+ <div class="node-preview bg-white p-4 rounded-lg shadow-md border-l-4 border-indigo-500 w-64">
127
+ <div class="flex items-center mb-2">
128
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
129
+ <i class="fas fa-twitter text-blue-500"></i>
130
+ </div>
131
+ <h4 class="font-medium">Twitter Trigger</h4>
132
+ </div>
133
+ <p class="text-sm text-gray-600">New tweets with #n8n</p>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="flex justify-center mb-8">
138
+ <div class="flex items-center">
139
+ <div class="h-12 w-0.5 bg-gray-300 mx-auto"></div>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="flex justify-center mb-8">
144
+ <div class="node-preview bg-white p-4 rounded-lg shadow-md border-l-4 border-green-500 w-64">
145
+ <div class="flex items-center mb-2">
146
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2">
147
+ <i class="fab fa-google text-green-500"></i>
148
+ </div>
149
+ <h4 class="font-medium">Google Sheets</h4>
150
+ </div>
151
+ <p class="text-sm text-gray-600">Append tweet data</p>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="flex justify-center mb-8">
156
+ <div class="flex items-center">
157
+ <div class="h-12 w-0.5 bg-gray-300 mx-auto"></div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="flex justify-center">
162
+ <div class="node-preview bg-white p-4 rounded-lg shadow-md border-l-4 border-purple-500 w-64">
163
+ <div class="flex items-center mb-2">
164
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
165
+ <i class="fab fa-slack text-purple-500"></i>
166
+ </div>
167
+ <h4 class="font-medium">Slack</h4>
168
+ </div>
169
+ <p class="text-sm text-gray-600">Send notification</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Loading state (hidden initially) -->
175
+ <div id="loading-state" class="hidden flex flex-col items-center justify-center h-full">
176
+ <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
177
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Generating your workflow</h3>
178
+ <p class="text-gray-500">Analyzing your prompt and creating the perfect n8n nodes...</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Suggested Prompts -->
185
+ <div class="mt-12">
186
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Try these example prompts</h2>
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
188
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:border-indigo-300 transition cursor-pointer">
189
+ <h3 class="font-medium text-gray-800 mb-2">Social Media Monitor</h3>
190
+ <p class="text-sm text-gray-600">"Monitor Twitter for mentions of my brand, save to Airtable, and alert me on Discord"</p>
191
+ </div>
192
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:border-indigo-300 transition cursor-pointer">
193
+ <h3 class="font-medium text-gray-800 mb-2">CRM Automation</h3>
194
+ <p class="text-sm text-gray-600">"When a new lead comes in via Typeform, add to HubSpot and send a welcome email"</p>
195
+ </div>
196
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:border-indigo-300 transition cursor-pointer">
197
+ <h3 class="font-medium text-gray-800 mb-2">DevOps Alert</h3>
198
+ <p class="text-sm text-gray-600">"If GitHub gets a new issue in my repo, create a Trello card and notify the team on Slack"</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </main>
203
+
204
+ <!-- Footer -->
205
+ <footer class="bg-gray-800 text-white py-8">
206
+ <div class="container mx-auto px-4">
207
+ <div class="flex flex-col md:flex-row justify-between items-center">
208
+ <div class="mb-4 md:mb-0">
209
+ <div class="flex items-center space-x-2">
210
+ <i class="fas fa-project-diagram text-xl"></i>
211
+ <span class="font-bold">n8n Workflow Creator</span>
212
+ </div>
213
+ <p class="text-gray-400 text-sm mt-1">Generate complex workflows with simple prompts</p>
214
+ </div>
215
+ <div class="flex space-x-6">
216
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms</a>
217
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a>
218
+ <a href="#" class="text-gray-400 hover:text-white transition">Docs</a>
219
+ <a href="#" class="text-gray-400 hover:text-white transition">GitHub</a>
220
+ </div>
221
+ </div>
222
+ <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
223
+ <p>© 2023 n8n Workflow Creator. Not affiliated with n8n.io.</p>
224
+ </div>
225
+ </div>
226
+ </footer>
227
+ </div>
228
+
229
+ <script>
230
+ document.addEventListener('DOMContentLoaded', function() {
231
+ const generateBtn = document.getElementById('generate-btn');
232
+ const workflowPrompt = document.getElementById('workflow-prompt');
233
+ const initialState = document.getElementById('initial-state');
234
+ const generatedWorkflow = document.getElementById('generated-workflow');
235
+ const loadingState = document.getElementById('loading-state');
236
+
237
+ // Example prompt buttons
238
+ const examplePrompts = document.querySelectorAll('.grid > div');
239
+ examplePrompts.forEach(prompt => {
240
+ prompt.addEventListener('click', function() {
241
+ workflowPrompt.value = this.querySelector('p').textContent;
242
+ });
243
+ });
244
+
245
+ // Generate workflow button click handler
246
+ generateBtn.addEventListener('click', function() {
247
+ if (workflowPrompt.value.trim() === '') {
248
+ alert('Please describe your workflow first');
249
+ return;
250
+ }
251
+
252
+ // Show loading state
253
+ initialState.classList.add('hidden');
254
+ generatedWorkflow.classList.add('hidden');
255
+ loadingState.classList.remove('hidden');
256
+
257
+ // Simulate API call/processing delay
258
+ setTimeout(function() {
259
+ loadingState.classList.add('hidden');
260
+ generatedWorkflow.classList.remove('hidden');
261
+
262
+ // Scroll to the generated workflow
263
+ generatedWorkflow.scrollIntoView({ behavior: 'smooth' });
264
+ }, 2000);
265
+ });
266
+
267
+ // Try example button
268
+ document.querySelector('#initial-state button').addEventListener('click', function() {
269
+ workflowPrompt.value = "Create a workflow that fetches new tweets containing #n8n, saves them to Google Sheets, and sends a Slack notification";
270
+ });
271
+ });
272
+ </script>
273
+ <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=wtfaiz/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
274
+ </html>