基于PHP与DeepSeek构建AI视频制作网站（附带源代码和演示示例）

想要制作一个基于HTML + PHP + DeepSeek API的视频生成网站。首先，需要确定具体需求，用户能够输入描述文字、上传素材、选择场景、视频风格以及输入脚本，前端的桌面端使用Flex横向布局，左侧表单，右侧视频区域，最大宽度1200px，左右等宽。移动端则是竖向排列，上面表单，下面结果。这需要使用响应式布局，使用媒体查询来处理不同设备的显示方式。

接下来是表单部分。用户可以上传素材，包括视频、音频、图片。这里需要使用HTML的文件上传控件，并允许选择多个文件。同时，场景和风格的选择需要提供下拉菜单，DeepSeek提供了10个场景和10种风格，代码中有列出这些选项，比如场景可以是现代都市、奇幻森林等，风格可以是电影胶片、动态图形等。

然后，表单支持用户输入影片的脚本，这部分可以用一个文本区域来处理。生成按钮需要触发AJAX请求，将表单数据和上传的文件发送到后端PHP处理。

在后端部分，PHP需要处理文件上传，收集所有表单数据，然后调用DeepSeek的API。不过，用户可能没有DeepSeek API的具体细节，所以代码中需要留出接口部分，假设API的端点和参数。同时，需要注意文件上传的安全处理，比如限制文件类型、大小，防止恶意上传。

前端方面，需要实现一个美观的界面，使用CSS渐变背景、毛玻璃效果，提升视觉体验。上传区域需要有拖放功能，并显示已选文件。加载中需要显示进度条或动画，结果区域在生成后展示视频。

考虑到移动端兼容性，需要使用viewport设置，确保表单元素在小屏幕上正常显示。Flex布局在桌面端横向排列，移动端改为竖向，这可以通过媒体查询中的flex-direction属性调整。

另外，在未生成视频时，右侧区域显示提示文字，这可以通过CSS的伪元素和绝对定位来实现，保持界面整洁。

最后，测试代码的各个部分，确保文件上传、表单提交、响应式布局都正常工作，并处理可能的错误情况，比如API调用失败时的提示。

总结来说，需要整合前端布局、样式、交互，后端文件处理和API调用，确保各环节无缝衔接，同时满足用户的视觉和功能需求。

话不多说，先看演示效果：

演示地址：点击查看

部分截图：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

以下是符合要求的部分源代码：

