AI应用-本地模型实现AI生成PPT(简易版)

文章目录

  • 前言
    • 技术栈
    • 效果展示
  • 一、实现思路
  • 二、实现步骤
    • 1.本地安装marp-cli
    • 2.后端实现
    • 3.前端实现
  • 三、代码地址及说明

前言

在许多项目中，生成 PPT 是常见的需求，尤其在教育和报告展示中。传统的生成 PPT 的方法需要手动创建，而使用生成模型，如 Dify 或 Ollama，可以自动化地根据提供的内容生成 PPT。在这个示例中，我们将使用本地模型与 Marp 配合，实现 PPT 的生成，前后端分离开发。

技术栈

  • 前端：Vue.js，用于构建用户界面，发送请求并接收生成的 PPT。
  • 后端：Python（Flask），用于接收前端请求，调用本地模型（Dify 或 直接调用Ollama或其他方式），生成PPT，并返回文件链接或下载链接。
  • PPT 生成工具：Marp，是一个将 Markdown 转换为 PPT的工具，我们将通过本地模型生成 Markdown 内容，然后使用 Marp 将其转换为 PPT。

也可以使用线上模型。实现流程都是一样的。
没有使用过ollama或者dify的可以查看我的其他博客

Ollama本地部署大模型及应用

本地搭建Dify+xinference实现大模型应用

效果展示

请添加图片描述

一、实现思路

AI PPT 生成实现思路为：

  1. 定义模板：使用 Marp 语法定义 PPT 模板，并在模板中添加占位符，用于后续内容填充。
  2. 用户输入标题：选择模板后，用户输入要生成的 PPT 标题。
  3. 调用模型填充内容：使用本地 AI 模型生成占位符对应的内容。
  4. 生成 PPT 文件：将模板和生成的内容合并，生成 Markdown 文件，并使用 Marp CLI 将 Markdown 转换为 PPT 格式，最终上传至 OSS。
  5. 展示与下载：前端通过 Marp-core 展示 PPT 内容，并提供下载链接。

这个流程涵盖了从模板定义、用户交互、AI 内容生成，到最终文件转换和展示下载的完整过程。

二、实现步骤

1.本地安装marp-cli

本地需要安装marp-cli。我这里是mac直接使用brew命令就行。其他环境可以使用npm install下载

# mac
brew install marp-cli

# 其他环境
npm install --save-dev @marp-team/marp-cli

使用命令 marp -v 查看版本

mac@1eaba08f6d8f ~ % marp -v
@marp-team/marp-cli v4.0.3 (w/ @marp-team/marp-core v4.0.0)

2.后端实现

这里是使用mysql查询模板，然后调用大模型生成内容。将模板和内容进行合并，然后在本地保存临时文件temp.md，使用本地的marp服务将.md文件转为ppt。然后上传至oss后返回给前端内容及ppt地址。

核心代码

@base.route('/ai/chat/generate_ppt', methods=['GET'])
def ai_chat_generate_ppt():
    # 判断参数是否存在
    template_id=request.args.get('template_id')
    user_input=request.args.get('user_input')
    if not template_id:
        return jsonify({'msg': '模板ID为必填', 'code': 400}), 400
    if not user_input:
        return jsonify({'msg': '用户输入为必填', 'code': 400}), 400
    ppt_template=PptTemplate().query.filter_by(id=template_id).first();
    if not ppt_template:
        return jsonify({'msg': '没有找到这个模板', 'code': 400}), 400
    try:
        # 请求大模型生成PPT
        workflow_client=WorkflowClient(FLOW_API_KEY, base_url=API_BASE_URL)
        workflow_response=workflow_client.run(inputs={"user_input":user_input}, user="123", response_mode="blocking")
        workflow_response.raise_for_status()
        result = workflow_response.json()
        text_output = None
        if 'data' in result and 'outputs' in result['data'] and 'text' in result['data']['outputs']:
            text_output = result['data']['outputs']['text']
            try:
                text_output = json.loads(text_output)  # 将字符串转换为JSON对象
            except json.JSONDecodeError as e:
                return jsonify({'msg': 'JSON解析错误', 'code': 500, 'error': str(e)}), 500
        # 将ppt模板内容中的变量替换为生成的文本
        template_content = ppt_template.template_content
        if text_output:
            template_content = template_content.replace('{{title}}', text_output.get('title', ''))
            template_content = template_content.replace('{{menuList}}', text_output.get('menuList', ''))
            template_content = template_content.replace('{{contents}}', text_output.get('contents', ''))
        
        # 将template_content写入到一个临时的Markdown文件
        markdown_file = 'temp.md'
        with open(markdown_file, 'w') as f:
            f.write(template_content)

        # 使用marp将Markdown文件转换为PPT
        ppt_file = 'output.pptx'
        subprocess.run(['marp', markdown_file, '-o', ppt_file], check=True)

        # 上传PPT到OSS
        bucket_name="同名"
        endpoint="oss-cn-beijing.aliyuncs.com"
        auth = Auth('ak', 'sk')
        bucket = Bucket(auth, endpoint, bucket_name)
        oss_path = f'path/to/{uuid.uuid4()}.pptx'
        oss_base_path=f"https://{bucket_name}.{endpoint}/"
        bucket.put_object_from_file(oss_path, ppt_file)

        # 删除临时文件
        os.remove(markdown_file)
        os.remove(ppt_file)

        return jsonify({'msg': 'ok', 'code': 200, 'data':{'content': template_content,'ppt_url':oss_base_path+oss_path}}), 200
    except Exception as e:
        return jsonify({'msg': str(e), 'code': 500}), 500

