Update app.py

app.py

@@ -150,91 +150,106 @@ language_names = {
 # Get voice list (this should be run once at startup)
 voice_dict = asyncio.run(get_voice_list())
 
+# Layout
+
 # Layout
 app.layout = dbc.Container([
     html.H1("AI Podcast Generator", className="my-4"),
     
-    dbc.Card([
-        dbc.CardBody([
-            dbc.Textarea(id="content-input", placeholder="Paste your content or upload a document", rows=5, className="my-3"),
-            dcc.Upload(
-                id='document-upload',
-                children=html.Div(['Drag and Drop or ', html.A('Select a File')]),
-                style={
-                    'width': '100%',
-                    'height': '60px',
-                    'lineHeight': '60px',
-                    'borderWidth': '1px',
-                    'borderStyle': 'dashed',
-                    'borderRadius': '5px',
-                    'textAlign': 'center',
-                    'margin': '10px 0'
-                }
-            ),
-            dbc.RadioItems(
-                id="duration",
-                options=[
-                    {"label": "1-5 min", "value": "1-5 min"},
-                    {"label": "5-10 min", "value": "5-10 min"},
-                    {"label": "10-15 min", "value": "10-15 min"}
-                ],
-                value="1-5 min",
-                inline=True,
-                className="my-3"
-            ),
-            dbc.RadioItems(
-                id="num-hosts",
-                options=[
-                    {"label": "1 host", "value": 1},
-                    {"label": "2 hosts", "value": 2}
-                ],
-                value=2,
-                inline=True,
-                className="my-3"
-            ),
-            dbc.Select(
-                id="lang1-select", 
-                options=[{"label": lang, "value": lang} for lang in language_names.values()], 
-                value="English (United States)",
-                className="my-2"
-            ),
-            dbc.Select(
-                id="voice1-select", 
-                value="en-US, AvaNeural",
-                className="my-2"
-            ),
-            dbc.Select(
-                id="lang2-select", 
-                options=[{"label": lang, "value": lang} for lang in language_names.values()], 
-                value="English (United States)",
-                className="my-2"
-            ),
-            dbc.Select(
-                id="voice2-select", 
-                value="en-US, BrianNeural",
-                className="my-2"
-            ),
-            dbc.Button("Generate Script", id="generate-btn", color="primary", className="mt-3"),
-            dcc.Loading(
-                id="loading-script",
-                type="default",
-                children=[
-                    dbc.Progress(id="script-progress", value=0, className="my-3"),
-                    dbc.Textarea(id="script-output", rows=10, className="my-3"),
-                ]
-            ),
-            dbc.Button("Generate Podcast", id="generate-podcast-btn", color="success", className="mt-3"),
-            dcc.Loading(
-                id="loading-podcast",
-                type="default",
-                children=[
-                    dbc.Progress(id="podcast-progress", value=0, className="my-3"),
-                    html.Div(id="audio-output", className="my-3"),
-                ]
-            ),
-            dcc.Download(id="download-audio")
-        ])
-    ])
+    dbc.Row([
+        # Left Column
+        dbc.Col([
+            dbc.Card([
+                dbc.CardBody([
+                    dcc.Loading(
+                        id="loading-script",
+                        type="default",
+                        children=[
+                            dbc.Progress(id="script-progress", value=0, className="my-3"),
+                            dbc.Textarea(id="script-output", rows=20, className="my-3"),
+                        ]
+                    ),
+                    dbc.Button("Generate Podcast", id="generate-podcast-btn", color="success", className="mt-3"),
+                    dcc.Loading(
+                        id="loading-podcast",
+                        type="default",
+                        children=[
+                            dbc.Progress(id="podcast-progress", value=0, className="my-3"),
+                            html.Div(id="audio-output", className="my-3"),
+                        ]
+                    ),
+                    dcc.Download(id="download-audio")
+                ])
+            ])
+        ], width=5),  # Adjust the width as needed
+        
+        # Right Column
+        dbc.Col([
+            dbc.Card([
+                dbc.CardBody([
+                    dbc.Textarea(id="content-input", placeholder="Paste your content or upload a document", rows=5, className="my-3"),
+                    dcc.Upload(
+                        id='document-upload',
+                        children=html.Div(['Drag and Drop or ', html.A('Select a File')]),
+                        style={
+                            'width': '100%',
+                            'height': '60px',
+                            'lineHeight': '60px',
+                            'borderWidth': '1px',
+                            'borderStyle': 'dashed',
+                            'borderRadius': '5px',
+                            'textAlign': 'center',
+                            'margin': '10px 0'
+                        }
+                    ),
+                    dbc.RadioItems(
+                        id="duration",
+                        options=[
+                            {"label": "1-5 min", "value": "1-5 min"},
+                            {"label": "5-10 min", "value": "5-10 min"},
+                            {"label": "10-15 min", "value": "10-15 min"}
+                        ],
+                        value="1-5 min",
+                        inline=True,
+                        className="my-3"
+                    ),
+                    dbc.RadioItems(
+                        id="num-hosts",
+                        options=[
+                            {"label": "1 host", "value": 1},
+                            {"label": "2 hosts", "value": 2}
+                        ],
+                        value=2,
+                        inline=True,
+                        className="my-3"
+                    ),
+                    dbc.Select(
+                        id="lang1-select", 
+                        options=[{"label": lang, "value": lang} for lang in language_names.values()], 
+                        value="English (United States)",
+                        className="my-2"
+                    ),
+                    dbc.Select(
+                        id="voice1-select", 
+                        value="en-US-AriaNeural",
+                        className="my-2"
+                    ),
+                    dbc.Select(
+                        id="lang2-select", 
+                        options=[{"label": lang, "value": lang} for lang in language_names.values()], 
+                        value="English (United States)",
+                        className="my-2"
+                    ),
+                    dbc.Select(
+                        id="voice2-select", 
+                        value="en-US-BrianNeural",
+                        className="my-2"
+                    ),
+                    dbc.Button("Generate Script", id="generate-btn", color="primary", className="mt-3"),
+                ])
+            ])
+        ], width=7),  # Adjust the width as needed
+    ]),
 ], fluid=True)
 
 # Callbacks (continued)