Transcription
Seedance 这个模型最近真的太火了。你可以通过简单的提示词,生成电影级的大片。今天这个视频,我们就来分享一下,在不懂编程的情况下,如何用不到30分钟的时间,让零基础的学习者开发出一个调用Seedance模型,生成视频的微信小程序。这是一个完全基于零基础学习者的开发课程。
首先,第一步,你需要到火山引擎,去开通Seedance这个模型。
然后,第二步,去微信的公众平台,去注册一个微信小程序的后台,并做一些配置。
第三步,要下载开发工具,包括微信开发者工具和你比较习惯的AI开发工具。
第四,我们利用AI来开发前端界面,完成基本的交互。
第五,利用我提供的一套SDK,来通过一句话,完成Seedance这个模型的调用。
好,第一步,我们需要到火山引擎的火山方舟这个平台里面,去开通我们将要调用的Seedance的这个视频模型。首先,你来到火山引擎,通过这个链接,前面是火山引擎的链接,然后后面加一个ARK,就是火山引擎下面的火山方舟这个平台。
好,现在登录以后,我们进入到的就是火山方舟。你看到它上面叫火山引擎,是整个大的官网,然后它下面有若干个平台,其中我们要调用的这些模型,它都在火山方舟里面。
好,火山方舟里面,我们现在,由于我们这个视频,要做的是豆包Seedance的视频的生成,所以我们要去开通。首先,我们要去开通Seedance的这个模型。我们点击开通管理。在开通管理当中,这里面就列举了这里所有的可以我们使用的模型。我们点击视觉模型。在视觉模型里面,我们找到最上面的是豆包Seedance-1.5-Pro。这个是目前可以使用的最新的Seedance的模型。当然,现在已经有Seedance 2.0。2.0现在目前在官网还没有推出这个API的这个调用的服务。我们现在,只要把这个Seedance 1.5调通了以后,你到时候2.0出来以后,我们只需要在代码里面,把这个模型的名字改一改就可以了。所以,现在我们来调用这个Seedance 1.5。
那Seedance 1.5默认情况下面,这里是没有开通的。所以你可以看到,我其他我没有开通的这些模型,它后面都有个开通服务。这个Seedance 1.5,因为我自己已经开通了,所以这个地方它显示为关闭。因此,你在这个地方点击,如果你这里是开通服务,你就点击开通就可以了。
开通了以后,我们到API管理。API管理里面里面,你去创建一个APIKey。这个APIKey名字你可以随便起,比如说我就是给Seedance用的,那我就写个Seedance,或者是说我我的应用的名称,我自己有一个什么video Generator都可以。这个名字你随便起。起了以后,然后权限就是选全部,然后点创建。创建完了以后,它就会给你显示一个APIKey,那你把这个APIKey复制下来就可以了。
所以,我们在火山方舟里面就做两件事情。一件,第一件就是开通你要调用的模型。第二,就是创建你的APIKey。
好,那我们在火山方舟里面需要做的事情就已经完成了。因为我们要做的是一个微信小程序,在微信小程序里面去生成视频。所以,我们需要到微信的公众平台里面,去注册一个小程序的后台,来管理你所要开发的这个小程序的,一些后台的一些配置。
那我们到它的官方网站是mp.weixin.qq.com。我们点击进入这个小程序的这个页面。在小程序的页面里面,我们点击前往注册。
好,注册很简单。你只需要去提供一个你在微信的其他服务当中没有用到过的邮箱,就可以完成注册了。这个很很简单。注册的,第一步,第一步就是提供邮箱,然后密码,然后点击注册。
注册完了以后,会进入第二步。第二步里面,它会让你选择是个人资质的注册,还是企业资质的注册。因为我们现在要调用的这个微信小程序,它会调用AI的服务。AI的服务在你最终提交审核的时候,是需要这个企业资质才可以通过审核的。但是我们现在如果只是在开发,去在学习开发的过程当中,你可以直接去注册一个个人资质的微信小程序。这个是没有问题的,这个是不影响你的这个整个开发调用的。
但是,有一点,如果将来你要将这个微信小程序去发布,那你就需要去提供一个你的营业执照。那如果你是企业,那你可以直接提供你的企业的营业执照。如果你不是企业,你是个人开发者,那你就去在网上去注册一个个体工商户的这样的一个身份。这个身份其实很简单,在网上你可以自己去弄,也可以找人帮你做,大概两三百块钱的成本就能够做下来。这个其实是很必要的。
因为你将来,你真正要去做独立开发的话,那很多地方都是需要提供营业执照,才能够去开发一些进阶的一些功能,比如说微信支付,手机账号的这个验证码服务等等。后续很多东西都都需要。但是你现在,我就是多说两句,你现在只是做测试的话,那你就用一个个人的资质去去去去做测,去注册这个微信小程序是没有问题的。
好,微信小程序注册好了以后。好,在进入到这个注册的小程序的后台以后,我们其他的东西你都可以不用看。我们来到开发管理里面。这里面有两个地方,有两个地址,两个域名需要去配置。这里有一个服务器域名。这里面有很多的这个域名里就是配置项。我们需要配置的是一个request的合法域名,还有一个download file的合法域名。
那我们怎么去配置?这里面你看到有很多哈。这里面其实很多都跟这个跟当前的这个课程没有关系,这是我在其他的这个功能上面所用到的一些域名。我们点击点击修改,然后用你的微信扫码登录。
好,登录以后,我们在这个request的合法域名里面,这些你都不用看。这里面只有这一条,这一条ark.cn/beijing.com。只有这个域名你需要给添加进来去。因为这个域名是我们去调用火山方舟里面的AI模型所需要访问的外部域名。你如果没有去配置这个域名的话,那你是没有办法在微信小程序里面去访问这些的。这个这些AI模型的。
然后,除了我们去调用的时候需要配置这个域名,然后还有一个就是download。你的这个视频生成以后,你想把它保存到你的本地,那你需要从豆包的平台去把这个视频下载下来,下载到你的微信小程序里面。那这个过程也需要去配置一个域名。那这个域名就是这个。这个域名,这些域名我都会在我的这个完整的开发视频的文档里面会给大家提到。你只要把这两个域名添加好了以后,点击保存并提交就可以了。
这样的话,那我们在小程序后端的配置就完成了。
好,现在我们已经把AI模型已经开通了,同时我们又注册了小程序的后台,并完成了配置。那这两个准备工作都做好了。那接下来,我们就要进行实际的小程序的开发了。小程序的开发,它我们需要涉及到两个软件。一个叫微信开发者工具。微信开发者工具,它是微信小程序开发的原生平台,你需要通过它来进行运行和测试。
那除此之外,因为我们不会写代码,我们要利用AI来帮我们写代码,所以我们还需要有一个AI的开发工具。这个工具你可以选择,比如说用cursor,你可以用Qoder,或者是trae,以及谷歌的antigravity等等,这些都可以。这个就看你自己方便。好,这个AI开发工具,你就可以自己随便选。它使用起来,每一个工具的使用体验都是一样的,所以这个你用任何一个工具都可以。
那微信开发者微信开发者工具,那我们需要来自己下载。我们还是在微信的公众平台里面,选择这个小程序,点击小程序开发文档。在这里面我们选择上面的工具,然后点击左下角的下载。点击稳定版更新日志。在这个里面,你根据你自己的操作系统,来选择合适的版本进行下载安装就可以了。
好,好,工具下载好了。那我们作为一个0基础,完全没有编程或者是开发经验的人,我们怎么去开发这个微信小程序?我们下面一步一步的来讲。首先,你创建在你的电脑上面去创建一个文件夹来作为你的这个项目的根目录。比如说我就在我的桌面上面,我随便创建一个空的文件夹,名字你可以随便取,我就叫比如说video Demo。
好,创建好了以后,那你就打开你刚刚安装好的微信开发的工具。打开以后,你应该看到这样的一个界面。我们点击添加。在这个地方,我们先选择目录,将这个目录指向你刚刚在你的电脑上面创建的这个文件夹。我就选择video demo这个文件夹。现在是空的。选择好了以后,你会看到项目的名称,它会根据你的文件夹的名字自动的去更新。好,这个你就不用管了。然后选择APP ID。这个地方,你就要选择你刚刚在微信公众平台自己去创建的那个微信小程序的后台,你就选择它就好了。这个后台,它有中文名字,也有这个它对应的这个APP ID,你自己选择。
然后后端服务,这个时候,我们先选择不使用云服务。不使用云服务的目的,就是说我们不想去使用它提供的一的那些模板,我们就选择一个最简单,最基础的模板就可以了。我们选择JS的基础模板,然后选点击创建。
好,创建成功以后,你就看到了,这个就是微信开发的工具,它的一一个实际的一个开发的环境。我们在这个工具里面,主要就只是查看这个运行的结果,做一些调试的工作。我们并不会在这个工具里面直接去写代码,因为我们自己是不会写代码的。代码我们会让AI去帮我们写好。那这个就是微信开发的工具,它在你的开发的过程当中,它体现的一个作用。
那接下来,我们就要打开真正帮我们写代码的这个工具。比如说我在这个视频里面,我用到的是Antigravity。所有的现在的这个AI的IDE,AI的这个开发工具,它的基本的使用体验都是一样的。所以你不要介意,你你现在使用的这个工具可能跟我使用的不同,这个没关系。
我们首先选择打开文件夹,然后在我桌面上面找到我刚刚创建的那个video Demo的文件。在这个文件夹下面,你看到,由于我们刚刚用微信开发者工具去去创建了这个小程序的项目,它就在里面自动的帮我们创建了里面的这些目录和对应的文件。我们打开它。
好,打开以后,那你就可以在这个antigravity左边,左边它是一个目录结构,你就可以在这个里面就能够看到你目前你当前的这个小程序,它的一一个项目结构。这里面,我简单的介绍一下哈,因为我很多的这个观众,可能是第一次接触这个微信小程序的开发,所以我这里多说两句。
这里面的这些文件,你看着好像挺多,你不用害怕。这些我们不需要每一个都用到。我们真正最后我们在开发的过程当中,你能用到的文件非常非常少,而且都不需要你自己去看懂里面到底是写了什么。我们只看这个pages。这个pages里面哈,它的每一个,它下面的每,一个文件夹就代表了你在你的小程序的界面上面看到的一个页面。但是这个logs,这个logs它是记录的一些日志信息,所以它并不会在你的界面上面反映出来。
所以,你现在你真正在界面上面能看到的,就是这个index。index这个页面所对应的界面。而它所对应的这个界面,就是你现在,我切换到这个微信开发者工具里面,你就能看到这个,这个你看它下面有一个hello world。这个界面就是这个index的这个文件夹下面所对应的这样的一个界面。它你你看到在这个文件夹下面,它其实就它把这个页面里面所需要用到的配置信息,它的一些什么页面结构,页面结构上面的一些CSS的一些这个这个style,包括它的一些逻辑,它是分成了不同的文件去管理的。所以你会看到,这一个页面会对应多个不同的文件类型,但实际上,它们是共同一起协作来完成你的这一个页面的。
好,大概就是这样的一个意思。这里,由于在这个最基础的模板里面,它仍然会给你创建一个这样的一个界面,但是这个界面实际上是我们不需要的。所以我们先要把这个界面给删掉,把里面的这些UI的内容全部清空。清空了以后,在一个完全的干净的基础上面,我们来进行后续的开发。这样的话就避免AI会犯错。
如何去清空?你看到这里面有4个文件。4个文件除了这个.json的这个文件以外,其余的文件.js,.xml,.css,这3个文件里面的所有内容全选删除。然后这个全选删除,这个还是全选删除。然后我们点击上面的file,里面选择保存所有saveall。那所有的这3个就已经就保存了。如果没保存的话,你会看到这个页面的右边,它会有一个圆白色的圆点,就代表这个页面里面有更新的内容,但是你还没有保存。所以你这里要注意一下。
那现在,我现在把这3个文件里面的内容都已经删除了。我们再回到微信开发的工具里面,我们看一下它的效果。你现在就可以看到,这个页面就是一个完全空白的一个页面。
好,在这个页面的基础上面,我们现在就可以来进行开发了。那要开发一个微信小程序,现在其实是非常简单的。总共就分两步。第一步,我们先去把这个页面的UI,它的界面静态的这个界面给开发出来。那这个地方,我们选择模型。这个模型的话,你可以选择你自己熟悉的模型。现在基本上所有的模型对于这种简单的UI开发都没有问题。我这里,我选择的是谷歌自己的Gemini 3 Pro。
好,我在这里面,我们把,把这个,我们先通过Alt的方式把index这个页面,把它给引用进来。意思就是告诉AI,我接下来的操作是跟这个页面有关的。好,然后我简单写一段描述。你可以看这个描述非常非常的简单,而且就是完全的大白话。
我让他仅设计一个微信小程序,的简单交互。这是一个可以让用户通过参考图和提示词来生成视频的应用。用户他可以上传多张图片作为参考,同时可以输入一句提示词后,点击生成按钮。在等待一段时间以后会生成一段视频。请根据以上需求,来完成一个高质量的小程序的界面。
那这个里面的内容,它没有任何这个标准的格式。你只要用你的大白话,把你的需求讲清楚了就可以了。哪怕有时候前后有点啰嗦也没有关系,现在的AI都非常的聪明,它完全可以识别你真实的目的。
好,这个需求我们写好了以后,直接点发送。然后AI就会根据你的这个需求,去帮你去把这个页面的界面给设计好。设计好了以后,待会我们就可以又回到微信开发的工具里面,去看一下它的结果。
好,经过一两分钟的等待,AI已经帮我们把这个界面创建好了。我们点击接受。然后,我们就回到微信开发的工具里面,我们来看一下。我们点击这个上面的这个刷新按钮。好,我们来看一下这个界面。这个界面本身就非常的简单,因为我们只是用来做demo,所以我就不在这个界面上面去做过多的美化。
但是,这个界面上面有一个小的问题,就是这个prompt,也就是提示词输入的地方,它弄得非常的窄。那我们还是这一点,我们还是明显的瑕疵,我们让AI来帮我们修复一下。prompt的输入框太窄了,请保持屏幕宽度的80%。
好,好,我们就用这种大白话的方式,让它去帮我们修改UI上面的明显的瑕疵。
好,经过1分钟的修改,它已经帮我们修改好了。我们点击接受。然后我们再回到微信开服的工具里面,来看一下。好,这样你现在看到的这个,它的这个提示词的这个窗口,就比较正常了。好,其他的UI的细节,你也可以按照我刚刚的这个方法,自己去做尝试。
好,为了能够让零基础的学习者,能够很快速的,并且很准确的去调用这些AI模型。那我在我的学习社区里面,我提,我为专门调用这个Seedance的这个模型,专门提供了一个SDK。那这个SDK,它是一个文件夹。在这个文件夹里面,它提主要的就是有一个.js的这样的一个专门,里面封装了关于如何去调用Seedance的这样的逻辑的文件,还有一个是readme的参考文档。
那你只需要把这两个给复制复制以后,把它给粘贴到你的小程序的这个根目录下面。然后因为它这个文件夹重名,你可以直接替换。替换以后,你就看到这个已经复制进来了,包括这个Readme的文件。
好,复制好了以后,那你就可以回到你的这个AI的开发环境里面。我们可以在这个目录当中就能够看到,这里有个doubao-sdk.js文件。在这个里面,它就记录了所有的跟这一次调用Seedance这个模型,所需要的主要的逻辑。
好,在这个里面,你需要有两个地方,你需要自己去配置一下,添加你的信息。第一个,这个地方去输入你的APIKey,也就是你在火山引擎上面的那个APIKey。这个在我们前面的视频里面,我们已经提到了,你把你申请的那个APIKey复制过来,粘贴到这里就行了。
然后第二个,就是你现在在微信开发的工具当中,开发的这个小程序,它所对应的云环境的ID。那云环境的ID在哪?我们在微信开发的工具里面,我们点击右上角,这里有一个云开发。在这个云开发里面,我们点击进去。如果你是第一次进入这个云开发的话,那您可能还没有启用你的云开发的环境,你需要去完成一个开通的这样一个操作。你只要点击开通就可以了。一般第一次刚开始的时候,第一个月都是免费的。你开通以后,你就会看到这个地方有一个云环境的ID。你把这个ID给复制下来,然后粘贴到这个地方就可以了。
好,当你在这个SDK的文件里面配置好了你的APIKey和你的云环境的ID以后,那接下来,我们就可以让AI来帮我们完成这个Seedance这个模型的调用了。
好,首先,我可以写这样一句话。我已经在这个,我们把这个index,也就是我们开发的这个界面所对应的页面,把它引用进来。我告诉他我已经在这个页面上完成了界面的开发,现在请参考readme好的指示,帮我实现点击,只是调用豆包的Seedance模型实现点击,实现生成视频的功能。
好,就是这样一句很简单的话,我们发给他AI。他就会去参考这个readme文件。这个readme文件里面就告诉了他,这个SDK怎么用。
你可以看到AI,它就根据你的指示,它去阅读相关的文件,然后根据里面的提示,然后去实现调用。我们稍微等一下,等它调用完成,我们来看一下效果。
好,很快,大概也就一分钟多钟的时间,他就已经完成了调用。我们点击接受。
好,现在我们就来测试一下。好,我们现在来重新来运行一下。我们点击,然后上传我们的这张图片。这张图片,是一个女孩正在听音乐。那这个地方,我们把它提示词稍微写一下,女孩非常享受音乐。我们点击生成。
在生成的过程当中,你可以通过右面的这个日志窗口,也就是console这个窗口,能够实时地查看到它后台的一个运行的过程。你可以看到它有一个生成的进度,同时还会在生成的过程当中,它会不断地去检查服务器上面这个视频有没有生成。如果生成的话,它就会立刻把它给显示到你的界面上来。
所以,通过这个方式,你就很很方便地,能够在你自己已有的应用当中,去把这个通过Seedance这个模型来生成视频的这个功能,给集成到你的微信小程序里面了。
好,这个视频已经生成了。你可以看到这个视频,它不仅让画面动起来,同时还配了音乐。我们点击保存。好,保存的话,它会先要你的权限,然后把它保存到桌面上。
好,这里我们就先把它给。好,这样的话,我们这个就已经开发好了。我们来看一下,我们刚刚保存到桌面上的这个视频,看一下效果。看到这个视频非常的真实,而且镜头感也非常的好。
那这样的话,我们就完成了Seedance这个视频的调用了。