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