浏览器中调用qwen openai api实现类似HiperFrames讲解科普动画视频制作播放下载代码-html代码-BFW代码库

浏览器中调用qwen openai api实现类似HiperFrames讲解科普动画视频制作播放下载代码

代码语言：html

所属分类：多媒体

代码描述：浏览器中调用qwen openai api实现类似HiperFrames讲解科普动画视频制作播放下载代码，输入主题，调用openai兼容api产生画面动画与讲解字幕，最后合成视频下载本地。

代码标签：浏览器调用 qwen openai api 类似 HiperFrames 讲解科普动画视频

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HiperFrames Lite - 浏览器端视频创作工具</title>
    <!-- 引入 Tailwind CSS 用于界面美化 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #1f2937;
        }
        ::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 3px;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">

    <!-- 隐式动画承载容器（核心：用于激活浏览器执行 SVG 内部的 SMIL 动画时间轴） -->
    <img id="hiddenSvgImage" style="position: absolute; width: 1px; height: 1px; opacity: 0.01; pointer-events: none; top: -10px; left: -10px;" />

    <!-- 导航栏 -->
    <header class="bg-gray-800 border-b border-gray-700 px-6 py-4 flex justify-between items-center shadow-lg">
        <div class="flex items-center space-x-3">
            <span class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">HiperFrames Lite</span>
            <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-400 border border-gray-600">纯浏览器版</span>
        </div>
        <div class="flex items-center space-x-4">
            <input type="password" id="apiKey" placeholder="输入大模型 API Key" class="bg-gray-700 border border-gray-600 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-indigo-500 w-64 text-gray-200">
            <select id="ttsVoice" class="bg-gray-700 border border-gray-600 rounded px-3 py-1.5 text-sm focus:outline-none text-gray-200">
                <option value="alloy">音色: Alloy (通用)</option>
                <option value="echo">音色: Echo (男声)</option>
                <option value="fable">音色: Fable (叙事)</option>
                <option value="onyx">音色: Onyx (深沉男声)</option>
                <option value="nova">音色: Nova (女声)</option>
                <option value="shimmer">音色: Shimmer (专业女声)</option>
            </select>
        </div>
    </header>

    <!-- 主容器 -->
    <main class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 p-6 overflow-hidden">
        
        <!-- 左侧：控制与输入面板 -->
        <section class="lg:col-span-4 flex flex-col space-y-4 overflow-y-auto pr-2">
            
            <!-- 参数配置面板 -->
            <div class="bg-gray-800 p-5 rounded-xl border border-gray-700 shadow-md">
                <h2 class="text-lg font-semibold mb-3 text-gray-200">1. 参数设置</h2>
                <div class="space-y-3">
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="enableTTS" class="w-4 h-4 text-indigo-600 bg-gray-900 border-gray-700 rounded focus:ring-indigo-500">
                        <label for="enableTTS" class="text-sm font-medium text-gray-300 select-none">生成 TTS 配音 (默认不生成)</label>
                    </div>
                    
                    <div id="ttsSettingsContainer" class="hidden space-y-3 pt-3 border-t border-gray-700">
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">自定义 TTS 接口地址 (需返回 Base64 数据)</label>
                            <input type="text" id="ttsApiUrl" placeholder="https://api.example.com/v1/tts" class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 te.........完整代码请登录后点击上方下载按钮下载查看