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 all
+
 class PromptInput(BaseModel):
     text: str = Field(..., description="The initial prompt text")
     meta_prompt_choice: Literal["star","done","physics","morphosis", "verse", "phor","bolism","math","arpe"] = Field(..., description="Choice of meta prompt strategy")
@@ -153,180 +155,7 @@ 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;
-}
-"""
-
+        custom_css = custom_css
         with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
             with gr.Column(elem_classes=["container", "title-container"]):
                 gr.Markdown("# PROMPT++")