Hugging Face's logo

Spaces:
Gtmix
/
quant_Synth
Running

App Files Community
Joe-C-Wales commited on
Commit
aff32dd
·
verified ·
1 Parent(s): 42f8e13

Modern next.js front with tie ins for Gat RaG/Vector reads. if this is past your comfort level please say so

Browse files
Files changed (4) hide show
  1. README.md +9 -5
  2. index.html +122 -19
  3. quantum.html +150 -0
  4. synthesizer.html +147 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: green
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,122 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum Music Synthesizer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .quantum-bg {
14
+ background: linear-gradient(135deg, #6e45e2, #88d3ce);
15
+ background-size: 400% 400%;
16
+ animation: gradient 15s ease infinite;
17
+ }
18
+ @keyframes gradient {
19
+ 0% { background-position: 0% 50%; }
20
+ 50% { background-position: 100% 50%; }
21
+ 100% { background-position: 0% 50%; }
22
+ }
23
+ .pulse {
24
+ animation: pulse 2s infinite;
25
+ }
26
+ @keyframes pulse {
27
+ 0% { transform: scale(1); }
28
+ 50% { transform: scale(1.05); }
29
+ 100% { transform: scale(1); }
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-900 text-white min-h-screen">
34
+ <div class="quantum-bg min-h-screen">
35
+ <!-- Header -->
36
+ <header class="container mx-auto py-6 px-4">
37
+ <div class="flex justify-between items-center">
38
+ <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
39
+ <nav>
40
+ <ul class="flex space-x-6">
41
+ <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
42
+ <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
43
+ <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
44
+ </ul>
45
+ </nav>
46
+ </div>
47
+ </header>
48
+
49
+ <!-- Hero Section -->
50
+ <section class="container mx-auto py-16 px-4 text-center">
51
+ <h2 class="text-5xl font-bold mb-6">Create Music with Quantum Computing</h2>
52
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Harness the power of quantum entanglement to generate unique musical compositions</p>
53
+ <div class="pulse inline-block">
54
+ <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
55
+ Start Synthesizing
56
+ </button>
57
+ </div>
58
+ </section>
59
+
60
+ <!-- Features Section -->
61
+ <section class="container mx-auto py-16 px-4">
62
+ <h3 class="text-3xl font-bold text-center mb-12">How It Works</h3>
63
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
64
+ <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
65
+ <i data-feather="cpu" class="w-12 h-12 mb-4 text-purple-400"></i>
66
+ <h4 class="text-xl font-bold mb-2">Quantum Circuits</h4>
67
+ <p>Create complex musical patterns using quantum superposition and entanglement</p>
68
+ </div>
69
+ <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
70
+ <i data-feather="music" class="w-12 h-12 mb-4 text-purple-400"></i>
71
+ <h4 class="text-xl font-bold mb-2">Sonic Sequences</h4>
72
+ <p>Transform quantum measurements into rich, harmonic musical sequences</p>
73
+ </div>
74
+ <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
75
+ <i data-feather="zap" class="w-12 h-12 mb-4 text-purple-400"></i>
76
+ <h4 class="text-xl font-bold mb-2">Real-time Synthesis</h4>
77
+ <p>Generate and modify compositions in real-time with our quantum engine</p>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Stats Section -->
83
+ <section class="container mx-auto py-16 px-4">
84
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
85
+ <div>
86
+ <div class="text-4xl font-bold text-purple-400">99.5%</div>
87
+ <div>Fidelity Score</div>
88
+ </div>
89
+ <div>
90
+ <div class="text-4xl font-bold text-purple-400">1024</div>
91
+ <div>Quantum Shots</div>
92
+ </div>
93
+ <div>
94
+ <div class="text-4xl font-bold text-purple-400">5</div>
95
+ <div>Note Motifs</div>
96
+ </div>
97
+ <div>
98
+ <div class="text-4xl font-bold text-purple-400">∞</div>
99
+ <div>Possibilities</div>
100
+ </div>
101
+ </div>
102
+ </section>
103
+
104
+ <!-- Footer -->
105
+ <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
106
+ <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
107
+ </footer>
108
+ </div>
109
+
110
+ <script>
111
+ feather.replace();
112
+ anime({
113
+ targets: '.pulse',
114
+ scale: 1.05,
115
+ duration: 1000,
116
+ loop: true,
117
+ direction: 'alternate',
118
+ easing: 'easeInOutSine'
119
+ });
120
+ </script>
121
+ </body>
122
+ </html>
quantum.html ADDED
@@ -0,0 +1,150 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum Operations - Quantum Music</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .quantum-bg {
14
+ background: linear-gradient(135deg, #6e45e2, #88d3ce);
15
+ background-size: 400% 400%;
16
+ animation: gradient 15s ease infinite;
17
+ }
18
+ @keyframes gradient {
19
+ 0% { background-position: 0% 50%; }
20
+ 50% { background-position: 100% 50%; }
21
+ 100% { background-position: 0% 50%; }
22
+ }
23
+ .circuit-board {
24
+ background: #1a202c;
25
+ border-radius: 8px;
26
+ padding: 20px;
27
+ min-height: 300px;
28
+ position: relative;
29
+ overflow: hidden;
30
+ }
31
+ .circuit-line {
32
+ position: absolute;
33
+ height: 2px;
34
+ background: #8b5cf6;
35
+ transform-origin: left;
36
+ }
37
+ .quantum-gate {
38
+ position: absolute;
39
+ width: 50px;
40
+ height: 50px;
41
+ background: #8b5cf6;
42
+ border-radius: 50%;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ font-weight: bold;
47
+ color: white;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-900 text-white min-h-screen">
52
+ <div class="quantum-bg min-h-screen">
53
+ <!-- Header -->
54
+ <header class="container mx-auto py-6 px-4">
55
+ <div class="flex justify-between items-center">
56
+ <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
57
+ <nav>
58
+ <ul class="flex space-x-6">
59
+ <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
60
+ <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
61
+ <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
62
+ </ul>
63
+ </nav>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Quantum Operations Section -->
68
+ <section class="container mx-auto py-16 px-4">
69
+ <h2 class="text-4xl font-bold text-center mb-12">Quantum Operations</h2>
70
+
71
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
72
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8">
73
+ <h3 class="text-2xl font-bold mb-4">Quantum Circuit</h3>
74
+ <div class="circuit-board">
75
+ <!-- Circuit visualization will be animated here -->
76
+ <div class="circuit-line" style="top: 50px; left: 50px; width: 200px;"></div>
77
+ <div class="circuit-line" style="top: 100px; left: 50px; width: 200px;"></div>
78
+ <div class="circuit-line" style="top: 150px; left: 50px; width: 200px;"></div>
79
+
80
+ <div class="quantum-gate" style="top: 35px; left: 100px;">H</div>
81
+ <div class="quantum-gate" style="top: 85px; left: 150px;">X</div>
82
+ <div class="quantum-gate" style="top: 135px; left: 200px;">Z</div>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="space-y-8">
87
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6">
88
+ <h3 class="text-xl font-bold mb-2">Superposition</h3>
89
+ <p>Quantum bits exist in multiple states simultaneously, creating rich harmonic possibilities.</p>
90
+ </div>
91
+
92
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6">
93
+ <h3 class="text-xl font-bold mb-2">Entanglement</h3>
94
+ <p>Correlated quantum states produce complex musical relationships and patterns.</p>
95
+ </div>
96
+
97
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6">
98
+ <h3 class="text-xl font-bold mb-2">Measurement</h3>
99
+ <p>Collapsing quantum states into musical notes through probabilistic outcomes.</p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="max-w-4xl mx-auto mt-16 bg-gray-800 bg-opacity-50 rounded-xl p-8">
105
+ <h3 class="text-2xl font-bold mb-4">Quantum Parameters</h3>
106
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
107
+ <div class="text-center">
108
+ <div class="text-4xl font-bold text-purple-400 mb-2">99.5%</div>
109
+ <div>Adiabatic Success</div>
110
+ </div>
111
+ <div class="text-center">
112
+ <div class="text-4xl font-bold text-purple-400 mb-2">Φ+</div>
113
+ <div>Bell State</div>
114
+ </div>
115
+ <div class="text-center">
116
+ <div class="text-4xl font-bold text-purple-400 mb-2">GHZ</div>
117
+ <div>4-Qubit Entanglement</div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Footer -->
124
+ <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
125
+ <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
126
+ </footer>
127
+ </div>
128
+
129
+ <script>
130
+ feather.replace();
131
+ // Animate circuit lines
132
+ anime({
133
+ targets: '.circuit-line',
134
+ width: [0, 200],
135
+ delay: anime.stagger(200),
136
+ duration: 1000,
137
+ easing: 'easeInOutQuad'
138
+ });
139
+
140
+ // Animate quantum gates
141
+ anime({
142
+ targets: '.quantum-gate',
143
+ scale: [0, 1],
144
+ delay: anime.stagger(300, {start: 500}),
145
+ duration: 800,
146
+ elasticity: 600
147
+ });
148
+ </script>
149
+ </body>
150
+ </html>
synthesizer.html ADDED
@@ -0,0 +1,147 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Synthesizer - Quantum Music</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .quantum-bg {
14
+ background: linear-gradient(135deg, #6e45e2, #88d3ce);
15
+ background-size: 400% 400%;
16
+ animation: gradient 15s ease infinite;
17
+ }
18
+ @keyframes gradient {
19
+ 0% { background-position: 0% 50%; }
20
+ 50% { background-position: 100% 50%; }
21
+ 100% { background-position: 0% 50%; }
22
+ }
23
+ .waveform {
24
+ height: 200px;
25
+ background: rgba(0,0,0,0.3);
26
+ border-radius: 8px;
27
+ position: relative;
28
+ overflow: hidden;
29
+ }
30
+ .wave {
31
+ position: absolute;
32
+ bottom: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ background: linear-gradient(transparent 50%, rgba(139, 92, 246, 0.5) 50%);
37
+ background-size: 50px 100px;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-900 text-white min-h-screen">
42
+ <div class="quantum-bg min-h-screen">
43
+ <!-- Header -->
44
+ <header class="container mx-auto py-6 px-4">
45
+ <div class="flex justify-between items-center">
46
+ <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
47
+ <nav>
48
+ <ul class="flex space-x-6">
49
+ <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
50
+ <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
51
+ <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
52
+ </ul>
53
+ </nav>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Synthesizer Section -->
58
+ <section class="container mx-auto py-16 px-4">
59
+ <h2 class="text-4xl font-bold text-center mb-12">Quantum Synthesizer</h2>
60
+
61
+ <div class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-8">
62
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
63
+ <div>
64
+ <h3 class="text-2xl font-bold mb-4">Parameters</h3>
65
+ <div class="space-y-6">
66
+ <div>
67
+ <label class="block mb-2">Mode</label>
68
+ <select class="w-full bg-gray-700 rounded p-2">
69
+ <option>Cinematic</option>
70
+ <option>Ambient</option>
71
+ <option>Electronic</option>
72
+ <option>Classical</option>
73
+ </select>
74
+ </div>
75
+ <div>
76
+ <label class="block mb-2">Complexity Factor</label>
77
+ <input type="range" min="0" max="1" step="0.01" value="0.5" class="w-full">
78
+ <div class="flex justify-between text-sm">
79
+ <span>Simple</span>
80
+ <span>Complex</span>
81
+ </div>
82
+ </div>
83
+ <div>
84
+ <label class="block mb-2">Duration (seconds)</label>
85
+ <input type="range" min="5" max="60" step="5" value="20" class="w-full">
86
+ <div class="flex justify-between text-sm">
87
+ <span>5s</span>
88
+ <span>60s</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full w-full transition duration-300">
93
+ Generate Quantum Sequence
94
+ </button>
95
+ </div>
96
+ <div>
97
+ <h3 class="text-2xl font-bold mb-4">Waveform</h3>
98
+ <div class="waveform">
99
+ <div class="wave"></div>
100
+ </div>
101
+ <div class="mt-4 flex justify-center space-x-4">
102
+ <button class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full">
103
+ <i data-feather="play"></i>
104
+ </button>
105
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-white p-3 rounded-full">
106
+ <i data-feather="pause"></i>
107
+ </button>
108
+ <button class="bg-red-600 hover:bg-red-700 text-white p-3 rounded-full">
109
+ <i data-feather="stop"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="mt-12">
116
+ <h3 class="text-2xl font-bold mb-4">Generated Sequence</h3>
117
+ <div class="bg-gray-900 rounded-lg p-4">
118
+ <div class="flex flex-wrap gap-2">
119
+ <div class="bg-purple-900 px-3 py-1 rounded">440.0 Hz</div>
120
+ <div class="bg-purple-900 px-3 py-1 rounded">523.25 Hz</div>
121
+ <div class="bg-purple-900 px-3 py-1 rounded">659.25 Hz</div>
122
+ <div class="bg-purple-900 px-3 py-1 rounded">440.0 Hz</div>
123
+ <div class="bg-purple-900 px-3 py-1 rounded">523.25 Hz</div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Footer -->
131
+ <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
132
+ <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
133
+ </footer>
134
+ </div>
135
+
136
+ <script>
137
+ feather.replace();
138
+ anime({
139
+ targets: '.wave',
140
+ backgroundPositionX: '50px',
141
+ duration: 1000,
142
+ loop: true,
143
+ easing: 'linear'
144
+ });
145
+ </script>
146
+ </body>
147
+ </html>