Spaces:

Madras1
/

jade_port

Running

App Files Files Community

Madras1 commited on 2 days ago

Commit

7f9880a

verified ·

1 Parent(s): dc4d05e

Upload 13 files

Browse files

Files changed (2) hide show

app.py +3 -1
jade/webdev.py +167 -64

app.py CHANGED Viewed

@@ -142,13 +142,15 @@ async def handle_chat(request: UserRequest):
 class WebDevRequest(BaseModel):
     prompt: str
     existing_code: str | None = None
 @app.post("/webdev/generate")
 async def handle_webdev(request: WebDevRequest):
     try:
         result = webdev_agent.generate(
             prompt=request.prompt,
-            refine_code=request.existing_code
         )
         return result
     except Exception as e:

 class WebDevRequest(BaseModel):
     prompt: str
     existing_code: str | None = None
+    mode: str = "html"  # "html" or "react"
 @app.post("/webdev/generate")
 async def handle_webdev(request: WebDevRequest):
     try:
         result = webdev_agent.generate(
             prompt=request.prompt,
+            refine_code=request.existing_code,
+            mode=request.mode
         )
         return result
     except Exception as e:

jade/webdev.py CHANGED Viewed

@@ -1,9 +1,10 @@
 """
 Jade Web Dev - Vibe Coder
-AI-powered web code generator
 """
 import os
 import logging
 from groq import Groq
@@ -16,66 +17,170 @@ class WebDevAgent:
             logger.warning("GROQ_API_KEY not set. WebDev agent may fail.")
         self.client = Groq(api_key=self.groq_api_key)
-        self.model = "moonshotai/kimi-k2-instruct-0905"  # Good for code generation
-        self.system_prompt = """You are an elite web developer AI creating stunning, FULLY FUNCTIONAL websites.
 TECHNICAL REQUIREMENTS:
 1. Use Tailwind CSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
 2. Output ONLY valid HTML - no markdown, no explanations, no code blocks
 3. MUST include functional JavaScript in <script> tags
-4. ALL styling must use Tailwind classes - no inline CSS
 5. Must be a complete, standalone HTML file starting with <!DOCTYPE html>
-JAVASCRIPT INTERACTIVITY (CRITICAL):
 1. ALL buttons MUST have onclick handlers that DO something
 2. Modals must open/close when clicked
 3. Navigation tabs/links must show/hide content sections
 4. Forms must have validation and show feedback
 5. Counters, toggles, accordions must work
-6. Use event listeners for all interactive elements
-7. Mobile menu toggle must work
-8. Add loading states, animations on interaction
 DESIGN REQUIREMENTS:
-1. Use modern, premium aesthetics (gradients, shadows, rounded corners)
-2. Dark mode by default with rich colors (slate, zinc, purple, blue accents)
-3. Smooth hover animations (hover:scale-105, hover:shadow-lg)
-4. Professional typography (font-sans, proper spacing)
-5. Responsive design (flex, grid, md:, lg: breakpoints)
-6. Use placeholder images from picsum.photos
-7. Include relevant icons using SVG
-8. Add micro-interactions (transitions, transforms)
-EXAMPLE OF WORKING BUTTON:
-<button onclick="alert('Clicked!')" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded">
-  Click Me
-</button>
-EXAMPLE OF WORKING MODAL:
-<div id="modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center">
-  <div class="bg-slate-800 p-6 rounded-xl">
-    <button onclick="document.getElementById('modal').classList.add('hidden')">Close</button>
-  </div>
-</div>
-<button onclick="document.getElementById('modal').classList.remove('hidden')">Open Modal</button>
 OUTPUT: Raw HTML only, starting with <!DOCTYPE html>"""
-    def generate(self, prompt: str, refine_code: str = None) -> dict:
         """
         Generate or refine code based on prompt
         Args:
-            prompt: User's description of the website
             refine_code: Optional existing code to refine
         Returns:
-            dict with 'code' and 'success' keys
         """
         try:
-            if refine_code:
-                user_message = f"""Current code:
 ```html
 {refine_code}
 ```
@@ -83,36 +188,34 @@ OUTPUT: Raw HTML only, starting with <!DOCTYPE html>"""
 User feedback: {prompt}
 Update the code based on the feedback. Output the complete updated HTML file."""
-            else:
-                user_message = f"Create a website: {prompt}"
-            response = self.client.chat.completions.create(
-                model=self.model,
-                messages=[
-                    {"role": "system", "content": self.system_prompt},
-                    {"role": "user", "content": user_message}
-                ],
-                temperature=0.7,
-                max_tokens=8000
-            )
-            code = response.choices[0].message.content
-            # Clean up any markdown formatting if present
-            code = code.strip()
-            if code.startswith("```html"):
-                code = code[7:]
-            if code.startswith("```"):
-                code = code[3:]
-            if code.endswith("```"):
-                code = code[:-3]
-            code = code.strip()
-            # Ensure it starts with doctype
-            if not code.lower().startswith("<!doctype"):
-                code = "<!DOCTYPE html>\n" + code
-            return {"success": True, "code": code}
         except Exception as e:
             logger.error(f"WebDev generation error: {e}")

 """
 Jade Web Dev - Vibe Coder
+AI-powered web code generator with React/Sandpack support
 """
 import os
+import json
 import logging
 from groq import Groq
             logger.warning("GROQ_API_KEY not set. WebDev agent may fail.")
         self.client = Groq(api_key=self.groq_api_key)
+        self.model = "moonshotai/kimi-k2-instruct-0905"
+        # HTML mode prompt
+        self.html_prompt = """You are an elite web developer AI creating stunning, FULLY FUNCTIONAL websites.
 TECHNICAL REQUIREMENTS:
 1. Use Tailwind CSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
 2. Output ONLY valid HTML - no markdown, no explanations, no code blocks
 3. MUST include functional JavaScript in <script> tags
