Add C4A-Script support and documentation

- Generate OneShot js code geenrator - Introduced a new C4A-Script tutorial example for login flow using Blockly. - Updated index.html to include Blockly theme and event editor modal for script editing. - Created a test HTML file for testing Blockly integration. - Added comprehensive C4A-Script API reference documentation covering commands, syntax, and examples. - Developed core documentation for C4A-Script, detailing its features, commands, and real-world examples. - Updated mkdocs.yml to include new C4A-Script documentation in navigation.
2025-06-07 23:07:19 +08:00
parent ca03acbc82
commit 08a2cdae53
46 changed files with 6914 additions and 326 deletions
--- a/docs/examples/c4a_script/generate_script_hello_world.py
+++ b/docs/examples/c4a_script/generate_script_hello_world.py
@@ -0,0 +1,89 @@
+#!/usr/bin/env python3
+"""
+Hello World Example: LLM-Generated C4A-Script
+
+This example shows how to use the new generate_script() function to automatically
+create C4A-Script automation from natural language descriptions and HTML.
+"""
+
+from crawl4ai.script.c4a_compile import C4ACompiler
+
+def main():
+    print("🤖 C4A-Script Generation Hello World")
+    print("=" * 50)
+    
+    # Example 1: Simple login form
+    html = """
+    <html>
+    <body>
+        <form id="login">
+            <input id="email" type="email" placeholder="Email">
+            <input id="password" type="password" placeholder="Password">
+            <button id="submit">Login</button>
+        </form>
+    </body>
+    </html>
+    """
+    
+    goal = "Fill in email 'user@example.com', password 'secret123', and submit the form"
+    
+    print("📝 Goal:", goal)
+    print("🌐 HTML: Simple login form")
+    print()
+    
+    # Generate C4A-Script
+    print("🔧 Generated C4A-Script:")
+    print("-" * 30)
+    c4a_script = C4ACompiler.generate_script(
+        html=html,
+        query=goal,
+        mode="c4a"
+    )
+    print(c4a_script)
+    print()
+    
+    # Generate JavaScript
+    print("🔧 Generated JavaScript:")
+    print("-" * 30)
+    js_script = C4ACompiler.generate_script(
+        html=html,
+        query=goal,
+        mode="js"
+    )
+    print(js_script)
+    print()
+    
+    # Example 2: Simple button click
+    html2 = """
+    <html>
+    <body>
+        <div class="content">
+            <h1>Welcome!</h1>
+            <button id="start-btn" class="primary">Get Started</button>
+        </div>
+    </body>
+    </html>
+    """
+    
+    goal2 = "Click the 'Get Started' button"
+    
+    print("=" * 50)
+    print("📝 Goal:", goal2)
+    print("🌐 HTML: Simple button")
+    print()
+    
+    print("🔧 Generated C4A-Script:")
+    print("-" * 30)
+    c4a_script2 = C4ACompiler.generate_script(
+        html=html2,
+        query=goal2,
+        mode="c4a"
+    )
+    print(c4a_script2)
+    print()
+    
+    print("✅ Done! The LLM automatically converted natural language goals")
+    print("   into executable automation scripts.")
+
+if __name__ == "__main__":
+    main()