Spaces:

Dmtlant
/

VocaloidTTS

Running

App Files Files Community

Dmtlant commited on Jul 8, 2024

Commit

4a341f8

•

1 Parent(s): 7d1863d

Update index.html

Browse files

Files changed (1) hide show

index.html +34 -208

index.html CHANGED Viewed

@@ -3,227 +3,53 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vocaloid с генетическим алгоритмом</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
-        }
-        .container {
-            background-color: white;
-            padding: 2rem;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        button, select {
-            background-color: #4CAF50;
-            border: none;
-            color: white;
-            padding: 15px 32px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            cursor: pointer;
-            border-radius: 5px;
-        }
-        #output {
-            margin-top: 1rem;
-            padding: 1rem;
-            background-color: #f0f0f0;
-            border-radius: 5px;
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Vocaloid с генетическим алгоритмом</h1>
-        <button onclick="startLearning()">Начать обучение</button>
-        <button onclick="stopLearning()">Остановить обучение</button>
-        <select id="voiceSelect"></select>
-        <div id="output"></div>
-    </div>
     <script>
-        const synth = window.speechSynthesis;
-        const outputDiv = document.getElementById('output');
-        const voiceSelect = document.getElementById('voiceSelect');
-        let learningInterval;
-        let ga;
-        // Заполнение списка голосов
-        function populateVoiceList() {
-            const voices = synth.getVoices();
-            voiceSelect.innerHTML = '';
-            voices.forEach((voice, i) => {
-                const option = document.createElement('option');
-                option.textContent = `${voice.name} (${voice.lang})`;
-                option.setAttribute('data-lang', voice.lang);
-                option.setAttribute('data-name', voice.name);
-                voiceSelect.appendChild(option);
-            });
-        }
-        populateVoiceList();
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = populateVoiceList;
-        }
-        // Генетический алгоритм (оставляем без изменений)
-        class GeneticAlgorithm {
-            constructor(populationSize = 50, mutationRate = 0.01) {
-                this.populationSize = populationSize;
-                this.mutationRate = mutationRate;
-                this.population = [];
-                this.generation = 0;
-            }
-            initialize() {
-                for (let i = 0; i < this.populationSize; i++) {
-                    this.population.push(this.createRandomIndividual());
-                }
             }
-            createRandomIndividual() {
-                return {
-                    verse: this.generateRandomSequence(16),
-                    chorus: this.generateRandomSequence(8),
-                    hook: this.generateRandomSequence(4),
-                    fitness: 0
-                };
-            }
-            generateRandomSequence(length) {
-                return Array.from({ length }, () => Math.random() < 0.5 ? 0 : 1);
-            }
-            evolve() {
-                this.evaluateFitness();
-                const newPopulation = [];
-                while (newPopulation.length < this.populationSize) {
-                    const parent1 = this.selectParent();
-                    const parent2 = this.selectParent();
-                    const child = this.crossover(parent1, parent2);
-                    this.mutate(child);
-                    newPopulation.push(child);
-                }
-                this.population = newPopulation;
-                this.generation++;
-            }
-            evaluateFitness() {
-                this.population.forEach(individual => {
-                    individual.fitness = Math.random(); // Заглушка для оценки фитнеса
                 });
-            }
-            selectParent() {
-                const totalFitness = this.population.reduce((sum, individual) => sum + individual.fitness, 0);
-                let randomValue = Math.random() * totalFitness;
-               for (const individual of this.population) {
-                    randomValue -= individual.fitness;
-                    if (randomValue <= 0) {
-                        return individual;
-                    }
-                }
-                return this.population[this.population.length - 1];
-            }
-            crossover(parent1, parent2) {
-                const child = {
-                    verse: [],
-                    chorus: [],
-                    hook: [],
-                    fitness: 0
-                };
-                for (let i = 0; i < parent1.verse.length; i++) {
-                    child.verse.push(Math.random() < 0.5 ? parent1.verse[i] : parent2.verse[i]);
-                }
-                for (let i = 0; i < parent1.chorus.length; i++) {
-                    child.chorus.push(Math.random() < 0.5 ? parent1.chorus[i] : parent2.chorus[i]);
-                }
-                for (let i = 0; i < parent1.hook.length; i++) {
-                    child.hook.push(Math.random() < 0.5 ? parent1.hook[i] : parent2.hook[i]);
-                }
-                return child;
-            }
-            mutate(individual) {
-                const mutateSequence = (sequence) => {
-                    return sequence.map(gene => Math.random() < this.mutationRate ? 1 - gene : gene);
-                };
-                individual.verse = mutateSequence(individual.verse);
-                individual.chorus = mutateSequence(individual.chorus);
-                individual.hook = mutateSequence(individual.hook);
-            }
-            getBestIndividual() {
-                return this.population.reduce((best, current) =>
-                    current.fitness > best.fitness ? current : best
-                );
-            }
-        }
-        }
-        // Функция для начала обучения
-        function startLearning() {
-            if (!ga) {
-                ga = new GeneticAlgorithm();
-                ga.initialize();
-            }
-            learningInterval = setInterval(() => {
-                ga.evolve();
-                const bestIndividual = ga.getBestIndividual();
-                const song = composeSong(bestIndividual);
-                outputDiv.innerHTML = `<p>Поколение: ${ga.generation}</p><pre>${song}</pre>`;
-                speak(song);
-            }, 5000); // Генерировать новую песню каждые 5 секун
-          }
-        // Функция для остановки обучения
-        function stopLearning() {
-            clearInterval(learningInterval);
-        }
-        // Функция для составления песни из последовательностей
-        function composeSong(individual) {
-            const verseToLyrics = seq => seq.map(n => n === 0 ? 'ла' : 'ли').join(' ');
-            const verse = verseToLyrics(individual.verse);
-            const chorus = verseToLyrics(individual.chorus);
-            const hook = verseToLyrics(individual.hook);
-            return `Куплет:\n${verse}\n\nПрипев:\n${chorus}\n\nХук:\n${hook}`;
-        }
-        // Функция для воспроизведения текста
-        function speak(text) {
-            synth.cancel(); // Останавливаем предыдущее воспроизведение
-            const utterance = new SpeechSynthesisUtterance(text);
-            const selectedOption = voiceSelect.selectedOptions[0];
-            const selectedVoice = synth.getVoices().find(voice => voice.name === selectedOption.getAttribute('data-name'));
-            utterance.voice = selectedVoice;
-            utterance.lang = selectedOption.getAttribute('data-lang');
-            utterance.rate = 0.8;
-            synth.speak(utterance);
         }
