diff --git a/week2/community-contributions/day_5_figma_assistance.ipynb b/week2/community-contributions/day_5_figma_assistance.ipynb
index bb30876..d563a0a 100644
--- a/week2/community-contributions/day_5_figma_assistance.ipynb
+++ b/week2/community-contributions/day_5_figma_assistance.ipynb
@@ -98,86 +98,8 @@
     "        print(f\"Error generating audio with OpenAI: {str(e)}\")\n",
     "        return None\n",
     "\n",
-    "# def talker_gemini(message):\n",
-    "#     \"\"\"Generate audio from text using Gemini TTS\"\"\"\n",
-    "#     try:\n",
-    "#         # Try the newer Gemini 2.0 TTS API\n",
-    "#         model = google.generativeai.GenerativeModel(gemini_model)\n",
-    "        \n",
-    "#         # Truncate message for TTS\n",
-    "#         truncated_message = truncate_for_tts(message)\n",
-    "        \n",
-    "#         # Generate audio using Gemini with simplified config\n",
-    "#         response = model.generate_content(\n",
-    "#             truncated_message,\n",
-    "#             generation_config={\n",
-    "#                 \"response_modalities\": [\"AUDIO\"]\n",
-    "#             }\n",
-    "#         )\n",
-    "        \n",
-    "#         # Check if response has audio data\n",
-    "#         if hasattr(response, 'audio_data') and response.audio_data:\n",
-    "#             output_filename = \"output_audio_gemini.wav\"\n",
-    "#             with open(output_filename, \"wb\") as f:\n",
-    "#                 f.write(response.audio_data)\n",
-    "#             return output_filename\n",
-    "#         else:\n",
-    "#             print(\"Gemini response does not contain audio data\")\n",
-    "#             raise Exception(\"No audio data in Gemini response\")\n",
-    "            \n",
-    "#     except Exception as e:\n",
-    "#         print(f\"Error generating audio with Gemini: {str(e)}\")\n",
-    "#         print(\"Gemini TTS not available, using OpenAI TTS with different voice\")\n",
-    "#         # Use OpenAI TTS but with a different voice to distinguish\n",
-    "#         try:\n",
-    "#             # Truncate message for TTS\n",
-    "#             truncated_message = truncate_for_tts(message)\n",
-    "            \n",
-    "#             response = client.audio.speech.create(\n",
-    "#                 model=\"tts-1\",\n",
-    "#                 voice=\"alloy\",  # Different voice to indicate it's for Gemini responses\n",
-    "#                 input=truncated_message\n",
-    "#             )\n",
-    "#             audio_stream = BytesIO(response.content)\n",
-    "#             output_filename = \"output_audio_gemini_fallback.mp3\"\n",
-    "#             with open(output_filename, \"wb\") as f:\n",
-    "#                 f.write(audio_stream.read())\n",
-    "#             return output_filename\n",
-    "#         except Exception as fallback_error:\n",
-    "#             print(f\"Fallback TTS also failed: {str(fallback_error)}\")\n",
-    "#             return None\n",
-    "\n",
-    "# def talker_claude(message):\n",
-    "#     \"\"\"Generate audio from text using Claude TTS (fallback to OpenAI)\"\"\"\n",
-    "#     try:\n",
-    "#         # Truncate message for TTS\n",
-    "#         truncated_message = truncate_for_tts(message)\n",
-    "        \n",
-    "#         # Claude doesn't have native TTS, so we'll use OpenAI TTS\n",
-    "#         # but with a different filename to distinguish\n",
-    "#         response = client.audio.speech.create(\n",
-    "#             model=\"tts-1\",\n",
-    "#             voice=\"nova\",  # Different voice for Claude responses\n",
-    "#             input=truncated_message\n",
-    "#         )\n",
-    "\n",
-    "#         audio_stream = BytesIO(response.content)\n",
-    "#         output_filename = \"output_audio_claude.mp3\"\n",
-    "#         with open(output_filename, \"wb\") as f:\n",
-    "#             f.write(audio_stream.read())\n",
-    "\n",
-    "#         return output_filename\n",
-    "#     except Exception as e:\n",
-    "#         print(f\"Error generating audio for Claude: {str(e)}\")\n",
-    "#         return None\n",
-    "\n",
     "def talker(message, model_choice):\n",
     "    \"\"\"Generate audio from text using selected model\"\"\"\n",
-    "    # if model_choice == \"Google Gemini (2.0 Flash)\":\n",
-    "        # return talker_gemini(message)\n",
-    "    # elif model_choice == \"Claude (Sonnet 4)\":\n",
-    "        # return talker_claude(message)\n",
-    "    # else:\n",
     "    return talker_openai(message)\n",
     "\n",
     "def get_figma_help_openai(user_question, chat_history):\n",
