htmlgen-mcp 0.2.0__py3-none-any.whl

agents/web_tools/images_fixed.py

@@ -0,0 +1,195 @@
+"""修复后的图片生成与注入工具"""
+from __future__ import annotations
+
+import html
+import json
+import os
+import re
+import urllib.parse
+import urllib.request
+from collections import OrderedDict
+from pathlib import Path
+
+
+def inject_images_fixed(
+    file_path: str,
+    provider: str = "pollinations",
+    topics: list | str | None = None,
+    size: str = "800x600",
+    seed: str | int | None = None,
+    save: bool = True,
+    subdir: str = "assets/images",
+    prefix: str = "bg",
+) -> str:
+    """修复版本的图片注入函数
+
+    专门修复原版本中的以下问题：
+    1. 占位符URL损坏
+    2. 重复的img标签
+    3. 图片下载失败
+    4. HTML结构混乱
+    """
+    try:
+        with open(file_path, "r", encoding="utf-8") as f:
+            content = f.read()
+
+        # 解析尺寸
+        try:
+            w, h = [int(x) for x in str(size).lower().replace("*", "x").split("x")[:2]]
+        except Exception:
+            w, h = 800, 600
+
+        # 统一处理topics
+        if topics is None:
+            topics = []
+        elif isinstance(topics, str):
+            if topics.startswith("["):
+                try:
+                    topics = json.loads(topics)
+                except Exception:
+                    topics = [t.strip() for t in topics.split(",") if t.strip()]
+            else:
+                topics = [t.strip() for t in topics.split(",") if t.strip()]
+
+        # 如果没有提供topics，使用默认的运势相关主题
+        if not topics:
+            topics = [
+                "scorpio constellation night sky stars",
+                "mystic tarot cards purple background",
+                "golden astrology symbols",
+                "crystal ball fortune telling",
+                "zodiac wheel cosmic background"
+            ]
+
+        def build_url(topic: str, idx: int) -> tuple[str, str | None]:
+            """构建图片URL并可选下载"""
+            # 清理topic，避免包含HTML或特殊字符
+            clean_topic = re.sub(r'[<>"\']', '', str(topic)).strip()
+            clean_topic = clean_topic[:50]  # 限制长度
+
+            if not clean_topic:
+                clean_topic = f"image-{idx + 1}"
+
+            topic_encoded = urllib.parse.quote_plus(clean_topic)
+
+            if provider.lower() in ("pollinations", "poll"):
+                url = f"https://image.pollinations.ai/prompt/{topic_encoded}?width={w}&height={h}&seed={seed or idx}"
+                ext = "jpg"
+            elif provider.lower() in ("dicebear", "avatar"):
+                url = f"https://api.dicebear.com/7.x/bottts/svg?seed={topic_encoded}"
+                ext = "svg"
+            elif provider.lower() in ("robohash", "robo"):
+                url = f"https://robohash.org/{topic_encoded}.png?size={w}x{h}"
+                ext = "png"
+            else:
+                # 默认使用pollinations
+                url = f"https://image.pollinations.ai/prompt/{topic_encoded}?width={w}&height={h}&seed={seed or idx}"
+                ext = "jpg"
+
+            saved_path = None
+            if save:
+                try:
+                    root = Path(file_path).parent
+                    out_dir = root / subdir
+                    out_dir.mkdir(parents=True, exist_ok=True)
+                    out_file = out_dir / f"{prefix}-{idx + 1}.{ext}"
+
+                    # 下载图片
+                    with urllib.request.urlopen(url, timeout=15) as resp:
+                        data = resp.read()
+                    with open(out_file, "wb") as fo:
+                        fo.write(data)
+                    saved_path = str(out_file)
+                except Exception as e:
+                    print(f"下载图片失败: {e}")
+                    saved_path = None
+
+            return url, saved_path
+
+        def build_clean_placeholder(topic: str, idx: int) -> str:
+            """构建干净的占位符URL"""
+            clean_topic = re.sub(r'[<>"\']', '', str(topic)).strip()
+            clean_topic = clean_topic[:20] if clean_topic else f"image-{idx + 1}"
+            encoded = urllib.parse.quote_plus(clean_topic)
+            return f"https://placehold.co/{w}x{h}/444/fff?text={encoded}"
+
+        # 清理现有的损坏图片标签
+        # 移除所有包含损坏URL的img标签
+        content = re.sub(r'<img[^>]*?placehold\.co/&lt;re\.Match[^>]*?>', '', content, flags=re.IGNORECASE | re.DOTALL)
+
+        # 移除重复的空img标签
+        content = re.sub(r'<img[^>]*?data-topic="image-\d+"[^>]*?>\s*', '', content, flags=re.IGNORECASE)
+
+        # 寻找需要插入图片的位置
+        # 1. 首先处理hero背景图
+        hero_match = re.search(r'(<section[^>]*?class="[^"]*hero-section[^"]*"[^>]*>)', content, re.IGNORECASE)
+        if hero_match and topics:
+            url, saved = build_url(topics[0], 0)
+            target_url = saved or url
+            old_section = hero_match.group(1)
+
+            # 更新背景图片
+            bg_style = f"background-image: url('{target_url}'); background-size: cover; background-position: center; background-repeat: no-repeat;"
+
+            if 'style=' in old_section:
+                new_section = re.sub(r'style="([^"]*)"', lambda m: f'style="{m.group(1)}; {bg_style}"', old_section)
+            else:
+                new_section = old_section.replace('>', f' style="{bg_style}">')
+
+            content = content.replace(old_section, new_section)
+
+        # 2. 为每个卡片添加图片
+        card_pattern = r'(<div[^>]*?class="[^"]*card[^"]*"[^>]*>)\s*(<div[^>]*?class="[^"]*card-body[^"]*"[^>]*>)'
+        cards = list(re.finditer(card_pattern, content, re.IGNORECASE))
+
+        offset = 0
+        for i, match in enumerate(cards):
+            if i + 1 < len(topics):
+                topic = topics[i + 1]
+            else:
+                topic = f"mystical fortune symbol {i + 1}"
+
+            url, saved = build_url(topic, i + 1)
+            target_url = saved or url
+            placeholder = build_clean_placeholder(topic, i + 1)
+
+            # 创建图片标签
+            img_tag = f'''<img src="{target_url}" alt="{topic}" class="card-img-top" style="height: 200px; object-fit: cover;" loading="lazy" onerror="this.src='{placeholder}'">'''
+
+            # 插入到card-body之前
+            insert_pos = match.end(1) + offset
+            content = content[:insert_pos] + '\n        ' + img_tag + '\n        ' + content[insert_pos:]
+            offset += len(img_tag) + 10  # 考虑换行和缩进
+
+        # 保存修复后的文件
+        with open(file_path, "w", encoding="utf-8") as f:
+            f.write(content)
+
+        return f"图片注入完成: 处理了 {len(cards) + 1} 个位置 (hero + {len(cards)} 张卡片图)"
+
+    except Exception as e:
+        return f"图片注入失败: {str(e)}"
+
+
+if __name__ == "__main__":
+    # 测试函数
+    test_file = "/Users/fengjinchao/Desktop/2/html/scorpio-daily-fortune/index.html"
+    result = inject_images_fixed(
+        test_file,
+        provider="pollinations",
+        topics=[
+            "scorpio constellation night sky stars mystical",
+            "love heart tarot cards romantic fortune",
+            "business career success symbols gold",
+            "money coins financial luck prosperity",
+            "lucky colors yellow golden sunshine",
+            "lucky numbers 2 mystical numerology",
+            "compass north direction feng shui",
+            "clock time 18:00 evening golden hour"
+        ],
+        size="800x600",
+        save=True,
+        subdir="assets/images",
+        prefix="scorpio"
+    )
+    print(result)

