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"

請(qǐng)查詢(xún)最新的XXX的API文檔

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

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

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

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

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

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

請(qǐng)根據(jù)我反饋的問(wèn)題,修復(fù)幻燈片生成過(guò)程中的顯示問(wèn)題.

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


問(wèn)題:
1、生成幻燈片時(shí),文字內(nèi)容會(huì)先填充到骨架;當(dāng)生成圖片時(shí),圖片生成后在更新圖片到對(duì)應(yīng)幻燈片時(shí),會(huì)將原來(lái)的文字覆蓋,導(dǎo)致顯示錯(cuò)誤.

機(jī)制說(shuō)明：
當(dāng)前系統(tǒng)中有新舊兩套機(jī)制：
1、老的機(jī)制：
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ù)庫(kù)]
2、新的機(jī)制：
A[前端建立SSE連接]-->B[后端批量生成內(nèi)容]
B-->C[后端流式輸出事件]
C-->D[前端更新UI狀態(tài)]
B-->E[后端組裝完整數(shù)據(jù)]
E-->F[后端單次數(shù)據(jù)庫(kù)寫(xiě)入]
F-->G[發(fā)送完成事件]
備注：關(guān)于新老機(jī)制的詳細(xì)說(shuō)明，可以查看重構(gòu)方案文檔了解。


目標(biāo)：
1、參考老機(jī)制幻燈片生成圖片完成后的處理方式，修復(fù)新的機(jī)制下圖片顯示的問(wèn)題

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

補(bǔ)充信息:
1、老機(jī)制實(shí)現(xiàn)的時(shí)候,在生成幻燈片后,幻燈片的布局中會(huì)留有圖片的位置,當(dāng)圖片生成完畢后會(huì)在預(yù)留位置顯示對(duì)應(yīng)的圖片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

請(qǐng)使用chrome-devtools訪問(wèn)http://127.0.0.1:5173/,查看前端頁(yè)面console的問(wèn)題并告知我問(wèn)題原因