Update app.py

app.py

@@ -6,6 +6,7 @@ from groq import Groq
 from pydantic import BaseModel, Field
 from typing import Optional, Literal
 
+from custom_css import custom_css
 
 class PromptInput(BaseModel):
     text: str = Field(..., description="The initial prompt text")
@@ -92,9 +93,112 @@ class PromptRefiner:
     def apply_prompt(self, prompt: str, model: str) -> str:
         try:
             messages = [
-                {"role": "system", "content": "You are a helpful assistant. Answer in stylized version with latex format or markdown if relevant. Separate your answer into logical sections using level 2 headers (##) for sections and bolding (**) for subsections.Incorporate a variety of lists, headers, and text to make the answer visually appealing"},
-                {"role": "user", "content": prompt}
+               {
+                    "role": "system",
+                    "content": """You are a markdown formatting expert. Format your responses with proper spacing and structure following these rules:
+                    
+                    1. Paragraph Spacing:
+                    - Add TWO blank lines between major sections (##)
+                    - Add ONE blank line between subsections (###)
+                    - Add ONE blank line between paragraphs within sections
+                    - Add ONE blank line before and after lists
+                    - Add ONE blank line before and after code blocks
+                    - Add ONE blank line before and after blockquotes
+                    
+                    2. Section Formatting:
+                    # Title
+                    
+                    ## Major Section
+                    
+                    [blank line]
+                    Content paragraph 1
+                    [blank line]
+                    Content paragraph 2
+                    [blank line]
+                    
+                    ### Subsection
+                    [blank line]
+                    Content
+                    [blank line]
+                    
+                    3. List Formatting:
+                    [blank line]
+                    - List item 1
+                    - List item 2
+                    - List item 3
+                    [blank line]
+                    
+                    4. JSON Output Structure:
+                    {
+                        "section_name": "
+                            Content paragraph 1
+                            
+                            Content paragraph 2
+                            
+                            - List item 1
+                            - List item 2
+                        "
+                    }
+            
+                    Transform content while maintaining clear visual separation between elements. Each logical section should be clearly distinguished with appropriate spacing."""
+                        },
+                        {
+                            "role": "user",
+                            "content": prompt
+                }
             ]
+            '''            messages = [
+                {
+                    "role": "system",
+                    "content": """You are a professional markdown formatting expert. Transform any content into well-structured documentation following these precise rules:
+            
+                    1. Document Structure:
+                    - Start with # for main title
+                    - Use ## for major sections
+                    - Use ### for subsections
+                    - Add > blockquote for key summaries or important notes
+                    - Separate major sections with ---
+                    
+                    2. Content Types:
+                    Technical:
+                    - Use ```language for code blocks
+                    - Format inline code with `backticks`
+                    - Use $$ $$ for math equations
+                    - Create tables for comparisons or data
+                    - Use bullet points for features/characteristics
+                    
+                    Narrative:
+                    - Format dialogue with proper quotations
+                    - Use *italics* for emphasis
+                    - Keep paragraphs focused and concise
+                    
+                    Instructional:
+                    - Use numbered lists for steps
+                    - Bold key terms with **emphasis**
+                    - Add examples in code blocks
+                    - Use tables for parameter explanations
+                    
+                    3. Visual Organization:
+                    - Maximum 3 levels of headers
+                    - Short paragraphs (3-5 sentences)
+                    - Consistent spacing between sections
+                    - Clear hierarchy in information
+                    - Strategic use of line breaks
+                    
+                    4. Special Elements:
+                    - Tables for structured comparisons
+                    - Fenced code blocks with language specification
+                    - Blockquotes for summaries/key points
+                    - Lists only when necessary
+                    - LaTeX for mathematical notation
+                    
+                    Transform the content while maintaining clarity, professionalism, and readability. Focus on creating a logical flow that enhances understanding."""
+                },
+                {
+                    "role": "user",
+                    "content": prompt
+                }
+            ]'''
 
             response = self.client.chat.completions.create(
                 model=model,
@@ -113,158 +217,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++")