claude mcp add context7 -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY

claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: yourkey"

請查詢最新的XXX的API文檔

請根據(jù)我提供的信息，進行相應代碼優(yōu)化的方案設(shè)計。

背景：
1、我已經(jīng)對PPT生成的前端代碼進行了梳理，但是其實現(xiàn)過程存在擴展性、維護性的問題，所以需要進行重構(gòu)方案的評估。

目標：
1、根據(jù)我提供的資料，制定并輸出一份重構(gòu)方案到{{docs/arch}}目錄下

資料：
docs/arch/AIPPT生成流程設(shè)計.md

需求：
我希望重構(gòu)方案能夠解決以下問題：
1）問題1：解決函數(shù)體過長且職責混雜的問題，提升代碼的可維護性和可擴展性
2）問題2：解決硬編碼的分頁邏輯的問題，我希望能夠?qū)τ簿幋a的策略進行提取，方便配置管理而不是在代碼中hardcode
3）問題3：解決幻燈片生成的類型問題，目前幻燈片類型主要分為cover、contents、transition、content、end，而在實際教育場景下，content的內(nèi)容還可以細分為不同類型，比如：背景介紹，學習目標，概念講解，題目練習，問題討論，內(nèi)容總結(jié)，課后作業(yè)等等，這些不同的內(nèi)容目的在content中呈現(xiàn)時，其排版等方式是不同的，需要PPT生成能夠進行更好的選擇和支持

要求：
1、優(yōu)化方案需要有清晰的結(jié)構(gòu)設(shè)計圖，流程圖
2、優(yōu)化方案需要有核心代碼的說明
3、優(yōu)化方案中要包含代碼文件的組織目錄結(jié)構(gòu)，組織方式需要在既有的項目目錄文件維護基礎(chǔ)上，能夠按照行業(yè)規(guī)范進行代碼文件清晰規(guī)劃，
4、代碼要清晰簡潔，易于閱讀和維護
5、代碼要符合行業(yè)規(guī)范，向行業(yè)最佳實踐看齊
6、優(yōu)化方案可以暫時性保留原有的代碼邏輯，實現(xiàn)新的代碼實現(xiàn)；待新的代碼實現(xiàn)沒有問題后，原有舊的代碼可以方便地清理清除。

請根據(jù)我反饋的問題,修復幻燈片生成過程中的顯示問題.

背景：
1、我目前正在對當前系統(tǒng)的幻燈片生成流程進行重構(gòu)，在重構(gòu)過程中遇到了前端顯示幻燈片刷新顯示不正確的問題，所以需要你分析問題并修復。


問題:
1、生成幻燈片時,文字內(nèi)容會先填充到骨架;當生成圖片時,圖片生成后在更新圖片到對應幻燈片時,會將原來的文字覆蓋,導致顯示錯誤.

機制說明：
當前系統(tǒng)中有新舊兩套機制：
1、老的機制：
A[前端調(diào)用/generate/slides]-->B[后端返回XML流]
B-->C[前端解析XML內(nèi)容]
C-->D[前端組裝幻燈片數(shù)據(jù)]
D-->E[前端調(diào)用updatePresentation]
E-->F[后端更新數(shù)據(jù)庫]
2、新的機制：
A[前端建立SSE連接]-->B[后端批量生成內(nèi)容]
B-->C[后端流式輸出事件]
C-->D[前端更新UI狀態(tài)]
B-->E[后端組裝完整數(shù)據(jù)]
E-->F[后端單次數(shù)據(jù)庫寫入]
F-->G[發(fā)送完成事件]
備注：關(guān)于新老機制的詳細說明，可以查看重構(gòu)方案文檔了解。


目標：
1、參考老機制幻燈片生成圖片完成后的處理方式，修復新的機制下圖片顯示的問題

流程：
1、請你仔細閱讀重構(gòu)方案文檔，對幻燈片生成的新老機制有一個了解
2、請你仔細閱讀前端在圖片生成后更新時，新老機制的實現(xiàn)過程
3、根據(jù)你的了解，修復新機制圖片生成后更新到幻燈片覆蓋文字的問題

補充信息:
1、老機制實現(xiàn)的時候,在生成幻燈片后,幻燈片的布局中會留有圖片的位置,當圖片生成完畢后會在預留位置顯示對應的圖片

