| 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) |
