Spaces:

ReneeHWT
/

VocabFun

Sleeping

App Files Files Community

ReneeHWT commited on Dec 18, 2024

Commit

9f6e48a

verified ·

1 Parent(s): d02a4aa

Update app.py

Browse files

Files changed (1) hide show

app.py +103 -392

app.py CHANGED Viewed

@@ -1,392 +1,103 @@
-<html><head><base href="https://example.com">
-    <meta charset="UTF-8">
-    <title>Personal English Vocabulary App</title>
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-    <!-- CSS for styling and animations -->
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, #d6c8c0, #b3a9b8);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 20px;
-            min-height: 100vh;
-        }
-        h1 {
-            color: #5a5a5a;
-            margin-bottom: 20px;
-            animation: fadeInDown 1s ease-in-out;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        #upload-section, #quiz-section {
-            background: #f5f5f5;
-            padding: 20px 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 600px;
-            margin-bottom: 20px;
-            animation: fadeInUp 1s ease-in-out;
-        }
-        label {
-            display: block;
-            margin-bottom: 10px;
-            color: #6b6b6b;
-        }
-        input[type="file"], input[type="text"], button {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 15px;
-            border: none;
-            border-radius: 5px;
-            font-size: 16px;
-        }
-        input[type="text"] {
-            background-color: #ffffff;
-            border: 1px solid #ccc;
-        }
-        button {
-            background-color: #a89fcb;
-            color: #fff;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        button:hover {
-            background-color: #8e82b7;
-        }
-        #quiz-container {
-            display: none;
-            text-align: center;
-            width: 100%;
-        }
-        #matching-game {
-            display: flex;
-            justify-content: space-between;
-            gap: 20px;
-            flex-wrap: wrap;
-        }
-        .column {
-            width: 45%;
-        }
-        .column h3 {
-            color: #5a5a5a;
-            margin-bottom: 10px;
-            animation: fadeInDown 1s ease-in-out;
-        }
-        .list {
-            list-style: none;
-            padding: 0;
-        }
-        .list-item {
-            background: #cfcfcf;
-            padding: 10px;
-            margin: 5px 0;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: background 0.3s ease, transform 0.3s ease;
-            color: #5a5a5a;
-            user-select: none;
-        }
-        .list-item:hover {
-            background: #bcbcbc;
-            transform: scale(1.05);
-        }
-        .selected {
-            background: #a89fcb;
-            color: #fff;
-        }
-        #result {
-            font-size: 1.2em;
-            margin-top: 20px;
-            color: #6ab04c;
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        /* Animations */
-        @keyframes fadeInDown {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        /* SVG Icon */
-        .icon {
-            width: 50px;
-            height: 50px;
-            margin-bottom: 10px;
-            fill: #a89fcb;
-            animation: rotate 4s linear infinite;
-        }
-        @keyframes rotate {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        hr {
-            border: none;
-            border-top: 1px solid #ddd;
-            margin: 20px 0;
-        }
-        h2 {
-            color: #5a5a5a;
-            margin-bottom: 15px;
-            animation: fadeInDown 1s ease-in-out;
-        }
-    </style>
-</head>
-<body>
-    <h1>
-        📚 Personal English Vocabulary App
-    </h1>
-    <div id="upload-section">
-        <svg class="icon" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-            <path d="M48,4H16C10.477,4,6,8.477,6,14v36c0,5.523,4.477,10,10,10h32c5.523,0,10-4.477,10-10V14C58,8.477,53.523,4,48,4z M48,50H16c-2.209,0-4-1.791-4-4V14c0-2.209,1.791-4,4-4h32c2.209,0,4,1.791,4,4v32C52,48.209,50.209,50,48,50z"/>
-            <path d="M22,22h20v4H22V22z M22,30h20v4H22V30z M22,38h20v4H22V38z"/>
-        </svg>
-        <label for="vocab-file">Upload Your Vocabulary (CSV format: word, definition)</label>
-        <input type="file" id="vocab-file" accept=".csv">
-        <button id="start-quiz">Start Quiz</button>
-        <hr>
-        <h2>Add a Vocabulary Word Manually</h2>
-        <label for="manual-word">Word:</label>
-        <input type="text" id="manual-word" placeholder="Enter word">
-        <label for="manual-definition">Definition:</label>
-        <input type="text" id="manual-definition" placeholder="Enter definition">
-        <button id="add-word">Add Word</button>
-    </div>
-    <div id="quiz-section">
-        <div id="quiz-container">
-            <div id="matching-game">
-                <div class="column" id="words-column">
-                    <h3>Words</h3>
-                    <ul class="list" id="words-list">
-                        <!-- Words will be generated here -->
-                    </ul>
-                </div>
-                <div class="column" id="definitions-column">
-                    <h3>Definitions</h3>
-                    <ul class="list" id="definitions-list">
-                        <!-- Definitions will be generated here -->
-                    </ul>
-                </div>
-            </div>
-            <div id="result"></div>
-            <button id="reset-quiz" style="margin-top: 20px; display: none;">Reset Quiz</button>
-        </div>
-    </div>
-    <!-- JavaScript for functionality -->
-    <script>
-        const uploadSection = document.getElementById('upload-section');
-        const quizSection = document.getElementById('quiz-section');
-        const startQuizButton = document.getElementById('start-quiz');
-        const vocabFileInput = document.getElementById('vocab-file');
-        const wordsList = document.getElementById('words-list');
-        const definitionsList = document.getElementById('definitions-list');
-        const resultEl = document.getElementById('result');
-        const addWordButton = document.getElementById('add-word');
-        const manualWordInput = document.getElementById('manual-word');
-        const manualDefInput = document.getElementById('manual-definition');
-        const resetQuizButton = document.getElementById('reset-quiz');
-        let vocabulary = [];
-        let matches = {};
-        let selectedWord = null;
-        let selectedDefinition = null;
-        let score = 0;
-        startQuizButton.addEventListener('click', () => {
-            const file = vocabFileInput.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    const text = e.target.result;
-                    parseCSV(text);
-                    if(vocabulary.length > 0){
-                        uploadSection.style.display = 'none';
-                        quizSection.style.display = 'block';
-                        startMatchingGame();
-                    } else {
-                        alert('Please upload a valid CSV file or add words manually.');
-                    }
-                }
-                reader.readAsText(file);
-            } else if (vocabulary.length > 0) {
-                uploadSection.style.display = 'none';
-                quizSection.style.display = 'block';
-                startMatchingGame();
-            } else {
-                alert('Please upload a CSV file or add words manually.');
-            }
-        });
-        addWordButton.addEventListener('click', () => {
-            const word = manualWordInput.value.trim();
-            const definition = manualDefInput.value.trim();
-            if (word && definition) {
-                vocabulary.push({ word, definition });
-                manualWordInput.value = '';
-                manualDefInput.value = '';
-                alert(`Added "${word}" to your vocabulary.`);
-            } else {
-                alert('Please enter both word and definition.');
-            }
-        });
-        resetQuizButton.addEventListener('click', () => {
-            vocabulary = [];
-            matches = {};
-            selectedWord = null;
-            selectedDefinition = null;
-            score = 0;
-            wordsList.innerHTML = '';
-            definitionsList.innerHTML = '';
-            resultEl.innerText = '';
-            resetQuizButton.style.display = 'none';
-            uploadSection.style.display = 'block';
-            quizSection.style.display = 'none';
-        });
-        function parseCSV(text) {
-            const lines = text.split('\\n');
-            const parsed = lines.map(line => {
-                const [word, definition] = line.split(',');
-                return { word: word.trim(), definition: definition.trim() };
-            }).filter(item => item.word && item.definition);
-            vocabulary = vocabulary.concat(parsed);
-        }
-        function startMatchingGame() {
-            shuffleArray(vocabulary);
-            displayWords();
-            displayDefinitions();
-        }
-        function displayWords() {
-            wordsList.innerHTML = '';
-            vocabulary.forEach((item, index) => {
-                const li = document.createElement('li');
-                li.classList.add('list-item');
-                li.innerText = item.word;
-                li.dataset.word = item.word;
-                li.addEventListener('click', () => selectWord(li));
-                wordsList.appendChild(li);
-            });
-        }
-        function displayDefinitions() {
-            definitionsList.innerHTML = '';
-            const shuffledDefinitions = [...vocabulary.map(item => item.definition)];
-            shuffleArray(shuffledDefinitions);
-            shuffledDefinitions.forEach((def, index) => {
-                const li = document.createElement('li');
-                li.classList.add('list-item');
-                li.innerText = def;
-                li.dataset.definition = def;
-                li.addEventListener('click', () => selectDefinition(li));
-                definitionsList.appendChild(li);
-            });
-        }
-        function selectWord(element) {
-            if (selectedWord) {
-                selectedWord.classList.remove('selected');
-            }
-            selectedWord = element;
-            selectedWord.classList.add('selected');
-            checkMatch();
-        }
-        function selectDefinition(element) {
-            if (selectedDefinition) {
-                selectedDefinition.classList.remove('selected');
-            }
-            selectedDefinition = element;
-            selectedDefinition.classList.add('selected');
-            checkMatch();
-        }
-        function checkMatch() {
-            if (selectedWord && selectedDefinition) {
-                const word = selectedWord.dataset.word;
-                const definition = selectedDefinition.dataset.definition;
-                const vocabItem = vocabulary.find(item => item.word === word);
-                if (vocabItem.definition === definition) {
-                    score++;
-                    resultEl.style.color = '#6ab04c';
-                    resultEl.innerText = 'Correct! 🎉';
-                    selectedWord.style.backgroundColor = '#6ab04c';
-                    selectedDefinition.style.backgroundColor = '#6ab04c';
-                } else {
-                    resultEl.style.color = '#e74c3c';
-                    resultEl.innerText = `Incorrect! "${word}" does not match the selected definition.`;
-                    selectedWord.style.backgroundColor = '#e74c3c';
-                    selectedDefinition.style.backgroundColor = '#e74c3c';
-                }
-                // Disable further selection
-                selectedWord.removeEventListener('click', selectWord);
-                selectedDefinition.removeEventListener('click', selectDefinition);
-                selectedWord = null;
-                selectedDefinition = null;
-                // Check if all matches are done
-                if (score === vocabulary.length) {
-                    resultEl.innerText += ' You matched all correctly!';
-                    resetQuizButton.style.display = 'block';
-                }
-            }
-        }
-        function shuffleArray(array) {
-            for (let i = array.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [array[i], array[j]] = [array[j], array[i]];
-            }
-        }
-    </script>
-</body>
-</html>

