Update app.py

app.py

@@ -134,54 +134,68 @@ def create_gradio_interface(recommendation_system: RecommendationSystem) -> gr.I
     with gr.Blocks(theme=gr.themes.Soft()) as interface:
         gr.Markdown("""
         # 推文推荐系统
-        调整下方的权重来获取个性化推荐：
+        调整权重以获取个性化推荐
         """)
         
         with gr.Row():
             with gr.Column(scale=1):
-                visibility_weight = gr.Slider(
-                    0, 1, 0.5,
-                    label="可信度权重",
-                    info="调整对内容可信度的重视程度"
-                )
-                sentiment_weight = gr.Slider(
-                    0, 1, 0.3,
-                    label="情感倾向权重",
-                    info="调整对情感倾向的重视程度"
-                )
-                popularity_weight = gr.Slider(
-                    0, 1, 0.2,
-                    label="热度权重",
-                    info="调整对内容热度的重视程度"
-                )
+                visibility_weight = gr.Slider(0, 1, 0.5, label="可信度权重", info="调整对内容可信度的重视程度")
+                sentiment_weight = gr.Slider(0, 1, 0.3, label="情感倾向权重", info="调整对情感倾向的重视程度")
+                popularity_weight = gr.Slider(0, 1, 0.2, label="热度权重", info="调整对内容热度的重视程度")
                 submit_btn = gr.Button("获取推荐", variant="primary")
 
             with gr.Column(scale=2):
-                results = gr.Dataframe(
-                    headers=["推文内容", "评分详情"],
-                    label="推荐结果"
-                )
-                
-        def format_for_display(recommendations):
-            rows = []
-            for rec in recommendations["recommendations"]:
+                output_html = gr.HTML()
+
+        def format_recommendations(raw_recommendations):
+            html = '<div style="font-family: sans-serif;">'
+            
+            # 添加评分说明
+            html += '''
+            <div style="margin-bottom: 20px; padding: 15px; background-color: #f5f5f5; border-radius: 8px;">
+                <h3 style="margin-top: 0;">评分说明</h3>
+                <ul style="margin: 0;">
+                    <li><strong>可信度</strong>：内容的可信程度评估</li>
+                    <li><strong>情感倾向</strong>：文本的情感分析（积极/消极/中性）</li>
+                    <li><strong>热度</strong>：基于点赞和转发的归一化分数</li>
+                </ul>
+            </div>
+            '''
+            
+            # 显示推荐的tweets
+            for i, rec in enumerate(raw_recommendations["recommendations"], 1):
                 scores = rec["scores"]
-                score_text = (
-                    f"总分: {scores['总分']}\n"
-                    f"可信度: {scores['可信度']}\n"
-                    f"情感倾向: {scores['情感倾向']}\n"
-                    f"热度: {scores['热度']}\n"
-                    f"互动: {scores['互动数']}"
-                )
-                rows.append([rec["text"], score_text])
-            return rows
+                html += f'''
+                <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 8px;">
+                    <div style="margin-bottom: 10px; font-size: 1.1em;">{rec["text"]}</div>
+                    <div style="display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.9em; color: #666;">
+                        <span style="padding: 3px 8px; background-color: #e3f2fd; border-radius: 4px;">
+                            总分: {scores["总分"]}
+                        </span>
+                        <span style="padding: 3px 8px; background-color: #e8f5e9; border-radius: 4px;">
+                            可信度: {scores["可信度"]}
+                        </span>
+                        <span style="padding: 3px 8px; background-color: #fff3e0; border-radius: 4px;">
+                            情感: {scores["情感倾向"]}
+                        </span>
+                        <span style="padding: 3px 8px; background-color: #fce4ec; border-radius: 4px;">
+                            热度: {scores["热度"]}
+                        </span>
+                        <span style="padding: 3px 8px; background-color: #f3e5f5; border-radius: 4px;">
+                            {scores["互动数"]}
+                        </span>
+                    </div>
+                </div>
+                '''
+            html += '</div>'
+            return html
 
         submit_btn.click(
-            fn=lambda v, s, p: format_for_display(
+            fn=lambda v, s, p: format_recommendations(
                 recommendation_system.get_recommendations(RecommendationWeights(v, s, p))
             ),
             inputs=[visibility_weight, sentiment_weight, popularity_weight],
-            outputs=results
+            outputs=output_html
         )
         
     return interface