HTML5端：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI视频生成工坊</title>
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a8a5e6;
            --bg: #1a1a2e;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            background: var(--bg);
            color: #fff;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
            min-height: 100vh;
        }

        /* 桌面端布局 */
        .form-panel, .preview-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .preview-panel {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-panel::before {
            content: "请先填写描述文字和设置视频参数";
            position: absolute;
            color: rgba(255,255,255,0.3);
            font-size: 1.2em;
            text-align: center;
            padding: 20px;
        }

        /* 移动端布局 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                padding: 10px;
            }
            
            .preview-panel {
                min-height: 50vh;
            }
        }

        .upload-box {
            border: 2px dashed var(--secondary);
            padding: 20px;
            text-align: center;
            border-radius: 10px;
            margin: 15px 0;
            transition: all 0.3s ease;
        }

        .upload-box:hover {
            background: rgba(108, 92, 231, 0.1);
            border-color: var(--primary);
        }

        input[type="file"] {
            display: none;
        }

        .styled-select {
            width: 100%;
            padding: 12px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            color: #fff;
            margin: 10px 0;
        }

        .generate-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            width: 100%;
            cursor: pointer;
            font-size: 1.1em;
            transition: transform 0.2s ease;
        }

        .generate-btn:hover {
            transform: translateY(-2px);
        }

        #video-output {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

        .loading-wave {
            height: 3px;
            background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
            animation: loading 1.5s infinite;
            display: none;
        }

        @keyframes loading {
            0% { background-position: -200px 0; }
            100% { background-position: 200px 0; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧表单 -->
        <div class="form-panel">
            <h2>视频参数设置</h2>
            
            <div class="form-group">
                <label>视频描述</label>
                <textarea class="styled-select" rows="4" 
                        placeholder="请输入您的视频创意描述..."></textarea>
            </div>

            <div class="upload-box" onclick="$('#fileInput').click()">
                <p>点击上传素材 (视频/音频/图片)</p>
                <div id="fileList"></div>
            </div>
            <input type="file" multiple id="fileInput">

            <select class="styled-select" id="sceneSelect">
                <option value="">选择场景风格</option>
                <option>赛博朋克都市</option>
                <option>未来科技空间站</option>
                <option>魔幻森林秘境</option>
                <option>复古蒸汽朋克</option>
                <option>现代都市天际线</option>
                <option>动漫卡通世界</option>
                <option>西部荒野小镇</option>
                <option>海底奇幻世界</option>
                <option>末日废土风格</option>
                <option>童话故事王国</option>
            </select>

            <select class="styled-select" id="styleSelect">
                <option value="">选择视频风格</option>
                <option>电影胶片质感</option>
                <option>动态图形动画</option>
                <option>水墨艺术风格</option>
                <option>故障艺术效果</option>
                <option>8-bit像素风格</option>
                <option>赛博霓虹灯效</option>
                <option>写实纪录片</option>
                <option>卡通渲染风格</option>
                <option>黑白极简主义</option>
                <option>蒸汽波视觉</option>
            </select>

            <div class="form-group">
                <label>详细脚本</label>
                <textarea class="styled-select" rows="4" 
                        placeholder="输入分镜脚本（每行一个场景）..."></textarea>
            </div>

            <button class="generate-btn" onclick="generateVideo()">生成视频</button>
            <div class="loading-wave" id="loading"></div>
        </div>

        <!-- 右侧预览 -->
        <div class="preview-panel">
            <video id="video-output" controls></video>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 此部分代码已隐藏，请下载完整源代码，下载地址在文章最后
    </script>
</body>
</html>

PHP部分：

<?php
header('Content-Type: application/json');

// 配置参数
$apiKey = 'YOUR_DEEPSEEK_API_KEY';
$uploadDir = __DIR__.'/uploads/';

// 创建上传目录
if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

// 处理文件上传
$uploadedFiles = [];
foreach ($_FILES['assets']['tmp_name'] as $key => $tmpName) {
    $fileName = uniqid().'_'.basename($_FILES['assets']['name'][$key]);
    $targetPath = $uploadDir.$fileName;
    
    if (move_uploaded_file($tmpName, $targetPath)) {
        $uploadedFiles[] = $targetPath;
    }
}

// 准备API请求数据
$data = [
    'prompt' => $_POST['description'],
    'scene' => $_POST['scene'],
    'style' => $_POST['style'],
    'assets' => $uploadedFiles
];

// 调用DeepSeek API

// 此部分代码已隐藏，需要完整代码请下载源代码包，下载地址在文章最后

主要特性说明：

  1. 响应式布局系统：

    桌面端采用flex横向布局（max-width:1200px）
    移动端自动切换为垂直布局
    自适应间距和字体大小

  2. 视觉设计亮点：

    毛玻璃效果界面（backdrop-filter）
    动态渐变色背景
    交互动画效果（按钮悬停、文件上传）
    现代化表单控件样式

  3. 核心功能模块：

    多文件上传系统（支持视频/图片/音频）
    智能场景选择（10种预设场景）
    多样化风格选择（10种视觉风格）
    脚本输入编辑器
    实时生成状态反馈

  4. 安全增强建议（需自行添加）：

    // 在文件上传部分添加：
$allowedTypes = ['video/mp4', 'image/png', 'audio/mpeg'];
$maxSize = 100 * 1024 * 1024; // 100MB
if (!in_array($_FILES['assets']['type'][$key], $allowedTypes)) {
    // 返回类型错误
}
if ($_FILES['assets']['size'][$key] > $maxSize) {
    // 返回大小限制错误
}  ```

  5. 扩展建议：

    添加进度条组件
    实现实时预览功能
    增加用户认证系统
    添加历史记录功能

该方案实现了从素材上传到视频生成的完整流程，采用现代化设计语言，同时保证了桌面端和移动端的良好体验。实际部署时需要根据DeepSeek API的具体文档调整参数格式，并完善安全验证机制。

源码下载：

下载地址：点击下载

示例演示：

演示地址：点击预览

# php # 人工智能 # 视频生成
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

计算机毕业设计Python+DeepSeek-R1大模型空气质量预测分析(源码+文档+PPT+讲解)

avatar DeepSeek技术社区
cover

一、Python 与 DeepSeek 入门：开启文生视频之旅_python和deepseek

avatar DeepSeek技术社区
cover

用Ollama三分钟部署DeepSeek！零配置+小白友好，让你的电脑秒变AI神器_model deepseek-r17b not found, try pulling it f

avatar DeepSeek技术社区