import gradio as gr
from prompt_refiner import PromptRefiner
from variables import models, explanation_markdown, metaprompt_list, examples
from custom_css import custom_css
class GradioInterface:
def __init__(self, prompt_refiner: PromptRefiner, custom_css):
self.prompt_refiner = prompt_refiner
# Set default model to second-to-last in the list
default_model = models[-1] if len(models) >= 1 else models[0] if models else None
#meta_prompt_choice=metaprompt_list[0]
with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
# CONTAINER 1
with gr.Column(elem_classes=["container", "title-container"]):
gr.Markdown("# PROMPT++")
gr.Markdown("### Automating Prompt Engineering by Refining your Prompts")
gr.Markdown("Learn how to generate an improved version of your prompts.")
# CONTAINER 2
with gr.Column(elem_classes=["container", "input-container"]):
prompt_text = gr.Textbox(label="Type your prompt (or leave empty to see metaprompt)",lines=5)
with gr.Accordion("Prompt Examples", open=False, visible=True):
gr.Examples(examples=examples,inputs=[prompt_text])
automatic_metaprompt_button = gr.Button(
"Automatic Choice for Refinement Method",
elem_classes=["button-highlight"]
)
MetaPrompt_analysis = gr.Markdown()
# CONTAINER 3
with gr.Column(elem_classes=["container","meta-container"]):
meta_prompt_choice = gr.Radio(
choices=metaprompt_list,
label="Choose Meta Prompt",
value=metaprompt_list[0],
elem_classes=["no-background", "radio-group"]
)
refine_button = gr.Button(
"Refine Prompt",
elem_classes=["button-waiting"]
)
with gr.Accordion("Metaprompt Explanation", open=False, visible=True):
gr.Markdown(explanation_markdown)
with gr.Column(elem_classes=["container", "analysis-container"]):
gr.Markdown(" ")
prompt_evaluation = gr.Markdown()
gr.Markdown("### Refined Prompt")
refined_prompt = gr.Textbox(
label=" ",
interactive=True,
show_label=True,
show_copy_button=True,
)
explanation_of_refinements = gr.Markdown()
with gr.Column(elem_classes=["container", "model-container"]):
with gr.Row():
apply_model = gr.Dropdown(
choices=models,
value=default_model,
label="Choose the Model",
container=False,
scale=1,
min_width=300
)
apply_button = gr.Button(
"Apply Prompts",
elem_classes=["button-waiting"]
)
gr.Markdown("### Prompts on Chosen Model")
with gr.Tabs(elem_classes=["tabs"]):
with gr.TabItem("Prompts Output Comparison", elem_classes=["tabitem"]):
with gr.Row(elem_classes=["output-row"]):
with gr.Column(scale=1, elem_classes=["comparison-column"]):
gr.Markdown("### Original Prompt Output")
original_output1 = gr.Markdown(
# value="Output will appear here",
elem_classes=["output-content"],
visible=True
)
with gr.Column(scale=1, elem_classes=["comparison-column"]):
gr.Markdown("### Refined Prompt Output")
refined_output1 = gr.Markdown(
# value="Output will appear here",
elem_classes=["output-content"],
visible=True
)
with gr.TabItem("Original Prompt Output", elem_classes=["tabitem"]):
with gr.Row(elem_classes=["output-row"]):
with gr.Column(scale=1, elem_classes=["comparison-column"]):
gr.Markdown("### Original Prompt Output")
original_output = gr.Markdown(
# value="Output will appear here",
elem_classes=[ "output-content"],
visible=True
)
with gr.TabItem("Refined Prompt Output", elem_classes=["tabitem"]):
with gr.Row(elem_classes=["output-row"]):
with gr.Column(scale=1, elem_classes=["comparison-column"]):
gr.Markdown("### Refined Prompt Output")
refined_output = gr.Markdown(
# value="Output will appear here",
elem_classes=["output-content"],
visible=True
)
with gr.Accordion("Full Response JSON", open=False, visible=True):
full_response_json = gr.JSON()
# Button click handlers
automatic_metaprompt_button.click(
fn=self.automatic_metaprompt,
inputs=[prompt_text],
outputs=[MetaPrompt_analysis, meta_prompt_choice]
).then(
fn=lambda: None,
inputs=None,
outputs=None,
js="""
() => {
// Clear subsequent outputs
document.querySelectorAll('.analysis-container textarea, .analysis-container .markdown-text, .model-container .markdown-text, .comparison-output').forEach(el => {
if (el.value !== undefined) {
el.value = '';
} else {
el.textContent = '';
}
});
// Update button states
const allButtons = Array.from(document.querySelectorAll('button')).filter(btn =>
btn.textContent.includes('Automatic Choice') ||
btn.textContent.includes('Refine Prompt') ||
btn.textContent.includes('Apply Prompts')
);
allButtons.forEach(btn => btn.classList.remove('button-highlight'));
allButtons[1].classList.add('button-highlight'); // Highlight refine button
allButtons[0].classList.add('button-completed'); // Complete current button
allButtons[2].classList.add('button-waiting'); // Set apply button to waiting
}
"""
)
refine_button.click(
fn=self.refine_prompt,
inputs=[prompt_text, meta_prompt_choice],
outputs=[prompt_evaluation, refined_prompt, explanation_of_refinements, full_response_json]
).then(
fn=lambda: None,
inputs=None,
outputs=None,
js="""
() => {
// Clear model outputs
document.querySelectorAll('.model-container .markdown-text, .comparison-output').forEach(el => {
if (el.value !== undefined) {
el.value = '';
} else {
el.textContent = '';
}
});
// Update button states
const allButtons = Array.from(document.querySelectorAll('button')).filter(btn =>
btn.textContent.includes('Automatic Choice') ||
btn.textContent.includes('Refine Prompt') ||
btn.textContent.includes('Apply Prompts')
);
allButtons.forEach(btn => btn.classList.remove('button-highlight'));
allButtons[2].classList.add('button-highlight'); // Highlight apply button
allButtons[1].classList.add('button-completed'); // Complete current button
allButtons[2].classList.remove('button-waiting'); // Remove waiting from apply button
}
"""
)
apply_button.click(
fn=self.apply_prompts,
inputs=[prompt_text, refined_prompt, apply_model],
outputs=[original_output, refined_output, original_output1, refined_output1],
show_progress=True # Add this line
).then(
fn=lambda: None,
inputs=None,
outputs=None,
js="""
() => {
// Update button states
const allButtons = Array.from(document.querySelectorAll('button')).filter(btn =>
btn.textContent.includes('Automatic Choice') ||
btn.textContent.includes('Refine Prompt') ||
btn.textContent.includes('Apply Prompts')
);
allButtons.forEach(btn => btn.classList.remove('button-highlight', 'button-waiting'));
allButtons[2].classList.add('button-completed'); // Complete apply button
// Force refresh of output containers
document.querySelectorAll('.comparison-output').forEach(el => {
if (el.parentElement) {
el.parentElement.style.display = 'none';
setTimeout(() => {
el.parentElement.style.display = 'block';
}, 100);
}
});
}
"""
)
# Reset when input changes
prompt_text.change(
fn=lambda: None,
inputs=None,
outputs=None,
js="""
() => {
// Clear all outputs
document.querySelectorAll('.analysis-container textarea, .analysis-container .markdown-text, .model-container .markdown-text, .comparison-output').forEach(el => {
if (el.value !== undefined) {
el.value = '';
} else {
el.textContent = '';
}
});
// Reset all button states
const allButtons = Array.from(document.querySelectorAll('button')).filter(btn =>
btn.textContent.includes('Automatic Choice') ||
btn.textContent.includes('Refine Prompt') ||
btn.textContent.includes('Apply Prompts')
);
allButtons.forEach(btn => {
btn.classList.remove('button-completed', 'button-highlight', 'button-waiting');
});
allButtons[0].classList.add('button-highlight'); // Highlight first button
allButtons.slice(1).forEach(btn => btn.classList.add('button-waiting')); // Set subsequent buttons to waiting
}
"""
)
def automatic_metaprompt(self, prompt: str) -> tuple:
"""Handle automatic metaprompt selection"""
try:
if not prompt.strip():
return "Please enter a prompt to analyze.", None
metaprompt_analysis, recommended_key = self.prompt_refiner.automatic_metaprompt(prompt)
return metaprompt_analysis, recommended_key
except Exception as e:
error_message = f"Error in automatic metaprompt: {str(e)}"
return error_message, None
def refine_prompt(self, prompt: str, meta_prompt_choice: str) -> tuple:
"""Handle manual prompt refinement"""
try:
if not prompt.strip():
return ("No prompt provided.", "", "", {})
result = self.prompt_refiner.refine_prompt(prompt, meta_prompt_choice)
return (
result[0], # initial_prompt_evaluation
result[1], # refined_prompt
result[2], # explanation_of_refinements
result[3] # full_response
)
except Exception as e:
error_message = f"Error in refine_prompt: {str(e)}"
return error_message, "", "", {}
def apply_prompts(self, original_prompt: str, refined_prompt: str, model: str) -> tuple:
"""Apply both original and refined prompts to the selected model"""
try:
if not original_prompt or not refined_prompt:
return ("Please provide both original and refined prompts.",
"Please provide both original and refined prompts.",
"Please provide both original and refined prompts.",
"Please provide both original and refined prompts.")
if not model:
return ("Please select a model.",
"Please select a model.",
"Please select a model.",
"Please select a model.")
# Apply prompts and get outputs
try:
# print(original_prompt)
# print(refined_prompt)
#print(model)
original_output = self.prompt_refiner.apply_prompt(original_prompt, model)
#print(original_output)
refined_output = self.prompt_refiner.apply_prompt(refined_prompt, model)
except Exception as e:
return (f"Error applying prompts: {str(e)}",
f"Error applying prompts: {str(e)}",
f"Error applying prompts: {str(e)}",
f"Error applying prompts: {str(e)}")
# Ensure we have string outputs
original_output = str(original_output) if original_output is not None else "No output generated"
refined_output = str(refined_output) if refined_output is not None else "No output generated"
#print('-'*100)
#print(original_output)
#print('-'*100)
#print(refined_output)
#print('-'*100)
return (
original_output, # For Original Prompt Output tab
refined_output, # For Refined Prompt Output tab
original_output, # For Comparison tab - original
refined_output # For Comparison tab - refined
)
except Exception as e:
error_message = f"Error in apply_prompts: {str(e)}"
return (error_message, error_message, error_message, error_message)
def launch(self, share=False):
"""Launch the Gradio interface"""
self.interface.launch(share=share)
if __name__ == '__main__':
from variables import api_token, meta_prompts, metaprompt_explanations
# Initialize the prompt refiner
prompt_refiner = PromptRefiner(api_token, meta_prompts, metaprompt_explanations)
# Create and launch the Gradio interface
gradio_interface = GradioInterface(prompt_refiner, custom_css)
gradio_interface.launch(share=True)