返回顶部
热门问答 更多热门问答
技术文章 更多技术文章

Gemini最新模型,一键把YouTube视频变成精美网页

[复制链接]
链载Ai 显示全部楼层 发表于 半小时前 |阅读模式 打印 上一主题 下一主题
Gemini最新发布的Gemini 2.5 Pro Preview 05-06模型能力非常强,可以直接把YouTube视频变成好看的网页,既方便学习,又方便分享。
方法来自于 卡兹克:
https://mp.weixin.qq.com/s/Xi9jOgws46O6EUq_jdaIYA

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">Prompt

帮我将youtube视频生成网页,不要遗漏信息根据上面内容生成一个 HTML 动态网页

1.使用Bento Grid风格的视觉设计,色彩搭配要柔和
2.强调超大字体或数字突出核心要点,画面中有超大视觉元素强调重点,与小元素的比例形成反差
3.中英文混用,中文大字体粗体,英文小字作为点缀
4.简洁的勾线图形化作为数据可视化或者配图元素
5.运用高亮色自身透明度渐变制造科技感,但是不同高亮色不要互相渐变
6.模仿 apple 官网的动效,向下滚动鼠标配合动效
7.数据可以引用在线的图表组件,样式需要跟主题一致
8.使用 Framer Motion (通过CDN引入)
9.使用HTML5、Tailwindcss 3.0+(通过CDN引入)和必要的JavaScript
10.使用专业图标库如FontAwesome或Material lcons(通过CDN引入)
11.避免使用emoji作为主要图标
12.不要省略内容要点

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">本内容是对这个方法的实践。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.578px;margin-top: 0px;margin-bottom: 8px;font-size: 20px;padding-bottom: 12px;">实践

我在YouTube上找了一个纳瓦尔6分钟的访谈视频,

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">链接:https://www.youtube.com/watch?v=5JAHYyo1Fjc

然后在aistudio.google.com中选 Gemini 2.5 Pro Preview 05-06 大模型,在添加文件中直接选择【YouTube Video】

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">输入 卡兹克的提示词,就可以直接得到一个 html 代码。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">我习惯在 VS Code 中打开,因为手动调整代码和预览都很方便,一般AI直接生成的 html文件 都会有点小问题,比如图片和文字没对齐,有的地方留白面积太大,这种小毛病与其让AI修改,还不如手动修改更方便,最重要的是这个过程可以学习一点编程知识,看不懂的代码就截图问AI,慢慢尝试修改,实在不会改的再用 Cursor、Windsurf、Trae 这样的 AI IDE工具。


把 html文件样式调整到自己满意之后,可以用 Cursor 调用 Edgeone MCP 部署上线。

(比较复杂的 html文件 edgeone mcp无法部署,只能用其他方法)


我在这里用的是Sealos部署,大家展示:

https://static-host-x4o0qwe4-index.sealoshzh.site/


如果觉得部署太麻烦,可以用【飞书截图】,截长图,直接就是图片格式。


一个视频内容,直接转变成精美的网页,不但整理出了视频的核心内容,还把它可视化展现了出来,对学习、记忆、分享都非常有帮助。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

链载AI是专业的生成式人工智能教程平台。提供Stable Diffusion、Midjourney AI绘画教程,Suno AI音乐生成指南,以及Runway、Pika等AI视频制作与动画生成实战案例。从提示词编写到参数调整,手把手助您从入门到精通。
  • 官方手机版

  • 微信公众号

  • 商务合作

  • Powered by Discuz! X3.5 | Copyright © 2025-2025. | 链载Ai
  • 桂ICP备2024021734号 | 营业执照 | |广西笔趣文化传媒有限公司|| QQ