AI提示词

# 角色
你是一个高效的 PPT 生成助手，能够根据用户输入的标题内容，以简洁明了的方式生成 PPT，并以 JSON 格式返回。擅长使用 Marp 语法呈现 PPT 内容，使目录以 Marp 列表形式展现。

## 技能
### 技能 1：生成 PPT
1. 当用户提供标题时，根据标题内容生成 PPT 的目录内容，以 Marp 列表形式呈现。
2. 将 PPT 内容以 Marp 语法进行组织，每一页之间用“---”隔开。
3. 要求每张内容除标题外要包含内容及重点
===回复示例===
{
"title":"<首页标题>",
"menuList":"- 目录项 1\n- 目录项 2",
"contents":"第一页内容\n---\n第二页内容"
}
===示例结束===

## 限制:
- 仅根据用户提供的标题生成 PPT，不涉及其他无关主题。
- 严格按照给定的 JSON 格式和 Marp 语法进行输出。

3.前端实现

我这里前端使用的是vue。
下载marp-core

npm install @marp-team/marp-core

封装组件
src/components/MarpitViewer

这里是使用marp-core将marp语法内容转为html。然后将每页ppt的svg单独截取到slides中循环渲染。

<template>
  <div class="slides-preview">
    <!-- <el-carousel :interval="5000" arrow="always" type="card">
      <el-carousel-item v-for="(slide, index) in slides" :key="index">
        <div class="marpit" v-html="slide"></div>
      </el-carousel-item>
    </el-carousel> -->
    <el-scrollbar height="100VH">
      <div v-for="(slide, index) in slides" :key="index" class="marpit" v-html="slide"></div>
      </el-scrollbar>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';
import 'element-plus/dist/index.css'; // 引入 Element Plus 样式
import Marp from '@marp-team/marp-core';

const slides = reactive([]); // 存储渲染后的幻灯片内容
const props = defineProps({
  markdownContent: String,
});

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

const renderSlides = () => {
  if (typeof props.markdownContent !== 'string' || !props.markdownContent.trim()) {
    console.error('Invalid Markdown content.');
    slides.length = 0; // 清空幻灯片内容
    return;
  }

  try {
    const marp = new Marp();

    // 渲染 Markdown 内容为 HTML（包含 SVG）
    const { html, css } = marp.render(props.markdownContent);

    // 动态插入 CSS
    if (css) {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = css;
      document.head.appendChild(style);
    }

    // 确保 html 内容不为空，并且包含 <svg> 元素
    if (html) {
      // 使用正则提取所有的 <svg> 标签
      const svgContent = html.match(/<svg[^>]*>[\s\S]*?<\/svg>/g) || [];

      // 将每个 <svg> 作为独立的幻灯片
      slides.splice(0, slides.length, ...svgContent);
    } else {
      console.error('Marp rendered empty HTML.');
    }
  } catch (error) {
    console.error('Error rendering slides:', error);
  }
};
</script>