agents/web_tools/js.py

@@ -0,0 +1,235 @@
+"""JavaScript 脚本生成工具"""
+from __future__ import annotations
+
+from pathlib import Path
+
+
+def create_js_file(file_path: str, content: str = ""):
+    """创建JavaScript文件；自动创建父级目录"""
+    js_template = f"""// 页面加载完成后执行
+document.addEventListener('DOMContentLoaded', function() {{
+  // Smooth scroll 由 CSS scroll-behavior 支持，这里补充导航折叠与激活态处理
+  const navLinks = document.querySelectorAll('.navbar a.nav-link[href^="#"]');
+  navLinks.forEach(link => {{
+    link.addEventListener('click', () => {{
+      const navbarCollapse = document.querySelector('.navbar .navbar-collapse');
+      if (navbarCollapse && navbarCollapse.classList.contains('show')) {{
+        const toggler = document.querySelector('.navbar .navbar-toggler');
+        toggler && toggler.click();
+      }}
+    }});
+  }});
+
+  // 简易 ScrollSpy
+  const sections = Array.from(document.querySelectorAll('section[id]'));
+  const onScroll = () => {{
+    let activeId = null;
+    const scrollY = window.scrollY + 120; // 预留导航高度
+    sections.forEach(sec => {{
+      const rect = sec.getBoundingClientRect();
+      const top = window.scrollY + rect.top;
+      if (scrollY >= top) activeId = sec.id;
+    }});
+    if (activeId) {{
+      navLinks.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + activeId));
+    }}
+
+    // 玻璃态导航滚动态
+    const nav = document.querySelector('.navbar-glass');
+    if (nav) {{
+      nav.classList.toggle('scrolled', window.scrollY > 10);
+    }}
+  }};
+  window.addEventListener('scroll', onScroll, {{ passive: true }});
+  onScroll();
+
+  // Reveal 动画
+  const reveals = document.querySelectorAll('.reveal');
+  if ('IntersectionObserver' in window) {{
+    const io = new IntersectionObserver(entries => {{
+      entries.forEach(e => {{ if (e.isIntersecting) e.target.classList.add('revealed'); }});
+    }}, {{ threshold: 0.1 }});
+    reveals.forEach(el => io.observe(el));
+  }} else {{
+    reveals.forEach(el => el.classList.add('revealed'));
+  }}
+
+  // 主题切换（明/暗）
+  const applyTheme = (theme) => {{
+    const html = document.documentElement;
+    if (theme === 'dark') html.setAttribute('data-theme', 'dark');
+    else html.removeAttribute('data-theme');
+  }};
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {{
+    applyTheme(savedTheme);
+  }} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {{
+    applyTheme('dark');
+  }}
+  const toggleBtn = document.querySelector('[data-action="toggle-theme"]');
+  toggleBtn && toggleBtn.addEventListener('click', () => {{
+    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    const next = isDark ? 'light' : 'dark';
+    localStorage.setItem('theme', next);
+    applyTheme(next);
+  }});
+
+  // 统计数字动画
+  const counters = document.querySelectorAll('.counter[data-target]');
+  const animateCounter = (el) => {{
+    const target = parseFloat(el.getAttribute('data-target')) || 0;
+    const duration = 1200;
+    const startTime = performance.now();
+    const startVal = 0;
+    const step = (now) => {{
+      const p = Math.min(1, (now - startTime) / duration);
+      const eased = p < 0.5 ? 2*p*p : -1 + (4 - 2*p)*p; // easeInOutQuad
+      const val = Math.floor(startVal + (target - startVal) * eased);
+      el.textContent = val.toString();
+      if (p < 1) requestAnimationFrame(step);
+    }};
+    requestAnimationFrame(step);
+  }};
+  if ('IntersectionObserver' in window) {{
+    const co = new IntersectionObserver(entries => {{
+      entries.forEach(e => {{ if (e.isIntersecting) {{ animateCounter(e.target); co.unobserve(e.target); }} }});
+    }}, {{ threshold: 0.4 }});
+    counters.forEach(el => co.observe(el));
+  }} else {{
+    counters.forEach(el => animateCounter(el));
+  }}
+
+  // AI 图片占位兜底（即使未执行 inject_images，也能避免破图）
+  const placeholderSVG = (text = 'Image') => {{
+    const svg = "<?xml version='1.0' encoding='UTF-8'?>" +
+      "<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'>" +
+      "<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>" +
+      "<stop offset='0%' stop-color='rgba(13,110,253,0.15)'/>" +
+      "<stop offset='100%' stop-color='rgba(102,16,242,0.15)'/></linearGradient></defs>" +
+      "<rect width='100%' height='100%' fill='url(#g)'/>" +
+      "<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='#99a2b3' font-size='24' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial'>" +
+      text +
+      "</text></svg>";
+    return "data:image/svg+xml;utf8," + encodeURIComponent(svg);
+  }};
+
+  const phImg = placeholderSVG('Image');
+  document.querySelectorAll('img[data-topic]').forEach(img => {{
+    if (!img.getAttribute('src')) img.setAttribute('src', phImg);
+    img.onerror = () => {{ img.setAttribute('src', phImg); }};
+  }});
+  document.querySelectorAll('[data-bg-topic]').forEach(el => {{
+    const cs = window.getComputedStyle(el);
+    const hasBg = cs.backgroundImage && cs.backgroundImage !== 'none';
+    if (!hasBg) {{
+      el.style.backgroundImage = 'linear-gradient(135deg, rgba(13,110,253,.15) 0%, rgba(102,16,242,.15) 100%)';
+      el.style.backgroundSize = 'cover';
+      el.style.backgroundPosition = 'center';
+      if (!el.style.minHeight) el.style.minHeight = '220px';
+    }}
+  }});
+
+  // 视差滚动（基于 data-parallax）
+  const parallaxNodes = Array.from(document.querySelectorAll('[data-parallax]'));
+  if (parallaxNodes.length) {{
+    const updateParallax = () => {{
+      const scrollY = window.scrollY || window.pageYOffset;
+      parallaxNodes.forEach(node => {{
+        const speed = parseFloat(node.getAttribute('data-parallax')) || 0.18;
+        const rect = node.getBoundingClientRect();
+        const offset = (scrollY + rect.top) * speed * -1;
+        node.style.setProperty('--parallax-offset', `${{offset.toFixed(2)}}px`);
+      }});
+    }};
+    updateParallax();
+    window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), {{ passive: true }});
+    window.addEventListener('resize', () => requestAnimationFrame(updateParallax));
+  }}
+
+  // 轻量 3D 倾斜效果（data-tilt）
+  const tiltNodes = Array.from(document.querySelectorAll('[data-tilt]'));
+  tiltNodes.forEach(node => {{
+    const strength = parseFloat(node.getAttribute('data-tilt-strength')) || 10;
+    const damp = parseFloat(node.getAttribute('data-tilt-damping')) || 0.12;
+    let currentX = 0;
+    let currentY = 0;
+    let frame;
+
+    const animate = () => {{
+      node.style.setProperty('--tilt-rotate-x', `${{currentY.toFixed(3)}}deg`);
+      node.style.setProperty('--tilt-rotate-y', `${{currentX.toFixed(3)}}deg`);
+      frame = requestAnimationFrame(animate);
+    }};
+
+    const handlePointerMove = (event) => {{
+      const rect = node.getBoundingClientRect();
+      const relX = (event.clientX - rect.left) / rect.width;
+      const relY = (event.clientY - rect.top) / rect.height;
+      const targetX = (relX - 0.5) * strength;
+      const targetY = (0.5 - relY) * strength;
+      currentX = currentX + (targetX - currentX) * damp;
+      currentY = currentY + (targetY - currentY) * damp;
+    }};
+
+    const resetTilt = () => {{
+      currentX = 0;
+      currentY = 0;
+    }};
+
+    node.addEventListener('pointerenter', () => {{
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(animate);
+    }});
+    node.addEventListener('pointermove', handlePointerMove);
+    node.addEventListener('pointerleave', () => {{
+      resetTilt();
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(animate);
+      setTimeout(() => cancelAnimationFrame(frame), 180);
+    }});
+    node.addEventListener('pointerup', resetTilt);
+  }});
+
+  // 噪点背景（data-canvas="noise"）
+  const noiseCanvas = document.querySelector('[data-canvas="noise"]');
+  if (noiseCanvas) {{
+    const ctx = noiseCanvas.getContext('2d');
+    const renderNoise = () => {{
+      const {{ width, height }} = noiseCanvas.parentElement.getBoundingClientRect();
+      noiseCanvas.width = Math.max(320, Math.round(width));
+      noiseCanvas.height = Math.max(320, Math.round(height));
+      const imageData = ctx.createImageData(noiseCanvas.width, noiseCanvas.height);
+      const buffer = imageData.data;
+      for (let i = 0; i < buffer.length; i += 4) {{
+        const value = Math.random() * 255;
+        buffer[i] = value;
+        buffer[i + 1] = value;
+        buffer[i + 2] = value;
+        buffer[i + 3] = Math.random() * 50 + 30;
+      }}
+      ctx.putImageData(imageData, 0, 0);
+    }};
+    renderNoise();
+    window.addEventListener('resize', () => requestAnimationFrame(renderNoise));
+  }}
+
+  {content if content else '// 在这里添加你的JavaScript代码'}
+}});
+
+// 工具函数
+function $(selector) {{ return document.querySelector(selector); }}
+function $$(selector) {{ return document.querySelectorAll(selector); }}
+"""
+
+    try:
+        # 确保父目录存在
+        Path(file_path).parent.mkdir(parents=True, exist_ok=True)
+        with open(file_path, "w", encoding="utf-8") as f:
+            f.write(js_template)
+        return f"JavaScript文件创建成功: {file_path}"
+    except Exception as e:
+        raise RuntimeError(f"创建JavaScript文件失败: {str(e)}")
+
+
+
+__all__ = ["create_js_file"]