yangxiaohui
/
how


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
							#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
构建创作思维路径可视化 - 分层版本

基于原版样式，改为从上到下分层布局，去掉动画
"""

import json
import sys
from pathlib import Path

# 项目路径
project_root = Path(__file__).parent.parent.parent
sys.path.insert(0, str(project_root))

from script.data_processing.path_config import PathConfig


HTML_TEMPLATE = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创作思维路径可视化</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a2e;
      color: #eee;
      overflow: hidden;
    }
    .container { display: flex; flex-direction: column; height: 100vh; }
    header {
      padding: 12px 20px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    h1 { font-size: 16px; font-weight: 500; color: #e94560; }
    .legend { display: flex; gap: 16px; font-size: 12px; color: #888; margin-left: auto; }
    .legend-item { display: flex; align-items: center; gap: 4px; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
    .legend-line { width: 20px; height: 2px; }

    /* 主内容区：左右布局 */
    main { flex: 1; display: flex; overflow: hidden; }
    .graph-area { flex: 1; position: relative; overflow: auto; }
    .graph-area svg { display: block; }

    /* 右侧面板 */
    .right-panel {
      width: 360px;
      background: #16213e;
      border-left: 1px solid #0f3460;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* 帖子摘要区 */
    .post-summary {
      padding: 16px;
      border-bottom: 1px solid #0f3460;
      max-height: 200px;
      overflow-y: auto;
    }
    .post-title {
      font-size: 14px;
      font-weight: 600;
      color: #e94560;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .post-body {
      font-size: 12px;
      color: #aaa;
      line-height: 1.6;
      max-height: 100px;
      overflow-y: auto;
    }
    .post-meta {
      margin-top: 8px;
      font-size: 11px;
      color: #666;
      display: flex;
      gap: 12px;
    }

    /* 步骤时间轴 */
    .timeline {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    .timeline-title {
      font-size: 13px;
      font-weight: 600;
      color: #888;
      margin-bottom: 12px;
    }
    .timeline-item {
      position: relative;
      padding-left: 24px;
      padding-bottom: 16px;
      border-left: 2px solid #0f3460;
      margin-left: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .timeline-item:hover {
      background: rgba(233, 69, 96, 0.1);
      margin-left: 6px;
      padding-left: 26px;
    }
    .timeline-item:last-child { border-left-color: transparent; }
    .timeline-item.active { border-left-color: #e94560; }
    .timeline-dot {
      position: absolute;
      left: -7px;
      top: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #0f3460;
      background: #1a1a2e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: bold;
      color: white;
    }
    .timeline-item.active .timeline-dot {
      border-color: #e94560;
      background: #e94560;
    }
    .timeline-node-name {
      font-size: 13px;
      font-weight: 500;
      color: #eee;
      margin-bottom: 4px;
    }
    .timeline-node-dim {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 3px;
      display: inline-block;
      margin-bottom: 6px;
    }
    .timeline-node-dim.灵感点 { background: rgba(255,107,107,0.2); color: #ff6b6b; }
    .timeline-node-dim.目的点 { background: rgba(78,205,196,0.2); color: #4ecdc4; }
    .timeline-node-dim.关键点 { background: rgba(255,230,109,0.2); color: #ffe66d; }
    .timeline-reason {
      font-size: 11px;
      color: #888;
      line-height: 1.5;
      background: #0f3460;
      padding: 8px;
      border-radius: 4px;
    }
    .timeline-from {
      font-size: 11px;
      color: #666;
      margin-bottom: 4px;
    }
    .timeline-from span { color: #e94560; }

    /* 节点样式 */
    .node { cursor: pointer; }
    .node circle { stroke-width: 2px; transition: all 0.3s; }
    .node.highlight circle { stroke-width: 4px; filter: drop-shadow(0 0 12px currentColor); }
    .node text { font-size: 11px; fill: #ccc; text-anchor: middle; pointer-events: none; }
    .node .order-badge { font-size: 10px; font-weight: bold; fill: white; }
    .link { stroke-opacity: 0.6; transition: all 0.3s; }
    .link.highlight { stroke-opacity: 1; stroke-width: 3px; }
    .link-label { font-size: 9px; fill: #888; pointer-events: none; }

    /* 层级标签 */
    .layer-label {
      font-size: 11px;
      fill: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>创作思维路径</h1>
      <div class="legend">
        <div class="legend-item"><span class="legend-dot" style="background: #ff6b6b;"></span><span>灵感点</span></div>
        <div class="legend-item"><span class="legend-dot" style="background: #4ecdc4;"></span><span>目的点</span></div>
        <div class="legend-item"><span class="legend-dot" style="background: #ffe66d;"></span><span>关键点</span></div>
        <div class="legend-item"><span class="legend-line" style="background: #e94560;"></span><span>AI推导</span></div>
      </div>
    </header>
    <main>
      <div class="graph-area">
        <svg id="graph"></svg>
      </div>
      <div class="right-panel">
        <div class="post-summary" id="postSummary"></div>
        <div class="timeline" id="timeline">
          <div class="timeline-title">推导过程</div>
        </div>
      </div>
    </main>
  </div>

  <script>
    const DATA = __DATA_PLACEHOLDER__;

    const dimColors = { '灵感点': '#ff6b6b', '目的点': '#4ecdc4', '关键点': '#ffe66d' };

    // 提取数据
    const postDetail = DATA['帖子详情'];
    const steps = DATA['步骤列表'];
    const lastStep = steps[steps.length - 1];
    const nodes = lastStep['输出']['节点列表'];
    const edges = lastStep['输出']['边列表'].filter(e => e['关系类型'] === 'AI推导');

    // 构建边的查找表（目标节点 -> 边）
    const edgeByTarget = {};
    edges.forEach(e => { edgeByTarget[e['目标']] = e; });

    const nodeById = {};
    const graphNodes = nodes.filter(n => n['发现编号'] !== undefined && n['发现编号'] !== null).map(n => {
      const node = {
        id: n['节点ID'],
        name: n['节点名称'],
        dimension: n['节点维度'],
        category: n['节点分类'],
        description: n['节点描述'],
        order: n['发现编号'],
        isKnown: n['是否已知']
      };
      nodeById[node.id] = node;
      return node;
    });

    const graphLinks = edges.map(e => ({
      source: e['来源'],
      target: e['目标'],
      type: e['关系类型'],
      score: e['可能性分数'],
      reason: e['推理说明']
    })).filter(e => nodeById[e.source] && nodeById[e.target]);

    // 渲染帖子摘要
    function renderPostSummary() {
      const container = document.getElementById('postSummary');
      const bodyText = postDetail.body_text || '';
      const shortBody = bodyText.length > 150 ? bodyText.slice(0, 150) + '...' : bodyText;
      container.innerHTML = `
        <div class="post-title">${postDetail.postTitle || '无标题'}</div>
        <div class="post-body">${shortBody}</div>
        <div class="post-meta">
          <span>❤️ ${postDetail.like_count || 0}</span>
          <span>⭐ ${postDetail.collect_count || 0}</span>
          <span>${postDetail.publish_time || ''}</span>
        </div>
      `;
    }

    // 渲染时间轴
    function renderTimeline() {
      const container = document.getElementById('timeline');
      const sortedNodes = [...graphNodes].sort((a, b) => a.order - b.order);

      let html = '<div class="timeline-title">推导过程</div>';
      sortedNodes.forEach(n => {
        const edge = edgeByTarget[n.id];
        const fromNode = edge ? nodeById[edge.source] : null;
        html += `
          <div class="timeline-item" data-order="${n.order}" data-node-id="${n.id}">
            <div class="timeline-dot">${n.order}</div>
            <div class="timeline-node-name">${n.name}</div>
            <div class="timeline-node-dim ${n.dimension}">${n.dimension}</div>
            ${fromNode ? `<div class="timeline-from">← 从 <span>${fromNode.name}</span> 推导</div>` : '<div class="timeline-from">起点</div>'}
            ${edge ? `<div class="timeline-reason">${edge.reason || ''}</div>` : ''}
          </div>
        `;
      });
      container.innerHTML = html;

      // 绑定事件
      container.querySelectorAll('.timeline-item').forEach(item => {
        item.addEventListener('click', () => highlightNode(item.dataset.nodeId));
        item.addEventListener('mouseenter', () => highlightNode(item.dataset.nodeId));
        item.addEventListener('mouseleave', () => clearHighlight());
      });
    }

    // ========== 分层布局 ==========
    // 按 order 分层
    const layers = {};
    graphNodes.forEach(n => {
      if (!layers[n.order]) layers[n.order] = [];
      layers[n.order].push(n);
    });
    const layerKeys = Object.keys(layers).map(Number).sort((a, b) => a - b);

    // 布局参数
    const nodeRadius = 18;
    const layerGap = 100;
    const nodeGap = 100;
    const padding = 60;

    // 计算每层宽度
    let maxLayerWidth = 0;
    layerKeys.forEach(layer => {
      const layerWidth = layers[layer].length * nodeGap;
      maxLayerWidth = Math.max(maxLayerWidth, layerWidth);
    });

    const svgWidth = Math.max(maxLayerWidth + padding * 2, 600);
    const svgHeight = layerKeys.length * layerGap + padding * 2;

    // 计算节点位置
    layerKeys.forEach((layer, layerIndex) => {
      const layerNodes = layers[layer];
      const layerWidth = (layerNodes.length - 1) * nodeGap;
      const startX = (svgWidth - layerWidth) / 2;

      layerNodes.forEach((node, nodeIndex) => {
        node.x = startX + nodeIndex * nodeGap;
        node.y = padding + layerIndex * layerGap;
      });
    });

    // 创建 SVG
    const svg = d3.select('#graph')
      .attr('width', svgWidth)
      .attr('height', svgHeight)
      .style('background', '#222');  // 调试：添加背景色

    const g = svg.append('g');

    // 调试：画一个测试圆
    g.append('circle').attr('cx', 100).attr('cy', 100).attr('r', 20).attr('fill', 'red');

    // 缩放
    const zoom = d3.zoom()
      .scaleExtent([0.3, 3])
      .on('zoom', (event) => g.attr('transform', event.transform));
    svg.call(zoom);

    // 箭头
    svg.append('defs').append('marker')
      .attr('id', 'arrow')
      .attr('viewBox', '0 -5 10 10')
      .attr('refX', 25)
      .attr('refY', 0)
      .attr('markerWidth', 6)
      .attr('markerHeight', 6)
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'M0,-5L10,0L0,5')
      .attr('fill', '#e94560');

    // 层级标签
    layerKeys.forEach((layer, layerIndex) => {
      g.append('text')
        .attr('class', 'layer-label')
        .attr('x', 20)
        .attr('y', padding + layerIndex * layerGap + 4)
        .text(`#${layer}`);
    });

    // 绘制边（曲线）
    const link = g.append('g')
      .selectAll('path')
      .data(graphLinks)
      .join('path')
      .attr('class', 'link')
      .attr('stroke', '#e94560')
      .attr('stroke-width', 2)
      .attr('fill', 'none')
      .attr('marker-end', 'url(#arrow)')
      .attr('d', d => {
        const source = nodeById[d.source];
        const target = nodeById[d.target];
        if (!source || !target) return '';
        const midY = (source.y + target.y) / 2;
        return `M${source.x},${source.y + nodeRadius} C${source.x},${midY} ${target.x},${midY} ${target.x},${target.y - nodeRadius}`;
      });

    // 边标签
    const linkLabel = g.append('g')
      .selectAll('text')
      .data(graphLinks)
      .join('text')
      .attr('class', 'link-label')
      .attr('x', d => {
        const source = nodeById[d.source];
        const target = nodeById[d.target];
        return source && target ? (source.x + target.x) / 2 : 0;
      })
      .attr('y', d => {
        const source = nodeById[d.source];
        const target = nodeById[d.target];
        return source && target ? (source.y + target.y) / 2 : 0;
      })
      .attr('text-anchor', 'middle')
      .text(d => d.score?.toFixed(2) || '');

    // 绘制节点
    const node = g.append('g')
      .selectAll('g')
      .data(graphNodes)
      .join('g')
      .attr('class', 'node')
      .attr('transform', d => `translate(${d.x},${d.y})`)
      .on('click', (event, d) => highlightNode(d.id))
      .on('mouseenter', (event, d) => highlightNode(d.id))
      .on('mouseleave', () => clearHighlight());

    node.append('circle')
      .attr('r', nodeRadius)
      .attr('fill', d => dimColors[d.dimension] || '#888')
      .attr('stroke', d => dimColors[d.dimension] || '#888');

    node.append('text')
      .attr('class', 'order-badge')
      .attr('dy', 4)
      .text(d => d.order || '');

    node.append('text')
      .attr('dy', 35)
      .text(d => d.name.length > 6 ? d.name.slice(0, 6) + '…' : d.name);

    // 高亮函数
    function highlightNode(nodeId) {
      node.classed('highlight', d => d.id === nodeId);
      link.classed('highlight', d => d.target === nodeId);
      document.querySelectorAll('.timeline-item').forEach(item => {
        item.classList.toggle('active', item.dataset.nodeId === nodeId);
      });
    }

    function clearHighlight() {
      node.classed('highlight', false);
      link.classed('highlight', false);
      document.querySelectorAll('.timeline-item').forEach(item => {
        item.classList.remove('active');
      });
    }

    // 调试信息
    console.log('=== 调试 ===');
    console.log('graphNodes:', graphNodes.length, graphNodes);
    console.log('graphLinks:', graphLinks.length, graphLinks);
    console.log('layers:', layers);
    console.log('layerKeys:', layerKeys);
    console.log('svgWidth:', svgWidth, 'svgHeight:', svgHeight);

    // 初始化
    renderPostSummary();
    renderTimeline();

    // 居中显示
    setTimeout(() => {
      const graphArea = document.querySelector('.graph-area');
      const areaWidth = graphArea.clientWidth;
      const areaHeight = graphArea.clientHeight;
      const scale = Math.min(areaWidth / svgWidth, areaHeight / svgHeight, 1) * 0.9;
      const tx = (areaWidth - svgWidth * scale) / 2;
      const ty = (areaHeight - svgHeight * scale) / 2;
      svg.call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
    }, 100);
  </script>
</body>
</html>
'''


def main():
    import argparse
    parser = argparse.ArgumentParser(description='构建创作思维路径可视化（分层布局）')
    parser.add_argument('input_dir', nargs='?', help='输入目录路径（可选，默认使用 PathConfig）')
    args = parser.parse_args()

    if args.input_dir:
        input_dir = Path(args.input_dir)
        print(f"输入目录: {input_dir}")
    else:
        config = PathConfig()
        input_dir = config.intermediate_dir / "creation_pattern"
        print(f"账号: {config.account_name}")
        print(f"输入目录: {input_dir}")

    if not input_dir.exists():
        print(f"错误: 目录不存在!")
        sys.exit(1)

    # 查找所有创作模式文件
    pattern_files = sorted(input_dir.glob("*_创作模式.json"))
    print(f"找到 {len(pattern_files)} 个创作模式文件")

    if not pattern_files:
        print("错误: 没有找到创作模式文件!")
        sys.exit(1)

    # 为每个文件生成 HTML
    for pattern_file in pattern_files:
        post_id = pattern_file.stem.replace("_创作模式", "")
        print(f"\n处理: {post_id}")

        # 读取数据
        with open(pattern_file, "r", encoding="utf-8") as f:
            data = json.load(f)

        # 生成 HTML
        data_json = json.dumps(data, ensure_ascii=False)
        html_content = HTML_TEMPLATE.replace("__DATA_PLACEHOLDER__", data_json)

        # 输出文件
        output_file = input_dir / f"{post_id}_分层图谱.html"
        with open(output_file, "w", encoding="utf-8") as f:
            f.write(html_content)

        print(f"输出: {output_file}")

    print("\n完成!")


if __name__ == "__main__":
    main()