diff --git a/dsLightRag/static/ShiJi.html b/dsLightRag/static/ShiJi.html
index 6e41c2e1..97a9d3ac 100644
--- a/dsLightRag/static/ShiJi.html
+++ b/dsLightRag/static/ShiJi.html
@@ -189,11 +189,8 @@
 
         <div class="examples">
             <div class="example-category">
-                <h3>已收集问题示例</h3>
+                <h3>简单问题示例</h3>
                 <div class="example-list">
-                    <div class="example-item" onclick="fillExample('本书主要讲了哪些内容？')">
-                        本书主要讲了哪些内容？
-                    </div>
                     <div class="example-item" onclick="fillExample('“先写后编”的历史写作方式是什么意思？')">
                         “先写后编”的历史写作方式是什么意思？
                     </div>
@@ -203,13 +200,36 @@
 
                 </div>
             </div>
+            <div class="example-category">
+                <h3>总结性问题示例</h3>
+                <div class="example-list">
+                    <div class="example-item" onclick="fillExample('本书主要讲了哪些内容？')">
+                        本书主要讲了哪些内容？
+                    </div>
+                    <div class="example-item" onclick="fillExample('总结一下各年代的名将')">
+                        总结一下各年代的名将
+                    </div>
+                </div>
+            </div>
+            <div class="example-category">
+                <h3>生成关系图谱示例</h3>
+                <div class="example-list">
+                    <button id="relationBtn1" onclick="generateRelation('生成刘帮集团的人物关系图')"
+                            style="background-color:#9c27b0">
+                        <span class="icon">👥</span>生成刘帮集团的人物关系图
+                    </button>
+                      <button id="relationBtn2" onclick="generateRelation('生成抗击匈奴的人物事件关系图')"
+                            style="background-color:#9c27b0">
+                        <span class="icon">👥</span>生成抗击匈奴的人物事件关系图
+                    </button>
 
+                </div>
+            </div>
         </div>
     </div>
     <button id="submitBtn" onclick="submitQuestion()"><span class="icon">💡</span>提问</button>
     <button id="clearBtn" onclick="clearAll()"><span class="icon">🗑️</span>清空</button>
-    <button id="relationBtn" onclick="generateRelation()" style="background-color:#9c27b0"><span class="icon">👥</span>生成刘帮集团的人物关系图
-    </button>
+
 </div>
 
 <script>
@@ -347,7 +367,7 @@
     }
 
     // 在script部分添加新函数
