Hugging Face's logo

Spaces:
Gtmix
/
quant_Synth
Running

App Files Community
Joe-C-Wales commited on
Commit
f913693
·
verified ·
1 Parent(s): 0540ef6

<!DOCTYPE html>

Browse files

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Stitch - Quantum Audio-Visual Synthesis</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&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;
}
}
.timbre-slider:hover::-webkit-slider-thumb {
background-color: #00FFFF;
}
.timbre-slider:hover::-moz-range-thumb {
background-color: #00FFFF;
}
.fidelity-needle {
transform: rotate(153deg);transform-origin: bottom center;
transition: transform 0.5s ease-in-out;
}
</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>
<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 grid grid-cols-1 xl:grid-cols-4 gap-6 overflow-hidden">
<div class="flex flex-col gap-6 overflow-y-auto pr-2">
<div class="bg-gray-800 p-4 rounded-[10px] flex flex-col" style="width: 400px; height: 350px;">
<button class="bg-blue-600/30 text-blue-300 py-2 rounded-t-[10px] -m-4 mb-4 font-semibold">Train Voice Agent</button>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1" for="timbre-slider">Timbre</label>
<input class="w-[200px] h-[20px] bg-gray-700 rounded-lg appearance-none cursor-pointer timbre-slider accent-cyan-500" id="timbre-slider" max="1" min="0" step="0.01" type="range" value="0.5"/>
</div>
<div class="flex items-center space-x-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1" for="pitch-range">Pitch Range</label>
<select class="w-[100px] bg-gray-700 border-gray-600 text-blue-400 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
<option>100 Hz</option>
<option>200 Hz</option>
<option>300 Hz</option>
<option>400 Hz</option>
<option>500 Hz</option>
<option>600 Hz</option>
<option>700 Hz</option>
<option>800 Hz</option>
<option>900 Hz</option>
<option selected="">1000 Hz</option>
</select>
</div>
<button class="w-[100px] h-[40px] bg-blue-600 text-white font-bold rounded-md animate-pulse">Train Voice</button>
</div>
</div>
</div>
<div class="bg-gray-800 p-4 rounded-[10px] flex flex-col" style="width: 400px; height: 350px;">
<h3 class="text-text-dark text-md font-bold mb-3 text-center">Real-Time Feedback</h3>
<div class="flex flex-col items-center flex-1">
<canvas class="bg-black rounded-md w-[300px] h-[150px]">
</canvas>
<div class="flex w-full items-center justify-around mt-4">
<div class="relative w-[100px] h-[100px]">
<svg class="w-full h-full" viewBox="0 0 100 100">
<defs>
<linearGradient id="gaugeGradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#FF0000"></stop>
<stop offset="50%" stop-color="#FFFF00"></stop>
<stop offset="100%" stop-color="#00FF00"></stop>
</linearGradient>
</defs>
<path class="stroke-current text-gray-700" d="M 20 80 A 40 40 0 0 1 80 80" fill="none" stroke-width="8"></path>
<path d="M 20 80 A 40 40 0 0 1 80 80" fill="none" stroke="url(#gaugeGradient)" stroke-linecap="round" stroke-width="8" style="stroke-dasharray: 125.66; stroke-dashoffset: 25.13;"></path>
</svg>
<div class="absolute inset-0 flex items-end justify-center">
<div class="w-1 h-12 bg-green-500 rounded-t-full fidelity-needle"></div>
</div>
<div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-white">0.85</div>
</div>
<div>
<div class="w-[200px] bg-gray-700 rounded-full h-[20px]">
<div class="bg-blue-600 h-[20px] rounded-full" style="width: 75%"></div>
</div>
<p class="text-center text-sm mt-1">Training Progress (1024 shots)</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 p-4 rounded-[10px] flex flex-col" style="width: 400px; height: 350px;">
<h3 class="text-text-dark text-md font-bold mb-3 text-center">Ghost Tunnel Connector</h3>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center cursor-pointer">
<div class="relative">
<input class="sr-only" type="checkbox"/>
<div class="block bg-gray-600 w-[60px] h-[30px] rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform"></div>
</div>
<div class="ml-3 text-white font-medium">Connect</div>
</label>
<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #10B981;
}
input:checked ~ .block {
background-color: #10B981;
}
</style>
</div>
<div class="space-y-4">
<input class="w-[150px] h-[30px] bg-gray-700 border border-blue-500 text-white rounded-md px-3 text-sm placeholder-gray-400" placeholder="Task..." type="text"/>
<div class="h-[150px] w-full bg-black rounded-md p-2 overflow-y-auto">
<p class="text-green-400 text-xs font-mono">> WS latency: 48ms</p>
<p class="text-green-400 text-xs font-mono">> connection_status: 'success'</p>
<p class="text-green-400 text-xs font-mono animate-pulse">> waiting for task...</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-6 overflow-y-auto pr-2">
<div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10 h-full flex flex-col">
<div class="flex items-center justify-between mb-4">
<h3 class="text-text-dark text-lg font-bold">Music Composer</h3>
<div class="flex items-center gap-2">
<span class="text-sm text-accent">Entangle |Φ+⟩</span>
<div class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox" value=""/>
<div class="w-11 h-6 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent"></div>
</div>
</div>
</div>
<div class="flex-1 relative bg-black/30 rounded-lg p-4">
<img alt="Waveform background" class="absolute inset-0 w-full h-full object-cover opacity-30" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDx9gJwoDsSvCk-jk9eWWx_MgpVvlWULVhP7R_W-TRYxMM6Di1ZJp-ezh8H2vxSl3i5xRH6LEPt2jhY3wYw_WcigU6GxctinAuvl458QM2oQRuEKmrfB-LI_HquH5Sn5qvqJGtC46lCoG7-NH3Y-JHoBrjh_d_k4z5Z-Shyqv8POXBZFbbu2D2Hl2PxNnf9zskK7zVRKhfqEB1DK-dWvjc4EXuPrH6-Kz0n1TjIYffcr10WRFtigiSqlyxhkK62v11DeLPt8IHApkPs"/>
<div class="relative w-full h-full">
<div class="absolute w-4 h-4 bg-primary rounded-full cursor-grab shadow-glow-primary" style="left: 20%; top: 40%;"><div class="absolute -top-6 text-xs text-primary">440Hz A4</div></div>
<div class="absolute w-4 h-4 bg-primary rounded-full cursor-grab shadow-glow-primary" style="left: 50%; top: 60%;"><div class="absolute -top-6 text-xs text-primary">523Hz C5</div></div>
<div class="absolute w-4 h-4 bg-primary rounded-full cursor-grab shadow-glow-primary" style="left: 80%; top: 30%;"><div class="absolute -top-6 text-xs text-primary">698Hz F5</div></div>
</div>
<div class="absolute bottom-4 left-4 right-4 space-y-2">
<

