import os
import json
from dotenv import load_dotenv
from cozepy import Coze, TokenAuth, COZE_CN_BASE_URL
from flask import Flask, request, jsonify, send_file
from flask_cors import CORS
load_dotenv()
app = Flask(__name__)
CORS(app)
def create_video(animal_description):
try:
api_token = os.getenv('COZE_API_TOKEN')
workflow_id = os.getenv('WORKFLOW_ID')
coze = Coze(
auth=TokenAuth(token=api_token),
base_url=COZE_CN_BASE_URL
)
workflow = coze.workflows.runs.create(
workflow_id=workflow_id,
parameters={"input": animal_description}
)
video_url = json.loads(workflow.data)['output']
return video_url
except Exception as e:
return None
@app.route("/generate-video", methods=['POST'])
def generate_video():
data = request.get_json()
animal_description = data.get('input', '').strip()
video_url = create_video(animal_description)
return jsonify({'success': True, 'video_url': video_url, 'description': animal_description})
@app.route('/')
def index():
return send_file('index.html')
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动物世界视频生成器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
min-height: 100vh;
color: #333;
padding: 20px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 30px;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.header h1 {
font-size: 3rem;
margin-bottom: 10px;
background: linear-gradient(45deg, #FFD700, #FF8C00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.header p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.main-content {
display: flex;
flex-direction: column;
gap: 30px;
}
@media(min-width: 992px) {
.main-content { flex-direction: row; }
}
.input-section, .output-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
flex: 1;
}
.input-section { display: flex; flex-direction: column; }
.section-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.8rem;
margin-bottom: 20px;
color: #2c3e50;
padding-bottom: 10px;
border-bottom: 2px solid #3498db;
}
.section-title i { color: #3498db; }
.animal-description {
flex: 1;
min-height: 200px;
padding: 20px;
font-size: 1.1rem;
border: 2px solid #e0e0e0;
border-radius: 15px;
resize: vertical;
margin-bottom: 20px;
transition: border 0.3s;
}
.animal-description:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.examples { margin-top: 15px; margin-bottom: 25px; }
.examples h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.2rem; }
.example-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.example-tag {
background: #e3f2fd;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid #bbdefb;
font-size: 0.95rem;
}
.example-tag:hover {
background: #bbdefb;
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.buttons { display: flex; gap: 15px; margin-top: 20px; }
.btn {
padding: 15px 30px;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
flex: 1;
}
.generate-btn {
background: linear-gradient(45deg, #3498db, #2ecc71);
color: white;
}
.generate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 15px rgba(52, 152, 219, 0.4);
}
.generate-btn:active { transform: translateY(0); }
.clear-btn {
background: #f5f5f5;
color: #555;
border: 1px solid #ddd;
}
.clear-btn:hover {
background: #e0e0e0;
transform: translateY(-3px);
}
.output-section { display: flex; flex-direction: column; }
.video-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 15px;
overflow: hidden;
margin-bottom: 20px;
min-height: 300px;
position: relative;
}
.video-placeholder {
text-align: center;
color: #7f8c8d;
padding: 40px;
}
.video-placeholder i { font-size: 4rem; margin-bottom: 20px; color: #bdc3c7; }
.video-placeholder h3 { font-size: 1.5rem; margin-bottom: 10px; }
.video-player { width: 100%; height: 100%; border-radius: 15px; }
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 15px;
}
.spinner {
width: 70px;
height: 70px;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: spin 1.5s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.video-info {
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
margin-top: 20px;
}
.video-info h3 {
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.description-text { line-height: 1.6; color: #555; }
.action-buttons { display: flex; gap: 15px; margin-top: 20px; }
.action-btn {
padding: 12px 25px;
border-radius: 10px;
border: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
flex: 1;
}
.download-btn {
background: linear-gradient(45deg, #2ecc71, #27ae60);
color: white;
}
.download-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}
.share-btn {
background: linear-gradient(45deg, #9b59b6, #8e44ad);
color: white;
}
.share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
}
.footer {
text-align: center;
margin-top: 40px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
padding: 20px;
}
.footer a { color: #FFD700; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.notification {
position: fixed;
top: 30px;
right: 30px;
padding: 15px 25px;
border-radius: 10px;
color: white;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
transform: translateX(150%);
transition: transform 0.5s ease;
}
.notification.show { transform: translateX(0); }
.success { background: linear-gradient(45deg, #2ecc71, #27ae60); }
.error { background: linear-gradient(45deg, #e74c3c, #c0392b); }
@media(max-width: 768px) {
.header h1 { font-size: 2.2rem; }
.input-section, .output-section { padding: 20px; }
.buttons, .action-buttons { flex-direction: column; }
.btn, .action-btn { width: 100%; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-paw"></i> 动物世界视频生成器</h1>
<p>描述你想象中的动物，AI 将为你生成独特的动物视频。从可爱的小猫到神奇的神兽，一切皆有可能！</p>
</div>
<div class="main-content">
<div class="input-section">
<div class="section-title"><i class="fas fa-edit"></i><h2>描述你的动物</h2></div>
<textarea class="animal-description" id="animalDescription" placeholder="描述你想要生成的动物视频...例如：一只蓝色的狐狸在雪地中奔跑，毛发如丝般顺滑，眼睛像蓝宝石一样闪耀。"></textarea>
<div class="examples">
<h3>试试这些例子：</h3>
<div class="example-tags">
<div class="example-tag" data-example="一只会说话的熊猫，戴着草帽，在竹林中跳舞">会说话的熊猫</div>
<div class="example-tag" data-example="一只彩虹色的独角兽，在星空中飞翔，身后留下七彩光芒">彩虹独角兽</div>
<div class="example-tag" data-example="一只机械狮子，在未来的城市中巡逻，眼睛发出红色光芒">机械狮子</div>
<div class="example-tag" data-example="一只透明的水母，在深海发光，触手轻轻摆动">发光水母</div>
<div class="example-tag" data-example="一只长着翅膀的小猫，在云朵间嬉戏">飞天小猫</div>
</div>
</div>
<div class="buttons">
<button class="btn generate-btn" id="generateBtn"><i class="fas fa-video"></i> 生成视频</button>
<button class="btn clear-btn" id="clearBtn"><i class="fas fa-eraser"></i> 清空内容</button>
</div>
</div>
<div class="output-section">
<div class="section-title"><i class="fas fa-film"></i><h2>生成的视频</h2></div>
<div class="video-container" id="videoContainer">
<div class="video-placeholder" id="videoPlaceholder">
<i class="fas fa-play-circle"></i>
<h3>视频将在这里显示</h3>
<p>描述一个动物，然后点击'生成视频'按钮</p>
</div>
<div class="loading" id="loadingIndicator" style="display: none;">
<div class="spinner"></div>
<h3>正在生成视频...</h3>
<p>这可能需要一些时间，请耐心等待</p>
</div>
<video class="video-player" id="videoPlayer" controls style="display: none;"></video>
</div>
<div class="video-info" id="videoInfo" style="display: none;">
<h3><i class="fas fa-info-circle"></i> 描述</h3>
<p class="description-text" id="descriptionText"></p>
<div class="action-buttons">
<button class="action-btn download-btn" id="downloadBtn"><i class="fas fa-download"></i> 下载视频</button>
<button class="action-btn share-btn" id="shareBtn"><i class="fas fa-share-alt"></i> 分享视频</button>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Powered by Coze AI • 视频生成可能需要 30 秒到 1 分钟时间 • <a href="#" id="refreshLink">刷新页面</a></p>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
const animalDescription = document.getElementById('animalDescription');
const generateBtn = document.getElementById('generateBtn');
const clearBtn = document.getElementById('clearBtn');
const videoContainer = document.getElementById('videoContainer');
const videoPlaceholder = document.getElementById('videoPlaceholder');
const videoPlayer = document.getElementById('videoPlayer');
const videoInfo = document.getElementById('videoInfo');
const descriptionText = document.getElementById('descriptionText');
const loadingIndicator = document.getElementById('loadingIndicator');
const downloadBtn = document.getElementById('downloadBtn');
const shareBtn = document.getElementById('shareBtn');
const exampleTags = document.querySelectorAll('.example-tag');
const notification = document.();
refreshLink = .();
exampleTags.( {
tag.(, {
animalDescription. = tag.();
});
});
clearBtn.(, {
animalDescription. = ;
animalDescription.();
});
generateBtn.(, generateVideo);
animalDescription.(, {
((e. || e.) && e. === ) {
();
}
});
() {
description = animalDescription..();
(!description) {
(, );
animalDescription.();
;
}
loadingIndicator.. = ;
videoPlaceholder.. = ;
videoPlayer.. = ;
videoInfo.. = ;
generateBtn. = ;
generateBtn. = ;
{
response = (, {
: ,
: {
: ,
},
: .({ : description })
});
data = response.();
(data. && data.) {
videoPlayer. = data.;
videoPlayer.. = ;
descriptionText. = data.;
videoInfo.. = ;
(, );
videoPlayer. = {
loadingIndicator.. = ;
};
videoPlayer. = {
loadingIndicator.. = ;
(, );
};
} {
(data. || );
}
} (error) {
.(, error);
( + error., );
videoPlaceholder.. = ;
loadingIndicator.. = ;
} {
generateBtn. = ;
generateBtn. = ;
}
}
downloadBtn.(, {
(videoPlayer.) {
link = .();
link. = videoPlayer.;
link. = + .() + ;
..(link);
link.();
..(link);
(, );
} {
(, );
}
});
shareBtn.(, {
(videoPlayer.) {
(navigator.) {
navigator.({
: ,
: animalDescription.,
: ..,
}).( (, )).( ( + error., ));
} {
navigator..(videoPlayer.).( (, )).( (, ));
}
} {
(, );
}
});
refreshLink.(, {
e.();
..();
});
() {
notification. = message;
notification. = + type;
notification..();
( {
notification..();
}, );
}
.(, {
animalDescription.();
});
</script>
</body>
</html>
