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}), 400if not user_input:return jsonify({'msg': '用户输入为必填', 'code': 400}), 400ppt_template=PptTemplate().query.filter_by(id=template_id).first();if not ppt_template:return jsonify({'msg': '没有找到这个模板', 'code': 400}), 400try:# 请求大模型生成PPTworkflow_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 = Noneif '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_contentif 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文件转换为PPTppt_file = 'output.pptx'subprocess.run(['marp', markdown_file, '-o', ppt_file], check=True)# 上传PPT到OSSbucket_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}}), 200except 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);// 动态插入 CSSif (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. 用户页面交互。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目2路由交换

背景 某学校为满足日常教学生活需求&#xff0c;推动数字校园的建设&#xff0c;学校有办公楼和学生宿舍楼和服务器集群三块区域&#xff0c;请合理规划IP地址和VLAN&#xff0c;实现企业内部能够互联互通现要求外网能通过公网地址访问服务器集群&#xff0c;学生和老师能正常…

快速掌握Haproxy原理架构

文章目录 一、原理架构二、无负载均衡三、四层负载均衡的工作流程四、七层负载均衡工作流程五、基础属性mode 属性retries 属性maxconn 属性clitimeout 属性servtimeout 属性states uri 属性 一、原理架构 四层tcp代理&#xff1a;Haproxy仅在客户端和服务器之间双向转发流量&…

02、并发编程的三大特性

并发编程有三大特性分别是&#xff0c;原子性&#xff0c;可见性&#xff0c;有序性。会产生这些特性的根本原因是现在的服务器都是多CPU多核心数的&#xff0c;每个CPU都有自己单独的一套缓存和pc系统&#xff0c;而且程序在运行时按照JMM的规范&#xff0c;它们是需要先把数据…

企业数字化转型和人工智能(AI)之间的关系

企业数字化转型和人工智能&#xff08;AI&#xff09;之间的关系可以被理解为 “驱动与支撑” 的关系&#xff1a;AI 是数字化转型的重要技术驱动力&#xff0c;而数字化转型为 AI 的应用提供了场景和数据支持。两者相辅相成&#xff0c;共同推动企业向智能化发展。 数字化转型…

STM32和精准的型号STM32F03C8T6 ——ADC通道数目区别

注意表达方式的区别 5&#xff0e;STM32芯片内部集成的&#xff08;12&#xff09;位ADC是一种逐次逼近型模拟数字转换器&#xff0c;具 有&#xff08;18&#xff09;个通道&#xff0c;可测量&#xff08;16&#xff09;个外部和(2)个内部信号源。 书上原话&#xff1a;STM32…

【项目构建】Gradle入门

本文适用&#xff1a; 不知道什么是项目构建&#xff0c;可以了解下Ant&#xff0c;Maven&#xff0c;Gradle的区别。知道什么是项目构建&#xff0c;了解Ant&#xff0c;Maven&#xff0c;可以看到Gradle是怎么做的。知道什么是项目构建&#xff0c;了解Ant&#xff0c;Maven&…

java栈--数据结构

前言 java实现数据结构栈&#xff1a;用顺序表存储的栈和数组存储的栈。 本文源代码网址&#xff1a;https://gitee.com/zfranklin/java/tree/master/dataStructure/src/com/njupt/stack https://gitee.com/zfranklin/java/tree/master/dataStructure/src/com/njupt/stack 栈…

2.5.2 文件结构、目录及存取

文章目录 文件结构文件目录存取 文件结构 文件结构是文件的组织形式。从用户角度观察到的结构是逻辑结构&#xff0c;从机器实现存储的角度观察&#xff0c;看到的是物理结构。 逻辑结构 有结构的记录式文件&#xff1a;文件中记录的长度都相同&#xff0c;称为定长记录。文件…

Highcharts 饼图:数据可视化利器

Highcharts 饼图&#xff1a;数据可视化利器 引言 在数据可视化的领域中&#xff0c;饼图作为一种经典且直观的图表类型&#xff0c;被广泛应用于各种行业和场景中。Highcharts&#xff0c;作为一个功能强大且易于使用的JavaScript图表库&#xff0c;为我们提供了创建交互式和…

