vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 17:38:54 +08:00
parent 0e32076e71
commit cb4c51a958
65 changed files with 39193 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

538
public/htmls/SORA概念.html Normal file
View File

@@ -0,0 +1,538 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SORA概念深度分析 - AI视频生成革命</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.stock-row:hover {
background-color: rgba(99, 102, 241, 0.05);
transition: background-color 0.2s ease;
}
.tab-active {
border-bottom: 3px solid #6366f1;
}
.chart-container {
position: relative;
height: 400px;
margin: 20px 0;
}
.floating-label {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<div class="navbar bg-base-100 shadow-lg">
<div class="container mx-auto px-4">
<div class="flex-1">
<a href="#" class="btn btn-ghost normal-case text-xl">
<i class="fas fa-rocket text-indigo-600 mr-2"></i>
SORA概念分析
</a>
</div>
<div class="flex-none">
<div class="badge badge-info">更新时间: 2025年</div>
</div>
</div>
</div>
<!-- 主英雄区域 -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0">
<h1 class="text-5xl font-bold mb-6">SORA概念</h1>
<h2 class="text-2xl mb-4 opacity-90">AI视频生成的范式革命</h2>
<p class="text-lg mb-8 opacity-80">从技术突破到商业化落地，SORA正在重塑内容创作的未来。探索Diffusion+Transformer架构带来的无限可能。</p>
<div class="flex flex-wrap gap-4">
<div class="stat">
<div class="stat-title text-white opacity-80">发布时间</div>
<div class="stat-value text-white">2024.02</div>
</div>
<div class="stat">
<div class="stat-title text-white opacity-80">概念股</div>
<div class="stat-value text-white">25+</div>
</div>
<div class="stat">
<div class="stat-title text-white opacity-80">市场规模</div>
<div class="stat-value text-white">千亿级</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex justify-center">
<div class="floating-label">
<div class="card w-96 bg-white text-gray-800 shadow-2xl">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-chart-line text-indigo-600"></i>
核心驱动力
</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<div>
<strong>Patch思想</strong>
<p class="text-sm text-gray-600">时空视频块处理，统一高效</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<div>
<strong>架构创新</strong>
<p class="text-sm text-gray-600">Diffusion + Transformer融合</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<div>
<strong>世界模拟器</strong>
<p class="text-sm text-gray-600">通向AGI的关键路径</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-history text-indigo-600 mr-2"></i>
发展时间轴
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot bg-indigo-600"></div>
<div class="timeline-content card card-hover bg-indigo-50">
<div class="card-body">
<h3 class="card-title">2024年2月</h3>
<p>OpenAI发布Sora模型演示，引发全球轰动，SORA概念初步形成</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-purple-600"></div>
<div class="timeline-content card card-hover bg-purple-50">
<div class="card-body">
<h3 class="card-title">2024年10月</h3>
<p>Meta、谷歌、字节跳动等巨头密集发布AI视频模型，赛道景气度高</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-pink-600"></div>
<div class="timeline-content card card-hover bg-pink-50">
<div class="card-body">
<h3 class="card-title">2024年11月</h3>
<p>Sora内测版本疑似泄露，市场解读为正式公测临近信号</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-green-600"></div>
<div class="timeline-content card card-hover bg-green-50">
<div class="card-body">
<h3 class="card-title">2024年12月</h3>
<p>OpenAI正式向ChatGPT Plus和Pro用户开放Sora，开启商业化</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-yellow-600"></div>
<div class="timeline-content card card-hover bg-yellow-50">
<div class="card-body">
<h3 class="card-title">2025年10月</h3>
<p>发布Sora 2模型及独立iOS社交应用，向内容生态平台演进</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心观点 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
核心观点分析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="card bg-white shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<i class="fas fa-rocket text-indigo-600"></i>
技术范式革命
</h3>
<p>SORA实现了视频生成领域的根本性突破，Patch处理方式和Diffusion+Transformer架构解决了长期连贯性问题，展现出世界模拟器潜力。</p>
<div class="badge badge-outline mt-4">10家券商一致看好</div>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<i class="fas fa-exclamation-triangle text-yellow-600"></i>
预期差分析
</h3>
<p>市场过于乐观忽视技术局限性：物理模拟不精确、算力成本高昂、国内外差距显著。个股纯度差异巨大，需仔细甄别。</p>
<div class="badge badge-error mt-4">存在泡沫风险</div>
</div>
</div>
<div class="card bg-white shadow-xl card-hover">
<div class="card-body">
<h3 class="card-title text-xl mb-4">
<i class="fas fa-chart-line text-green-600"></i>
商业化路径
</h3>
<p>从纯粹技术突破转向早期商业化，关注垂直场景应用和IP资源价值。Sora 2社交应用将验证C端生态可行性。</p>
<div class="badge badge-success mt-4">成长确定性高</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-table text-blue-600 mr-2"></i>
SORA概念股全景图
</h2>
<!-- 分类标签 -->
<div class="tabs tabs-boxed mb-8 justify-center">
<a class="tab tab-active" onclick="showCategory('all')">全部</a>
<a class="tab" onclick="showCategory('文生视频')">文生视频</a>
<a class="tab" onclick="showCategory('IP/版权')">IP/版权</a>
<a class="tab" onclick="showCategory('电影')">电影</a>
<a class="tab" onclick="showCategory('影视')">影视</a>
<a class="tab" onclick="showCategory('短剧')">短剧</a>
</div>
<!-- 表格 -->
<div class="overflow-x-auto">
<table class="table table-zebra w-full" id="stockTable">
<thead>
<tr class="bg-indigo-600 text-white">
<th>股票名称</th>
<th>分类</th>
<th>核心项目/技术</th>
<th>投资逻辑</th>
<th>评级</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 数据将通过JavaScript填充 -->
</tbody>
</table>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-network-wired text-purple-600 mr-2"></i>
产业链图谱
</h2>
<div class="grid lg:grid-cols-3 gap-6">
<div class="card bg-gradient-to-br from-blue-500 to-blue-600 text-white">
<div class="card-body">
<h3 class="card-title text-2xl">
<i class="fas fa-microchip"></i>
上游：技术/算力层
</h3>
<p class="my-4">提供核心技术底座和算力基础设施</p>
<ul class="space-y-2">
<li>• OpenAI（核心算法）</li>
<li>• 寒武纪（AI芯片）</li>
<li>• 海光信息（算力支持）</li>
</ul>
</div>
</div>
<div class="card bg-gradient-to-br from-purple-500 to-purple-600 text-white">
<div class="card-body">
<h3 class="card-title text-2xl">
<i class="fas fa-tools"></i>
中游：工具/平台层
</h3>
<p class="my-4">AI视频模型开发及应用平台</p>
<ul class="space-y-2">
<li>• 万兴科技（万兴天幕）</li>
<li>• 昆仑万维（SkyReels）</li>
<li>• 因赛集团（InsightGPT）</li>
</ul>
</div>
</div>
<div class="card bg-gradient-to-br from-green-500 to-green-600 text-white">
<div class="card-body">
<h3 class="card-title text-2xl">
<i class="fas fa-film"></i>
下游：应用/IP/内容层
</h3>
<p class="my-4">内容创作与应用场景</p>
<ul class="space-y-2">
<li>• 中文在线（IP资源）</li>
<li>• 芒果超媒（影视制作）</li>
<li>• 掌阅科技（短剧平台）</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-shield-alt text-red-600 mr-2"></i>
风险与挑战
</h2>
<div class="alert alert-warning shadow-lg mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div>
<h3 class="font-bold">技术风险</h3>
<div class="text-sm">物理模拟瓶颈、算力成本高昂、生成效率不足是当前主要技术挑战。</div>
</div>
</div>
<div class="alert alert-error shadow-lg mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<h3 class="font-bold">商业化风险</h3>
<div class="text-sm">成本与定价平衡困难、版权伦理问题可能引发监管收紧。</div>
</div>
</div>
<div class="alert alert-info shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">政策与竞争风险</h3>
<div class="text-sm">中美技术博弈、高端芯片限制、行业竞争白热化。</div>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-coins text-yellow-400 mr-2"></i>
投资启示
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card bg-white/10 backdrop-blur-lg">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-star text-yellow-400"></i>
最具投资价值方向
</h3>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center mr-4">
<span class="text-black font-bold">1</span>
</div>
<div>
<h4 class="font-semibold">垂直场景应用商</h4>
<p class="text-sm opacity-80">因赛集团 - AI+营销护城河深厚</p>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center mr-4">
<span class="text-black font-bold">2</span>
</div>
<div>
<h4 class="font-semibold">IP资源与数据提供商</h4>
<p class="text-sm opacity-80">中文在线、视觉中国 - 稀缺数据资源</p>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-white/10 backdrop-blur-lg">
<div class="card-body">
<h3 class="card-title text-2xl mb-4">
<i class="fas fa-chart-line text-green-400"></i>
关键跟踪指标
</h3>
<div class="space-y-2">
<div class="badge badge-outline badge-lg m-1">Sora 2 DAU/MAU</div>
<div class="badge badge-outline badge-lg m-1">视频生成质量对比</div>
<div class="badge badge-outline badge-lg m-1">因赛AI收入占比</div>
<div class="badge badge-outline badge-lg m-1">爆款AI短剧数量</div>
<div class="badge badge-outline badge-lg m-1">制作成本下降幅度</div>
<div class="badge badge-outline badge-lg m-1">IP变现效率</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<div class="alert alert-success shadow-lg max-w-2xl mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<h3 class="font-bold">综合结论</h3>
<div class="text-sm">SORA概念正从主题炒作过渡到商业化验证阶段，专注垂直场景和稀缺资源的公司将脱颖而出。</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer footer-center p-10 bg-gray-900 text-white">
<div>
<p class="font-bold">
SORA概念深度分析报告
</p>
<p>投资有风险，入市需谨慎</p>
</div>
<div>
<p>Copyright © 2025 - All right reserved</p>
</div>
</footer>
<script>
// 股票数据
const stockData = [
{stock: '万兴科技', category: '文生视频', project: '万兴天幕2.0', logic: '基于万兴天幕2.0实现视频生成、音频生成等多样化创作需求', rating: 'buy'},
{stock: '昆仑万维', category: '文生视频', project: 'SkyReels-V1', logic: '开源全球领先的SkyReels-V1视频生成模型', rating: 'buy'},
{stock: '当虹科技', category: '文生视频', project: 'BlackEye', logic: '多模态视听大模型包含文生视频等功能', rating: 'hold'},
{stock: '捷成股份', category: '文生视频', project: 'chatPV', logic: 'AI智能创作引擎已推出"文生视频"功能', rating: 'hold'},
{stock: '因赛集团', category: '文生视频', project: '多智能体系统', logic: '优化文生视频等功能，深耕营销垂直领域', rating: 'strong-buy'},
{stock: '信雅达', category: '文生视频', project: 'Pika（关联）', logic: '实控人之女创办Pika，直接对标Sora', rating: 'speculative'},
{stock: '中文在线', category: 'IP/版权', project: '60TB正版数据', logic: '拥有海量正版数据资源，AI训练基础', rating: 'buy'},
{stock: '视觉中国', category: 'IP/版权', project: '5.4亿数字内容', logic: '全球领先视觉内容交易平台', rating: 'buy'},
{stock: '掌阅科技', category: 'IP/版权', project: '数字阅读IP', logic: '丰富IP资源和精细化运营能力', rating: 'hold'},
{stock: '万达电影', category: '电影', project: '影视制作', logic: '2024年观影收入66.87亿元', rating: 'hold'},
{stock: '中国电影', category: '电影', project: '影视行业', logic: '2024年影视行业营收45.23亿元', rating: 'hold'},
{stock: '光线传媒', category: '电影', project: '电影及衍生', logic: '2024年电影及相关衍生业务11.29亿元', rating: 'hold'},
{stock: '芒果超媒', category: '影视', project: '芒果TV', logic: '2024年互联网视频业务101.79亿元', rating: 'buy'},
{stock: '华策影视', category: '影视', project: '电视剧制作', logic: '2024年电视剧制作发行收入11.94亿元', rating: 'hold'},
{stock: '华谊兄弟', category: '短剧', project: '华谊兄弟火剧', logic: '短剧品牌"华谊兄弟火剧"', rating: 'speculative'},
{stock: '中文在线', category: '短剧', project: 'ReelShort', logic: '拥有短剧全产业链能力，参股ReelShort', rating: 'buy'}
];
// 填充表格
function populateTable(category = 'all') {
const tbody = document.getElementById('stockTableBody');
tbody.innerHTML = '';
const filteredData = category === 'all'
? stockData
: stockData.filter(item => item.category === category);
filteredData.forEach(item => {
const row = document.createElement('tr');
row.className = 'stock-row';
let ratingBadge = '';
let ratingClass = '';
switch(item.rating) {
case 'strong-buy':
ratingBadge = '强烈买入';
ratingClass = 'badge-success';
break;
case 'buy':
ratingBadge = '买入';
ratingClass = 'badge-info';
break;
case 'hold':
ratingBadge = '持有';
ratingClass = 'badge-warning';
break;
case 'speculative':
ratingBadge = '投机';
ratingClass = 'badge-error';
break;
}
row.innerHTML = `
<td class="font-semibold">${item.stock}</td>
<td><span class="badge badge-outline">${item.category}</span></td>
<td>${item.project}</td>
<td class="text-sm">${item.logic}</td>
<td><span class="badge ${ratingClass}">${ratingBadge}</span></td>
`;
tbody.appendChild(row);
});
}
// 显示分类
function showCategory(category) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('tab-active'));
event.target.classList.add('tab-active');
populateTable(category);
}
// 页面加载时填充表格
document.addEventListener('DOMContentLoaded', function() {
populateTable();
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>