-        // Инициализация генетического алгоритма
-        ga = new GeneticAlgorithm();
-        ga.initialize();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vocaloid</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
 </head>
 <body>
+    <h1>Vocaloid</h1>
+    <input type="text" id="textInput" placeholder="Enter text to synthesize">
+    <button id="synthesizeBtn">Synthesize</button>
+    <div id="audioContainer"></div>
     <script>
+        const textInput = document.getElementById('textInput');
+        const synthesizeBtn = document.getElementById('synthesizeBtn');
+        const audioContainer = document.getElementById('audioContainer');
+        synthesizeBtn.addEventListener('click', () => {
+            const text = textInput.value;
+            if (text) {
+                synthesizeText(text);
             }
+        });
+        function synthesizeText(text) {
+            const utterance = new SpeechSynthesisUtterance(text);
+            const voices = window.speechSynthesis.getVoices();
+            utterance.voice = voices.find(voice => voice.name === 'Google US English') || voices[0];
+            window.speechSynthesis.speak(utterance);
+            utterance.addEventListener('start', () => {
+                console.log('Speech synthesis started');
+            });
+            utterance.addEventListener('end', () => {
+                console.log('Speech synthesis ended');
+                const audioBlob = new Blob([utterance.audioBuffer], { type: 'audio/wav' });
+                const audioUrl = URL.createObjectURL(audioBlob);
+                const audioPlayer = new Howl({
+                    src: [audioUrl]
                 });
+                audioPlayer.play();
+                const audioElement = document.createElement('audio');
+                audioElement.src = audioUrl;
+                audioElement.controls = true;
+                audioContainer.appendChild(audioElement);
+            });
         }
     </script>
 </body>
 </html>