File size: 2,833 Bytes
ebe1056
9f12d53
82939de
 
9f12d53
 
82939de
017e3ec
90fbc88
017e3ec
82939de
 
 
3b64a98
c1178f7
e801e50
82939de
 
 
70f58dd
82939de
759dcac
82939de
91afa6d
82939de
 
167906a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24c8fe8
167906a
 
 
 
 
 
 
24c8fe8
167906a
 
 
 
24c8fe8
6e6e647
82939de
 
 
 
 
9f12d53
ebe1056
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
<head>
    <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
<gradio-lite>
<gradio-requirements>
transformers-js-py
</gradio-requirements>
<gradio-file name="app.py" entrypoint>
from transformers_js import pipeline
import gradio as gr

fortune_generator = await pipeline('text-generation', 'Xenova/Qwen1.5-0.5B-Chat')

async def generate_fortune(name):
    if not name.strip():
        return "Please enter your name to receive a fortune."
    
    prompt = f"Fortune for {name}: In the near future, you will"
    result = await fortune_generator(prompt, max_new_tokens=20, temperature=0.7)
    fortune = result[0]['generated_text'].replace(prompt, '')
    
    return f"{name.strip()}, your fortune: In the near future, you will{fortune}"

custom_css = """
.container {
    max-width: 800px !important;
    margin: auto !important;
    padding: 20px !important;
}
.title {
    text-align: center !important;
    color: #FF6B6B !important;
    font-size: 2.5rem !important;
    margin-bottom: 20px !important;
}
.subtitle {
    text-align: center !important;
    color: #4ECDC4 !important;
    font-size: 1.2rem !important;
    margin-bottom: 30px !important;
}
.input-box, .output-box {
    border: 2px solid #FF6B6B !important;
    border-radius: 10px !important;
}
.generate-btn {
    background-color: #FF6B6B !important;
    color: white !important;
    font-size: 1.2rem !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}
.generate-btn:hover {
    background-color: #4ECDC4 !important;
    transform: scale(1.05) !important;
}
.footer {
    text-align: center !important;
    margin-top: 30px !important;
    font-style: italic !important;
}
"""

with gr.Blocks(
    title="Viral Fortune Cookie Generator",
    theme=gr.themes.Soft(
        primary_hue="pink",
        secondary_hue="blue",
    ),
    css=custom_css
) as demo:
    with gr.Column(elem_classes="container"):
        gr.Markdown("# AI Fortune Cookie Generator", elem_classes="title")
        gr.Markdown("Discover your future with our AI-powered fortune cookies! Share your unique fortune with friends!", elem_classes="subtitle")
        
        name_input = gr.Textbox(label="Your Name", placeholder="Enter your name here...", elem_classes="input-box")
        fortune_output = gr.Textbox(label="Your AI-Generated Fortune", elem_classes="output-box", lines=3)
        submit_button = gr.Button("Reveal Your Cosmic Fortune", elem_classes="generate-btn")
            
    submit_button.click(fn=generate_fortune, inputs=name_input, outputs=fortune_output)

demo.launch()
</gradio-file>
</gradio-lite>
</body>
</html>