Update app.py

app.py

@@ -390,83 +390,89 @@ def generate_news(instructions, facts, size, tone, *args):
 # Create Gradio interface
 def create_demo():
     with gr.Blocks(css="""
+        /* Container styles */
         .gradio-container {
             max-width: 1200px !important;
             margin: auto !important;
         }
         
+        /* Header styles */
         .header {
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
         }
         
-        .content-area {
-            display: flex;
-            gap: 2rem;
+        .header h1 {
+            font-size: 1.5rem !important;
+            margin-bottom: 0.5rem !important;
         }
         
-        .input-column {
-            flex: 1;
-            max-width: 400px;
+        /* Two column layout */
+        .two-columns {
+            display: grid !important;
+            grid-template-columns: 300px 1fr !important;
+            gap: 2rem !important;
+            margin-top: 1rem !important;
         }
         
-        .tabs-column {
-            flex: 2;
+        /* Input fields */
+        .input-field {
+            margin-bottom: 1rem !important;
         }
         
-        .tab-nav {
+        /* Tab navigation */
+        .tabs > .tab-nav {
             display: flex !important;
             flex-wrap: wrap !important;
-            gap: 0.5rem !important;
-            margin-bottom: 1rem !important;
+            gap: 4px !important;
             border-bottom: 1px solid #e5e7eb !important;
             padding-bottom: 0.5rem !important;
+            margin-bottom: 1rem !important;
         }
         
-        .tab-nav button {
-            font-size: 0.875rem !important;
-            padding: 0.25rem 0.75rem !important;
-            border-radius: 0.375rem !important;
-            border: none !important;
+        .tab-nav * {
+            font-size: 0.8rem !important;
+            padding: 0.2rem 0.5rem !important;
+            border-radius: 4px !important;
             background: transparent !important;
-            color: #6b7280 !important;
+            border: 1px solid #e5e7eb !important;
+            color: #374151 !important;
         }
         
-        .tab-nav button.selected {
-            background: #f3f4f6 !important;
-            color: #111827 !important;
-        }
-        
-        .upload-box {
-            height: 150px !important;
-            min-height: 150px !important;
-            max-height: 150px !important;
-            border: 2px dashed #e5e7eb !important;
-            border-radius: 8px !important;
+        /* File upload area */
+        .file-upload {
+            max-height: 120px !important;
+            min-height: 120px !important;
+            border: 1px dashed #e5e7eb !important;
+            border-radius: 4px !important;
             display: flex !important;
             align-items: center !important;
             justify-content: center !important;
-            margin-bottom: 1rem !important;
+            margin-bottom: 0.5rem !important;
+            padding: 1rem !important;
         }
         
-        .upload-box .icon {
-            width: 40px !important;
-            height: 40px !important;
+        .file-upload svg {
+            width: 24px !important;
+            height: 24px !important;
             opacity: 0.5 !important;
         }
         
-        .file-upload {
-            padding: 1rem !important;
-            background: #f9fafb !important;
-            border-radius: 8px !important;
-            margin-bottom: 1rem !important;
+        /* Button styles */
+        .generate-btn {
+            margin-top: 1rem !important;
+            background: #4b5563 !important;
+            color: white !important;
+            padding: 0.5rem 1rem !important;
+            border-radius: 4px !important;
+            width: auto !important;
         }
         
-        .file-upload input {
-            max-width: 100% !important;
-        }
-        
-        .output-area {
-            margin-top: 2rem;
+        /* Output areas */
+        .output-box {
+            margin-top: 1rem !important;
+            border: 1px solid #e5e7eb !important;
+            border-radius: 4px !important;
+            padding: 0.5rem !important;
         }
     """) as demo:
         # Header