資料：
1、重構(gòu)方案文檔：docs/arch/v0.2版本/stream流式輸出重構(gòu)設(shè)計方案.md
2、后端服務(wù)老接口：backend/app/api/v1/endpoints/generation.py
3、后端服務(wù)新接口：backend/app/api/v1/endpoints/stream.py
4、前端代碼：frontend/src

要求：
1、問題修復的方式要在機制上徹底解決此問題
2、代碼實現(xiàn)的架構(gòu)、流程要采用行業(yè)標準規(guī)范或者最佳實踐的做法
3、代碼實現(xiàn)要結(jié)構(gòu)清晰，易于閱讀和維護
4、代碼實現(xiàn)要滿足我的需求

需求：
1、幻燈片生成的效果:
由于幻燈片往往有很多頁,所以對于用戶比較好的一種體驗是:
1)當點擊生成幻燈片后,先顯示幻燈片的骨架(里面沒有內(nèi)容)
2)隨著流式輸出返回內(nèi)容,頁面中的骨架逐個地替換為幻燈片的內(nèi)容
3)先顯示幻燈片中的文字內(nèi)容,對于有圖片的可以顯示圖片占位符(例如加載中狀態(tài))
4)待圖片生成之后，在已經(jīng)顯示的幻燈片中，占位符更新為實際的圖片。
2、幻燈片生成的性能:
1)幻燈片生成的過程要性能盡量要快,減少用戶的等待時間。

請根據(jù)我提供的信息，進行相關(guān)功能的架構(gòu)設(shè)計。

背景：
1、目前系統(tǒng)中已經(jīng)實現(xiàn)了幻燈片的生成，包括幻燈片內(nèi)容以及圖片的生成。
2、在進行圖片生成時，使用了文生圖的接口，從而實現(xiàn)了對應的圖片生成和顯示。

問題：
1、問題1：目前圖片生成之后，是下載到本地workspace的images中存儲，數(shù)據(jù)庫中通過local_path保存本地的文件路徑。這種管理方式不夠先進，沒有使用目前主流的對象存儲COS，所以我希望將圖片的管理改為使用騰訊云的COS管理。

2、問題2：每次進行文生圖非常消耗模型調(diào)用的Token，這帶來了不少費用支出。我希望，能夠在調(diào)用模型生成圖片前，使用騰訊云的對象存儲COS中查詢是否有匹配相關(guān)內(nèi)容的圖片，如果有的話直接使用COS中的圖片，從而避免進行文生圖的生成。

目標：
1、請你根據(jù)我提出的問題和需求，重新規(guī)劃圖片管理的架構(gòu)設(shè)計，輸出設(shè)計文檔

流程：
1、你需要仔細閱讀了解當前項目的總體設(shè)計和后端設(shè)計
2、你需要仔細閱讀當前后端的代碼實現(xiàn)
3、你需要仔細閱讀當前數(shù)據(jù)結(jié)構(gòu)設(shè)計，特別是數(shù)據(jù)中g(shù)enerated_images數(shù)據(jù)表的設(shè)計
4、你需要閱讀了解騰訊云文件存儲的使用方法
5、結(jié)合上面你的了解，輸出圖片管理的實現(xiàn)方案設(shè)計

相關(guān)資料：
1、總體架構(gòu)設(shè)計：docs/arch/總體架構(gòu)設(shè)計.md
2、后端詳細設(shè)計：docs/arch/后端詳細設(shè)計.md
3、數(shù)據(jù)結(jié)構(gòu)設(shè)計：docs/arch/數(shù)據(jù)結(jié)構(gòu)設(shè)計.md
4、騰訊云對象存儲：@https://cloud.tencent.com/document/product/436

要求：
1、架構(gòu)設(shè)計文檔應該包含整體的架構(gòu)設(shè)計框架圖
2、架構(gòu)設(shè)計文檔應該包含數(shù)據(jù)存儲的設(shè)計
3、架構(gòu)設(shè)計文檔應該包含核心實現(xiàn)流程

注意：
1、已有的圖片不需要考慮數(shù)據(jù)遷移的問題。
2、數(shù)據(jù)庫中已有的記錄也不需要考慮數(shù)據(jù)遷移問題。

輸出文檔位置：
docs/arch/圖片管理設(shè)計.md

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

請使用chrome-devtools訪問http://127.0.0.1:5173/,查看前端頁面console的問題并告知我問題原因