Update app.py

app.py

@@ -840,41 +840,218 @@ def generate_word_document(result):
 
 
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Standardize Job Description!")
-    gr.Markdown("Identify Job Family, Occupation, Qualification, match Skills and suggest interview questions.")
 
+    title="AI-powered tool to review Job Position Description",
+css="""
+    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+/* Completely disable Gradio's dark theme */
+.gradio-container.dark {
+    --body-background-fill: white !important;
+    --background-fill-primary: white !important;
+    --background-fill-secondary: #f8f9fa !important;
+    --block-background-fill: white !important;
+    --input-background-fill: white !important;
+    --block-label-text-color: #212529 !important;
+    --body-text-color: #212529 !important;
+    --block-title-text-color: var(--primary-color) !important;
+    --border-color-primary: #dee2e6 !important;
+}
+.gradio-container.dark .gr-markdown,
+.gradio-container.dark .gr-textbox,
+.gradio-container.dark .gr-dropdown,
+.gradio-container.dark .output-section {
+    background: white !important;
+    color: #212529 !important;
+    border-color: #dee2e6 !important;
+}
+/* Base Styles */
+:root {
+    --primary-color: #0033A0;
+    --secondary-color: #e67e22;
+    --accent-color: #f59e0b;
+    --dark-color: #34495e;
+    --light-color: #ecf0f1;
+    --success-color: #27ae60;
+    --warning-color: #f39c12;
+    --danger-color: #e74c3c;
+    --text-color: #333;
+    --text-light: #7f8c8d;
+    --border-radius: 8px;
+    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --transition: all 0.3s ease;
+}
+/* Header Styles */
+.header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding: 1rem;
+}
+.header h1 {
+    margin: 0;
+    font-family: 'Lato', sans-serif;
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+.header p {
+    margin: 0.5rem 0 0;
+    font-family: 'Lato', sans-serif;
+    opacity: 0.9;
+    font-size: 1.5rem;
+    color: #4b5563;
+}
+/* Section Titles */
+.section-title {
+    display: flex;
+    align-items: left;
+    font-family: 'Lato', sans-serif;
+    gap: 0.5rem;
+    color: var(--primary-color);
+    margin: 1rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+.section-title i {
+    font-size: 1.1em;
+    color: var(--accent-color);
+}
+/* Input Section */
+.input-section {
+    background: white;
+    padding: 0.75rem 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    margin-right: 1rem;
+}
+/* Output Section */
+.output-section {
+    background: white;
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+}
+/* Form Elements */
+.gr-textbox, .gr-dropdown {
+    border: 1px solid #ddd;
+    border-radius: var(--border-radius) !important;
+    padding: 0.75rem 1rem !important;
+    transition: var(--transition);
+}
+.gr-textbox:focus, .gr-dropdown:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(44, 110, 203, 0.2) !important;
+    outline: none !important;
+}
+.gr-textbox::placeholder {
+    color: var(--text-light) !important;
+    opacity: 0.7 !important;
+}
+label {
+    font-weight: 500 !important;
+    color: var(--dark-color) !important;
+    margin-bottom: 0.5rem !important;
+    display: block !important;
+}
+/* Buttons */
+.btn-primary {
+    background: var(--primary-color) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: var(--border-radius) !important;
+    padding: 0.75rem 1.5rem !important;
+    font-weight: 500 !important;
+    transition: var(--transition) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+}
+.btn-primary:hover {
+    background: #002080 !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+}
+.btn-primary:active {
+    transform: translateY(0) !important;
+}
+/* Output Markdown */
+.gr-markdown {
+    background: #f9f9f9;
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    border-left: 4px solid var(--primary-color);
+}
+/* Debug Console */
+.gr-textbox[label="⚠️ Console Log"] {
+    font-family: monospace !important;
+    background: #2c3e50 !important;
+    color: #ecf0f1 !important;
+    border-radius: var(--border-radius) !important;
+    padding: 1rem !important;
+}
+/* Responsive Layout */
+@media (max-width: 768px) {
+    .gr-row {
+        flex-direction: column !important;
+    }
+    
+    .input-section {
+        margin-right: 0 !important;
+        margin-bottom: 1rem !important;
+    }
+}
+    """,
+    head='''
+    <meta name="description" content="AI-powered tool to review Job Position Description.">
+    <meta name="keywords" content="HR, Position, Job, Skills, Qualification, Interview">
+    <meta name="author" content="Edouard Legoupil | IOM Chief Data Officer">
+    <link rel="author" href="https://edouard-legoupil.github.io/">
+    <meta property="og:title" content="AI-powered tool to review Job Position Description">
+    <meta property="og:description" content="AI-powered tool to review Job Position Description">
+    <meta property="og:type" content="website">
+    <link rel="icon" href="https://www.iom.int/themes/custom/phoenix/favicon.ico" type="image/vnd.microsoft.icon">
+    <link rel="apple-touch-icon" href="https://www.iom.int/sites/g/files/tmzbdl486/files/favicon.ico">
+    '''
+) as demo:
+
+    # Header section
+    with gr.Column():
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("""
+                <div class="header">
+                    <h1>Position Description Review (Demo)</h1>
+                    <p>Use AI to standardise an initial draft position description and identify related Job Family, Occupation, Qualification, match Skills and suggest interview questions.</p>
+                </div>
+                """)
+                
     with gr.Row():
         with gr.Column():
             file_input = gr.File(label="Upload a Post Description PDF file", file_types=[".pdf"])
