ai-parrot 0.17.2__cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl

parrot/outputs/formats/chart.py

@@ -0,0 +1,436 @@
+from typing import Any, Optional
+from abc import abstractmethod
+import re
+import html
+import uuid
+from pathlib import Path
+from pygments import highlight
+from pygments.lexers.python import PythonLexer
+from pygments.formatters.html import HtmlFormatter
+
+try:
+    from ipywidgets import HTML as IPyHTML
+    IPYWIDGETS_AVAILABLE = True
+except ImportError:
+    IPYWIDGETS_AVAILABLE = False
+
+from .base import BaseRenderer
+
+
+class BaseChart(BaseRenderer):
+    """Base class for chart renderers - extends BaseRenderer with chart-specific methods"""
+
+    @staticmethod
+    def _extract_code(content: str) -> Optional[str]:
+        """Extract Python code from markdown blocks."""
+        pattern = r'```(?:python)?\n(.*?)```'
+        matches = re.findall(pattern, content, re.DOTALL)
+        return matches[0].strip() if matches else None
+
+    @staticmethod
+    def _highlight_code(code: str, theme: str = 'monokai') -> str:
+        """Apply syntax highlighting to code."""
+        try:
+            formatter = HtmlFormatter(style=theme, noclasses=True, cssclass='code')
+            return highlight(code, PythonLexer(), formatter)
+        except ImportError:
+            escaped = html.escape(code)
+            return f'<pre class="code"><code>{escaped}</code></pre>'
+
+    @staticmethod
+    def _wrap_for_environment(content: Any, environment: str) -> Any:
+        """Wrap content based on environment."""
+        if isinstance(content, str) and environment in {'jupyter', 'ipython', 'colab'} and IPYWIDGETS_AVAILABLE:
+                return IPyHTML(value=content)
+        return content
+
+    @staticmethod
+    def _build_code_section(code: str, theme: str, icon: str = "📊") -> str:
+        """Build collapsible code section."""
+        highlighted = BaseChart._highlight_code(code, theme)
+        return f'''
+        <details class="ap-code-accordion">
+            <summary class="ap-code-header">
+                <span>{icon} View Code</span>
+                <span class="ap-toggle-icon">▶</span>
+            </summary>
+            <div class="ap-code-content">
+                {highlighted}
+            </div>
+        </details>
+        '''
+
+    @staticmethod
+    def _render_error(error: str, code: str, theme: str) -> str:
+        """Render error message with code."""
+        highlighted = BaseChart._highlight_code(code, theme)
+        return f'''
+        {BaseChart._get_chart_styles()}
+        <div class="ap-error-container">
+            <h3>⚠️ Chart Generation Error</h3>
+            <p class="ap-error-message">{error}</p>
+            <details class="ap-code-accordion" open>
+                <summary class="ap-code-header">Code with Error</summary>
+                <div class="ap-code-content">{highlighted}</div>
+            </details>
+        </div>
+        '''
+
+    @staticmethod
+    def _get_chart_styles() -> str:
+        """CSS styles specific to charts."""
+        return '''
+        <style>
+            .ap-chart-container {
+                background: white;
+                border-radius: 8px;
+            }
+            .ap-chart-wrapper {
+                min-height: 400px;
+                justify-content: center;
+                align-items: center;
+            }
+            .ap-chart-guidance {
+                background: #f0f4ff;
+                border-left: 4px solid #667eea;
+                padding: 16px 20px;
+                border-radius: 6px;
+            }
+            .ap-chart-guidance h3 {
+                font-size: 16px;
+                font-weight: 600;
+                color: #364152;
+            }
+            .ap-chart-guidance ol {
+                margin: 0 0 0 20px;
+                padding: 0;
+            }
+            .ap-chart-guidance li {
+                margin-bottom: 6px;
+                line-height: 1.4;
+            }
+            .ap-chart-note {
+                background: #fffaf0;
+                border-left: 4px solid #f6ad55;
+                padding: 2px 4px;
+                border-radius: 6px;
+                margin-bottom: 2px;
+                color: #744210;
+                font-size: 14px;
+            }
+            .ap-code-accordion {
+                margin-top: 20px;
+                border: 1px solid #e0e0e0;
+                border-radius: 6px;
+                overflow: hidden;
+            }
+            .ap-code-header {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 12px 20px;
+                cursor: pointer;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-weight: 600;
+                user-select: none;
+            }
+            .ap-code-header:hover {
+                background: linear-gradient(135deg, #5568d3 0%, #653a8e 100%);
+            }
+            .ap-toggle-icon {
+                transition: transform 0.3s ease;
+            }
+            details[open] .ap-toggle-icon {
+                transform: rotate(90deg);
+            }
+            .ap-code-content {
+                background: #272822;
+                padding: 15px;
+                overflow-x: auto;
+            }
+            .ap-code-content pre {
+                margin: 0;
+                font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+                font-size: 13px;
+                line-height: 1.5;
+            }
+            .ap-error-container {
+                background: #fff3cd;
+                border: 1px solid #ffc107;
+                border-radius: 8px;
+                padding: 20px;
+                margin: 20px 0;
+            }
+            .ap-error-message {
+                color: #856404;
+                font-weight: 500;
+                margin: 10px 0;
+            }
+        </style>
+        '''
+
+    def _save_to_disk(self, chart_obj: Any, filename: str = None) -> str:
+        """Save chart to disk for terminal viewing."""
+        if not filename:
+            filename = f"chart_{uuid.uuid4().hex[:8]}.png"
+
+        # Ensure we have a directory
+        # TODO: using a fixed path for now; ideally this should be configurable
+        output_dir = Path("outputs/charts")
+        output_dir.mkdir(parents=True, exist_ok=True)
+
+        filepath = output_dir / filename
+        chart_obj.savefig(str(filepath), bbox_inches='tight', dpi=100)
+        return str(filepath)
+
+    @staticmethod
+    def _build_html_document(
+        chart_content: str,
+        code_section: str = '',
+        title: str = 'AI-Parrot Chart',
+        extra_head: str = '',
+        mode: str = 'partial'
+    ) -> str:
+        """Build HTML document wrapper for charts."""
+        if mode == 'partial':
+            return f'''
+            {BaseChart._get_chart_styles()}
+            <div class="ap-chart-container">
+                <div class="ap-chart-wrapper">
+                    {chart_content}
+                </div>
+            </div>
+            {code_section}
+            '''
+
+        elif mode == 'complete':
+            # Generate unique ID for the container
+            container_id = f"container-{uuid.uuid4().hex[:8]}"
+
+            return f'''<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{title}</title>
+
+    {extra_head}
+
+    <style>
+        .ap-chart-wrapper {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                         'Helvetica Neue', Arial, sans-serif;
+            padding: 5px;
+            line-height: 1.6;
+            box-sizing: border-box;
+        }}
+
+        .ap-chart-wrapper * {{
+            box-sizing: border-box;
+        }}
+
+        .ap-media-container {{
+            max-width: 1200px;
+            margin: 0 auto;
+        }}
+
+        .ap-chart-container {{
+            border-radius: 12px;
+            padding: 5px;
+        }}
+
+        .ap-chart-wrapper {{
+            min-height: 400px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }}
+
+        .ap-code-accordion {{
+            margin-top: 20px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            overflow: hidden;
+            background: white;
+        }}
+
+        .ap-code-header {{
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 14px 20px;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: 600;
+            user-select: none;
+            transition: all 0.3s ease;
+        }}
+
+        .ap-code-header:hover {{
+            background: linear-gradient(135deg, #5568d3 0%, #653a8e 100%);
+        }}
+
+        .ap-toggle-icon {{
+            transition: transform 0.3s ease;
+            font-size: 12px;
+        }}
+
+        details[open] .ap-toggle-icon {{
+            transform: rotate(90deg);
+        }}
+
+        .ap-code-content {{
+            background: #272822;
+            padding: 20px;
+            overflow-x: auto;
+        }}
+
+        .ap-code-content pre {{
+            margin: 0;
+            font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+        }}
+
+        .ap-error-container {{
+            background: #fff3cd;
+            border: 2px solid #ffc107;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }}
+
+        .ap-error-container h3 {{
+            color: #856404;
+            margin-bottom: 10px;
+        }}
+
+        .ap-error-message {{
+            color: #856404;
+            font-weight: 500;
+            margin: 10px 0;
+        }}
+
+        @media (max-width: 768px) {{
+            .ap-chart-wrapper {{
+                padding: 1px;
+            }}
+
+            .ap-chart-container {{
+                padding: 2px;
+            }}
+        }}
+    </style>
+</head>
+<body>
+    <div class="ap-chart-wrapper">
+        <div class="ap-media-container" id="{container_id}">
+            <div class="ap-chart-container">
+                <div class="ap-chart-wrapper">
+                    {chart_content}
+                </div>
+            </div>
+
+            {code_section}
+        </div>
+    </div>
+
+    <script>
+        (function() {{
+            function sendSize() {{
+                const width = document.documentElement.scrollWidth || window.innerWidth;
+                const height = document.documentElement.scrollHeight || window.innerHeight;
+
+                parent.postMessage(
+                    {{
+                        type: "iframe_resize",
+                        width: width,
+                        height: height,
+                        containerId: "{container_id}"
+                    }},
+                    "*"
+                );
+            }}
+
+            // Send initial size
+            sendSize();
+
+            // Detect viewport resize
+            window.addEventListener("resize", sendSize);
+
+            // Detect content changes (e.g., height changes from DOM mutations)
+            const observer = new ResizeObserver(sendSize);
+            observer.observe(document.body);
+
+            // Also observe the container for more precise tracking
+            const container = document.getElementById("{container_id}");
+            if (container) {{
+                observer.observe(container);
+            }}
+        }})();
+    </script>
+</body>
+</html>'''
+
+        else:
+            raise ValueError(f"Invalid mode: {mode}. Must be 'partial' or 'complete'")
+
+    @abstractmethod
+    def _render_chart_content(self, chart_obj: Any, **kwargs) -> str:
+        """
+        Render the chart-specific content (to be embedded in HTML).
+        This should return just the chart div/script, not the full HTML document.
+
+        Each chart renderer must implement this method to generate their
+        specific chart content (Altair vega-embed, Plotly div, etc.)
+        """
+        pass
+
+    def to_html(
+        self,
+        chart_obj: Any,
+        mode: str = 'partial',
+        include_code: bool = False,
+        code: Optional[str] = None,
+        theme: str = 'monokai',
+        title: str = 'AI-Parrot Chart',
+        **kwargs
+    ) -> str:
+        """
+        Convert chart object to HTML.
+
+        Args:
+            chart_obj: Chart object to render
+            mode: 'partial' for embeddable HTML or 'complete' for full document
+            include_code: Whether to include code section
+            code: Python code to display
+            theme: Code highlighting theme
+            title: Document title (for complete mode)
+            **kwargs: Additional parameters passed to _render_chart_content
+
+        Returns:
+            HTML string based on mode
+        """
+        # Get chart-specific content from subclass
+        chart_content = self._render_chart_content(chart_obj, **kwargs)
+
+        # Build code section if requested
+        code_section = ''
+        if include_code and code:
+            code_section = self._build_code_section(
+                code, theme, kwargs.get('icon', '📊')
+            )
+
+        # Get extra head content if provided by subclass
+        extra_head = kwargs.get('extra_head', '')
+
+        # Build final HTML
+        return self._build_html_document(
+            chart_content=chart_content,
+            code_section=code_section,
+            title=title,
+            extra_head=extra_head,
+            mode=mode
+        )

parrot/outputs/formats/d3.py

@@ -0,0 +1,255 @@
+# ai_parrot/outputs/formats/charts/d3.py
+import contextlib
+from typing import Any, Optional, Tuple, Dict, List
+import json
+import html
+import re
+import uuid
+from .base import BaseChart
+from . import register_renderer
+from ...models.outputs import OutputMode
+
+
+D3_SYSTEM_PROMPT = """🚨 CRITICAL – OUTPUT FORMAT IS STRICT 🚨
+
+You are generating **text only** — specifically a single fenced ```json block that contains:
+- "teaching_steps": array of 3–6 short bullets.
+- "javascript": string with **D3 code only** (newlines escaped as \\n).
+- Optional: "notes": short string.
+
+ABSOLUTE RULES
+1) Do **NOT** use any fence other than ```json. Never use ```javascript.
+2) The "javascript" must target **'#chart'** and assume **global d3** (no imports/exports).
+3) **No HTML/CSS**: no <!DOCTYPE>, <html>, <head>, <body>, <script>, <style>, <link>.
+4) Do not include external scripts, ESM imports, require(), module, etc.
+5) If you think HTML is required: **STOP** and instead return the JSON with only D3 code.
+
+🚫 If your output contains any of these substrings, it will be rejected:
+"<!DOCTYPE", "<html", "<head", "<body", "<script", "<link", "<style", "import ", "export ", "require("
+
+✅ EXAMPLE (illustrative):
+```json
+{
+  "teaching_steps": [
+    "Append an SVG into #chart with margins.",
+    "Create time and linear scales.",
+    "Render axes and a line path."
+  ],
+  "javascript": "const margin={top:20,right:20,bottom:30,left:40};\\nconst width=640,height=400;\\nconst svg=d3.select('#chart').append('svg').attr('width',width).attr('height',height);\\n/* more d3 code here */",
+  "notes": "Optional clarifications."
+}
+```
+Remember:
+* Container is always '#chart'.
+* Use the global d3 (no imports).
+* Provide complete, runnable D3 code only (no HTML or script tags).
+"""
+
+
+@register_renderer(OutputMode.D3, system_prompt=D3_SYSTEM_PROMPT)
+class D3Renderer(BaseChart):
+    """Renderer for D3.js visualizations"""
+
+    def execute_code(
+        self,
+        code: str,
+        pandas_tool: "PythonPandasTool | None" = None,
+        execution_state: Optional[Dict[str, Any]] = None,
+        **kwargs,
+    ) -> Tuple[Any, Optional[str]]:
+        """
+        For D3, we don't execute JavaScript - just validate and return it.
+        """
+        try:
+            # Basic validation - check if it looks like D3 code
+            if 'd3.' not in code and 'D3' not in code:
+                return None, "Code doesn't appear to use D3.js (no d3. references found)"
+
+            # Return the code itself as the "chart object"
+            return code, None
+
+        except Exception as e:
+            return None, f"Validation error: {str(e)}"
+
+    def _render_chart_content(
+        self,
+        chart_obj: Any,
+        teaching_steps: Optional[List[str]] = None,
+        notes: Optional[str] = None,
+        **kwargs
+    ) -> str:
+        """Render D3 visualization content."""
+        # chart_obj is the JavaScript code
+        js_code = chart_obj
+        chart_id = f"d3-chart-{uuid.uuid4().hex[:8]}"
+
+        # Replace '#chart' with our specific chart ID
+        js_code = js_code.replace("'#chart'", f"'#{chart_id}'")
+        js_code = js_code.replace('"#chart"', f'"#{chart_id}"')
+        js_code = js_code.replace('`#chart`', f'`#{chart_id}`')
+
+        guidance_sections: List[str] = []
+        if teaching_steps:
+            items = ''.join(f"<li>{html.escape(step)}</li>" for step in teaching_steps)
+            guidance_sections.append(
+                f"""
+        <div class=\"ap-chart-guidance\">
+            <h3>How this chart works</h3>
+            <ol>{items}</ol>
+        </div>
+                """
+            )
+
+        if notes:
+            guidance_sections.append(
+                f"""
+        <div class=\"ap-chart-note\"><strong>Notes:</strong> {html.escape(notes)}</div>
+                """
+            )
+
+        guidance_html = '\n'.join(guidance_sections)
+
+        return f'''
+        {guidance_html}
+        <div id="{chart_id}" style="width: 100%; min-height: 400px;"></div>
+        <script type="text/javascript">
+            (function() {{
+                {js_code}
+            }})();
+        </script>
+        '''
+
+    def to_html(
+        self,
+        chart_obj: Any,
+        mode: str = 'partial',
+        **kwargs
+    ) -> str:
+        """Convert D3 visualization to HTML."""
+        # D3.js library for <head>
+        d3_version = kwargs.get('d3_version', '7')
+        extra_head = f'''
+    <!-- D3.js -->
+    <script src="https://d3js.org/d3.v{d3_version}.min.js"></script>
+        '''
+
+        kwargs['extra_head'] = extra_head
+
+        # Call parent to_html
+        return super().to_html(chart_obj, mode=mode, **kwargs)
+
+    def to_json(self, chart_obj: Any) -> Optional[Dict]:
+        """D3 code doesn't have a JSON representation."""
+        return {
+            'type': 'd3_visualization',
+            'code_length': len(chart_obj),
+            'note': 'D3 visualizations are JavaScript code, not JSON data'
+        }
+
+    async def render(
+        self,
+        response: Any,
+        theme: str = 'monokai',
+        environment: str = 'terminal',
+        export_format: str = 'html',
+        include_code: bool = False,
+        html_mode: str = 'partial',
+        **kwargs
+    ) -> Tuple[Any, Optional[Any]]:
+        """Render D3 visualization."""
+        content = self._get_content(response)
+
+        # Extract payload containing instructions and JavaScript code
+        payload = self._extract_payload(content)
+
+        if not payload:
+            error_msg = (
+                "No D3 payload found in response (expected ```json block with a \"javascript\" field)"
+            )
+            error_html = "<div class='error'>Missing D3 JSON payload in response</div>"
+            return error_msg, error_html
+
+        code = payload['javascript']
+        teaching_steps = payload.get('teaching_steps', [])
+        notes = payload.get('notes')
+
+        # "Execute" (validate) code
+        js_code, error = self.execute_code(code)
+
+        if error:
+            error_html = self._render_error(error, code, theme)
+            return code, error_html
+
+        # Generate HTML
+        render_kwargs = dict(kwargs)
+        title = render_kwargs.pop('title', 'D3 Visualization')
+        render_kwargs['teaching_steps'] = teaching_steps
+        if notes:
+            render_kwargs['notes'] = notes
+
+        html_output = self.to_html(
+            js_code,
+            mode=html_mode,
+            include_code=include_code,
+            code=code,
+            theme=theme,
+            title=title,
+            icon='📊',
+            **render_kwargs
+        )
+
+        # Return (code, html)
+        return code, html_output
+
+    @staticmethod
+    def _extract_payload(content: str) -> Optional[Dict[str, Any]]:
+        """Extract a D3 payload from raw JSON, ```json fences, ```javascript fences, or HTML <script> tags."""
+        # 0) Fast path: raw JSON body (no fences)
+        with contextlib.suppress(Exception):
+            raw = json.loads(content)
+            if isinstance(raw, dict):
+                js = raw.get("javascript") or raw.get("code")
+                if isinstance(js, str) and js.strip():
+                    steps = raw.get("teaching_steps") or []
+                    notes = raw.get("notes")
+                    return {
+                        "javascript": js.strip(),
+                        "teaching_steps": [str(s).strip() for s in steps if str(s).strip()] if isinstance(steps, list) else [],
+                        "notes": notes.strip() if isinstance(notes, str) else None,
+                    }
+
+        # 1) Markdown ```json fences (case-insensitive)
+        for block in re.findall(r'```json\s*(.*?)```', content, re.DOTALL | re.IGNORECASE):
+            try:
+                obj = json.loads(block)
+            except Exception:
+                continue
+            if isinstance(obj, dict):
+                js = obj.get("javascript") or obj.get("code")
+                if isinstance(js, str) and js.strip():
+                    steps = obj.get("teaching_steps") or []
+                    notes = obj.get("notes")
+                    return {
+                        "javascript": js.strip(),
+                        "teaching_steps": [str(s).strip() for s in steps if str(s).strip()] if isinstance(steps, list) else [],
+                        "notes": notes.strip() if isinstance(notes, str) else None,
+                    }
+
+        # 2) Markdown ```javascript / ```js fences → salvage as JS
+        for js in re.findall(r'```(?:javascript|js)\s*(.*?)```', content, re.DOTALL | re.IGNORECASE):
+            js = js.strip()
+            if not js:
+                continue
+            # If a full HTML doc was embedded in the fence, extract inner <script> contents
+            if "<script" in js or "<!DOCTYPE" in js or "<html" in js:
+                scripts = re.findall(r'<script[^>]*>([\s\S]*?)</script>', js, re.IGNORECASE)
+                js = "\n".join(s.strip() for s in scripts if s.strip()) or js
+            return {"javascript": js, "teaching_steps": [], "notes": None}
+
+        # 3) Raw HTML with <script>…</script>
+        if "<script" in content:
+            scripts = re.findall(r'<script[^>]*>([\s\S]*?)</script>', content, re.IGNORECASE)
+            if js := "\n".join(s.strip() for s in scripts if s.strip()):
+                return {"javascript": js, "teaching_steps": [], "notes": None}
+
+        return None