init

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+COPY . /app
+
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+
+EXPOSE 7860
+ENV PORT=7860
+
+CMD ["python", "app.py"]

README.md

@@ -9,3 +9,34 @@ short_description: Semantic Hunter Game
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Semantic Hunter (词猎人)
+
+A semantic word guessing game using Hugging Face Transformers. The game chooses a random word, and players try to guess it based on semantic similarity.
+
+## How to Play
+
+1. The game selects a random word from the word list
+2. You try to guess the word
+3. After each guess, you get a semantic similarity percentage
+4. Try to find the secret word with the fewest guesses!
+
+## Deploy to Hugging Face Spaces
+
+This application is configured to run on Hugging Face Spaces with Docker:
+
+1. Create a new Space on [Hugging Face Spaces](https://huggingface.co/spaces)
+2. Select Docker as the SDK
+3. Link your GitHub repository or upload files directly
+4. The Space will automatically build and deploy your app
+
+## Development
+
+To run the application locally:
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+The application will be available at http://localhost:7860

app.py

@@ -0,0 +1,98 @@
+from flask import Flask, render_template, request, jsonify
+import random
+from sentence_transformers import SentenceTransformer, util
+import torch
+import os
+
+app = Flask(__name__)
+
+# Load model
+model = SentenceTransformer('sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2')
+
+# Load word pool
+with open("words.txt", "r", encoding="utf-8") as f:
+    word_pool = [line.strip() for line in f if line.strip()]
+
+# Game state
+game_state = {
+    "secret_word": "",
+    "secret_vec": None,
+    "guesses": [],
+    "latest_guess": None
+}
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/new-game', methods=['POST'])
+def new_game():
+    global game_state
+    # Reset game state
+    game_state["secret_word"] = random.choice(word_pool)
+    game_state["secret_vec"] = model.encode(game_state["secret_word"], convert_to_tensor=True)
+    game_state["guesses"] = []
+    game_state["latest_guess"] = None
+    
+    return jsonify({"status": "success", "message": "New game started"})
+
+@app.route('/guess', methods=['POST'])
+def guess():
+    data = request.json
+    guess_word = data.get('guess', '').strip()
+    
+    if not guess_word:
+        return jsonify({"status": "error", "message": "No guess provided"})
+    
+    # Encode the guess
+    guess_vec = model.encode(guess_word, convert_to_tensor=True)
+    
+    # Calculate similarity
+    similarity = util.pytorch_cos_sim(game_state["secret_vec"], guess_vec)
+    percent = round(float(similarity[0][0]) * 100, 2)
+    
+    # Check if correct
+    is_correct = (game_state["secret_word"] == guess_word)
+    
+    # Update latest guess
+    game_state["latest_guess"] = guess_word
+    
+    # Store guess
+    game_state["guesses"].append({
+        "word": guess_word,
+        "similarity": percent,
+        "is_correct": is_correct,
+        "is_latest": True
+    })
+    
+    # Update previous guesses to not be latest
+    for i in range(len(game_state["guesses"]) - 1):
+        if "is_latest" in game_state["guesses"][i]:
+            game_state["guesses"][i]["is_latest"] = False
+    
+    # Sort guesses by similarity (descending)
+    sorted_guesses = sorted(game_state["guesses"], key=lambda x: x["similarity"], reverse=True)
+    
+    response = {
+        "status": "success",
+        "similarity": percent,
+        "is_correct": is_correct,
+        "guesses": game_state["guesses"],
+        "latest_guess": guess_word
+    }
+    
+    if is_correct:
+        response["message"] = "猜对啦！"
+    
+    return jsonify(response)
+
+@app.route('/give-up', methods=['POST'])
+def give_up():
+    return jsonify({
+        "status": "success",
+        "secret_word": game_state["secret_word"]
+    })
+
+if __name__ == '__main__':
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host='0.0.0.0', port=port) 

requirements.txt

@@ -0,0 +1,4 @@
+flask
+sentence-transformers
+numpy
+

space.yaml

@@ -0,0 +1,9 @@
+---
+title: Semantic Hunter
+emoji: 🔍
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+--- 