-            submit_btn = gr.Button("Analyse Post Description")
+            submit_btn = gr.Button(
+                        value="✨ Analyse Post Description",
+                        variant="primary",
+                        elem_classes="btn-primary"
+            )
 
     with gr.Row():
         with gr.Column():
-            file_name_output = gr.Textbox(label="File Name", interactive=False)
-            responsibilities_output = gr.Textbox(label="Responsibilities", lines=5, interactive=False)
+            responsibilities_output = gr.Textbox(label="List of Responsibilities used for the review", lines=5, interactive=False)
             job_family_output = gr.Textbox(label="Classified Job Family", interactive=False)
-            qualification_output = gr.Textbox(label="Qualification", lines=5, interactive=False)
-
+            
     with gr.Row():
         with gr.Column():
             gr.Markdown("## CCOG Levels")
             ccoq_levels_output = gr.JSON(label="CCOG Levels")
-
-    with gr.Row():
         with gr.Column():
-            gr.Markdown("## Interview Questions")
-            interview_output = gr.Textbox(label="Interview Questions", lines=10, interactive=False)
-
+            gr.Markdown("## ESCO Levels")
+            esco_levels_output = gr.JSON(label="ESCO Levels")
+            
     with gr.Row():
         with gr.Column():
             gr.Markdown("## Skills")
             skills_output = gr.JSON(label="Skills")
 
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("## ESCO Levels")
-            esco_levels_output = gr.JSON(label="ESCO Levels")
 
     with gr.Row():
         with gr.Column():
@@ -883,16 +1060,29 @@ with gr.Blocks() as demo:
 
     with gr.Row():
         with gr.Column():
-            download_btn = gr.Button("Download Word Document")
+            qualification_output = gr.Textbox(label="Qualification", lines=5, interactive=False)
+
+
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Interview Questions")
+            interview_output = gr.Textbox(label="Interview Questions", lines=10, interactive=False)
+
+
+
+    with gr.Row():
+        with gr.Column():
+            download_btn = gr.Button(
+                        value="📄 Download Word Document",
+                        variant="primary",
+                        elem_classes="btn-primary")
 
     if DEBUG:
         with gr.Row():
             with gr.Column():
-                gr.Markdown("### Debug Console")
                 debug_console = gr.Textbox(
-                    label="",
+                    label="⚠️ Execution Log",
                     interactive=False,
-                    lines=15,
                     elem_classes=["debug-console"]
                 )