Files changed (1) hide show
  1. about.html +148 -0
about.html ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html class="dark" lang="en">
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>About - Stitch</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: "class",
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ "primary": "#00FFFF",
17
+ "background-dark": "#000000",
18
+ "surface-dark": "#1A1A2E",
19
+ "accent": "#FF00FF",
20
+ "text-light": "#E0E0E0",
21
+ "text-dark": "#FFFFFF"
22
+ },
23
+ fontFamily: {
24
+ "display": ["Space Grotesk", "sans-serif"]
25
+ },
26
+ borderRadius: {
27
+ "DEFAULT": "0.75rem",
28
+ "lg": "1rem",
29
+ "xl": "1.5rem",
30
+ "full": "9999px"
31
+ },
32
+ boxShadow: {
33
+ 'glow-primary': '0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF',
34
+ 'glow-accent': '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF',
35
+ }
36
+ },
37
+ },
38
+ }
39
+ </script>
40
+ <style>
41
+ .material-symbols-outlined {
42
+ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24
43
+ }
44
+ .animate-flicker {
45
+ animation: flicker 2s infinite alternate;
46
+ }
47
+ @keyframes flicker {
48
+ 0%, 18%, 22%, 25%, 53%, 57%, 100% {
49
+ text-shadow:
50
+ 0 0 4px #00FFFF,
51
+ 0 0 11px #00FFFF,
52
+ 0 0 19px #00FFFF,
53
+ 0 0 40px #00FFFF,
54
+ 0 0 80px #00FFFF;
55
+ }
56
+ 20%, 24%, 55% {
57
+ text-shadow: none;
58
+ }
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gradient-to-br from-gray-900 to-black font-display text-text-light">
63
+ <div class="flex h-screen w-full">
64
+ <main class="flex-1 flex flex-col overflow-hidden p-6 gap-6">
65
+ <header class="flex items-center justify-between">
66
+ <div class="flex items-center gap-3">
67
+ <div class="size-10 bg-primary/10 rounded-lg flex items-center justify-center shadow-glow-primary">
68
+ <span class="material-symbols-outlined text-primary text-2xl">bubble_chart</span>
69
+ </div>
70
+ <h1 class="text-text-dark text-2xl font-bold">Stitch</h1>
71
+ </div>
72
+ <nav class="flex gap-6">
73
+ <a class="text-text-light hover:text-primary transition-colors" href="index.html">Dashboard</a>
74
+ <a class="text-text-light hover:text-primary transition-colors" href="composer.html">Composer</a>
75
+ <a class="text-text-light hover:text-primary transition-colors" href="visualizer.html">Visualizer</a>
76
+ <a class="text-text-light hover:text-primary transition-colors" href="profile.html">Profile</a>
77
+ <a class="text-primary font-medium" href="about.html">About</a>
78
+ </nav>
79
+ <div class="flex items-center gap-4">
80
+ <button class="flex items-center justify-center rounded-lg h-10 w-10 bg-white/5 text-text-light hover:bg-white/10">
81
+ <span class="material-symbols-outlined">settings</span>
82
+ </button>
83
+ <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>
84
+ </div>
85
+ </header>
86
+ <div class="flex-1 overflow-y-auto pr-2">
87
+ <div class="max-w-4xl mx-auto">
88
+ <h2 class="text-3xl font-bold text-text-dark mb-8 text-center">About Stitch</h2>
89
+ <div class="bg-surface-dark/50 backdrop-blur-md p-8 rounded-xl border border-white/10 mb-8">
90
+ <h3 class="text-2xl font-bold text-text-dark mb-4">Quantum Audio-Visual Synthesis</h3>
91
+ <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>
92
+ <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>
93
+ </div>
94
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
95
+ <div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10">
96
+ <h3 class="text-xl font-bold text-text-dark mb-3">Core Technologies</h3>
97
+ <ul class="space-y-2">
98
+ <li class="flex items-start">
99
+ <span class="material-symbols-outlined text-primary mr-2">check_circle</span>
100
+ <span>Amazon Braket for quantum computation</span>
101
+ </li>
102
+ <li class="flex items-start">
103
+ <span class="material-symbols-outlined text-primary mr-2">check_circle</span>
104
+ <span>Lindblad Master Equation solvers</span>
105
+ </li>
106
+ <li class="flex items-start">
107
+ <span class="material-symbols-outlined text-primary mr-2">check_circle</span>
108
+ <span>QuantumToolbox.jl for simulation</span>
109
+ </li>
110
+ <li class="flex items-start">
111
+ <span class="material-symbols-outlined text-primary mr-2">check_circle</span>
112
+ <span>Real-time MIDI processing</span>
113
+ </li>
114
+ </ul>
115
+ </div>
116
+ <div class="bg-surface-dark/50 backdrop-blur-md p-6 rounded-xl border border-white/10">
117
+ <h3 class="text-xl font-bold text-text-dark mb-3">Key Features</h3>
118
+ <ul class="space-y-2">
119
+ <li class="flex items-start">
120
+ <span class="material-symbols-outlined text-primary mr-2">music_note</span>
121
+ <span>Quantum music composition</span>
122
+ </li>
123
+ <li class="flex items-start">
124
+ <span class="material-symbols-outlined text-primary mr-2">auto_graph</span>
125
+ <span>3D quantum state visualization</span>
126
+ </li>
127
+ <li class="flex items-start">
128
+ <span class="material-symbols-outlined text-primary mr-2">psychology</span>
129
+ <span>AI-powered voice synthesis</span>
130
+ </li>
131
+ <li class="flex items-start">
132
+ <span class="material-symbols-outlined text-primary mr-2">bolt</span>
133
+ <span>Real-time quantum feedback</span>
134
+ </li>
135
+ </ul>
136
+ </div>
137
+ </div>
138
+ <div class="bg-surface-dark/50 backdrop-blur-md p-8 rounded-xl border border-white/10">
139
+ <h3 class="text-2xl font-bold text-text-dark mb-4">Our Mission</h3>
140
+ <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>
141
+ <p>Through intuitive interfaces and powerful backend systems, we make quantum-enhanced audio-visual synthesis accessible to everyone from hobbyists to professional composers.</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </main>
146
+ </div>
147
+ </body>
148
+ </html>