Главная Обзор Помощь
Регистрация Вход
haiany
/
webnovel-writer
зеркало из https://github.com/lingfengQAQ/webnovel-writer.git
1
0
Ответвить 0
Файлы Задачи 0 Вики
Дерево: a033f36d4f
Ветки Метки
webnovel-writer
/
docs
/
architecture
/
system-architecture-diagram.html

system-architecture-diagram.html 18 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>Webnovel Writer 系统架构</title>
    7. 

  7. <style>
    8. 

  8. body { margin: 20px; background: #f0eef6; font-family: -apple-system, "Microsoft YaHei", sans-serif; }
    9. 

  9. .arch-wrapper { display: flex; gap: 12px; }
    10. 

  10. .arch-sidebar { width: 175px; flex-shrink: 0; }
    11. 

  11. .arch-main { flex: 1; min-width: 0; }
    12. 

  12. .arch-title { text-align: center; font-size: 22px; font-weight: bold; color: #312e81; margin-bottom: 4px; }
    13. 

  13. .arch-subtitle { text-align: center; font-size: 12px; color: #6366f1; margin-bottom: 14px; }
    14. 

  14. .arch-layer { margin: 7px 0; padding: 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(67,56,202,0.06); }
    15. 

  15. .arch-layer-title { font-size: 13px; font-weight: bold; margin-bottom: 8px; text-align: center; }
    16. 

  16. .arch-grid { display: grid; gap: 6px; }
    17. 

  17. .arch-grid-2 { grid-template-columns: repeat(2,1fr); }
    18. 

  18. .arch-grid-3 { grid-template-columns: repeat(3,1fr); }
    19. 

  19. .arch-grid-4 { grid-template-columns: repeat(4,1fr); }
    20. 

  20. .arch-grid-5 { grid-template-columns: repeat(5,1fr); }
    21. 

  21. .arch-box { border-radius: 5px; padding: 7px; text-align: center; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: #312e81; background: rgba(255,255,255,0.85); border: 1px solid #c7d2fe; }
    22. 

  22. .arch-box.highlight { background: linear-gradient(135deg,#e0e7ff,#c7d2fe); border: 2px solid #4f46e5; }
    23. 

  23. .arch-box.tech { font-size: 10px; color: #4338ca; background: rgba(238,242,255,0.8); }
    24. 

  24. .arch-box.write { border-left: 3px solid #dc2626; }
    25. 

  25. .arch-box.read { border-left: 3px solid #16a34a; }
    26. 

  26. .arch-box.rw { border-left: 3px solid #d97706; }
    27. 

  27. .arch-layer.user { background: linear-gradient(135deg,#dbeafe,#bfdbfe); border: 2px solid #3b82f6; }
    28. 

  28. .arch-layer.user .arch-layer-title { color: #1e40af; }
    29. 

  29. .arch-layer.application { background: linear-gradient(135deg,#e0e7ff,#c7d2fe); border: 2px solid #4f46e5; }
    30. 

  30. .arch-layer.application .arch-layer-title { color: #3730a3; }
    31. 

  31. .arch-layer.ai { background: linear-gradient(135deg,#ede9fe,#ddd6fe); border: 2px solid #7c3aed; }
    32. 

  32. .arch-layer.ai .arch-layer-title { color: #5b21b6; }
    33. 

  33. .arch-layer.data { background: linear-gradient(135deg,#f3e8ff,#e9d5ff); border: 2px solid #9333ea; }
    34. 

  34. .arch-layer.data .arch-layer-title { color: #7e22ce; }
    35. 

  35. .arch-layer.infra { background: linear-gradient(135deg,#fae8ff,#f5d0fe); border: 2px solid #a855f7; }
    36. 

  36. .arch-layer.infra .arch-layer-title { color: #86198f; }
    37. 

  37. .arch-layer.external { background: linear-gradient(135deg,#f1f5f9,#e2e8f0); border: 2px dashed #94a3b8; }
    38. 

  38. .arch-layer.external .arch-layer-title { color: #64748b; }
    39. 

  39. .arch-sidebar-panel { border-radius: 6px; padding: 10px; background: linear-gradient(135deg,#eef2ff,#e0e7ff); border: 2px solid #a5b4fc; margin-bottom: 7px; box-shadow: 0 1px 3px rgba(67,56,202,0.04); }
    40. 

  40. .arch-sidebar-title { font-size: 11px; font-weight: bold; text-align: center; color: #312e81; margin-bottom: 5px; }
    41. 

  41. .arch-sidebar-item { font-size: 9.5px; text-align: center; color: #3730a3; background: rgba(255,255,255,0.8); padding: 4px; border-radius: 4px; margin: 3px 0; border: 1px solid #c7d2fe; }
    42. 

  42. .arch-sidebar-item.metric { background: #e0e7ff; border: 1px solid #6366f1; color: #3730a3; font-weight: 600; }
    43. 

  43. .arch-subgroup { display: flex; gap: 6px; margin-top: 6px; }
    44. 

  44. .arch-subgroup-box { flex: 1; border-radius: 6px; padding: 7px; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.08); }
    45. 

  45. .arch-subgroup-title { font-size: 10px; font-weight: bold; color: #374151; text-align: center; margin-bottom: 5px; }
    46. 

  46. .legend { display: flex; gap: 14px; justify-content: center; margin: 8px 0; font-size: 10px; color: #4b5563; }
    47. 

  47. .legend-item { display: flex; align-items: center; gap: 4px; }
    48. 

  48. .legend-bar { width: 14px; height: 10px; border-radius: 2px; }
    49. 

  49. </style>
    50. 

  50. </head>
    51. 

  51. <body>
    52. 

  52. <div style="width: 1280px; margin: 0 auto; background: #f5f3ff; padding: 20px; border-radius: 8px; border: 1px solid #c7c2ea;">
    53. 

  53.   <div class="arch-title">📖 Webnovel Writer 系统架构</div>
    54. 

  54.   <div class="arch-subtitle">init → plan → write 六层主链 ｜ 全读写映射</div>
    55. 

  55.   <div class="legend">
    56. 

  56.     <div class="legend-item"><div class="legend-bar" style="background:#dc2626;"></div> 写入（Write）</div>
    57. 

  57.     <div class="legend-item"><div class="legend-bar" style="background:#16a34a;"></div> 读取（Read）</div>
    58. 

  58.     <div class="legend-item"><div class="legend-bar" style="background:#d97706;"></div> 读写（R/W）</div>
    59. 

  59.     <div class="legend-item"><div class="legend-bar" style="background:#4f46e5; border: 2px solid #312e81;"></div> 核心组件</div>
    60. 

  60.   </div>
    61. 

  61.   <div class="arch-wrapper">
    62. 

  62.     <div class="arch-sidebar">
    63. 

  63.       <div class="arch-sidebar-panel">
    64. 

  64.         <div class="arch-sidebar-title">📂 项目文件（Project Files）</div>
    65. 

  65.         <div class="arch-sidebar-item">大纲/总纲.md</div>
    66. 

  66.         <div class="arch-sidebar-item">大纲/第X卷-详细大纲.md</div>
    67. 

  67.         <div class="arch-sidebar-item">大纲/第X卷-时间线.md</div>
    68. 

  68.         <div class="arch-sidebar-item">大纲/第X卷-节拍表.md</div>
    69. 

  69.         <div class="arch-sidebar-item">设定集/*.md</div>
    70. 

  70.         <div class="arch-sidebar-item">正文/第NNNN章.md</div>
    71. 

  71.         <div class="arch-sidebar-item metric">.webnovel/idea_bank.json</div>
    72. 

  72.       </div>
    73. 

  73.       <div class="arch-sidebar-panel">
    74. 

  74.         <div class="arch-sidebar-title">📋 合同树（.story-system/）</div>
    75. 

  75.         <div class="arch-sidebar-item metric">MASTER_SETTING.json</div>
    76. 

  76.         <div class="arch-sidebar-item">volumes/volume_NNN.json</div>
    77. 

  77.         <div class="arch-sidebar-item">chapters/chapter_NNN.json</div>
    78. 

  78.         <div class="arch-sidebar-item">reviews/chapter_NNN.review.json</div>
    79. 

  79.         <div class="arch-sidebar-item">anti_patterns.json</div>
    80. 

  80.         <div class="arch-sidebar-item metric">commits/chapter_NNN.commit.json</div>
    81. 

  81.       </div>
    82. 

  82.       <div class="arch-sidebar-panel">
    83. 

  83.         <div class="arch-sidebar-title">💾 投影存储（Projection Stores）</div>
    84. 

  84.         <div class="arch-sidebar-item">state.json（状态）</div>
    85. 

  85.         <div class="arch-sidebar-item">index.db（实体/关系）</div>
    86. 

  86.         <div class="arch-sidebar-item">summaries/chNNNN.md（摘要）</div>
    87. 

  87.         <div class="arch-sidebar-item">memory_scratchpad.json（记忆）</div>
    88. 

  88.         <div class="arch-sidebar-item">vector_db（向量索引）</div>
    89. 

  89.       </div>
    90. 

  90.     </div>
    91. 

  91.     <div class="arch-main">
    92. 

  92.       <div class="arch-layer user">
    93. 

  93.         <div class="arch-layer-title">🎯 用户入口（User Entry）: /webnovel-init → /webnovel-plan → /webnovel-write</div>
    94. 

  94.         <div class="arch-subgroup">
    95. 

  95.           <div class="arch-subgroup-box">
    96. 

  96.             <div class="arch-subgroup-title">/webnovel-init（初始化）</div>
    97. 

  97.             <div class="arch-grid arch-grid-3">
    98. 

  98.               <div class="arch-box read">Read<br><small>genre-tropes.md<br>genre-profiles.md</small></div>
    99. 

  99.               <div class="arch-box highlight">交互收集 7 步<br><small>题材/角色/金手指<br>世界观/创意约束</small></div>
    100. 

  100.               <div class="arch-box write">Write<br><small>state.json<br>设定集/*.md<br>总纲.md<br>idea_bank.json</small></div>
    101. 

  101.             </div>
    102. 

  102.           </div>
    103. 

  103.           <div class="arch-subgroup-box">
    104. 

  104.             <div class="arch-subgroup-title">/webnovel-plan（规划）</div>
    105. 

  105.             <div class="arch-grid arch-grid-3">
    106. 

  106.               <div class="arch-box read">Read<br><small>state.json（genre）<br>总纲.md<br>设定集/*.md<br>summaries/（跨卷）</small></div>
    107. 

  107.               <div class="arch-box highlight">卷纲 → 时间线<br>→ 拆章纲<br><small>节拍表/CBN/CPNs/CEN</small></div>
    108. 

  108.               <div class="arch-box write">Write<br><small>节拍表.md<br>时间线.md<br>详细大纲.md<br>设定集（增量）</small></div>
    109. 

  109.             </div>
    110. 

  110.           </div>
    111. 

  111.           <div class="arch-subgroup-box">
    112. 

  112.             <div class="arch-subgroup-title">/webnovel-write（写章）</div>
    113. 

  113.             <div class="arch-grid arch-grid-2">
    114. 

  114.               <div class="arch-box highlight">Step 1→6<br><small>上下文→起草→审查<br>→润色→提交→备份</small></div>
    115. 

  115.               <div class="arch-box write">Write<br><small>正文/第NNNN章.md<br>commit.json<br>→ 5路投影</small></div>
    116. 

  116.             </div>
    117. 

  117.           </div>
    118. 

  118.         </div>
    119. 

  119.       </div>
    120. 

  120.       <div class="arch-layer external">
    121. 

  121.         <div class="arch-layer-title">📚 Layer 1: 知识层（Knowledge）— CSV 表 + 参考文档</div>
    122. 

  122.         <div class="arch-grid arch-grid-5">
    123. 

  123.           <div class="arch-box highlight">题材与调性推理.csv<br><small>路由表（Route）<br>8 行流派</small></div>
    124. 

  124.           <div class="arch-box highlight">裁决规则.csv<br><small>裁决表（Reasoning）<br>7 题材</small></div>
    125. 

  125.           <div class="arch-box tech">命名规则.csv<br><small>基础表（Base）</small></div>
    126. 

  126.           <div class="arch-box tech">人设与关系.csv<br><small>基础表（Base）</small></div>
    127. 

  127.           <div class="arch-box tech">写作技法.csv<br><small>基础表（Base）</small></div>
    128. 

  128.         </div>
    129. 

  129.         <div class="arch-grid arch-grid-5" style="margin-top: 6px;">
    130. 

  130.           <div class="arch-box tech">场景写法.csv<br><small>基础表（Base）</small></div>
    131. 

  131.           <div class="arch-box tech">金手指与设定.csv<br><small>基础表（Base）</small></div>
    132. 

  132.           <div class="arch-box tech">桥段套路.csv<br><small>动态表（Dynamic）</small></div>
    133. 

  133.           <div class="arch-box tech">爽点与节奏.csv<br><small>动态表（Dynamic）</small></div>
    134. 

  134.           <div class="arch-box">CSV_CONFIG<br><small>per-table 注册<br>search_cols / output_cols<br>poison_col / role</small></div>
    135. 

  135.         </div>
    136. 

  136.       </div>
    137. 

  137.       <div class="arch-layer ai">
    138. 

  138.         <div class="arch-layer-title">🧠 Layer 2: 裁决层（Reasoning）— story_system_engine.py</div>
    139. 

  139.         <div class="arch-grid arch-grid-4">
    140. 

  140.           <div class="arch-box read">_route()<br><small>Read: 题材与调性推理.csv<br>匹配题材 → 推荐表</small></div>
    141. 

  141.           <div class="arch-box read">_collect_tables()<br><small>Read: 基础表 + 动态表<br>BM25 检索</small></div>
    142. 

  142.           <div class="arch-box highlight">_load_reasoning()<br><small>Read: 裁决规则.csv<br>别名匹配（修仙→东方仙侠）<br>fallback 到原始 genre</small></div>
    143. 

  143.           <div class="arch-box highlight">_apply_reasoning()<br><small>冲突裁决排序<br>毒点加权<br>反模式注入</small></div>
    144. 

  144.         </div>
    145. 

  145.       </div>
    146. 

  146.       <div class="arch-layer application">
    147. 

  147.         <div class="arch-layer-title">📜 Layer 3: 合同层（Contract）— .story-system/</div>
    148. 

  148.         <div class="arch-subgroup">
    149. 

  149.           <div class="arch-subgroup-box">
    150. 

  150.             <div class="arch-subgroup-title">写前合同（story-system --persist）</div>
    151. 

  151.             <div class="arch-grid arch-grid-4">
    152. 

  152.               <div class="arch-box write">MASTER_SETTING<br><small>Write: 题材/调性/禁忌</small></div>
    153. 

  153.               <div class="arch-box write">VOLUME_BRIEF<br><small>Write: 卷目标/节奏</small></div>
    154. 

  154.               <div class="arch-box write">CHAPTER_BRIEF<br><small>Write: reasoning 裁决<br>chapter_focus（参考）</small></div>
    155. 

  155.               <div class="arch-box write">REVIEW_CONTRACT<br><small>Write: 必须节点/禁区</small></div>
    156. 

  156.             </div>
    157. 

  157.           </div>
    158. 

  158.           <div class="arch-subgroup-box">
    159. 

  159.             <div class="arch-subgroup-title">写后真源（chapter-commit）</div>
    160. 

  160.             <div class="arch-grid arch-grid-2">
    161. 

  161.               <div class="arch-box highlight write">CHAPTER_COMMIT<br><small>Write: accepted / rejected<br>events + deltas + summary</small></div>
    162. 

  162.               <div class="arch-box">anti_patterns.json<br><small>Write: 题材毒点集合</small></div>
    163. 

  163.             </div>
    164. 

  164.           </div>
    165. 

  165.         </div>
    166. 

  166.       </div>
    167. 

  167.       <div class="arch-layer data">
    168. 

  168.         <div class="arch-layer-title">🔍 Layer 4: 上下文层（Context）— 写前组装</div>
    169. 

  169.         <div class="arch-subgroup">
    170. 

  170.           <div class="arch-subgroup-box">
    171. 

  171.             <div class="arch-subgroup-title">context-agent（Step 1 子代理）</div>
    172. 

  172.             <div class="arch-grid arch-grid-4">
    173. 

  173.               <div class="arch-box read">load-context<br><small>Read: contracts<br>summaries / protagonist<br>rules / loops / memory_pack<br>genre_profile_excerpt</small></div>
    174. 

  174.               <div class="arch-box read">Read 章纲原文<br><small>大纲/第X卷-详细大纲.md<br>（最高权重）</small></div>
    175. 

  175.               <div class="arch-box read">按需深查<br><small>query-entity<br>query-rules<br>get-timeline<br>get-reader-signals</small></div>
    176. 

  176.               <div class="arch-box highlight write">输出: 写作任务书<br><small>五段格式<br>消费 reasoning 裁决<br>内化 Anti-AI 铁律</small></div>
    177. 

  177.             </div>
    178. 

  178.           </div>
    179. 

  179.           <div class="arch-subgroup-box">
    180. 

  180.             <div class="arch-subgroup-title">辅助查询</div>
    181. 

  181.             <div class="arch-grid arch-grid-3">
    182. 

  182.               <div class="arch-box tech read">context_manager<br><small>纯 JSON 组装器<br>Read: contracts / state<br>runtime / guidance</small></div>
    183. 

  183.               <div class="arch-box tech read">knowledge_query<br><small>时序查询<br>entity_state_at_chapter<br>relationships_at_chapter</small></div>
    184. 

  184.               <div class="arch-box tech read">reference_search<br><small>CSV BM25 检索<br>per-table search_cols</small></div>
    185. 

  185.             </div>
    186. 

  186.           </div>
    187. 

  187.         </div>
    188. 

  188.       </div>
    189. 

  189.       <div class="arch-layer ai" style="border-color: #9333ea;">
    190. 

  190.         <div class="arch-layer-title" style="color: #7e22ce;">⚙️ Layer 5: 提交层（Commit）— 写后事实入口</div>
    191. 

  191.         <div class="arch-subgroup">
    192. 

  192.           <div class="arch-subgroup-box">
    193. 

  193.             <div class="arch-subgroup-title">data-agent（Step 5.1 子代理）</div>
    194. 

  194.             <div class="arch-grid arch-grid-4">
    195. 

  195.               <div class="arch-box read">Read 正文<br><small>正文/第NNNN章.md</small></div>
    196. 

  196.               <div class="arch-box read">查询实体<br><small>get-core-entities<br>recent-appearances</small></div>
    197. 

  197.               <div class="arch-box highlight write">提取事实<br><small>Write: extraction_result<br>fulfillment_result<br>disambiguation_result</small></div>
    198. 

  198.               <div class="arch-box write">摘要生成<br><small>summary_text<br>100-150字 + 钩子</small></div>
    199. 

  199.             </div>
    200. 

  200.           </div>
    201. 

  201.           <div class="arch-subgroup-box">
    202. 

  202.             <div class="arch-subgroup-title">chapter-commit CLI（Step 5.2）</div>
    203. 

  203.             <div class="arch-grid arch-grid-3">
    204. 

  204.               <div class="arch-box read">Read 4份 artifacts<br><small>tmp/*.json</small></div>
    205. 

  205.               <div class="arch-box highlight">判定 accepted / rejected<br><small>blocking_count = 0<br>missed_nodes = 空<br>pending = 空</small></div>
    206. 

  206.               <div class="arch-box write">Write commit.json<br><small>→ 触发投影链</small></div>
    207. 

  207.             </div>
    208. 

  208.           </div>
    209. 

  209.         </div>
    210. 

  210.       </div>
    211. 

  211.       <div class="arch-layer infra">
    212. 

  212.         <div class="arch-layer-title">💿 Layer 6: 投影层（Projection）— EventProjectionRouter → 5 Writers</div>
    213. 

  213.         <div class="arch-grid arch-grid-5">
    214. 

  214.           <div class="arch-box write">state_projection<br><small>Write: state.json<br>entity_state<br>chapter_status<br>（committed / rejected）</small></div>
    215. 

  215.           <div class="arch-box write">index_projection<br><small>Write: index.db<br>entity_deltas<br>relationships</small></div>
    216. 

  216.           <div class="arch-box write">summary_projection<br><small>Write: summaries/<br>chNNNN.md<br>剧情摘要</small></div>
    217. 

  217.           <div class="arch-box write">memory_projection<br><small>Write: memory_<br>scratchpad.json<br>长期记忆事实</small></div>
    218. 

  218.           <div class="arch-box write">vector_projection<br><small>Write: vector_db<br>event → text → embed<br>delta → text → embed</small></div>
    219. 

  219.         </div>
    220. 

  220.       </div>
    221. 

  221.     </div>
    222. 

  222.     <div class="arch-sidebar">
    223. 

  223.       <div class="arch-sidebar-panel">
    224. 

  224.         <div class="arch-sidebar-title">🔗 题材流通路径</div>
    225. 

  225.         <div class="arch-sidebar-item metric">① init 写入 state.json</div>
    226. 

  226.         <div class="arch-sidebar-item">② story-system 读 genre</div>
    227. 

  227.         <div class="arch-sidebar-item">③ 路由表匹配流派</div>
    228. 

  228.         <div class="arch-sidebar-item metric">④ 裁决表别名匹配题材</div>
    229. 

  229.         <div class="arch-sidebar-item">⑤ reasoning 写入 chapter.json</div>
    230. 

  230.         <div class="arch-sidebar-item">⑥ context-agent 消费</div>
    231. 

  231.         <div class="arch-sidebar-item metric">⑦ 任务书第4段输出</div>
    232. 

  232.       </div>
    233. 

  233.       <div class="arch-sidebar-panel">
    234. 

  234.         <div class="arch-sidebar-title">📏 数据权重（高→低）</div>
    235. 

  235.         <div class="arch-sidebar-item metric">① 用户要求</div>
    236. 

  236.         <div class="arch-sidebar-item metric">② 章纲原文</div>
    237. 

  237.         <div class="arch-sidebar-item">③ MASTER_SETTING</div>
    238. 

  238.         <div class="arch-sidebar-item">④ reasoning 裁决</div>
    239. 

  239.         <div class="arch-sidebar-item">⑤ CHAPTER_COMMIT</div>
    240. 

  240.         <div class="arch-sidebar-item">⑥ CSV 检索（参考）</div>
    241. 

  241.       </div>
    242. 

  242.       <div class="arch-sidebar-panel">
    243. 

  243.         <div class="arch-sidebar-title">⚡ Token 优化</div>
    244. 

  244.         <div class="arch-sidebar-item metric">context-agent: 2.9k tokens</div>
    245. 

  245.         <div class="arch-sidebar-item metric">write SKILL: 1.8k tokens</div>
    246. 

  246.         <div class="arch-sidebar-item metric">data-agent: 1.2k tokens</div>
    247. 

  247.         <div class="arch-sidebar-item">load-context 含 contracts</div>
    248. 

  248.         <div class="arch-sidebar-item">内化 core-constraints</div>
    249. 

  249.         <div class="arch-sidebar-item">内化 anti-ai-guide</div>
    250. 

  250.         <div class="arch-sidebar-item">get-reader-signals 合并</div>
    251. 

  251.         <div class="arch-sidebar-item">review-pipeline --save-metrics</div>
    252. 

  252.       </div>
    253. 

  253.       <div class="arch-sidebar-panel">
    254. 

  254.         <div class="arch-sidebar-title">🛡️ 写入保护</div>
    255. 

  255.         <div class="arch-sidebar-item metric">唯一写后入口: COMMIT</div>
    256. 

  256.         <div class="arch-sidebar-item">state / index / summary / memory<br>只由 projection 写入</div>
    257. 

  257.         <div class="arch-sidebar-item">skill 不直接 set-chapter-status</div>
    258. 

  258.         <div class="arch-sidebar-item">data-agent 不直写存储</div>
    259. 

  259.       </div>
    260. 

  260.     </div>
    261. 

  261.   </div>
    262. 

  262. </div>
    263. 

  263. </body>
    264. 

  264. </html>
    265.