Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>API Documentation - Quantum Music Synthesizer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| :root { | |
| --quantum-purple: #6e45e2; | |
| --quantum-teal: #88d3ce; | |
| --quantum-pink: #ff2a6d; | |
| --quantum-blue: #05d9e8; | |
| --quantum-dark: #0c0f1f; | |
| --quantum-darker: #080a1a; | |
| } | |
| .quantum-bg { | |
| background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker)); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%); | |
| z-index: 0; | |
| } | |
| .quantum-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .quantum-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2); | |
| border-color: rgba(110, 69, 226, 0.3); | |
| } | |
| .quantum-header { | |
| background: rgba(12, 15, 31, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .quantum-nav a { | |
| position: relative; | |
| padding: 8px 0; | |
| } | |
| .quantum-nav a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--quantum-blue); | |
| transition: width 0.3s ease; | |
| } | |
| .quantum-nav a:hover::after { | |
| width: 100%; | |
| } | |
| .endpoint-card { | |
| background: rgba(26, 30, 45, 0.7); | |
| border: 1px solid rgba(110, 69, 226, 0.2); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .method-badge { | |
| display: inline-block; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-weight: bold; | |
| font-size: 0.875rem; | |
| } | |
| .get { background: rgba(5, 217, 232, 0.2); color: #05d9e8; } | |
| .post { background: rgba(110, 69, 226, 0.2); color: #6e45e2; } | |
| .put { background: rgba(255, 42, 109, 0.2); color: #ff2a6d; } | |
| .delete { background: rgba(255, 90, 90, 0.2); color: #ff5a5a; } | |
| .param-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 1rem 0; | |
| } | |
| .param-table th { | |
| background: rgba(110, 69, 226, 0.1); | |
| padding: 0.75rem; | |
| text-align: left; | |
| } | |
| .param-table td { | |
| padding: 0.75rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .code-block { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| font-family: monospace; | |
| overflow-x: auto; | |
| margin: 1rem 0; | |
| } | |
| .token { | |
| display: inline-block; | |
| padding: 0.125rem 0.25rem; | |
| border-radius: 4px; | |
| font-size: 0.875rem; | |
| } | |
| .token.required { background: rgba(255, 42, 109, 0.2); color: #ff2a6d; } | |
| .token.optional { background: rgba(5, 217, 232, 0.2); color: #05d9e8; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="quantum-bg min-h-screen"> | |
| <!-- Header --> | |
| <header class="quantum-header container mx-auto py-4 px-4"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1> | |
| <nav class="quantum-nav"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li> | |
| <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li> | |
| <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li> | |
| <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li> | |
| <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li> | |
| <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li> | |
| <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- API Documentation Section --> | |
| <section class="container mx-auto py-16 px-4"> | |
| <h1 class="text-4xl font-bold text-center mb-4">API Documentation</h1> | |
| <p class="text-xl text-center mb-12 text-gray-300">Integrate quantum music generation into your applications</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="quantum-card p-8 mb-12"> | |
| <h2 class="text-2xl font-bold mb-4">Getting Started</h2> | |
| <p class="mb-4">The Quantum Music API allows developers to integrate quantum-generated music into their applications. All endpoints require authentication with an API key.</p> | |
| <div class="bg-gray-800 p-4 rounded-lg mt-6"> | |
| <h3 class="font-bold mb-2">Base URL</h3> | |
| <div class="code-block">https://api.quantummusic.io/v1</div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg mt-6"> | |
| <h3 class="font-bold mb-2">Authentication</h3> | |
| <p class="mb-2">Include your API key in the Authorization header:</p> | |
| <div class="code-block">Authorization: Bearer YOUR_API_KEY</div> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-bold mb-6">Endpoints</h2> | |
| <!-- Generate Music Endpoint --> | |
| <div class="endpoint-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-bold">Generate Music</h3> | |
| <span class="method-badge post">POST</span> | |
| </div> | |
| <div class="code-block mb-4">/music/generate</div> | |
| <p class="mb-4">Generates a new piece of quantum music based on specified parameters.</p> | |
| <h4 class="font-bold mb-2">Parameters</h4> | |
| <table class="param-table mb-4"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Type</th> | |
| <th>Required</th> | |
| <th>Description</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>mode</td> | |
| <td>string</td> | |
| <td><span class="token required">Required</span></td> | |
| <td>Music mode (cinematic, ambient, electronic, classical)</td> | |
| </tr> | |
| <tr> | |
| <td>complexity</td> | |
| <td>number</td> | |
| <td><span class="token required">Required</span></td> | |
| <td>Complexity factor (0.0 - 1.0)</td> | |
| </tr> | |
| <tr> | |
| <td>duration</td> | |
| <td>integer</td> | |
| <td><span class="token required">Required</span></td> | |
| <td>Duration in seconds (5-60)</td> | |
| </tr> | |
| <tr> | |
| <td>harmonic_richness</td> | |
| <td>integer</td> | |
| <td><span class="token optional">Optional</span></td> | |
| <td>Harmonic richness level (0-100, default: 75)</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h4 class="font-bold mb-2">Response</h4> | |
| <div class="code-block"> | |
| {<br> | |
| "id": "qm_abc123xyz",<br> | |
| "status": "processing",<br> | |
| "estimated_completion": "2023-06-15T14:30:00Z"<br> | |
| } | |
| </div> | |
| </div> | |
| <!-- Get Music Status Endpoint --> | |
| <div class="endpoint-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-bold">Get Music Status</h3> | |
| <span class="method-badge get">GET</span> | |
| </div> | |
| <div class="code-block mb-4">/music/status/{id}</div> | |
| <p class="mb-4">Retrieves the status of a music generation request.</p> | |
| <h4 class="font-bold mb-2">Parameters</h4> | |
| <table class="param-table mb-4"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Type</th> | |
| <th>Required</th> | |
| <th>Description</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>id</td> | |
| <td>string</td> | |
| <td><span class="token required">Required</span></td> | |
| <td>Music generation ID</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h4 class="font-bold mb-2">Response</h4> | |
| <div class="code-block"> | |
| {<br> | |
| "id": "qm_abc123xyz",<br> | |
| "status": "completed",<br> | |
| "download_url": "https://api.quantummusic.io/v1/music/download/qm_abc123xyz"<br> | |
| } | |
| </div> | |
| </div> | |
| <!-- Get Quantum Data Endpoint --> | |
| <div class="endpoint-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-bold">Get Quantum Data</h3> | |
| <span class="method-badge get">GET</span> | |
| </div> | |
| <div class="code-block mb-4">/quantum/data/{id}</div> | |
| <p class="mb-4">Retrieves quantum state information for a generated piece.</p> | |
| <h4 class="font-bold mb-2">Parameters</h4> | |
| <table class="param-table mb-4"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Type</th> | |
| <th>Required</th> | |
| <th>Description</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>id</td> | |
| <td>string</td> | |
| <td><span class="token required">Required</span></td> | |
| <td>Music generation ID</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h4 class="font-bold mb-2">Response</h4> | |
| <div class="code-block"> | |
| {<br> | |
| "id": "qm_abc123xyz",<br> | |
| "qubits": 4,<br> | |
| "entanglement": "GHZ",<br> | |
| "measurements": [<br> | |
| {"basis": "X", "result": 0},<br> | |
| {"basis": "Y", "result": 1}<br> | |
| ]<br> | |
| } | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quantum-card p-8"> | |
| <h2 class="text-2xl font-bold mb-4">Rate Limits</h2> | |
| <p>The API has the following rate limits:</p> | |
| <ul class="list-disc pl-6 mt-2 space-y-2"> | |
| <li>Free tier: 10 requests per minute</li> | |
| <li>Pro tier: 100 requests per minute</li> | |
| <li>Enterprise tier: 1000 requests per minute</li> | |
| </ul> | |
| <p class="mt-4">Exceeding these limits will result in a 429 (Too Many Requests) response.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800"> | |
| <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p> | |
| </footer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |