update

backend_docs_manager.py

@@ -20,10 +20,18 @@ GRADIO_LLMS_TXT_URL = "https://www.gradio.app/llms.txt"
 GRADIO_DOCS_CACHE_FILE = ".backend_gradio_docs_cache.txt"
 GRADIO_DOCS_LAST_UPDATE_FILE = ".backend_gradio_docs_last_update.txt"
 
+TRANSFORMERSJS_DOCS_URL = "https://huggingface.co/docs/transformers.js/llms.txt"
+TRANSFORMERSJS_DOCS_CACHE_FILE = ".backend_transformersjs_docs_cache.txt"
+TRANSFORMERSJS_DOCS_LAST_UPDATE_FILE = ".backend_transformersjs_docs_last_update.txt"
+
 # Global variable to store the current Gradio documentation
 _gradio_docs_content: Optional[str] = None
 _gradio_docs_last_fetched: Optional[datetime] = None
 
+# Global variable to store the current transformers.js documentation
+_transformersjs_docs_content: Optional[str] = None
+_transformersjs_docs_last_fetched: Optional[datetime] = None
+
 def fetch_gradio_docs() -> Optional[str]:
     """Fetch the latest Gradio documentation from llms.txt"""
     if not HAS_REQUESTS:
@@ -37,6 +45,19 @@ def fetch_gradio_docs() -> Optional[str]:
         print(f"Warning: Failed to fetch Gradio docs from {GRADIO_LLMS_TXT_URL}: {e}")
         return None
 
+def fetch_transformersjs_docs() -> Optional[str]:
+    """Fetch the latest transformers.js documentation from llms.txt"""
+    if not HAS_REQUESTS:
+        return None
+    
+    try:
+        response = requests.get(TRANSFORMERSJS_DOCS_URL, timeout=10)
+        response.raise_for_status()
+        return response.text
+    except Exception as e:
+        print(f"Warning: Failed to fetch transformers.js docs from {TRANSFORMERSJS_DOCS_URL}: {e}")
+        return None
+
 def filter_problematic_instructions(content: str) -> str:
     """Filter out problematic instructions that cause LLM to stop generation prematurely"""
     if not content:
@@ -94,6 +115,31 @@ def should_update_gradio_docs() -> bool:
     # Only update if we don't have cached content (first run or cache deleted)
     return not os.path.exists(GRADIO_DOCS_CACHE_FILE)
 
+def load_cached_transformersjs_docs() -> Optional[str]:
+    """Load cached transformers.js documentation from file"""
+    try:
+        if os.path.exists(TRANSFORMERSJS_DOCS_CACHE_FILE):
+            with open(TRANSFORMERSJS_DOCS_CACHE_FILE, 'r', encoding='utf-8') as f:
+                return f.read()
+    except Exception as e:
+        print(f"Warning: Failed to load cached transformers.js docs: {e}")
+    return None
+
+def save_transformersjs_docs_cache(content: str):
+    """Save transformers.js documentation to cache file"""
+    try:
+        with open(TRANSFORMERSJS_DOCS_CACHE_FILE, 'w', encoding='utf-8') as f:
+            f.write(content)
+        with open(TRANSFORMERSJS_DOCS_LAST_UPDATE_FILE, 'w', encoding='utf-8') as f:
+            f.write(datetime.now().isoformat())
+    except Exception as e:
+        print(f"Warning: Failed to save transformers.js docs cache: {e}")
+
+def should_update_transformersjs_docs() -> bool:
+    """Check if transformers.js documentation should be updated"""
+    # Only update if we don't have cached content (first run or cache deleted)
+    return not os.path.exists(TRANSFORMERSJS_DOCS_CACHE_FILE)
+
 def get_gradio_docs_content() -> str:
     """Get the current Gradio documentation content, updating if necessary"""
     global _gradio_docs_content, _gradio_docs_last_fetched
@@ -139,6 +185,63 @@ For the latest documentation, visit: https://www.gradio.app/llms.txt
     
     return _gradio_docs_content or ""
 
