Hugging Face's logo

Spaces:
Gtmix
/
quant_Synth
Running

App Files Community
quant_Synth
File size: 7,563 Bytes
f913693
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
971d57f
 
 
 
954fb1d
 
971d57f
f913693
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>About - Stitch</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#00FFFF",
                        "background-dark": "#000000",
                        "surface-dark": "#1A1A2E",
                        "accent": "#FF00FF",
                        "text-light": "#E0E0E0",
                        "text-dark": "#FFFFFF"
                    },
                    fontFamily: {
                        "display": ["Space Grotesk", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.75rem",
                        "lg": "1rem",
                        "xl": "1.5rem",
                        "full": "9999px"
                    },
                    boxShadow: {
                        'glow-primary': '0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF',
                        'glow-accent': '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF',
                    }
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24
        }
        .animate-flicker {
            animation: flicker 2s infinite alternate;
        }
        @keyframes flicker {
            0%, 18%, 22%, 25%, 53%, 57%, 100% {
                text-shadow:
                0 0 4px #00FFFF,
                0 0 11px #00FFFF,
                0 0 19px #00FFFF,
                0 0 40px #00FFFF,
                0 0 80px #00FFFF;
            }
            20%, 24%, 55% {
                text-shadow: none;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-black font-display text-text-light">
<div class="flex h-screen w-full">
<main class="flex-1 flex flex-col overflow-hidden p-6 gap-6">
<header class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="size-10 bg-primary/10 rounded-lg flex items-center justify-center shadow-glow-primary">
<span class="material-symbols-outlined text-primary text-2xl">bubble_chart</span>
</div>
<h1 class="text-text-dark text-2xl font-bold">Stitch</h1>
</div>
<nav class="flex gap-6">
<a class="text-text-light hover:text-primary transition-colors" href="index.html">Home</a>
<a class="text-text-light hover:text-primary transition-colors" href="synthesizer.html">Synthesizer</a>
<a class="text-text-light hover:text-primary transition-colors" href="quantum.html">Quantum</a>
<a class="text-text-light hover:text-primary transition-colors" href="visualization.html">Visualization</a>
<a class="text-text-light hover:text-primary transition-colors" href="api.html">API</a>
<a class="text-text-light hover:text-primary transition-colors" href="agent.html">Agent</a>
<a class="text-text-light hover:text-primary transition-colors" href="community.html">Community</a>
<a class="text-primary font-medium" href="about.html">About</a>
</nav>
<div class="flex items-center gap-4">
<button class="flex items-center justify-center rounded-lg h-10 w-10 bg-white/5 text-text-light hover:bg-white/10">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary" data-alt="User avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA2mbAar7pUrV5jZFgpjBtdtDsGy7j8Lc_H9hav9BtxU399HRUVRYEBF5wsFR5NvYwTrAu_6dFI5YfPYHd9QSf1-gulLHEDRSyaTa5Hkx28GJIouw37QLcTT1_8pHwcRzNZFKPrNh14nl6V1B38ZvG8W9e68fHzEcrJrukyiavHEl1ccZZGVQkfaEka1PMQLsRlIsAB6dJZ6Gk6w6fKpAZiFnoB2Inru9FCWep4IBwtops3MTzUooCLrMa27XW3qNrqtqvsuhb3ProA");'></div>
</div>
</header>
<div class="flex-1 overflow-y-auto pr-2">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-text-dark mb-8 text-center">About Stitch</h2>
<div class="bg-surface-dark/50 backdrop-blur-md p-8 rounded-xl border border-white/10 mb-8">
<h3 class="text-2xl font-bold text-text-dark mb-4">Quantum Audio-Visual Synthesis</h3>
<p class="mb-4">Stitch represents the cutting edge of quantum computing applications in creative industries. Our platform harnesses the power of NISQ (Noisy Intermediate-Scale Quantum) devices to generate unique audio-visual experiences that were previously impossible with classical computing alone.</p>
<p class="mb-4">By leveraging quantum superposition and entanglement, we create rich, complex musical compositions and visualizations that evolve in real-time. Each synthesis is a unique exploration of the quantum state space, producing outputs with unparalleled depth and complexity.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10">
<h3 class="text-xl font-bold text-text-dark mb-3">Core Technologies</h3>
<ul class="space-y-2">
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">check_circle</span>
<span>Amazon Braket for quantum computation</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">check_circle</span>
<span>Lindblad Master Equation solvers</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">check_circle</span>
<span>QuantumToolbox.jl for simulation</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">check_circle</span>
<span>Real-time MIDI processing</span>
</li>
</ul>
</div>
<div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10">
<h3 class="text-xl font-bold text-text-dark mb-3">Key Features</h3>
<ul class="space-y-2">
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">music_note</span>
<span>Quantum music composition</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">auto_graph</span>
<span>3D quantum state visualization</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">psychology</span>
<span>AI-powered voice synthesis</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-primary mr-2">bolt</span>
<span>Real-time quantum feedback</span>
</li>
</ul>
</div>
</div>
<div class="bg-surface-dark/50 backdrop-blur-md p-8 rounded-xl border border-white/10">
<h3 class="text-2xl font-bold text-text-dark mb-4">Our Mission</h3>
<p class="mb-4">We aim to democratize access to quantum computing for creative professionals. Our mission is to bridge the gap between quantum physics and artistic expression, enabling musicians, artists, and researchers to explore new frontiers of creativity powered by quantum mechanics.</p>
<p>Through intuitive interfaces and powerful backend systems, we make quantum-enhanced audio-visual synthesis accessible to everyone from hobbyists to professional composers.</p>
</div>
</div>
</div>
</main>
</div>
</body>
</html>