@@ -287,16 +209,13 @@
     "    else:\n",
     "        return \"Please select a valid model.\"\n",
     "\n",
-    "\n",
     "custom_css = \"\"\"\n",
-    "\n",
     "/* Chat area styling */\n",
     ".styled-chat {\n",
     "    border-radius: 15px !important;\n",
     "    box-shadow: 0 4px 12px var(--shadow-color) !important;\n",
     "    border: 1px solid var(--border-color) !important;\n",
     "    padding: 10px;\n",
-    "    # background-color: #fff;\n",
     "}\n",
     "\n",
     "/* Audio player styling */\n",
@@ -307,45 +226,136 @@
     "    padding: 10px;\n",
     "    background-color: var(--background-fill-secondary) !important;\n",
     "}\n",
+    "\n",
+    "/* Header styling */\n",
+    ".header-container {\n",
+    "    text-align: center;\n",
+    "    padding: 20px;\n",
+    "    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n",
+    "    border-radius: 15px;\n",
+    "    margin-bottom: 20px;\n",
+    "}\n",
+    "\n",
+    ".header-title {\n",
+    "    color: white;\n",
+    "    margin: 0;\n",
+    "    font-size: 2.5em;\n",
+    "}\n",
+    "\n",
+    ".header-subtitle {\n",
+    "    color: #f0f0f0;\n",
+    "    margin: 10px 0 0 0;\n",
+    "    font-size: 1.2em;\n",
+    "}\n",
+    "\n",
+    "/* Features section styling */\n",
+    ".features-container {\n",
+    "    background: #f8f9fa;\n",
+    "    padding: 20px;\n",
+    "    border-radius: 10px;\n",
+    "    border-left: 4px solid #667eea;\n",
+    "}\n",
+    "\n",
+    ".features-title {\n",
+    "    color: #333;\n",
+    "    margin-top: 0;\n",
+    "}\n",
+    "\n",
+    ".features-grid {\n",
+    "    display: grid;\n",
+    "    grid-template-columns: 1fr 1fr;\n",
+    "    gap: 15px;\n",
+    "    margin-top: 15px;\n",
+    "}\n",
+    "\n",
+    ".feature-item {\n",
+    "    color: #333;\n",
+    "    margin: 10px 0;\n",
+    "}\n",
+    "\n",
+    ".feature-title {\n",
+    "    color: #667eea;\n",
+    "}\n",
+    "\n",
+    ".feature-description {\n",
+    "    color: #666;\n",
+    "}\n",
+    "\n",
+    "/* Pro tip styling */\n",
+    ".protip-container {\n",
+    "    text-align: center;\n",
+    "    margin-top: 20px;\n",
+    "    padding: 15px;\n",
+    "    background: #e8f4f8;\n",
+    "    border-radius: 8px;\n",
+    "}\n",
+    "\n",
+    ".protip-text {\n",
+    "    margin: 0;\n",
+    "    color: #2c5aa0 !important;\n",
+    "    font-weight: 500;\n",
+    "}\n",
+    "\n",
+    "/* Quick start questions styling */\n",
+    ".quickstart-container {\n",
+    "    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n",
+    "    padding: 15px 20px;\n",
+    "    border-radius: 10px;\n",
+    "    margin: 20px 0;\n",
+    "}\n",
+    "\n",
+    ".quickstart-title {\n",
+    "    color: white !important;\n",
+    "    margin: 0;\n",
+    "    font-size: 1.3em;\n",
+    "    text-align: center;\n",
+    "}\n",
+    "\n",
+    ".quickstart-subtitle {\n",
+    "    color: #f0f8ff !important;\n",
+    "    margin: 5px 0 0 0;\n",
+    "    text-align: center;\n",
+    "    font-size: 0.9em;\n",
+    "}\n",
     "\"\"\"\n",
     "\n",
     "# Create Gradio interface\n",
-    "with gr.Blocks(title=\"Figma Onboarding Assistant\", theme=gr.themes.Soft(),css=custom_css) as demo:\n",
-    "    gr.Markdown(\n",
+    "with gr.Blocks(title=\"Figma Onboarding Assistant\", theme=gr.themes.Soft(), css=custom_css) as demo:\n",
+    "    gr.HTML(\n",
     "        \"\"\"\n",