<style scoped>
.slides-preview {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.marpit {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.marpit svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 1.5em;
}
</style>

三、代码地址及说明

这个思路只是简易版的实现方式。并没有达到商用的水平，后续还需要功能迭代。

代码已经提交到gitee中。
https://gitee.com/luzhiyong_erfou/learning-notes/tree/master/marp-ppt
将代码中的秘钥改一下就可以运行。

后续可以升级的功能目标：

  1. 实现动态前端渲染ppt（即流式返回，每返回一块内容就渲染一块内容）。
  2. 实现AI自动配图。
  3. 用户页面交互。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/942847.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux 服务管理 service systemd systemctl

Linux 服务管理 service systemd systemctl

Linux 服务管理 service systemd systemctl 1 介绍1.1 概述1.2 发展历程1.3 特点1.4 linux 服务管理 发展历程Ubuntu 14.04及更早版本&#xff1a;使用upstart作为默认的init系统旧版本新版本 Ubuntu 15.04到16.04版本&#xff1a;默认使用systemd作为init系统&#xff0c;但仍…
阅读更多...
vue 基础学习

vue 基础学习

一、ref 和reactive 区别 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div id"app"><h1>{{Web.title}}</h1><h1&…
阅读更多...
光谱相机在农业中的具体应用案例

光谱相机在农业中的具体应用案例

作物生长监测与产量预测 美国爱荷华州玉米种植园&#xff1a;农场主使用无人机搭载高光谱相机&#xff0c;定期对玉米田进行拍摄。通过分析光谱数据&#xff0c;获取玉米的叶面积指数、叶绿素含量等生长参数。在玉米生长关键期&#xff0c;依据这些参数及时调整施肥和灌溉方案…
阅读更多...
LSTM-SVM时序预测 | Matlab基于LSTM-SVM基于长短期记忆神经网络-支持向量机时间序列预测

LSTM-SVM时序预测 | Matlab基于LSTM-SVM基于长短期记忆神经网络-支持向量机时间序列预测

LSTM-SVM时序预测 | Matlab基于LSTM-SVM基于长短期记忆神经网络-支持向量机时间序列预测 目录 LSTM-SVM时序预测 | Matlab基于LSTM-SVM基于长短期记忆神经网络-支持向量机时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.LSTM-SVM时序预测 | Matlab基于LSTM…
阅读更多...
05.HTTPS的实现原理-HTTPS的握手流程（TLS1.2）

05.HTTPS的实现原理-HTTPS的握手流程（TLS1.2）

05.HTTPS的实现原理-HTTPS的握手流程&#xff08;TLS1.2&#xff09; 简介1. TLS握手过程概述2. TLS握手过程细化3. 主密钥&#xff08;对称密钥&#xff09;生成过程4. 密码规范变更 简介 主要讲述了混合加密流程完成后&#xff0c;客户端和服务器如何共同获得相同的对称密钥…
阅读更多...
PostgreSQL编译安装教程

PostgreSQL编译安装教程

下载安装 1.在家目录创建一个文件夹放下载安装包 mkdir softwarecd software 2.下载文件压缩包 wget https://ftp.postgresql.org/pub/source/v16.0/postgresql-16.0.tar.gz 3.解压 tar -xzvf postgresql-16.0.tar.gz 4.编译 在software/postgresql-16.0下 cd software…
阅读更多...
009-spring-bean的实例化流程

009-spring-bean的实例化流程

1 spring容器初始化时&#xff0c;将xml配置的bean 信息封装在 beandefinition对象 2 所有的beandefinition存储在 beandefinitionMap的map集合中 3 spring对map进行遍历&#xff0c;使用反射创建bean实例对象 4 创建好的bean存在名为singletonObjects的map集合中 5 调用ge…
阅读更多...
定位方式：css

定位方式：css

使用相对路径 div ul #div下的所有ul&#xff0c;空格表示相对路径&#xff08;这个实际中用的多一些&#xff09; 绝对路径-一般不用绝对路径 html>head>div&#xff0c;“>”表示根路径 使用class名称定位 使用.表示 使用id定位 使用#表示 使用属性定位 [属性名…
阅读更多...
基于深度学习(HyperLPR3框架)的中文车牌识别系统-搭建开发环境

基于深度学习(HyperLPR3框架)的中文车牌识别系统-搭建开发环境

本篇内容为搭建开发环境。包括&#xff1a;python开发环境&#xff0c;Qt/C开发环境&#xff0c;以及用到的各个库的安装和配置。 一、Python开发环境搭建与配置 1、下载并安装Anaconda 我没有用最新的版本&#xff0c;安装的是 Anaconda3-2021.05-Windows-x86_64.exe&#…
阅读更多...
kamailio.cfg 图形化

kamailio.cfg 图形化

kamailio.cfg 文件随着业务增加&#xff0c;会越来越大&#xff0c;越来越复杂&#xff0c;很难看出整体结构来。 有没有什么工具看出整体轮廓呢?有。主要依靠下面的python文件&#xff1a; python脚本 调用命令如下&#xff1a; python3 route_graph.py kamailio.cfg 执…
阅读更多...
【Linux】进程控制，手搓简洁版shell

【Linux】进程控制，手搓简洁版shell

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 1、进程创建2、进程终止3、进程等待4、进程程序替换5、手写简洁版shell 1、进程创建 fork函数&#xff1a;从已经存在的进程中创…
阅读更多...
rabbitmq相关使用

rabbitmq相关使用

使用rabbitmq实现异步解耦 使用步骤&#xff1a; 1、pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2、yml配置文件 spring:rabbitmq:host: 12…
阅读更多...
单机和微服务的区别，微服务有什么问题？数据一致性问题怎么解决？幂等问题怎么解决？

单机和微服务的区别，微服务有什么问题？数据一致性问题怎么解决？幂等问题怎么解决？

单机和微服务的区别&#xff0c;微服务有什么问题&#xff1f;数据一致性问题怎么解决&#xff1f;幂等问题怎么解决&#xff1f; 单机架构和微服务架构在设计理念、部署和扩展性上有显著区别。 单机架构 vs 微服务架构 单机架构 定义&#xff1a;所有组件&#xff08;前端…
阅读更多...
VUE3+django接口自动化部署平台部署说明文档（使用说明，需要私信）

VUE3+django接口自动化部署平台部署说明文档（使用说明，需要私信）

网址连接&#xff1a;http://118.25.110.213:5200/#/login 账号/密码&#xff1a;renxiaoyong 1、VUE3部署本地。 1.1本地安装部署node.js 1.2安装vue脚手架 npm install -g vue/cli # 或者 yarn global add vue/cli1.3创建本地项目 vue create my-vue-project1.4安装依赖和插…
阅读更多...
overleaf中出现TeX capacity exceeded PDF object stream buffer=5000000的原因和解决方案

overleaf中出现TeX capacity exceeded PDF object stream buffer=5000000的原因和解决方案

在插入pdf 配图后&#xff0c;编译出错提示信息如图&#xff0c;很可能的一个原因是pdf文件大小太大了&#xff0c;最好压缩一下&#xff0c;压缩到1MB以内。
阅读更多...
Golang的并发编程问题解决

Golang的并发编程问题解决

Golang的并发编程问题解决 第一部分&#xff1a;Golang并发编程基础 并发与并行 在计算机领域&#xff0c;经常会听到并发和并行这两个词语。简单来说&#xff0c;并发是指在单处理器上通过时间片轮转实现多任务同时执行&#xff0c;而并行则是指多个任务在多个处理器上同时执行…
阅读更多...
【玩转MacBook】Maven安装

【玩转MacBook】Maven安装

下载Maven 官网&#xff1a; https://maven.apache.org/download.cgi 下载 Zip 类型的压缩包&#xff1a; 配置环境变量 以管理员身份编辑配置文件。注意&#xff0c;由于 MacBook 上使用了 zsh 命令行&#xff0c;所以需要编辑~/.zshrc文件而不是~/.bash_profile文件&am…
阅读更多...
MySQL数据库（锁）

MySQL数据库（锁）

1、MySQL有哪些锁&#xff1f; 全局锁&#xff1a;flush tables with read lock 执行以下语句之后&#xff0c;使用全局锁&#xff0c;整个数据库就处于只读状态了&#xff0c;这时其他线程执行对数据的增删改或者对表结构的更改操作操作&#xff0c;都会被阻塞。 全局锁的应…
阅读更多...
HarmonyOS NEXT 实战之元服务：静态案例效果（二）

HarmonyOS NEXT 实战之元服务：静态案例效果（二）

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图代码案例如下&#xff1a; Index里面实现 import { authent…
阅读更多...
EndtoEnd Object Detection with Transformers

EndtoEnd Object Detection with Transformers

全文摘要 本文介绍了一种新的物体检测方法——DETR&#xff08;DEtection TRansformer&#xff09;&#xff0c;该方法将物体检测视为直接的集合预测问题&#xff0c;并通过使用基于transformer的编码器解码器架构和一种集 论文方法 方法描述 该论文提出了一种名为DETR&…
阅读更多...
最新文章

Copyright @ 2022~2023