Update app.py

app.py

@@ -113,95 +113,270 @@ class PromptRefiner:
 class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
+        custom_css = """
+.container {
+    border: 2px solid #2196F3;
+    border-radius: 10px;
+    padding: 12px;
+    margin: 6px;
+    background: white;
+    position: relative;
+    width: 100% !important;
+    max-width: 1200px !important;
+    margin: 0 auto 20px auto !important;
+}
+.container::before {
+    position: absolute;
+    top: -10px;
+    left: 20px;
+    background: white;
+    padding: 0 10px;
+    color: #2196F3;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+.title-container {
+    width: fit-content !important;
+    margin: 0 auto !important;
+    padding: 2px 40px !important;
+    border: 1px solid #0066cc !important;
+    border-radius: 10px !important;
+    background-color: rgba(0, 102, 204, 0.05) !important;
+}
+.title-container * {
+    text-align: center;
+    margin: 0 !important;
+    line-height: 1.2 !important;
+}
+.title-container h1 {
+    font-size: 28px !important;
+    margin-bottom: 1px !important;
+}
+.title-container h3 {
+    font-size: 18px !important;
+    margin-bottom: 1px !important;
+}
+.title-container p {
+    font-size: 14px !important;
+    margin-bottom: 1px !important;
+}
+.input-container::before { 
+    content: 'PROMPT REFINEMENT';
+}
+.analysis-container::before {
+    content: 'ANALYSIS';
+}
+.model-container::before {
+    content: 'MODEL APPLICATION';
+}
+.examples-container::before {
+    content: 'EXAMPLES';
+}
+/* Resizable textbox */
+.input-container textarea {
+    resize: vertical !important;
+    min-height: 100px !important;
+    max-height: 500px !important;
+    width: 100% !important;
+    border: 1px solid #ddd !important;
+    border-radius: 4px !important;
+    padding: 8px !important;
+    transition: all 0.3s ease !important;
+}
+.input-container textarea:focus {
+    border-color: #2196F3 !important;
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important;
+}
+/* Radio group styling */
+.radio-group {
+    background-color: rgba(0, 102, 204, 0.05) !important;
+    padding: 10px !important;
+    border-radius: 8px !important;
+    border: 1px solid rgba(0, 102, 204, 0.1) !important;
+    display: flex !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+    width: 100% !important;
+}
+.gradio-radio {
+    display: flex !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+}
+.gradio-radio label {
+    display: flex !important;
+    align-items: center !important;
+    padding: 6px 12px !important;
+    border: 1px solid #ddd !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+    background: white !important;
+    margin: 4px !important;
+}
+.gradio-radio input[type="radio"]:checked + label {
+    background: rgba(0, 102, 204, 0.1) !important;
+    border-color: #0066cc !important;
+    color: #0066cc !important;
+    font-weight: bold !important;
+}
+/* Button styling */
+.gradio-button {
+    background-color: white !important;
+    color: #2196F3 !important;
+    border: 2px solid #2196F3 !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !important;
+    margin: 10px 0 !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important;
+}
+.gradio-button:hover {
+    background-color: #2196F3 !important;
+    color: white !important;
+    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important;
+}
+/* Accordion styling */
+.gradio-accordion {
+    margin: 10px 0 !important;
+    border: none !important;
+}
+/* Container alignment */
+.gradio-container {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    width: 100% !important;
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+}
+/* Dropdown styling */
+.gradio-dropdown {
+    width: 100% !important;
+    max-width: 300px !important;
+}
+/* JSON container */
+.full-response-json {
+    margin-top: 20px !important;
+    padding: 10px !important;
+    background-color: rgba(0, 102, 204, 0.05) !important;
+    border-radius: 8px !important;
+}
+"""
 
