Upload webdev.py
Browse files- jade/webdev.py +32 -13
jade/webdev.py
CHANGED
|
@@ -18,21 +18,40 @@ class WebDevAgent:
|
|
| 18 |
self.client = Groq(api_key=self.groq_api_key)
|
| 19 |
self.model = "moonshotai/kimi-k2-instruct-0905" # Good for code generation
|
| 20 |
|
| 21 |
-
self.system_prompt = """You are an
|
| 22 |
|
| 23 |
-
|
| 24 |
-
1.
|
| 25 |
-
2.
|
| 26 |
-
3. Include
|
| 27 |
-
4.
|
| 28 |
-
5.
|
| 29 |
-
6. Use a professional color palette
|
| 30 |
-
7. Add smooth transitions and hover effects
|
| 31 |
-
8. Include placeholder images from unsplash.com/photos/random when needed
|
| 32 |
-
9. The code must be a complete, standalone HTML file
|
| 33 |
-
10. DO NOT wrap code in markdown code blocks
|
| 34 |
|
| 35 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 36 |
|
| 37 |
def generate(self, prompt: str, refine_code: str = None) -> dict:
|
| 38 |
"""
|
|
|
|
| 18 |
self.client = Groq(api_key=self.groq_api_key)
|
| 19 |
self.model = "moonshotai/kimi-k2-instruct-0905" # Good for code generation
|
| 20 |
|
| 21 |
+
self.system_prompt = """You are an elite web developer AI creating stunning, production-ready websites.
|
| 22 |
|
| 23 |
+
TECHNICAL REQUIREMENTS:
|
| 24 |
+
1. Use Tailwind CSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
|
| 25 |
+
2. Output ONLY valid HTML - no markdown, no explanations, no code blocks
|
| 26 |
+
3. Include JavaScript in <script> tags when needed
|
| 27 |
+
4. ALL styling must use Tailwind classes - no inline CSS
|
| 28 |
+
5. Must be a complete, standalone HTML file starting with <!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
|
| 30 |
+
DESIGN REQUIREMENTS:
|
| 31 |
+
1. Use modern, premium aesthetics (gradients, shadows, rounded corners)
|
| 32 |
+
2. Dark mode by default with rich colors (slate, zinc, purple, blue accents)
|
| 33 |
+
3. Smooth hover animations (hover:scale-105, hover:shadow-lg)
|
| 34 |
+
4. Professional typography (font-sans, proper spacing)
|
| 35 |
+
5. Responsive design (flex, grid, md:, lg: breakpoints)
|
| 36 |
+
6. Use placeholder images from picsum.photos or via.placeholder.com
|
| 37 |
+
7. Include relevant icons using SVG or emoji when appropriate
|
| 38 |
+
8. Add micro-interactions (transitions, transforms)
|
| 39 |
+
|
| 40 |
+
EXAMPLE STRUCTURE:
|
| 41 |
+
<!DOCTYPE html>
|
| 42 |
+
<html lang="en">
|
| 43 |
+
<head>
|
| 44 |
+
<meta charset="UTF-8">
|
| 45 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 46 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 47 |
+
<title>Site</title>
|
| 48 |
+
</head>
|
| 49 |
+
<body class="bg-slate-900 text-white">
|
| 50 |
+
<!-- Your awesome content -->
|
| 51 |
+
</body>
|
| 52 |
+
</html>
|
| 53 |
+
|
| 54 |
+
OUTPUT: Raw HTML only, starting with <!DOCTYPE html>"""
|
| 55 |
|
| 56 |
def generate(self, prompt: str, refine_code: str = None) -> dict:
|
| 57 |
"""
|