Hugging Face's logo

Spaces:
ChingCL
/
Chinese_Idiom_Learning_Game
Sleeping

App Files Community
ChingCL commited on
Commit
ddfb306
·
verified ·
1 Parent(s): bcc8baf

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +102 -87
app.py CHANGED
@@ -1,95 +1,110 @@
1
- import React, { useState } from 'react';
2
 
3
- // 簡化的成語資料庫
4
- const idiomDatabase = [
5
- { mainIdiom: '急如星火', synonyms: ['迫在眉睫', '刻不容緩'], meaning: '形容事情非常緊急' },
6
- { mainIdiom: '一葉知秋', synonyms: ['見微知著', '月暈而風'], meaning: '從小徵兆可以預見未來的發展' },
7
- { mainIdiom: '一丘之貉', synonyms: ['沆瀣一氣', '狐群狗黨'], meaning: '形容品性相同的壞人' }
8
- ];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
- function ChineseIdiomGame() {
11
- // 基本狀態
12
- const [questionIndex, setQuestionIndex] = useState(0);
13
- const [score, setScore] = useState(0);
14
- const [selectedAnswers, setSelectedAnswers] = useState([]);
15
 
16
- // 當前題目
17
- const currentQuestion = idiomDatabase[questionIndex];
18
 
19
- // 處理答案選擇
20
- const handleSelect = (answer) => {
21
- if (selectedAnswers.includes(answer)) return;
 
 
 
 
 
 
 
 
 
 
 
 
22
 
23
- if (currentQuestion.synonyms.includes(answer)) {
24
- const newSelected = [...selectedAnswers, answer];
25
- setSelectedAnswers(newSelected);
 
 
 
 
26
 
27
- if (newSelected.length === 2) {
28
- const newScore = score + 10;
29
- setScore(newScore);
30
-
31
- // 延遲後切換到下一題
32
- setTimeout(() => {
33
- setQuestionIndex((questionIndex + 1) % idiomDatabase.length);
34
- setSelectedAnswers([]);
35
- }, 1000);
36
- }
37
- }
38
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
 
40
- // 生成選項
41
- const options = [
42
- ...currentQuestion.synonyms,
43
- '望穿秋水',
44
- '守株待兔',
45
- '揮金如土',
46
- '一暴十寒'
47
- ].sort(() => Math.random() - 0.5);
48
 
49
- return (
50
- <div style={{ padding: '20px' }}>
51
- <h1 style={{ textAlign: 'center', marginBottom: '20px' }}>成語對對碰</h1>
52
-
53
- <div style={{
54
- backgroundColor: '#f0f0f0',
55
- padding: '20px',
56
- borderRadius: '8px',
57
- marginBottom: '20px'
58
- }}>
59
- <h2 style={{ textAlign: 'center' }}>{currentQuestion.mainIdiom}</h2>
60
- <p style={{ textAlign: 'center' }}>{currentQuestion.meaning}</p>
61
- </div>
62
-
63
- <div style={{
64
- display: 'grid',
65
- gridTemplateColumns: 'repeat(2, 1fr)',
66
- gap: '10px'
67
- }}>
68
- {options.map((option, index) => (
69
- <button
70
- key={index}
71
- onClick={() => handleSelect(option)}
72
- style={{
73
- padding: '10px',
74
- backgroundColor: selectedAnswers.includes(option) ? '#4CAF50' : 'white',
75
- color: selectedAnswers.includes(option) ? 'white' : 'black',
76
- border: '1px solid #ddd',
77
- borderRadius: '4px'
78
- }}
79
- >
80
- {option}
81
- </button>
82
- ))}
83
- </div>
84
-
85
- <div style={{
86
- marginTop: '20px',
87
- textAlign: 'center'
88
- }}>
89
- 分數: {score}
90
- </div>
91
- </div>
92
- );
93
- }
94
-
95
- export default ChineseIdiomGame;
 
1
+ import gradio as gr
2
 
3
+ # 創建 Gradio 介面
4
+ def create_interface():
5
+ with gr.Blocks() as demo:
6
+ gr.HTML("""
7
+ <!DOCTYPE html>
8
+ <html>
9
+ <head>
10
+ <title>成語對對碰</title>
11
+ <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
12
+ <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
13
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
14
+ </head>
15
+ <body>
16
+ <div id="root"></div>
17
+ <script type="text/babel">
18
+ // React 組件
19
+ const idiomDatabase = [
20
+ { mainIdiom: '急如星火', synonyms: ['迫在眉睫', '刻不容緩'], meaning: '形容事情非常緊急' },
21
+ { mainIdiom: '一葉知秋', synonyms: ['見微知著', '月暈而風'], meaning: '從小徵兆可以預見未來的發展' },
22
+ { mainIdiom: '一丘之貉', synonyms: ['沆瀣一氣', '狐群狗黨'], meaning: '形容品性相同的壞人' }
23
+ ];
24
 
25
+ function ChineseIdiomGame() {
26
+ const [questionIndex, setQuestionIndex] = React.useState(0);
27
+ const [score, setScore] = React.useState(0);
28
+ const [selectedAnswers, setSelectedAnswers] = React.useState([]);
 
29
 
30
+ const currentQuestion = idiomDatabase[questionIndex];
 
31
 
32
+ const handleSelect = (answer) => {
33
+ if (selectedAnswers.includes(answer)) return;
34
+ if (currentQuestion.synonyms.includes(answer)) {
35
+ const newSelected = [...selectedAnswers, answer];
36
+ setSelectedAnswers(newSelected);
37
+ if (newSelected.length === 2) {
38
+ const newScore = score + 10;
39
+ setScore(newScore);
40
+ setTimeout(() => {
41
+ setQuestionIndex((questionIndex + 1) % idiomDatabase.length);
42
+ setSelectedAnswers([]);
43
+ }, 1000);
44
+ }
45
+ }
46
+ };
47
 
48
+ const options = [
49
+ ...currentQuestion.synonyms,
50
+ '望穿秋水',
51
+ '守株待兔',
52
+ '揮金如土',
53
+ '一暴十寒'
54
+ ].sort(() => Math.random() - 0.5);
55
 
56
+ return (
57
+ <div style={{ padding: '20px' }}>
58
+ <h1 style={{ textAlign: 'center', marginBottom: '20px' }}>成語對對碰</h1>
59
+ <div style={{
60
+ backgroundColor: '#f0f0f0',
61
+ padding: '20px',
62
+ borderRadius: '8px',
63
+ marginBottom: '20px'
64
+ }}>
65
+ <h2 style={{ textAlign: 'center' }}>{currentQuestion.mainIdiom}</h2>
66
+ <p style={{ textAlign: 'center' }}>{currentQuestion.meaning}</p>
67
+ </div>
68
+ <div style={{
69
+ display: 'grid',
70
+ gridTemplateColumns: 'repeat(2, 1fr)',
71
+ gap: '10px'
72
+ }}>
73
+ {options.map((option, index) => (
74
+ <button
75
+ key={index}
76
+ onClick={() => handleSelect(option)}
77
+ style={{
78
+ padding: '10px',
79
+ backgroundColor: selectedAnswers.includes(option) ? '#4CAF50' : 'white',
80
+ color: selectedAnswers.includes(option) ? 'white' : 'black',
81
+ border: '1px solid #ddd',
82
+ borderRadius: '4px'
83
+ }}
84
+ >
85
+ {option}
86
+ </button>
87
+ ))}
88
+ </div>
89
+ <div style={{
90
+ marginTop: '20px',
91
+ textAlign: 'center'
92
+ }}>
93
+ 分數: {score}
94
+ </div>
95
+ </div>
96
+ );
97
+ }
98
 
99
+ ReactDOM.render(<ChineseIdiomGame />, document.getElementById('root'));
100
+ </script>
101
+ </body>
102
+ </html>
103
+ """)
104
+
105
+ return demo
 
106
 
107
+ # 啟動 Gradio 介面
108
+ if __name__ == "__main__":
109
+ demo = create_interface()
110
+ demo.launch()