Karl_demo / app.py
Karlgorithm's picture
Upload app.py
f48ea54 verified
raw
history blame
3.92 kB
import requests
import gradio as gr
# Minimal Configuration
API_URL = "http://127.0.0.1:8080/v1/chat/completions"
# Store the last prompt
last_prompt = ""
def generate(prompt):
"""Generation function with prompt storage"""
global last_prompt
last_prompt = prompt
try:
response = requests.post(
API_URL,
json={
"model": "TinyLlama-1.1B-Chat-v1.0",
"messages": [{"role": "user", "content": prompt}],
"max_tokens": 256
},
timeout=100
)
return response.json()['choices'][0]['message']['content']
except Exception as e:
return f"Error: {str(e)}"
def regenerate():
"""Regenerate response using last prompt"""
if last_prompt:
return generate(last_prompt)
return "No previous prompt to regenerate"
# Styled UI with improved organization
with gr.Blocks(title="Karlson Achegeba GPT", theme=gr.themes.Soft(primary_hue="blue")) as app:
with gr.Column(elem_classes=["center-container"]):
# Header Section
gr.Markdown(
"""<div style='text-align: center;'>
<h1 style='color: #2563eb; margin-bottom: 0;'>Karlson Achegeba GPT</h1>
<p style='color: #64748b;'>Powered by TinyLlama</p>
</div>"""
)
# Chat Interface
with gr.Group(elem_classes=["chat-container"]):
# Input Section
with gr.Column():
prompt = gr.Textbox(
placeholder="Type your message here...",
lines=5,
label="Your Message",
elem_classes=["input-box"]
)
# Action Buttons
with gr.Row():
submit = gr.Button(
"Generate Response",
variant="primary",
elem_classes=["action-button"]
)
regenerate_btn = gr.Button(
"Regenerate",
variant="secondary",
elem_classes=["action-button"]
)
clear_btn = gr.Button(
"Clear",
variant="secondary",
elem_classes=["action-button"]
)
# Output Section
output = gr.Textbox(
label="AI Response",
interactive=False,
lines=10,
elem_classes=["output-box"]
)
# Event Handlers
submit.click(fn=generate, inputs=prompt, outputs=output)
regenerate_btn.click(fn=regenerate, outputs=output)
clear_btn.click(fn=lambda: ("", ""), outputs=[prompt, output]) # Clears both input and output
# Custom CSS
app.css = """
.center-container {
max-width: 800px;
margin: auto;
padding: 20px;
}
.chat-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.input-box, .output-box {
border-radius: 8px;
border: 1px solid #e2e8f0;
padding: 12px;
}
.input-box textarea, .output-box textarea {
font-size: 16px !important;
}
.action-button {
border-radius: 8px !important;
padding: 8px 16px !important;
min-width: 120px;
}
.action-button:not(.secondary) {
background: #2563eb !important;
color: white !important;
}
.action-button.secondary {
border: 1px solid #2563eb !important;
color: #2563eb !important;
}
.group {
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.row {
gap: 10px;
}
"""
app.launch(server_port=7860 , share = True)