+4. ALL styling must use Tailwind classes
 5. Must be a complete, standalone HTML file starting with <!DOCTYPE html>
+JAVASCRIPT INTERACTIVITY:
 1. ALL buttons MUST have onclick handlers that DO something
 2. Modals must open/close when clicked
 3. Navigation tabs/links must show/hide content sections
 4. Forms must have validation and show feedback
 5. Counters, toggles, accordions must work
 DESIGN REQUIREMENTS:
+1. Modern aesthetics (gradients, shadows, rounded corners)
+2. Dark mode by default (slate, zinc, purple accents)
+3. Smooth hover animations
+4. Responsive design (flex, grid, md:, lg: breakpoints)
 OUTPUT: Raw HTML only, starting with <!DOCTYPE html>"""
+        # React mode prompt
+        self.react_prompt = """You are an elite React developer AI creating stunning, production-ready React applications.
+OUTPUT FORMAT - CRITICAL:
+You MUST output a valid JSON object with file contents. No markdown, no explanations.
+The response must be parseable JSON with this exact structure:
+{
+  "App.tsx": "// Main app component code here",
+  "components/ComponentName.tsx": "// Component code here",
+  "styles.css": "/* CSS code here */"
+}
+TECHNICAL REQUIREMENTS:
+1. Use React with TypeScript (.tsx files)
+2. Use Tailwind CSS for all styling (classes only)
+3. Create modular components in components/ folder
+4. App.tsx is the main entry point
+5. Use React hooks (useState, useEffect, etc)
+6. All components must be functional components
+7. Export components as default exports
+COMPONENT STRUCTURE:
+- App.tsx: Main app with routing/state
+- components/: Reusable components
+- Each component in its own file
+DESIGN REQUIREMENTS:
+1. Dark mode by default (bg-slate-900, text-white)
+2. Modern UI with gradients, shadows, rounded corners
+3. Smooth animations (transition, hover effects)
+4. Responsive (flex, grid, md:, lg: breakpoints)
+5. Professional typography
+EXAMPLE App.tsx:
+import React, { useState } from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+export default function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div className="min-h-screen bg-slate-900 text-white">
+      <Header />
+      <Hero count={count} onIncrement={() => setCount(c => c + 1)} />
+    </div>
+  );
+}
+EXAMPLE components/Button.tsx:
+import React from 'react';
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+export default function Button({ children, onClick }: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition"
+    >
+      {children}
+    </button>
+  );
+}
+REMEMBER: Output ONLY the JSON object, nothing else. No markdown code blocks."""
+    def generate(self, prompt: str, refine_code: str = None, mode: str = "html") -> dict:
         """
         Generate or refine code based on prompt
         Args:
+            prompt: User's description
             refine_code: Optional existing code to refine
+            mode: "html" for HTML generation, "react" for React/Sandpack
         Returns:
+            dict with code/files and success status
         """
         try:
+            system_prompt = self.react_prompt if mode == "react" else self.html_prompt
+            if mode == "react":
+                if refine_code:
+                    user_message = f"""Current files:
+{refine_code}
+User feedback: {prompt}
+Update the React app based on the feedback. Output the complete updated JSON."""
+                else:
+                    user_message = f"Create a React app: {prompt}"
+                response = self.client.chat.completions.create(
+                    model=self.model,
+                    messages=[
+                        {"role": "system", "content": system_prompt},
+                        {"role": "user", "content": user_message}
+                    ],
+                    temperature=0.7,
+                    max_tokens=16000
+                )
+                content = response.choices[0].message.content.strip()
+                # Clean up markdown if present
+                if content.startswith("```json"):
+                    content = content[7:]
+                if content.startswith("```"):
+                    content = content[3:]
+                if content.endswith("```"):
+                    content = content[:-3]
+                content = content.strip()
+                # Parse JSON
+                try:
+                    files = json.loads(content)
+                    return {"success": True, "files": files, "mode": "react"}
+                except json.JSONDecodeError as e:
+                    logger.error(f"Failed to parse React JSON: {e}")
+                    # Try to extract JSON from the response
+                    import re
+                    match = re.search(r'\{[\s\S]*\}', content)
+                    if match:
+                        try:
+                            files = json.loads(match.group())
+                            return {"success": True, "files": files, "mode": "react"}
+                        except:
+                            pass
+                    return {"success": False, "error": "Failed to parse React code"}
+            else:  # HTML mode
+                if refine_code:
+                    user_message = f"""Current code:
 ```html
 {refine_code}
 ```
 User feedback: {prompt}
 Update the code based on the feedback. Output the complete updated HTML file."""
+                else:
+                    user_message = f"Create a website: {prompt}"
+                response = self.client.chat.completions.create(
+                    model=self.model,
+                    messages=[
+                        {"role": "system", "content": system_prompt},
+                        {"role": "user", "content": user_message}
+                    ],
+                    temperature=0.7,
+                    max_tokens=8000
+                )
+                code = response.choices[0].message.content.strip()
+                # Clean up markdown
+                if code.startswith("```html"):
+                    code = code[7:]
+                if code.startswith("```"):
+                    code = code[3:]
+                if code.endswith("```"):
+                    code = code[:-3]
+                code = code.strip()
+                if not code.lower().startswith("<!doctype"):
+                    code = "<!DOCTYPE html>\n" + code
+                return {"success": True, "code": code, "mode": "html"}
         except Exception as e:
             logger.error(f"WebDev generation error: {e}")