Initial commit: ACE-Step UI - Open source music generation interface
This commit is contained in:
fspecii
+266
@@ -0,0 +1,266 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user