尧图网页设计 
从网页截图到图文问答基于 ColiVara 与 DeepSeek Janus-Pro 的多模态网站 RAG 实战【免费下载链接】ai-engineering-hubIn-depth tutorials on LLMs, RAGs and real-world AI agent applications.项目地址: https://gitcode.com/GitHub_Trending/ai/ai-engineering-hub本文以 Colivara-deepseek-website-RAG 项目为蓝本系统讲解如何将任意网页抓取为截图、切片成 PDF、交给 ColiVara 完成多模态索引与检索最终由 DeepSeek 的多模态模型 Janus-Pro 结合图片上下文生成回答的完整链路。读完本文你将掌握一套「网页级多模态 RAG」的工程实现既能理解环境搭建、API 配置与一键启动方式也能从 app.py 与 rag_code.py 的源码级视角看懂 Firecrawl、ColiVara、Janus-Pro 三者之间真实的调用关系与关键参数。项目概览四个组件构成的网页级多模态 RAG传统 RAG 只处理纯文本而网页内容天然包含版式、图表、截图等视觉信息。本项目把「网页」这一非结构化输入完整地转换为图像证据再走「检索 → 多模态生成」的路线形成一套无需清洗 HTML 文本即可直接问答的方案。项目共使用四类工具各司其职组件职责在本项目中的角色DeepSeek Janus-Pro多模态大模型理解检索到的网页截图结合图片内容生成答案ColiVara文档理解与检索对 PDF网页截图切片建索引按语义召回最相关图片Firecrawl网页抓取将目标网页渲染为整页截图fullPage screenshotStreamlitWeb 界面提供侧边栏配置、PDF 预览与流式对话聊天 UI项目还提供了一份演示视频可以直接查看从输入 URL 到对话出结果的真实运行效果。环境准备与安装安装 DeepSeek JanusJanus-Pro 是 DeepSeek 推出的多模态模型需要先从官方仓库克隆并做本地可编辑安装注意请将下述命令中的仓库地址替换为你实际可访问的 DeepSeek 官方 Janus 仓库地址git clone https://github.com/deepseek-ai/Janus.git pip install -e ./Janus这一步至关重要rag_code.py 顶部直接以包的形式导入了 Janus 仓库内的代码from Janus.janus.models import MultiModalityCausalLM, VLChatProcessor from Janus.janus.utils.io import load_pil_images其中VLChatProcessor负责把「对话消息 图片」编码为模型输入load_pil_images负责从对话结构中取出 PIL 图片列表。如果跳过 Janus 的安装步骤运行时导入会直接失败。安装 Python 依赖官方要求 Python 3.11 或更高版本然后执行pip install streamlit-pdf-viewer colivara-py streamlit fastembed flash-attn transformers各依赖用途如下colivara-pyColiVara 官方 Python SDK用于创建集合、上传文档、执行检索streamlitWeb 界面框架streamlit-pdf-viewer在 Streamlit 侧边栏内嵌渲染 PDFtransformers加载 Hugging Face 上的 Janus-Pro 权重AutoModelForCausalLM.from_pretrainedflash-attn加速注意力计算提升推理速度fastembedColiVara 生态常用的嵌入组件依赖。需要补充说明的是从 app.py 的实际导入语句看运行时还会用到以下几个未出现在上述 pip 列表中的包请一并确保已安装from pdf2image import convert_from_path # 依赖系统级 poppler 工具 from fpdf import FPDF # fpdf2用于切片生成 PDF from firecrawl import FirecrawlApp # Firecrawl 官方 SDK from dotenv import load_dotenv # 读取 .env from PIL import Image # 图片裁剪 import requests # 下载截图配置 API 密钥本项目需要两个云服务密钥ColiVara文档理解与检索和 Firecrawl网页抓取。在项目根目录创建.env文件并写入COLIVARA_API_KEYCOLIVARA-API-KEY FIRECRAWL_API_KEYFIRECRAWL-API-KEYapp.py 通过load_dotenv()加载该文件随后用os.getenv(COLIVARA_API_KEY)与os.getenv(FIRECRAWL_API_KEY)读取并注入 FirecrawlApp 与 ColiVara 客户端。启动项目完成上述三步后一行命令即可启动streamlit run app.py启动后浏览器会打开 Streamlit 界面侧边栏输入网页 URL、点击Start RAG系统便会自动完成「抓取 → 切 PDF → 建索引」三步预处理之后即可在底部输入框开始图文问答并支持Clear ↺按钮重置会话。源码解读一次「网页 → 问答」的完整旅程下面沿着 app.py 与 rag_code.py 的实际代码拆解整条数据流。第一步Firecrawl 全页截图点击 Start RAG 后app.py 会实例化 FirecrawlApp 并抓取目标网页app FirecrawlApp(api_keyos.getenv(FIRECRAWL_API_KEY)) scrape_result app.scrape_url(url_input, params{formats: [screenshotfullPage], waitFor: 10000})两个关键参数值得注意formats: [screenshotfullPage]要求 Firecrawl 返回整页截图而不是只截首屏从而保证长网页的内容不被截断waitFor: 10000等待 10 秒再截图给前端 JavaScript 渲染尤其是懒加载内容留出时间避免截到空白页。第二步截图切片生成 PDFColiVara 的文档理解面向 PDF因此需要把一张超长网页截图转成 PDF。create_pdf_from_screenshot 的实现思路是垂直均分为 10 片slice_height math.ceil(height / 10) # 每片高度 总高 / 10 pdf FPDF(unitpt, format[width, slice_height]) # 每页大小与切片一致 pdf.set_auto_page_break(autoFalse) # 关闭自动分页 for i in range(10): top i * slice_height bottom min((i 1) * slice_height, height) slice_img image.crop((0, top, width, bottom)) # 逐片裁剪 pdf.add_page() pdf.image(temp_filename, x0, y0, wwidth, hbottom-top)这里的工程细节是每片对应 PDF 的一页页尺寸严格贴合切片的长宽比同时关闭auto_page_break避免内容被系统自动分页再次切割而失真。最后输出screenshot_slices.pdf供后续索引。第三步ColiVara 集合创建与文档索引得到 PDF 后app.py 初始化 ColiVara 客户端并完成两级写入rag_client ColiVara(api_keyos.getenv(COLIVARA_API_KEY)) new_collection rag_client.create_collection( namest.session_state.collection_name, metadata{description: Webpage screenshots} ) document rag_client.upsert_document( collection_namest.session_state.collection_name, namewebpage_document, document_pathst.session_state.pdf_path )create_collection创建专属集合集合名由uuid生成webpage_collection str(session_id)见 app.py避免多次会话互相污染upsert_document上传 PDFColiVara 在服务端完成版面分析、文本与视觉信息提取建立多模态索引。值得强调的是本项目把会话级缓存也考虑了进去st.session_state.file_cache以{session_id}-webpage.pdf为 key 缓存已建好的 query_engine同一会话重复点击不会重复建索引app.py。第四步Retriever 检索与图片召回检索逻辑封装在 rag_code.py 的Retriever类中class Retriever: def search(self, query): results self.rag_client.search( queryquery, collection_nameself.collection_name, top_k3 ) related_image results.results[0].img_base64 # 取最相关的一张 image_data base64.b64decode(related_image) image Image.open(io.BytesIO(image_data)) image.save(tempfile.jpeg) return tempfile.jpeg关键点top_k3召回 3 个候选但最终只取results[0]即最相关的一张作为上下文图片召回结果直接以img_base64形式返回无需再次下载解码后落盘为tempfile.jpeg供多模态模型读取这说明 ColiVara 检索返回的不只是「文本片段」而是图片本身——这是本项目区别于文本 RAG 的核心差异。第五步Janus-Pro 多模态生成生成侧由 rag_code.py 的RAG类完成。模型默认使用deepseek-ai/Janus-Pro-1B初始化时加载权重并转为 bfloat16 精度class RAG: def __init__(self, retriever, llm_namedeepseek-ai/Janus-Pro-1B): self._setup_llm() def _setup_llm(self): self.vl_chat_processor VLChatProcessor.from_pretrained( self.llm_name, cache_dir./Janus/hf_cache) self.tokenizer self.vl_chat_processor.tokenizer self.vl_gpt AutoModelForCausalLM.from_pretrained( self.llm_name, trust_remote_codeTrue, cache_dir./Janus/hf_cache).to(torch.bfloat16).eval()query()方法把检索到的图片与用户问题拼装为 Janus 的对话格式qa_prompt_tmpl_str fThe user has asked the following question: Query: {query} Some images are available to you for this question. You have to understand these images thoroughly and extract all relevant information that will help you answer the query. conversation [ {role: User, content: fimage_placeholder \n {qa_prompt_tmpl_str}, images: [image_context]}, {role: Assistant, content: }, ]随后经过load_pil_images→vl_chat_processor(...)编码 →prepare_inputs_embeds组装图像与文本 embedding → 语言模型生成outputs self.vl_gpt.language_model.generate( inputs_embedsinputs_embeds, attention_maskprepare_inputs.attention_mask, pad_token_idself.tokenizer.eos_token_id, bos_token_idself.tokenizer.bos_token_id, eos_token_idself.tokenizer.eos_token_id, max_new_tokens512, do_sampleFalse, use_cacheTrue, )这里隐含了几个可调参数max_new_tokens512答案最长生成 512 个 tokendo_sampleFalse使用贪心解码输出确定性更强use_cacheTrue启用 KV Cache 加速prompt 模板明确要求模型先彻底理解图片再回答将“读图”这一指令固化进系统提示。最后app.py 在 Streamlit 端以流式方式逐 chunk 渲染回答带▌光标效果形成完整的对话体验。关键参数速查表参数位置默认值作用与调优建议waitForapp.py10000ms等待页面 JS 渲染动态站点可调大静态站可调小以提速formatsapp.pyscreenshotfullPage整页截图保证长页内容完整切片数量app.py10 片切片越多单页越高清但 PDF 体积与索引耗时同步上升top_krag_code.py3召回候选数最终只取 top-1 图片可修改为多图拼接上下文llm_namerag_code.pydeepseek-ai/Janus-Pro-1B可换成更大规格的 Janus-Pro 权重按显存权衡精度rag_code.pybfloat16兼顾显存与精度显存充足时可试 fp16 或原始精度max_new_tokensrag_code.py512需要长答案时可调大cache_dirrag_code.py./Janus/hf_cache模型权重缓存目录注意预留磁盘空间使用建议与限制硬件要求Janus-Pro-1B 需在本地以 bfloat16 加载并完成图片编码推理建议具备支持 bf16 的 GPU若仅 CPU 运行生成速度会明显下降。网络依赖Firecrawl 抓取与 ColiVara 索引均为云端服务需要网络连通与有效 API 密钥本地模型推理则完全离线。超长网页截图切片固定为 10 片超长网页单页内容密度更高若视觉细节被压缩可考虑增加切片数。会话隔离集合名绑定会话 UUID并配合file_cache缓存避免重复索引多开会话互不干扰。只读仓库提醒本仓库为只读展示用途文章所述安装、运行与配置均在本地环境完成无需修改仓库内容。延伸阅读项目说明Colivara-deepseek-website-RAG/README.mdWeb 界面与主流程Colivara-deepseek-website-RAG/app.py检索与多模态生成核心Colivara-deepseek-website-RAG/rag_code.py演示视频Colivara-deepseek-website-RAG/video-demo.mp4【免费下载链接】ai-engineering-hubIn-depth tutorials on LLMs, RAGs and real-world AI agent applications.项目地址: https://gitcode.com/GitHub_Trending/ai/ai-engineering-hub创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从网页截图到图文问答：基于 ColiVara 与 DeepSeek Janus-Pro 的多模态网站 RAG 实战
从网页截图到图文问答基于 ColiVara 与 DeepSeek Janus-Pro 的多模态网站 RAG 实战【免费下载链接】ai-engineering-hubIn-depth tutorials on LLMs, RAGs and real-world AI agent applications.项目地址: https://gitcode.com/GitHub_Trending/ai/ai-engineering-hub本文以 Colivara-deepseek-website-RAG 项目为蓝本系统讲解如何将任意网页抓取为截图、切片成 PDF、交给 ColiVara 完成多模态索引与检索最终由 DeepSeek 的多模态模型 Janus-Pro 结合图片上下文生成回答的完整链路。读完本文你将掌握一套「网页级多模态 RAG」的工程实现既能理解环境搭建、API 配置与一键启动方式也能从 app.py 与 rag_code.py 的源码级视角看懂 Firecrawl、ColiVara、Janus-Pro 三者之间真实的调用关系与关键参数。项目概览四个组件构成的网页级多模态 RAG传统 RAG 只处理纯文本而网页内容天然包含版式、图表、截图等视觉信息。本项目把「网页」这一非结构化输入完整地转换为图像证据再走「检索 → 多模态生成」的路线形成一套无需清洗 HTML 文本即可直接问答的方案。项目共使用四类工具各司其职组件职责在本项目中的角色DeepSeek Janus-Pro多模态大模型理解检索到的网页截图结合图片内容生成答案ColiVara文档理解与检索对 PDF网页截图切片建索引按语义召回最相关图片Firecrawl网页抓取将目标网页渲染为整页截图fullPage screenshotStreamlitWeb 界面提供侧边栏配置、PDF 预览与流式对话聊天 UI项目还提供了一份演示视频可以直接查看从输入 URL 到对话出结果的真实运行效果。环境准备与安装安装 DeepSeek JanusJanus-Pro 是 DeepSeek 推出的多模态模型需要先从官方仓库克隆并做本地可编辑安装注意请将下述命令中的仓库地址替换为你实际可访问的 DeepSeek 官方 Janus 仓库地址git clone https://github.com/deepseek-ai/Janus.git pip install -e ./Janus这一步至关重要rag_code.py 顶部直接以包的形式导入了 Janus 仓库内的代码from Janus.janus.models import MultiModalityCausalLM, VLChatProcessor from Janus.janus.utils.io import load_pil_images其中VLChatProcessor负责把「对话消息 图片」编码为模型输入load_pil_images负责从对话结构中取出 PIL 图片列表。如果跳过 Janus 的安装步骤运行时导入会直接失败。安装 Python 依赖官方要求 Python 3.11 或更高版本然后执行pip install streamlit-pdf-viewer colivara-py streamlit fastembed flash-attn transformers各依赖用途如下colivara-pyColiVara 官方 Python SDK用于创建集合、上传文档、执行检索streamlitWeb 界面框架streamlit-pdf-viewer在 Streamlit 侧边栏内嵌渲染 PDFtransformers加载 Hugging Face 上的 Janus-Pro 权重AutoModelForCausalLM.from_pretrainedflash-attn加速注意力计算提升推理速度fastembedColiVara 生态常用的嵌入组件依赖。需要补充说明的是从 app.py 的实际导入语句看运行时还会用到以下几个未出现在上述 pip 列表中的包请一并确保已安装from pdf2image import convert_from_path # 依赖系统级 poppler 工具 from fpdf import FPDF # fpdf2用于切片生成 PDF from firecrawl import FirecrawlApp # Firecrawl 官方 SDK from dotenv import load_dotenv # 读取 .env from PIL import Image # 图片裁剪 import requests # 下载截图配置 API 密钥本项目需要两个云服务密钥ColiVara文档理解与检索和 Firecrawl网页抓取。在项目根目录创建.env文件并写入COLIVARA_API_KEYCOLIVARA-API-KEY FIRECRAWL_API_KEYFIRECRAWL-API-KEYapp.py 通过load_dotenv()加载该文件随后用os.getenv(COLIVARA_API_KEY)与os.getenv(FIRECRAWL_API_KEY)读取并注入 FirecrawlApp 与 ColiVara 客户端。启动项目完成上述三步后一行命令即可启动streamlit run app.py启动后浏览器会打开 Streamlit 界面侧边栏输入网页 URL、点击Start RAG系统便会自动完成「抓取 → 切 PDF → 建索引」三步预处理之后即可在底部输入框开始图文问答并支持Clear ↺按钮重置会话。源码解读一次「网页 → 问答」的完整旅程下面沿着 app.py 与 rag_code.py 的实际代码拆解整条数据流。第一步Firecrawl 全页截图点击 Start RAG 后app.py 会实例化 FirecrawlApp 并抓取目标网页app FirecrawlApp(api_keyos.getenv(FIRECRAWL_API_KEY)) scrape_result app.scrape_url(url_input, params{formats: [screenshotfullPage], waitFor: 10000})两个关键参数值得注意formats: [screenshotfullPage]要求 Firecrawl 返回整页截图而不是只截首屏从而保证长网页的内容不被截断waitFor: 10000等待 10 秒再截图给前端 JavaScript 渲染尤其是懒加载内容留出时间避免截到空白页。第二步截图切片生成 PDFColiVara 的文档理解面向 PDF因此需要把一张超长网页截图转成 PDF。create_pdf_from_screenshot 的实现思路是垂直均分为 10 片slice_height math.ceil(height / 10) # 每片高度 总高 / 10 pdf FPDF(unitpt, format[width, slice_height]) # 每页大小与切片一致 pdf.set_auto_page_break(autoFalse) # 关闭自动分页 for i in range(10): top i * slice_height bottom min((i 1) * slice_height, height) slice_img image.crop((0, top, width, bottom)) # 逐片裁剪 pdf.add_page() pdf.image(temp_filename, x0, y0, wwidth, hbottom-top)这里的工程细节是每片对应 PDF 的一页页尺寸严格贴合切片的长宽比同时关闭auto_page_break避免内容被系统自动分页再次切割而失真。最后输出screenshot_slices.pdf供后续索引。第三步ColiVara 集合创建与文档索引得到 PDF 后app.py 初始化 ColiVara 客户端并完成两级写入rag_client ColiVara(api_keyos.getenv(COLIVARA_API_KEY)) new_collection rag_client.create_collection( namest.session_state.collection_name, metadata{description: Webpage screenshots} ) document rag_client.upsert_document( collection_namest.session_state.collection_name, namewebpage_document, document_pathst.session_state.pdf_path )create_collection创建专属集合集合名由uuid生成webpage_collection str(session_id)见 app.py避免多次会话互相污染upsert_document上传 PDFColiVara 在服务端完成版面分析、文本与视觉信息提取建立多模态索引。值得强调的是本项目把会话级缓存也考虑了进去st.session_state.file_cache以{session_id}-webpage.pdf为 key 缓存已建好的 query_engine同一会话重复点击不会重复建索引app.py。第四步Retriever 检索与图片召回检索逻辑封装在 rag_code.py 的Retriever类中class Retriever: def search(self, query): results self.rag_client.search( queryquery, collection_nameself.collection_name, top_k3 ) related_image results.results[0].img_base64 # 取最相关的一张 image_data base64.b64decode(related_image) image Image.open(io.BytesIO(image_data)) image.save(tempfile.jpeg) return tempfile.jpeg关键点top_k3召回 3 个候选但最终只取results[0]即最相关的一张作为上下文图片召回结果直接以img_base64形式返回无需再次下载解码后落盘为tempfile.jpeg供多模态模型读取这说明 ColiVara 检索返回的不只是「文本片段」而是图片本身——这是本项目区别于文本 RAG 的核心差异。第五步Janus-Pro 多模态生成生成侧由 rag_code.py 的RAG类完成。模型默认使用deepseek-ai/Janus-Pro-1B初始化时加载权重并转为 bfloat16 精度class RAG: def __init__(self, retriever, llm_namedeepseek-ai/Janus-Pro-1B): self._setup_llm() def _setup_llm(self): self.vl_chat_processor VLChatProcessor.from_pretrained( self.llm_name, cache_dir./Janus/hf_cache) self.tokenizer self.vl_chat_processor.tokenizer self.vl_gpt AutoModelForCausalLM.from_pretrained( self.llm_name, trust_remote_codeTrue, cache_dir./Janus/hf_cache).to(torch.bfloat16).eval()query()方法把检索到的图片与用户问题拼装为 Janus 的对话格式qa_prompt_tmpl_str fThe user has asked the following question: Query: {query} Some images are available to you for this question. You have to understand these images thoroughly and extract all relevant information that will help you answer the query. conversation [ {role: User, content: fimage_placeholder \n {qa_prompt_tmpl_str}, images: [image_context]}, {role: Assistant, content: }, ]随后经过load_pil_images→vl_chat_processor(...)编码 →prepare_inputs_embeds组装图像与文本 embedding → 语言模型生成outputs self.vl_gpt.language_model.generate( inputs_embedsinputs_embeds, attention_maskprepare_inputs.attention_mask, pad_token_idself.tokenizer.eos_token_id, bos_token_idself.tokenizer.bos_token_id, eos_token_idself.tokenizer.eos_token_id, max_new_tokens512, do_sampleFalse, use_cacheTrue, )这里隐含了几个可调参数max_new_tokens512答案最长生成 512 个 tokendo_sampleFalse使用贪心解码输出确定性更强use_cacheTrue启用 KV Cache 加速prompt 模板明确要求模型先彻底理解图片再回答将“读图”这一指令固化进系统提示。最后app.py 在 Streamlit 端以流式方式逐 chunk 渲染回答带▌光标效果形成完整的对话体验。关键参数速查表参数位置默认值作用与调优建议waitForapp.py10000ms等待页面 JS 渲染动态站点可调大静态站可调小以提速formatsapp.pyscreenshotfullPage整页截图保证长页内容完整切片数量app.py10 片切片越多单页越高清但 PDF 体积与索引耗时同步上升top_krag_code.py3召回候选数最终只取 top-1 图片可修改为多图拼接上下文llm_namerag_code.pydeepseek-ai/Janus-Pro-1B可换成更大规格的 Janus-Pro 权重按显存权衡精度rag_code.pybfloat16兼顾显存与精度显存充足时可试 fp16 或原始精度max_new_tokensrag_code.py512需要长答案时可调大cache_dirrag_code.py./Janus/hf_cache模型权重缓存目录注意预留磁盘空间使用建议与限制硬件要求Janus-Pro-1B 需在本地以 bfloat16 加载并完成图片编码推理建议具备支持 bf16 的 GPU若仅 CPU 运行生成速度会明显下降。网络依赖Firecrawl 抓取与 ColiVara 索引均为云端服务需要网络连通与有效 API 密钥本地模型推理则完全离线。超长网页截图切片固定为 10 片超长网页单页内容密度更高若视觉细节被压缩可考虑增加切片数。会话隔离集合名绑定会话 UUID并配合file_cache缓存避免重复索引多开会话互不干扰。只读仓库提醒本仓库为只读展示用途文章所述安装、运行与配置均在本地环境完成无需修改仓库内容。延伸阅读项目说明Colivara-deepseek-website-RAG/README.mdWeb 界面与主流程Colivara-deepseek-website-RAG/app.py检索与多模态生成核心Colivara-deepseek-website-RAG/rag_code.py演示视频Colivara-deepseek-website-RAG/video-demo.mp4【免费下载链接】ai-engineering-hubIn-depth tutorials on LLMs, RAGs and real-world AI agent applications.项目地址: https://gitcode.com/GitHub_Trending/ai/ai-engineering-hub创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考