File size: 4,549 Bytes
00ff3a7
bdfc7f5
1d191cc
 
72c14d6
98d761f
 
1d191cc
 
 
98d761f
1d191cc
 
72c14d6
98d761f
9645d04
98d761f
72c14d6
1d191cc
 
 
 
98d761f
 
 
bdfc7f5
1d191cc
 
a04f583
72c14d6
a04f583
72c14d6
98d761f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
00ff3a7
98d761f
 
 
 
 
 
00ff3a7
72c14d6
00ff3a7
 
 
 
 
 
 
 
 
98d761f
00ff3a7
98d761f
00ff3a7
 
98d761f
 
 
 
 
 
00ff3a7
 
 
 
6138e99
72c14d6
98d761f
00ff3a7
 
98d761f
 
 
 
 
 
 
00ff3a7
98d761f
 
 
 
 
 
 
00ff3a7
98d761f
 
00ff3a7
 
98d761f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b6d24f3
72c14d6
98d761f
72c14d6
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import gradio as gr
import spaces
import torch
from transformers import pipeline

# 1. Load the smarter 1.5B model
model_id = "Qwen/Qwen2.5-1.5B-Instruct"
pipe = pipeline(
    "text-generation", 
    model=model_id, 
    dtype=torch.bfloat16, 
    device_map="auto"
)

# 2. Local generation on GPU
@spaces.GPU
def generate_text(prompt, temperature, max_tokens):
    try:
        messages = [{"role": "user", "content": prompt}]
        
        outputs = pipe(
            messages, 
            max_new_tokens=int(max_tokens), 
            temperature=float(temperature), 
            do_sample=True if temperature > 0 else False
        )
        
        return outputs[0]["generated_text"][-1]["content"]
               
    except Exception as e:
        return f"An error occurred: {str(e)}"

# 3. Custom CSS to inject modern rounded corners and gradient accent borders
custom_css = """
.header-box {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    color: white;
}
.header-box h1 {
    color: white !important;
    margin: 0;
    font-weight: 800;
}
.header-box p {
    color: #e0f2fe !important;
    margin-top: 5px;
}
.generate-btn {
    background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
    color: white !important;
    border: none !important;
    font-weight: bold !important;
}
"""

# 4. Applying a soft, highly polished UI Theme
theme = gr.themes.Soft(
    primary_hue="indigo",
    secondary_hue="cyan",
    neutral_hue="slate"
)

# 5. Build the styled UI Blocks
with gr.Blocks(theme=theme, css=custom_css) as demo:
    
    # Custom Gradient Header (Created safely using a custom div structure inside gr.HTML)
    gr.HTML(
        """
        <div class="header-box">
            <h1>πŸš€ My Generative AI Playground</h1>
            <p>Powered by Qwen-2.5-1.5B and running locally on ZeroGPU</p>
        </div>
        """
    )

    with gr.Row():
        # Left Side: Inputs & Interactive Settings
        with gr.Column(scale=4):
            input_text = gr.Textbox(
                placeholder="Type your creative ideas, math problems, or questions here...", 
                label="πŸ’‘ What would you like to ask?",
                lines=5
            )
            
            # Clickable prompt helper buttons
            gr.Markdown("### 🌟 Try these quick prompts:")
            with gr.Row():
                btn_story = gr.Button("πŸ“ Write a Sci-Fi Story", size="sm")
                btn_code = gr.Button("🐍 Python Palindrome Code", size="sm")
                btn_news = gr.Button("πŸ“° Trending News Now", size="sm")
            
            # Interactive parameters under a collapsible menu
            with gr.Accordion("βš™οΈ Advanced AI Settings", open=False):
                temp_slider = gr.Slider(
                    minimum=0.0, 
                    maximum=1.2, 
                    value=0.7, 
                    step=0.1, 
                    label="Creativity (Temperature)", 
                    info="Higher values mean more creative, lower means focused."
                )
                token_slider = gr.Slider(
                    minimum=50, 
                    maximum=1000, 
                    value=300, 
                    step=50, 
                    label="Response Length (Max Tokens)"
                )
            
            submit_btn = gr.Button("⚑ Generate Response", elem_classes="generate-btn")
            
        # Right Side: Clean output box
        with gr.Column(scale=5):
            output_text = gr.Textbox(
                label="✨ AI Response", 
                interactive=False, 
                lines=15, 
                placeholder="The AI's masterpiece will generate here..."
            )
            
    # Connect UI Click Elements
    submit_btn.click(
        fn=generate_text, 
        inputs=[input_text, temp_slider, token_slider], 
        outputs=output_text
    )
    
    # Hook up the quick prompt buttons to auto-fill the input box!
    btn_story.click(lambda: "Write a short, engaging story about a lost astronaut who finds a cosmic garden floating in space.", outputs=input_text)
    btn_code.click(lambda: "Write a complete Python function that checks if a string is a palindrome. Explain how it works step-by-step.", outputs=input_text)
    btn_news.click(lambda: "In clear, simple terms, explain the trending news happening now.", outputs=input_text)

# Launch the interactive application
demo.launch()