Update app.py

app.py

@@ -65,351 +65,39 @@ 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 = """
-:root {
-    --primary-color: #2563eb;
-    --secondary-color: #1e40af;
-    --accent-color: #3b82f6;
-    --background-color: #f8fafc;
-    --text-color: #1e293b;
-    --border-radius: 12px;
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background-color: var(--background-color);
-    color: var(--text-color);
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-.header {
-    text-align: center;
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    border-radius: var(--border-radius);
-    color: white;
-    box-shadow: var(--shadow);
-}
-
-.header h1 {
-    font-size: 2.5rem;
-    margin-bottom: 0.5rem;
-    font-weight: 700;
-}
-
-.header p {
-    font-size: 1.1rem;
-    opacity: 0.9;
-}
-
-.tabs {
-    margin-bottom: 1.5rem;
-}
-
-.tab-button {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    border: none;
-    background-color: transparent;
-    color: var(--text-color);
-    cursor: pointer;
-    transition: all 0.3s ease;
-    border-bottom: 3px solid transparent;
-}
-
-.tab-button.active {
-    color: var(--primary-color);
-    border-bottom: 3px solid var(--primary-color);
-}
-
-.chatbot-container {
-    background-color: white;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow);
-    overflow: hidden;
-}
-
-.chatbot-header {
-    background-color: var(--primary-color);
-    color: white;
-    padding: 1rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-}
-
-.chatbot-header .status {
-    width: 10px;
-    height: 10px;
-    background-color: #10b981;
-    border-radius: 50%;
-    margin-right: 8px;
-}
-
-.chatbot-messages {
-    height: 500px;
-    overflow-y: auto;
-    padding: 1rem;
-}
-
-.message {
-    margin-bottom: 1rem;
-    max-width: 80%;
-}
-
-.message.user {
-    margin-left: auto;
-    background-color: var(--primary-color);
-    color: white;
-    border-radius: 18px 18px 0 18px;
-    padding: 0.75rem 1rem;
-}
-
-.message.bot {
-    background-color: #f1f5f9;
-    border-radius: 18px 18px 18px 0;
-    padding: 0.75rem 1rem;
-}
-
-.chatbot-input {
-    display: flex;
-    padding: 1rem;
-    border-top: 1px solid #e2e8f0;
-}
-
-.chatbot-input input {
-    flex: 1;
-    padding: 0.75rem 1rem;
-    border: 1px solid #e2e8f0;
-    border-radius: 24px;
-    font-size: 1rem;
-}
-
-.chatbot-input button {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 24px;
-    padding: 0.75rem 1.5rem;
-    margin-left: 0.5rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.chatbot-input button:hover {
-    background-color: var(--secondary-color);
-}
-
-.resume-container {
-    background-color: white;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow);
-    padding: 2rem;
-}
-
-.resume-section {
-    margin-bottom: 1.5rem;
-}
-
-.resume-section h2 {
-    color: var(--primary-color);
-    border-bottom: 2px solid #e2e8f0;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
-}
-
-.footer {
-    margin-top: 2rem;
-    text-align: center;
-    padding: 1.5rem;
-    background-color: white;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow);
-}
-
-.social-links {
-    display: flex;
-    justify-content: center;
-    gap: 1.5rem;
-    margin-top: 1rem;
-}
-
-.social-link {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-    color: var(--text-color);
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-
-.social-link:hover {
-    color: var(--primary-color);
-}
-
-.social-link img {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-}
-
-.examples-container {
-    margin-top: 1.5rem;
-}
-
-.example-button {
-    background-color: #f1f5f9;
-    border: 1px solid #e2e8f0;
-    border-radius: 24px;
-    padding: 0.5rem 1rem;
-    margin: 0.25rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.example-button:hover {
-    background-color: #e2e8f0;
-}
-
-/* Gradio overrides */
-footer {visibility: hidden !important;}
-.gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
-}
-.tabs > div:first-child {
-    border-bottom: 1px solid #e2e8f0;
-    padding-bottom: 0.5rem;
-}
-.tabs > div:first-child button {
-    font-weight: 600;
-}
-.chat-bot-container .message-wrap {
-    padding: 0.75rem !important;
-}
-.chat-bot-container .user-message {
-    background-color: var(--primary-color) !important;
-    border-radius: 18px 18px 0 18px !important;
-}
-.chat-bot-container .bot-message {
-    background-color: #f1f5f9 !important;
-    border-radius: 18px 18px 18px 0 !important;
-}
-"""
-
-# Gradio interface with enhanced UI
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="blue"), css=custom_css) as main:
-    with gr.Row():
-        with gr.Column():
-            gr.HTML("""
-            <div class="header">
-                <h1>SARATH's Interactive Portfolio</h1>
-                <p>BTech Final Year Student | AI & ML Enthusiast | Job Seeker</p>
-            </div>
-            """)
-
-    with gr.Tabs() as tabs:
-        with gr.TabItem("Chat with SARATH", id="chat-tab"):
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML("""
-                    <div class="chatbot-header">
-                        <div class="status"></div>
-                        <span>SARATH's AI Assistant</span>
-                    </div>
-                    """)
-
-            chatbot = gr.Chatbot(
-                height=500,
-                bubble=True,
-                avatar_images=("Images/user-avatar.png", "Images/sarath-avatar.png"),
-                show_label=False,
-                elem_classes="chat-bot-container"
-            )
-
-            with gr.Row():
-                msg = gr.Textbox(
-                    placeholder="Ask me anything about SARATH's skills, projects, or experience...",
-                    show_label=False,
-                    container=False
-                )
-                submit_btn = gr.Button("Send", variant="primary")
-
-            gr.HTML("""
-            <div class="examples-container">
-                <h3>Try asking about:</h3>
-            </div>
-            """)
-
-            examples = gr.Examples(
+# 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=500),
                 examples=[
                     "Tell me about yourself",
                     '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?",
-                ],
-                inputs=msg,
-                label="Example Questions"
+                ]
             )
+            gr.Markdown(md.description)
 
-            submit_btn.click(respond, [msg, chatbot], [chatbot])
-            msg.submit(respond, [msg, chatbot], [chatbot])
-
-            gr.HTML(md.description)
-
-        with gr.TabItem("Resume", id="resume-tab"):
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML(f"""
-                    <div class="resume-container">
-                        <div class="resume-section">
-                            {data}
-                        </div>
-                    </div>
-                    """)
+        with gr.TabItem("Resume", visible=True, interactive=True):
+            gr.Markdown(data)
 
-    gr.HTML(f"""
-    <div class="footer">
-        <p>Connect with SARATH</p>
-        <div class="social-links">
-            <a href="#" class="social-link">
-                <img src="data:image/png;base64,{github_logo_encoded}" alt="GitHub">
-                <span>GitHub</span>
-            </a>
-            <a href="#" class="social-link">
-                <img src="data:image/png;base64,{linkedin_logo_encoded}" alt="LinkedIn">
-                <span>LinkedIn</span>
-            </a>
-            <a href="#" class="social-link">
-                <img src="data:image/png;base64,{website_logo_encoded}" alt="Website">
-                <span>Portfolio</span>
-            </a>
-        </div>
-        <p class="copyright">© {datetime.datetime.now().year} SARATH. All rights reserved.</p>
-    </div>
-    """)
+    gr.HTML(md.footer.format(github_logo_encoded, linkedin_logo_encoded, website_logo_encoded))
 
 if __name__ == "__main__":
-    main.launch(share=True)
+    main.launch(share=True)