Update app.py

app.py

@@ -65,191 +65,37 @@ def respond(
 
     print(f"{datetime.datetime.now()}::{messages[-1]['content']}->{response}\n")
 
+
 # Encode image to base64
 def encode_image(image_path):
     with open(image_path, "rb") as image_file:
         return base64.b64encode(image_file.read()).decode('utf-8')
 
+
 # Load and encode logos
 github_logo_encoded = encode_image("Images/github-logo.png")
 linkedin_logo_encoded = encode_image("Images/linkedin-logo.png")
 website_logo_encoded = encode_image("Images/ai-logo.png")
 
-# Custom CSS for enhanced UI
-custom_css = """
-/* General layout styling */
-body {
-    background-color: #f4f7fc;
-    font-family: 'Roboto Mono', monospace;
-}
-
-/* Chatbot container */
-.gradio-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-/* Tab styling */
-.tab-nav {
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 20px;
-}
-
-.tab-nav button {
-    font-weight: 600;
-    color: #333;
-    padding: 12px 24px;
-}
-
-.tab-nav button:hover {
-    background-color: #e6f0fa;
-}
-
-/* Chatbot area */
-.chatbot {
-    border-radius: 8px;
-    background-color: #ffffff;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    padding: 20px;
-}
-
-/* Chat messages */
-.chatbot .message {
-    border-radius: 12px;
-    margin: 10px 0;
-    padding: 15px;
-}
-
-.chatbot .user-message {
-    background-color: #e6f0fa;
-    color: #1a3c6e;
-}
-
-.chatbot .bot-message {
-    background-color: #f0f4f8;
-    color: #2d3748;
-}
-
-/* Input box */
-input[type="text"] {
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    padding: 12px;
-    font-size: 16px;
-}
-
-/* Submit button */
-button.submit {
-    background-color: #1a3c6e;
-    color: white;
-    border-radius: 8px;
-    padding: 12px 24px;
-    font-weight: 600;
-    transition: background-color 0.3s;
-}
-
-button.submit:hover {
-    background-color: #2b528b;
-}
-
-/* Example buttons */
-.examples button {
-    background-color: #edf2f7;
-    color: #2d3748;
-    border-radius: 8px;
-    margin: 5px;
-    padding: 10px 20px;
-    font-size: 14px;
-    transition: background-color 0.3s;
-}
-
-.examples button:hover {
-    background-color: #e2e8f0;
-}
-
-/* Footer styling */
-footer {
-    visibility: visible !important;
-    text-align: center;
-    margin-top: 20px;
-    padding: 20px;
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-/* Logo styling */
-footer img {
-    width: 32px;
-    height: 32px;
-    margin: 0 10px;
-    transition: transform 0.3s;
-}
-
-footer img:hover {
-    transform: scale(1.1);
-}
-
-/* Markdown content */
-.markdown {
-    line-height: 1.6;
-    color: #2d3748;
-}
-"""
-
-# Gradio interface with enhanced UI
-with gr.Blocks(
-    theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="gray",
-        neutral_hue="slate",
-        font=[gr.themes.GoogleFont("Roboto Mono"), "Arial", "sans-serif"],
-        radius_size="lg",
-        spacing_size="md",
-    ),
-    css=custom_css
-) as main:
-    gr.Markdown(
-        md.title,
-        elem_classes=["markdown"],
-        header_links=True
-    )
-    with gr.Tabs(elem_classes=["tab-nav"]):
+# Gradio interface
+with gr.Blocks(theme=gr.themes.Ocean(font=[gr.themes.GoogleFont("Roboto Mono")]), css='footer {visibility: hidden}') as main:
+    gr.Markdown(md.title)
+    with gr.Tabs():
         with gr.TabItem("My2.0", visible=True, interactive=True):
             gr.ChatInterface(
                 respond,
-                chatbot=gr.Chatbot(
-                    height=600,
-                    elem_classes=["chatbot"],
-                    bubble_full_width=False,
-                    show_copy_button=True,
-                    avatar_images=(None, "Images/ai-logo.png"),
-                    render_markdown=True
-                ),
-                textbox=gr.Textbox(
-                    placeholder="Ask me about my skills, projects, or experience!",
-                    scale=7,
-                    max_lines=5
-                ),
-                submit_btn=gr.Button("Send", variant="primary", elem_classes=["submit"]),
-                retry_btn=gr.Button("Retry", variant="secondary"),
-                undo_btn=gr.Button("Undo", variant="secondary"),
-                clear_btn=gr.Button("Clear", variant="stop"),
+                chatbot=gr.Chatbot(height=500),
                 examples=[
                     "Tell me about yourself",
-                    "Can you walk me through some of your recent projects and explain the role you played in each?",
+                    'Can you walk me through some of your recent projects and explain the role you played in each?',
                     "What specific skills do you bring to the table that would benefit our company's AI/ML initiatives?",
                     "How do you stay updated with the latest trends and advancements in AI and Machine Learning?",
-                ],
-                examples_per_page=4,
+                ]
             )
-            gr.Markdown(md.description, elem_classes=["markdown"])
+            gr.Markdown(md.description)
 
         with gr.TabItem("Resume", visible=True, interactive=True):
-            gr.Markdown(data, elem_classes=["markdown"])
+            gr.Markdown(data)
 
     gr.HTML(md.footer.format(github_logo_encoded, linkedin_logo_encoded, website_logo_encoded))