|
在上一篇中，我用kimi帮我生成了一个浏览器插件功能，实现根据配置不停的刷新网页。参考 AI写代码：我用kimi生成了一个插件，完美实现功能 kimi使用集合汇总在这里
AI写代码：我用kimi生成了一个插件，完美实现功能
kimi新玩法，让kimi变成考官给你出题考试
kimi开放API使用了，来看如何使用
AI写情景喜剧：我让kimi参考<爱情公寓>中吕子乔，关谷，曾小贤，张伟的人设写了4段喜剧对话，这次的主题是关于程序员发量
AI写情景喜剧：我让kimi参考<爱情公寓>中吕子乔，关谷，曾小贤，张伟的人设写了4段喜剧对话，结果出乎我意料 这一次，继续尝试kimi的更多功能。我需要让kimi给我生成一个能播放视频的网站，这样在同一网络的机器就可以通过url来访问不同的视频。算是可以做到本地拉流的测试。这样就不用去外网找片源进行播放。 首先还是告诉kimi我的需求
#python版本：3.9#代码功能: 实现视频播放网站#使用框架: flask #网页功能： #功能1 视频源文件在本地。web首页呈现所有在工程video文件夹下的视频 #功能2 点击网页中的视频后开始在浏览器中播放视频
按照这个需求，给出完整的插件代码
kimi给出的完整代码 根据您的需求，您希望使用Python 3.9版本和Flask框架来实现一个视频播放网站。这个网站的功能包括在首页展示本地video文件夹下的所有视频文件，并且能够点击视频后在浏览器中播放。下面是一个简单的示例代码，用于实现您的基本需求。请注意，这个代码仅作为一个基础模板，您可能需要根据实际情况进行调整和完善。# 导入必要的库from flask import Flask, render_template, send_from_directory
# 创建Flask应用app = Flask(__name__, static_url_path='', static_folder='static')
# 定义路由和对应的处理函数@app.route('/')def index(): # 获取video文件夹下所有视频文件 video_files = [f for f in os.listdir('video') if os.path.isfile(os.path.join('video', f))] # 渲染首页模板，并传递视频文件列表 return render_template('index.html', videos=video_files)
@app.route('/video/<filename>')def video(filename): # 检查文件是否存在 if os.path.exists(os.path.join('video', filename)): # 调用send_from_directory函数来发送文件 return send_from_directory('video', filename) else: abort(404)
# 运行应用if __name__ == '__main__': app.run(debug=True)
接下来，您需要创建两个文件夹：video用于存放视频文件，templates用于存放HTML模板文件。在templates文件夹中，创建一个名为index.html的文件，代码如下：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>视频播放网站</title></head><body> <h1>视频列表</h1> <ul> {% for video in videos %} <li><a href='{{ url_for('video', filename=video) }}'>{{ video }}</a></li> {% endfor %} </ul></body></html>
这个HTML模板会显示一个视频列表，每个视频旁边都有一个链接，点击链接即可播放对应的视频。
请确保您的video文件夹位于与Flask应用相同的目录下，并且在该文件夹中放入您希望展示和播放的视频文件。 要运行此应用，保存上述代码到一个.py文件中，然后在命令行中执行该文件。确保您已经安装了Flask库，如果没有，可以通过运行pip install flask来安装。 这是一个基础的实现，您可能需要添加更多的功能，比如视频流处理、用户界面美化、视频播放控件等。这些功能可能需要更复杂的代码和额外的库支持。 接下来问kimi如何运行这个工程
kimi的回答是在本地运行的方式，而我的需求是要在一个局域网内运行，所以需要指定IP地址和端口。继续询问kimi
根据上面提示，我的代码就改成了192.168.0.104
运行命令python video_play.py. 界面如下
但是在打开网页，点击视频的时候报错代码运行报错：jinja2.exceptions.TemplateNotFound: index.html 向kimi进行询问。得到3点需要满足的点，根据这3点对代码进行了检查，发现templates文件夹被我命令成了template。名字少了个s，因此找不到index.html。
更新文件夹名称后，再来运行。运行电脑是连上wifi，同时手机也连上wifi，现在我们在手机上来打开URL并开始点击视频进行播放。 通过录屏可以看到可以正常打开网页，点击对应的视频名称可以正常播放，也可以对视频进行下载。达到了我测试的需求
继续渲染网页，让网页更美观一点
但是这个网页界面太简单，我想配点图片或者用bootstrap渲染下，因此继续给kimi提需求 
更新后的index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>视频播放网站</title> <!-- 引入Bootstrap CSS --> <link rel='stylesheet' href='https://stackpath./bootstrap/4.5.2/css/bootstrap.min.css'> <script src='https://code./jquery-3.5.1.slim.min.js'></script> <script src='https://cdn./npm/@popperjs/core@2.9.3/dist/umd/popper.min.js'></script> <script src='https://stackpath./bootstrap/4.5.2/js/bootstrap.min.js'></script> <!-- 引入自定义样式 --> <style> /* 在这里添加您的自定义CSS样式 */ .card-img-top { width: 100%; height: auto; }</style></head><body> <div class='container'> <h1 class='text-center my-4'>视频播放网站</h1>
<div class='row'> {% for video in videos %} <div class='col-md-3 col-6'> <div class='card'> <!-- 假设您有一个视频缩略图文件，替换为实际的图片路径 --> <img class='card-img-top' src='video-thumbnail.jpg' alt='Card image cap'> <div class='card-body'> <h5 class='card-title'>{{ video }}</h5> <p class='card-text'>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href='{{ url_for('video', filename=video) }}' class='btn btn-primary'>播放</a> </div> </div> </div> {% endfor %} </div> </div></body></html>
但是执行的时候报错，从界面上看到获取video-thumbnail.jpg的时候404 error
向kimi反馈这个问题
按照kimi的提示新建static文件夹，以及下属文件夹。并将图片放入到static/images的目录下。重新运行成功了，但是有另外一个问题。图片太大了。显得整个页面极不协调。如下图
因此继续询问如何在index.html中设置图片大小。kimi给了我2种方案。1 html中设置width和height 2 使用css样式。决定采用第一种方案。在html中设置width和height
在index.html的img属性中增加了style='width: 200px; height: auto;'后，再次打开网页。这个比例就比较合适了
还有个问题，每个视频源的图片一样，我想做到每个视频源不同的图片
kimi告诉我 1 准备每个片源的图片，图片名称保持和视频源名称一样 2 修改index.html模板。使用{{ video }}变量来动态构建每个缩略图图片的文件名，并将其作为src属性的值。这样，每个视频项都会显示对应的缩略图图片 <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>视频播放网站</title> <!-- 引入Bootstrap CSS --> <link rel='stylesheet' href='https://stackpath./bootstrap/4.5.2/css/bootstrap.min.css'> <!-- 引入自定义样式 --> <style> .card-img-top { width: 100%; /* 设置图片宽度为100% */ height: auto; /* 高度自动，保持图片比例不变 */ }</style></head><body> <div class='container'> <h1 class='text-center my-4'>视频播放网站</h1>
<div class='row'> {% for video in videos %} <div class='col-md-3 col-6'> <div class='card'> <!-- 动态引用缩略图图片 --> <img class='card-img-top' src='{{ url_for('static', filename='images/' + video + '.jpg') }}' alt='Card image cap'> <div class='card-body'> <h5 class='card-title'>{{ video }}</h5> <p class='card-text'>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href='{{ url_for('video', filename=video) }}' class='btn btn-primary'>播放</a> </div> </div> </div> {% endfor %} </div> </div></body></html>
重新运行，发现网站打开有问题，后台log看到报如下错，可以看到我们请求的是浴血黑帮.mp4.jpg。问题在哪里呢。问题就在于我们把视频的完整名字copy了过来。应该是去掉mp4的后缀。
继续反馈给kimi
更新后的index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>视频播放网站</title> <!-- 引入Bootstrap CSS --> <link rel='stylesheet' href='https://stackpath./bootstrap/4.5.2/css/bootstrap.min.css'> <!-- 引入自定义样式 --> <style> .card-img-top { width: 100%; /* 设置图片宽度为100% */ height: auto; /* 高度自动，保持图片比例不变 */ }</style></head><body> <div class='container'> <h1 class='text-center my-4'>视频播放网站</h1>
<div class='row'> {% for video in videos %} <div class='col-md-3 col-6'> <div class='card'> <!-- 构建缩略图图片的文件名，去掉.mp4扩展名，并添加.jpg扩展名 --> <img class='card-img-top' src='{{ url_for('static', filename='images/' + video[:-4] + '.jpg') }}' alt='Card image cap'> <div class='card-body'> <h5 class='card-title'>{{ video }}</h5> <p class='card-text'>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href='{{ url_for('video', filename=video) }}' class='btn btn-primary'>播放</a> </div> </div> </div> {% endfor %} </div> </div></body></html>
在这个模板中，kimi使用了Python的字符串切片操作video[:-4]来去掉视频文件名末尾的.mp4扩展名。然后，我们在文件名后面添加了.jpg扩展名，以构建缩略图的正确路径。 请确保您的缩略图文件（例如浴血黑帮.jpg）位于static/images文件夹中，并且与视频文件名（不包含扩展名）相匹配。 最后来看效果。美观度大大提升。
但是我们还需要改变，可以看到每个片源的描述都一样，我们要根据每个片源做不同的描述。所以继续让kimi优化
kimi给出方案
1. 创建描述字典在Flask视图函数中，创建一个字典，将每个视频文件名映射到其描述。例如： # 假设这是您的视频文件名列表video_files = ['浴血黑帮.mp4', '电影2.mp4', '电影3.mp4']
# 创建一个字典来存储每个视频的描述video_descriptions = { '浴血黑帮.mp4': '描述1：这是浴血黑帮的视频描述。', '电影2.mp4': '描述2：这是电影2的视频描述。', '电影3.mp4': '描述3：这是电影3的视频描述。', # 添加更多视频描述...}
# 确保字典中的键是视频文件名（不包含扩展名），并且与video_files列表中的文件名相匹配
2. 将描述字典传递给模板在渲染index.html模板时，将video_descriptions字典传递给它： @app.route('/')def index(): # 获取video文件夹下所有视频文件 video_folder = os.path.join(os.path.dirname(__file__), 'video') video_files = [f for f in os.listdir(video_folder) if f.endswith('.mp4')] # 创建视频描述列表 video_descriptions = get_video_descriptions(video_files) # 渲染index.html模板，并传递视频文件列表和描述字典 return render_template('index.html', videos=video_files, descriptions=video_descriptions)
def get_video_descriptions(videos): # 假设这是您的视频描述字典 descriptions = { '浴血黑帮.mp4': '描述1：这是浴血黑帮的视频描述。', # ...其他视频描述 } # 过滤掉没有描述的视频 return {video: descriptions[video] for video in videos if video in descriptions}
3. 在index.html模板中显示描述在index.html模板中，使用descriptions字典来显示每个视频的描述： <div class='container'> <h1 class='text-center my-4'>视频播放网站</h1> <div class='row'> {% for video in videos %} <div class='col-md-3 col-6'> <div class='card'> <!-- 构建缩略图图片的文件名，去掉.mp4扩展名，并添加.jpg扩展名 --> <img class='card-img-top' src='{{ url_for('static', filename='images/' + video[:-4] + '.jpg') }}' alt='Card image cap'> <div class='card-body'> <h5 class='card-title'>{{ video }}</h5> <!-- 显示视频描述 --> <p class='card-text'>{{ descriptions[video] }}</p> <a href='{{ url_for('video', filename=video) }}' class='btn btn-primary'>播放</a> </div> </div> </div> {% endfor %} </div></div>
更新后的代码如下
from flask import Flask, render_template, send_from_directoryimport os
app = Flask(__name__)
# 假设这是您的视频文件名列表video_files = ['浴血黑帮.mp4', '浴血黑帮2.mp4']
# 创建一个字典来存储每个视频的描述video_descriptions = { '浴血黑帮.mp4': '汤米·谢尔比经营着一家地下赌场，而谢尔比家族掌控着浴血黑帮。汤米的下属偷到政府的武器，波莉让他归还武器。艾达·谢尔比和GCD员弗雷迪幽会，他们是地下情人。警察坎贝尔绑架亚瑟·谢尔比，盘问武器偷窃案。汤米初见女招待格蕾丝，就惊讶于她的美貌。坎贝尔向邱吉尔保证，他会找到武器和偷窃者。汤米决定把武器藏起来，他要卖了它们。格蕾丝是警方特工，她奉命调查武器被偷一事。', '浴血黑帮2.mp4': '警察在街上肆意搜捕GCD，弗雷迪匆忙将艾达藏在多诺万夫人处。坎贝尔到教堂查找武器，却遭到波莉的戏弄。汤米领导众人焚烧国王画像，并找来记者将此发报。艾达声称自己不会打掉孩子，相信孩子的父亲一定会回来。汤米应约见坎贝尔，他以武器威胁，终于与坎贝尔谈成交易。格蕾丝接到坎贝尔的命令，不惜一切代价的接近汤米。正当艾达决定开始重新生活时，弗雷迪却赶了回来，并向艾达求婚。',}
# @app.route('/')# def index():# # 获取video文件夹下所有视频文件# video_folder = os.path.join(os.path.dirname(__file__), 'video')# video_files = [f for f in os.listdir(video_folder) if os.path.isfile(os.path.join(video_folder, f))]# # 渲染index.html模板，并传递视频文件列表# return render_template('index.html', videos=video_files)
@app.route('/')def index(): # 获取video文件夹下所有视频文件 video_folder = os.path.join(os.path.dirname(__file__), 'video') video_files = [f for f in os.listdir(video_folder) if f.endswith('.mp4')] # 创建视频描述列表 video_descriptions = get_video_descriptions(video_files) # 渲染index.html模板，并传递视频文件列表和描述字典 return render_template('index.html', videos=video_files, descriptions=video_descriptions)
def get_video_descriptions(videos): # 假设这是您的视频描述字典 descriptions = { '浴血黑帮.mp4': '汤米·谢尔比经营着一家地下赌场，而谢尔比家族掌控着浴血黑帮。汤米的下属偷到政府的武器，波莉让他归还武器。艾达·谢尔比和GCD员弗雷迪幽会，他们是地下情人。警察坎贝尔绑架亚瑟·谢尔比，盘问武器偷窃案。汤米初见女招待格蕾丝，就惊讶于她的美貌。坎贝尔向邱吉尔保证，他会找到武器和偷窃者。汤米决定把武器藏起来，他要卖了它们。格蕾丝是警方特工，她奉命调查武器被偷一事。', '浴血黑帮2.mp4': '警察在街上肆意搜捕GCD，弗雷迪匆忙将艾达藏在多诺万夫人处。坎贝尔到教堂查找武器，却遭到波莉的戏弄。汤米领导众人焚烧国王画像，并找来记者将此发报。艾达声称自己不会打掉孩子，相信孩子的父亲一定会回来。汤米应约见坎贝尔，他以武器威胁，终于与坎贝尔谈成交易。格蕾丝接到坎贝尔的命令，不惜一切代价的接近汤米。正当艾达决定开始重新生活时，弗雷迪却赶了回来，并向艾达求婚。', } # 过滤掉没有描述的视频 return {video: descriptions[video] for video in videos if video in descriptions}
@app.route('/video/<filename>')def video(filename): # 检查文件是否存在 video_path = os.path.join(os.path.dirname(__file__), 'video', filename) if os.path.exists(video_path): # 设置响应类型为视频文件的MIME类型 return send_from_directory('video', filename, as_attachment=False) else: # 如果文件不存在，返回404页面 return 'Video not found', 404
if __name__ == '__main__': app.run(host='0.0.0.0', port=8080)
最后来看实际效果。非常完美
总结 这一次给kimi的反馈相对简单。特别是渲染网页方面。所以整个过程是一步步的前进。遇到问题，反馈问题。解决问题。然后提新需求。这个也是因为我最初想的并没有考虑到网页渲染的事情，所以没有在描述中给到kimi这个要求。不过从这一次实践来说，在我没有写任何一行代码的情况下，完全凭借和kimi的交互，完成了一个视频网站从无到有的搭建。AI的能力确实杠杠的![图片]() 最后我根据最终的功能更新了和kimi的描述prompt。我试下。产生的代码和最终的差不多。只需要微调下。所以好的prompt是成功的关键。 #python版本：3.9#代码功能: 实现视频播放网站#使用框架: flask #网页功能： #功能1 视频源文件在本地。web首页呈现所有在工程video文件夹下的视频 #功能2 点击网页中的视频后开始在浏览器中播放视频 #功能3 网页使用boottrap渲染。每个视频源采用不同的图片，图片大小可配 #功能4 每个视频采用单独的介绍。
按照这个需求，给出完整的工程代码
kimi使用集合
AI写代码：我用kimi生成了一个插件，完美实现功能
kimi新玩法，让kimi变成考官给你出题考试
kimi开放API使用了，来看如何使用
AI写情景喜剧：我让kimi参考<爱情公寓>中吕子乔，关谷，曾小贤，张伟的人设写了4段喜剧对话，这次的主题是关于程序员发量
AI写情景喜剧：我让kimi参考<爱情公寓>中吕子乔，关谷，曾小贤，张伟的人设写了4段喜剧对话，结果出乎我意料
|
