Update app.py

app.py

@@ -281,6 +281,236 @@ class GradioInterface:
         self.interface.launch(share=share)
 
 
+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;
+}
+"""
+
+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.",
+    "done": "Opt for this when you want a structured approach with emphasis on role-playing and advanced techniques. It's particularly useful for tasks that benefit from diverse perspectives and complex reasoning. Prefer this over 'physics' when you need a more detailed, step-by-step refinement process.",
+    "physics": "Select this when you need a balance between structure and advanced techniques, with a focus on role-playing. It's similar to 'done' but may be more suitable for scientific or technical prompts. Choose this over 'done' for a slightly less complex approach.",
+    "morphosis": "Use this simplified approach for straightforward prompts or when time is limited. It focuses on essential improvements without complex techniques. Prefer this over other methods when you need quick, clear refinements without extensive analysis.",
+    "verse": "Choose this method when you need to analyze and improve a prompt's strengths and weaknesses, with a focus on information flow. It's particularly useful for enhancing the logical structure of prompts. Use this over 'morphosis' when you need more depth but less complexity than 'star'.",
+    "phor": "Employ this advanced approach when you need to combine multiple prompt engineering techniques. It's ideal for complex tasks requiring both clarity and sophisticated prompting methods. Select this over 'star' when you want a more flexible, technique-focused approach.",
+    "bolism": "Utilize this method when working with autoregressive language models and when the task requires careful reasoning before conclusions. It's best for prompts that need detailed output formatting. Choose this over others when the prompt's structure and reasoning order are crucial."
+}
+
+models =         [
+        # Meta-Llama models (all support system)
+        "meta-llama/Meta-Llama-3-70B-Instruct",
+        "meta-llama/Meta-Llama-3-8B-Instruct",
+        "meta-llama/Llama-3.1-70B-Instruct",
+        "meta-llama/Llama-3.1-8B-Instruct",
+        "meta-llama/Llama-3.2-3B-Instruct",
+        "meta-llama/Llama-3.2-1B-Instruct",
+        "meta-llama/Llama-2-13b-chat-hf",
+        "meta-llama/Llama-2-7b-chat-hf",
+        
+        # HuggingFaceH4 models (support system)
+        "HuggingFaceH4/zephyr-7b-beta",
+        "HuggingFaceH4/zephyr-7b-alpha",
+        
+        # Qwen models (support system)
+        "Qwen/Qwen2.5-72B-Instruct",
+        "Qwen/Qwen2.5-1.5B",
+        
+        # Google models (supports system)
+        "google/gemma-1.1-2b-it"
+    ]
+
+explanation_markdown = "".join([f"- **{key}**: {value}\n" for key, value in metaprompt_explanations.items()])
+
+
+import os
+
+meta_info=""
+api_token = os.getenv('HF_API_TOKEN')
+if not api_token:
+    raise ValueError("HF_API_TOKEN not found in environment variables")
+
+metadone = os.getenv('metadone')
+prompt_refiner_model = os.getenv('prompt_refiner_model')
+echo_prompt_refiner = os.getenv('echo_prompt_refiner')
+metaprompt1 = os.getenv('metaprompt1')   
+loic_metaprompt = os.getenv('loic_metaprompt')    
+openai_metaprompt = os.getenv('openai_metaprompt')
+original_meta_prompt = os.getenv('original_meta_prompt')    
+new_meta_prompt = os.getenv('new_meta_prompt')   
+advanced_meta_prompt = os.getenv('advanced_meta_prompt')
+math_meta_prompt = os.getenv('metamath')
+autoregressive_metaprompt = os.getenv('autoregressive_metaprompt')
+
+
 if __name__ == '__main__':
     meta_info=""
     api_token = os.getenv('HF_API_TOKEN')