Spaces:

openfree
/

wzzozs

Running

App Files Files Community

openfree commited on Nov 16, 2024

Commit

827b52d

verified ·

1 Parent(s): f2b8c2a

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +308 -19

index.html CHANGED Viewed

@@ -1,19 +1,308 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>English Practice with TTS</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            min-height: 100vh;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            width: 90%;
+            max-width: 600px;
+        }
+        .title {
+            text-align: center;
+            color: #2c3e50;
+            margin-bottom: 30px;
+        }
+        .input-area {
+            margin-bottom: 20px;
+        }
+        textarea {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            height: 100px;
+            resize: none;
+            font-size: 16px;
+            transition: border-color 0.3s ease;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: #3498db;
+        }
+        .btn {
+            background: #3498db;
+            color: white;
+            border: none;
+            padding: 12px 25px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background 0.3s ease;
+            width: 100%;
+            margin-bottom: 15px;
+        }
+        .btn:hover {
+            background: #2980b9;
+        }
+        .practice-area {
+            margin-top: 30px;
+            display: none;
+        }
+        .sentence-display {
+            font-size: 20px;
+            color: #2c3e50;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            text-align: center;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .sentence-display:hover {
+            background: #e9ecef;
+        }
+        .controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .controls button {
+            flex: 1;
+            min-width: 120px;
+        }
+        .stats {
+            text-align: center;
+            color: #7f8c8d;
+            font-size: 14px;
+            margin-top: 15px;
+        }
+        .voice-controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        select {
+            padding: 8px;
+            border-radius: 5px;
+            border: 1px solid #ddd;
+            flex: 1;
+        }
+        .speed-control {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin: 10px 0;
+        }
+        .speed-control input {
+            flex: 1;
+        }
+        @media (max-width: 480px) {
+            .container {
+                padding: 20px;
+            }
+            .controls {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">English Practice with TTS</h1>
+        <div class="input-area">
+            <textarea id="sentenceInput" placeholder="Enter your English sentences here (one per line)"></textarea>
+            <button class="btn" onclick="startPractice()">Start Practice</button>
+        </div>
+        <div class="practice-area" id="practiceArea">
+            <div class="voice-controls">
+                <select id="voiceSelect"></select>
+            </div>
+            <div class="speed-control">
+                <span>Speed:</span>
+                <input type="range" id="speedControl" min="0.5" max="2" step="0.1" value="1">
+                <span id="speedValue">1.0x</span>
+            </div>
+            <div class="sentence-display" id="sentenceDisplay" onclick="speakCurrentSentence()"></div>
+            <div class="controls">
+                <button class="btn" onclick="prevSentence()">Previous</button>
+                <button class="btn" onclick="toggleAutoPlay()">Auto Play</button>
+                <button class="btn" onclick="nextSentence()">Next</button>
+            </div>
+            <div class="stats" id="stats"></div>
+        </div>
+    </div>
+    <script>
+        let sentences = [];
+        let currentIndex = 0;
+        let autoPlayInterval;
+        let isAutoPlaying = false;
+        let speechSynth = window.speechSynthesis;
+        let voices = [];
+        // Initialize voice selection
+        function initVoices() {
+            voices = speechSynth.getVoices();
+            const voiceSelect = document.getElementById('voiceSelect');
+            voiceSelect.innerHTML = '';
+            voices.forEach((voice, index) => {
+                if (voice.lang.includes('en')) {
+                    const option = document.createElement('option');
+                    option.value = index;
+                    option.textContent = `${voice.name} (${voice.lang})`;
+                    voiceSelect.appendChild(option);
+                }
+            });
+        }
+        speechSynth.onvoiceschanged = initVoices;
+        // Speed control
+        document.getElementById('speedControl').addEventListener('input', function(e) {
+            document.getElementById('speedValue').textContent = `${e.target.value}x`;
+        });
+        function speakText(text) {
+            if (speechSynth.speaking) {
+                speechSynth.cancel();
+            }
+            const utterance = new SpeechSynthesisUtterance(text);
+            const voiceSelect = document.getElementById('voiceSelect');
+            const speedControl = document.getElementById('speedControl');
+            utterance.voice = voices[voiceSelect.value];
+            utterance.rate = speedControl.value;
+            utterance.pitch = 1;
+            speechSynth.speak(utterance);
+        }
+        function speakCurrentSentence() {
+            speakText(sentences[currentIndex]);
+        }
+        function startPractice() {
+            const input = document.getElementById('sentenceInput').value.trim();
+            if (!input) {
+                alert('Please enter at least one sentence');
+                return;
+            }
+            sentences = input.split('\n').filter(sentence => sentence.trim());
+            if (sentences.length === 0) {
+                alert('Please enter valid sentences');
+                return;
+            }
+            currentIndex = 0;
+            document.getElementById('practiceArea').style.display = 'block';
+            updateDisplay();
+            speakCurrentSentence();
+        }
+        function updateDisplay() {
+            document.getElementById('sentenceDisplay').textContent = sentences[currentIndex];
+            document.getElementById('stats').textContent =
+                `Sentence ${currentIndex + 1} of ${sentences.length}`;
+        }
+        function nextSentence() {
+            if (currentIndex < sentences.length - 1) {
+                currentIndex++;
+                updateDisplay();
+                speakCurrentSentence();
+            }
+        }
+        function prevSentence() {
+            if (currentIndex > 0) {
+                currentIndex--;
+                updateDisplay();
+                speakCurrentSentence();
+            }
+        }
+        function toggleAutoPlay() {
+            if (isAutoPlaying) {
+                clearInterval(autoPlayInterval);
+                isAutoPlaying = false;
+            } else {
+                autoPlayInterval = setInterval(() => {
+                    if (currentIndex < sentences.length - 1) {
+                        nextSentence();
+                    } else {
+                        currentIndex = 0;
+                        updateDisplay();
+                        speakCurrentSentence();
+                    }
+                }, 5000); // 5 seconds interval
+                isAutoPlaying = true;
+                speakCurrentSentence();
+            }
+        }
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight') {
+                nextSentence();
+            } else if (e.key === 'ArrowLeft') {
+                prevSentence();
+            } else if (e.key === ' ') {
+                e.preventDefault();
+                toggleAutoPlay();
+            }
+        });
+        // Initialize voices if they're already loaded
+        if (speechSynth.getVoices().length > 0) {
+            initVoices();
+        }
+    </script>
+</body>
+</html>