File size: 2,989 Bytes
ebe1056 9f12d53 82939de 9f12d53 82939de 3b64a98 82939de e801e50 82939de 70f58dd 82939de 91afa6d 82939de 167906a 91afa6d 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 91 |
<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/distilgpt2')
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=30, 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 for a more appealing look
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")
gr.Markdown("Share your fortune on social media and tag us! #AIFortuneCookie", elem_classes="footer")
submit_button.click(fn=generate_fortune, inputs=name_input, outputs=fortune_output)
demo.launch()
</gradio-file>
</gradio-lite>
</body>
</html> |