7cac008c10
* fix(docker-api): migrate to modern datetime library API
Signed-off-by: Emmanuel Ferdman <emmanuelferdman@gmail.com>
* Fix examples in README.md
* feat(docker): add user-provided hooks support to Docker API
Implements comprehensive hooks functionality allowing users to provide custom Python
functions as strings that execute at specific points in the crawling pipeline.
Key Features:
- Support for all 8 crawl4ai hook points:
• on_browser_created: Initialize browser settings
• on_page_context_created: Configure page context
• before_goto: Pre-navigation setup
• after_goto: Post-navigation processing
• on_user_agent_updated: User agent modification handling
• on_execution_started: Crawl execution initialization
• before_retrieve_html: Pre-extraction processing
• before_return_html: Final HTML processing
Implementation Details:
- Created UserHookManager for validation, compilation, and safe execution
- Added IsolatedHookWrapper for error isolation and timeout protection
- AST-based validation ensures code structure correctness
- Sandboxed execution with restricted builtins for security
- Configurable timeout (1-120 seconds) prevents infinite loops
- Comprehensive error handling ensures hooks don't crash main process
- Execution tracking with detailed statistics and logging
API Changes:
- Added HookConfig schema with code and timeout fields
- Extended CrawlRequest with optional hooks parameter
- Added /hooks/info endpoint for hook discovery
- Updated /crawl and /crawl/stream endpoints to support hooks
Safety Features:
- Malformed hooks return clear validation errors
- Hook errors are isolated and reported without stopping crawl
- Execution statistics track success/failure/timeout rates
- All hook results are JSON-serializable
Testing:
- Comprehensive test suite covering all 8 hooks
- Error handling and timeout scenarios validated
- Authentication, performance, and content extraction examples
- 100% success rate in production testing
Documentation:
- Added extensive hooks section to docker-deployment.md
- Security warnings about user-provided code risks
- Real-world examples using httpbin.org, GitHub, BBC
- Best practices and troubleshooting guide
ref #1377
* fix(deep-crawl): BestFirst priority inversion; remove pre-scoring truncation. ref #1253
Use negative scores in PQ to visit high-score URLs first and drop link cap prior to scoring; add test for ordering.
* docs: Update URL seeding examples to use proper async context managers
- Wrap all AsyncUrlSeeder usage with async context managers
- Update URL seeding adventure example to use "sitemap+cc" source, focus on course posts, and add stream=True parameter to fix runtime error
* fix(crawler): Removed the incorrect reference in browser_config variable #1310
* docs: update Docker instructions to use the latest release tag
* fix(docker): Fix LLM API key handling for multi-provider support
Previously, the system incorrectly used OPENAI_API_KEY for all LLM providers
due to a hardcoded api_key_env fallback in config.yml. This caused authentication
errors when using non-OpenAI providers like Gemini.
Changes:
- Remove api_key_env from config.yml to let litellm handle provider-specific env vars
- Simplify get_llm_api_key() to return None, allowing litellm to auto-detect keys
- Update validate_llm_provider() to trust litellm's built-in key detection
- Update documentation to reflect the new automatic key handling
The fix leverages litellm's existing capability to automatically find the correct
environment variable for each provider (OPENAI_API_KEY, GEMINI_API_TOKEN, etc.)
without manual configuration.
ref #1291
* docs: update adaptive crawler docs and cache defaults; remove deprecated examples (#1330)
- Replace BaseStrategy with CrawlStrategy in custom strategy examples (DomainSpecificStrategy, HybridStrategy)
- Remove “Custom Link Scoring” and “Caching Strategy” sections no longer aligned with current library
- Revise memory pruning example to use adaptive.get_relevant_content and index-based retention of top 500 docs
- Correct Quickstart note: default cache mode is CacheMode.BYPASS; instruct enabling with CacheMode.ENABLED
* fix(utils): Improve URL normalization by avoiding quote/unquote to preserve '+' signs. ref #1332
* feat: Add comprehensive website to API example with frontend
This commit adds a complete, web scraping API example that demonstrates how to get structured data from any website and use it like an API using the crawl4ai library with a minimalist frontend interface.
Core Functionality
- AI-powered web scraping with plain English queries
- Dual scraping approaches: Schema-based (faster) and LLM-based (flexible)
- Intelligent schema caching for improved performance
- Custom LLM model support with API key management
- Automatic duplicate request prevention
Modern Frontend Interface
- Minimalist black-and-white design inspired by modern web apps
- Responsive layout with smooth animations and transitions
- Three main pages: Scrape Data, Models Management, API Request History
- Real-time results display with JSON formatting
- Copy-to-clipboard functionality for extracted data
- Toast notifications for user feedback
- Auto-scroll to results when scraping starts
Model Management System
- Web-based model configuration interface
- Support for any LLM provider (OpenAI, Gemini, Anthropic, etc.)
- Simplified configuration requiring only provider and API token
- Add, list, and delete model configurations
- Secure storage of API keys in local JSON files
API Request History
- Automatic saving of all API requests and responses
- Display of request history with URL, query, and cURL commands
- Duplicate prevention (same URL + query combinations)
- Request deletion functionality
- Clean, simplified display focusing on essential information
Technical Implementation
Backend (FastAPI)
- RESTful API with comprehensive endpoints
- Pydantic models for request/response validation
- Async web scraping with crawl4ai library
- Error handling with detailed error messages
- File-based storage for models and request history
Frontend (Vanilla JS/CSS/HTML)
- No framework dependencies - pure HTML, CSS, JavaScript
- Modern CSS Grid and Flexbox layouts
- Custom dropdown styling with SVG arrows
- Responsive design for mobile and desktop
- Smooth scrolling and animations
Core Library Integration
- WebScraperAgent class for orchestration
- ModelConfig class for LLM configuration management
- Schema generation and caching system
- LLM extraction strategy support
- Browser configuration with headless mode
* fix(dependencies): add cssselect to project dependencies
Fixes bug reported in issue #1405
[Bug]: Excluded selector (excluded_selector) doesn't work
This commit reintroduces the cssselect library which was removed by PR (https://github.com/unclecode/crawl4ai/pull/1368) and merged via (437395e490).
Integration tested against 0.7.4 Docker container. Reintroducing cssselector package eliminated errors seen in logs and excluded_selector functionality was restored.
Refs: #1405
* fix(docker): resolve filter serialization and JSON encoding errors in deep crawl strategy (ref #1419)
- Fix URLPatternFilter serialization by preventing private __slots__ from being serialized as constructor params
- Add public attributes to URLPatternFilter to store original constructor parameters for proper serialization
- Handle property descriptors in CrawlResult.model_dump() to prevent JSON serialization errors
- Ensure filter chains work correctly with Docker client and REST API
The issue occurred because:
1. Private implementation details (_simple_suffixes, etc.) were being serialized and passed as constructor arguments during deserialization
2. Property descriptors were being included in the serialized output, causing "Object of type property is not JSON serializable" errors
Changes:
- async_configs.py: Comment out __slots__ serialization logic (lines 100-109)
- filters.py: Add patterns, use_glob, reverse to URLPatternFilter __slots__ and store as public attributes
- models.py: Convert property descriptors to strings in model_dump() instead of including them directly
* fix(logger): ensure logger is a Logger instance in crawling strategies. ref #1437
* feat(docker): Add temperature and base_url parameters for LLM configuration. ref #1035
Implement hierarchical configuration for LLM parameters with support for:
- Temperature control (0.0-2.0) to adjust response creativity
- Custom base_url for proxy servers and alternative endpoints
- 4-tier priority: request params > provider env > global env > defaults
Add helper functions in utils.py, update API schemas and handlers,
support environment variables (LLM_TEMPERATURE, OPENAI_TEMPERATURE, etc.),
and provide comprehensive documentation with examples.
* feat(docker): improve docker error handling
- Return comprehensive error messages along with status codes for api internal errors.
- Fix fit_html property serialization issue in both /crawl and /crawl/stream endpoints
- Add sanitization to ensure fit_html is always JSON-serializable (string or None)
- Add comprehensive error handling test suite.
* #1375 : refactor(proxy) Deprecate 'proxy' parameter in BrowserConfig and enhance proxy string parsing
- Updated ProxyConfig.from_string to support multiple proxy formats, including URLs with credentials.
- Deprecated the 'proxy' parameter in BrowserConfig, replacing it with 'proxy_config' for better flexibility.
- Added warnings for deprecated usage and clarified behavior when both parameters are provided.
- Updated documentation and tests to reflect changes in proxy configuration handling.
* Remove deprecated test for 'proxy' parameter in BrowserConfig and update .gitignore to include test_scripts directory.
* feat: add preserve_https_for_internal_links flag to maintain HTTPS during crawling. Ref #1410
Added a new `preserve_https_for_internal_links` configuration flag that preserves the original HTTPS scheme for same-domain links even when the server redirects to HTTP.
* feat: update documentation for preserve_https_for_internal_links. ref #1410
* fix: drop Python 3.9 support and require Python >=3.10.
The library no longer supports Python 3.9 and so it was important to drop all references to python 3.9.
Following changes have been made:
- pyproject.toml: set requires-python to ">=3.10"; remove 3.9 classifier
- setup.py: set python_requires to ">=3.10"; remove 3.9 classifier
- docs: update Python version mentions
- deploy/docker/c4ai-doc-context.md: options -> 3.10, 3.11, 3.12, 3.13
* issue #1329 refactor(crawler): move unwanted properties to CrawlerRunConfig class
* fix(auth): fixed Docker JWT authentication. ref #1442
* remove: delete unused yoyo snapshot subproject
* fix: raise error on last attempt failure in perform_completion_with_backoff. ref #989
* Commit without API
* fix: update option labels in request builder for clarity
* fix: allow custom LLM providers for adaptive crawler embedding config. ref: #1291
- Change embedding_llm_config from Dict to Union[LLMConfig, Dict] for type safety
- Add backward-compatible conversion property _embedding_llm_config_dict
- Replace all hardcoded OpenAI embedding configs with configurable options
- Fix LLMConfig object attribute access in query expansion logic
- Add comprehensive example demonstrating multiple provider configurations
- Update documentation with both LLMConfig object and dictionary usage patterns
Users can now specify any LLM provider for query expansion in embedding strategy:
- New: embedding_llm_config=LLMConfig(provider='anthropic/claude-3', api_token='key')
- Old: embedding_llm_config={'provider': 'openai/gpt-4', 'api_token': 'key'} (still works)
* refactor(BrowserConfig): change deprecation warning for 'proxy' parameter to UserWarning
* feat(StealthAdapter): fix stealth features for Playwright integration. ref #1481
* #1505 fix(api): update config handling to only set base config if not provided by user
* fix(docker-deployment): replace console.log with print for metadata extraction
* Release v0.7.5: The Update
- Updated version to 0.7.5
- Added comprehensive demo and release notes
- Updated documentation
* refactor(release): remove memory management section for cleaner documentation. ref #1443
* feat(docs): add brand book and page copy functionality
- Add comprehensive brand book with color system, typography, components
- Add page copy dropdown with markdown copy/view functionality
- Update mkdocs.yml with new assets and branding navigation
- Use terminal-style ASCII icons and condensed menu design
* Update gitignore add local scripts folder
* fix: remove this import as it causes python to treat "json" as a variable in the except block
* fix: always return a list, even if we catch an exception
* feat(marketplace): Add Crawl4AI marketplace with secure configuration
- Implement marketplace frontend and admin dashboard
- Add FastAPI backend with environment-based configuration
- Use .env file for secrets management
- Include data generation scripts
- Add proper CORS configuration
- Remove hardcoded password from admin login
- Update gitignore for security
* fix(marketplace): Update URLs to use /marketplace path and relative API endpoints
- Change API_BASE to relative '/api' for production
- Move marketplace to /marketplace instead of /marketplace/frontend
- Update MkDocs navigation
- Fix logo path in marketplace index
* fix(docs): hide copy menu on non-markdown pages
* feat(marketplace): add sponsor logo uploads
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
* feat(docs): add chatgpt quick link to page actions
* fix(marketplace): align admin api with backend endpoints
* fix(marketplace): isolate api under marketplace prefix
* fix(marketplace): resolve app detail page routing and styling issues
- Fixed JavaScript errors from missing HTML elements (install-code, usage-code, integration-code)
- Added missing CSS classes for tabs, overview layout, sidebar, and integration content
- Fixed tab navigation to display horizontally in single line
- Added proper padding to tab content sections (removed from container, added to content)
- Fixed tab selector from .nav-tab to .tab-btn to match HTML structure
- Added sidebar styling with stats grid and metadata display
- Improved responsive design with mobile-friendly tab scrolling
- Fixed code block positioning for copy buttons
- Removed margin from first headings to prevent extra spacing
- Added null checks for DOM elements in JavaScript to prevent errors
These changes resolve the routing issue where clicking on apps caused page redirects,
and fix the broken layout where CSS was not properly applied to the app detail page.
* fix(marketplace): prevent hero image overflow and secondary card stretching
- Fixed hero image to 200px height with min/max constraints
- Added object-fit: cover to hero-image img elements
- Changed secondary-featured align-items from stretch to flex-start
- Fixed secondary-card height to 118px (no flex: 1 stretching)
- Updated responsive grid layouts for wider screens
- Added flex: 1 to hero-content for better content distribution
These changes ensure a rigid, predictable layout that prevents:
1. Large images from pushing text content down
2. Single secondary cards from stretching to fill entire height
* feat: Add hooks utility for function-based hooks with Docker client integration. ref #1377
Add hooks_to_string() utility function that converts Python function objects
to string representations for the Docker API, enabling developers to write hooks
as regular Python functions instead of strings.
Core Changes:
- New hooks_to_string() utility in crawl4ai/utils.py using inspect.getsource()
- Docker client now accepts both function objects and strings for hooks
- Automatic detection and conversion in Crawl4aiDockerClient._prepare_request()
- New hooks and hooks_timeout parameters in client.crawl() method
Documentation:
- Docker client examples with function-based hooks (docs/examples/docker_client_hooks_example.py)
- Updated main Docker deployment guide with comprehensive hooks section
- Added unit tests for hooks utility (tests/docker/test_hooks_utility.py)
* feat: Add hooks utility for function-based hooks with Docker client integration. ref #1377
Add hooks_to_string() utility function that converts Python function objects
to string representations for the Docker API, enabling developers to write hooks
as regular Python functions instead of strings.
Core Changes:
- New hooks_to_string() utility in crawl4ai/utils.py using inspect.getsource()
- Docker client now accepts both function objects and strings for hooks
- Automatic detection and conversion in Crawl4aiDockerClient._prepare_request()
- New hooks and hooks_timeout parameters in client.crawl() method
Documentation:
- Docker client examples with function-based hooks (docs/examples/docker_client_hooks_example.py)
- Updated main Docker deployment guide with comprehensive hooks section
- Added unit tests for hooks utility (tests/docker/test_hooks_utility.py)
* fix(docs): clarify Docker Hooks System with function-based API in README
* docs: Add demonstration files for v0.7.5 release, showcasing the new Docker Hooks System and all other features.
* docs: Update 0.7.5 video walkthrough
* docs: add complete SDK reference documentation
Add comprehensive single-page SDK reference combining:
- Installation & Setup
- Quick Start
- Core API (AsyncWebCrawler, arun, arun_many, CrawlResult)
- Configuration (BrowserConfig, CrawlerConfig, Parameters)
- Crawling Patterns
- Content Processing (Markdown, Fit Markdown, Selection, Interaction, Link & Media)
- Extraction Strategies (LLM and No-LLM)
- Advanced Features (Session Management, Hooks & Auth)
Generated using scripts/generate_sdk_docs.py in ultra-dense mode
optimized for AI assistant consumption.
Stats: 23K words, 185 code blocks, 220KB
* feat: add AI assistant skill package for Crawl4AI
- Create comprehensive skill package for AI coding assistants
- Include complete SDK reference (23K words, v0.7.4)
- Add three extraction scripts (basic, batch, pipeline)
- Implement version tracking in skill and scripts
- Add prominent download section on homepage
- Place skill in docs/assets for web distribution
The skill enables AI assistants like Claude, Cursor, and Windsurf
to effectively use Crawl4AI with optimized workflows for markdown
generation and data extraction.
* fix: remove non-existent wiki link and clarify skill usage instructions
* fix: update Crawl4AI skill with corrected parameters and examples
- Fixed CrawlerConfig → CrawlerRunConfig throughout
- Fixed parameter names (timeout → page_timeout, store_html removed)
- Fixed schema format (selector → baseSelector)
- Corrected proxy configuration (in BrowserConfig, not CrawlerRunConfig)
- Fixed fit_markdown usage with content filters
- Added comprehensive references to docs/examples/ directory
- Created safe packaging script to avoid root directory pollution
- All scripts tested and verified working
* fix: thoroughly verify and fix all Crawl4AI skill examples
- Cross-checked every section against actual docs
- Fixed BM25ContentFilter parameters (user_query, bm25_threshold)
- Removed incorrect wait_for selector from basic example
- Added comprehensive test suite (4 test files)
- All examples now tested and verified working
- Tests validate: basic crawling, markdown generation, data extraction, advanced patterns
- Package size: 76.6 KB (includes tests for future validation)
* feat(ci): split release pipeline and add Docker caching
- Split release.yml into PyPI/GitHub release and Docker workflows
- Add GitHub Actions cache for Docker builds (10-15x faster rebuilds)
- Implement dual-trigger for docker-release.yml (auto + manual)
- Add comprehensive workflow documentation in .github/workflows/docs/
- Backup original workflow as release.yml.backup
* feat: add webhook notifications for crawl job completion
Implements webhook support for the crawl job API to eliminate polling requirements.
Changes:
- Added WebhookConfig and WebhookPayload schemas to schemas.py
- Created webhook.py with WebhookDeliveryService class
- Integrated webhook notifications in api.py handle_crawl_job
- Updated job.py CrawlJobPayload to accept webhook_config
- Added webhook configuration section to config.yml
- Included comprehensive usage examples in WEBHOOK_EXAMPLES.md
Features:
- Webhook notifications on job completion (success/failure)
- Configurable data inclusion in webhook payload
- Custom webhook headers support
- Global default webhook URL configuration
- Exponential backoff retry logic (5 attempts: 1s, 2s, 4s, 8s, 16s)
- 30-second timeout per webhook call
Usage:
POST /crawl/job with optional webhook_config:
- webhook_url: URL to receive notifications
- webhook_data_in_payload: include full results (default: false)
- webhook_headers: custom headers for authentication
Generated with Claude Code https://claude.com/claude-code
Co-Authored-By: Claude <noreply@anthropic.com>
* docs: add webhook documentation to Docker README
Added comprehensive webhook section to README.md including:
- Overview of asynchronous job queue with webhooks
- Benefits and use cases
- Quick start examples
- Webhook authentication
- Global webhook configuration
- Job status polling alternative
Updated table of contents and summary to include webhook feature.
Maintains consistent tone and style with rest of README.
Generated with Claude Code https://claude.com/claude-code
Co-Authored-By: Claude <noreply@anthropic.com>
* docs: add webhook example for Docker deployment
Added docker_webhook_example.py demonstrating:
- Submitting crawl jobs with webhook configuration
- Flask-based webhook receiver implementation
- Three usage patterns:
1. Webhook notification only (fetch data separately)
2. Webhook with full data in payload
3. Traditional polling approach for comparison
Includes comprehensive comments explaining:
- Webhook payload structure
- Authentication headers setup
- Error handling
- Production deployment tips
Example is fully functional and ready to run with Flask installed.
Generated with Claude Code https://claude.com/claude-code
Co-Authored-By: Claude <noreply@anthropic.com>
* test: add webhook implementation validation tests
Added comprehensive test suite to validate webhook implementation:
- Module import verification
- WebhookDeliveryService initialization
- Pydantic model validation (WebhookConfig)
- Payload construction logic
- Exponential backoff calculation
- API integration checks
All tests pass (6/6), confirming implementation is correct.
Generated with Claude Code https://claude.com/claude-code
Co-Authored-By: Claude <noreply@anthropic.com>
* test: add comprehensive webhook feature test script
Added end-to-end test script that automates webhook feature testing:
Script Features (test_webhook_feature.sh):
- Automatic branch switching and dependency installation
- Redis and server startup/shutdown management
- Webhook receiver implementation
- Integration test for webhook notifications
- Comprehensive cleanup and error handling
- Returns to original branch after completion
Test Flow:
1. Fetch and checkout webhook feature branch
2. Activate venv and install dependencies
3. Start Redis and Crawl4AI server
4. Submit crawl job with webhook config
5. Verify webhook delivery and payload
6. Clean up all processes and return to original branch
Documentation:
- WEBHOOK_TEST_README.md with usage instructions
- Troubleshooting guide
- Exit codes and safety features
Usage: ./tests/test_webhook_feature.sh
Generated with Claude Code https://claude.com/claude-code
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: properly serialize Pydantic HttpUrl in webhook config
Use model_dump(mode='json') instead of deprecated dict() method to ensure
Pydantic special types (HttpUrl, UUID, etc.) are properly serialized to
JSON-compatible native Python types.
This fixes webhook delivery failures caused by HttpUrl objects remaining
as Pydantic types in the webhook_config dict, which caused JSON
serialization errors and httpx request failures.
Also update mcp requirement to >=1.18.0 for compatibility.
* feat: add webhook support for /llm/job endpoint
Add comprehensive webhook notification support for the /llm/job endpoint,
following the same pattern as the existing /crawl/job implementation.
Changes:
- Add webhook_config field to LlmJobPayload model (job.py)
- Implement webhook notifications in process_llm_extraction() with 4
notification points: success, provider validation failure, extraction
failure, and general exceptions (api.py)
- Store webhook_config in Redis task data for job tracking
- Initialize WebhookDeliveryService with exponential backoff retry logic
Documentation:
- Add Example 6 to WEBHOOK_EXAMPLES.md showing LLM extraction with webhooks
- Update Flask webhook handler to support both crawl and llm_extraction tasks
- Add TypeScript client examples for LLM jobs
- Add comprehensive examples to docker_webhook_example.py with schema support
- Clarify data structure differences between webhook and API responses
Testing:
- Add test_llm_webhook_feature.py with 7 validation tests (all passing)
- Verify pattern consistency with /crawl/job implementation
- Add implementation guide (WEBHOOK_LLM_JOB_IMPLEMENTATION.md)
* fix: remove duplicate comma in webhook_config parameter
* fix: update Crawl4AI Docker container port from 11234 to 11235
* Release v0.7.6: The 0.7.6 Update
- Updated version to 0.7.6
- Added comprehensive demo and release notes
- Updated all documentation
- Update the veriosn in Dockerfile to 0.7.6
---------
Signed-off-by: Emmanuel Ferdman <emmanuelferdman@gmail.com>
Co-authored-by: Emmanuel Ferdman <emmanuelferdman@gmail.com>
Co-authored-by: Nezar Ali <abu5sohaib@gmail.com>
Co-authored-by: Soham Kukreti <kukretisoham@gmail.com>
Co-authored-by: James T. Wood <jamesthomaswood@gmail.com>
Co-authored-by: AHMET YILMAZ <tawfik@kidocode.com>
Co-authored-by: nafeqq-1306 <nafiquee@yahoo.com>
Co-authored-by: unclecode <unclecode@kidocode.com>
Co-authored-by: Martin Sjöborg <martin.sjoborg@quartr.se>
Co-authored-by: Martin Sjöborg <martin@sjoborg.org>
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
983 lines
44 KiB
HTML
983 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Crawl4AI Playground</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#4EFFFF',
|
||
primarydim: '#09b5a5',
|
||
accent: '#F380F5',
|
||
dark: '#070708',
|
||
light: '#E8E9ED',
|
||
secondary: '#D5CEBF',
|
||
codebg: '#1E1E1E',
|
||
surface: '#202020',
|
||
border: '#3F3F44',
|
||
},
|
||
fontFamily: {
|
||
mono: ['Fira Code', 'monospace'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||
<!-- Highlight.js -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
|
||
<!-- CodeMirror (python mode) -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/selection/active-line.min.js"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/darcula.min.css">
|
||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script> -->
|
||
<style>
|
||
/* Custom CodeMirror styling to match theme */
|
||
.CodeMirror {
|
||
background-color: #1E1E1E !important;
|
||
color: #E8E9ED !important;
|
||
border-radius: 4px;
|
||
font-family: 'Fira Code', monospace;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.CodeMirror-gutters {
|
||
background-color: #1E1E1E !important;
|
||
border-right: 1px solid #3F3F44 !important;
|
||
}
|
||
|
||
.CodeMirror-linenumber {
|
||
color: #3F3F44 !important;
|
||
}
|
||
|
||
.cm-s-darcula .cm-keyword {
|
||
color: #4EFFFF !important;
|
||
}
|
||
|
||
.cm-s-darcula .cm-string {
|
||
color: #F380F5 !important;
|
||
}
|
||
|
||
.cm-s-darcula .cm-number {
|
||
color: #D5CEBF !important;
|
||
}
|
||
|
||
/* Add to your <style> section or Tailwind config */
|
||
.hljs {
|
||
background: #1E1E1E !important;
|
||
border-radius: 4px;
|
||
padding: 1rem !important;
|
||
}
|
||
|
||
pre code.hljs {
|
||
display: block;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* Language-specific colors */
|
||
.hljs-attr {
|
||
color: #4EFFFF;
|
||
}
|
||
|
||
/* JSON keys */
|
||
.hljs-string {
|
||
color: #F380F5;
|
||
}
|
||
|
||
/* Strings */
|
||
.hljs-number {
|
||
color: #D5CEBF;
|
||
}
|
||
|
||
/* Numbers */
|
||
.hljs-keyword {
|
||
color: #4EFFFF;
|
||
}
|
||
|
||
pre code {
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.copy-btn {
|
||
transition: all 0.2s ease;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tab-content:hover .copy-btn {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.tab-content:hover .copy-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* copid text highlighted */
|
||
.highlighted {
|
||
background-color: rgba(78, 255, 255, 0.2) !important;
|
||
transition: background-color 0.5s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-dark text-light font-mono min-h-screen flex flex-col" style="font-feature-settings: 'calt' 0;">
|
||
<!-- Header -->
|
||
<header class="border-b border-border px-4 py-2 flex items-center">
|
||
<h1 class="text-lg font-medium flex items-center space-x-4">
|
||
<span>🚀🤖 <span class="text-primary">Crawl4AI</span> Playground</span>
|
||
|
||
<!-- GitHub badges -->
|
||
<a href="https://github.com/unclecode/crawl4ai" target="_blank" class="flex space-x-1">
|
||
<img src="https://img.shields.io/github/stars/unclecode/crawl4ai?style=social"
|
||
alt="GitHub stars" class="h-5">
|
||
<img src="https://img.shields.io/github/forks/unclecode/crawl4ai?style=social"
|
||
alt="GitHub forks" class="h-5">
|
||
</a>
|
||
|
||
<!-- Docs -->
|
||
<a href="https://docs.crawl4ai.com" target="_blank"
|
||
class="text-xs text-secondary hover:text-primary underline flex items-center">
|
||
Docs
|
||
</a>
|
||
|
||
<!-- X (Twitter) follow -->
|
||
<a href="https://x.com/unclecode" target="_blank"
|
||
class="hover:text-primary flex items-center" title="Follow @unclecode on X">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||
class="w-4 h-4 fill-current mr-1">
|
||
<path d="M22.46 6c-.77.35-1.6.58-2.46.69a4.27 4.27 0 001.88-2.35 8.53 8.53 0 01-2.71 1.04 4.24 4.24 0 00-7.23 3.87A12.05 12.05 0 013 4.62a4.24 4.24 0 001.31 5.65 4.2 4.2 0 01-1.92-.53v.05a4.24 4.24 0 003.4 4.16 4.31 4.31 0 01-1.91.07 4.25 4.25 0 003.96 2.95A8.5 8.5 0 012 19.55a12.04 12.04 0 006.53 1.92c7.84 0 12.13-6.49 12.13-12.13 0-.18-.01-.36-.02-.54A8.63 8.63 0 0024 5.1a8.45 8.45 0 01-2.54.7z"/>
|
||
</svg>
|
||
<span class="text-xs">@unclecode</span>
|
||
</a>
|
||
</h1>
|
||
|
||
<div class="ml-auto flex space-x-2">
|
||
<button id="play-tab"
|
||
class="px-3 py-1 rounded-t bg-surface border border-b-0 border-border text-primary">Playground</button>
|
||
<button id="stress-tab" class="px-3 py-1 rounded-t border border-border hover:bg-surface">Stress
|
||
Test</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Playground -->
|
||
<main id="playground" class="flex-1 flex flex-col p-4 space-y-4 max-w-5xl w-full mx-auto">
|
||
<!-- Request Builder -->
|
||
<section class="bg-surface rounded-lg border border-border overflow-hidden">
|
||
<div class="px-4 py-2 border-b border-border flex items-center">
|
||
<h2 class="font-medium">Request Builder</h2>
|
||
<select id="endpoint" class="ml-auto bg-dark border border-border rounded px-2 py-1 text-sm">
|
||
<option value="crawl">/crawl (batch)</option>
|
||
<option value="crawl_stream">/crawl/stream</option>
|
||
<option value="md">/md</option>
|
||
<option value="llm">/llm</option>
|
||
</select>
|
||
</div>
|
||
<div class="p-4">
|
||
<label class="block mb-2 text-sm">URL(s) - one per line</label>
|
||
<textarea id="urls" class="w-full bg-dark border border-border rounded p-2 h-32 text-sm mb-4"
|
||
spellcheck="false">https://example.com</textarea>
|
||
|
||
<!-- Specific options for /md endpoint -->
|
||
<details id="md-options" class="mb-4 hidden">
|
||
<summary class="text-sm text-secondary cursor-pointer">/md Options</summary>
|
||
<div class="mt-2 space-y-3 p-2 border border-border rounded">
|
||
<div>
|
||
<label for="md-filter" class="block text-xs text-secondary mb-1">Filter Type</label>
|
||
<select id="md-filter" class="bg-dark border border-border rounded px-2 py-1 text-sm w-full">
|
||
<option value="fit">fit - Adaptive content filtering</option>
|
||
<option value="raw">raw - No filtering</option>
|
||
<option value="bm25">bm25 - BM25 keyword relevance</option>
|
||
<option value="llm">llm - LLM-based filtering</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="md-query" class="block text-xs text-secondary mb-1">Query (for BM25/LLM filters)</label>
|
||
<input id="md-query" type="text" placeholder="Enter search terms or instructions"
|
||
class="bg-dark border border-border rounded px-2 py-1 text-sm w-full">
|
||
</div>
|
||
<div>
|
||
<label for="md-cache" class="block text-xs text-secondary mb-1">Cache Mode</label>
|
||
<select id="md-cache" class="bg-dark border border-border rounded px-2 py-1 text-sm w-full">
|
||
<option value="0">Write-Only (0)</option>
|
||
<option value="1">Enabled (1)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Specific options for /llm endpoint -->
|
||
<details id="llm-options" class="mb-4 hidden">
|
||
<summary class="text-sm text-secondary cursor-pointer">/llm Options</summary>
|
||
<div class="mt-2 space-y-3 p-2 border border-border rounded">
|
||
<div>
|
||
<label for="llm-question" class="block text-xs text-secondary mb-1">Question</label>
|
||
<input id="llm-question" type="text" value="What is this page about?"
|
||
class="bg-dark border border-border rounded px-2 py-1 text-sm w-full">
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Advanced config for /crawl endpoints -->
|
||
<details id="adv-config" class="mb-4">
|
||
<summary class="text-sm text-secondary cursor-pointer">Advanced Config <span
|
||
class="text-xs text-primary">(Python → auto‑JSON)</span></summary>
|
||
|
||
<!-- Toolbar -->
|
||
<div class="flex items-center justify-end space-x-3 mt-2">
|
||
<label for="cfg-type" class="text-xs text-secondary">Type:</label>
|
||
<select id="cfg-type"
|
||
class="bg-dark border border-border rounded px-1 py-0.5 text-xs">
|
||
<option value="CrawlerRunConfig">CrawlerRunConfig</option>
|
||
<option value="BrowserConfig">BrowserConfig</option>
|
||
</select>
|
||
|
||
<!-- help link -->
|
||
<a href="https://docs.crawl4ai.com/api/parameters/"
|
||
target="_blank"
|
||
class="text-xs text-primary hover:underline flex items-center space-x-1"
|
||
title="Open parameter reference in new tab">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||
class="w-4 h-4 fill-current">
|
||
<path d="M13 3h8v8h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H13V3z"/>
|
||
<path d="M5 5h4V3H3v6h2V5zm0 14v-4H3v6h6v-2H5z"/>
|
||
</svg>
|
||
<span>Docs</span>
|
||
</a>
|
||
|
||
<span id="cfg-status" class="text-xs text-secondary ml-2"></span>
|
||
</div>
|
||
|
||
<!-- CodeMirror host -->
|
||
<div id="adv-editor" class="mt-2 border border-border rounded overflow-hidden h-40"></div>
|
||
</details>
|
||
|
||
<div class="flex space-x-2">
|
||
<button id="run-btn" class="bg-primary text-dark px-4 py-2 rounded hover:bg-primarydim font-medium">
|
||
Run (⌘/Ctrl+Enter)
|
||
</button>
|
||
<button id="export-btn" class="border border-border px-4 py-2 rounded hover:bg-surface hidden">
|
||
Export Python Code
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Execution Status -->
|
||
<section id="execution-status" class="hidden bg-surface rounded-lg border border-border p-3 text-sm">
|
||
<div class="flex space-x-4">
|
||
<div id="status-badge" class="flex items-center">
|
||
<span class="w-3 h-3 rounded-full mr-2"></span>
|
||
<span>Ready</span>
|
||
</div>
|
||
<div>
|
||
<span class="text-secondary">Time:</span>
|
||
<span id="exec-time" class="text-light">-</span>
|
||
</div>
|
||
<div>
|
||
<span class="text-secondary">Memory:</span>
|
||
<span id="exec-mem" class="text-light">-</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Response Viewer -->
|
||
<!-- Update the Response Viewer section -->
|
||
<section class="bg-surface rounded-lg border border-border overflow-hidden flex-1 flex flex-col">
|
||
<div class="border-b border-border flex">
|
||
<button data-tab="response" class="tab-btn active px-4 py-2 border-r border-border">Response</button>
|
||
<button data-tab="python" class="tab-btn px-4 py-2 border-r border-border">Python</button>
|
||
<button data-tab="curl" class="tab-btn px-4 py-2">cURL</button>
|
||
</div>
|
||
<div class="flex-1 overflow-auto relative">
|
||
<!-- Response Tab -->
|
||
<div class="tab-content active h-full">
|
||
<div class="absolute right-2 top-2">
|
||
<button class="copy-btn bg-surface border border-border rounded px-2 py-1 text-xs hover:bg-dark"
|
||
data-target="#response-content code">
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<pre id="response-content" class="p-4 text-sm h-full"><code class="json hljs">{}</code></pre>
|
||
</div>
|
||
|
||
<!-- Python Tab -->
|
||
<div class="tab-content hidden h-full">
|
||
<div class="absolute right-2 top-2">
|
||
<button class="copy-btn bg-surface border border-border rounded px-2 py-1 text-xs hover:bg-dark"
|
||
data-target="#python-content code">
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<pre id="python-content" class="p-4 text-sm h-full"><code class="python hljs"></code></pre>
|
||
</div>
|
||
|
||
<!-- cURL Tab -->
|
||
<div class="tab-content hidden h-full">
|
||
<div class="absolute right-2 top-2">
|
||
<button class="copy-btn bg-surface border border-border rounded px-2 py-1 text-xs hover:bg-dark"
|
||
data-target="#curl-content code">
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<pre id="curl-content" class="p-4 text-sm h-full"><code class="bash hljs"></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Stress Test Modal -->
|
||
<div id="stress-modal"
|
||
class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
|
||
<div class="bg-surface rounded-lg border border-accent w-full max-w-3xl max-h-[90vh] flex flex-col">
|
||
<div class="px-4 py-2 border-b border-border flex items-center">
|
||
<h2 class="font-medium text-accent">🔥 Stress Test</h2>
|
||
<button id="close-stress" class="ml-auto text-secondary hover:text-light">×</button>
|
||
</div>
|
||
|
||
<div class="p-4 space-y-4 flex-1 overflow-auto">
|
||
<div class="grid grid-cols-3 gap-4">
|
||
<div>
|
||
<label class="block text-sm mb-1">Total URLs</label>
|
||
<input id="st-total" type="number" value="20"
|
||
class="w-full bg-dark border border-border rounded px-3 py-1">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm mb-1">Chunk Size</label>
|
||
<input id="st-chunk" type="number" value="5"
|
||
class="w-full bg-dark border border-border rounded px-3 py-1">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm mb-1">Concurrency</label>
|
||
<input id="st-conc" type="number" value="2"
|
||
class="w-full bg-dark border border-border rounded px-3 py-1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<input id="st-stream" type="checkbox" class="mr-2">
|
||
<label for="st-stream" class="text-sm">Enable streaming mode</label>
|
||
<button id="st-run"
|
||
class="ml-auto bg-accent text-dark px-4 py-2 rounded hover:bg-opacity-90 font-medium">
|
||
Run Stress Test
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<div class="bg-dark rounded border border-border p-3 h-64 overflow-auto text-sm whitespace-break-spaces"
|
||
id="stress-log"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="px-4 py-2 border-t border-border text-sm text-secondary">
|
||
<div class="flex justify-between">
|
||
<span>Completed: <span id="stress-completed">0</span>/<span id="stress-total">0</span></span>
|
||
<span>Avg. Time: <span id="stress-avg-time">0</span>ms</span>
|
||
<span>Peak Memory: <span id="stress-peak-mem">0</span>MB</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Tab switching
|
||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
|
||
|
||
btn.classList.add('active');
|
||
const tabName = btn.dataset.tab;
|
||
document.querySelector(`#${tabName}-content`).parentElement.classList.remove('hidden');
|
||
|
||
// Re-highlight content when switching tabs
|
||
const activeCode = document.querySelector(`#${tabName}-content code`);
|
||
if (activeCode) {
|
||
forceHighlightElement(activeCode);
|
||
}
|
||
});
|
||
});
|
||
|
||
// View switching
|
||
document.getElementById('play-tab').addEventListener('click', () => {
|
||
document.getElementById('playground').classList.remove('hidden');
|
||
document.getElementById('stress-modal').classList.add('hidden');
|
||
document.getElementById('play-tab').classList.add('bg-surface', 'border-b-0');
|
||
document.getElementById('stress-tab').classList.remove('bg-surface', 'border-b-0');
|
||
});
|
||
|
||
document.getElementById('stress-tab').addEventListener('click', () => {
|
||
document.getElementById('stress-modal').classList.remove('hidden');
|
||
document.getElementById('stress-tab').classList.add('bg-surface', 'border-b-0');
|
||
document.getElementById('play-tab').classList.remove('bg-surface', 'border-b-0');
|
||
});
|
||
|
||
document.getElementById('close-stress').addEventListener('click', () => {
|
||
document.getElementById('stress-modal').classList.add('hidden');
|
||
document.getElementById('play-tab').classList.add('bg-surface', 'border-b-0');
|
||
document.getElementById('stress-tab').classList.remove('bg-surface', 'border-b-0');
|
||
});
|
||
|
||
// Initialize clipboard and highlight.js
|
||
new ClipboardJS('#export-btn');
|
||
hljs.highlightAll();
|
||
|
||
// Keyboard shortcut
|
||
window.addEventListener('keydown', e => {
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||
document.getElementById('run-btn').click();
|
||
}
|
||
});
|
||
|
||
// ================ ADVANCED CONFIG EDITOR ================
|
||
const cm = CodeMirror(document.getElementById('adv-editor'), {
|
||
value: `CrawlerRunConfig(
|
||
stream=True,
|
||
cache_mode=CacheMode.BYPASS,
|
||
)`,
|
||
mode: 'python',
|
||
lineNumbers: true,
|
||
theme: 'darcula',
|
||
tabSize: 4,
|
||
styleActiveLine: true,
|
||
matchBrackets: true,
|
||
gutters: ["CodeMirror-linenumbers"],
|
||
lineWrapping: true,
|
||
});
|
||
|
||
const TEMPLATES = {
|
||
CrawlerRunConfig: `CrawlerRunConfig(
|
||
stream=True,
|
||
cache_mode=CacheMode.BYPASS,
|
||
)`,
|
||
BrowserConfig: `BrowserConfig(
|
||
headless=True,
|
||
extra_args=[
|
||
"--no-sandbox",
|
||
"--disable-gpu",
|
||
],
|
||
)`,
|
||
};
|
||
|
||
document.getElementById('cfg-type').addEventListener('change', (e) => {
|
||
cm.setValue(TEMPLATES[e.target.value]);
|
||
document.getElementById('cfg-status').textContent = '';
|
||
});
|
||
|
||
// Handle endpoint selection change to show appropriate options
|
||
document.getElementById('endpoint').addEventListener('change', function(e) {
|
||
const endpoint = e.target.value;
|
||
const mdOptions = document.getElementById('md-options');
|
||
const llmOptions = document.getElementById('llm-options');
|
||
const advConfig = document.getElementById('adv-config');
|
||
|
||
// Hide all option sections first
|
||
mdOptions.classList.add('hidden');
|
||
llmOptions.classList.add('hidden');
|
||
advConfig.classList.add('hidden');
|
||
|
||
// Show the appropriate section based on endpoint
|
||
if (endpoint === 'md') {
|
||
mdOptions.classList.remove('hidden');
|
||
// Auto-open the /md options
|
||
mdOptions.setAttribute('open', '');
|
||
} else if (endpoint === 'llm') {
|
||
llmOptions.classList.remove('hidden');
|
||
// Auto-open the /llm options
|
||
llmOptions.setAttribute('open', '');
|
||
} else {
|
||
// For /crawl endpoints, show the advanced config
|
||
advConfig.classList.remove('hidden');
|
||
}
|
||
});
|
||
|
||
async function pyConfigToJson() {
|
||
const code = cm.getValue().trim();
|
||
if (!code) return {};
|
||
|
||
const res = await fetch('/config/dump', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ code }),
|
||
});
|
||
|
||
const statusEl = document.getElementById('cfg-status');
|
||
if (!res.ok) {
|
||
const msg = await res.text();
|
||
statusEl.textContent = '✖ config error';
|
||
statusEl.className = 'text-xs text-red-400';
|
||
throw new Error(msg || 'Invalid config');
|
||
}
|
||
|
||
statusEl.textContent = '✓ parsed';
|
||
statusEl.className = 'text-xs text-green-400';
|
||
|
||
return await res.json();
|
||
}
|
||
|
||
// ================ SERVER COMMUNICATION ================
|
||
|
||
// Update status UI
|
||
function updateStatus(status, time, memory, peakMemory) {
|
||
const statusEl = document.getElementById('execution-status');
|
||
const badgeEl = document.querySelector('#status-badge span:first-child');
|
||
const textEl = document.querySelector('#status-badge span:last-child');
|
||
|
||
statusEl.classList.remove('hidden');
|
||
badgeEl.className = 'w-3 h-3 rounded-full mr-2';
|
||
|
||
if (status === 'success') {
|
||
badgeEl.classList.add('bg-green-500');
|
||
textEl.textContent = 'Success';
|
||
} else if (status === 'error') {
|
||
badgeEl.classList.add('bg-red-500');
|
||
textEl.textContent = 'Error';
|
||
} else {
|
||
badgeEl.classList.add('bg-yellow-500');
|
||
textEl.textContent = 'Processing...';
|
||
}
|
||
|
||
if (time) {
|
||
document.getElementById('exec-time').textContent = `${time}ms`;
|
||
}
|
||
|
||
if (memory !== undefined && peakMemory !== undefined) {
|
||
document.getElementById('exec-mem').textContent = `Δ${memory >= 0 ? '+' : ''}${memory}MB (Peak: ${peakMemory}MB)`;
|
||
}
|
||
}
|
||
|
||
// Generate code snippets
|
||
function generateSnippets(api, payload, method = 'POST') {
|
||
// Python snippet
|
||
const pyCodeEl = document.querySelector('#python-content code');
|
||
let pySnippet;
|
||
|
||
if (method === 'GET') {
|
||
// GET request (for /llm endpoint)
|
||
pySnippet = `import httpx\n\nasync def crawl():\n async with httpx.AsyncClient() as client:\n response = await client.get(\n "${window.location.origin}${api}"\n )\n return response.json()`;
|
||
} else {
|
||
// POST request (for /crawl and /md endpoints)
|
||
pySnippet = `import httpx\n\nasync def crawl():\n async with httpx.AsyncClient() as client:\n response = await client.post(\n "${window.location.origin}${api}",\n json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n ')}\n )\n return response.json()`;
|
||
}
|
||
|
||
pyCodeEl.textContent = pySnippet;
|
||
pyCodeEl.className = 'python hljs'; // Reset classes
|
||
forceHighlightElement(pyCodeEl);
|
||
|
||
// cURL snippet
|
||
const curlCodeEl = document.querySelector('#curl-content code');
|
||
let curlSnippet;
|
||
|
||
if (method === 'GET') {
|
||
// GET request (for /llm endpoint)
|
||
curlSnippet = `curl -X GET "${window.location.origin}${api}"`;
|
||
} else {
|
||
// POST request (for /crawl and /md endpoints)
|
||
curlSnippet = `curl -X POST ${window.location.origin}${api} \\\n -H "Content-Type: application/json" \\\n -d '${JSON.stringify(payload)}'`;
|
||
}
|
||
|
||
curlCodeEl.textContent = curlSnippet;
|
||
curlCodeEl.className = 'bash hljs'; // Reset classes
|
||
forceHighlightElement(curlCodeEl);
|
||
}
|
||
|
||
// Detect if stream is requested inside payload
|
||
function shouldUseStream(payload) {
|
||
const toBool = (v) => v === true || (typeof v === 'string' && v.toLowerCase() === 'true');
|
||
const fromCrawler = payload && payload.crawler_config && payload.crawler_config.params && payload.crawler_config.params.stream;
|
||
const direct = payload && payload.stream;
|
||
return toBool(fromCrawler) || toBool(direct);
|
||
}
|
||
|
||
// Main run function
|
||
async function runCrawl() {
|
||
const endpoint = document.getElementById('endpoint').value;
|
||
const urls = document.getElementById('urls').value.trim().split(/\n/).filter(u => u);
|
||
// 1) grab python from CodeMirror, validate via /config/dump
|
||
let advConfig = {};
|
||
try {
|
||
const cfgJson = await pyConfigToJson(); // may throw
|
||
if (Object.keys(cfgJson).length) {
|
||
const cfgType = document.getElementById('cfg-type').value;
|
||
advConfig = cfgType === 'CrawlerRunConfig'
|
||
? { crawler_config: cfgJson }
|
||
: { browser_config: cfgJson };
|
||
}
|
||
} catch (err) {
|
||
const codeText = cm.getValue();
|
||
const streamFlag = /stream\s*=\s*True/i.test(codeText);
|
||
const isCrawlEndpoint = document.getElementById('endpoint').value === 'crawl';
|
||
if (isCrawlEndpoint && streamFlag) {
|
||
// Fallback: proceed with minimal config only for stream
|
||
advConfig = { crawler_config: { stream: true } };
|
||
} else {
|
||
updateStatus('error');
|
||
document.querySelector('#response-content code').textContent =
|
||
JSON.stringify({ error: err.message }, null, 2);
|
||
forceHighlightElement(document.querySelector('#response-content code'));
|
||
return; // stop run
|
||
}
|
||
}
|
||
|
||
const endpointMap = {
|
||
crawl: '/crawl',
|
||
crawl_stream: '/crawl/stream', // Keep for backward compatibility
|
||
md: '/md',
|
||
llm: '/llm'
|
||
};
|
||
|
||
const api = endpointMap[endpoint];
|
||
let payload;
|
||
|
||
// Create appropriate payload based on endpoint type
|
||
if (endpoint === 'md') {
|
||
// Get values from the /md specific inputs
|
||
const filterType = document.getElementById('md-filter').value;
|
||
const query = document.getElementById('md-query').value.trim();
|
||
const cache = document.getElementById('md-cache').value;
|
||
|
||
// MD endpoint expects: { url, f, q, c }
|
||
payload = {
|
||
url: urls[0], // Take first URL
|
||
f: filterType, // Lowercase filter type as required by server
|
||
q: query || null, // Use the query if provided, otherwise null
|
||
c: cache
|
||
};
|
||
} else if (endpoint === 'llm') {
|
||
// LLM endpoint has a different URL pattern and uses query params
|
||
// This will be handled directly in the fetch below
|
||
payload = null;
|
||
} else {
|
||
// Default payload for /crawl (supports both streaming and batch modes)
|
||
payload = {
|
||
urls,
|
||
...advConfig
|
||
};
|
||
}
|
||
|
||
updateStatus('processing');
|
||
|
||
try {
|
||
const startTime = performance.now();
|
||
let response, responseData;
|
||
const useStreamOverride = (endpoint === 'crawl') && shouldUseStream(payload);
|
||
|
||
if (endpoint === 'llm') {
|
||
// Special handling for LLM endpoint which uses URL pattern: /llm/{encoded_url}?q={query}
|
||
const url = urls[0];
|
||
const encodedUrl = encodeURIComponent(url);
|
||
// Get the question from the LLM-specific input
|
||
const question = document.getElementById('llm-question').value.trim() || "What is this page about?";
|
||
|
||
response = await fetch(`${api}/${encodedUrl}?q=${encodeURIComponent(question)}`, {
|
||
method: 'GET',
|
||
headers: { 'Accept': 'application/json' }
|
||
});
|
||
responseData = await response.json();
|
||
const time = Math.round(performance.now() - startTime);
|
||
if (!response.ok) {
|
||
updateStatus('error', time);
|
||
throw new Error(responseData.error || 'Request failed');
|
||
}
|
||
updateStatus('success', time);
|
||
document.querySelector('#response-content code').textContent = JSON.stringify(responseData, null, 2);
|
||
document.querySelector('#response-content code').className = 'json hljs';
|
||
forceHighlightElement(document.querySelector('#response-content code'));
|
||
} else if (endpoint === 'crawl_stream' || useStreamOverride) {
|
||
// Stream processing - now handled directly by /crawl endpoint
|
||
response = await fetch(api, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
const reader = response.body.getReader();
|
||
let text = '';
|
||
let maxMemory = 0;
|
||
|
||
while (true) {
|
||
const { value, done } = await reader.read();
|
||
if (done) break;
|
||
|
||
const chunk = new TextDecoder().decode(value);
|
||
text += chunk;
|
||
|
||
// Process each line for memory updates
|
||
chunk.trim().split('\n').forEach(line => {
|
||
if (!line) return;
|
||
try {
|
||
const obj = JSON.parse(line);
|
||
if (obj.server_memory_mb) {
|
||
maxMemory = Math.max(maxMemory, obj.server_memory_mb);
|
||
}
|
||
} catch (e) {
|
||
console.error('Error parsing stream line:', e);
|
||
}
|
||
});
|
||
}
|
||
|
||
responseData = { stream: text };
|
||
const time = Math.round(performance.now() - startTime);
|
||
updateStatus('success', time, null, maxMemory);
|
||
document.querySelector('#response-content code').textContent = text;
|
||
document.querySelector('#response-content code').className = 'json hljs'; // Reset classes
|
||
forceHighlightElement(document.querySelector('#response-content code'));
|
||
} else {
|
||
// Regular request (handles /crawl and /md)
|
||
response = await fetch(api, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
responseData = await response.json();
|
||
const time = Math.round(performance.now() - startTime);
|
||
|
||
if (!response.ok) {
|
||
updateStatus('error', time);
|
||
throw new Error(responseData.error || 'Request failed');
|
||
}
|
||
|
||
updateStatus(
|
||
'success',
|
||
time,
|
||
responseData.server_memory_delta_mb,
|
||
responseData.server_peak_memory_mb
|
||
);
|
||
|
||
document.querySelector('#response-content code').textContent = JSON.stringify(responseData, null, 2);
|
||
document.querySelector('#response-content code').className = 'json hljs'; // Ensure class is set
|
||
forceHighlightElement(document.querySelector('#response-content code'));
|
||
}
|
||
|
||
forceHighlightElement(document.querySelector('#response-content code'));
|
||
|
||
// For generateSnippets, handle the LLM case specially
|
||
if (endpoint === 'llm') {
|
||
const url = urls[0];
|
||
const encodedUrl = encodeURIComponent(url);
|
||
const question = document.getElementById('llm-question').value.trim() || "What is this page about?";
|
||
generateSnippets(`${api}/${encodedUrl}?q=${encodeURIComponent(question)}`, null, 'GET');
|
||
} else {
|
||
// Use the same API endpoint for both streaming and non-streaming
|
||
generateSnippets(api, payload);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
updateStatus('error');
|
||
document.querySelector('#response-content code').textContent = JSON.stringify(
|
||
{ error: error.message },
|
||
null,
|
||
2
|
||
);
|
||
forceHighlightElement(document.querySelector('#response-content code'));
|
||
}
|
||
}
|
||
|
||
// Stress test function
|
||
async function runStressTest() {
|
||
const total = parseInt(document.getElementById('st-total').value);
|
||
const chunkSize = parseInt(document.getElementById('st-chunk').value);
|
||
const concurrency = parseInt(document.getElementById('st-conc').value);
|
||
const useStream = document.getElementById('st-stream').checked;
|
||
|
||
const logEl = document.getElementById('stress-log');
|
||
logEl.textContent = '';
|
||
|
||
document.getElementById('stress-completed').textContent = '0';
|
||
document.getElementById('stress-total').textContent = total;
|
||
document.getElementById('stress-avg-time').textContent = '0';
|
||
document.getElementById('stress-peak-mem').textContent = '0';
|
||
|
||
const api = '/crawl'; // Always use /crawl - backend handles streaming internally
|
||
const urls = Array.from({ length: total }, (_, i) => `https://httpbin.org/anything/stress-${i}-${Date.now()}`);
|
||
const chunks = [];
|
||
|
||
for (let i = 0; i < urls.length; i += chunkSize) {
|
||
chunks.push(urls.slice(i, i + chunkSize));
|
||
}
|
||
|
||
let completed = 0;
|
||
let totalTime = 0;
|
||
let peakMemory = 0;
|
||
|
||
const processBatch = async (batch, index) => {
|
||
const payload = {
|
||
urls: batch,
|
||
browser_config: {},
|
||
crawler_config: { cache_mode: 'BYPASS', stream: useStream }
|
||
};
|
||
|
||
const start = performance.now();
|
||
let time, memory;
|
||
|
||
try {
|
||
if (useStream) {
|
||
const response = await fetch(api, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
const reader = response.body.getReader();
|
||
let maxMem = 0;
|
||
while (true) {
|
||
const { value, done } = await reader.read();
|
||
if (done) break;
|
||
const text = new TextDecoder().decode(value);
|
||
text.split('\n').forEach(line => {
|
||
try {
|
||
const obj = JSON.parse(line);
|
||
if (obj.server_memory_mb) {
|
||
maxMem = Math.max(maxMem, obj.server_memory_mb);
|
||
}
|
||
} catch { }
|
||
});
|
||
}
|
||
|
||
memory = maxMem;
|
||
} else {
|
||
const response = await fetch(api, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
const data = await response.json();
|
||
memory = data.server_peak_memory_mb;
|
||
}
|
||
|
||
time = Math.round(performance.now() - start);
|
||
peakMemory = Math.max(peakMemory, memory || 0);
|
||
totalTime += time;
|
||
|
||
logEl.textContent += `[${index + 1}/${chunks.length}] ✔ ${time}ms | Peak ${memory}MB\n`;
|
||
} catch (error) {
|
||
time = Math.round(performance.now() - start);
|
||
logEl.textContent += `[${index + 1}/${chunks.length}] ✖ ${time}ms | ${error.message}\n`;
|
||
}
|
||
|
||
completed += batch.length;
|
||
document.getElementById('stress-completed').textContent = completed;
|
||
document.getElementById('stress-peak-mem').textContent = peakMemory;
|
||
document.getElementById('stress-avg-time').textContent = Math.round(totalTime / (index + 1));
|
||
|
||
logEl.scrollTop = logEl.scrollHeight;
|
||
};
|
||
|
||
// Run with concurrency control
|
||
let active = 0;
|
||
let index = 0;
|
||
|
||
return new Promise(resolve => {
|
||
const runNext = () => {
|
||
while (active < concurrency && index < chunks.length) {
|
||
processBatch(chunks[index], index)
|
||
.finally(() => {
|
||
active--;
|
||
runNext();
|
||
});
|
||
active++;
|
||
index++;
|
||
}
|
||
|
||
if (active === 0 && index >= chunks.length) {
|
||
logEl.textContent += '\n✅ Stress test completed\n';
|
||
resolve();
|
||
}
|
||
};
|
||
|
||
runNext();
|
||
});
|
||
}
|
||
|
||
// Event listeners
|
||
document.getElementById('run-btn').addEventListener('click', runCrawl);
|
||
document.getElementById('st-run').addEventListener('click', runStressTest);
|
||
|
||
function forceHighlightElement(element) {
|
||
if (!element) return;
|
||
|
||
// Save current scroll position (important for large code blocks)
|
||
const scrollTop = element.parentElement.scrollTop;
|
||
|
||
// Reset the element
|
||
const text = element.textContent;
|
||
element.innerHTML = text;
|
||
element.removeAttribute('data-highlighted');
|
||
|
||
// Reapply highlighting
|
||
hljs.highlightElement(element);
|
||
|
||
// Restore scroll position
|
||
element.parentElement.scrollTop = scrollTop;
|
||
}
|
||
|
||
// Initialize clipboard for all copy buttons
|
||
function initCopyButtons() {
|
||
document.querySelectorAll('.copy-btn').forEach(btn => {
|
||
new ClipboardJS(btn, {
|
||
text: () => {
|
||
const target = document.querySelector(btn.dataset.target);
|
||
return target ? target.textContent : '';
|
||
}
|
||
}).on('success', e => {
|
||
e.clearSelection();
|
||
// make button text "copied" for 1 second
|
||
const originalText = e.trigger.textContent;
|
||
e.trigger.textContent = 'Copied!';
|
||
setTimeout(() => {
|
||
e.trigger.textContent = originalText;
|
||
}, 1000);
|
||
// Highlight the copied code
|
||
const target = document.querySelector(btn.dataset.target);
|
||
if (target) {
|
||
target.classList.add('highlighted');
|
||
setTimeout(() => {
|
||
target.classList.remove('highlighted');
|
||
}, 1000);
|
||
}
|
||
|
||
}).on('error', e => {
|
||
console.error('Error copying:', e);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Function to initialize UI based on selected endpoint
|
||
function initUI() {
|
||
// Trigger the endpoint change handler to set initial UI state
|
||
const endpointSelect = document.getElementById('endpoint');
|
||
const event = new Event('change');
|
||
endpointSelect.dispatchEvent(event);
|
||
|
||
// Initialize copy buttons
|
||
initCopyButtons();
|
||
}
|
||
|
||
// Initialize on page load
|
||
document.addEventListener('DOMContentLoaded', initUI);
|
||
// Also call it immediately in case the script runs after DOM is already loaded
|
||
if (document.readyState !== 'loading') {
|
||
initUI();
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |