html update

assignment_ui.py

@@ -142,59 +142,72 @@ def create_assignment_ui(user_data, assignment_service, submission_service):
                     choices.append(choice)
                 return gr.update(choices=choices)
             
-            def generate_submission_html(submission_json):
-                submission_data = submission_json.get('submission_data', {})
-                content = submission_data.get('content', {})
-                content_type = content.get('content_type', '')
-
-                html = f"""
+            cdef generate_submission_html(submission_json):
+                html_parts = []
+                
+                # 添加外层结构的开始标签
+                html_parts.append("""
                 <div style="background-color: #f8f9fa; padding: 30px; border-radius: 15px; font-family: 'Helvetica', sans-serif;">
                     <h2 style="color: #007bff; font-size: 28px; margin-bottom: 20px;">📝 學生回傳作業</h2>
                     <div style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
-                        <details>
-                            <summary style="cursor: pointer; font-weight: bold; color: #6c757d; padding: 10px; background-color: #e9ecef; border-radius: 5px;">學生资讯</summary>
-                            <div style="margin-top: 10px;">
-                                <div style="margin-bottom: 20px;">
-                                    <div style="font-weight: bold; color: #6c757d; margin-bottom: 5px;">👤 學生姓名</div>
-                                    <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px;">
-                                        {submission_json.get('student_name', '未提供')}
-                                    </div>
-                                </div>
-                                <div style="margin-bottom: 20px;">
-                                    <div style="font-weight: bold; color: #6c757d; margin-bottom: 5px;">🆔 學生ID</div>
-                                    <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px;">
-                                        {submission_json.get('student_id', '未提供')}
-                                    </div>
-                                </div>
-                                <div style="margin-bottom: 20px;">
-                                    <div style="font-weight: bold; color: #6c757d; margin-bottom: 5px;">🕒 缴交时间</div>
-                                    <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px;">{submission_json.get('timestamp', '未提供')}</div>
-                                </div>
-                            </div>
-                        </details>
-                """
+                """)
+                
+                html_parts.append(generate_student_info_html(submission_json))
+                
+                submission_data = submission_json.get('submission_data', {})
+                content = submission_data.get('content', {})
+                content_type = content.get('content_type', '')
 
                 if content_type == 'chinese_full_paragraph_evaluation':
-                    html += generate_chinese_full_paragraph_html(content)
+                    html_parts.append(generate_chinese_full_paragraph_html(content))
                 elif content_type == 'english_full_paragraph_evaluation':
-                    html += generate_english_full_paragraph_html(content)
+                    html_parts.append(generate_english_full_paragraph_html(content))
                 else:
-                    html += "<p>不支持的内容类型</p>"
-
-                html += """
+                    html_parts.append("<p>不支持的内容类型</p>")
+                
+                # 添加外层结构的结束标签
+                html_parts.append("""
                     </div>
                 </div>
+                """)
+                
+                return ''.join(html_parts)
+
+            def generate_student_info_html(submission_json):
+                return f"""
+                <details>
+                    <summary style="cursor: pointer; font-weight: bold; color: #6c757d; padding: 10px; background-color: #e9ecef; border-radius: 5px;">學生資訊</summary>
+                    <div style="margin-top: 10px;">
+                        <div style="margin-bottom: 20px;">
+                            <div style="font-weight: bold; color: #6c757d; margin-bottom: 5px;">👤 學生姓名</div>
+                            <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px;">
+                                {submission_json.get('student_name', '未提供')}
+                            </div>
+                        </div>
+                        <div style="margin-bottom: 20px;">
+                            <div style="font-weight: bold; color: #6c757d; margin-bottom: 5px;">🆔 學生ID</div>
+                            <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px;">
+                                {submission_json.get('student_id', '未提供')}
+                            </div>
+                        </div>
+                        <div style="margin-bottom: 20px;">
+                            <div style="font-weight: bold; color: #6c757d; margin-bottom: 5px;">🕒 繳交時間</div>
+                            <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px;">{submission_json.get('timestamp', '未提供')}</div>
+                        </div>
+                    </div>
+                </details>
                 """
-                return html
 
             def generate_chinese_full_paragraph_html(content):
-                html = """
+                html_parts = []
+                
+                html_parts.append("""
                     <details open>
                         <summary style="cursor: pointer; font-weight: bold; color: #28a745; padding: 10px; background-color: #e9ecef; border-radius: 5px; margin-top: 20px;">原文評估</summary>
                         <div style="margin-top: 10px;">
-                """
+                """)
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #28a745; margin-bottom: 5px;">📄 输入段落全文</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('chinese_full_paragraph_input', '未提供')}</div>
@@ -204,21 +217,21 @@ def create_assignment_ui(user_data, assignment_service, submission_service):
                                 <div style="font-weight: bold; color: #17a2b8; margin-bottom: 5px;">📊 段落全文分析</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('chinese_full_paragraph_evaluate_output_text', '未提供')}</div>
                             </div>
-                """
+                """)
 
                 if 'chinese_full_paragraph_evaluate_output_table' in content:
-                    html += generate_table_html(content['chinese_full_paragraph_evaluate_output_table'], "📊 评分结果", "#dc3545")
+                    html_parts.append(generate_table_html(content['chinese_full_paragraph_evaluate_output_table'], "📊 评分结果", "#dc3545"))
 
-                html += """
+                html_parts.append("""
                         </div>
                     </details>
                     
                     <details>
                         <summary style="cursor: pointer; font-weight: bold; color: #6610f2; padding: 10px; background-color: #e9ecef; border-radius: 5px; margin-top: 20px;">第二次修改</summary>
                         <div style="margin-top: 10px;">
-                """
+                """)
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #6610f2; margin-bottom: 5px;">🔄 段落改善建议 输入</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('chinese_full_paragraph_refine_input', '未提供')}</div>
@@ -228,69 +241,71 @@ def create_assignment_ui(user_data, assignment_service, submission_service):
                                 <div style="font-weight: bold; color: #fd7e14; margin-bottom: 5px;">🔄 段落改善建议</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('chinese_full_paragraph_refine_output_text', '未提供')}</div>
                             </div>
-                """
+                """)
 
                 if 'chinese_full_paragraph_refine_output_table' in content:
-                    html += generate_table_html(content['chinese_full_paragraph_refine_output_table'], "📊 修改后评分", "#20c997")
+                    html_parts.append(generate_table_html(content['chinese_full_paragraph_refine_output_table'], "📊 修改后评分", "#20c997"))
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #20c997; margin-bottom: 5px;">📝 修改结果</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('chinese_full_paragraph_save_output', '未提供')}</div>
                             </div>
                         </div>
                     </details>
-                """
+                """)
 
-                return html
+                return ''.join(html_parts)
 
             def generate_english_full_paragraph_html(content):
-                html = """
+                html_parts = []
+                
+                html_parts.append("""
                     <details open>
                         <summary style="cursor: pointer; font-weight: bold; color: #28a745; padding: 10px; background-color: #e9ecef; border-radius: 5px; margin-top: 20px;">原文</summary>
                         <div style="margin-top: 10px;">
-                """
+                """)
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #28a745; margin-bottom: 5px;">📄 輸入段落全文</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('full_paragraph_input', '未提供')}</div>
                             </div>
-                """
+                """)
 
                 if 'full_paragraph_evaluate_output' in content:
-                    html += generate_table_html(content['full_paragraph_evaluate_output'], "📊 評分結果", "#dc3545")
+                    html_parts.append(generate_table_html(content['full_paragraph_evaluate_output'], "📊 評分結果", "#dc3545"))
 
-                html += """
+                html_parts.append("""
                         </div>
                     </details>
                     
                     <details>
                         <summary style="cursor: pointer; font-weight: bold; color: #6610f2; padding: 10px; background-color: #e9ecef; border-radius: 5px; margin-top: 20px;">修訂結果</summary>
                         <div style="margin-top: 10px;">
-                """
+                """)
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #6610f2; margin-bottom: 5px;">🔄 修訂文法與拼字錯誤 輸入</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('full_paragraph_correct_grammatical_spelling_errors_input', '未提供')}</div>
                             </div>
-                """
+                """)
 
                 if 'full_paragraph_correct_grammatical_spelling_errors_output_table' in content:
-                    html += generate_table_html(content['full_paragraph_correct_grammatical_spelling_errors_output_table'], "📊 修訂文法與拼字錯誤", "#20c997")
+                    html_parts.append(generate_table_html(content['full_paragraph_correct_grammatical_spelling_errors_output_table'], "📊 修訂文法與拼字錯誤", "#20c997"))
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #6610f2; margin-bottom: 5px;">🔄 段落改善建議 輸入</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('full_paragraph_refine_input', '未提供')}</div>
                             </div>
-                """
+                """)
 
                 if 'full_paragraph_refine_output_table' in content:
-                    html += generate_table_html(content['full_paragraph_refine_output_table'], "📊 段落改善建議", "#20c997")
+                    html_parts.append(generate_table_html(content['full_paragraph_refine_output_table'], "📊 段落改善建議", "#20c997"))
 
-                html += f"""
+                html_parts.append(f"""
                             <div style="margin-bottom: 20px;">
                                 <div style="font-weight: bold; color: #fd7e14; margin-bottom: 5px;">🔄 修改建議</div>
                                 <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; white-space: pre-wrap;">{content.get('full_paragraph_refine_output', '未提供')}</div>
@@ -302,55 +317,49 @@ def create_assignment_ui(user_data, assignment_service, submission_service):
                             </div>
                         </div>
                     </details>
-                """
+                """)
 
-                return html
+                return ''.join(html_parts)
 
             def generate_table_html(table_data, title, color):
                 if not table_data or not isinstance(table_data, list):
                     return ""
 
-                html = f"""
+                html_parts = []
+                
+                html_parts.append(f"""
                     <div style="margin-bottom: 20px;">
                         <div style="font-weight: bold; color: {color}; margin-bottom: 5px;">{title}</div>
                         <div style="background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; overflow-x: auto;">
                             <table style="width: 100%; border-collapse: collapse; white-space: nowrap;">
                                 <tr style="background-color: #e9ecef;">
-                """
+                """)
 
-                # 動態生成表頭
+                # 动态生成表头
                 headers = table_data[0].keys()
                 for header in headers:
                     if header.lower() == '評分' or header.lower() == 'score':
-                        html += f'<th style="padding: 10px; border: 1px solid #dee2e6; min-width: 80px;">{header}</th>'
+                        html_parts.append(f'<th style="padding: 10px; border: 1px solid #dee2e6; min-width: 80px;">{header}</th>')
                     else:
-                        html += f'<th style="padding: 10px; border: 1px solid #dee2e6;">{header}</th>'
-                html += '</tr>'
+                        html_parts.append(f'<th style="padding: 10px; border: 1px solid #dee2e6;">{header}</th>')
+                html_parts.append('</tr>')
 
-                # 動態生成表格內容
+                # 动态生成表格内容
                 for item in table_data:
-                    html += '<tr>'
+                    html_parts.append('<tr>')
                     for key, value in item.items():
                         if key.lower() == '評分' or key.lower() == 'score':
-                            html += f'<td style="padding: 10px; border: 1px solid #dee2e6; min-width: 80px; text-align: center;">{value}</td>'
+                            html_parts.append(f'<td style="padding: 10px; border: 1px solid #dee2e6; min-width: 80px; text-align: center;">{value}</td>')
                         else:
-                            html += f'<td style="padding: 10px; border: 1px solid #dee2e6;">{value}</td>'
-                    html += '</tr>'
+                            html_parts.append(f'<td style="padding: 10px; border: 1px solid #dee2e6;">{value}</td>')
+                    html_parts.append('</tr>')
 
-                html += """
+                html_parts.append("""
                             </table>
                         </div>
                     </div>
-                """
-                return html
-
-            def update_submission_data_html(submission_json):
-                html = generate_submission_html(submission_json)
-                return gr.update(value=html)
-
-            def update_submission_data_html(submission_json):
-                html = generate_submission_html(submission_json)
-                return gr.update(value=html)
+                """)
+                return ''.join(html_parts)
 
             def update_submission_data_html(submission_json):
                 html = generate_submission_html(submission_json)