@@ -485,86 +491,108 @@ def create_demo():
             """)
             gr.Markdown("*Created by Camilo Vega, AI Consultant*")
 
-        with gr.Row(elem_classes=["content-area"]):
-            # Left Column - Main Controls
-            with gr.Column(elem_classes=["input-column"]):
+        with gr.Row(elem_classes=["two-columns"]):
+            # Left column - Main inputs
+            with gr.Column():
                 instructions = gr.Textbox(
                     label="News article instructions",
-                    lines=3
+                    lines=3,
+                    elem_classes=["input-field"]
                 )
                 facts = gr.Textbox(
                     label="Describe the news facts",
-                    lines=4
+                    lines=4,
+                    elem_classes=["input-field"]
                 )
                 size = gr.Number(
                     label="Content body size (in words)",
-                    value=100
+                    value=100,
+                    elem_classes=["input-field"]
                 )
                 tone = gr.Dropdown(
                     label="News tone",
                     choices=["serious", "neutral", "lighthearted"],
-                    value="neutral"
+                    value="neutral",
+                    elem_classes=["input-field"]
                 )
 
-            # Right Column - Source Inputs
-            with gr.Column(elem_classes=["tabs-column"]):
+            # Right column - Source inputs
+            with gr.Column():
                 inputs_list = [instructions, facts, size, tone]
                 
                 with gr.Tabs() as tabs:
-                    # Audio/Video Tabs
+                    # Audio/Video Sources
                     for i in range(1, 6):
-                        with gr.TabItem(f"Audio/Video {i}"):
-                            with gr.Group(elem_classes=["file-upload"]):
+                        with gr.Tab(f"Audio/Video {i}"):
+                            with gr.Group():
                                 file = gr.File(
-                                    label=f"Audio/Video {i}",
+                                    label="Upload Audio/Video",
                                     file_types=["audio", "video"],
-                                    elem_classes=["upload-box"]
+                                    elem_classes=["file-upload"]
+                                )
+                                name = gr.Textbox(
+                                    label="Name",
+                                    elem_classes=["input-field"]
+                                )
+                                position = gr.Textbox(
+                                    label="Position",
+                                    elem_classes=["input-field"]
                                 )
-                                name = gr.Textbox(label="Name")
-                                position = gr.Textbox(label="Position")
                                 inputs_list.extend([file, name, position])
 
-                    # Social Media Tabs
+                    # Social Media Sources
                     for i in range(1, 4):
-                        with gr.TabItem(f"Social Media {i}"):
-                            social_url = gr.Textbox(label="URL")
-                            social_name = gr.Textbox(label="Person/account name")
-                            social_context = gr.Textbox(label="Content context")
+                        with gr.Tab(f"Social Media {i}"):
+                            social_url = gr.Textbox(
+                                label="URL",
+                                elem_classes=["input-field"]
+                            )
+                            social_name = gr.Textbox(
+                                label="Person/account name",
+                                elem_classes=["input-field"]
+                            )
+                            social_context = gr.Textbox(
+                                label="Content context",
+                                elem_classes=["input-field"]
+                            )
                             inputs_list.extend([social_url, social_name, social_context])
 
-                    # URL Tabs
+                    # URLs
                     for i in range(1, 6):
-                        with gr.TabItem(f"URL {i}"):
-                            url = gr.Textbox(label=f"URL {i}")
+                        with gr.Tab(f"URL {i}"):
+                            url = gr.Textbox(
+                                label=f"URL {i}",
+                                elem_classes=["input-field"]
+                            )
                             inputs_list.append(url)
 
-                    # Document Tabs
+                    # Documents
                     for i in range(1, 6):
-                        with gr.TabItem(f"Document {i}"):
-                            with gr.Group(elem_classes=["file-upload"]):
-                                document = gr.File(
-                                    label=f"Document {i}",
-                                    file_types=["pdf", "docx", "xlsx", "csv"],
-                                    elem_classes=["upload-box"]
-                                )
-                                inputs_list.append(document)
-
-        # Output Section
-        with gr.Group(elem_classes=["output-area"]):
-            transcriptions_output = gr.Textbox(
-                label="Transcriptions",
-                lines=8
-            )
-            
-            generate = gr.Button(
-                "Generate Draft",
-                variant="primary"
-            )
-            
-            news_output = gr.Textbox(
-                label="Generated Draft",
-                lines=12
-            )
+                        with gr.Tab(f"Document {i}"):
+                            document = gr.File(
+                                label=f"Document {i}",
+                                file_types=["pdf", "docx", "xlsx", "csv"],
+                                elem_classes=["file-upload"]
+                            )
+                            inputs_list.append(document)
+
+        # Output areas
+        transcriptions_output = gr.Textbox(
+            label="Transcriptions",
+            lines=6,
+            elem_classes=["output-box"]
+        )
+        
+        generate = gr.Button(
+            "Generate Draft",
+            elem_classes=["generate-btn"]
+        )
+        
+        news_output = gr.Textbox(
+            label="Generated Draft",
+            lines=10,
+            elem_classes=["output-box"]
+        )
 
         # Connect the generate button
         generate.click(