+def get_transformersjs_docs_content() -> str:
+    """Get the current transformers.js documentation content, updating if necessary"""
+    global _transformersjs_docs_content, _transformersjs_docs_last_fetched
+    
+    # Check if we need to update
+    if (_transformersjs_docs_content is None or 
+        _transformersjs_docs_last_fetched is None or 
+        should_update_transformersjs_docs()):
+        
+        print("📚 Loading transformers.js documentation...")
+        
+        # Try to fetch latest content
+        latest_content = fetch_transformersjs_docs()
+        
+        if latest_content:
+            # Filter out problematic instructions that cause early termination
+            filtered_content = filter_problematic_instructions(latest_content)
+            _transformersjs_docs_content = filtered_content
+            _transformersjs_docs_last_fetched = datetime.now()
+            save_transformersjs_docs_cache(filtered_content)
+            print(f"✅ transformers.js documentation loaded successfully ({len(filtered_content)} chars)")
+        else:
+            # Fallback to cached content
+            cached_content = load_cached_transformersjs_docs()
+            if cached_content:
+                _transformersjs_docs_content = cached_content
+                _transformersjs_docs_last_fetched = datetime.now()
+                print(f"⚠️ Using cached transformers.js documentation (network fetch failed) ({len(cached_content)} chars)")
+            else:
+                # Fallback to minimal content
+                _transformersjs_docs_content = """
+# Transformers.js API Reference (Offline Fallback)
+
+This is a minimal fallback when documentation cannot be fetched.
+Please check your internet connection for the latest API reference.
+
+Transformers.js allows you to run 🤗 Transformers models directly in the browser using ONNX Runtime.
+
+Key features:
+- pipeline() API for common tasks (sentiment-analysis, text-generation, etc.)
+- Support for custom models via model ID or path
+- WebGPU support for GPU acceleration
+- Quantization support (fp32, fp16, q8, q4)
+
+Basic usage:
+```javascript
+import { pipeline } from '@huggingface/transformers';
+const pipe = await pipeline('sentiment-analysis');
+const out = await pipe('I love transformers!');
+```
+
+For the latest documentation, visit: https://huggingface.co/docs/transformers.js
+"""
+                print("❌ Using minimal fallback transformers.js documentation")
+    
+    return _transformersjs_docs_content or ""
+
 def build_gradio_system_prompt() -> str:
     """Build the complete Gradio system prompt with full documentation"""
     
@@ -209,6 +312,88 @@ Below is the complete, official Gradio 6 documentation automatically synced from
 - Generate production-ready code that follows all best practices
 - Always include the "Built with anycoder" attribution in the header
 
+"""
+    
+    return full_prompt + final_instructions
+
+def build_transformersjs_system_prompt() -> str:
+    """Build the complete transformers.js system prompt with full documentation"""
+    
+    # Get the full transformers.js documentation
+    docs_content = get_transformersjs_docs_content()
+    
+    # Base system prompt with anycoder-specific instructions
+    base_prompt = """You are an expert transformers.js developer. Create a complete, working browser-based ML application using transformers.js based on the user's request. Generate all necessary code to make the application functional and runnable in the browser.
+
+## Multi-File Application Structure
+
+When creating transformers.js applications, organize your code into multiple files for proper deployment:
+
+**File Organization:**
+- `index.html` - Main HTML entry point (REQUIRED)
+- `app.js` - Main JavaScript application logic (REQUIRED)
+- `styles.css` - Styling (optional)
+- `worker.js` - Web Worker for model loading (recommended for better performance)
+- `package.json` - Node.js dependencies if using bundler (optional)
+
+**Output Format:**
+You MUST use this exact format with file separators:
+
+=== index.html ===
+[complete HTML content]
+
+=== app.js ===
+[complete JavaScript content]
+
+=== worker.js ===
+[web worker content - if needed]
+
+**🚨 CRITICAL: Best Practices**
+- Use CDN for transformers.js: https://cdn.jsdelivr.net/npm/@huggingface/transformers
+- Implement loading states and progress indicators
+- Use Web Workers for model loading to avoid blocking UI
+- Handle errors gracefully with user-friendly messages
+- Show model download progress when applicable
+- Use quantized models (q8, q4) for faster loading in browser
+
+Requirements:
+1. Create a modern, responsive web application
+2. Use appropriate transformers.js pipelines and models
+3. Include proper error handling and loading states
+4. Implement progress indicators for model loading
+5. Add helpful descriptions and examples
+6. Follow browser best practices (async/await, Web Workers, etc.)
+7. Make the UI user-friendly with clear labels
+8. Include proper comments in code
+
+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
+
+---
+
+## Complete transformers.js Documentation
+
+Below is the complete, official transformers.js documentation automatically synced from https://huggingface.co/docs/transformers.js/llms.txt:
+
+"""
+    
+    # Combine base prompt with full documentation
+    full_prompt = base_prompt + docs_content
+    
+    # Add final instructions
+    final_instructions = """
+
+---
+
+## Final Instructions
+
+- Always use the exact function signatures and patterns from the transformers.js documentation above
+- Use the pipeline() API for common tasks
+- Implement WebGPU support when appropriate for better performance
+- Use quantized models by default (q8 or q4) for faster browser loading
+- Generate production-ready code that follows all best practices
+- Always include the "Built with anycoder" attribution in the header
+- Consider using Web Workers for heavy computation to keep UI responsive
+
 """
     
     return full_prompt + final_instructions
@@ -216,12 +401,20 @@ Below is the complete, official Gradio 6 documentation automatically synced from
 def initialize_backend_docs():
     """Initialize backend documentation system on startup"""
     try:
-        # Pre-load the documentation
-        docs = get_gradio_docs_content()
-        if docs:
-            print(f"🚀 Backend documentation system initialized ({len(docs)} chars loaded)")
+        # Pre-load the Gradio documentation
+        gradio_docs = get_gradio_docs_content()
+        if gradio_docs:
+            print(f"🚀 Gradio documentation initialized ({len(gradio_docs)} chars loaded)")
+        else:
+            print("⚠️ Gradio documentation initialized with fallback content")
+        
+        # Pre-load the transformers.js documentation
+        transformersjs_docs = get_transformersjs_docs_content()
+        if transformersjs_docs:
+            print(f"🚀 transformers.js documentation initialized ({len(transformersjs_docs)} chars loaded)")
         else:
-            print("⚠️ Backend documentation system initialized with fallback content")
+            print("⚠️ transformers.js documentation initialized with fallback content")
+            
     except Exception as e:
         print(f"Warning: Failed to initialize backend documentation: {e}")
 

backend_prompts.py

@@ -3,13 +3,13 @@ Standalone system prompts for AnyCoder backend.
 No dependencies on Gradio or other heavy libraries.
 """
 
-# Import the backend documentation manager for Gradio 6 docs
+# Import the backend documentation manager for Gradio 6 docs and transformers.js docs
 try:
-    from backend_docs_manager import build_gradio_system_prompt
+    from backend_docs_manager import build_gradio_system_prompt, build_transformersjs_system_prompt
     HAS_BACKEND_DOCS = True
 except ImportError:
     HAS_BACKEND_DOCS = False
-    print("Warning: backend_docs_manager not available, using fallback Gradio prompt")
+    print("Warning: backend_docs_manager not available, using fallback prompts")
 
 HTML_SYSTEM_PROMPT = """ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. MAKE IT RESPONSIVE USING MODERN CSS. Use as much as you can modern CSS for the styling, if you can't do something with modern CSS, then use custom CSS. Also, try to elaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE
 
@@ -27,7 +27,14 @@ Generate complete, working HTML code that can be run immediately.
 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"""
 
 
-TRANSFORMERS_JS_SYSTEM_PROMPT = """You are an expert web developer creating a transformers.js application. You will generate THREE separate files: index.html, index.js, and style.css.
+# Transformers.js system prompt - dynamically loaded with full transformers.js documentation
+def get_transformersjs_system_prompt() -> str:
+    """Get the complete transformers.js system prompt with full documentation"""
+    if HAS_BACKEND_DOCS:
+        return build_transformersjs_system_prompt()
+    else:
+        # Fallback prompt if documentation manager is not available
+        return """You are an expert web developer creating a transformers.js application. You will generate THREE separate files: index.html, index.js, and style.css.
 
 **🚨 CRITICAL: DO NOT Generate README.md Files**
 - NEVER generate README.md files under any circumstances
@@ -76,37 +83,6 @@ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers
 7. Each file must be complete and ready to deploy - no placeholders or "// TODO" comments
 8. **AVOID EMOJIS in the generated code** (HTML/JS/CSS files) - use text or unicode symbols instead for deployment compatibility
 
-**WRONG FORMAT (DO NOT DO THIS):**
-<!DOCTYPE html>
-<html>...
-
-=== index.js ===
-...
-
-**CORRECT FORMAT (DO THIS):**
-=== index.html ===
-<!DOCTYPE html>
-<html>...
-
-=== index.js ===
-...
-
-**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
 2. Use the transformers.js library for AI/ML functionality
@@ -118,31 +94,19 @@ Requirements:
 
 **Transformers.js Library Usage:**
 
-Import via CDN (use in index.html or index.js):
+Import via CDN:
 ```javascript
-<script type="module">
-    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0';
-</script>
+import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0';
 ```
 
 **Pipeline API - Quick Tour:**
-Pipelines group together a pretrained model with preprocessing and postprocessing. Example:
-
 ```javascript
-import { pipeline } from '@huggingface/transformers';
-
 // Allocate a pipeline for sentiment-analysis
 const pipe = await pipeline('sentiment-analysis');
-
 const out = await pipe('I love transformers!');
-// [{'label': 'POSITIVE', 'score': 0.999817686}]
-
-// Use a different model by specifying model id
-const pipe = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment');
 ```
 
 **Device Options:**
-By default, models run on CPU (via WASM). For better performance, use WebGPU:
 ```javascript
 // Run on WebGPU (GPU)
 const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
@@ -151,12 +115,6 @@ const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncase
 ```
 
 **Quantization Options:**
-In resource-constrained environments (browsers), use quantized models:
-- "fp32" (default for WebGPU)
-- "fp16" 
-- "q8" (default for WASM)
-- "q4" (4-bit quantization for smaller size)
-
 ```javascript
 // Run at 4-bit quantization for better performance
 const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
@@ -164,22 +122,11 @@ 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.
-
-**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
-6. AVOID using emojis in the generated code files - use text or HTML entities instead
+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
+"""
 
-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"""
+# Legacy variable for backward compatibility - now dynamically generated
+TRANSFORMERS_JS_SYSTEM_PROMPT = get_transformersjs_system_prompt()
 
 
 STREAMLIT_SYSTEM_PROMPT = """You are an expert Streamlit developer. Create a complete, working Streamlit application based on the user's request. Generate all necessary code to make the application functional and runnable.