-    "        <div style=\"text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; margin-bottom: 20px;\">\n",
-    "            <h1 style=\"color: white; margin: 0; font-size: 2.5em;\">🎨 Figma Onboarding Assistant</h1>\n",
-    "            <p style=\"color: #f0f0f0; margin: 10px 0 0 0; font-size: 1.2em;\">Your AI-powered Figma learning companion</p>\n",
+    "        <div class=\"header-container\">\n",
+    "            <h1 class=\"header-title\">🎨 Figma Onboarding Assistant</h1>\n",
+    "            <p class=\"header-subtitle\">Your AI-powered Figma learning companion</p>\n",
     "        </div>\n",
     "        \n",
-    "        <div style=\"background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #667eea;\">\n",
-    "            <h3 style=\"color: #333; margin-top: 0;\">✨ What I can help you with:</h3>\n",
-    "            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px;\">\n",
+    "        <div class=\"features-container\">\n",
+    "            <h3 class=\"features-title\">✨ What I can help you with:</h3>\n",
+    "            <div class=\"features-grid\">\n",
     "                <div>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">🚀 Getting Started</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Interface overview, basic navigation</span></p>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">🛠️ Tools & Features</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Pen tool, shapes, text, layers</span></p>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">📐 Auto Layout</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Responsive design techniques</span></p>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">🔗 Prototyping</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Interactions and animations</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🚀 Getting Started</strong><br/>\n",
+    "                    <span class=\"feature-description\">Interface overview, basic navigation</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🛠️ Tools & Features</strong><br/>\n",
+    "                    <span class=\"feature-description\">Pen tool, shapes, text, layers</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">📐 Auto Layout</strong><br/>\n",
+    "                    <span class=\"feature-description\">Responsive design techniques</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🔗 Prototyping</strong><br/>\n",
+    "                    <span class=\"feature-description\">Interactions and animations</span></p>\n",
     "                </div>\n",
     "                <div>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">🧩 Components</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Creating reusable elements</span></p>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">👥 Collaboration</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Sharing and team workflows</span></p>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">📚 Design Systems</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Libraries and style guides</span></p>\n",
-    "                    <p style=\"color: #333; margin: 10px 0;\"><strong style=\"color: #667eea;\">⚡ Shortcuts</strong><br/>\n",
-    "                    <span style=\"color: #666;\">Productivity tips and tricks</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🧩 Components</strong><br/>\n",
+    "                    <span class=\"feature-description\">Creating reusable elements</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">👥 Collaboration</strong><br/>\n",
+    "                    <span class=\"feature-description\">Sharing and team workflows</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">📚 Design Systems</strong><br/>\n",
+    "                    <span class=\"feature-description\">Libraries and style guides</span></p>\n",
+    "                    <p class=\"feature-item\"><strong class=\"feature-title\">⚡ Shortcuts</strong><br/>\n",
+    "                    <span class=\"feature-description\">Productivity tips and tricks</span></p>\n",
     "                </div>\n",
     "            </div>\n",
     "        </div>\n",
     "        \n",
-    "        <div style=\"text-align: center; margin-top: 20px; padding: 15px; background: #e8f4f8; border-radius: 8px;\">\n",
-    "            <p style=\"margin: 0; color: #2c5aa0 !important; font-weight: 500;\">💡 Pro tip: Ask specific questions like \\\"How do I create a button component?\\\" for the best results!</p>\n",
+    "        <div class=\"protip-container\">\n",
+    "            <p class=\"protip-text\">💡 Pro tip: Ask specific questions like \"How do I create a button component?\" for the best results!</p>\n",
     "        </div>\n",
     "        \"\"\"\n",
     "    )\n",
@@ -371,14 +381,15 @@
     "    \n",
     "\n",
     "    # Example questions\n",
-    "    gr.Markdown(\n",
+    "    gr.HTML(\n",
     "        \"\"\"\n",
-    "        <div style=\"background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 15px 20px; border-radius: 10px; margin: 20px 0;\">\n",
-    "            <h3 style=\"color: white !important; margin: 0; font-size: 1.3em; text-align: center;\">🚀 Quick Start Questions</h3>\n",
-    "            <p style=\"color: #f0f8ff !important; margin: 5px 0 0 0; text-align: center; font-size: 0.9em;\">Click any question below to get started instantly!</p>\n",
+    "        <div class=\"quickstart-container\">\n",
+    "            <h3 class=\"quickstart-title\">🚀 Quick Start Questions</h3>\n",
+    "            <p class=\"quickstart-subtitle\">Click any question below to get started instantly!</p>\n",
     "        </div>\n",
     "        \"\"\"\n",
     "    )\n",
+    "    \n",
     "    with gr.Row():\n",
     "        example_btns = [\n",
     "            gr.Button(\n",
@@ -405,7 +416,6 @@
     "\n",
     "    # Your components with simple styling\n",
     "    chatbot = gr.Chatbot(\n",