-    function generateRelation() {
+    function generateRelation(query) {
         const answerArea = document.getElementById('answerArea');
         answerArea.innerHTML = '<div class="loading-animation"><div class="spinner"></div><div>正在生成人物关系图...</div></div>';
 
@@ -358,7 +378,7 @@
                 'Accept': 'text/event-stream'
             },
             body: JSON.stringify({
-                query: "生成刘帮集团的人物关系图",
+                query: query,
                 topic: "ShiJi",
                 mode: "hybrid",
                 output_model: "html"
@@ -380,27 +400,23 @@
 
                         for (const line of lines) {
                             if (line.includes('[DONE]')) {
-                                    // 在这里处理流结束的逻辑
-                                    console.log('SSE流处理完成');
-                                    return fetch('/api/render_html', {
-                                        method: 'POST',
-                                        headers: {
-                                            'Content-Type': 'application/json'
-                                        },
-                                        body: JSON.stringify({
-                                            html_content: accumulatedContent
-                                        })
-                                    }).then(response => response.json())
-                                      .then(data => {
-                                          console.log('render_html接口返回数据:', data);
-                                          if (data.url) {
-                                              console.log('图片URL:', data.url);
-                                              window.location=data.url;
-                                          }else{
-                                              console.log('图片URL未返回')
-                                          }
-                                      });
-                                }
+                                // 在这里处理流结束的逻辑
+                                console.log('SSE流处理完成');
+                                return fetch('/api/render_html', {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json'
+                                    },
+                                    body: JSON.stringify({
+                                        html_content: accumulatedContent
+                                    })
+                                }).then(response => response.json())
+                                    .then(data => {
+                                        if (data.url) {
+                                            window.location = data.url;
+                                        }
+                                    });
+                            }
                             if (line.includes('data:')) {
                                 const jsonStr = line.replace(/^data:\s*/, '').replace(/^data:\s*/, '').trim();
 
diff --git a/dsLightRag/static/temp/relation_ab235e8865ec4eaabc7bd54c1522b6a4.html b/dsLightRag/static/temp/relation_ab235e8865ec4eaabc7bd54c1522b6a4.html
new file mode 100644
index 00000000..c8b01fbe
--- /dev/null
+++ b/dsLightRag/static/temp/relation_ab235e8865ec4eaabc7bd54c1522b6a4.html
@@ -0,0 +1,451 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>刘邦集团关系网络</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #0a1a2e, #1a3a5a);
+            font-family: 'Arial', sans-serif;
+            color: white;
+            overflow: hidden;
+        }
+        
+        #header {
+            text-align: center;
+            padding: 20px;
+            background: linear-gradient(90deg, rgba(10,26,46,0.8), rgba(26,58,90,0.8));
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            margin-bottom: 20px;
+        }
+        
+        #title {
+            font-size: 32px;
+            font-weight: bold;
+            background: linear-gradient(90deg, #ff8a00, #e52e71);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 10px rgba(255,138,0,0.3);
+            margin: 0;
+        }
+        
+        #container {
+            display: flex;
+            height: calc(100vh - 100px);
+        }
+        
+        #graph {
+            flex: 3;
+            border-right: 1px solid rgba(255,255,255,0.1);
+            position: relative;
+        }
+        
+        #sidebar {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            background: rgba(10,26,46,0.7);
+        }
+        
+        .node {
+            stroke: #fff;
+            stroke-width: 1.5px;
+            filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
+        }
+        
+        .node text {
+            pointer-events: none;
+            font-size: 12px;
+            text-anchor: middle;
+            dominant-baseline: central;
+            fill: white;
+            font-weight: bold;
+        }
+        
+        .link {
+            stroke-opacity: 0.6;
+        }
+        
+        .legend {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+        }
+        
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
+        }
+        
+        .legend-color {
+            width: 20px;
+            height: 10px;
+            margin-right: 10px;
+        }
+        
+        #tooltip {
+            position: absolute;
+            padding: 10px;
+            background: rgba(0,0,0,0.8);
+            border-radius: 5px;
+            pointer-events: none;
+            max-width: 300px;
+            display: none;
+        }
+        
+        #details {
+            margin-top: 20px;
+        }
+        
+        .detail-item {
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        
+        .detail-title {
+            font-weight: bold;
+            color: #ff8a00;
+            margin-bottom: 5px;
+        }
+        
+        .control-panel {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+        }
+        
+        .control-btn {
+            display: block;
+            margin-bottom: 5px;
+            padding: 5px 10px;
+            background: rgba(255,255,255,0.1);
+            border: none;
+            color: white;
+            cursor: pointer;
+            border-radius: 3px;
+        }
+        
+        .control-btn:hover {
+            background: rgba(255,255,255,0.2);
+        }
+    </style>
+</head>
+<body>
+    <div id="header">
+        <h1 id="title">刘邦集团核心人物关系网络</h1>
+    </div>
+    
+    <div id="container">
+        <div id="graph"></div>
+        <div id="sidebar">
+            <h3>人物详情</h3>
+            <div id="details"></div>
+        </div>
+    </div>
+    
+    <div id="tooltip"></div>
+    
+    <div class="legend">
+        <h4>关系类型</h4>
+        <div class="legend-item">
+            <div class="legend-color" style="background: #4daf4a;"></div>
+            <span>政治联盟</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-color" style="background: #e41a1c;"></div>
+            <span>敌对关系</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-color" style="background: #377eb8;"></div>
+            <span>军事合作</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-color" style="background: #984ea3;"></div>
+            <span>亲属关系</span>
+        </div>
+    </div>
+    
+    <div class="control-panel">
+        <h4>布局切换</h4>
+        <button class="control-btn" id="force-layout">力导向布局</button>
+        <button class="control-btn" id="radial-layout">辐射状布局</button>
+        <button class="control-btn" id="circular-layout">环形布局</button>
+        <button class="control-btn" id="grid-layout">网格布局</button>
+    </div>
+
+    <script>
+        const width = document.getElementById('graph').clientWidth;
+        const height = document.getElementById('graph').clientHeight;
+        
+        const svg = d3.select("#graph")
+            .append("svg")
+            .attr("width", width)
+            .attr("height", height);
+            
+        const simulation = d3.forceSimulation()
+            .force("link", d3.forceLink().id(d => d.id).distance(100))
+            .force("charge", d3.forceManyBody().strength(-300))
+            .force("center", d3.forceCenter(width / 2, height / 2))
+            .force("collision", d3.forceCollide().radius(60));
+            
+        const data = {
+            nodes: [
+                { id: "1", name: "刘邦", type: "emperor", description: "汉高祖，西汉开国皇帝", importance: 10 },
+                { id: "2", name: "吕后", type: "empress", description: "刘邦的皇后，汉惠帝之母", importance: 8 },
+                { id: "3", name: "韩信", type: "general", description: "汉初三杰之一，著名军事家", importance: 9 },
+                { id: "4", name: "萧何", type: "minister", description: "汉初三杰之一，丞相", importance: 8 },
+                { id: "5", name: "张良", type: "advisor", description: "汉初三杰之一，著名谋士", importance: 9 },
+                { id: "6", name: "项羽", type: "rival", description: "刘邦的主要对手，西楚霸王", importance: 8 },
+                { id: "7", name: "英布", type: "general", description: "汉初名将，后反叛", importance: 6 },
+                { id: "8", name: "彭越", type: "general", description: "汉初名将，后反叛", importance: 6 },
+                { id: "9", name: "曹参", type: "minister", description: "汉初丞相，萧何继任者", importance: 6 },
+                { id: "10", name: "陈平", type: "advisor", description: "汉初谋士，后为丞相", importance: 7 },
+                { id: "11", name: "周勃", type: "general", description: "汉初名将，后为丞相", importance: 7 },
+                { id: "12", name: "樊哙", type: "general", description: "刘邦的连襟，汉初名将", importance: 6 },
+                { id: "13", name: "刘盈", type: "emperor", description: "汉惠帝，刘邦与吕后之子", importance: 5 },
+                { id: "14", name: "刘如意", type: "prince", description: "刘邦与戚夫人之子", importance: 4 },
+                { id: "15", name: "戚夫人", type: "consort", description: "刘邦宠妃，刘如意之母", importance: 4 }
+            ],
+            links: [
+                { source: "1", target: "2", type: "marriage", description: "夫妻关系" },
+                { source: "1", target: "3", type: "political", description: "重用韩信但最终处死" },
+                { source: "1", target: "4", type: "political", description: "重用萧何，位列三杰" },
+                { source: "1", target: "5", type: "political", description: "重用张良，位列三杰" },
+                { source: "1", target: "6", type: "enemy", description: "楚汉争霸主要对手" },
+                { source: "1", target: "7", type: "military", description: "曾为盟友后反叛" },
+                { source: "1", target: "8", type: "military", description: "曾为盟友后反叛" },
+                { source: "1", target: "9", type: "political", description: "继任丞相" },
+                { source: "1", target: "10", type: "political", description: "重要谋士" },
+                { source: "1", target: "11", type: "military", description: "重要将领" },
+                { source: "1", target: "12", type: "family", description: "连襟关系" },
+                { source: "1", target: "13", type: "family", description: "父子关系" },
+                { source: "1", target: "14", type: "family", description: "父子关系" },
+                { source: "1", target: "15", type: "marriage", description: "宠妃关系" },
+                { source: "2", target: "13", type: "family", description: "母子关系" },
+                { source: "2", target: "15", type: "enemy", description: "政敌关系" },
+                { source: "2", target: "14", type: "enemy", description: "政敌关系" },
+                { source: "2", target: "3", type: "political", description: "吕后设计处死韩信" },
+                { source: "2", target: "7", type: "political", description: "吕后设计处死英布" },
+                { source: "2", target: "8", type: "political", description: "吕后设计处死彭越" },
+                { source: "4", target: "3", type: "political", description: "萧何推荐韩信" },
+                { source: "5", target: "6", type: "political", description: "张良曾为项羽部下" },
+                { source: "3", target: "6", type: "military", description: "韩信击败项羽" },
+                { source: "11", target: "2", type: "political", description: "周勃平定诸吕之乱" }
+            ]
+        };
+        
+        const colorScale = d3.scaleOrdinal()
+            .domain(["political", "enemy", "military", "family", "marriage"])
+            .range(["#4daf4a", "#e41a1c", "#377eb8", "#984ea3", "#ff7f00"]);
+            
+        const nodeSizeScale = d3.scaleLinear()
+            .domain([4, 10])
+            .range([30, 60]);
+            
+        const link = svg.append("g")
+            .attr("class", "links")
+            .selectAll("line")
+            .data(data.links)
+            .enter().append("line")
+            .attr("class", "link")
+            .attr("stroke", d => colorScale(d.type))
+            .attr("stroke-width", 2);
+            
+        const node = svg.append("g")
+            .attr("class", "nodes")
+            .selectAll("g")
+            .data(data.nodes)
+            .enter().append("g")
+            .call(d3.drag()
+                .on("start", dragstarted)
+                .on("drag", dragged)
+                .on("end", dragended));
+                
+        node.append("circle")
+            .attr("class", "node")
+            .attr("r", d => nodeSizeScale(d.importance))
+            .attr("fill", d => {
+                if (d.type === "emperor") return "#d62728";
+                if (d.type === "empress") return "#9467bd";
+                if (d.type === "general") return "#1f77b4";
+                if (d.type === "minister") return "#2ca02c";
+                if (d.type === "advisor") return "#ff7f0e";
+                if (d.type === "rival") return "#8c564b";
+                if (d.type === "consort") return "#e377c2";
+                return "#7f7f7f";
+            })
+            .on("mouseover", function(event, d) {
+                d3.select("#tooltip")
+                    .style("display", "block")
+                    .html(`<strong>${d.name}</strong><br>${d.description}<br><em>重要性: ${d.importance}</em>`)
+                    .style("left", (event.pageX + 10) + "px")
+                    .style("top", (event.pageY + 10) + "px");
+                    
+                d3.select(this)
+                    .attr("stroke", "white")
+                    .attr("stroke-width", 3)
+                    .attr("filter", "url(#glow)");
+            })
+            .on("mouseout", function() {
+                d3.select("#tooltip").style("display", "none");
+                d3.select(this)
+                    .attr("stroke", null)
+                    .attr("stroke-width", null)
+                    .attr("filter", null);
+            })
+            .on("click", function(event, d) {
+                updateDetails(d);
+            });
+            
+        node.append("text")
+            .attr("dy", ".35em")
+            .text(d => d.name);
+            
+        defs = svg.append("defs");
+        defs.append("filter")
+            .attr("id", "glow")
+            .append("feGaussianBlur")
+            .attr("stdDeviation", "3.5")
+            .attr("result", "coloredBlur");
+            
+        const feMerge = defs.select("filter").append("feMerge");
+        feMerge.append("feMergeNode").attr("in", "coloredBlur");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+            
+        simulation
+            .nodes(data.nodes)
+            .on("tick", ticked);
+            
+        simulation.force("link")
+            .links(data.links);
+            
+        function ticked() {
+            link
+                .attr("x1", d => d.source.x)
+                .attr("y1", d => d.source.y)
+                .attr("x2", d => d.target.x)
+                .attr("y2", d => d.target.y);
+                
+            node
+                .attr("transform", d => `translate(${d.x},${d.y})`);
+        }
+        
+        function dragstarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+        
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+        
+        function dragended(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+        
+        function updateDetails(d) {
+            const details = d3.select("#details");
+            details.html("");
+            
+            details.append("div")
+                .attr("class", "detail-item")
+                .html(`<div class="detail-title">${d.name}</div><div>${d.description}</div>`);
+                
+            const relatedLinks = data.links.filter(link => link.source.id === d.id || link.target.id === d.id);
+            
+            const relations = details.append("div")
+                .attr("class", "detail-item");
+                
+            relations.append("div")
+                .attr("class", "detail-title")
+                .text("关系网络");
+                
+            const relationList = relations.append("ul")
+                .style("list-style", "none")
+                .style("padding", "0")
+                .style("margin", "0");
+                
+            relatedLinks.forEach(link => {
+                const otherNode = link.source.id === d.id ? 
+                    data.nodes.find(n => n.id === link.target.id) : 
+                    data.nodes.find(n => n.id === link.source.id);
+                    
+                relationList.append("li")
+                    .html(`<span style="display:inline-block;width:10px;height:10px;background:${colorScale(link.type)};margin-right:5px;"></span>
+                          <strong>${otherNode.name}</strong>: ${link.description}`);
+            });
+        }
+        
+        // Layout controls
+        d3.select("#force-layout").on("click", function() {
+            simulation.force("charge", d3.forceManyBody().strength(-300));
+            simulation.force("center", d3.forceCenter(width / 2, height / 2));
+            simulation.alpha(1).restart();
+        });
+        
+        d3.select("#radial-layout").on("click", function() {
+            simulation.force("center", null);
+            data.nodes.forEach(d => {
+                const angle = (d.id - 1) / data.nodes.length * 2 * Math.PI;
+                d.fx = width / 2 + Math.cos(angle) * 200;
+                d.fy = height / 2 + Math.sin(angle) * 200;
+            });
+            simulation.alpha(1).restart();
+        });
+        
+        d3.select("#circular-layout").on("click", function() {
+            simulation.force("center", null);
+            data.nodes.forEach((d, i) => {
+                const angle = i / data.nodes.length * 2 * Math.PI;
+                d.fx = width / 2 + Math.cos(angle) * 300;
+                d.fy = height / 2 + Math.sin(angle) * 300;
+            });
+            simulation.alpha(1).restart();
+        });
+        
+        d3.select("#grid-layout").on("click", function() {
+            simulation.force("center", null);
+            const cols = Math.ceil(Math.sqrt(data.nodes.length));
+            const spacing = Math.min(width, height) / (cols + 1);
+            data.nodes.forEach((d, i) => {
+                const row = Math.floor(i / cols);
+                const col = i % cols;
+                d.fx = col * spacing + spacing;
+                d.fy = row * spacing + spacing;
+            });
+            simulation.alpha(1).restart();
+        });
+        
+        // Initial details
+        updateDetails(data.nodes[0]);
+        
+        // Responsive resize
+        window.addEventListener('resize', function() {
+            const newWidth = document.getElementById('graph').clientWidth;
+            const newHeight = document.getElementById('graph').clientHeight;
+            
+            svg.attr("width", newWidth)
+               .attr("height", newHeight);
+               
+            simulation.force("center", d3.forceCenter(newWidth / 2, newHeight / 2));
+            simulation.alpha(1).restart();
+        });
+    </script>
+</body>
+</html>