-
Notifications
You must be signed in to change notification settings - Fork 35
/
Copy pathinput.txt
314 lines (302 loc) · 12.2 KB
/
input.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
the app is working well. don't change functionality, but only change the UI styles.
Make the style match the entrance page, and make them consistent look like the same product:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Engy AI</title>
<meta name="description" content="Generate fully working AI tools in seconds"/>
<link rel="icon" href="/favicon.ico"/>
<meta property="og:title" content="Engy AI"/>
<meta property="og:description" content="Generate fully working AI tools in seconds"/>
<meta property="og:url" content="https://engy.ai/"/>
<meta property="og:image" content="https://engy.ai/og-image.png"/>
<meta name="twitter:title" content="Engy AI"/>
<meta name="twitter:description" content="Generate fully working AI tools in seconds"/>
<meta name="twitter:image" content="/og-image.png"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<style>
:root {
--primary-color: #3182ce;
--secondary-color: #4fd1c5;
--text-color: #2d3748;
--background-color: #f7fafc;
--accent-color: #f6e05e;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #e2e8f0;
}
.logo {
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
}
.nav-buttons a {
margin-left: 20px;
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: color 0.3s;
}
.nav-buttons a:hover {
color: var(--primary-color);
}
.nav-buttons a.signup {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s;
}
.nav-buttons a.signup:hover {
background-color: #2c5282;
}
.hero {
text-align: center;
padding: 80px 0;
}
h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
color: var(--text-color);
}
.headline-subtitle {
font-size: 24px;
color: var(--secondary-color);
display: block;
margin-top: 10px;
font-weight: 500;
}
.input-container {
max-width: 600px;
margin: 40px auto;
}
textarea {
width: 100%;
padding: 15px;
border-radius: 5px;
border: 1px solid #e2e8f0;
background-color: white;
color: var(--text-color);
font-size: 16px;
margin-bottom: 20px;
resize: vertical;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 600;
}
button:hover {
background-color: #2c5282;
}
.examples {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 40px;
}
.example-chip {
background-color: #edf2f7;
color: var(--text-color);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 500;
}
.example-chip:hover {
background-color: #e2e8f0;
}
footer {
text-align: center;
padding: 40px 0;
color: #718096;
border-top: 1px solid #e2e8f0;
}
#output-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(45, 55, 72, 0.9);
z-index: 1000;
display: none;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
justify-content: center;
align-items: center;
}
#output-container.visible {
opacity: 1;
display: flex;
}
#output-area {
width: 80%;
height: 80%;
max-width: 800px;
margin: auto;
background-color: white;
color: var(--text-color);
padding: 20px;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
overflow-y: auto;
box-sizing: border-box;
border: none;
outline: none;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#close-output {
position: absolute;
top: 20px;
right: 20px;
background-color: transparent;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.subtitle-small {
font-size: 18px;
color: #718096;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">Engy AI</div>
<div class="nav-buttons">
<a href="/login">Log In</a>
<a href="/signup" class="signup">Sign Up</a>
</div>
</header>
<main>
<section class="hero">
<h1>
Your AI-powered IT team
<span class="headline-subtitle">Streamline your workflow with intelligent automation</span>
</h1>
<p class="subtitle-small">Describe your idea, and we'll generate a fully functional AI tool in seconds.</p>
<div class="input-container">
<textarea id="idea-input" rows="4" placeholder="Describe your multi-agent idea, e.g., Competitor Analysis"></textarea>
<button id="generate-button">Generate Tool</button>
</div>
<div class="examples">
<div class="example-chip">Income expense tracker</div>
<div class="example-chip">Shopify product inventory sync</div>
<div class="example-chip">Customer insights dashboard</div>
<div class="example-chip">Invoice manager</div>
<div class="example-chip">Product lookup tool</div>
<div class="example-chip">PDF merger</div>
<div class="example-chip">Competitor research agent</div>
</div>
</section>
<section id="output-container">
<button id="close-output">×</button>
<pre id="output-area"></pre>
</section>
</main>
<footer>
<p>© 2024 Engy Labs Inc. All rights reserved.</p>
<p>Contact us at <a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</div>
<script>
const exampleDescriptions = {
"Income expense tracker": "Build a tool for accountants and controllers to efficiently track income and expenses from customer transactions.\n\nThe database should include columns for 'Week', 'Deposit Complete Amount', 'Withdraw Complete Amount', 'Deposit Amount', 'Deposit Other Amount', 'Withdraw Amount', and 'Withdraw Other Amount'. Enable functionalities to add, edit, and remove rows, with pagination for navigating large datasets.\n\nInclude a button that allows users to increase the 'Deposit Amount' by $100 for all records.\nAnd a toggle to select and highlight those rows with less 'Withdraw Amount' > 'Withdraw Amount'",
"Shopify product inventory sync": "Build a tool that automatically syncs product inventory across multiple platforms, including Shopify, Google Shopping, and Amazon.\n\nThe tool should ensure that inventory levels are always accurate and up-to-date to provide the best customer experience.",
"Customer insights dashboard": "Create a secure and accessible customer insights dashboard that serves as a centralized control center.\n\nThe dashboard should allow users to easily look up, edit, and configure customer accounts.\n\nEnsure data security while enabling quick access to customer information.",
"Invoice manager": "Develop an invoice management tool that tracks all aspects of accounting for a service business using subcontractors.\n\nThis tool should manage invoices, purchase orders, jobs, payables, and receipts, ensuring that all financials are up-to-date.",
"Product lookup tool": "Create a product lookup tool for customer support teams to easily search for product details such as price, availability, and shipping times.\n\nThis tool should handle large product inventories and provide accurate, real-time information about each item.",
"PDF merger": "I have 10 PDFs, want to merge them into 1.",
"Competitor research agent": "I want a web research Agent to scrape webpages related to Wordware AI.",
};
document.addEventListener('DOMContentLoaded', function() {
const textarea = document.getElementById('idea-input');
const generateButton = document.getElementById('generate-button');
const outputContainer = document.getElementById('output-container');
const outputArea = document.getElementById('output-area');
const closeOutputButton = document.getElementById('close-output');
const exampleChips = document.querySelectorAll('.example-chip');
const socket = io();
function showOutput() {
outputContainer.style.display = 'flex';
setTimeout(() => {
outputContainer.classList.add('visible');
}, 50);
document.body.style.overflow = 'hidden';
}
function hideOutput() {
outputContainer.classList.remove('visible');
setTimeout(() => {
outputContainer.style.display = 'none';
document.body.style.overflow = 'auto';
}, 300);
}
generateButton.addEventListener('click', function() {
const idea = textarea.value;
socket.emit('generate', {idea: idea});
showOutput();
outputArea.textContent = 'Generating... Please wait.\n';
generateButton.disabled = true;
});
closeOutputButton.addEventListener('click', function() {
hideOutput();
generateButton.disabled = false;
});
socket.on('output', function(data) {
outputArea.textContent += data.output + '\n';
outputArea.scrollTop = outputArea.scrollHeight;
});
socket.on('generation_complete', function() {
generateButton.disabled = false;
});
exampleChips.forEach(chip => {
chip.addEventListener('click', function() {
const chipText = this.textContent;
if (exampleDescriptions[chipText]) {
textarea.value = exampleDescriptions[chipText];
}
});
});
});
</script>
</body>
</html>
```