| | from flask import Flask, render_template_string, jsonify, request |
| | from huggingface_hub import InferenceClient |
| | import os |
| | import random |
| |
|
| | app = Flask(__name__) |
| |
|
| | |
| | HF_TOKEN = os.environ.get("HF_TOKEN", "") |
| |
|
| | |
| | HTML_TEMPLATE = """ |
| | <!DOCTYPE html> |
| | <html lang="vi"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>English Shooting Game</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | min-height: 100vh; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | padding: 20px; |
| | } |
| | |
| | .game-container { |
| | width: 100%; |
| | max-width: 1000px; |
| | background: rgba(255, 255, 255, 0.95); |
| | border-radius: 20px; |
| | box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| | padding: 30px; |
| | } |
| | |
| | .header { |
| | text-align: center; |
| | margin-bottom: 30px; |
| | } |
| | |
| | .header h1 { |
| | color: #667eea; |
| | font-size: 2.5em; |
| | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .score-board { |
| | display: flex; |
| | justify-content: space-around; |
| | margin-bottom: 30px; |
| | padding: 15px; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | border-radius: 10px; |
| | color: white; |
| | } |
| | |
| | .score-item { |
| | text-align: center; |
| | } |
| | |
| | .score-item .label { |
| | font-size: 0.9em; |
| | opacity: 0.9; |
| | } |
| | |
| | .score-item .value { |
| | font-size: 2em; |
| | font-weight: bold; |
| | margin-top: 5px; |
| | } |
| | |
| | .game-area { |
| | position: relative; |
| | height: 400px; |
| | background: linear-gradient(to bottom, #87CEEB 0%, #98D8C8 100%); |
| | border-radius: 15px; |
| | overflow: hidden; |
| | margin-bottom: 20px; |
| | border: 3px solid #667eea; |
| | } |
| | |
| | .shooter { |
| | position: absolute; |
| | bottom: 20px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | font-size: 60px; |
| | transition: transform 0.1s; |
| | } |
| | |
| | .target { |
| | position: absolute; |
| | top: 20px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | font-size: 80px; |
| | animation: float 3s ease-in-out infinite; |
| | } |
| | |
| | @keyframes float { |
| | 0%, 100% { transform: translateX(-50%) translateY(0px); } |
| | 50% { transform: translateX(-50%) translateY(-20px); } |
| | } |
| | |
| | .bullet { |
| | position: absolute; |
| | width: 8px; |
| | height: 20px; |
| | background: linear-gradient(to top, #ff6b6b, #feca57); |
| | border-radius: 4px; |
| | bottom: 80px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | box-shadow: 0 0 10px rgba(255, 107, 107, 0.8); |
| | } |
| | |
| | .question-section { |
| | background: #f8f9fa; |
| | padding: 25px; |
| | border-radius: 15px; |
| | margin-bottom: 20px; |
| | border: 2px solid #e9ecef; |
| | } |
| | |
| | .question-text { |
| | font-size: 1.3em; |
| | color: #333; |
| | margin-bottom: 20px; |
| | line-height: 1.6; |
| | } |
| | |
| | .answer-input { |
| | width: 100%; |
| | padding: 15px; |
| | font-size: 1.2em; |
| | border: 2px solid #ddd; |
| | border-radius: 10px; |
| | transition: all 0.3s; |
| | margin-bottom: 15px; |
| | } |
| | |
| | .answer-input:focus { |
| | outline: none; |
| | border-color: #667eea; |
| | box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| | } |
| | |
| | .answer-input.correct { |
| | border-color: #51cf66; |
| | background: #d3f9d8; |
| | } |
| | |
| | .answer-input.incorrect { |
| | border-color: #ff6b6b; |
| | background: #ffe0e0; |
| | } |
| | |
| | .button-group { |
| | display: flex; |
| | gap: 15px; |
| | justify-content: center; |
| | } |
| | |
| | .btn { |
| | padding: 15px 40px; |
| | font-size: 1.1em; |
| | border: none; |
| | border-radius: 10px; |
| | cursor: pointer; |
| | font-weight: bold; |
| | transition: all 0.3s; |
| | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
| | } |
| | |
| | .btn-shoot { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | color: white; |
| | } |
| | |
| | .btn-shoot:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); |
| | } |
| | |
| | .btn-shoot:disabled { |
| | background: #ccc; |
| | cursor: not-allowed; |
| | transform: none; |
| | } |
| | |
| | .btn-next { |
| | background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%); |
| | color: white; |
| | } |
| | |
| | .btn-next:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 6px 20px rgba(254, 202, 87, 0.4); |
| | } |
| | |
| | .feedback { |
| | text-align: center; |
| | margin-top: 15px; |
| | font-size: 1.2em; |
| | font-weight: bold; |
| | min-height: 30px; |
| | } |
| | |
| | .feedback.correct { |
| | color: #51cf66; |
| | } |
| | |
| | .feedback.incorrect { |
| | color: #ff6b6b; |
| | } |
| | |
| | .loading { |
| | text-align: center; |
| | padding: 20px; |
| | font-size: 1.2em; |
| | color: #667eea; |
| | } |
| | |
| | .explosion { |
| | position: absolute; |
| | font-size: 100px; |
| | animation: explode 0.5s ease-out; |
| | } |
| | |
| | @keyframes explode { |
| | 0% { |
| | transform: scale(0); |
| | opacity: 1; |
| | } |
| | 100% { |
| | transform: scale(2); |
| | opacity: 0; |
| | } |
| | } |
| | |
| | @keyframes shoot { |
| | 0% { |
| | bottom: 80px; |
| | opacity: 1; |
| | } |
| | 100% { |
| | bottom: 400px; |
| | opacity: 0; |
| | } |
| | } |
| | |
| | @keyframes recoil { |
| | 0%, 100% { transform: translateX(-50%) translateY(0); } |
| | 50% { transform: translateX(-50%) translateY(10px); } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="game-container"> |
| | <div class="header"> |
| | <h1>🎯 English Shooting Game</h1> |
| | </div> |
| | |
| | <div class="score-board"> |
| | <div class="score-item"> |
| | <div class="label">Điểm</div> |
| | <div class="value" id="score">0</div> |
| | </div> |
| | <div class="score-item"> |
| | <div class="label">Đúng</div> |
| | <div class="value" id="correct">0</div> |
| | </div> |
| | <div class="score-item"> |
| | <div class="label">Sai</div> |
| | <div class="value" id="incorrect">0</div> |
| | </div> |
| | </div> |
| | |
| | <div class="game-area" id="gameArea"> |
| | <div class="shooter">🔫</div> |
| | <div class="target">🎯</div> |
| | </div> |
| | |
| | <div class="question-section" id="questionSection"> |
| | <div class="loading">Đang tải câu hỏi...</div> |
| | </div> |
| | |
| | <div class="feedback" id="feedback"></div> |
| | </div> |
| | |
| | <script> |
| | let score = 0; |
| | let correctCount = 0; |
| | let incorrectCount = 0; |
| | let currentAnswer = ''; |
| | let isAnswered = false; |
| | |
| | async function generateQuestion() { |
| | const questionSection = document.getElementById('questionSection'); |
| | questionSection.innerHTML = '<div class="loading">Đang tải câu hỏi...</div>'; |
| | document.getElementById('feedback').textContent = ''; |
| | isAnswered = false; |
| | |
| | try { |
| | const response = await fetch('/api/question'); |
| | const data = await response.json(); |
| | |
| | if (data.error) { |
| | throw new Error(data.error); |
| | } |
| | |
| | currentAnswer = data.answer.toLowerCase(); |
| | |
| | questionSection.innerHTML = ` |
| | <div class="question-text">${data.sentence}</div> |
| | <input type="text" class="answer-input" id="answerInput" placeholder="Nhập từ vào đây..."> |
| | <div class="button-group"> |
| | <button class="btn btn-shoot" onclick="checkAndShoot()">🔫 Bắn!</button> |
| | <button class="btn btn-next" onclick="generateQuestion()">⏭️ Câu mới</button> |
| | </div> |
| | `; |
| | |
| | document.getElementById('answerInput').addEventListener('keypress', (e) => { |
| | if (e.key === 'Enter') checkAndShoot(); |
| | }); |
| | document.getElementById('answerInput').focus(); |
| | } catch (error) { |
| | console.error('Error:', error); |
| | questionSection.innerHTML = '<div class="loading">❌ Lỗi tải câu hỏi. Vui lòng thử lại!</div>'; |
| | setTimeout(generateQuestion, 2000); |
| | } |
| | } |
| | |
| | function checkAndShoot() { |
| | if (isAnswered) return; |
| | |
| | const input = document.getElementById('answerInput'); |
| | const userAnswer = input.value.trim().toLowerCase(); |
| | const feedback = document.getElementById('feedback'); |
| | |
| | if (!userAnswer) { |
| | feedback.textContent = '⚠️ Vui lòng nhập câu trả lời!'; |
| | feedback.className = 'feedback'; |
| | return; |
| | } |
| | |
| | isAnswered = true; |
| | const isCorrect = userAnswer === currentAnswer; |
| | |
| | if (isCorrect) { |
| | input.className = 'answer-input correct'; |
| | feedback.textContent = '✅ Chính xác! Bắn đạn!'; |
| | feedback.className = 'feedback correct'; |
| | score += 10; |
| | correctCount++; |
| | shootBullet(true); |
| | } else { |
| | input.className = 'answer-input incorrect'; |
| | feedback.textContent = `❌ Sai rồi! Đáp án đúng là: "${currentAnswer}"`; |
| | feedback.className = 'feedback incorrect'; |
| | incorrectCount++; |
| | shootBullet(false); |
| | } |
| | |
| | updateScoreboard(); |
| | input.disabled = true; |
| | } |
| | |
| | function shootBullet(hit) { |
| | const gameArea = document.getElementById('gameArea'); |
| | const shooter = gameArea.querySelector('.shooter'); |
| | |
| | shooter.style.animation = 'recoil 0.3s'; |
| | setTimeout(() => { |
| | shooter.style.animation = ''; |
| | }, 300); |
| | |
| | if (hit) { |
| | const bullet = document.createElement('div'); |
| | bullet.className = 'bullet'; |
| | gameArea.appendChild(bullet); |
| | |
| | bullet.style.animation = 'shoot 0.8s ease-out'; |
| | |
| | setTimeout(() => { |
| | const target = gameArea.querySelector('.target'); |
| | const explosion = document.createElement('div'); |
| | explosion.className = 'explosion'; |
| | explosion.textContent = '💥'; |
| | explosion.style.left = target.offsetLeft + 'px'; |
| | explosion.style.top = target.offsetTop + 'px'; |
| | gameArea.appendChild(explosion); |
| | |
| | setTimeout(() => { |
| | explosion.remove(); |
| | }, 500); |
| | |
| | bullet.remove(); |
| | }, 800); |
| | } |
| | } |
| | |
| | function updateScoreboard() { |
| | document.getElementById('score').textContent = score; |
| | document.getElementById('correct').textContent = correctCount; |
| | document.getElementById('incorrect').textContent = incorrectCount; |
| | } |
| | |
| | generateQuestion(); |
| | </script> |
| | </body> |
| | </html> |
| | """ |
| |
|
| | |
| | FALLBACK_QUESTIONS = [ |
| | {"sentence": "I ___ to school every day.", "answer": "go"}, |
| | {"sentence": "She ___ a book yesterday.", "answer": "read"}, |
| | {"sentence": "They are ___ soccer now.", "answer": "playing"}, |
| | {"sentence": "He ___ his homework last night.", "answer": "did"}, |
| | {"sentence": "We ___ going to the park tomorrow.", "answer": "are"}, |
| | {"sentence": "The cat ___ on the table.", "answer": "is"}, |
| | {"sentence": "I have ___ this movie before.", "answer": "seen"}, |
| | {"sentence": "She can ___ English very well.", "answer": "speak"}, |
| | {"sentence": "They ___ to Paris last year.", "answer": "went"}, |
| | {"sentence": "He ___ pizza for dinner.", "answer": "likes"}, |
| | ] |
| |
|
| | @app.route('/') |
| | def home(): |
| | return render_template_string(HTML_TEMPLATE) |
| |
|
| | @app.route('/api/question') |
| | def get_question(): |
| | try: |
| | |
| | if HF_TOKEN: |
| | client = InferenceClient(token=HF_TOKEN) |
| | |
| | prompt = """Create one English fill-in-the-blank question. Format: |
| | SENTENCE: [sentence with ONE ___ for blank] |
| | ANSWER: [correct word] |
| | |
| | Example: |
| | SENTENCE: I ___ to school every day. |
| | ANSWER: go |
| | |
| | Create a new question:""" |
| |
|
| | response = client.text_generation( |
| | prompt, |
| | model="mistralai/Mixtral-8x7B-Instruct-v0.1", |
| | max_new_tokens=100, |
| | temperature=0.9 |
| | ) |
| |
|
| | |
| | lines = response.strip().split('\n') |
| | sentence = "" |
| | answer = "" |
| | |
| | for line in lines: |
| | if line.startswith('SENTENCE:'): |
| | sentence = line.replace('SENTENCE:', '').strip() |
| | elif line.startswith('ANSWER:'): |
| | answer = line.replace('ANSWER:', '').strip() |
| | |
| | if sentence and answer and '___' in sentence: |
| | return jsonify({ |
| | 'sentence': sentence, |
| | 'answer': answer |
| | }) |
| | except Exception as e: |
| | print(f"AI generation failed: {e}") |
| | |
| | |
| | question = random.choice(FALLBACK_QUESTIONS) |
| | return jsonify(question) |
| |
|
| | if __name__ == '__main__': |
| | port = int(os.environ.get('PORT', 7860)) |
| | app.run(host='0.0.0.0', port=port, debug=False) |