static/css/style.css

@@ -0,0 +1,305 @@
+/* Main Styles for Semantic Hunter */
+:root {
+    --primary-color: #0f172a;
+    --secondary-color: #334155;
+    --highlight-color: #f59e0b;
+    --text-color: #f8fafc;
+    --error-color: #ef4444;
+    --success-color: #22c55e;
+    --input-bg: #1e293b;
+    --card-bg: #1e293b;
+    --separator-color: rgba(255, 255, 255, 0.1);
+    --yellow-bright: #ffee00;
+    --yellow-medium: #ffd700;
+    --orange-color: #ff9900;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+h1 {
+    font-size: 2.5rem;
+    color: var(--highlight-color);
+}
+
+.subtitle {
+    font-size: 0.7em;
+    opacity: 0.8;
+}
+
+.controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.btn {
+    padding: 0.6rem 1.2rem;
+    border: none;
+    border-radius: 0.5rem;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
+}
+
+.btn-primary {
+    background-color: var(--highlight-color);
+    color: var(--primary-color);
+}
+
+.btn-danger {
+    background-color: var(--error-color);
+}
+
+.game-area {
+    margin-bottom: 2rem;
+    background-color: var(--card-bg);
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+.input-area {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+#guess-input {
+    flex: 1;
+    padding: 0.8rem 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    background-color: var(--input-bg);
+    color: var(--text-color);
+    font-size: 1.1rem;
+}
+
+#guess-input:focus {
+    outline: 2px solid var(--highlight-color);
+}
+
+.message-area {
+    text-align: center;
+    min-height: 1.5rem;
+}
+
+.history-area {
+    background-color: var(--card-bg);
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+h3 {
+    margin-bottom: 1.5rem;
+    text-align: center;
+    color: var(--highlight-color);
+    display: none; /* Hide the Guess History heading */
+}
+
+.guesses-list {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Latest guess container styles */
+.latest-guess-container {
+    margin-bottom: 0.5rem;
+}
+
+/* Latest guess now has a background */
+.latest-guess {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.8rem 1rem;
+    border-radius: 0.5rem;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+}
+
+/* Separator line */
+.guess-separator {
+    height: 1px;
+    background-color: var(--separator-color);
+    margin: 0.5rem 0 1rem 0;
+    width: 100%;
+}
+
+/* Regular history containers */
+.history-guesses-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    margin-bottom: 1.5rem;
+}
+
+/* History items now have no background */
+.guess-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0rem 1rem;
+    border-radius: 0.5rem;
+    background-color: transparent;
+    color: #ddd;
+    transition: all 0.3s ease;
+}
+
+/* Special style for 100% match */
+.perfect-match {
+    background-color: rgba(34, 197, 94, 0.2);
+    border-radius: 0.5rem;
+    border: 1px solid var(--success-color);
+}
+
+.guess-word {
+    font-weight: bold;
+}
+
+/* Base similarity style */
+.guess-similarity {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1.25rem;
+    font-weight: bold;
+    letter-spacing: 0.05em;
+}
+
+/* 1. 0-50%: Default style */
+.similarity-low {
+    color: #aaa;
+}
+
+/* 2. 50-70%: Orange */
+.similarity-medium {
+    color: var(--orange-color);
+}
+
+/* 3. 70-80%: Yellow */
+.similarity-high {
+    color: var(--yellow-medium);
+}
+
+/* 4. 80-90%: Bright yellow with glow */
+.similarity-very-high {
+    color: var(--yellow-bright);
+    text-shadow: 0 0 5px var(--yellow-bright);
+}
+
+/* 5. 90-99%: Orbitron font + bright yellow with glow */
+.similarity-super-high {
+    font-family: 'Orbitron', 'Courier New', Courier, monospace;
+    color: var(--yellow-bright);
+    text-shadow: 0 0 8px var(--yellow-bright);
+}
+
+/* 6. 100%: Green with special container */
+.similarity-perfect {
+    font-family: 'Orbitron', 'Courier New', Courier, monospace;
+    color: var(--success-color);
+    text-shadow: 0 0 10px var(--success-color);
+}
+
+/* Pagination styles */
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+    gap: 1.5rem;
+}
+
+.pagination-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border: none;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.pagination-btn:hover:not(:disabled) {
+    background-color: var(--highlight-color);
+    color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.page-indicator {
+    font-family: monospace;
+    font-size: 1.1rem;
+    color: var(--text-color);
+    opacity: 0.8;
+}
+
+footer {
+    margin-top: 3rem;
+    text-align: center;
+    opacity: 0.7;
+    font-size: 0.9rem;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .controls {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .game-area, .history-area {
+        padding: 1.5rem 1rem;
+    }
+} 

static/js/app.js

@@ -0,0 +1,360 @@
+// Semantic Hunter Game Frontend
+
+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const guessInput = document.getElementById('guess-input');
+    const guessBtn = document.getElementById('guess-btn');
+    const messageArea = document.getElementById('message-area');
+    const guessesList = document.getElementById('guesses-list');
+    const newGameBtn = document.getElementById('new-game-btn');
+    const giveUpBtn = document.getElementById('give-up-btn');
+
+    // Game state
+    let gameActive = false;
+    let latestGuessId = null;
+    let allGuesses = [];
+    let currentPage = 1;
+    const itemsPerPage = 7;
+
+    // Initialize game
+    initGame();
+
+    // Event listeners
+    guessBtn.addEventListener('click', submitGuess);
+    guessInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') submitGuess();
+    });
+    newGameBtn.addEventListener('click', initGame);
+    giveUpBtn.addEventListener('click', giveUp);
+
+    // Functions
+    function initGame() {
+        fetch('/new-game', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                gameActive = true;
+                guessesList.innerHTML = '';
+                messageArea.innerHTML = '';
+                guessInput.value = '';
+                guessInput.focus();
+                allGuesses = [];
+                currentPage = 1;
+                latestGuessId = null;
+                messageArea.innerHTML = `<p class="message">游戏开始! 尝试猜测秘密词语!</p>`;
+            } else {
+                showError(data.message || '初始化游戏时出错');
+            }
+        })
+        .catch(err => {
+            showError('无法连接到服务器');
+            console.error(err);
+        });
+    }
+
+    function submitGuess() {
+        const guess = guessInput.value.trim();
+        if (!guess) return;
+        if (!gameActive) {
+            showError('游戏未开始，请点击新游戏');
+            return;
+        }
+
+        // Check if this word has already been guessed, but just proceed silently
+        const alreadyGuessed = allGuesses.some(g => g.word === guess) || 
+                              (latestGuessId && latestGuessId === guess);
+
+        // Always send the request to get similarity, but we'll handle duplicates when updating the UI
+        fetch('/guess', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ guess })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                // If the word was already guessed, just update the latest guess display
+                // without adding a duplicate to the history
+                if (alreadyGuessed) {
+                    // Find this guess in our existing data to get its similarity
+                    const existingGuess = allGuesses.find(g => g.word === guess);
+                    if (existingGuess) {
+                        // Show just the latest guess with this word
+                        updateLatestGuess({
+                            word: guess,
+                            similarity: existingGuess.similarity,
+                            is_correct: existingGuess.is_correct
+                        });
+                        
+                        // Show similarity message
+                        showMessage(`相似度: ${existingGuess.similarity}%`);
+                    }
+                } else {
+                    // Normal flow for new guesses
+                    updateGuessList(data.guesses, guess);
+                    
+                    if (data.is_correct) {
+                        gameActive = false;
+                        showSuccess(`恭喜你猜对了! 秘密词语是: ${guess}`);
+                    } else {
+                        showMessage(`相似度: ${data.similarity}%`);
+                    }
+                }
+                
+                // Always update latest guess ID and clear input
+                latestGuessId = guess;
+                guessInput.value = '';
+                guessInput.focus();
+            } else {
+                showError(data.message || '提交猜测时出错');
+            }
+        })
+        .catch(err => {
+            showError('无法连接到服务器');
+            console.error(err);
+        });
+    }
+
+    function giveUp() {
+        if (!gameActive) {
+            showError('游戏未开始，请点击新游戏');
+            return;
+        }
+
+        fetch('/give-up', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                gameActive = false;
+                showError(`你放弃了! 秘密词语是: ${data.secret_word}`);
+            } else {
+                showError(data.message || '放弃游戏时出错');
+            }
+        })
+        .catch(err => {
+            showError('无法连接到服务器');
+            console.error(err);
+        });
+    }
+
+    function updateGuessList(guesses, latestGuess) {
+        guessesList.innerHTML = '';
+        
+        // Create a copy of the guesses array to avoid modifying the original
+        const sortedGuesses = [...guesses];
+        
+        // Find the latest guess and remove it from the sorted array
+        const latestGuessIndex = sortedGuesses.findIndex(g => g.word === latestGuess);
+        let latestGuessItem = null;
+        if (latestGuessIndex !== -1) {
+            latestGuessItem = sortedGuesses.splice(latestGuessIndex, 1)[0];
+        }
+        
+        // Sort the remaining guesses by similarity (descending)
+        sortedGuesses.sort((a, b) => b.similarity - a.similarity);
+        
+        // Update our allGuesses array for pagination
+        allGuesses = sortedGuesses;
+        
+        // If we have a latest guess, add it to the top of the list
+        if (latestGuessItem) {
+            // Create a container for the latest guess
+            const latestGuessContainer = document.createElement('div');
+            latestGuessContainer.className = 'latest-guess-container';
+            
+            // Add the latest guess with a different style
+            const latestGuessElement = document.createElement('div');
+            latestGuessElement.className = 'latest-guess';
+            
+            // Add perfect-match class if 100% similarity
+            if (latestGuessItem.similarity === 100) {
+                latestGuessElement.classList.add('perfect-match');
+            }
+            
+            // Determine similarity color class
+            let similarityClass = getSimilarityClass(latestGuessItem.similarity);
+            
+            latestGuessElement.innerHTML = `
+                <span class="guess-word">${latestGuessItem.word}</span>
+                <span class="guess-similarity ${similarityClass}">${latestGuessItem.similarity}%</span>
+            `;
+            
+            latestGuessContainer.appendChild(latestGuessElement);
+            
+            // Add separator line
+            const separator = document.createElement('div');
+            separator.className = 'guess-separator';
+            latestGuessContainer.appendChild(separator);
+            
+            guessesList.appendChild(latestGuessContainer);
+        }
+        
+        // Create a container for history guesses
+        const historyContainer = document.createElement('div');
+        historyContainer.className = 'history-guesses-container';
+        
+        // Get current page of items
+        const startIndex = (currentPage - 1) * itemsPerPage;
+        const endIndex = Math.min(startIndex + itemsPerPage, allGuesses.length);
+        const currentPageItems = allGuesses.slice(startIndex, endIndex);
+        
+        // Add the current page of guesses
+        currentPageItems.forEach(guess => {
+            const guessItem = document.createElement('div');
+            guessItem.className = 'guess-item';
+            
+            // Add perfect-match class if 100% similarity
+            if (guess.similarity === 100) {
+                guessItem.classList.add('perfect-match');
+            }
+            
+            // Determine similarity color class
+            let similarityClass = getSimilarityClass(guess.similarity);
+            
+            guessItem.innerHTML = `
+                <span class="guess-word">${guess.word}</span>
+                <span class="guess-similarity ${similarityClass}">${guess.similarity}%</span>
+            `;
+            
+            historyContainer.appendChild(guessItem);
+        });
+        
+        guessesList.appendChild(historyContainer);
+        
+        // Add pagination if we have more than one page
+        if (allGuesses.length > itemsPerPage) {
+            addPagination();
+        }
+    }
+    
+    function addPagination() {
+        const totalPages = Math.ceil(allGuesses.length / itemsPerPage);
+        
+        // Create pagination container
+        const paginationContainer = document.createElement('div');
+        paginationContainer.className = 'pagination-container';
+        
+        // Previous button
+        const prevBtn = document.createElement('button');
+        prevBtn.className = 'pagination-btn prev-btn';
+        prevBtn.innerHTML = `<i class="fas fa-chevron-left"></i>`;
+        prevBtn.disabled = currentPage === 1;
+        prevBtn.addEventListener('click', () => {
+            if (currentPage > 1) {
+                currentPage--;
+                updateGuessList(allGuesses.concat([]), ''); // Pass empty string for latestGuess to avoid highlighting
+            }
+        });
+        
+        // Page indicator
+        const pageIndicator = document.createElement('div');
+        pageIndicator.className = 'page-indicator';
+        pageIndicator.textContent = `${currentPage} / ${totalPages}`;
+        
+        // Next button
+        const nextBtn = document.createElement('button');
+        nextBtn.className = 'pagination-btn next-btn';
+        nextBtn.innerHTML = `<i class="fas fa-chevron-right"></i>`;
+        nextBtn.disabled = currentPage === totalPages;
+        nextBtn.addEventListener('click', () => {
+            if (currentPage < totalPages) {
+                currentPage++;
+                updateGuessList(allGuesses.concat([]), ''); // Pass empty string for latestGuess to avoid highlighting
+            }
+        });
+        
+        // Append buttons to container
+        paginationContainer.appendChild(prevBtn);
+        paginationContainer.appendChild(pageIndicator);
+        paginationContainer.appendChild(nextBtn);
+        
+        // Add to the DOM
+        guessesList.appendChild(paginationContainer);
+    }
+
+    function showMessage(msg) {
+        messageArea.innerHTML = `<p class="message">${msg}</p>`;
+    }
+
+    function showError(msg) {
+        messageArea.innerHTML = `<p class="message error">${msg}</p>`;
+    }
+
+    function showSuccess(msg) {
+        messageArea.innerHTML = `<p class="message success">${msg}</p>`;
+    }
+
+    // Function to determine similarity class based on percentage
+    function getSimilarityClass(similarity) {
+        if (similarity === 100) {
+            return 'similarity-perfect';
+        } else if (similarity >= 90) {
+            return 'similarity-super-high';
+        } else if (similarity >= 80) {
+            return 'similarity-very-high';
+        } else if (similarity >= 70) {
+            return 'similarity-high';
+        } else if (similarity >= 50) {
+            return 'similarity-medium';
+        } else {
+            return 'similarity-low';
+        }
+    }
+
+    // Function to just update the latest guess display without changing history
+    function updateLatestGuess(guessItem) {
+        // Remove existing latest guess container if it exists
+        const existingContainer = document.querySelector('.latest-guess-container');
+        if (existingContainer) {
+            existingContainer.remove();
+        }
+        
+        // Create a new container for the latest guess
+        const latestGuessContainer = document.createElement('div');
+        latestGuessContainer.className = 'latest-guess-container';
+        
+        // Add the latest guess with its style
+        const latestGuessElement = document.createElement('div');
+        latestGuessElement.className = 'latest-guess';
+        
+        // Add perfect-match class if 100% similarity
+        if (guessItem.similarity === 100) {
+            latestGuessElement.classList.add('perfect-match');
+        }
+        
+        // Determine similarity color class
+        let similarityClass = getSimilarityClass(guessItem.similarity);
+        
+        latestGuessElement.innerHTML = `
+            <span class="guess-word">${guessItem.word}</span>
+            <span class="guess-similarity ${similarityClass}">${guessItem.similarity}%</span>
+        `;
+        
+        latestGuessContainer.appendChild(latestGuessElement);
+        
+        // Add separator line
+        const separator = document.createElement('div');
+        separator.className = 'guess-separator';
+        latestGuessContainer.appendChild(separator);
+        
+        // Add to DOM before the history container
+        const historyContainer = document.querySelector('.history-guesses-container');
+        if (historyContainer) {
+            guessesList.insertBefore(latestGuessContainer, historyContainer);
+        } else {
+            guessesList.appendChild(latestGuessContainer);
+        }
+    }
+}); 