关于科研中使用linux服务器的集锦

文章目录 常用的linux命令下载COCO2017数据集 常用的linux命令 一个文件移动到另一个目录下的命令是&#xff1a;mv -v ./old_name ./new_name 如果目标文件夹中已经有同名文件或文件夹&#xff0c;mv 会覆盖它们&#xff08;除非使用了 -i 选项来提示确认&#xff09;。 使用…

<项目代码>YOLO Visdrone航拍目标识别<目标检测>

项目代码下载链接 &#xff1c;项目代码&#xff1e;YOLO Visdrone航拍目标识别&#xff1c;目标检测&#xff1e;https://download.csdn.net/download/qq_53332949/90163918YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一…

linux命令中cp命令-rf与-a的差别

在Linux系统中&#xff0c;cp 命令用于复制文件和目录。cp -rf 和 cp -a 都常用于递归复制目录及其内容&#xff0c;但它们在功能和行为上存在一些差别&#xff1a; 1. 选项含义 cp -rf&#xff1a; -r&#xff08;recursive&#xff09;&#xff1a;表示递归复制。当源文件是…

java内存马

java内存马 idea 2024.1.2专业版 jdk1.8.0_181 tomcat 8.5.82 默认有java基础&#xff0c;Javassist&#xff0c;Jsp&#xff0c;JavaEE都会一点 更新ing 文章目录 java内存马0. 一些基础1. filter型内存马2. Servlet型内存马3. listener型内存马4. Tomcat特有的Valve内存马…

【ORB-SLAM3:相机针孔模型和相机K8模型】

在ORB-SLAM3中&#xff0c;相机的建模是 SLAM 系统的核心之一&#xff0c;因为它直接影响到如何处理和利用图像数据进行定位和地图构建。ORB-SLAM3 支持不同的相机模型&#xff0c;其中包括针孔模型和鱼眼模型&#xff08;K8 模型&#xff09;。下面分别介绍这两种模型。 相机…

undefined reference to `vtable for错误

QT构建报错&#xff1a; D:\code\QGraphicsScaleTest\main.cpp:-1: error: undefined reference to vtable for ResizableSvgViewVS编译报错&#xff1a; 1>main.obj : error LNK2001: 无法解析的外部符号 "public: virtual struct QMetaObject const * __cdecl Resi…

[手机Linux] 七,NextCloud优化设置

安装完成后在个人设置里发现很多警告&#xff0c;一一消除。 只能一条一条解决了。 关于您的设置有一些错误。 1&#xff0c;PHP 内存限制低于建议值 512 MB。 设置php配置文件&#xff1a; /usr/local/php/etc/php.ini 把里面的&#xff1a; memory_limit 128M 根据你自…

P3456 [POI2007] GRZ-Ridges and Valleys BFS-连通块思想

题目描述 Byteasar loves trekking in the hills. During the hikes he explores all the ridges and valleys in vicinity. Therefore, in order to plan the journey and know how long it will last, he must know the number of ridgesand valleys in the area he is goi…

一键打断线(根据相交点打断)——CAD c# 二次开发

多条相交线根据交点一键打断&#xff0c;如下图&#xff1a; 部分代码如下: finally namespace IFoxDemo; public class Class1 {[CommandMethod("ddx")]public static void Demo(){//"ifox可以了".Print();Database db HostApplicationServices.Workin…

【Yonghong 企业日常问题 06】上传的文件不在白名单,修改allow.jar.digest属性添加允许上传的文件SH256值?

文章目录 前言问题描述问题分析问题解决1.允许所有用户上传驱动文件2.如果是想只上传白名单的驱动 前言 该方法适合永洪BI系列产品&#xff0c;包括不限于vividime desktop&#xff0c;vividime z-suit&#xff0c;vividime x-suit产品。 问题描述 当我们连接数据源的时候&a…

基于云计算的资源管理系统

基于云计算的资源管理系统是一种将云计算技术与资源管理技术相结合&#xff0c;以实现资源高效利用和管理的系统。以下是对该系统的详细分析&#xff1a; 一、系统概述 云计算是一种基于网络的计算模式&#xff0c;通过将计算资源和数据存储在云端服务器上&#xff0c;使用户…