Update app.py

app.py

@@ -162,8 +162,9 @@ import gradio as gr
 # # Custom CSS to match website style
 # # Define CSS to match a modern, professional design
 # # Define enhanced CSS for the entire layout
+
 css_tech_theme = """
- body {
+body {
     font-family: 'Roboto', sans-serif;
     background-color: #f4f6fa;
     color: #333333;
@@ -488,335 +489,8 @@ footer p {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 }
 
- """
-# css_tech_theme = """
-# body {
-#     font-family: 'Roboto', sans-serif;
-#     background-color: #f4f6fa;
-#     color: #333333;
-#     margin: 0;
-#     padding: 0;
-# }
-
-# /* Header Styling */
-# header {
-#     text-align: center;
-#     padding: 60px 20px;
-#     background: linear-gradient(135deg, #6a1b9a, #64b5f6);
-#     color: #ffffff;
-#     border-radius: 12px;
-#     margin-bottom: 30px;
-#     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-# }
-
-# header h1 {
-#     font-size: 3.5em;
-#     font-weight: bold;
-#     margin-bottom: 10px;
-# }
-
-# header h2 {
-#     font-size: 2em;
-#     margin-bottom: 15px;
-# }
-
-# header p {
-#     font-size: 1em;
-#     line-height: 1.8;
-# }
-
-# .header-buttons {
-#     display: flex;
-#     justify-content: center;
-#     gap: 15px;
-#     margin-top: 20px;
-# }
-
-# .header-buttons a {
-#     text-decoration: none;
-#     font-size: 1.5em;
-#     padding: 15px 30px;
-#     border-radius: 30px;
-#     font-weight: bold;
-#     background: #ffffff;
-#     color: #6a1b9a;
-#     transition: transform 0.3s, background 0.3s;
-#     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-# }
-
-# .header-buttons a:hover {
-#     background: #64b5f6;
-#     color: #ffffff;
-#     transform: scale(1.05);
-# }
-
-# /* Pre-Tabs Section */
-
-# .pre-tabs {
-#     text-align: center;
-#     padding: 40px 20px;
-#     background: linear-gradient(135deg, #ffffff, #f9fafb);
-#     border-top: 5px solid #64b5f6;
-#     border-bottom: 5px solid #6a1b9a;
-# }
-
-# .pre-tabs h2, .post-tabs h2 {
-#     font-size: 3em; /* Increase the size for better visibility */
-# }
-
-# .pre-tabs p, .post-tabs p {
-#     font-size: 2.5em; /* Adjust paragraph text size */
-# }
-
-# .pre-tabs h2 {
-#     color: #333333;
-#     margin-bottom: 15px;
-# }
-
-# .pre-tabs p {
-#     color: #555555;
-#     line-height: 1.8;
-# }
-
-# /* Tabs Section */
-# .tabs {
-#     margin: 0 auto;
-#     padding: 20px;
-#     background: #ffffff;
-#     border-radius: 12px;
-#     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-#     /* max-width: 1300px; /* change 1 */ */
-# }
-
-# /* Post-Tabs Section */
-# .post-tabs {
-#     text-align: center;
-#     padding: 40px 20px;
-#     background: linear-gradient(135deg, #64b5f6, #6a1b9a);
-#     color: #ffffff;
-#     border-radius: 12px;
-#     margin-top: 30px;
-# }
-
-# .post-tabs h2 {
-#     font-size: 3.4em;
-#     margin-bottom: 15px;
-# }
-
-# .post-tabs p {
-#     font-size: 2em;
-#     line-height: 1.8;
-#     margin-bottom: 20px;
-# }
-
-# .post-tabs a {
-#     text-decoration: none;
-#     font-size: 1.1em;
-#     padding: 15px 30px;
-#     border-radius: 30px;
-#     font-weight: bold;
-#     background: #ffffff;
-#     color: #6a1b9a;
-#     transition: transform 0.3s, background 0.3s;
-#     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-# }
-
-# .post-tabs a:hover {
-#     background: #6a1b9a;
-#     color: #ffffff;
-#     transform: scale(1.05);
-# }
-
-# /* Footer */
-# footer {
-#     background: linear-gradient(135deg, #6a1b9a, #8e44ad);
-#     color: #ffffff;
-#     text-align: center;
-#     padding: 40px 20px;
-#     margin-top: 30px;
-#     border-radius: 12px;
-#     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-# }
-
-# footer h2 {
-#     font-size: 1.5em;
-#     margin-bottom: 15px;
-# }
-
-# footer p {
-#     font-size: 0.8em;
-#     line-height: 1.6;
-#     margin-bottom: 20px;
-# }
-# /* Link Styling */
-# .social-links {
-#     display: flex;
-#     justify-content: center;
-#     gap: 15px; /* Space between links */
-# }
-
-# .social-link {
-#     display: inline-block;
-#     text-decoration: none;
-#     color: #ffffff;
-#     background-color: #6a1b9a; /* Purple button background */
-#     padding: 10px 20px;
-#     border-radius: 30px;
-#     font-size: 16px;
-#     font-weight: bold;
-#     transition: all 0.3s ease;
-#     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-# }
-
-# .social-link:hover {
-#     background-color: #8c52d3; /* Darker shade on hover */
-#     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-#     transform: translateY(-2px);
-# }
-
-# .social-link:active {
-#     transform: translateY(1px);
-#     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-# }
-
-# /* Submission Section Styling */
-# /* Submission Section Styling */
-# .submission-section {
-#     margin: 40px auto;
-#     padding: 30px;
-#     background: linear-gradient(135deg, #ffffff, #f9f9ff);
-#     border-radius: 12px;
-#     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-#     /*max-width: 800px; change 1*/ 
-#     text-align: center;
-    
-# }
-# .submission-section h2 {
-#     font-size: 2.5em;
-#     color: #6a1b9a;
-#     margin-bottom: 20px;
-#     font-weight: bold;
-# }
-# .submission-section p {
-#     font-size: 1.2em;
-#     color: #333;
-#     margin-bottom: 30px;
-# }
-# #submission-fields {
-#     display: flex;
-#     flex-direction: column;
-#     gap: 20px;
-#     align-items: center;
-# }
-# #submission-fields input[type="file"],
-# #submission-fields input[type="text"] {
-#     width: 90%;
-#     max-width: 400px;
-#     padding: 12px 15px;
-#     font-size: 1em;
-#     border: 2px solid #d3bce8;
-#     border-radius: 8px;
-#     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-#     transition: border-color 0.3s ease;
-# }
-# #submission-fields input[type="file"]:focus,
-# #submission-fields input[type="text"]:focus {
-#     border-color: #6a1b9a;
-#     outline: none;
-#     box-shadow: 0 0 5px rgba(106, 27, 154, 0.4);
-# }
-# #submission-results {
-#     margin-top: 20px;
-#     text-align: center;
-# }
-# #submission-buttons {
-#     display: flex;
-#     justify-content: center;
-#     gap: 15px;
-#     margin-top: 20px;
-# }
-# #submission-buttons button {
-#     padding: 10px 20px;
-#     font-size: 1em;
-#     color: #ffffff;
-#     background: #6a1b9a;
-#     border: none;
-#     border-radius: 30px;
-#     cursor: pointer;
-#     font-weight: bold;
-#     transition: background 0.3s ease, transform 0.3s ease;
-#     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-# }
-# #submission-buttons button:hover {
-#     background: #8c52d3;
-#     transform: scale(1.05);
-# }
-# #submission-buttons button:active {
-#     background: #5e1287;
-#     transform: scale(0.98);
-# }
-# /* Input Fields Styling */
-# /* Input Fields Styling */
-# #submission-fields input[type="file"],
-# #submission-fields input[type="text"] {
-#     width: 90%;
-#     max-width: 450px;
-#     padding: 12px 15px;
-#     font-size: 1em;
-#     border: 2px solid #d3bce8; /* Light purple border */
-#     border-radius: 10px;
-#     background: #ffffff;
-#     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-#     transition: all 0.3s ease;
-# }
-# #submission-fields input[type="file"]:hover,
-# #submission-fields input[type="text"]:hover {
-#     border-color: #6a1b9a; /* Darker purple on hover */
-# }
-# #submission-fields input[type="file"]:focus,
-# #submission-fields input[type="text"]:focus {
-#     border-color: #6a1b9a; /* Darker purple on focus */
-#     outline: none;
-#     box-shadow: 0 0 8px rgba(106, 27, 154, 0.5); /* Glow effect */
-# }
-# /* Evaluation Status Styling */
-# #evaluation-status {
-#     margin-top: 15px;
-#     padding: 10px 20px;
-#     font-size: 1em;
-#     border-radius: 8px;
-#     border: 2px solid #6a1b9a; /* Matches the hover color */
-#     background: #f9f7fd; /* Subtle purple background */
-#     color: #333;
-#     font-weight: bold;
-#     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
-# }
-# /* Buttons Styling */
-# #submission-buttons button {
-#     padding: 12px 25px;
-#     font-size: 1.1em;
-#     color: #ffffff;
-#     background: #6a1b9a;
-#     border: none;
-#     border-radius: 30px;
-#     cursor: pointer;
-#     font-weight: bold;
-#     transition: all 0.3s ease;
-#     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-# }
-# #submission-buttons button:hover {
-#     background: #8c52d3; /* Slightly lighter purple */
-#     transform: scale(1.05);
-#     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-# }
-# #submission-buttons button:active {
-#     background: #5e1287; /* Darker purple */
-#     transform: scale(0.98);
-#     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-# }
-
-
-# """
+
+"""
 
 # Create the Gradio Interface