PPTX Studio — 智能演示文稿生成

生成一份专业 PPT

输入主题 → AI 规划大纲 → 逐页 HTML 渲染 + 智能配图 → OCR 视觉质检 → 一键下载 PPTX。 8 种主题风格，深浅冷暖任选。

1. 你的主题

2. 视觉风格

页数

页

联网搜索

智能

开

关

{{ searchMode === 'auto' ? '按主题判断' : searchMode === 'on' ? '强制' : '仅用模型知识' }}

高级选项

主模型：

💡 Ctrl / ⌘ + Enter 直接生成

开始生成 →

对话

{{ messages.length }} 条消息

正在生成...

页数

风格

搜索

智能

开

关

<el-button type="primary" @click="sendMessage" :loading="generating"
                     :disabled="!inputText.trim()"
                     style="height:60px;padding:0 20px;border-radius:8px">
            发送
          </el-button>
        </div>
      </div>
    </div>

<div class="preview-panel">
      <div class="preview-head">
        <el-icon style="color:var(--gold);font-size:18px"><PictureFilled /></el-icon>
        <div class="preview-title-wrap">
          <div class="preview-title">{{ currentPptxTitle || '幻灯片预览' }}</div>
          <div class="preview-sub" v-if="slideUrls.length">
            {{ slideUrls.length }} 页 · {{ styleLabel }}
          </div>
        </div>
        <el-button v-if="currentPptxId && !generating" type="success" size="small" @click="downloadPptx">
          <el-icon style="margin-right:4px"><Download /></el-icon>下载 PPTX
        </el-button>
      </div>

<div class="top-banner" v-if="generating && progressTotal > 0">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>正在生成 · {{ progressDone }} / {{ progressTotal }} 页</span>
        <span style="margin-left:auto">
          {{ Math.round(progressDone/progressTotal*100) }}%
        </span>
      </div>
      <div class="progress-bar-wrap" v-if="generating && progressTotal > 0">
        <el-progress
          :percentage="Math.round(progressDone/progressTotal*100)"
          :show-text="false" :stroke-width="4"
          color="#E0B54B" />
      </div>

<div class="stage" @keydown="onKeyNav" tabindex="0" ref="stage">
        <div v-if="!slideUrls.length && !generating" class="stage-empty">
          <div class="icon">🖼</div>
          <div class="tips">生成后预览将出现在这里<br/>← → 键切换页面</div>
        </div>
        <div v-else-if="slideUrls.length" class="stage-canvas">
          <img :src="slideUrls[slideIndex]" :key="slideUrls[slideIndex]"
               alt="幻灯片预览" @click="nextSlide" style="cursor:pointer" />
        </div>
        <div v-else class="stage-empty">
          <el-icon class="is-loading" style="font-size:36px;color:var(--gold)"><Loading /></el-icon>
          <div class="tips">首页即将就绪...</div>
        </div>
      </div>

<div class="nav-strip" v-if="slideUrls.length || pendingThumbs > 0">
        <button class="nav-btn" @click="prevSlide" :disabled="slideIndex===0">‹ 上一页</button>
        <span class="slide-counter">{{ slideIndex+1 }} / {{ slideUrls.length || 0 }}</span>
        <button class="nav-btn" @click="nextSlide" :disabled="slideIndex>=slideUrls.length-1">下一页 ›</button>
        <div class="thumbs-wrap">
          <div class="thumbs">
            <div v-for="(url, i) in slideUrls" :key="i" class="thumb"
                 :class="{active: i === slideIndex}" @click="slideIndex = i">
              <img v-if="url" :src="url" />
              <div v-else class="thumb-skel">{{ i+1 }}</div>
            </div>
            <div v-for="i in pendingThumbs" :key="'p'+i" class="thumb">
              <div class="thumb-skel thumb-loading">···</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="console-panel" :class="consoleOpen ? 'open' : 'collapsed'">
    <div class="console-head" @click="consoleOpen = !consoleOpen">
      <div class="dot" :class="{idle: !generating}"></div>
      <span class="label">CONSOLE</span>
      <span style="font-size:11px;color:var(--text-3)">{{ logs.length }} 条日志</span>
      <div class="spacer"></div>
      <span class="act" @click.stop="logs=[]">清空</span>
      <span class="act" style="margin-left:12px">{{ consoleOpen ? '▼' : '▲' }}</span>
    </div>
    <div class="console-body" ref="logBox" v-show="consoleOpen">
      <div v-for="(line, i) in logs" :key="i" class="log-line"
           :class="logClass(line)">{{ line }}</div>
      <div v-if="!logs.length" style="color:#2D4060">等待任务...</div>
    </div>
  </div>