-        with gr.Blocks() as self.interface:
-            gr.Markdown("# PROMPT++")
-            gr.Markdown("### Automating Prompt Engineering by Refining your Prompts")
-            gr.Markdown("Learn how to generate an improved version of your prompts. Enter a main idea for a prompt, choose a meta prompt, and the model will attempt to generate an improved version.")
-
-            gr.Markdown("## Refine Prompt")
-            with gr.Row():
-                prompt_text = gr.Textbox(label="Type the prompt (or let it empty to see metaprompt)")
-            with gr.Accordion("Meta Prompt explanation", open=False):
-                gr.Markdown(explanation_markdown)
-            with gr.Row():
-                meta_prompt_choice = gr.Radio(["superstar", "star", "done", "physics", "morphosis", "verse", "phor","bolism","math","math_meta"], label="Choose Meta Prompt", value="morphosis")
-                refine_button = gr.Button("Refine Prompt")
-            with gr.Row():
+        with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
+            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.")
+        
+            with gr.Column(elem_classes=["container", "input-container"]):
+                prompt_text = gr.Textbox(
+                    label="Type your prompt (or let it empty to see metaprompt)",
+                   # elem_classes="no-background",
+                    #elem_classes="container2",
+                    lines=5
+                )
+                meta_prompt_choice = gr.Radio(
+                    ["superstar", "star", "done", "physics", "morphosis", "verse", "phor","bolism","math","math_meta"],
+                    label="Choose Meta Prompt",
+                    value="star",
+                    elem_classes=["no-background", "radio-group"]
+                   # elem_classes=[ "radio-group"]
+                )
+                refine_button = gr.Button("Refine Prompt")  
+                
+                # Option 1: Put Examples here (before Meta Prompt explanation)
+                with gr.Row(elem_classes=["container2"]):
+                    with gr.Accordion("Examples", open=False):
+                        gr.Examples(
+                            examples=[
+                                ["Write a story on the end of prompt engineering replaced by an Ai specialized in refining prompts.", "superstar"],
+                                ["Tell me about that guy who invented the light bulb", "physics"],
+                                ["Explain the universe.", "star"],
+                                ["What's the population of New York City and how tall is the Empire State Building and who was the first mayor?", "morphosis"],
+                                ["List American presidents.", "verse"],                        
+                                ["Explain why the experiment failed.", "morphosis"],
+                                ["Is nuclear energy good?", "verse"],
+                                ["How does a computer work?", "phor"],
+                                ["How to make money fast?", "done"],
+                                ["how can you prove IT0's lemma in stochastic calculus ?", "math_meta"],                    
+                            ],
+                            inputs=[prompt_text, meta_prompt_choice]
+                        )
+                       
+                    with gr.Accordion("Meta Prompt explanation", open=False):
+                        gr.Markdown(explanation_markdown)
+                
+
+                
+                # Option 2: Or put Examples here (after the button)
+                # with gr.Accordion("Examples", open=False):
+                #     gr.Examples(...)
+                
+            with gr.Column(elem_classes=["container", "analysis-container"]):
+                gr.Markdown(' ')
                 gr.Markdown("### Initial prompt analysis")
-            with gr.Column():
-                analysis_evaluation = gr.Markdown(label="Analysis and Evaluation")
+                analysis_evaluation = gr.Markdown()
                 gr.Markdown("### Refined Prompt")
-                refined_prompt = gr.Textbox(label="Refined Prompt")
+                refined_prompt = gr.Textbox(
+                                    label="Refined Prompt",
+                                    interactive=True,
+                                    show_label=True,  # Must be True for copy button to show
+                                    show_copy_button=True,  # Adds the copy button
+                             #       elem_classes="no-background"
+                                )
                 gr.Markdown("### Explanation of Refinements")
-                explanation_of_refinements = gr.Markdown(label="Explanation of Refinements")
+                explanation_of_refinements = gr.Markdown()
             
-            with gr.Accordion("Full Response JSON", open=False,visible=False):
-                full_response_json = gr.JSON()
 
+            with gr.Column(elem_classes=["container", "model-container"]):
+              #  gr.Markdown("## See MetaPrompt Impact")            
+                with gr.Row():
+                    apply_model = gr.Dropdown(models,
+                                            value="llama-3.1-70b-versatile",
+                                            label="Choose the Model",
+                                            container=False,  # This removes the container around the dropdown
+                                            scale=1,         # Controls the width relative to other components
+                                            min_width=300    # Sets minimum width in pixels
+                                         #   elem_classes="no-background"
+                                        )
+                    apply_button = gr.Button("Apply MetaPrompt")
 
+          #  with gr.Column(elem_classes=["container", "results-container"]):
+                gr.Markdown("### Prompts on choosen model")
+                with gr.Tabs():
+                    with gr.TabItem("Original Prompt Output"):
+                        original_output = gr.Markdown()
+                    with gr.TabItem("Refined Prompt Output"):
+                        refined_output = gr.Markdown()
+            with gr.Accordion("Full Response JSON", open=False, visible=True):
+                full_response_json = gr.JSON()
+                
             refine_button.click(
                 fn=self.refine_prompt,
                 inputs=[prompt_text, meta_prompt_choice],
                 outputs=[analysis_evaluation, refined_prompt, explanation_of_refinements, full_response_json]
             )
