Sfoglia il codice sorgente

Fix post node visualization to display images and interaction data

- Fix image field name: changed from 'url_default' to 'image_url' for API compatibility
- Add image carousel to post nodes with navigation arrows and counter
- Display interaction metrics: likes, collects, comments, shares with emoji icons
- Pass images, body_text, and interact_info from post data to node visualization
- Support both 'note' and 'post' node types in transformData function

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
yangxiaohui 4 settimane fa
parent
commit
f8ddce434e

+ 6 - 3
sug_v6_1_2_8.py

@@ -204,11 +204,14 @@ def process_note_data(note: dict) -> Post:
     interact_info = note_card.get("interact_info", {})
     user_info = note_card.get("user", {})
 
-    # 提取图片URL
+    # 提取图片URL - 使用新的字段名 image_url
     images = []
     for img in image_list:
-        if isinstance(img, dict) and "url_default" in img:
-            images.append(img["url_default"])
+        if isinstance(img, dict):
+            # 尝试新字段名 image_url,如果不存在则尝试旧字段名 url_default
+            img_url = img.get("image_url") or img.get("url_default")
+            if img_url:
+                images.append(img_url)
 
     # 判断类型
     note_type = note_card.get("type", "normal")

+ 11 - 1
visualization/sug_v6_1_2_8/convert_v8_to_graph_v2.js

@@ -263,6 +263,12 @@ function convertV8ToGraphV2(runContext, searchResults) {
             if (search.post_list && search.post_list.length > 0) {
               search.post_list.forEach((post, postIndex) => {
                 const postId = `post_${post.note_id}_${searchIndex}_${postIndex}`;
+
+                // 准备图片列表,将URL字符串转换为对象格式供轮播图使用
+                const imageList = (post.images || []).map(url => ({
+                  image_url: url
+                }));
+
                 nodes[postId] = {
                   type: 'post',
                   query: post.title,
@@ -272,7 +278,11 @@ function convertV8ToGraphV2(runContext, searchResults) {
                   iteration: roundNum,
                   is_selected: true,
                   note_id: post.note_id,
-                  note_url: post.note_url
+                  note_url: post.note_url,
+                  body_text: post.body_text || '',
+                  images: post.images || [],
+                  image_list: imageList,
+                  interact_info: post.interact_info || {}
                 };
 
                 edges.push({

+ 68 - 28
visualization/sug_v6_1_2_8/index.js

@@ -482,31 +482,70 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
           </div>
         )}
 
-        {/* 标签 */}
-        <div style={{ display: 'flex', gap: '6px', marginBottom: '8px', flexWrap: 'wrap' }}>
-          <span style={{
-            display: 'inline-block',
-            padding: '2px 8px',
-            borderRadius: '12px',
-            background: '#fff1f2',
-            color: '#be123c',
-            fontSize: '10px',
-            fontWeight: '500',
-          }}>
-            {data.matchLevel}
-          </span>
-          <span style={{
-            display: 'inline-block',
-            padding: '2px 8px',
-            borderRadius: '12px',
-            background: '#fff7ed',
-            color: '#c2410c',
-            fontSize: '10px',
-            fontWeight: '500',
+        {/* 互动数据 */}
+        {data.interact_info && (
+          <div style={{
+            display: 'flex',
+            gap: '8px',
+            marginBottom: '8px',
+            flexWrap: 'wrap',
+            fontSize: '11px',
+            color: '#9f1239',
           }}>
-            Score: {data.score}
-          </span>
-        </div>
+            {data.interact_info.liked_count > 0 && (
+              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                ❤️ {data.interact_info.liked_count}
+              </span>
+            )}
+            {data.interact_info.collected_count > 0 && (
+              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                ⭐ {data.interact_info.collected_count}
+              </span>
+            )}
+            {data.interact_info.comment_count > 0 && (
+              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                💬 {data.interact_info.comment_count}
+              </span>
+            )}
+            {data.interact_info.shared_count > 0 && (
+              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                🔗 {data.interact_info.shared_count}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* 标签 */}
+        {(data.matchLevel || data.score) && (
+          <div style={{ display: 'flex', gap: '6px', marginBottom: '8px', flexWrap: 'wrap' }}>
+            {data.matchLevel && (
+              <span style={{
+                display: 'inline-block',
+                padding: '2px 8px',
+                borderRadius: '12px',
+                background: '#fff1f2',
+                color: '#be123c',
+                fontSize: '10px',
+                fontWeight: '500',
+              }}>
+                {data.matchLevel}
+              </span>
+            )}
+            {data.score && (
+              <span style={{
+                display: 'inline-block',
+                padding: '2px 8px',
+                borderRadius: '12px',
+                background: '#fff7ed',
+                color: '#c2410c',
+                fontSize: '10px',
+                fontWeight: '500',
+              }}>
+                Score: {data.score}
+              </span>
+            )}
+          </div>
+        )}
 
         {/* 描述 */}
         {expanded && data.description && (
@@ -855,21 +894,22 @@ function transformData(data) {
       canvasIdToNodeData[canvasId] = true;
 
       // 根据节点类型创建不同的数据结构
-      if (nodeType === 'note') {
+      if (nodeType === 'note' || nodeType === 'post') {
         nodes.push({
           id: canvasId,
           originalId: originalId,
           type: 'note',
           data: {
-            title: node.title || '帖子',
+            title: node.query || node.title || '帖子',
             matchLevel: node.match_level,
             score: node.relevance_score ? node.relevance_score.toFixed(2) : '0.00',
-            description: node.desc || '',
+            description: node.body_text || node.desc || '',
             isSelected: node.is_selected !== undefined ? node.is_selected : true,
             imageList: node.image_list || [],
             noteUrl: node.note_url || '',
             evaluationReason: node.evaluation_reason || '',
-            nodeType: 'note',
+            interact_info: node.interact_info || {},
+            nodeType: nodeType,
           },
           position: { x: 0, y: 0 },
         });