Spaces:

akhaliq
/

anycoder

Running

App Files Files Community

akhaliq HF Staff commited on 22 days ago

Commit

3a2235f

1 Parent(s): 511c44b

fix transforemrs js issue

Browse files

Files changed (2) hide show

backend_parsers.py +19 -7
backend_prompts.py +50 -10

backend_parsers.py CHANGED Viewed

@@ -62,17 +62,29 @@ def parse_transformers_js_output(code: str) -> Dict[str, str]:
     # Fallback: support === index.html === format if any file is missing
     if not (files['index.html'] and files['index.js'] and files['style.css']):
-        # Use regex to extract sections
-        html_fallback = re.search(r'===\s*index\.html\s*===\s*\n([\s\S]+?)(?=\n===|$)', code, re.IGNORECASE)
-        js_fallback = re.search(r'===\s*index\.js\s*===\s*\n([\s\S]+?)(?=\n===|$)', code, re.IGNORECASE)
-        css_fallback = re.search(r'===\s*style\.css\s*===\s*\n([\s\S]+?)(?=\n===|$)', code, re.IGNORECASE)
         if html_fallback:
-            files['index.html'] = html_fallback.group(1).strip()
         if js_fallback:
-            files['index.js'] = js_fallback.group(1).strip()
         if css_fallback:
-            files['style.css'] = css_fallback.group(1).strip()
     # Additional fallback: extract from numbered sections or file headers
     if not (files['index.html'] and files['index.js'] and files['style.css']):

     # Fallback: support === index.html === format if any file is missing
     if not (files['index.html'] and files['index.js'] and files['style.css']):
+        # Use regex to extract sections - match === markers with optional whitespace and newlines
+        html_fallback = re.search(r'===\s*index\.html\s*===\s*[\r\n]+([\s\S]+?)(?=\n===|$)', code, re.IGNORECASE)
+        js_fallback = re.search(r'===\s*index\.js\s*===\s*[\r\n]+([\s\S]+?)(?=\n===|$)', code, re.IGNORECASE)
+        css_fallback = re.search(r'===\s*style\.css\s*===\s*[\r\n]+([\s\S]+?)(?=\n===|$)', code, re.IGNORECASE)
         if html_fallback:
+            content = html_fallback.group(1).strip()
+            # Remove code block markers if present
+            content = re.sub(r'^```\w*\s*[\r\n]+', '', content)
+            content = re.sub(r'[\r\n]+```\s*$', '', content)
+            files['index.html'] = content.strip()
         if js_fallback:
+            content = js_fallback.group(1).strip()
+            # Remove code block markers if present
+            content = re.sub(r'^```\w*\s*[\r\n]+', '', content)
+            content = re.sub(r'[\r\n]+```\s*$', '', content)
+            files['index.js'] = content.strip()
         if css_fallback:
+            content = css_fallback.group(1).strip()
+            # Remove code block markers if present
+            content = re.sub(r'^```\w*\s*[\r\n]+', '', content)
+            content = re.sub(r'[\r\n]+```\s*$', '', content)
+            files['style.css'] = content.strip()
     # Additional fallback: extract from numbered sections or file headers
     if not (files['index.html'] and files['index.js'] and files['style.css']):

backend_prompts.py CHANGED Viewed

@@ -40,17 +40,51 @@ You MUST output ALL THREE files using this EXACT format with === markers:
 === index.html ===
 <!DOCTYPE html>
 <html lang="en">
-<!-- index.html content here -->
 </html>
 === index.js ===
-// index.js content here
 === style.css ===
-/* style.css content here */
-DO NOT use markdown code blocks (```html, ```javascript, ```css).
-ONLY use the === filename === format shown above.
 Requirements:
 1. Create a modern, responsive web application using transformers.js
@@ -111,11 +145,17 @@ const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncase
 Consider providing users with options to choose device (CPU/GPU) and quantization level based on their needs.
-The index.html should contain the basic HTML structure and link to the CSS and JS files.
-The index.js should contain all the JavaScript logic including transformers.js integration.
-The style.css should contain all the styling for the application.
-Generate complete, working code files as shown above.
 IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder"""

 === index.html ===
 <!DOCTYPE html>
 <html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your App Title</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Your complete HTML content here -->
+    <script type="module" src="index.js"></script>
+</body>
 </html>
 === index.js ===
+import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0';
+// Your complete JavaScript code here
+// Include all functionality, event listeners, and logic
 === style.css ===
+/* Your complete CSS styles here */
+/* Include all styling for the application */
+**CRITICAL FORMATTING RULES:**
+1. Start each file IMMEDIATELY after the === marker (on the next line)
+2. DO NOT use markdown code blocks (```html, ```javascript, ```css) - these will cause parsing errors
+3. DO NOT leave any file empty - each file MUST contain complete, functional code
+4. ONLY use the === filename === format shown above
+5. Make sure there is a blank line between each file section
+6. Each file must be complete and ready to deploy - no placeholders or comments like "// add code here"
+**Example of CORRECT format:**
+=== index.html ===
+<!DOCTYPE html>
+<html>
+<head>...</head>
+<body>...</body>
+</html>
+=== index.js ===
+import { pipeline } from '...';
+// Complete working code
+=== style.css ===
+body { margin: 0; }
+/* Complete styling */
 Requirements:
 1. Create a modern, responsive web application using transformers.js
 Consider providing users with options to choose device (CPU/GPU) and quantization level based on their needs.
+**File Content Requirements:**
+- **index.html**: Complete HTML structure with proper DOCTYPE, meta tags, links to CSS/JS files, and full body content
+- **index.js**: Complete JavaScript logic with transformers.js imports and ALL functionality implemented
+- **style.css**: Complete styling for the entire application - NO empty or placeholder styles
+**🚨 FINAL REMINDERS:**
+1. Use the === filename === markers EXACTLY as shown in the examples
+2. DO NOT use markdown code blocks (```html, ```js, ```css)
+3. ALL THREE files must be complete and functional - no placeholders or "TODO" comments
+4. Start each file's content immediately on the line after the === marker
+5. Ensure each file has actual content - empty files will cause deployment failure
 IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder"""