=== index.html === Open-Sora v2 Text to Video | AI Video Generation
Built with Open-Sora-v2

Transform Text Into Video

Powered by hpcai-tech/Open-Sora-v2 - Create stunning videos from simple text descriptions using CPU-optimized AI

4K Resolution
16s Max Duration
CPU Ready

Create Your Video

Try:

About Open-Sora v2

hpcai-tech/Open-Sora-v2 is an open-source text-to-video generation model optimized for CPU execution. It transforms textual descriptions into video content using efficient diffusion technology, making AI video generation accessible without requiring powerful GPUs.

Fast CPU Generation
High Quality Output
Multiple Styles
Open-Sora v2 CPU Ready
Model hpcai-tech
Hardware CPU Optimized
Frame Rate 24 fps
=== assets/css/styles.css === * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #667eea; --primary-dark: #5a67d8; --secondary: #764ba2; --dark: #1a202c; --gray: #718096; --light-gray: #e2e8f0; --white: #ffffff; --background: #f7fafc; --card-bg: #ffffff; --border: #e2e8f0; --shadow: 0 10px 25px rgba(0, 0, 0, 0.1); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; color: var(--dark); background: var(--background); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ .header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } .header-content { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--dark); } .nav { display: flex; gap: 2rem; } .nav-link { text-decoration: none; color: var(--gray); font-weight: 500; transition: color 0.3s; position: relative; } .nav-link.active, .nav-link:hover { color: var(--primary); } .nav-link.active::after { content: ''; position: absolute; bottom: -1rem; left: 0; right: 0; height: 2px; background: var(--primary); } .built-with { font-size: 0.875rem; color: var(--gray); } .built-with a { color: var(--primary); text-decoration: none; font-weight: 500; } .built-with a:hover { text-decoration: underline; } /* Hero Section */ .hero { padding: 4rem 0; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); text-align: center; } .hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .stats { display: flex; justify-content: center; gap: 4rem; margin-top: 2rem; } .stat { text-align: center; } .stat-value { display: block; font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; } .stat-label { font-size: 0.875rem; opacity: 0.8; } /* Generate Section */ .generate-section { padding: 4rem 0; } .generate-card { background: var(--card-bg); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; } .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--dark); } .generate-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-weight: 600; color: var(--dark); } .form-group textarea, .form-group select { padding: 0.75rem; border: 2px solid var(--border); border-radius: 8px; font-size: 1rem; transition: border-color 0.3s; font-family: inherit; } .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); } .form-group textarea { resize: vertical; min-height: 100px; } .prompt-suggestions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .suggestion-label { font-size: 0.875rem; color: var(--gray); } .suggestion-btn { padding: 0.25rem 0.75rem; background: var(--light-gray); border: none; border-radius: 20px; font-size: 0.875rem; cursor: pointer; transition: all 0.3s; } .suggestion-btn:hover { background: var(--primary); color: var(--white); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .generate-btn { padding: 1rem 2rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); border: none; border-radius: 8px; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .generate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); } .generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-loader { display: inline-flex; align-items: center; gap: 0.5rem; } .btn-loader::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--white); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Result Section */ .result-section { margin-top: 2rem; } .result-card { background: var(--card-bg); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); } .result-card h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--dark); } .video-container { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--dark); border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; } .video-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); } .play-button { position: absolute; z-index: 10; opacity: 0.9; transition: opacity 0.3s, transform 0.3s; } .play-button:hover { opacity: 1; transform: scale(1.1); } .video-info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .video-prompt { color: var(--gray); font-style: italic; flex: 1; } .video-actions { display: flex; gap: 0.5rem; } .action-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--white); border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.3s; font-weight: 500; } .action-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } /* Gallery Section */ .gallery-section { padding: 4rem 0; background: var(--white); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .gallery-item { position: relative; border-radius: 12px; overflow: hidden; background: var(--dark); aspect-ratio: 16/9; cursor: pointer; transition: transform 0.3s; } .gallery-item:hover { transform: scale(1.02); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-item-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--white); opacity: 0; transition: opacity 0.3s; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } /* About Section */ .about-section { padding: 4rem 0; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-text p { font-size: 1.125rem; color: var(--gray); margin-bottom: 2rem; line-height: 1.8; } .features { display: flex; flex-direction: column; gap: 1rem; } .feature { display: flex; align-items: center; gap: 1rem; font-weight: 500; } .feature svg { color: var(--primary); } .model-card { background: var(--card-bg); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); } .model-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .model-name { font-size: 1.25rem; font-weight: 700; color: var(--dark); } .model-status { padding: 0.25rem 0.75rem; background: #10b981; color: var(--white); border-radius: 20px; font-size: 0.875rem; font-weight: 500; } .model-stats { display: flex; flex-direction: column; gap: 1rem; } .model-stat { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); } .model-stat:last-child { border-bottom: none; } .model-stat .label { color: var(--gray); } .model-stat .value { font-weight: 600; color: var(--dark); } /* Footer */ .footer { background: var(--dark); color: var(--white); padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h4 { margin-bottom: 1rem; color: var(--white); } .footer-section p { color: var(--gray); font-size: 0.875rem; } .footer-link { display: block; color: var(--gray); text-decoration: none; margin-bottom: 0.5rem; transition: color 0.3s; } .footer-link:hover { color: var(--primary); } .footer-bottom { padding-top: 2rem; border-top: 1px solid #374151; text-align: center; color: var(--gray); font-size: 0.875rem; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .stats { gap: 2rem; } .nav { display: none; } .about-content { grid-template-columns: 1fr; gap: 2rem; } .video-info { flex-direction: column; align-items: flex-start; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { padding: 0 15px; } .generate-card, .result-card { padding: 1.5rem; } .hero { padding: 2rem 0; } .gallery-grid { grid-template-columns: 1fr; } }