+import gradio as gr
+import random
+import pandas as pd
+import ssl
+# Workaround for SSL issues in some environments
+ssl._create_default_https_context = ssl._create_unverified_context
+# Global Variables
+vocabulary = []
+matches = {}
+score = 0
+# Helper Functions
+def parse_csv(file):
+    try:
+        data = pd.read_csv(file.name, header=None)
+        vocab = data.dropna().values.tolist()
+        return [{"word": row[0].strip(), "definition": row[1].strip()} for row in vocab]
+    except Exception as e:
+        return []
+def add_word(word, definition):
+    global vocabulary
+    if word and definition:
+        vocabulary.append({"word": word.strip(), "definition": definition.strip()})
+        return f'Word "{word}" added successfully!', vocabulary
+    else:
+        return "Both word and definition are required.", vocabulary
+def start_quiz():
+    global matches, score
+    score = 0
+    if len(vocabulary) < 1:
+        return "Please add some words first.", [], []
+    random.shuffle(vocabulary)
+    words = [item['word'] for item in vocabulary]
+    definitions = [item['definition'] for item in vocabulary]
+    random.shuffle(definitions)
+    matches = {item['word']: item['definition'] for item in vocabulary}
+    return "Match the words with their definitions.", words, definitions
+def check_match(word, definition):
+    global matches, score
+    if matches.get(word) == definition:
+        score += 1
+        return f"Correct! {word} matches {definition}.", score
+    else:
+        return f"Incorrect! {word} does not match {definition}.", score
+def reset_app():
+    global vocabulary, matches, score
+    vocabulary = []
+    matches = {}
+    score = 0
+    return "Application has been reset.", vocabulary
+# Gradio Interface
+def main():
+    with gr.Blocks() as app:
+        gr.Markdown("# Personal English Vocabulary App")
+        with gr.Tab("Upload Vocabulary"):
+            csv_upload = gr.File(label="Upload CSV (word, definition)")
+            upload_button = gr.Button("Upload")
+            upload_output = gr.Textbox(label="Upload Status")
+        with gr.Tab("Add Vocabulary"):
+            word_input = gr.Textbox(label="Word")
+            definition_input = gr.Textbox(label="Definition")
+            add_button = gr.Button("Add Word")
+            add_output = gr.Textbox(label="Add Status")
+        with gr.Tab("Start Quiz"):
+            quiz_status = gr.Textbox(label="Quiz Status")
+            start_button = gr.Button("Start Quiz")
+        with gr.Tab("Matching Game"):
+            word_dropdown = gr.Dropdown(label="Select Word")
+            definition_dropdown = gr.Dropdown(label="Select Definition")
+            match_button = gr.Button("Check Match")
+            match_output = gr.Textbox(label="Match Result")
+            score_output = gr.Textbox(label="Score")
+        with gr.Tab("Reset Application"):
+            reset_button = gr.Button("Reset")
+            reset_output = gr.Textbox(label="Reset Status")
+        # Actions
+        upload_button.click(parse_csv, inputs=[csv_upload], outputs=[upload_output])
+        add_button.click(add_word, inputs=[word_input, definition_input], outputs=[add_output, word_dropdown])
+        start_button.click(start_quiz, outputs=[quiz_status, word_dropdown, definition_dropdown])
+        match_button.click(check_match, inputs=[word_dropdown, definition_dropdown], outputs=[match_output, score_output])
+        reset_button.click(reset_app, outputs=[reset_output])
+    return app
+# Run Application
+if __name__ == "__main__":
+    app = main()
+    app.launch()