fspecii
267 lines
7.4 KiB
HTML
267 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ACE-Step UI - Local AI Music Generator</title>
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<meta name="title" content="ACE-Step UI - Local AI Music Generator" />
|
|
<meta name="description" content="Create AI music locally with ACE-Step UI. Free and open source music generation powered by ACE-Step 1.5." />
|
|
<meta name="keywords" content="AI music generator, ACE-Step, local AI, music generation, text to music, AI song generator" />
|
|
<meta name="robots" content="index, follow" />
|
|
<meta name="author" content="ACE-Step UI" />
|
|
|
|
<!-- Additional SEO -->
|
|
<meta name="theme-color" content="#ec4899" />
|
|
<meta name="application-name" content="ACE-Step UI" />
|
|
<meta name="apple-mobile-web-app-title" content="ACE-Step UI" />
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
suno: {
|
|
DEFAULT: '#09090b',
|
|
sidebar: '#000000',
|
|
panel: '#121214',
|
|
card: '#18181b',
|
|
hover: '#27272a',
|
|
border: '#27272a',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
'gradient-x': 'gradient-x 15s ease infinite',
|
|
},
|
|
keyframes: {
|
|
'gradient-x': {
|
|
'0%, 100%': {
|
|
'background-size': '200% 200%',
|
|
'background-position': 'left center'
|
|
},
|
|
'50%': {
|
|
'background-size': '200% 200%',
|
|
'background-position': 'right center'
|
|
},
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--breakpoint-mobile: 768px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d4d4d8;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a1a1aa;
|
|
}
|
|
|
|
/* Dark mode scrollbar */
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #3f3f46;
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: #52525b;
|
|
}
|
|
|
|
/* Hide scrollbar utility */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(to right, #f472b6, #a78bfa, #60a5fa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
@keyframes music-bars {
|
|
0% { height: 20%; opacity: 0.5; }
|
|
50% { height: 100%; opacity: 1; }
|
|
100% { height: 20%; opacity: 0.5; }
|
|
}
|
|
|
|
.music-bar-anim {
|
|
animation: music-bars 1s ease-in-out infinite;
|
|
}
|
|
|
|
.mobile-only {
|
|
display: none;
|
|
}
|
|
.desktop-only {
|
|
display: block;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.mobile-only {
|
|
display: block;
|
|
}
|
|
.desktop-only {
|
|
display: none;
|
|
}
|
|
.mobile-only-flex {
|
|
display: flex;
|
|
}
|
|
.mobile-only-inline {
|
|
display: inline;
|
|
}
|
|
.mobile-only-inline-flex {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
@keyframes slide-out-left {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-100%); }
|
|
}
|
|
@keyframes slide-in-right {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
@keyframes slide-out-right {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
.drawer-slide-in-left {
|
|
animation: slide-in-left 0.3s ease-out forwards;
|
|
}
|
|
.drawer-slide-out-left {
|
|
animation: slide-out-left 0.3s ease-in forwards;
|
|
}
|
|
.drawer-slide-in-right {
|
|
animation: slide-in-right 0.3s ease-out forwards;
|
|
}
|
|
.drawer-slide-out-right {
|
|
animation: slide-out-right 0.3s ease-in forwards;
|
|
}
|
|
.drawer-backdrop-in {
|
|
animation: fade-in 0.3s ease-out forwards;
|
|
}
|
|
.drawer-backdrop-out {
|
|
animation: fade-out 0.3s ease-in forwards;
|
|
}
|
|
|
|
.backdrop-blur-mobile {
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
.backdrop-blur-mobile-lg {
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.safe-area-inset-top {
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
}
|
|
.safe-area-inset-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
.safe-area-inset-left {
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
}
|
|
.safe-area-inset-right {
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
.safe-area-inset-x {
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
.safe-area-inset-y {
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
.safe-area-inset-all {
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
|
|
.touch-none {
|
|
-webkit-tap-highlight-color: transparent;
|
|
touch-action: none;
|
|
}
|
|
.touch-pan-x {
|
|
touch-action: pan-x;
|
|
}
|
|
.touch-pan-y {
|
|
touch-action: pan-y;
|
|
}
|
|
.touch-manipulation {
|
|
touch-action: manipulation;
|
|
}
|
|
.tap-highlight-none {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.scroll-touch {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.overscroll-none {
|
|
overscroll-behavior: none;
|
|
}
|
|
.overscroll-contain {
|
|
overscroll-behavior: contain;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react-dom/": "https://esm.sh/react-dom@^19.2.4/",
|
|
"lucide-react": "https://esm.sh/lucide-react@^0.563.0",
|
|
"@google/genai": "https://esm.sh/@google/genai@^1.38.0",
|
|
"react/": "https://esm.sh/react@^19.2.4/",
|
|
"react": "https://esm.sh/react@^19.2.4"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body class="bg-suno text-zinc-900 dark:text-white overflow-hidden transition-colors duration-300">
|
|
<div id="root"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html>
|