Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +438 -19
- prompts.txt +4 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 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: devopipeline
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: red
|
| 5 |
+
colorTo: pink
|
| 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,438 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>AI Web Development Pipeline</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.gradient-bg {
|
| 11 |
+
background: linear-gradient(135deg, #6e8efb, #a777e3);
|
| 12 |
+
}
|
| 13 |
+
.agent-message {
|
| 14 |
+
animation: fadeIn 0.3s ease-in-out;
|
| 15 |
+
}
|
| 16 |
+
@keyframes fadeIn {
|
| 17 |
+
from { opacity: 0; transform: translateY(10px); }
|
| 18 |
+
to { opacity: 1; transform: translateY(0); }
|
| 19 |
+
}
|
| 20 |
+
.pipeline-step {
|
| 21 |
+
transition: all 0.3s ease;
|
| 22 |
+
}
|
| 23 |
+
.pipeline-step:hover {
|
| 24 |
+
transform: scale(1.05);
|
| 25 |
+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 26 |
+
}
|
| 27 |
+
.pipeline-step.active {
|
| 28 |
+
border-left: 4px solid;
|
| 29 |
+
transform: scale(1.02);
|
| 30 |
+
}
|
| 31 |
+
.pipeline-step.completed {
|
| 32 |
+
opacity: 0.8;
|
| 33 |
+
}
|
| 34 |
+
.pipeline-step.completed .flex-shrink-0 {
|
| 35 |
+
background-color: #10b981 !important;
|
| 36 |
+
}
|
| 37 |
+
.custom-scrollbar::-webkit-scrollbar {
|
| 38 |
+
width: 6px;
|
| 39 |
+
}
|
| 40 |
+
.custom-scrollbar::-webkit-scrollbar-track {
|
| 41 |
+
background: #f1f1f1;
|
| 42 |
+
}
|
| 43 |
+
.custom-scrollbar::-webkit-scrollbar-thumb {
|
| 44 |
+
background: #888;
|
| 45 |
+
border-radius: 3px;
|
| 46 |
+
}
|
| 47 |
+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
| 48 |
+
background: #555;
|
| 49 |
+
}
|
| 50 |
+
.thinking-indicator {
|
| 51 |
+
display: inline-block;
|
| 52 |
+
width: 12px;
|
| 53 |
+
height: 12px;
|
| 54 |
+
border-radius: 50%;
|
| 55 |
+
background-color: #a777e3;
|
| 56 |
+
animation: pulse 1.5s infinite ease-in-out;
|
| 57 |
+
}
|
| 58 |
+
@keyframes pulse {
|
| 59 |
+
0%, 100% { transform: scale(0.8); opacity: 0.5; }
|
| 60 |
+
50% { transform: scale(1.2); opacity: 1; }
|
| 61 |
+
}
|
| 62 |
+
#chatMessages {
|
| 63 |
+
min-height: 400px;
|
| 64 |
+
}
|
| 65 |
+
#sendBtn:disabled {
|
| 66 |
+
background-color: #cbd5e0;
|
| 67 |
+
cursor: not-allowed;
|
| 68 |
+
}
|
| 69 |
+
</style>
|
| 70 |
+
</head>
|
| 71 |
+
<body class="bg-gray-50 min-h-screen">
|
| 72 |
+
<div class="container mx-auto px-4 py-8">
|
| 73 |
+
<!-- Header -->
|
| 74 |
+
<header class="gradient-bg text-white rounded-xl p-6 mb-8 shadow-lg">
|
| 75 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 76 |
+
<div>
|
| 77 |
+
<h1 class="text-3xl font-bold">AI Web Development Pipeline</h1>
|
| 78 |
+
<p class="mt-2">Describe your website idea and let our AI agents handle the rest</p>
|
| 79 |
+
</div>
|
| 80 |
+
<div class="mt-4 md:mt-0 flex space-x-4">
|
| 81 |
+
<button id="newProjectBtn" class="bg-white text-purple-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
|
| 82 |
+
<i class="fas fa-plus mr-2"></i>New Project
|
| 83 |
+
</button>
|
| 84 |
+
<button id="manageSitesBtn" class="bg-purple-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-purple-900 transition">
|
| 85 |
+
<i class="fas fa-cog mr-2"></i>Manage Sites
|
| 86 |
+
</button>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</header>
|
| 90 |
+
|
| 91 |
+
<!-- Main Content -->
|
| 92 |
+
<div class="flex flex-col lg:flex-row gap-8">
|
| 93 |
+
<!-- Left Panel - Chat Interface -->
|
| 94 |
+
<div class="lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden">
|
| 95 |
+
<div class="p-4 border-b border-gray-200 bg-gray-50">
|
| 96 |
+
<h2 class="text-xl font-semibold text-gray-800">Project Development Chat</h2>
|
| 97 |
+
<div class="flex mt-2 space-x-2">
|
| 98 |
+
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">AI Architect</span>
|
| 99 |
+
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">UI Designer</span>
|
| 100 |
+
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Developer</span>
|
| 101 |
+
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">DevOps</span>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
|
| 105 |
+
<!-- Chat Messages -->
|
| 106 |
+
<div id="chatMessages" class="h-96 overflow-y-auto p-4 custom-scrollbar space-y-4">
|
| 107 |
+
<div class="agent-message bg-gray-100 p-4 rounded-lg">
|
| 108 |
+
<div class="flex items-start">
|
| 109 |
+
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
|
| 110 |
+
<i class="fas fa-robot"></i>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="ml-3">
|
| 113 |
+
<p class="font-medium text-purple-700">AI Architect</p>
|
| 114 |
+
<p class="mt-1 text-gray-700">Hello! I'm your AI architect. Describe your website or web app idea and I'll coordinate with the other agents to make it happen.</p>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<!-- Input Area -->
|
| 121 |
+
<div class="p-4 border-t border-gray-200 bg-gray-50">
|
| 122 |
+
<div class="flex">
|
| 123 |
+
<input id="userInput" type="text" placeholder="Describe your website idea..."
|
| 124 |
+
class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
| 125 |
+
<button id="sendBtn" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed">
|
| 126 |
+
<i class="fas fa-paper-plane"></i>
|
| 127 |
+
</button>
|
| 128 |
+
</div>
|
| 129 |
+
<div class="mt-2 flex justify-between text-xs text-gray-500">
|
| 130 |
+
<span>Press Enter to send</span>
|
| 131 |
+
<span>AI Services: OpenAI, Grok-3, DeepSeek</span>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<!-- Right Panel - Pipeline Visualization -->
|
| 137 |
+
<div class="lg:w-1/3 space-y-6">
|
| 138 |
+
<!-- Pipeline Steps -->
|
| 139 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 140 |
+
<div class="p-4 border-b border-gray-200 bg-gray-50">
|
| 141 |
+
<h2 class="text-xl font-semibold text-gray-800">Development Pipeline</h2>
|
| 142 |
+
</div>
|
| 143 |
+
<div class="p-4 space-y-4">
|
| 144 |
+
<div id="step1" class="pipeline-step bg-blue-50 border border-blue-200 rounded-lg p-4 active">
|
| 145 |
+
<div class="flex items-center">
|
| 146 |
+
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
|
| 147 |
+
<i class="fas fa-lightbulb"></i>
|
| 148 |
+
</div>
|
| 149 |
+
<div class="ml-3">
|
| 150 |
+
<h3 class="font-medium text-blue-800">1. Idea Conceptualization</h3>
|
| 151 |
+
<p class="text-sm text-gray-600">Describe your website idea</p>
|
| 152 |
+
</div>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
|
| 156 |
+
<div id="step2" class="pipeline-step bg-purple-50 border border-purple-200 rounded-lg p-4">
|
| 157 |
+
<div class="flex items-center">
|
| 158 |
+
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white">
|
| 159 |
+
<i class="fas fa-drafting-compass"></i>
|
| 160 |
+
</div>
|
| 161 |
+
<div class="ml-3">
|
| 162 |
+
<h3 class="font-medium text-purple-800">2. Architecture Design</h3>
|
| 163 |
+
<p class="text-sm text-gray-600">AI architect creates the blueprint</p>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
|
| 168 |
+
<div id="step3" class="pipeline-step bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
| 169 |
+
<div class="flex items-center">
|
| 170 |
+
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white">
|
| 171 |
+
<i class="fas fa-paint-brush"></i>
|
| 172 |
+
</div>
|
| 173 |
+
<div class="ml-3">
|
| 174 |
+
<h3 class="font-medium text-yellow-800">3. UI/UX Design</h3>
|
| 175 |
+
<p class="text-sm text-gray-600">Designer creates mockups</p>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<div id="step4" class="pipeline-step bg-green-50 border border-green-200 rounded-lg p-4">
|
| 181 |
+
<div class="flex items-center">
|
| 182 |
+
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white">
|
| 183 |
+
<i class="fas fa-code"></i>
|
| 184 |
+
</div>
|
| 185 |
+
<div class="ml-3">
|
| 186 |
+
<h3 class="font-medium text-green-800">4. Development</h3>
|
| 187 |
+
<p class="text-sm text-gray-600">Developer writes the code</p>
|
| 188 |
+
</div>
|
| 189 |
+
</div>
|
| 190 |
+
</div>
|
| 191 |
+
|
| 192 |
+
<div id="step5" class="pipeline-step bg-red-50 border border-red-200 rounded-lg p-4">
|
| 193 |
+
<div class="flex items-center">
|
| 194 |
+
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white">
|
| 195 |
+
<i class="fas fa-server"></i>
|
| 196 |
+
</div>
|
| 197 |
+
<div class="ml-3">
|
| 198 |
+
<h3 class="font-medium text-red-800">5. Deployment</h3>
|
| 199 |
+
<p class="text-sm text-gray-600">DevOps deploys to production</p>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
|
| 206 |
+
<!-- Status Panel -->
|
| 207 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 208 |
+
<div class="p-4 border-b border-gray-200 bg-gray-50">
|
| 209 |
+
<h2 class="text-xl font-semibold text-gray-800">Project Status</h2>
|
| 210 |
+
</div>
|
| 211 |
+
<div class="p-4">
|
| 212 |
+
<div class="mb-4">
|
| 213 |
+
<h3 class="font-medium text-gray-700 mb-2">Current Project</h3>
|
| 214 |
+
<div class="bg-gray-100 p-3 rounded-lg">
|
| 215 |
+
<p id="currentProject" class="text-gray-800 italic">No active project</p>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<div class="mb-4">
|
| 220 |
+
<h3 class="font-medium text-gray-700 mb-2">Database Status</h3>
|
| 221 |
+
<div class="bg-gray-100 p-3 rounded-lg">
|
| 222 |
+
<div class="flex items-center">
|
| 223 |
+
<div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
|
| 224 |
+
<span>Connected to PostgreSQL</span>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="mt-2 text-sm text-gray-600">
|
| 227 |
+
<p>Data stores: User Data, Content, Analytics</p>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
|
| 232 |
+
<div>
|
| 233 |
+
<h3 class="font-medium text-gray-700 mb-2">Deployment Server</h3>
|
| 234 |
+
<div class="bg-gray-100 p-3 rounded-lg">
|
| 235 |
+
<div class="flex items-center">
|
| 236 |
+
<div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
|
| 237 |
+
<span>Multi-site server ready</span>
|
| 238 |
+
</div>
|
| 239 |
+
<div class="mt-2 text-sm text-gray-600">
|
| 240 |
+
<p>Custom domains available</p>
|
| 241 |
+
<p>SSL certificates managed</p>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<!-- Site Management Modal (hidden by default) -->
|
| 251 |
+
<div id="siteManagementModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
| 252 |
+
<div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
| 253 |
+
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
|
| 254 |
+
<h2 class="text-2xl font-bold text-gray-800">Website Management</h2>
|
| 255 |
+
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
|
| 256 |
+
<i class="fas fa-times"></i>
|
| 257 |
+
</button>
|
| 258 |
+
</div>
|
| 259 |
+
|
| 260 |
+
<div class="p-6">
|
| 261 |
+
<div class="mb-6">
|
| 262 |
+
<h3 class="text-lg font-semibold mb-4">Your Websites</h3>
|
| 263 |
+
<div class="overflow-x-auto">
|
| 264 |
+
<table class="min-w-full divide-y divide-gray-200">
|
| 265 |
+
<thead class="bg-gray-50">
|
| 266 |
+
<tr>
|
| 267 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
| 268 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Domain</th>
|
| 269 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
| 270 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
| 271 |
+
</tr>
|
| 272 |
+
</thead>
|
| 273 |
+
<tbody id="sitesTableBody" class="bg-white divide-y divide-gray-200">
|
| 274 |
+
<!-- Sites will be added here dynamically -->
|
| 275 |
+
<tr>
|
| 276 |
+
<td colspan="4" class="px-6 py-4 text-center text-gray-500">No websites yet</td>
|
| 277 |
+
</tr>
|
| 278 |
+
</tbody>
|
| 279 |
+
</table>
|
| 280 |
+
</div>
|
| 281 |
+
</div>
|
| 282 |
+
|
| 283 |
+
<div>
|
| 284 |
+
<h3 class="text-lg font-semibold mb-4">Add New Domain</h3>
|
| 285 |
+
<div class="flex">
|
| 286 |
+
<input type="text" id="newDomainInput" placeholder="example.com" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
| 287 |
+
<button id="addDomainBtn" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition">
|
| 288 |
+
Add Domain
|
| 289 |
+
</button>
|
| 290 |
+
</div>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
</div>
|
| 294 |
+
</div>
|
| 295 |
+
</div>
|
| 296 |
+
|
| 297 |
+
<script>
|
| 298 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 299 |
+
// DOM Elements
|
| 300 |
+
const chatMessages = document.getElementById('chatMessages');
|
| 301 |
+
const userInput = document.getElementById('userInput');
|
| 302 |
+
const sendBtn = document.getElementById('sendBtn');
|
| 303 |
+
const currentProject = document.getElementById('currentProject');
|
| 304 |
+
const siteManagementModal = document.getElementById('siteManagementModal');
|
| 305 |
+
const manageSitesBtn = document.getElementById('manageSitesBtn');
|
| 306 |
+
const closeModalBtn = document.getElementById('closeModalBtn');
|
| 307 |
+
const newProjectBtn = document.getElementById('newProjectBtn');
|
| 308 |
+
const pipelineSteps = document.querySelectorAll('.pipeline-step');
|
| 309 |
+
|
| 310 |
+
// Sample project names
|
| 311 |
+
const projectNames = [
|
| 312 |
+
"E-commerce Platform",
|
| 313 |
+
"Portfolio Website",
|
| 314 |
+
"Blog System",
|
| 315 |
+
"Social Network",
|
| 316 |
+
"Task Management App",
|
| 317 |
+
"Learning Platform",
|
| 318 |
+
"Restaurant Website",
|
| 319 |
+
"Event Booking System"
|
| 320 |
+
];
|
| 321 |
+
|
| 322 |
+
// Current project state
|
| 323 |
+
let currentProjectName = "";
|
| 324 |
+
let currentStep = 1;
|
| 325 |
+
|
| 326 |
+
// Initialize send button state
|
| 327 |
+
updateSendButtonState();
|
| 328 |
+
|
| 329 |
+
// Event Listeners
|
| 330 |
+
userInput.addEventListener('input', updateSendButtonState);
|
| 331 |
+
userInput.addEventListener('keypress', function(e) {
|
| 332 |
+
if (e.key === 'Enter' && !sendBtn.disabled) {
|
| 333 |
+
sendMessage();
|
| 334 |
+
}
|
| 335 |
+
});
|
| 336 |
+
|
| 337 |
+
sendBtn.addEventListener('click', sendMessage);
|
| 338 |
+
manageSitesBtn.addEventListener('click', () => siteManagementModal.classList.remove('hidden'));
|
| 339 |
+
closeModalBtn.addEventListener('click', () => siteManagementModal.classList.add('hidden'));
|
| 340 |
+
|
| 341 |
+
newProjectBtn.addEventListener('click', () => {
|
| 342 |
+
// Reset chat
|
| 343 |
+
chatMessages.innerHTML = `
|
| 344 |
+
<div class="agent-message bg-gray-100 p-4 rounded-lg">
|
| 345 |
+
<div class="flex items-start">
|
| 346 |
+
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
|
| 347 |
+
<i class="fas fa-robot"></i>
|
| 348 |
+
</div>
|
| 349 |
+
<div class="ml-3">
|
| 350 |
+
<p class="font-medium text-purple-700">AI Architect</p>
|
| 351 |
+
<p class="mt-1 text-gray-700">Hello! I'm your AI architect. Describe your website or web app idea and I'll coordinate with the other agents to make it happen.</p>
|
| 352 |
+
</div>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
`;
|
| 356 |
+
|
| 357 |
+
// Reset pipeline
|
| 358 |
+
pipelineSteps.forEach(step => {
|
| 359 |
+
step.classList.remove('completed');
|
| 360 |
+
step.classList.remove('active');
|
| 361 |
+
const icon = step.querySelector('.flex-shrink-0');
|
| 362 |
+
if (icon) {
|
| 363 |
+
icon.classList.remove('bg-green-500');
|
| 364 |
+
}
|
| 365 |
+
});
|
| 366 |
+
|
| 367 |
+
// Activate first step
|
| 368 |
+
document.getElementById('step1').classList.add('active');
|
| 369 |
+
currentStep = 1;
|
| 370 |
+
|
| 371 |
+
// Generate new project name
|
| 372 |
+
currentProjectName = projectNames[Math.floor(Math.random() * projectNames.length)];
|
| 373 |
+
currentProject.textContent = currentProjectName;
|
| 374 |
+
|
| 375 |
+
// Clear input
|
| 376 |
+
userInput.value = '';
|
| 377 |
+
updateSendButtonState();
|
| 378 |
+
});
|
| 379 |
+
|
| 380 |
+
// Functions
|
| 381 |
+
function updateSendButtonState() {
|
| 382 |
+
sendBtn.disabled = userInput.value.trim() === '';
|
| 383 |
+
}
|
| 384 |
+
|
| 385 |
+
function sendMessage() {
|
| 386 |
+
const message = userInput.value.trim();
|
| 387 |
+
if (message === '') return;
|
| 388 |
+
|
| 389 |
+
// Add user message to chat
|
| 390 |
+
addMessageToChat('user', message);
|
| 391 |
+
|
| 392 |
+
// Clear input
|
| 393 |
+
userInput.value = '';
|
| 394 |
+
updateSendButtonState();
|
| 395 |
+
|
| 396 |
+
// Show thinking indicator
|
| 397 |
+
const thinkingId = showThinkingIndicator();
|
| 398 |
+
|
| 399 |
+
// Simulate AI response after a delay
|
| 400 |
+
setTimeout(() => {
|
| 401 |
+
// Remove thinking indicator
|
| 402 |
+
removeThinkingIndicator(thinkingId);
|
| 403 |
+
|
| 404 |
+
// Process the message and generate response
|
| 405 |
+
processUserMessage(message);
|
| 406 |
+
|
| 407 |
+
// Advance pipeline step if needed
|
| 408 |
+
if (currentStep < 5) {
|
| 409 |
+
advancePipelineStep();
|
| 410 |
+
}
|
| 411 |
+
}, 1500);
|
| 412 |
+
}
|
| 413 |
+
|
| 414 |
+
function addMessageToChat(sender, message) {
|
| 415 |
+
const isUser = sender === 'user';
|
| 416 |
+
const agentColors = {
|
| 417 |
+
'AI Architect': 'purple',
|
| 418 |
+
'UI Designer': 'blue',
|
| 419 |
+
'Developer': 'yellow',
|
| 420 |
+
'DevOps': 'red'
|
| 421 |
+
};
|
| 422 |
+
|
| 423 |
+
const agent = isUser ? 'You' :
|
| 424 |
+
currentStep === 1 ? 'AI Architect' :
|
| 425 |
+
currentStep === 2 ? 'AI Architect' :
|
| 426 |
+
currentStep === 3 ? 'UI Designer' :
|
| 427 |
+
currentStep === 4 ? 'Developer' : 'DevOps';
|
| 428 |
+
|
| 429 |
+
const color = isUser ? 'gray' : agentColors[agent] || 'purple';
|
| 430 |
+
|
| 431 |
+
const messageDiv = document.createElement('div');
|
| 432 |
+
messageDiv.className = `agent-message bg-${isUser ? 'white' : color}-50 p-4 rounded-lg border border-${isUser ? 'gray' : color}-200`;
|
| 433 |
+
|
| 434 |
+
messageDiv.innerHTML = `
|
| 435 |
+
<div class="flex items-start">
|
| 436 |
+
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-${isUser ? 'gray' : color}-500 flex items-center justify-center text-white">
|
| 437 |
+
<i class="fas ${isUser ? 'fa
|
| 438 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
create a pipeline and solution that allows me to prompt a new website idea or web app using a chat UI to several specific ai agents responsible for key aspects of the development process. Then this pipeline and solution will allow the agents to deploy my new website or web app to a multi site web server with UI to manage sites and custom domains. This pipeline also has a database for storing data and special data stores for various other services and data needs. Use the following inference services: OpenAI: OPENAI_API_KEY="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” grok-3 https://ai-huroaiai970351299673.services.ai.azure.com/models/chat/completions?api-version=2024-05-01-preview API: GgTqsvTU1GpxmIHeaRbzctxdivLvdlOGLRl6F37oUFnu09JKyGPLJQQJ99BBACHYHv6XJ3w3AAAAACOGWLsV ———— DeepSeek https://ai-huroaiai970351299673.services.ai.azure.com/models/chat/completions?api-version=2024-05-01-preview Key GgTqsvTU1GpxmIHeaRbzctxdivLvdlOGLRl6F37oUFnu09JKyGPLJQQJ99BBACHYHv6XJ3w3AAAAACOGWLsV
|
| 2 |
+
Audit for any missing code and content then code it
|
| 3 |
+
Fix the chat ui, I can’t sent a message
|
| 4 |
+
I can’t hit the send button on chat to start a conversation please fix
|