templates/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>词猎人 | Semantic Hunter</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>词猎人 <span class="subtitle">| Semantic Hunter</span></h1>
+            <div class="controls">
+                <button id="new-game-btn" class="btn"><i class="fas fa-sync-alt"></i> 新游戏</button>
+                <button id="give-up-btn" class="btn btn-danger"><i class="fas fa-flag"></i> 放弃</button>
+            </div>
+        </header>
+
+        <main>
+            <div class="game-area">
+                <h2>Can you guess the secret word?</h2>
+                <div class="input-area">
+                    <input type="text" id="guess-input" placeholder="Can you guess the word?" autofocus>
+                    <button id="guess-btn" class="btn btn-primary">
+                        <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                <div id="message-area" class="message-area"></div>
+            </div>
+
+            <div class="history-area">
+                <div id="guesses-list" class="guesses-list">
+                    <!-- Guesses will be added here dynamically -->
+                </div>
+            </div>
+        </main>
+
+        <footer>
+            <p>词猎人 | Semantic Hunter &copy; 2023</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html> 

words.txt

@@ -0,0 +1,510 @@
+草莓
+吊灯
+番茄酱
+牙膏
+彩虹
+双层床
+桌游
+蜂窝
+柠檬
+威化饼干
+气泡
+哨子
+雪球
+耳机
+烟花
+冰屋
+香蕉皮
+割草机
+纸杯蛋糕
+睡袋
+脑
+猫
+操场
+奇异果
+南瓜
+龙虾
+机器人
+棒棒糖
+沙堡
+城堡
+磁铁
+拖鞋
+链锯
+扩音器
+马戏团
+美人鱼
+电脑
+小型货车
+婴儿床
+蝌蚪
+龙
+音乐
+帐篷
+哑铃
+望远镜
+黄鳝
+护士
+火车
+猫头鹰
+三轮车
+旗帜
+芭蕾舞
+钢琴
+垃圾
+公园
+海盗
+滑雪
+棒球
+女王
+高尔夫球
+热狗
+盐
+iPad
+青蛙
+床垫
+蛋糕
+电池
+牛仔
+老师
+蝙蝠侠
+海绵宝宝
+超人
+蜘蛛侠
+吸血鬼
+生日
+安全带
+烤鸭
+考拉
+面具
+香水
+照片
+wifi
+满月
+僵尸
+游戏
+胡萝卜
+洋葱
+书
+沙发
+电话
+鼻子
+手
+斑马
+蚊子
+蜜蜂
+花
+潜艇
+棋
+生日蛋糕
+自行车
+茶壶
+膝盖
+菠萝
+钱
+水池
+坚果
+苹果
+香蕉
+大象
+门
+天使
+眼球
+婴儿
+胡须
+飞碟
+回收
+圣经
+长颈鹿
+比基尼
+眼镜
+雪花
+高跟鞋
+楼梯
+桶
+蛋卷冰淇淋
+海星
+熊蜂
+蝴蝶
+瓢虫
+太阳
+相机
+灯
+胎
+狮子
+吐司
+教会
+邮箱
+牙刷
+蜡笔
+夜晚
+海豚
+卡车
+蛋
+奥运会
+排球
+埃菲尔铁塔
+花生
+吻
+口红
+雨
+公共汽车
+车祸
+棒糖
+电锯
+滚雪球
+指甲
+锤子
+马戏团帐篷
+自由女神像
+大本钟
+圆锥形帐篷
+壶铃
+北极
+南极
+鳗鱼
+摩天轮
+原子
+奶嘴
+短裙
+垃圾邮件
+吉他
+后座
+高脚椅
+床
+扇子
+钟
+椅子
+书架
+图片
+壁橱
+衣柜
+枕头
+毯子
+垃圾桶
+电视
+洗手间
+洗衣机
+烘干机
+淋浴
+浴缸
+卫生纸
+剃刀
+毛巾
+钩子
+洗发水
+桌子
+长椅
+花瓶
+火炉
+冰箱
+电饭锅
+洗碗机
+时间表
+日历
+梳子
+衣服
+杯子
+窗帘
+罐
+屏幕
+床单
+手帕
+手提包
+夹子
+剪刀
+刀
+叉
+筷子
+瓶子
+老鼠
+金属丝
+笔记本电脑
+钥匙
+充电器
+USB
+处理
+别针
+抽屉
+手电筒
+红绿灯
+药丸
+药品
+歌曲
+弦
+鼓
+长笛
+喇叭
+大提琴
+竖琴
+戒指
+钻石
+树叶
+地球
+阴影
+嘴唇
+罗盘
+屁
+鱼
+钓竿
+医院
+酒店
+工厂
+摩托车
+车
+监狱
+囚犯
+草
+锄
+镐
+斧头
+剑
+衬衫
+裤子
+内裤
+地平线
+垂直的
+心
+钱包
+西瓜
+香肠
+皮卡丘
+土豆
+小麦
+可可
+手套
+飞机
+盆地
+羊
+糖果
+腿
+肉
+米
+键盘
+黑色的
+馅饼
+河
+裙子
+猪
+啤酒
+岩石
+牙齿
+嘴
+眼睛
+耳朵
+骨头
+线
+头发
+飞
+游泳
+射击
+地图
+拥抱
+铅笔
+水
+可乐
+烤箱
+船
+手指
+卡片
+纸
+学校
+沙拉
+面包
+花朵
+窗户
+树
+铁
+蛇
+狗
+鸡
+咖啡
+牛奶
+垃圾箱
+摇篮
+消防队员
+警察
+医生
+司机
+银行
+美国
+中国
+日本
+德国
+英国
+汗
+鞋
+T恤
+叶子
+枪
+步枪
+霰弹枪
+壳
+铲
+颅骨
+蘑菇
+橙子
+氧
+雷达
+收音机
+嗓音
+黑洞
+炒鸡蛋
+熏肉
+暴风雪
+海啸
+跳绳
+袋鼠
+队长
+妖精
+日食
+光
+空间
+听诊器
+游轮
+战列舰
+喷射
+机械
+牙医
+鹳
+舞蹈
+妈妈
+爸爸
+Facebook
+推特
+连裤袜
+游客
+导游
+平坦的
+纸盘子
+框架
+无线上网
+狼人
+向导
+巫婆
+朝圣
+美洲原住民
+飞行员
+鹦鹉
+视频游戏
+哑剧
+冰雹
+密码
+激光
+神话
+素食主义者
+丛林
+农民
+镜子
+下载
+滑雪镜
+尖叫
+说谎
+橡皮
+闪光
+蚱蜢
+理发师
+维他命
+服务员
+伐木工人
+救生员
+矿工
+图书管理员
+法官
+宇航员
+渔夫
+贝克
+栅栏
+狗窝
+微波
+动物园
+公交车站
+火车站
+水塔
+桥
+腰带
+领结
+连帽衫
+手表
+制服
+踝
+前额
+牙龈
+食指
+颚
+指关节
+鼻孔
+耳垂
+瞳孔
+虹膜
+订书机
+薪水
+计算器
+蜘蛛
+果冻
+海蜇
+冲浪板
+松鼠
+独角兽
+吊床
+金字塔
+木乃伊
+鸡皮疙瘩
+鸭嘴兽
+金鱼
+蜘蛛网
+海藻
+齿
+虫
+家具
+蜡烛
+家
+镘
+发胶
+围巾
+时光机器
+忍者
+投手
+鬼
+呼啦圈
+灭虫器
+假发
+饼形图
+水枪
+白天
+夜间
+长城
+吸血蝙蝠
+X射线
+打哈欠
+无形的
+吸尘器
+血
+刺
+天线
+小行星
+墙纸
+压力
+假期
+欢呼
+书呆子
+人工智能
+研究
+免疫系统
+仙女
+马蜂窝
+比萨斜塔
+北极光
+灰尘
+打嗝
+鼻涕泡
+青春痘
+水痘
+兔子
+蚂蚁
+花瓣
+海洋
+碗
+水果
+马
+直升机