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