Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DiffRhythm2 - Pinokio Installer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>🎵 DiffRhythm2 Pinokio Installer</h1> | |
| <p class="subtitle">Install and run DiffRhythm2 - Text-to-Music Generation</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a> | |
| </header> | |
| <main> | |
| <div class="card"> | |
| <h2>About DiffRhythm2</h2> | |
| <p>DiffRhythm2 is a state-of-the-art text-to-music generation model that creates musical compositions from text descriptions.</p> | |
| <div class="model-info"> | |
| <h3>Model Information</h3> | |
| <ul> | |
| <li><strong>Model:</strong> ASLP-lab/DiffRhythm2</li> | |
| <li><strong>Type:</strong> Text-to-Music Generation</li> | |
| <li><strong>Framework:</strong> Diffusers</li> | |
| <li><strong>License:</strong> MIT</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Installation</h2> | |
| <div class="installation-controls"> | |
| <button id="installBtn" class="btn btn-primary">Install DiffRhythm2</button> | |
| <button id="downloadScriptBtn" class="btn btn-secondary">Download Pinokio Script</button> | |
| </div> | |
| <div id="progressContainer" class="progress-container hidden"> | |
| <div class="progress-info"> | |
| <span id="progressText">Initializing installation...</span> | |
| <span id="progressPercent">0%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="progressFill" class="progress-fill"></div> | |
| </div> | |
| </div> | |
| <div id="status" class="status-message"></div> | |
| </div> | |
| <div class="card"> | |
| <h2>Text-to-Music Generation</h2> | |
| <div class="generation-controls"> | |
| <textarea id="promptInput" placeholder="Enter your music description (e.g., 'upbeat electronic dance music with synth melodies')" rows="4"></textarea> | |
| <div class="params"> | |
| <label for="duration">Duration (seconds):</label> | |
| <input type="number" id="duration" value="10" min="1" max="30"> | |
| <label for="guidance">Guidance Scale:</label> | |
| <input type="number" id="guidance" value="7.5" min="1" max="20" step="0.1"> | |
| </div> | |
| <button id="generateBtn" class="btn btn-primary" disabled>Generate Music</button> | |
| </div> | |
| <div id="generationResult" class="result-container hidden"> | |
| <h3>Generated Music</h3> | |
| <audio id="audioPlayer" controls class="audio-player"></audio> | |
| <button id="downloadBtn" class="btn btn-secondary">Download Audio</button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Examples</h2> | |
| <div class="examples"> | |
| <div class="example-item"> | |
| <p>"Classical piano piece with emotional melody"</p> | |
| <button class="btn btn-small" onclick="loadExample(this)">Use</button> | |
| </div> | |
| <div class="example-item"> | |
| <p>"Jazz trio with smooth saxophone and walking bass"</p> | |
| <button class="btn btn-small" onclick="loadExample(this)">Use</button> | |
| </div> | |
| <div class="example-item"> | |
| <p>"Epic orchestral music with choir and brass"</p> | |
| <button class="btn btn-small" onclick="loadExample(this)">Use</button> | |
| </div> | |
| <div class="example-item"> | |
| <p>"Chill lo-fi hip hop with rain sounds"</p> | |
| <button class="btn btn-small" onclick="loadExample(this)">Use</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |