pptList/scripts/aiPptVisualTest.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI PPT Visual Test</title>
    <style>
      body { margin: 0; padding: 24px; background: #dfe4ea; font-family: "Microsoft Yahei", sans-serif; }
      h1 { margin: 0 0 20px; font-size: 24px; color: #172231; }
      .grid { display: grid; grid-template-columns: repeat(2, 720px); gap: 24px; }
      .slide { background: white; box-shadow: 0 8px 24px rgba(17, 34, 51, .16); }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { createApp, h, ref, nextTick, watch } from "vue"
      import { lessonRepairFixture } from './fixtures/aiPptLessonRepair.mjs'
      import { contentGateFixture } from './fixtures/aiPptContentGate.mjs'
      import { liveRegressionFixture } from './fixtures/aiPptLiveRegression.mjs'
      import { createPinia, setActivePinia } from "pinia"
      import ThumbnailSlide from "/src/views/components/ThumbnailSlide/index.vue"
      import { aiCoursewareToSlides } from "/src/utils/aiCoursewareToSlides.ts"
      import { getAiCoursewareTemplate } from "/src/config/aiCoursewareTemplates.ts"
      import "/src/assets/styles/global.scss"
      import "/src/assets/styles/prosemirror.scss"
      import { hydrateSlideBackgroundImages } from "/src/libs/jsonTool.ts"
      import { classroomFixture } from "./fixtures/aiPptClassroom.mjs"
      import { semanticDesignFixture, densityRegressionFixture, heroImageRegressionFixture } from "./fixtures/aiPptSemanticDesign.mjs"
      import { modelDesignFixture } from "./fixtures/aiPptModelDesign.mjs"
      import { inquiryFixture } from './fixtures/aiPptInquiry.mjs'
      import { editorialFixture } from './fixtures/aiPptEditorial.mjs'
      import { typographyFixture } from './fixtures/aiPptTypography.mjs'
      import { slideDesignFixture } from './fixtures/aiPptSlideDesign.mjs'
      import { inspectAiPptRenderedText } from '/src/utils/aiPptRenderedQuality.ts'

      const id = new URLSearchParams(location.search).get("template") || "ethnic-flower"
      const page = (pageNo, type, title, layout, points, extra = {}) => ({ pageNo, type, title, bullets: points, studentContent: { points }, imageKeywords: [], visualPlan: { layout }, ...extra })
      const outline = {
        title: "凤鸣山谷的故事", templateId: id, gradeName: "一年级", textbookName: "音乐一年级上册", unitName: "第一单元 奇妙的声音世界", chapterName: "凤鸣山谷的故事", courseType: "music", style: "cartoon",
        pages: [
          page(1, "cover", "凤鸣山谷的故事", "cover_scene", ["聆听自然的声音", "发现音乐的强弱变化"]),
          page(2, "scene_intro", "山谷里传来了什么声音？", "story_stage", ["观察画面", "模仿你听到的声音"], { interaction: { type: "question", question: "你觉得是谁在歌唱？", options: ["小鸟", "溪水", "风声"] } }),
          page(3, "objectives", "今天我们要学会", "goal_cards", ["分辨声音的高低", "感受音乐的强弱", "合作完成声音表演"]),
          page(4, "first_listen", "第一次完整聆听", "listen_wave", ["安静听完音乐", "用手势表示声音的远近", "记住最喜欢的声音"], { studentContent: { headline: "闭上眼睛，声音从哪里来？", points: ["安静听完音乐", "用手势表示声音的远近", "记住最喜欢的声音"] } }),
          page(5, "work_context", "走进凤鸣山谷", "split_image", ["清晨的山谷十分安静", "鸟鸣由远处慢慢靠近", "溪水一直轻轻流淌"]),
          page(6, "lyric_read", "读一读山谷歌谣", "lyric_focus", ["小鸟唱得清脆", "溪水流得轻柔", "山风吹得悠长"]),
          page(7, "melody_score", "旋律是怎样行走的？", "score_focus", ["向上表示声音变高", "向下表示声音变低", "平直表示保持稳定"]),
          page(8, "compare_listen", "两段声音有什么不同？", "compare_listen", ["比较速度", "比较力度"], { interaction: { type: "compare", question: "哪一段更像远处的鸟鸣？", options: ["第一段更轻", "第二段更强", "第一段更慢", "第二段更快"] } }),
          page(9, "performance_activity", "合作表演山谷音乐会", "performance_stage", ["保持自己的声部", "关注指挥手势", "结束时一起收声"], { activity: { task: "用声音演出山谷从清晨到热闹的变化", steps: ["分成鸟鸣、溪水、山风三组", "商量进入顺序", "完整表演并互相评价"] } }),
          page(10, "summary", "我的音乐收获", "summary_checklist", ["我能分辨声音的高低", "我能表现声音的强弱", "我能与同伴合作表演"], { learningEvidence: "用一种声音表现你心中的凤鸣山谷" })
        ]
      }
      const scenario = new URLSearchParams(location.search).get("scenario")
      const fixtureImage = '/ai-courseware-templates/extracted/bird-garden/background-01.jpg'
      const teachingImage = scenario === 'typography' ? await new Promise(async (resolve, reject) => {
        try {
          const response = await fetch('/scripts/fixtures/assets/pianica-yamaha-p32d.jpg')
          if (!response.ok) throw new Error('实物图读取失败')
          const reader = new FileReader()
          reader.onload = () => resolve(reader.result)
          reader.onerror = reject
          reader.readAsDataURL(await response.blob())
        } catch (error) { reject(error) }
      }) : undefined
      const fixture = scenario === 'slide-design' ? slideDesignFixture() : scenario === 'typography' ? typographyFixture(teachingImage) : scenario === 'editorial' ? editorialFixture() : scenario === 'live' ? liveRegressionFixture() : scenario === 'content-gate' ? contentGateFixture() : scenario === 'repair' ? lessonRepairFixture(fixtureImage) : scenario === 'inquiry' ? inquiryFixture() : scenario === 'hero-images' ? heroImageRegressionFixture(fixtureImage) : scenario === 'density' ? densityRegressionFixture(fixtureImage) : scenario === 'semantic' ? semanticDesignFixture(fixtureImage) : scenario === 'model-design' ? modelDesignFixture(fixtureImage)
        : scenario === 'classroom' ? classroomFixture(fixtureImage) : outline
      const result = aiCoursewareToSlides(fixture, { templateId: id })
      const group = ref(0)
      const geometryStatus = ref("正在检查实际文字边界")
      const previewColumns = window.innerWidth >= 1100 ? 2 : 1
      const previewWidth = Math.floor(Math.min(720, (window.innerHeight - 180) * 8 / 9, (window.innerWidth - 48 - (previewColumns - 1) * 24) / previewColumns))
      const presentationPreview = new URLSearchParams(location.search).get('present') === '1'
      if (presentationPreview) {
        const style = document.createElement('style')
        style.textContent = 'body{padding:24px!important;background:#e9edf1!important}main>h1{margin:0 0 14px!important;font-size:22px!important;color:#26334a}main>button{padding:8px 16px;margin:0 8px 18px 0;border:1px solid #c4cbd4;background:white;cursor:pointer;border-radius:4px}#geometry-status,#rendered-quality-status,#export-status{display:none}.grid{margin-bottom:24px}'
        document.head.appendChild(style)
      }
      const app = createApp({
        render: () => h("main", [
          h("h1", presentationPreview ? `教学色块与配图预览 · ${result.slides.length}页设计样例` : `${getAiCoursewareTemplate(id).name} · 通用版式视觉回归`),
          h("div", { id: "geometry-status" }, geometryStatus.value),
          ...Array.from({ length: Math.ceil(result.slides.length / 4) }, (_, index) => h('button', { onClick: () => { group.value = index } }, `查看第${index * 4 + 1}—${Math.min(index * 4 + 4, result.slides.length)}页`)),
          h("section", { class: "grid", style: { gridTemplateColumns: `repeat(${previewColumns}, ${previewWidth}px)` } }, result.slides.slice(group.value * 4, group.value * 4 + 4).map(slide => h("div", { class: "slide" }, [h(ThumbnailSlide, { slide, size: previewWidth })])))
        ])
      })
      const pinia = createPinia()
      setActivePinia(pinia)
      app.use(pinia)
      app.mount("#app")
      async function checkRenderedGeometry() {
        await nextTick()
        await document.fonts.ready
        await new Promise(resolve => requestAnimationFrame(resolve))
        const errors = []
        document.querySelectorAll('.grid .slide').forEach((slide, index) => {
          const pageNo = group.value * 4 + index + 1
          const texts = [...slide.querySelectorAll('.base-element-text')]
          const rects = texts.map(el => el.querySelector('.element-content').getBoundingClientRect())
          texts.forEach((el, i) => {
            const actual = el.querySelector('.element-content').offsetHeight
            if (actual > parseFloat(el.style.height) + 2) errors.push(`${pageNo}:文字高度 ${actual} > ${el.style.height}`)
            for (let j = i + 1; j < texts.length; j++) {
              const a = rects[i], b = rects[j]
              if (Math.min(a.right, b.right) - Math.max(a.left, b.left) > 1 && Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 1) errors.push(`${pageNo}:文字重叠`)
            }
          })
        })
        geometryStatus.value = JSON.stringify({ pages: `${group.value * 4 + 1}-${Math.min(group.value * 4 + 4, result.slides.length)}`, errors })
      }
      watch(group, checkRenderedGeometry)
      checkRenderedGeometry()

      if (['editorial', 'typography', 'slide-design'].includes(scenario)) {
        const status = document.createElement('p')
        status.id = 'rendered-quality-status'
        status.textContent = '正在运行实际渲染回归'
        document.querySelector('main').prepend(status)
        try {
          const original = JSON.stringify(result.slides)
          const issues = await inspectAiPptRenderedText(result.slides)
          const suites = []
          for (const [name, sample] of [['live', liveRegressionFixture()], ['content-gate', contentGateFixture()],
            ['repair', lessonRepairFixture(fixtureImage)], ['inquiry', inquiryFixture()],
            ['model', modelDesignFixture(fixtureImage)], ['density', densityRegressionFixture(fixtureImage)]]) {
            const slides = aiCoursewareToSlides(sample, { templateId: 'blank' }).slides
            suites.push({ name, pages: slides.length, issues: await inspectAiPptRenderedText(slides) })
          }
          const damaged = JSON.parse(original)
          const text = damaged[0].elements.find(element => element.type === 'text')
          Object.assign(text, { left: 100, top: 150, width: 800, height: 60, content: '<div style="font-size:40px"><p>第一段正文</p><p style="font-size:72px">混合字号</p><p>第三段正文</p><p>第四段正文</p></div>' })
          damaged[0].elements.push({ ...text, id: 'overlap-regression', top: 240, height: 80, content: '<div style="font-size:40px">这里不应被上一段覆盖</div>' })
          const damagedIssues = await inspectAiPptRenderedText([damaged[0]], [9])
          const regressions = {
            multilineDetected: damagedIssues.some(issue => issue.code === 'rendered_text_overflow' && issue.pageNo === 9),
            overlapDetected: damagedIssues.some(issue => issue.code === 'rendered_text_overlap'),
            sourceUnchanged: JSON.stringify(result.slides) === original,
            probeCleanedUp: document.querySelectorAll('[data-ai-ppt-render-probe]').length === 0
          }
          status.textContent = JSON.stringify({ passed: issues.length === 0 && suites.every(suite => !suite.issues.length) && Object.values(regressions).every(Boolean), pages: result.slides.length, issues, regressions, suites })
        } catch (error) { status.textContent = JSON.stringify({ passed: false, error: error.message }) }
      }

      if (new URLSearchParams(location.search).get("export") === "1") {
        const status = document.createElement("p")
        status.id = "export-status"
        status.textContent = "正在导出"
        document.body.prepend(status)
        try {
          const workerSources = await Promise.all(["/pptworker/cos-js-sdk-v5.min.js", "/pptworker/upload.js", "/pptworker/pptJson.js"].map(async url => await (await fetch(url)).text()))
          const worker = new Worker(URL.createObjectURL(new Blob(workerSources)))
          let rpcId = 0
          const callbacks = new Map()
          let resolveWorkerReady
          const workerReady = new Promise(resolve => { resolveWorkerReady = resolve })
          let resolveExportDone
          let rejectExportDone
          const exportDone = new Promise((resolve, reject) => { resolveExportDone = resolve; rejectExportDone = reject })
          worker.addEventListener("message", event => {
            const data = event.data
            if (data?.type === "progress") {
              const progress = data.result || {}
              if (progress.status === "done" && Number(progress.progress) === 100) resolveExportDone(progress.extra)
              if (progress.status === "failed") rejectExportDone(new Error(progress.extra?.errorMsg || "PPT导出失败"))
              return
            }
            if (data?.type !== "RPC") return
            if (!data.id) {
              if (data.method === "ready") resolveWorkerReady()
              return
            }
            const callback = callbacks.get(data.id)
            if (!callback) return
            callbacks.delete(data.id)
            data.error ? callback.reject(new Error(data.error.message)) : callback.resolve(data.result)
          })
          const rpc = (method, ...params) => new Promise((resolve, reject) => {
            const id = ++rpcId
            callbacks.set(id, { resolve, reject })
            worker.postMessage({ type: "RPC", id, method, params })
          })
          await workerReady
          await rpc("createTaskController")
          const exportSlides = await hydrateSlideBackgroundImages(result.slides)
          const json = { width: 1920, height: 1080, slides: exportSlides, theme: { ...result.theme, viewportRatio: 0.5625 } }
          const jsonUrl = URL.createObjectURL(new Blob([JSON.stringify(json)], { type: "application/json" }))
          await rpc("addCourseWareTask", { type: "downloadCourseware", extra: { id: "ai-ppt-e2e", type: "pptx", outputName: "ai-ppt-e2e.pptx", name: "ai-ppt-e2e", jsonUrl } })
          const exported = await exportDone
          const sinkUrl = new URLSearchParams(location.search).get("sink")
          if (sinkUrl) {
            const response = await fetch(sinkUrl, { method: "POST", body: exported.buffer })
            if (!response.ok) throw new Error(`测试文件保存失败：HTTP ${response.status}`)
          }
          URL.revokeObjectURL(jsonUrl)
          const pptxUrl = URL.createObjectURL(new Blob([exported.buffer], { type: exported.contentType }))
          const link = document.createElement("a")
          link.href = pptxUrl
          link.download = exported.name
          if (!sinkUrl) link.click()
          status.textContent = `导出成功：${exported.buffer.byteLength} bytes`
          document.title = "EXPORT_DONE"
          await rpc("destoryTaskController")
          worker.terminate()
        } catch (error) {
          status.textContent = `导出失败：${error?.message || error}`
          document.title = "EXPORT_FAILED"
        }
      }
    </script>
  </body>
</html>