Spaces:
Running
Running
| custom_css = """ | |
| /* ============================================ | |
| MAIN LAYOUT AND CONTAINERS | |
| Purpose: Core layout structure with minimal spacing | |
| ============================================ */ | |
| /* Main container styling with blue border and rounded corners */ | |
| .container { | |
| border: 2px solid #2196F3; /* Blue border with 2px thickness */ | |
| border-radius: 10px; /* Rounded corners */ | |
| padding: 10px !important; /* Inner spacing */ | |
| margin: 2px auto !important; /* Outer spacing and center alignment */ | |
| background: white; /* White background */ | |
| position: relative; /* For absolute positioning of children */ | |
| width: 100% !important; /* Full width */ | |
| max-width: 1200px !important; /* Maximum width constraint */ | |
| } | |
| /* Section header label positioning and styling */ | |
| .container::before { | |
| position: absolute; /* Position independently */ | |
| top: -18px; /* Negative top margin to overlap container border */ | |
| left: 20px; /* Left offset */ | |
| background: white; /* White background for text */ | |
| padding: 0 2px; /* Horizontal padding*/ | |
| color: #2196F3; /* Blue text color */ | |
| font-weight: bold; /* Bold text */ | |
| font-size: 1.2em; /* Larger text size */ | |
| } | |
| /* ============================================ | |
| TITLE SECTION | |
| Purpose: "Prompts on Chosen Model" header styling | |
| ============================================ */ | |
| /* Title container styling */ | |
| .title-container { | |
| width: fit-content !important; /* Width based on content */ | |
| margin: 0 auto !important; /* Center alignment */ | |
| margin-bottom: 30px !important; /* Adjust the value (30px) as needed */ | |
| padding: 2px 40px !important; /* Horizontal padding */ | |
| border: 1px solid #0066cc !important; /* Blue border */ | |
| border-radius: 10px !important; /* Rounded corners */ | |
| background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */ | |
| } | |
| /* Center align all text in title container */ | |
| .title-container * { | |
| text-align: center; /* Center text alignment */ | |
| margin: 0 !important; /* Remove margins */ | |
| line-height: 1.2 !important; /* Line height for readability */ | |
| } | |
| /* Main title styling */ | |
| .title-container h1 { | |
| font-size: 28px !important; /* Large font size */ | |
| margin-bottom: 1px !important; /* Small bottom margin */ | |
| } | |
| /* Subtitle styling */ | |
| .title-container h3 { | |
| font-size: 18px !important; /* Medium font size */ | |
| margin-bottom: 1px !important; /* Small bottom margin */ | |
| } | |
| /* Paragraph text styling in title */ | |
| .title-container p { | |
| font-size: 14px !important; /* Regular font size */ | |
| margin-bottom: 1px !important; /* Small bottom margin */ | |
| } | |
| /* ============================================ | |
| SECTION LABELS | |
| Purpose: Section header text content | |
| ============================================ */ | |
| /* Define text content for each section header */ | |
| .input-container::before { content: 'PROMPT ANALYSIS'; } | |
| .analysis-container::before { content: 'PROMPT REFINEMENT'; } | |
| .meta-container::before { content: 'REFINEMENT METHOD'; } | |
| .model-container::before { content: 'PROMPTS APPLICATION'; } | |
| .examples-container::before { content: 'EXAMPLES'; } | |
| /* ============================================ | |
| INPUT ELEMENTS | |
| Purpose: Textarea and input styling | |
| ============================================ */ | |
| /* Textarea styling */ | |
| .input-container textarea { | |
| resize: vertical !important; /* Allow vertical resizing only */ | |
| min-height: 100px !important; /* Minimum height */ | |
| max-height: 500px !important; /* Maximum height */ | |
| width: 100% !important; /* Full width */ | |
| border: 1px solid #ddd !important; /* Light gray border */ | |
| border-radius: 4px !important; /* Rounded corners */ | |
| padding: 2px !important; /* Inner spacing */ | |
| transition: all 0.3s ease !important; /* Smooth transitions */ | |
| } | |
| /* Textarea focus state */ | |
| .input-container textarea:focus { | |
| border-color: #2196F3 !important; /* Blue border when focused */ | |
| box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important; /* Subtle shadow */ | |
| } | |
| /* ============================================ | |
| RADIO BUTTONS | |
| Purpose: Selection options styling | |
| ============================================ */ | |
| /* Radio button group container */ | |
| .radio-group { | |
| background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */ | |
| padding: 10px !important; /* Inner spacing */ | |
| border-radius: 8px !important; /* Rounded corners */ | |
| border: 1px solid rgba(0, 102, 204, 0.1) !important; /* Light blue border */ | |
| display: flex !important; /* Flex layout */ | |
| justify-content: center !important; /* Center items */ | |
| flex-wrap: wrap !important; /* Allow wrapping */ | |
| gap: 8px !important; /* Space between items */ | |
| width: 100% !important; /* Full width */ | |
| } | |
| /* Radio button container */ | |
| .gradio-radio { | |
| display: flex !important; /* Flex layout */ | |
| justify-content: center !important; /* Center items */ | |
| flex-wrap: wrap !important; /* Allow wrapping */ | |
| gap: 8px !important; /* Space between items */ | |
| } | |
| /* Radio button label styling */ | |
| .gradio-radio label { | |
| display: flex !important; /* Flex layout */ | |
| align-items: center !important; /* Center vertically */ | |
| padding: 6px 12px !important; /* Inner spacing */ | |
| border: 1px solid #ddd !important; /* Light gray border */ | |
| border-radius: 4px !important; /* Rounded corners */ | |
| cursor: pointer !important; /* Pointer cursor */ | |
| background: white !important; /* White background */ | |
| margin: 4px !important; /* Outer spacing */ | |
| } | |
| /* Selected radio button styling */ | |
| .gradio-radio input[type="radio"]:checked + label { | |
| background: rgba(0, 102, 204, 0.1) !important; /* Light blue background */ | |
| border-color: #0066cc !important; /* Blue border */ | |
| color: #0066cc !important; /* Blue text */ | |
| font-weight: bold !important; /* Bold text */ | |
| } | |
| /* ============================================ | |
| BUTTONS | |
| Purpose: Interactive button styling | |
| ============================================ */ | |
| /* Base button styling */ | |
| .gradio-button { | |
| background-color: white !important; /* White background */ | |
| color: #2196F3 !important; /* Blue text */ | |
| border: 2px solid #2196F3 !important; /* Blue border */ | |
| border-radius: 4px !important; /* Rounded corners */ | |
| padding: 8px 16px !important; /* Inner spacing */ | |
| margin: 10px 0 !important; /* Vertical margin */ | |
| font-weight: bold !important; /* Bold text */ | |
| transition: all 0.3s ease !important; /* Smooth transitions */ | |
| } | |
| /* Button hover state */ | |
| .gradio-button:hover { | |
| background-color: #2196F3 !important; /* Blue background on hover */ | |
| color: white !important; /* White text on hover */ | |
| box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important; /* Shadow effect */ | |
| } | |
| /* Highlighted button state */ | |
| .button-highlight { | |
| animation: pulse 2s infinite; /* Pulsing animation */ | |
| border-color: #ff9800 !important; /* Orange border */ | |
| border-width: 3px !important; /* Thicker border */ | |
| box-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important; /* Glow effect */ | |
| } | |
| /* Pulsing animation keyframes */ | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); } /* Start state */ | |
| 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } /* Mid state */ | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } /* End state */ | |
| } | |
| /* Waiting button state */ | |
| .button-waiting { | |
| opacity: 0.6 !important; /* Reduced opacity */ | |
| } | |
| /* Completed button state */ | |
| .button-completed { | |
| border-color: #4CAF50 !important; /* Green border */ | |
| background-color: rgba(76, 175, 80, 0.1) !important; /* Light green background */ | |
| } | |
| /* ============================================ | |
| LAYOUT COMPONENTS | |
| Purpose: Basic layout element styling | |
| ============================================ */ | |
| /* Accordion styling */ | |
| .gradio-accordion { | |
| margin: 10px 0 !important; /* Vertical margin */ | |
| border: none !important; /* Remove border */ | |
| } | |
| /* Main container layout */ | |
| .gradio-container { | |
| display: flex !important; /* Flex layout */ | |
| flex-direction: column !important; /* Stack vertically */ | |
| align-items: center !important; /* Center items */ | |
| width: 100% !important; /* Full width */ | |
| max-width: 1200px !important; /* Maximum width */ | |
| margin: 2px auto !important; /* Center horizontally */ | |
| } | |
| /* Dropdown menu styling */ | |
| .gradio-dropdown { | |
| width: 100% !important; /* Full width */ | |
| max-width: 300px !important; /* Maximum width */ | |
| } | |
| /* JSON response container */ | |
| .full-response-json { | |
| margin-top: 20px !important; /* Top margin */ | |
| padding: 10px !important; /* Inner spacing */ | |
| background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */ | |
| border-radius: 8px !important; /* Rounded corners */ | |
| } | |
| /* ============================================ | |
| COMPARISON COLUMNS | |
| Purpose: Side-by-side output display | |
| ============================================ */ | |
| /* Column container styling */ | |
| .comparison-column { | |
| border: 2px solid #2196F3 !important; /* Blue border */ | |
| border-radius: 8px !important; /* Rounded corners */ | |
| padding: 4px !important; /* Inner spacing */ | |
| margin: 1px !important; /* Minimal margin */ | |
| background-color: white !important; /* White background */ | |
| flex: 1 !important; /* Equal width columns */ | |
| min-width: 300px !important; /* Minimum width */ | |
| padding-right: 2px !important; /* Add this to remove right padding */ | |
| margin-right: 2px !important; /* Add this to remove right margin */ | |
| } | |
| /* Column header styling */ | |
| .comparison-column h3 { | |
| color: #2196F3 !important; /* Blue text */ | |
| border-bottom: 1px solid #e0e0e0 !important; /* Bottom border */ | |
| padding-bottom: 2px !important; /* Bottom padding */ | |
| margin: 0 0 4px 0 !important; /* Bottom margin */ | |
| font-size: 16px !important; /* Font size */ | |
| text-align: center !important; /* Center text */ | |
| } | |
| /* Output area styling */ | |
| .comparison-output { | |
| min-height: 200px !important; /* Minimum height */ | |
| padding: 6px !important; /* Inner spacing */ | |
| background-color: #f8f9fa !important; /* Light gray background */ | |
| border: 1px solid #dee2e6 !important; /* Gray border */ | |
| border-radius: 4px !important; /* Rounded corners */ | |
| margin: 4px 0 !important; /* Vertical margin */ | |
| white-space: pre-wrap !important; /* Preserve whitespace */ | |
| word-wrap: break-word !important; /* Break long words */ | |
| font-family: monospace !important; /* Monospace font */ | |
| line-height: 1.5 !important; /* Line height */ | |
| overflow-y: auto !important; /* Vertical scroll */ | |
| width: 100% !important; /* Full width */ | |
| visibility: visible !important; /* Always visible */ | |
| opacity: 1 !important; /* Full opacity */ | |
| padding: 10px 3px !important; /* 20px top/bottom, 30px left/right */ | |
| } | |
| /* ============================================ | |
| OUTPUT ROW | |
| Purpose: Layout for output display | |
| ============================================ */ | |
| /* Output row container */ | |
| .output-row { | |
| display: flex !important; /* Flex layout */ | |
| gap: 1mm !important; /* Small gap between items */ | |
| padding: 2mm !important; /* Inner spacing */ | |
| width: 100% !important; /* Full width */ | |
| flex-wrap: wrap !important; /* Allow wrapping */ | |
| } | |
| /* ============================================ | |
| TABS | |
| Purpose: Tab navigation styling | |
| ============================================ */ | |
| /* Tab container */ | |
| .tabs { | |
| border: none !important; /* Remove border */ | |
| margin-top: 4px !important; /* Top margin */ | |
| width: 100% !important; /* Full width */ | |
| } | |
| /* Individual tab item */ | |
| .tabitem { | |
| padding: 4px !important; /* Inner spacing */ | |
| width: 100% !important; /* Full width */ | |
| } | |
| /* ============================================ | |
| TEXT CONTENT | |
| Purpose: Text display formatting | |
| ============================================ */ | |
| /* Markdown text styling */ | |
| .markdown-text { | |
| color: #333333 !important; /* Dark gray text */ | |
| line-height: 1.6 !important; /* Line height */ | |
| font-size: 14px !important; /* Font size */ | |
| margin: 4px 4px !important; /* Vertical margin */ | |
| opacity: 1 !important; /* Full opacity */ | |
| visibility: visible !important; /* Always visible */ | |
| padding: 15px !important; | |
| } | |
| /* Placeholder text for empty output */ | |
| .comparison-output:empty::before { | |
| content: 'Output will appear here' !important; /* Placeholder text */ | |
| color: #666666 !important; /* Gray text */ | |
| font-style: italic !important; /* Italic style */ | |
| } | |
| /* ============================================ | |
| BUTTON STATES | |
| Purpose: Button interaction styling | |
| ============================================ */ | |
| /* Default button state */ | |
| button { | |
| opacity: 1 !important; /* Full opacity */ | |
| pointer-events: auto !important; /* Enable interactions */ | |
| } | |
| /* Disabled button state */ | |
| button:disabled { | |
| opacity: 0.6 !important; /* Reduced opacity */ | |
| pointer-events: none !important; /* Disable interactions */ | |
| } | |
| /* ============================================ | |
| VISIBILITY | |
| Purpose: Element display control | |
| ============================================ */ | |
| /* Output content visibility */ | |
| .output-content { | |
| opacity: 1 !important; /* Full opacity */ | |
| visibility: visible !important; /* Always visible */ | |
| display: block !important; /* Block display */ | |
| } | |
| /* Output container visibility */ | |
| .output-container { | |
| display: block !important; /* Block display */ | |
| visibility: visible !important; /* Always visible */ | |
| opacity: 1 !important; /* Full opacity */ | |
| } | |
| /* ============================================ | |
| CODE BLOCKS | |
| Purpose: Code and pre-formatted text styling | |
| ============================================ */ | |
| /* Code block styling */ | |
| pre, code { | |
| background-color: #f8f9fa !important; /* Light gray background */ | |
| border: 1px solid #dee2e6 !important; /* Gray border */ | |
| border-radius: 4px !important; /* Rounded corners */ | |
| padding: 10px !important; /* Inner spacing */ | |
| margin: 5px 0 !important; /* Vertical margin */ | |
| white-space: pre-wrap !important; /* Preserve whitespace */ | |
| word-wrap: break-word !important; /* Break long words */ | |
| font-family: monospace !important; /* Monospace font */ | |
| line-height: 1.5 !important; /* Line height */ | |
| display: block !important; /* Block display */ | |
| width: 100% !important; /* Full width */ | |
| } | |
| """ |