-            gr.Markdown("## See MetaPrompt Impact")  
-            with gr.Row():
-                apply_model = gr.Dropdown(
-                    [
-                        "llama-3.1-70b-versatile",
-                        "llama3-groq-70b-8192-tool-use-preview",
-                        "llama-3.2-90b-text-preview",
-                        "llama-3.2-90b-vision-preview",
-                        "llama3-groq-70b-8192-tool-use-preview",
-                        "mixtral-8x7b-32768"
-                    ],
-                    value="llama-3.1-70b-versatile",
-                    label="Choose the Model to apply prompts"                
-                )
-                #   apply_model=gr.Dropdown(["gpt-4o",'gpt-4-turbo'], value="gpt-4o", label="Model"),
-                apply_button = gr.Button("Apply MetaPrompt")
-                
-            with gr.Tab("Original Prompt Output"):
-                   # gr.Markdown("### Original Prompt Output")
-                    original_output = gr.Markdown(label="Original Prompt Output")
-            with gr.Tab("Refined Prompt Output"):
-                    #gr.Markdown("### Refined Prompt Output")
-                    refined_output = gr.Markdown(label="Refined Prompt Output")
 
             apply_button.click(
                 fn=self.apply_prompts,
                 inputs=[prompt_text, refined_prompt, apply_model],
-                outputs=[original_output, refined_output]  
+                outputs=[original_output, refined_output]
             )
 
-            with gr.Accordion("Examples", open=True):
-                gr.Examples(
-                    examples=[
-                        ["Write a story on the end of prompt engineering replaced by an Ai specialized in refining prompts.", "star"],
-                        ["Tell me about that guy who invented the light bulb", "physics"],
-                        ["Explain the universe.", "star"],
-                        ["What's the population of New York City and how tall is the Empire State Building and who was the first mayor?", "morphosis"],
-                        ["List American presidents.", "verse"],                        
-                        ["Explain why the experiment failed.", "morphosis"],
-                        ["Is nuclear energy good?", "verse"],
-                        ["How does a computer work?", "phor"],
-                        ["How to make money fast?", "done"],
-                        ["how can you  prove IT0's lemma in stochastic calculus ?", "superstar"],                    
-                    ],
-                    inputs=[prompt_text, meta_prompt_choice]
-                )
-
-                
     def refine_prompt(self, prompt: str, meta_prompt_choice: str) -> tuple:
         input_data = PromptInput(text=prompt, meta_prompt_choice=meta_prompt_choice)
-        result = self.prompt_refiner.refine_prompt(input_data)
-        analysis_evaluation = f"\n\n{result.initial_prompt_evaluation}"
+        # Since result is a tuple with 4 elements based on the return value of prompt_refiner.refine_prompt
+        initial_prompt_evaluation, refined_prompt, explanation_refinements, full_response = self.prompt_refiner.refine_prompt(input_data)
+        
+        analysis_evaluation = f"\n\n{initial_prompt_evaluation}"
         return (
             analysis_evaluation,
-            result.refined_prompt,
-            result.explanation_of_refinements,
-            result.dict()
+            refined_prompt,
+            explanation_refinements,
+            full_response
         )
 
     def apply_prompts(self, original_prompt: str, refined_prompt: str, model: str):
@@ -211,7 +386,7 @@ class GradioInterface:
 
     def launch(self, share=False):
         self.interface.launch(share=share)
-
+        
 metaprompt_explanations = {
     "star": "Use ECHO when you need a comprehensive, multi-stage approach for complex prompts. It's ideal for tasks requiring in-depth analysis, exploration of multiple alternatives, and synthesis of ideas. Choose this over others when you have time for a thorough refinement process and need to consider various aspects of the prompt.",
     "superstar": "Use advanced ECHO when you need a comprehensive, multi-stage approach for complex prompts. It's ideal for tasks requiring in-depth analysis, exploration of multiple alternatives, and synthesis of ideas. Choose this over others when you have time for a thorough refinement process and need to consider various aspects of the prompt.",
@@ -224,6 +399,15 @@ metaprompt_explanations = {
     "math": "Apply advanced mathematical and logical reasoning techniques to refine the given prompt, ensuring clarity, specificity, and effectiveness. It's best for prompts that deal with math."
 }
 
+models =         [
+        "llama-3.1-70b-versatile",
+        "llama3-groq-70b-8192-tool-use-preview",
+        "llama-3.2-90b-text-preview",
+        "llama-3.2-90b-vision-preview",
+        "llama3-groq-70b-8192-tool-use-preview",
+         "mixtral-8x7b-32768"
+    ]
+
 explanation_markdown = "".join([f"- **{key}**: {value}\n" for key, value in metaprompt_explanations.items()])
 
 # Main code to run the application