File size: 4,018 Bytes
6e514e4 |
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 |
import gradio as gr
import numpy as np
# Define the function to handle the image editor
def handle_image_editor(image):
# Placeholder function to handle the image editor
return image
# Define the function to handle the chatbox
def handle_chatbox(message, history):
# Placeholder function to handle the chatbox
response = "Echo: " + message
history.append({"role": "user", "content": message})
history.append({"role": "assistant", "content": response})
return "", history
# Define the function to handle the prompt box
def handle_prompt_box(prompt, image_generation, checkboxes, slider):
# Placeholder function to handle the prompt box
return f"Prompt: {prompt}, Image Generation: {image_generation}, Checkboxes: {checkboxes}, Slider: {slider}"
# Define the function to handle the model and API accordions
def handle_accordions(model, api, settings):
# Placeholder function to handle the model and API accordions
return f"Model: {model}, API: {api}, Settings: {settings}"
# Define the main Gradio app
with gr.Blocks(css="""
:root {
--primary-800: #1f2937;
--secondary-500: #3b82f6;
--text-color: #000000;
--radius-sm: 8px;
}
.gr-button {
background-color: var(--secondary-500);
color: var(--text-color);
border-radius: var(--radius-sm);
}
.gr-button:hover {
background-color: #2563eb;
}
.gr-button:active {
background-color: #1d4ed8;
}
.gr-button:disabled {
background-color: #c7d2fe;
color: #6b7280;
}
.gr-button--icon {
padding: 0.5rem;
}
.gr-button--icon img {
width: 1rem;
height: 1rem;
}
.gr-image-editor {
border: 1px solid var(--secondary-500);
border-radius: var(--radius-sm);
}
.gr-gallery {
border: 1px solid var(--secondary-500);
border-radius: var(--radius-sm);
}
.gr-chatbot {
border: 1px solid var(--secondary-500);
border-radius: var(--radius-sm);
}
.gr-accordion {
border: 1px solid var(--secondary-500);
border-radius: var(--radius-sm);
}
""") as demo:
# Top left: 3x Buttons with image icon
with gr.Row():
with gr.Column():
hamburger_btn = gr.Button("Hamburger", elem_classes="gr-button--icon")
hamburger_btn.click(lambda: gr.Info("Hamburger button clicked"), None, None)
color_picker = gr.ColorPicker(value="#3b82f6", label="Color Picker", show_label=False)
toggle_dark = gr.Button("Toggle Dark", elem_classes="gr-button--icon")
toggle_dark.click(lambda: gr.Info("Dark mode toggled"), None, None)
# Main body: square boxes
with gr.Row():
with gr.Column():
image_editor = gr.ImageEditor(type="numpy", label="Image Editor", show_download_button=True)
image = gr.Image(type="numpy", label="Image", show_download_button=True)
gallery = gr.Gallery(columns=4, label="Gallery", show_download_button=True)
# Bottom: Chat box with switch
with gr.Row():
with gr.Column():
chatbox = gr.Chatbot(type="messages", label="Chatbox")
msg = gr.Textbox(label="Message")
msg.submit(handle_chatbox, [msg, chatbox], [msg, chatbox])
# Bottom: Prompt box with switch
with gr.Row():
with gr.Column():
prompt_box = gr.Textbox(label="Prompt")
image_generation = gr.Checkbox(label="Image Generation")
checkboxes = gr.CheckboxGroup(["Checkbox 1", "Checkbox 2", "Checkbox 3"], label="Checkboxes")
slider = gr.Slider(0, 100, step=1, label="Slider")
prompt_box.submit(handle_prompt_box, [prompt_box, image_generation, checkboxes, slider], None)
# Bottom: Model, API, and Settings accordions
with gr.Row():
with gr.Column():
model_accordion = gr.Accordion("Model", open=False)
with model_accordion:
model |