Spaces:

Subham9126
/

voiceinteractive

Running

App Files Files Community

Subham9126 commited on Aug 21, 2024

Commit

4f7b76e

verified ·

1 Parent(s): cefe04d

Update index.html

Browse files

Files changed (1) hide show

index.html +450 -19

index.html CHANGED Viewed

@@ -1,19 +1,450 @@
-<!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>Voice Change Tool</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
+  <style>
+    .selected {
+      background-color: #4299e1;
+      color: white;
+    }
+  </style>
+</head>
+<body class="bg-gray-100 font-inter">
+  <div class="container mx-auto p-6 md:p-10">
+    <h1 class="text-4xl font-bold text-center mb-8">Voice Change Tool</h1>
+    <div class="bg-white p-6 md:p-8 rounded-lg shadow-md">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <!-- Tense Selection -->
+        <div>
+          <h2 class="text-lg font-medium mb-3">Tense</h2>
+          <div class="flex space-x-3">
+            <button data-tense="present" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Present</button>
+            <button data-tense="past" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Past</button>
+            <button data-tense="future" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Future</button>
+          </div>
+        </div>
+        <!-- Subtense Selection -->
+        <div>
+          <h2 class="text-lg font-medium mb-3">Subtense</h2>
+          <div class="flex flex-wrap gap-3">
+            <button data-subtense="simple" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Simple</button>
+            <button data-subtense="continuous" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Continuous</button>
+            <button data-subtense="perfect" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Perfect</button>
+            <button data-subtense="perfectContinuous" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Perfect Continuous</button>
+          </div>
+        </div>
+        <!-- Type Selection -->
+        <div>
+          <h2 class="text-lg font-medium mb-3">Type</h2>
+          <div class="flex flex-col space-y-3">
+            <button data-type="affirmative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Affirmative</button>
+            <button data-type="negative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Negative</button>
+            <button data-type="interrogative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Interrogative</button>
+            <button data-type="whWord" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">WH-word</button>
+          </div>
+        </div>
+      </div>
+      <div class="rule mb-6" id="rule-text">
+        <h2 id="active-voice-heading" class="text-2xl font-bold mb-3 text-red-500">Active Voice:</h2>
+        <h3 id="active-voice-text" class="text-lg font-medium mb-3">sub+ v2+ obj</h3>
+        <h2 id="passive-voice-heading" class="text-2xl font-bold mb-3 text-blue-500">Passive Voice:</h2>
+        <h3 id="passive-voice-text" class="text-lg font-medium mb-3">obj+ was/were+ v3+ by+ sub</h3>
+      </div>
+      <div class="examples mb-8" id="examples-text">
+        <h2 class="text-2xl font-bold mb-3 text-green-500">Examples:</h2>
+        <div id="examples-list">
+          <p><strong>Active voice:</strong> I wrote a letter.<br><strong>Passive voice:</strong> A letter was written by me.</p>
+          <p><strong>Active voice:</strong> She played the guitar.<br><strong>Passive voice:</strong> The guitar was played by her.</p>
+        </div>
+      </div>
+      <div class="flex justify-center">
+        <button id="prev-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-l">
+          Previous
+        </button>
+        <button id="next-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-r">
+          Next
+        </button>
+      </div>
+    </div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+  <script>
+    const voiceChangeRules = {
+  present: {
+    simple: {
+      affirmative: {
+        active: 'sub+ v1+ obj',
+        passive: 'obj+ am/is/are+ v3+ by+ sub',
+        examples: [
+          { active: 'I write a letter.', passive: 'A letter is written by me.' },
+          { active: 'She plays the guitar.', passive: 'The guitar is played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ do/does not+ v1+ obj',
+        passive: 'obj+ is/are+ not+ v3+ by+ sub',
+        examples: [
+          { active: 'I do not write a letter.', passive: 'A letter is not written by me.' },
+          { active: 'She does not play the guitar.', passive: 'The guitar is not played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'do/does+ sub+ v1+ obj?',
+        passive: 'is/are+ obj+ v3+ by+ sub?',
+        examples: [
+          { active: 'Do I write a letter?', passive: 'Is a letter written by me?' },
+          { active: 'Does she play the guitar?', passive: 'Is the guitar played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ do/does+ sub+ v1+ obj?',
+        passive: 'wh-word+ is/are+ obj+ v3+ by+ sub?',
+        examples: [
+          { active: 'Why do I write a letter?', passive: 'Why is a letter written by me?' },
+          { active: 'What does she play?', passive: 'What is played by her?' }
+        ]
+      }
+    },
+    continuous: {
+      affirmative: {
+        active: 'sub+ am/is/are+ v1+ing+ obj',
+        passive: 'obj+ am/is/are+ being+ v3+ by+ sub',
+        examples: [
+          { active: 'I am writing a letter.', passive: 'A letter is being written by me.' },
+          { active: 'She is playing the guitar.', passive: 'The guitar is being played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ am/is/are not+ v1+ing+ obj',
+        passive: 'obj+ am/is/are not+ being+ v3+ by+ sub',
+        examples: [
+          { active: 'I am not writing a letter.', passive: 'A letter is not being written by me.' },
+          { active: 'She is not playing the guitar.', passive: 'The guitar is not being played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'am/is/are+ sub+ v1+ing+ obj?',
+        passive: 'am/is/are+ obj+ being+ v3+ by+ sub?',
+        examples: [
+          { active: 'Am I writing a letter?', passive: 'Is a letter being written by me?' },
+          { active: 'Is she playing the guitar?', passive: 'Is the guitar being played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ am/is/are+ sub+ v1+ing+ obj?',
+        passive: 'wh-word+ am/is/are+ obj+ being+ v3+ by+ sub?',
+        examples: [
+          { active: 'What are you writing?', passive: 'What is being written by you?' },
+          { active: 'Why is she playing the guitar?', passive: 'Why is the guitar being played by her?' }
+        ]
+      }
+    },
+    perfect: {
+      affirmative: {
+        active: 'sub+ have/has+ v3+ obj',
+        passive: 'obj+ have/has+ been+ v3+ by+ sub',
+        examples: [
+          { active: 'I have written a letter.', passive: 'A letter has been written by me.' },
+          { active: 'She has played the guitar.', passive: 'The guitar has been played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ have/has not+ v3+ obj',
+        passive: 'obj+ have/has not+ been+ v3+ by+ sub',
+        examples: [
+          { active: 'I have not written a letter.', passive: 'A letter has not been written by me.' },
+          { active: 'She has not played the guitar.', passive: 'The guitar has not been played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'have/has+ sub+ v3+ obj?',
+        passive: 'have/has+ obj+ been+ v3+ by+ sub?',
+        examples: [
+          { active: 'Have I written a letter?', passive: 'Has a letter been written by me?' },
+          { active: 'Has she played the guitar?', passive: 'Has the guitar been played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ have/has+ sub+ v3+ obj?',
+        passive: 'wh-word+ have/has+ obj+ been+ v3+ by+ sub?',
+        examples: [
+          { active: 'What have you written?', passive: 'What has been written by you?' },
+          { active: 'Why has she played the guitar?', passive: 'Why has the guitar been played by her?' }
+        ]
+      }
+    }
+  },
+  past: {
+    simple: {
+      affirmative: {
+        active: 'sub+ v2+ obj',
+        passive: 'obj+ was/were+ v3+ by+ sub',
+        examples: [
+          { active: 'I wrote a letter.', passive: 'A letter was written by me.' },
+          { active: 'She played the guitar.', passive: 'The guitar was played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ did not+ v1+ obj',
+        passive: 'obj+ was/were+ not+ v3+ by+ sub',
+        examples: [
+          { active: 'I did not write a letter.', passive: 'A letter was not written by me.' },
+          { active: 'She did not play the guitar.', passive: 'The guitar was not played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'did+ sub+ v1+ obj?',
+        passive: 'was/were+ obj+ v3+ by+ sub?',
+        examples: [
+          { active: 'Did I write a letter?', passive: 'Was a letter written by me?' },
+          { active: 'Did she play the guitar?', passive: 'Was the guitar played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ did+ sub+ v1+ obj?',
+        passive: 'wh-word+ was/were+ obj+ v3+ by+ sub?',
+        examples: [
+          { active: 'Why did I write a letter?', passive: 'Why was a letter written by me?' },
+          { active: 'What did she play?', passive: 'What was played by her?' }
+        ]
+      }
+    },
+    continuous: {
+      affirmative: {
+        active: 'sub+ was/were+ v1+ing+ obj',
+        passive: 'obj+ was/were+ being+ v3+ by+ sub',
+        examples: [
+          { active: 'I was writing a letter.', passive: 'A letter was being written by me.' },
+          { active: 'She was playing the guitar.', passive: 'The guitar was being played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ was/were not+ v1+ing+ obj',
+        passive: 'obj+ was/were not+ being+ v3+ by+ sub',
+        examples: [
+          { active: 'I was not writing a letter.', passive: 'A letter was not being written by me.' },
+          { active: 'She was not playing the guitar.', passive: 'The guitar was not being played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'was/were+ sub+ v1+ing+ obj?',
+        passive: 'was/were+ obj+ being+ v3+ by+ sub?',
+        examples: [
+          { active: 'Was I writing a letter?', passive: 'Was a letter being written by me?' },
+          { active: 'Was she playing the guitar?', passive: 'Was the guitar being played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ was/were+ sub+ v1+ing+ obj?',
+        passive: 'wh-word+ was/were+ obj+ being+ v3+ by+ sub?',
+        examples: [
+          { active: 'What was I writing?', passive: 'What was being written by me?' },
+          { active: 'Why was she playing the guitar?', passive: 'Why was the guitar being played by her?' }
+        ]
+      }
+    },
+    perfect: {
+      affirmative: {
+        active: 'sub+ had+ v3+ obj',
+        passive: 'obj+ had+ been+ v3+ by+ sub',
+        examples: [
+          { active: 'I had written a letter.', passive: 'A letter had been written by me.' },
+          { active: 'She had played the guitar.', passive: 'The guitar had been played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ had not+ v3+ obj',
+        passive: 'obj+ had not+ been+ v3+ by+ sub',
+        examples: [
+          { active: 'I had not written a letter.', passive: 'A letter had not been written by me.' },
+          { active: 'She had not played the guitar.', passive: 'The guitar had not been played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'had+ sub+ v3+ obj?',
+        passive: 'had+ obj+ been+ v3+ by+ sub?',
+        examples: [
+          { active: 'Had I written a letter?', passive: 'Had a letter been written by me?' },
+          { active: 'Had she played the guitar?', passive: 'Had the guitar been played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ had+ sub+ v3+ obj?',
+        passive: 'wh-word+ had+ obj+ been+ v3+ by+ sub?',
+        examples: [
+          { active: 'What had you written?', passive: 'What had been written by you?' },
+          { active: 'Why had she played the guitar?', passive: 'Why had the guitar been played by her?' }
+        ]
+      }
+    }
+  },
+  future: {
+    simple: {
+      affirmative: {
+        active: 'sub+ will+ v1+ obj',
+        passive: 'obj+ will+ be+ v3+ by+ sub',
+        examples: [
+          { active: 'I will write a letter.', passive: 'A letter will be written by me.' },
+          { active: 'She will play the guitar.', passive: 'The guitar will be played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ will not+ v1+ obj',
+        passive: 'obj+ will not+ be+ v3+ by+ sub',
+        examples: [
+          { active: 'I will not write a letter.', passive: 'A letter will not be written by me.' },
+          { active: 'She will not play the guitar.', passive: 'The guitar will not be played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'will+ sub+ v1+ obj?',
+        passive: 'will+ obj+ be+ v3+ by+ sub?',
+        examples: [
+          { active: 'Will I write a letter?', passive: 'Will a letter be written by me?' },
+          { active: 'Will she play the guitar?', passive: 'Will the guitar be played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ will+ sub+ v1+ obj?',
+        passive: 'wh-word+ will+ obj+ be+ v3+ by+ sub?',
+        examples: [
+          { active: 'What will I write?', passive: 'What will be written by me?' },
+          { active: 'Why will she play the guitar?', passive: 'Why will the guitar be played by her?' }
+        ]
+      }
+    },
+    continuous: {
+      affirmative: {
+        active: 'sub+ will be+ v1+ing+ obj',
+        passive: 'obj+ will be+ being+ v3+ by+ sub',
+        examples: [
+          { active: 'I will be writing a letter.', passive: 'A letter will be being written by me.' },
+          { active: 'She will be playing the guitar.', passive: 'The guitar will be being played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ will not be+ v1+ing+ obj',
+        passive: 'obj+ will not be+ being+ v3+ by+ sub',
+        examples: [
+          { active: 'I will not be writing a letter.', passive: 'A letter will not be being written by me.' },
+          { active: 'She will not be playing the guitar.', passive: 'The guitar will not be being played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'will+ sub+ be+ v1+ing+ obj?',
+        passive: 'will+ obj+ be+ being+ v3+ by+ sub?',
+        examples: [
+          { active: 'Will I be writing a letter?', passive: 'Will a letter be being written by me?' },
+          { active: 'Will she be playing the guitar?', passive: 'Will the guitar be being played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ will+ sub+ be+ v1+ing+ obj?',
+        passive: 'wh-word+ will+ obj+ be+ being+ v3+ by+ sub?',
+        examples: [
+          { active: 'What will I be writing?', passive: 'What will be being written by me?' },
+          { active: 'Why will she be playing the guitar?', passive: 'Why will the guitar be being played by her?' }
+        ]
+      }
+    },
+    perfect: {
+      affirmative: {
+        active: 'sub+ will have+ v3+ obj',
+        passive: 'obj+ will have+ been+ v3+ by+ sub',
+        examples: [
+          { active: 'I will have written a letter.', passive: 'A letter will have been written by me.' },
+          { active: 'She will have played the guitar.', passive: 'The guitar will have been played by her.' }
+        ]
+      },
+      negative: {
+        active: 'sub+ will not have+ v3+ obj',
+        passive: 'obj+ will not have+ been+ v3+ by+ sub',
+        examples: [
+          { active: 'I will not have written a letter.', passive: 'A letter will not have been written by me.' },
+          { active: 'She will not have played the guitar.', passive: 'The guitar will not have been played by her.' }
+        ]
+      },
+      interrogative: {
+        active: 'will+ sub+ have+ v3+ obj?',
+        passive: 'will+ obj+ have+ been+ v3+ by+ sub?',
+        examples: [
+          { active: 'Will I have written a letter?', passive: 'Will a letter have been written by me?' },
+          { active: 'Will she have played the guitar?', passive: 'Will the guitar have been played by her?' }
+        ]
+      },
+      whWord: {
+        active: 'wh-word+ will+ sub+ have+ v3+ obj?',
+        passive: 'wh-word+ will+ obj+ have+ been+ v3+ by+ sub?',
+        examples: [
+          { active: 'What will you have written?', passive: 'What will have been written by you?' },
+          { active: 'Why will she have played the guitar?', passive: 'Why will the guitar have been played by her?' }
+        ]
+      }
+    }
+  }
+};
+    // Handle button state and display rules and examples
+    const tenseButtons = document.querySelectorAll('.tense-btn');
+    const subtenseButtons = document.querySelectorAll('.subtense-btn');
+    const typeButtons = document.querySelectorAll('.type-btn');
+    let selectedTense = null;
+    let selectedSubtense = null;
+    let selectedType = null;
+    function updateContent() {
+      if (selectedTense && selectedSubtense && selectedType) {
+        const rule = voiceChangeRules[selectedTense][selectedSubtense][selectedType];
+        document.getElementById('active-voice-heading').textContent = 'Active Voice:';
+        document.getElementById('active-voice-text').textContent = rule.active;
+        document.getElementById('passive-voice-heading').textContent = 'Passive Voice:';
+        document.getElementById('passive-voice-text').textContent = rule.passive;
+        const examples = rule.examples.map(ex =>
+          `<p><strong>Active voice:</strong> ${ex.active}<br><strong>Passive voice:</strong> ${ex.passive}</p>`
+        ).join('');
+        document.getElementById('examples-list').innerHTML = examples;
+      }
+    }
+    tenseButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        tenseButtons.forEach(btn => btn.classList.remove('selected'));
+        button.classList.add('selected');
+        selectedTense = button.dataset.tense;
+        updateContent();
+      });
+    });
+    subtenseButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        subtenseButtons.forEach(btn => btn.classList.remove('selected'));
+        button.classList.add('selected');
+        selectedSubtense = button.dataset.subtense;
+        updateContent();
+      });
+    });
+    typeButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        typeButtons.forEach(btn => btn.classList.remove('selected'));
+        button.classList.add('selected');
+        selectedType = button.dataset.type;
+        updateContent();
+      });
+    });
+  </script>
+</body>
+</html>