Update app.py

app.py

@@ -7,6 +7,8 @@ from pydantic import BaseModel, Field
 from typing import Optional, Literal
 from huggingface_hub.errors import HfHubHTTPError
 
+from custom_css import custom_css
+
 
 class PromptInput(BaseModel):
     text: str = Field(..., description="The initial prompt text")
@@ -278,180 +280,6 @@ 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.",