智能网页内容截图工具：AI助力内容提取与可视化

我们每天都会接触到大量的网页内容。然而，如何从这些内容中快速提取关键信息，并有效地进行整理和分享，一直是困扰我们的问题。本文将介绍一款我近期完成的基于AI技术的智能网页内容截图工具，它能够自动分析网页内容，截取重要区域，为用户提供便捷的内容提取与可视化服务。

一、项目背景与价值

在撰写文章或进行学术研究时，我们常常需要从网页中提取关键信息。然而，许多网页内容丰富，需要截图的内容较多，手动截图不仅费时费力，还容易遗漏重要信息。为了解决这一问题，我们开发了一款智能网页内容截图工具，通过AI技术自动分析网页内容，并截取重要区域，提高内容提取的效率和准确性。

二、技术实现

1. 技术选型

本项目采用Python编程语言，结合Streamlit、Playwright、Pillow等库实现。Streamlit用于构建交互式Web应用，Playwright用于网页自动化操作，Pillow用于图像处理。

2. 核心逻辑

（1）数据预处理：从用户输入的URL获取网页内容，并进行初步处理，如去除HTML标签、提取文本等。

（2）核心业务逻辑：使用AI技术分析网页内容，识别关键区域，并生成JSON格式的区域列表。

（3）结果处理：根据区域列表，使用Playwright截取对应区域的截图，并展示给用户。

3. 关键设计决策

（1）使用Playwright进行网页自动化操作，实现快速、稳定的内容提取。

（2）结合Pillow库进行图像处理，确保截图质量。

（3）采用Streamlit构建交互式Web应用，提高用户体验。

三、核心逻辑说明：

class AnalyzeWebPage(Action):
    """分析网页内容的动作"""
    
    PROMPT_TEMPLATE: ClassVar[str] = """分析以下HTML内容，识别包含关键商业和产品信息的区域。将较长的内容区域分成多个独立的小区块。

    重点关注以下内容（每个区域建议不超过一屏幕高度）：
    1. 产品标题区域：
       - 产品名称和简短标语
       - 一句话价值主张
    
    2. 核心特性区域：
       - 识别所有产品功能或特点
       - 每个技术优势说明
       - 所有应用场景
    
    3. 产品亮点：
       - 所有产品优势点
       - 所有核心功能说明
       - 所有用户价值点

    请严格按照以下JSON格式返回结果，不要包含任何其他说明文字：
    [
        {{
            "description": "产品名称和简短标语",
            "selector": "h1.product-title"
        }},
        {{
            "description": "AI自动操作特性介绍",
            "selector": "div.feature-block:nth-child(1)"
        }}
    ]

    注意：
    - 必须返回JSON数组格式
    - 每个区域必须包含 description 和 selector 两个字段
    - 不要返回任何其他格式的内容
    - 不要包含任何解释或说明文字
    
    HTML内容:
    {html_content}
    """
    
    REVIEW_PROMPT: ClassVar[str] = """作为网页内容分析专家，请仔细审查以下已识别的内容区域，并检查是否有遗漏或不准确的地方。

    当前已识别的区域：
    {areas}

    原始HTML内容：
    {html_content}

    请重点检查：
    1. 产品核心信息是否完整（标题、简介、价格等）
    2. 产品特性和功能说明是否完整
    3. 技术规格和参数是否完整
    4. 使用场景和用户价值是否完整
    5. 产品优势和亮点是否完整

    如果发现遗漏，请严格按照以下JSON格式返回完整的区域列表：
    [
        {{
            "description": "区域描述",
            "selector": "CSS选择器"
        }}
    ]

    如果当前区域划分已经完整，直接返回"PASS"。

    注意：
    - 必须返回JSON数组或"PASS"
    - 不要返回任何其他格式的内容
    - 不要包含任何解释或说明文字
    """
    
    name: str = "AnalyzeWebPage"
    
    async def run(self, html_content: str) -> list:
        """实现网页分析逻辑"""
        try:
            # 使用模板分析页面内容
            prompt = self.PROMPT_TEMPLATE.format(html_content=html_content)
            logger.debug(f"发送给AI的提示: {prompt[:200]}...")
            
            try:
                # 添加明确的格式要求
                response = await self._aask(prompt + "\n请严格按照JSON数组格式返回结果，不要包含任何其他内容。")
                logger.debug(f"AI的原始响应: {response}")
            except Exception as e:
                logger.error(f"调用AI接口失败: {str(e)}")
                return self.get_default_areas()
            
            # 尝试从响应中提取JSON部分
            areas = None
            try:
                # 尝试直接解析
                if response and response.strip().startswith("["):
                    areas = json.loads(response.strip())
                # 尝试从代码块中提取
                elif response and "```" in response:
                    code_blocks = response.split("```")
                    for block in code_blocks:
                        block = block.strip()
                        if block.startswith("json"):
                            block = block[4:].strip()
                        try:
                            parsed = json.loads(block)
                            if isinstance(parsed, list):
                                areas = parsed
                                break
                        except:
                            continue
                
                if not areas:
                    logger.warning("无法从响应中提取有效的JSON，使用默认区域")
                    return self.get_default_areas()
                    
            except json.JSONDecodeError as e:
                logger.error(f"JSON解析错误: {str(e)}")
                logger.error(f"尝试解析的文本: {response}")
                return self.get_default_areas()
            except Exception as e:
                logger.error(f"解析过程中的其他错误: {str(e)}")
                logger.error(f"错误类型: {type(e)}")
                logger.error(f"出错时的响应内容: {response}")
                return self.get_default_areas()
            
            # 确保areas不为None后再进行审查
            try:
                logger.info("开始审查区域完整性...")
                reviewed_areas = await self.review_areas(html_content, areas)
                logger.info(f"审查完成，最终区域数量: {len(reviewed_areas)}")
                return reviewed_areas
            except Exception as e:
                logger.error(f"区域审查失败: {str(e)}")
                return areas  # 如果审查失败，返回原始区域
            
        except Exception as e:
            logger.exception(f"分析页面失败: {str(e)}")
            
        # 如果前面的步骤都失败了，返回默认区域
        logger.warning("使用默认区域")
        return self.get_default_areas()

这是最主要的代码部分，用来分析网页内容，该智能体会根据playwright抓取到的网页源码，分析其中的内容部分，做一遍阅读理解，找到内容的重点，然后，选出内容重点所在页面元素的所在父级元素，调用相应的类库，把它渲染成图片，并保存下来。

我还加了一个“审阅选取的区域是否合理完整”的智能体，以及用来截图的工具类。

最后，通过streamlit把结果展示出来，这样，我可以通过预览来决定，那些截图是我想要，我直接用就可以了。

这款工具不仅能够提高内容提取的效率和准确性，还能为用户提供便捷的内容可视化服务。奇奇怪怪的小工具又增加了！但话不多说，你说它是不是也挺使用的啊？

本文由 mdnice 多平台发布