-    "        # value=[],\n",
     "        type=\"messages\",\n",
     "        height=400,\n",
     "        placeholder=\"Ask me anything about Figma! For example: 'How do I create a component?' or 'What are frames in Figma?'\",\n",
@@ -418,20 +428,6 @@
     "        elem_classes=[\"styled-audio\"]\n",
     "    )\n",
     "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "\n",
-    "    last_response = gr.State(\"\")\n",
-    "\n",
-    "    \n",
     "    last_response = gr.State(\"\")\n",
     "    current_model = gr.State(\"OpenAI (GPT-3.5)\")\n",
     "    \n",
@@ -494,12 +490,7 @@
     "        )\n",
     "\n",
     "# Launch the app\n",
-    "# if __name__ == \"__main__\":\n",
-    "    demo.launch(\n",
-    "        share=True,\n",
-    "        # server_name=\"0.0.0.0\",\n",
-    "        # server_port=7860\n",
-    "    )"
+    "demo.launch(share=True)"
    ]
   },
   {
diff --git a/week2/community-contributions/day_5_onboarding_assistance.ipynb b/week2/community-contributions/day_5_onboarding_assistance.ipynb
deleted file mode 100644
index 943d69c..0000000
--- a/week2/community-contributions/day_5_onboarding_assistance.ipynb
+++ /dev/null
@@ -1,526 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "dc49e5ae",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from openai import OpenAI\n",
-    "from dotenv import load_dotenv\n",
-    "import os\n",
-    "load_dotenv()\n",
-    "import gradio as gr\n",
-    "import base64\n",
-    "from io import BytesIO\n",
-    "from PIL import Image\n",
-    "from IPython.display import Audio, display\n",
-    "import google.generativeai\n",
-    "import anthropic\n",
-    "\n",
-    "client = OpenAI(api_key=os.getenv(\"OPENAI_API_KEY\"))\n",
-    "\n",
-    "# Configure Gemini\n",
-    "google.generativeai.configure(api_key=os.getenv(\"GOOGLE_API_KEY\"))\n",
-    "\n",
-    "# Configure Claude\n",
-    "claude = anthropic.Anthropic(api_key=os.getenv(\"ANTHROPIC_API_KEY\"))\n",
-    "openAI_model = \"gpt-3.5-turbo\"\n",
-    "gemini_model = \"gemini-2.0-flash\"\n",
-    "claude_model = \"claude-sonnet-4-20250514\"\n",
-    "openai_audio_model = \"tts-1\"\n",
-    "\n",
-    "# Figma onboarding knowledge base\n",
-    "FIGMA_KNOWLEDGE = \"\"\"\n",
-    "You are a helpful Figma onboarding assistant. You help new users learn Figma's core features and workflows.\n",
-    "\n",
-    "Key Figma concepts to help users with:\n",
-    "- Interface overview (toolbar, layers panel, properties panel)\n",
-    "- Creating and editing frames\n",
-    "- Working with shapes, text, and components\n",
-    "- Using the pen tool for custom shapes\n",
-    "- Auto Layout for responsive designs\n",
-    "- Components and variants\n",
-    "- Prototyping and interactions\n",
-    "- Collaboration features\n",
-    "- Design systems and libraries\n",
-    "- Exporting assets\n",
-    "- Keyboard shortcuts\n",
-    "\n",
-    "Always provide clear, step-by-step instructions and mention relevant keyboard shortcuts when applicable.\n",
-    "\"\"\"\n",
-    "\n",
-    "promts = {\n",
-    "    \"Charlie\": FIGMA_KNOWLEDGE\n",
-    "}\n",
-    "\n",
-    "def truncate_for_tts(text, max_length=4000):\n",
-    "    \"\"\"Truncate text for TTS while preserving complete sentences\"\"\"\n",
-    "    if len(text) <= max_length:\n",
-    "        return text\n",
-    "    \n",
-    "    # Try to truncate at sentence boundaries\n",
-    "    sentences = text.split('. ')\n",
-    "    truncated = \"\"\n",
-    "    \n",
-    "    for sentence in sentences:\n",
-    "        if len(truncated + sentence + '. ') <= max_length:\n",
-    "            truncated += sentence + '. '\n",
-    "        else:\n",
-    "            break\n",
-    "    \n",
-    "    # If we couldn't fit any complete sentences, just truncate hard\n",
-    "    if not truncated.strip():\n",
-    "        truncated = text[:max_length-10] + \"...\"\n",
-    "    \n",
-    "    return truncated.strip()\n",
-    "\n",
-    "def talker_openai(message):\n",
-    "    \"\"\"Generate audio from text using OpenAI TTS\"\"\"\n",
-    "    try:\n",
-    "        # Truncate message for TTS\n",
-    "        truncated_message = truncate_for_tts(message)\n",
-    "        \n",
-    "        response = client.audio.speech.create(\n",
-    "            model=\"tts-1\",\n",
-    "            voice=\"onyx\",\n",
-    "            input=truncated_message\n",
-    "        )\n",
-    "\n",
-    "        audio_stream = BytesIO(response.content)\n",
-    "        output_filename = \"output_audio_openai.mp3\"\n",
-    "        with open(output_filename, \"wb\") as f:\n",
-    "            f.write(audio_stream.read())\n",
-    "\n",
-    "        return output_filename\n",
-    "    except Exception as e:\n",
-    "        print(f\"Error generating audio with OpenAI: {str(e)}\")\n",
-    "        return None\n",
-    "\n",
-    "def talker(message, model_choice):\n",
-    "    \"\"\"Generate audio from text using selected model\"\"\"\n",
-    "    return talker_openai(message)\n",
-    "\n",
-    "def get_figma_help_openai(user_question, chat_history):\n",
-    "    \"\"\"Get Figma onboarding assistance using OpenAI\"\"\"\n",
-    "    try:\n",
-    "        messages = [\n",
-    "            {\"role\": \"system\", \"content\": FIGMA_KNOWLEDGE}\n",
-    "        ]\n",
-    "        \n",
-    "        # Convert messages format chat history to OpenAI format\n",
-    "        for msg in chat_history:\n",
-    "            if msg[\"role\"] == \"user\":\n",
-    "                messages.append({\"role\": \"user\", \"content\": msg[\"content\"]})\n",
-    "            elif msg[\"role\"] == \"assistant\":\n",
-    "                messages.append({\"role\": \"assistant\", \"content\": msg[\"content\"]})\n",
-    "        \n",
-    "        messages.append({\"role\": \"user\", \"content\": user_question})\n",
-    "        \n",
-    "        response = client.chat.completions.create(\n",
-    "            model=openAI_model,\n",
-    "            messages=messages,\n",
-    "            max_tokens=500,\n",
-    "            temperature=0.7\n",
-    "        )\n",
-    "        return response.choices[0].message.content\n",
-    "        \n",
-    "    except Exception as e:\n",
-    "        return f\"Sorry, I encountered an error with OpenAI: {str(e)}\"\n",
-    "\n",
-    "def get_figma_help_gemini(user_question, chat_history):\n",
-    "    \"\"\"Get Figma onboarding assistance using Gemini\"\"\"\n",
-    "    try:\n",
-    "        gemini = google.generativeai.GenerativeModel(\n",
-    "            model_name=gemini_model,\n",
-    "            system_instruction=FIGMA_KNOWLEDGE,\n",
-    "        )\n",
-    "        \n",
-    "        # Build conversation context from messages format\n",
-    "        conversation_context = \"\"\n",
-    "        for msg in chat_history:\n",
-    "            if msg[\"role\"] == \"user\":\n",
-    "                conversation_context += f\"User: {msg['content']}\\n\"\n",
-    "            elif msg[\"role\"] == \"assistant\":\n",
-    "                conversation_context += f\"Assistant: {msg['content']}\\n\\n\"\n",
-    "        \n",
-    "        message = conversation_context + f\"User: {user_question}\"\n",
-    "        response = gemini.generate_content(message)\n",
-    "        reply = response.text\n",
-    "        return reply\n",
-    "        \n",
-    "    except Exception as e:\n",
-    "        return f\"Sorry, I encountered an error with Gemini: {str(e)}\"\n",
-    "\n",
-    "def get_figma_help_claude(user_question, chat_history):\n",
-    "    \"\"\"Get Figma onboarding assistance using Claude\"\"\"\n",
-    "    try:\n",
-    "        # Convert messages format to Claude format\n",
-    "        claude_messages = []\n",
-    "        for msg in chat_history:\n",
-    "            if msg[\"role\"] == \"user\":\n",
-    "                claude_messages.append({\"role\": \"user\", \"content\": msg[\"content\"]})\n",
-    "            elif msg[\"role\"] == \"assistant\":\n",
-    "                claude_messages.append({\"role\": \"assistant\", \"content\": msg[\"content\"]})\n",
-    "        \n",
-    "        # Add the current question\n",
-    "        claude_messages.append({\"role\": \"user\", \"content\": user_question})\n",
-    "        \n",
-    "        response = claude.messages.create(\n",
-    "            model=claude_model,\n",
-    "            max_tokens=500,\n",
-    "            temperature=0.7,\n",
-    "            system=promts[\"Charlie\"],\n",
-    "            messages=claude_messages,\n",
-    "        )\n",
-    "        reply = response.content[0].text\n",
-    "        return reply\n",
-    "        \n",
-    "    except Exception as e:\n",
-    "        return f\"Sorry, I encountered an error with Claude: {str(e)}\"\n",
-    "\n",
-    "def respond(message, chat_history, model_choice):\n",
-    "    if not message.strip():\n",
-    "        return \"\", chat_history, \"\", model_choice\n",
-    "    \n",
-    "    bot_message = get_figma_help(message, chat_history, model_choice)\n",
-    "    \n",
-    "    # Add user message and bot response in messages format\n",
-    "    new_history = chat_history + [\n",
-    "        {\"role\": \"user\", \"content\": message},\n",
-    "        {\"role\": \"assistant\", \"content\": bot_message}\n",
-    "    ]\n",
-    "    \n",
-    "    return \"\", new_history, bot_message, model_choice\n",
-    "\n",
-    "def clear_chat():\n",
-    "    \"\"\"Clear the chat history\"\"\"\n",
-    "    return [], \"\", None\n",
-    "\n",
-    "def get_figma_help(user_question, chat_history, model_choice):\n",
-    "    \"\"\"Get Figma onboarding assistance using selected model\"\"\"\n",
-    "    if model_choice == \"OpenAI (GPT-3.5)\":\n",
-    "        return get_figma_help_openai(user_question, chat_history)\n",
-    "    elif model_choice == \"Google Gemini (2.0 Flash)\":\n",
-    "        return get_figma_help_gemini(user_question, chat_history)\n",
-    "    elif model_choice == \"Claude (Sonnet 4)\":\n",
-    "        return get_figma_help_claude(user_question, chat_history)\n",
-    "    else:\n",
-    "        return \"Please select a valid model.\"\n",
-    "\n",
-    "custom_css = \"\"\"\n",
-    "/* Chat area styling */\n",
-    ".styled-chat {\n",
-    "    border-radius: 15px !important;\n",
-    "    box-shadow: 0 4px 12px var(--shadow-color) !important;\n",
-    "    border: 1px solid var(--border-color) !important;\n",
-    "    padding: 10px;\n",
-    "}\n",
-    "\n",
-    "/* Audio player styling */\n",
-    ".styled-audio {\n",
-    "    border-radius: 15px !important;\n",
-    "    box-shadow: 0 4px 12px var(--shadow-color) !important;\n",
-    "    border: 10px solid var(--block-background-fill) !important;\n",
-    "    padding: 10px;\n",
-    "    background-color: var(--background-fill-secondary) !important;\n",
-    "}\n",
-    "\n",
-    "/* Header styling */\n",
-    ".header-container {\n",
-    "    text-align: center;\n",
-    "    padding: 20px;\n",
-    "    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n",
-    "    border-radius: 15px;\n",
-    "    margin-bottom: 20px;\n",
-    "}\n",
-    "\n",
-    ".header-title {\n",
-    "    color: white;\n",
-    "    margin: 0;\n",
-    "    font-size: 2.5em;\n",
-    "}\n",
-    "\n",
-    ".header-subtitle {\n",
-    "    color: #f0f0f0;\n",
-    "    margin: 10px 0 0 0;\n",
-    "    font-size: 1.2em;\n",
-    "}\n",
-    "\n",
-    "/* Features section styling */\n",
-    ".features-container {\n",
-    "    background: #f8f9fa;\n",
-    "    padding: 20px;\n",
-    "    border-radius: 10px;\n",
-    "    border-left: 4px solid #667eea;\n",
-    "}\n",
-    "\n",
-    ".features-title {\n",
-    "    color: #333;\n",
-    "    margin-top: 0;\n",
-    "}\n",
-    "\n",
-    ".features-grid {\n",
-    "    display: grid;\n",
-    "    grid-template-columns: 1fr 1fr;\n",
-    "    gap: 15px;\n",
-    "    margin-top: 15px;\n",
-    "}\n",
-    "\n",
-    ".feature-item {\n",
-    "    color: #333;\n",
-    "    margin: 10px 0;\n",
-    "}\n",
-    "\n",
-    ".feature-title {\n",
-    "    color: #667eea;\n",
-    "}\n",
-    "\n",
-    ".feature-description {\n",
-    "    color: #666;\n",
-    "}\n",
-    "\n",
-    "/* Pro tip styling */\n",
-    ".protip-container {\n",
-    "    text-align: center;\n",
-    "    margin-top: 20px;\n",
-    "    padding: 15px;\n",
-    "    background: #e8f4f8;\n",
-    "    border-radius: 8px;\n",
-    "}\n",
-    "\n",
-    ".protip-text {\n",
-    "    margin: 0;\n",
-    "    color: #2c5aa0 !important;\n",
-    "    font-weight: 500;\n",
-    "}\n",
-    "\n",
-    "/* Quick start questions styling */\n",
-    ".quickstart-container {\n",
-    "    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n",
-    "    padding: 15px 20px;\n",
-    "    border-radius: 10px;\n",
-    "    margin: 20px 0;\n",
-    "}\n",
-    "\n",
-    ".quickstart-title {\n",
-    "    color: white !important;\n",
-    "    margin: 0;\n",
-    "    font-size: 1.3em;\n",
-    "    text-align: center;\n",
-    "}\n",
-    "\n",
-    ".quickstart-subtitle {\n",
-    "    color: #f0f8ff !important;\n",
-    "    margin: 5px 0 0 0;\n",
-    "    text-align: center;\n",
-    "    font-size: 0.9em;\n",
-    "}\n",
-    "\"\"\"\n",
-    "\n",
-    "# Create Gradio interface\n",
-    "with gr.Blocks(title=\"Figma Onboarding Assistant\", theme=gr.themes.Soft(), css=custom_css) as demo:\n",
-    "    gr.HTML(\n",
-    "        \"\"\"\n",
-    "        <div class=\"header-container\">\n",
-    "            <h1 class=\"header-title\">🎨 Figma Onboarding Assistant</h1>\n",
-    "            <p class=\"header-subtitle\">Your AI-powered Figma learning companion</p>\n",
-    "        </div>\n",
-    "        \n",
-    "        <div class=\"features-container\">\n",
-    "            <h3 class=\"features-title\">✨ What I can help you with:</h3>\n",
-    "            <div class=\"features-grid\">\n",
-    "                <div>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🚀 Getting Started</strong><br/>\n",
-    "                    <span class=\"feature-description\">Interface overview, basic navigation</span></p>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🛠️ Tools & Features</strong><br/>\n",
-    "                    <span class=\"feature-description\">Pen tool, shapes, text, layers</span></p>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">📐 Auto Layout</strong><br/>\n",
-    "                    <span class=\"feature-description\">Responsive design techniques</span></p>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🔗 Prototyping</strong><br/>\n",
-    "                    <span class=\"feature-description\">Interactions and animations</span></p>\n",
-    "                </div>\n",
-    "                <div>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">🧩 Components</strong><br/>\n",
-    "                    <span class=\"feature-description\">Creating reusable elements</span></p>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">👥 Collaboration</strong><br/>\n",
-    "                    <span class=\"feature-description\">Sharing and team workflows</span></p>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">📚 Design Systems</strong><br/>\n",
-    "                    <span class=\"feature-description\">Libraries and style guides</span></p>\n",
-    "                    <p class=\"feature-item\"><strong class=\"feature-title\">⚡ Shortcuts</strong><br/>\n",
-    "                    <span class=\"feature-description\">Productivity tips and tricks</span></p>\n",
-    "                </div>\n",
-    "            </div>\n",
-    "        </div>\n",
-    "        \n",
-    "        <div class=\"protip-container\">\n",
-    "            <p class=\"protip-text\">💡 Pro tip: Ask specific questions like \"How do I create a button component?\" for the best results!</p>\n",
-    "        </div>\n",
-    "        \"\"\"\n",
-    "    )\n",
-    "    \n",
-    "    # Model selection dropdown\n",
-    "    model_dropdown = gr.Dropdown(\n",
-    "        choices=[\"OpenAI (GPT-3.5)\", \"Google Gemini (2.0 Flash)\", \"Claude (Sonnet 4)\"],\n",
-    "        value=\"OpenAI (GPT-3.5)\",\n",
-    "        label=\"Select AI Model\",\n",
-    "        info=\"Choose which AI model to use for responses\"\n",
-    "    )\n",
-    "    \n",
-    "    with gr.Row():\n",
-    "        msg = gr.Textbox(\n",
-    "            placeholder=\"Type your Figma question here...\",\n",
-    "            container=False,\n",
-    "            scale=4\n",
-    "        )\n",
-    "        submit_btn = gr.Button(\"Ask\", scale=1, variant=\"primary\")\n",
-    "        clear_btn = gr.Button(\"Clear Chat\", scale=1)\n",
-    "        audio_btn = gr.Button(\"🔊 Play Audio\", scale=1, variant=\"secondary\")\n",
-    "        clear_audio_btn = gr.Button(\"🔇 Clear Audio\", scale=1, variant=\"secondary\")\n",
-    "    \n",
-    "\n",
-    "    # Example questions\n",
-    "    gr.HTML(\n",
-    "        \"\"\"\n",
-    "        <div class=\"quickstart-container\">\n",
-    "            <h3 class=\"quickstart-title\">🚀 Quick Start Questions</h3>\n",
-    "            <p class=\"quickstart-subtitle\">Click any question below to get started instantly!</p>\n",
-    "        </div>\n",
-    "        \"\"\"\n",
-    "    )\n",
-    "    \n",
-    "    with gr.Row():\n",
-    "        example_btns = [\n",
-    "            gr.Button(\n",
-    "                \"How do I create my first frame?\", \n",
-    "                size=\"sm\",\n",
-    "                variant=\"secondary\"\n",
-    "            ),\n",
-    "            gr.Button(\n",
-    "                \"What's the difference between components and instances?\", \n",
-    "                size=\"sm\",\n",
-    "                variant=\"secondary\"\n",
-    "            ),\n",
-    "            gr.Button(\n",
-    "                \"How do I use Auto Layout?\", \n",
-    "                size=\"sm\",\n",
-    "                variant=\"secondary\"\n",
-    "            ),\n",
-    "            gr.Button(\n",
-    "                \"How do I create a prototype?\", \n",
-    "                size=\"sm\",\n",
-    "                variant=\"secondary\"\n",
-    "            )\n",
-    "        ]\n",
-    "\n",
-    "    # Your components with simple styling\n",
-    "    chatbot = gr.Chatbot(\n",
-    "        type=\"messages\",\n",
-    "        height=400,\n",
-    "        placeholder=\"Ask me anything about Figma! For example: 'How do I create a component?' or 'What are frames in Figma?'\",\n",
-    "        elem_classes=[\"styled-chat\"]\n",
-    "    )\n",
-    "\n",
-    "    audio_output = gr.Audio(\n",
-    "        label=\"Audio Response\",\n",
-    "        visible=True,\n",
-    "        elem_classes=[\"styled-audio\"]\n",
-    "    )\n",
-    "\n",
-    "    last_response = gr.State(\"\")\n",
-    "    current_model = gr.State(\"OpenAI (GPT-3.5)\")\n",
-    "    \n",
-    "    def respond(message, chat_history, model_choice):\n",
-    "        if not message.strip():\n",
-    "            return \"\", chat_history, \"\", model_choice\n",
-    "        \n",
-    "        bot_message = get_figma_help(message, chat_history, model_choice)\n",
-    "        new_history = chat_history + [\n",
-    "            {\"role\": \"user\", \"content\": message},\n",
-    "            {\"role\": \"assistant\", \"content\": bot_message}]\n",
-    "        return \"\", new_history, bot_message, model_choice\n",
-    "    \n",
-    "    def play_audio(last_message, model_choice):\n",
-    "        if last_message:\n",
-    "            audio_file = talker(last_message, model_choice)\n",
-    "            if audio_file:\n",
-    "                return audio_file\n",
-    "        return None\n",
-    "    \n",
-    "    def clear_audio():\n",
-    "        \"\"\"Clear the audio output\"\"\"\n",
-    "        return None\n",
-    "    \n",
-    "    def use_example(example_text):\n",
-    "        return example_text\n",
-    "    \n",
-    "    # Set up interactions\n",
-    "    submit_btn.click(\n",
-    "        respond, \n",
-    "        inputs=[msg, chatbot, model_dropdown], \n",
-    "        outputs=[msg, chatbot, last_response, current_model]\n",
-    "    )\n",
-    "    msg.submit(\n",
-    "        respond, \n",
-    "        inputs=[msg, chatbot, model_dropdown], \n",
-    "        outputs=[msg, chatbot, last_response, current_model]\n",
-    "    )\n",
-    "    clear_btn.click(clear_chat, outputs=[chatbot, msg, last_response])\n",
-    "    \n",
-    "    # Audio button functionality - now uses selected model\n",
-    "    audio_btn.click(\n",
-    "        play_audio,\n",
-    "        inputs=[last_response, current_model],\n",
-    "        outputs=[audio_output]\n",
-    "    )\n",
-    "    \n",
-    "    # Clear audio button functionality\n",
-    "    clear_audio_btn.click(\n",
-    "        clear_audio,\n",
-    "        outputs=[audio_output]\n",
-    "    )\n",
-    "    \n",
-    "    # Example button clicks\n",
-    "    for i, btn in enumerate(example_btns):\n",
-    "        btn.click(\n",
-    "            use_example,\n",
-    "            inputs=[btn],\n",
-    "            outputs=[msg]\n",
-    "        )\n",
-    "\n",
-    "# Launch the app\n",
-    "demo.launch(share=True)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "90b29a7d-aec8-49d2-83c7-3e3ab96c47e1",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "venv",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.11.13"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}