</div>
</div>

createApp({
  setup() {
    // ── state ────────────────────────────────────────
    const sessions       = ref([]);
    const currentSessionId = ref(null);
    const messages       = ref([]);
    const inputText      = ref('');
    const modelHint      = ref('qwen');
    const pageCount      = ref(14);
    const style          = ref('学院风');
    const searchMode     = ref('auto');
    const generating     = ref(false);
    const logs           = ref([]);
    const consoleOpen    = ref(false);

const currentPptxId    = ref(null);
    const currentPptxTitle = ref('');
    const slideUrls        = ref([]);
    const slideIndex       = ref(0);
    const progressDone     = ref(0);
    const progressTotal    = ref(0);
    const pendingThumbs    = ref(0);

const msgBox = ref(null);
    const logBox = ref(null);
    const stage  = ref(null);

// ── static config ────────────────────────────────
    const styles = [
      { key: '学院风', name: '学院风', desc: '深蓝·金色',
        gradient: 'linear-gradient(135deg,#0A142E 0%,#122B5A 55%,#D4AF37 100%)' },
      { key: '商务',   name: '商务',   desc: '专业·数据',
        gradient: 'linear-gradient(135deg,#0F1B2E 0%,#1F3A5F 55%,#4A82C8 100%)' },
      { key: '科技',   name: '科技',   desc: '暗色·霓虹',
        gradient: 'linear-gradient(135deg,#020617 0%,#0F172A 45%,#22D3EE 80%,#A855F7 100%)' },
      { key: '政务',   name: '政务',   desc: '庄重·蓝白',
        gradient: 'linear-gradient(135deg,#1E3A8A 0%,#2E5FBF 60%,#DBEAFE 100%)' },
      { key: '极简',   name: '极简',   desc: '留白·橙点',
        gradient: 'linear-gradient(135deg,#FFFFFF 0%,#F5F5F5 60%,#FF6B35 100%)' },
      { key: '杂志',   name: '杂志',   desc: '编辑·衬线',
        gradient: 'linear-gradient(135deg,#1A1A1A 0%,#2A2A2A 55%,#F4CE14 100%)' },
      { key: '中国风', name: '中国风', desc: '水墨·朱红',
        gradient: 'linear-gradient(135deg,#FAF3E7 0%,#F0E4C8 55%,#8B1A1A 100%)' },
      { key: '治愈',   name: '治愈',   desc: '暖光·柔色',
        gradient: 'linear-gradient(135deg,#FDF6EE 0%,#F5E6D3 55%,#D97757 100%)' },
    ];
    const presetTopics = [
      '从零读懂公司：股票基本面分析全攻略（14页）',
      'K线有话说：技术分析核心工具与实战技巧（13页）',
      '稳中求胜：投资组合构建与动态管理（15页）',
      '掘金产业：行业研究框架与新能源案例分析（15页）',
      '战胜情绪：行为金融学与投资决策修炼（12页）',
    ];

// ── computed ─────────────────────────────────────
    const showHero  = computed(() =>
      !currentSessionId.value && !messages.value.length && !generating.value
    );
    const styleLabel = computed(() => style.value);

// ── utils ────────────────────────────────────────
    function log(msg) {
      const ts = new Date().toLocaleTimeString('zh-CN', {hour12: false});
      logs.value.push(`[${ts}] ${msg}`);
      if (!consoleOpen.value && (msg.includes('❌') || msg.includes('错误'))) {
        consoleOpen.value = true;
      }
      nextTick(() => {
        if (logBox.value) logBox.value.scrollTop = logBox.value.scrollHeight;
      });
    }
    function logClass(line) {
      if (line.includes('❌') || line.includes('错误')) return 'error';
      if (line.includes('⚠️') || line.includes('重生成')) return 'warn';
      if (line.includes('质检'))    return 'qc';
      if (line.includes('🔎'))     return 'info';
      return '';
    }
    function scrollMsgs() {
      nextTick(() => {
        if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight;
      });
    }
    function fmtTime(iso) {
      if (!iso) return '';
      const d = new Date(iso);
      const now = new Date();
      if (d.toDateString() === now.toDateString()) {
        return '今天 ' + d.toLocaleTimeString('zh-CN', {hour12:false,hour:'2-digit',minute:'2-digit'});
      }
      return d.toLocaleDateString('zh-CN') + ' ' +
             d.toLocaleTimeString('zh-CN', {hour12:false,hour:'2-digit',minute:'2-digit'});
    }

// ── data loading ─────────────────────────────────
    async function fetchSessions() {
      try {
        const r = await fetch('/api/sessions');
        sessions.value = await r.json();
      } catch (e) { /* silent */ }
    }
    async function loadSession(sid) {
      currentSessionId.value = sid;
      const r = await fetch(`/api/sessions/${sid}`);
      const data = await r.json();
      messages.value = data.messages || [];
      currentPptxId.value = null;
      slideUrls.value = [];
      currentPptxTitle.value = data.title || '';
      if (data.pptx_files && data.pptx_files.length) {
        const latest = data.pptx_files[0];
        const m = latest.filename.match(/slides\/([^/]+)\//);
        if (m) loadPptxPreviews(m[1], data.title);
      }
      scrollMsgs();
    }
    function newSession() {
      currentSessionId.value = null;
      messages.value = [];
      currentPptxId.value = null;
      slideUrls.value = [];
      currentPptxTitle.value = '';
      inputText.value = '';
      logs.value = [];
      progressDone.value = 0;
      progressTotal.value = 0;
    }
    async function loadPptxPreviews(pptxId, title = '') {
      currentPptxId.value = pptxId;
      currentPptxTitle.value = title || '';
      const r = await fetch(`/api/preview/${pptxId}/count`);
      if (!r.ok) return;
      const { count } = await r.json();
      slideUrls.value = Array.from({length: count}, (_, i) =>
        `/api/preview/${pptxId}/${i}?t=${Date.now()}`
      );
      slideIndex.value = 0;
    }

// ── generation flow ──────────────────────────────
    function startFromHero() {
      if (!inputText.value.trim()) return;
      sendMessage();
    }

async function sendMessage() {
      const text = inputText.value.trim();
      if (!text || generating.value) return;
      inputText.value = '';
      generating.value = true;
      progressDone.value = 0;
      progressTotal.value = 0;
      slideUrls.value = [];
      pendingThumbs.value = 0;
      consoleOpen.value = true;
      log(`▶ 提交：${text} | 风格=${style.value} | ${pageCount.value}页 | 搜索=${searchMode.value}`);

messages.value.push({id: Date.now()+'u', role:'user', content: text});
      scrollMsgs();

const body = {
        session_id: currentSessionId.value || 'new',
        message: text,
        model:   modelHint.value,
        pages:   pageCount.value,
        style:   style.value,
        search:  searchMode.value,
      };

try {
        const resp = await fetch('/api/chat', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(body),
        });
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);

// ── navigation ───────────────────────────────────
    function prevSlide() { if (slideIndex.value > 0) slideIndex.value--; }
    function nextSlide() { if (slideIndex.value < slideUrls.value.length - 1) slideIndex.value++; }
    function onKeyNav(e) {
      if (e.key === 'ArrowLeft')  prevSlide();
      if (e.key === 'ArrowRight') nextSlide();
    }
    // 全局键盘（页面级）
    window.addEventListener('keydown', (e) => {
      if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') return;
      if (slideUrls.value.length === 0) return;
      if (e.key === 'ArrowLeft')  { e.preventDefault(); prevSlide(); }
      if (e.key === 'ArrowRight') { e.preventDefault(); nextSlide(); }
    });

function downloadPptx() {
      if (!currentPptxId.value) return;
      window.open(`/api/download/${currentPptxId.value}`, '_blank');
    }

onMounted(() => { fetchSessions(); });

return {
      sessions, currentSessionId, messages, inputText,
      modelHint, pageCount, style, searchMode,
      generating, logs, consoleOpen,
      currentPptxId, currentPptxTitle, slideUrls, slideIndex,
      progressDone, progressTotal, pendingThumbs,
      msgBox, logBox, stage,
      styles, presetTopics, showHero, styleLabel,
      fmtTime, logClass,
      newSession, loadSession, sendMessage, startFromHero,
      prevSlide, nextSlide, onKeyNav, downloadPptx,
    };
  }
}).use(ElementPlus).mount('#app');
</script>
</body>
</html>